/* ==========================================================================
   Newsletter sign-up popup (Views/partials/subscribe-dialog.php)
   ========================================================================== */

html.has-dialog { overflow: hidden; } /* no page scrolling behind the popup */

.subscribe-dialog {
    width: min(100% - 32px, 480px); max-height: calc(100dvh - 32px);
    margin: auto; padding: 0; border: 0; border-radius: 20px;
    background: #fff; color: var(--ink); box-shadow: var(--shadow-lg);
    overflow: auto; overscroll-behavior: contain;
}
.subscribe-dialog::backdrop { background: rgba(47, 42, 53, .55); backdrop-filter: blur(3px); }

@media (prefers-reduced-motion: no-preference) {
    .subscribe-dialog[open] { animation: subscribe-in .28s ease-out; }
    .subscribe-dialog[open]::backdrop { animation: subscribe-fade .28s ease-out; }
}
@keyframes subscribe-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes subscribe-fade { from { opacity: 0; } to { opacity: 1; } }

/* Brand strip along the top, in the five icon colours */
.subscribe-dialog__panel { position: relative; padding: 40px 32px 28px; }
.subscribe-dialog__panel::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 6px;
    background: linear-gradient(90deg, var(--mauve) 0 20%, var(--sage) 20% 40%, var(--pale) 40% 60%, var(--peach) 60% 80%, var(--slate) 80%);
}
@media (max-width: 480px) { .subscribe-dialog__panel { padding: 36px 20px 22px; } }

.subscribe-dialog__close {
    position: absolute; top: 14px; right: 14px;
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
}
.subscribe-dialog__close:hover { background: var(--pale-soft); color: var(--slate); }
.subscribe-dialog__close .icon { width: 20px; height: 20px; }

.subscribe-dialog__badge {
    display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px;
    border-radius: 16px; background: var(--peach-soft); color: var(--peach-dark);
}
.subscribe-dialog__badge .icon { width: 28px; height: 28px; }
.subscribe-dialog__badge--done { background: var(--sage-soft); color: #6f7a3f; }

.subscribe-dialog__title { font-size: 1.65rem; margin: 0 0 8px; padding-right: 32px; }
.subscribe-dialog__title:focus { outline: none; }
.subscribe-dialog__lead { margin: 0 0 22px; color: var(--muted); }

.subscribe-dialog__done { text-align: center; padding: 8px 0 4px; }
.subscribe-dialog__done .subscribe-dialog__badge { margin-inline: auto; }
.subscribe-dialog__done .subscribe-dialog__title { padding-right: 0; }

/* ---- Form ---- */
.subscribe-form { display: grid; gap: 16px; }
.subscribe-form__field { display: grid; gap: 6px; }
.subscribe-form__field label { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.subscribe-form__field input {
    width: 100%; height: 48px; padding: 0 14px;
    font: inherit; font-size: 1rem; color: var(--ink);
    background: var(--cream); border: 1.5px solid var(--line); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
.subscribe-form__field input:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px var(--pale); }
.subscribe-form__field input[aria-invalid="true"] { border-color: #c2554a; }
.subscribe-form__field input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 85, 74, .2); }
.subscribe-form__error { margin: 0; font-size: .88rem; color: #b04a40; }

.subscribe-form__alert {
    margin: 0; padding: 12px 14px; border-radius: 12px;
    background: #fbeceb; color: #8f3a32; font-size: .92rem;
}

/* Honeypot: off screen rather than display:none, which some bots skip */
.subscribe-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.subscribe-form__submit { width: 100%; margin-top: 4px; }
.subscribe-form__submit:disabled { cursor: progress; opacity: .85; }
.subscribe-form__spinner {
    display: none; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
}
.subscribe-form__submit.is-busy .subscribe-form__spinner { display: inline-block; animation: subscribe-spin .8s linear infinite; }
@keyframes subscribe-spin { to { transform: rotate(360deg); } }

.subscribe-form__privacy { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.subscribe-form__privacy a { color: var(--slate); }