/* ============================================================================
   Espressimo Club / Newsletter popup + Elementor Pro Form — design-system skin.
   USAGE: add the CSS class  esp-club  to the popup's top CONTAINER (Advanced →
   CSS Classes) so it wraps the heading + form. Palette matches the checkout:
   cream #fff9f2 · card #f6ede3 · border #e6dad4 · ink #522c25 · accent #c46500
   · brand #8B3A00 · font 'Dialect PM'. RTL.
   ============================================================================ */

.esp-club {
    --esp-cream:#fff9f2; --esp-card:#f6ede3; --esp-bd:#e6dad4;
    --esp-ink:#522c25; --esp-acc:#c46500; --esp-brand:#8B3A00;
    direction: rtl; text-align: right; color: var(--esp-ink);
}
.esp-club, .esp-club * { font-family: 'Dialect PM', sans-serif !important; }

/* ---- Popup box → cream card with breathing room (was cramped / overlapping the close X) ---- */
.esp-club.e-con,
.elementor-location-popup .esp-club {
    background: var(--esp-cream) !important;
    padding: 44px 42px 34px !important;
    border-radius: 16px;
}
.esp-club > .e-con-inner { padding: 0 !important; }

/* ---- Small picture stripe (client 2026-07-10). Baked-in band across the top of the
   cream card, using the Thank-You page hero image — NO Elementor widget needed.
   To change the picture later, just swap the URL below. ---- */
.esp-club > .e-con-inner::before,
.esp-club .elementor-widget-wrap::before {
    content: "";
    display: block;
    margin: -44px -42px 24px;
    /* FIXED compact height so the whole popup fits with NO scrollbar (client 2026-07-26).
       Image is a 1000×400 banner (2.5:1) with the cup centred; center/cover frames the cup.
       (aspect-ratio made the band ~295px on desktop → popup overflowed → scrollbar.) */
    height: 150px;
    /* Crop pinned to the BOTTOM so the cup body + saucer + beans show and the dark wood /
       steam at the top is trimmed (client 2026-07-26: "more cup, less top, show the bottom"). */
    background: url('/wp-content/uploads/2026/07/mike-kenneally-tNALoIZhqVM-unsplash-p8blirhxja726eoikb1qvl1jxtq3r6qg5zkfy46heo.jpg') center bottom / cover no-repeat;
    background-color: var(--esp-cream);
    border-radius: 16px 16px 0 0;
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    .esp-club > .e-con-inner::before,
    .esp-club .elementor-widget-wrap::before { height: 120px; }
}

/* ---- Heading → brand colour, centered, spaced (was default cyan, cramped) ---- */
.esp-club .elementor-heading-title {
    color: var(--esp-brand) !important;
    text-align: center !important;
    font-size: clamp(30px, 6.5vw, 40px) !important; /* client 2026-07-10: bigger */
    line-height: 1.2 !important;
    font-weight: 700 !important;
    margin: 0 0 24px !important;
}

/* ---- Spacing between fields + button ---- */
.esp-club .elementor-field-group { margin-bottom: 16px !important; }
.esp-club .e-form__buttons { margin-top: 6px !important; }

/* headings / copy inside the popup */
.esp-club h1, .esp-club h2, .esp-club h3, .esp-club h4 { color: var(--esp-ink); }
.esp-club .esp-club__accent, .esp-club strong { color: var(--esp-brand); }

/* ---- Elementor Pro Form ---- */
.esp-club .elementor-field-group > label,
.esp-club .elementor-field-label { color: var(--esp-ink) !important; font-size: 16px !important; }

.esp-club .elementor-field-textual {
    background: var(--esp-cream) !important;
    border: 1px solid var(--esp-bd) !important;
    border-radius: 8px !important;
    color: var(--esp-ink) !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    box-shadow: none !important;
}
.esp-club .elementor-field-textual:focus {
    border-color: var(--esp-acc) !important;
    box-shadow: 0 0 0 1px var(--esp-acc) !important;
    outline: none !important;
}
.esp-club .elementor-field-textual::placeholder { color: var(--esp-ink); opacity: .5; }

/* required asterisk in the accent colour */
.esp-club .elementor-mark-required .elementor-field-label:after { color: var(--esp-acc) !important; }

/* acceptance checkbox + privacy link */
.esp-club .elementor-field-type-acceptance .elementor-field-subgroup,
.esp-club .elementor-field-type-acceptance label { color: var(--esp-ink) !important; font-size: 14.5px !important; }
.esp-club .elementor-field-type-acceptance input[type="checkbox"] { accent-color: var(--esp-brand); width: 17px; height: 17px; }
.esp-club .elementor-field-type-acceptance a { color: var(--esp-brand) !important; text-decoration: underline; }

/* submit button → brand */
.esp-club .elementor-button,
.esp-club button[type="submit"] {
    background: var(--esp-brand) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    padding: 14px 24px !important;
    box-shadow: none !important;
    transition: background-color .15s;
}
.esp-club .elementor-button:hover,
.esp-club button[type="submit"]:hover { background: #6f4e37 !important; }

/* success / error messages keep meaning, matched tone */
.esp-club .elementor-message.elementor-message-success { color: #2e7d32 !important; }
.esp-club .elementor-message.elementor-message-danger,
.esp-club .elementor-field-group.elementor-error .elementor-field-textual { color: #cc1818 !important; border-color: #cc1818 !important; }