:root {
    --suhara-leads-accent: #9D5248;
    --suhara-leads-accent-strong: #902E15;
    --suhara-leads-on-accent: #FFF8E1;
    --suhara-leads-surface: #f8f1e9;
    --suhara-leads-surface-muted: #EDD3C3;
    --suhara-leads-text: #333333;
    --suhara-leads-text-muted: #8A7A70;
    --suhara-leads-border: rgba(157, 82, 72, .18);
    --suhara-leads-scrim: rgba(60, 30, 20, .5);
    --suhara-leads-radius: 14px;
    --suhara-leads-font: 'lotus', Tahoma, Arial, sans-serif;
}

.suhara-leads-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--suhara-leads-scrim);
    font-family: var(--suhara-leads-font);
}

.suhara-leads-modal.is-open {
    display: flex;
}

.suhara-leads-modal__card {
    position: relative;
    width: 100%;
    max-width: 360px;
    background: var(--suhara-leads-surface);
    border-radius: var(--suhara-leads-radius);
    padding: 28px 20px 20px;
    text-align: center;
    direction: rtl;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}

/*
 * hello-elementor's reset.css puts a 1px #c36 border and a #c36/white hover
 * fill on every plain <button> and [type=button] sitewide, with no
 * !important of its own — so a custom button here must restate its own
 * resting AND hover/focus/active state explicitly, every time, or the
 * theme's reset wins on ties (documented trap, see ai-working-notes.md §3).
 */
.suhara-leads-modal .suhara-leads-modal__close {
    position: absolute;
    top: 8px;
    inset-inline-end: 12px;
    background: none !important;
    border: none !important;
    font-size: 34px;
    line-height: 1;
    color: var(--suhara-leads-text-muted);
    cursor: pointer;
    padding: 8px;
}

.suhara-leads-modal .suhara-leads-modal__close:hover,
.suhara-leads-modal .suhara-leads-modal__close:focus,
.suhara-leads-modal .suhara-leads-modal__close:active {
    background: none !important;
    border: none !important;
    color: var(--suhara-leads-text-muted);
}

.suhara-leads-modal__headline {
    margin: 0 0 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--suhara-leads-accent-strong);
}

.suhara-leads-modal__body {
    margin: 0 0 18px;
    font-size: .95rem;
    color: var(--suhara-leads-text);
    line-height: 1.6;
}

.suhara-leads-modal__input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--suhara-leads-border);
    border-radius: 10px;
    background: var(--suhara-leads-surface-muted);
    color: var(--suhara-leads-text);
    font-size: 1rem;
    text-align: left;
    direction: ltr;
}

/*
 * The close-after-submit button reuses this exact same class (see
 * modal.php) so it is pixel-identical to submit and truly replaces it —
 * not a second, differently-styled button underneath it.
 */
.suhara-leads-modal .suhara-leads-modal__submit[hidden] {
    display: none;
}

.suhara-leads-modal .suhara-leads-modal__submit {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 10px;
    background-color: #9D5248;
    color: #f8f1e9;
    font-family: var(--suhara-leads-font);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.suhara-leads-modal .suhara-leads-modal__submit:hover,
.suhara-leads-modal .suhara-leads-modal__submit:focus,
.suhara-leads-modal .suhara-leads-modal__submit:active {
    background-color: #9D5248 !important;
    color: #f8f1e9 !important;
}

.suhara-leads-modal__fineprint {
    margin: 12px 0 0;
    font-size: .75rem;
    color: var(--suhara-leads-text-muted);
}

.suhara-leads-modal__message {
    display: block;
    margin-top: 10px;
    font-size: .85rem;
    color: var(--suhara-leads-accent-strong);
    min-height: 1.2em;
}