/* =====================================================================================================
   Contact pop-up (<dialog id="contact-dialog">) and its form. Logic in js/contact-form.js; the form is
   handled by src/worker.js at POST /api/contact.
   Light card in the landing's style: Poppins, soft grey rounded inputs, a thin brand-gradient accent line on
   top, title image (resource 36) and the brand-gradient submit button. After a successful send the form is replaced by a
   confirmation with a countdown bar, and the pop-up closes itself (see [data-state="sent"] below).
   ===================================================================================================== */

.contact-dialog {
    --cd-pad: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
    --cd-field-bg: #f3f3f3;
    --cd-field-radius: 0.875rem;
    --cd-error: #b3261e;
    --cd-ok: #2f7d57;
    --contact-close-delay: 3s;              /* overridden by js/contact-form.js so the bar matches its timer */

    width: min(44rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--white);
    color: var(--text);
    font-family: var(--font-body);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

/* Thin brand-gradient accent line along the top edge. */
.contact-dialog::before {
    content: "";
    display: block;
    height: 5px;
    background: var(--brand-gradient);
}

.contact-dialog[open] { animation: dialog-in 0.35s var(--ease-out); }

.contact-dialog::backdrop {
    background: rgba(24, 24, 24, 0.55);
    backdrop-filter: blur(6px);
}

.contact-dialog[open]::backdrop { animation: backdrop-in 0.35s ease; }

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Keep the page from scrolling behind the pop-up */
body:has(.contact-dialog[open]) { overflow: hidden; }

/* ----- Header ---------------------------------------------------------------------------------------- */

.contact-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: var(--cd-pad) var(--cd-pad) 0;
}

.contact-dialog__title img {
    /* Resource 36 (title image), about the cap height of the old live-text title. */
    width: auto;
    height: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
}

.contact-dialog__intro {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.contact-dialog__close {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    margin: -0.5rem -0.5rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    transition: color 0.2s ease, background-color 0.2s ease;
}
.contact-dialog__close:hover { color: var(--text-strong); background: rgba(0, 0, 0, 0.06); }
.contact-dialog__close svg { width: 1.25rem; height: 1.25rem; }

/* ----- Form ------------------------------------------------------------------------------------------ */

/* Phones: two columns too, every field full width except Company and Phone, side by side (shorter pop-up). */
.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 0.75rem;
    padding: 1.25rem var(--cd-pad) var(--cd-pad);
}

.contact-form > * { grid-column: 1 / -1; }
.contact-form > .contact-form__half { grid-column: auto; }

@media (min-width: 640px) {
    .contact-form { column-gap: 1.25rem; padding-top: 1.5rem; }
    .contact-form > .field { grid-column: auto; }
    .contact-form > .contact-form__full { grid-column: 1 / -1; }
}

.field label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-strong);
}

.field input,
.field textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--cd-field-radius);
    background: var(--cd-field-bg);
    color: var(--text-strong);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.field textarea { resize: vertical; min-height: 6.5rem; }

.field input::placeholder,
.field textarea::placeholder { color: #a3a3a3; }

.field input:hover,
.field textarea:hover { border-color: var(--line); }

.field input:focus,
.field textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--brand-violet);
    box-shadow: 0 0 0 3px rgba(109, 103, 187, 0.2);
}

.field [aria-invalid="true"],
.field [aria-invalid="true"]:hover { border-color: var(--cd-error); }
.field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }

.field-error {
    margin-top: 0.35rem;
    font-size: var(--text-xs);
    color: var(--cd-error);
}

.field-error:empty { display: none; }

.req { color: var(--brand-magenta); }

/* ----- GDPR consent and notice ----------------------------------------------------------------------- */

.privacy-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text);
    cursor: pointer;
}

.privacy-check {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.15rem 0 0;
    flex-shrink: 0;
    accent-color: var(--brand-violet);
    cursor: pointer;
}

.privacy-check[aria-invalid="true"] { outline: 2px solid var(--cd-error); outline-offset: 2px; }

.privacy-toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-violet);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.privacy-toggle:hover { color: var(--brand-magenta); }

.privacy-info {
    margin-top: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: var(--cd-field-radius);
    background: var(--cd-field-bg);
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--text);
}
.privacy-info p + p { margin-top: 0.3rem; }
.privacy-info strong { font-weight: 600; color: var(--text-strong); }
.privacy-info a {
    color: var(--brand-violet);
    font-weight: 500;
    text-underline-offset: 0.2em;
}
.privacy-info a:hover { color: var(--brand-magenta); }

/* ----- Turnstile, submit ----------------------------------------------------------------------------- */

.contact-form__turnstile { display: flex; justify-content: center; }
.contact-form__turnstile:empty { display: none; }

.contact-form__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding-top: 0.25rem;
}

.contact-form__submit {
    min-width: 12rem;
    padding: 0.95rem 2.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-base);
    box-shadow: 0 8px 20px rgba(109, 103, 187, 0.25);
}
.contact-form__submit:focus-visible { outline-offset: 4px; }

.contact-form__spinner {
    width: 0.95rem;
    height: 0.95rem;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Status (error or confirmation) ---------------------------------------------------------------- */

.contact-form__status {
    padding: 0.9rem 1.25rem;
    border-radius: var(--cd-field-radius);
    font-size: var(--text-sm);
    text-align: center;
}
.contact-form__status:focus { outline: none; }

.contact-form__status[data-kind="error"] { background: #fdf0ef; color: var(--cd-error); }

/* Only the confirmation has an icon, a hint and the countdown bar. */
.contact-form__status-icon,
.contact-form__status-hint,
.contact-form__countdown { display: none; }

/* Confirmation view: the rest of the form (and the intro) is hidden and the status becomes the content. */
.contact-dialog[data-state="sent"] .contact-dialog__intro,
.contact-dialog[data-state="sent"] .contact-form > :not(.contact-form__status) { display: none; }

.contact-dialog[data-state="sent"] .contact-form { padding-top: 1.5rem; }

.contact-form__status[data-kind="ok"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: clamp(1.5rem, 1rem + 3vw, 2.75rem) clamp(1rem, 0.5rem + 3vw, 2.5rem);
    background: var(--cd-field-bg);
    color: var(--text-strong);
}

.contact-form__status[data-kind="ok"] .contact-form__status-icon {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.8rem;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: var(--white);
}

.contact-form__status[data-kind="ok"] .contact-form__status-text {
    max-width: 26rem;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
}

.contact-form__status[data-kind="ok"] .contact-form__status-hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.contact-form__status[data-kind="ok"] .contact-form__countdown {
    display: block;
    width: min(12rem, 100%);
    height: 4px;
    margin-top: 0.25rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.08);
}

.contact-form__countdown > span {
    display: block;
    height: 100%;
    background: var(--brand-gradient);
    transform-origin: left center;
}

.contact-dialog[data-state="sent"] .contact-form__countdown > span {
    animation: countdown var(--contact-close-delay) linear forwards;
}

@keyframes countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ----- Reduced motion -------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .contact-dialog[open],
    .contact-dialog[open]::backdrop { animation: none; }
    .contact-form__spinner { animation-duration: 2.5s; }
    /* No shrinking bar: the hint text already says the pop-up will close. */
    .contact-form__status[data-kind="ok"] .contact-form__countdown { display: none; }
}

/* Touch screens: keep form text at 16px, or iOS zooms the page in when a field gets focus (the page's root font
   size is 90%). */
@media (pointer: coarse) {
    .field input,
    .field textarea { font-size: 16px; }
}