/* ═══════════════════════════════════════════════════════════
   Sydney Ironing — Contact Page
   ═══════════════════════════════════════════════════════════ */

/* CF7's own inline response box (success AND error/validation messages)
   is hidden unconditionally now that the success toast covers that case —
   client-requested, aware this also hides error/validation feedback on
   screen. aria-hidden (CF7's own attribute) still lets screen readers get
   the message even though it's visually hidden here. */
.contact-cf7-wrap .wpcf7-response-output { display: none; }

/* Vertical-center the spinner with the submit button. The spinner and
   button are both inline-level siblings, so plain vertical-align:middle
   on the spinner alone doesn't work reliably (still off by ~11px in
   testing) — the line box is dominated by the taller submit button.
   Flexbox on their shared row is the reliable fix. Scoped with :has() to
   just the row containing the spinner, since .col-md-12.center is CF7's
   generic wrapper class shared by every field row in this form (its
   markup lives in the CF7 form editor/database, not a theme file, so it
   can't be given a dedicated class to target instead). */
.col-md-12.center:has(.wpcf7-spinner) {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Success toast ──
   z-index 1000 sits just above the site's highest existing value (999, the
   sticky header) rather than an arbitrary 9999. */
.si-toast-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.si-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px -20px rgba(30, 27, 46, .35);
    padding: 14px 14px 14px 16px;
    max-width: 360px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .22s ease-out, transform .22s ease-out;
}

.si-toast.si-toast--show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.si-toast.si-toast--leaving {
    transition-timing-function: ease-in;
    opacity: 0;
    transform: translateY(6px) scale(.98);
}

.si-toast-icon {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.si-toast-body { flex: 1; padding-top: 2px; }
.si-toast-title { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--text); margin-bottom: 2px; }
.si-toast-desc { font-size: 16px; color: var(--text-muted); line-height: 1.45; }

.si-toast-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -14px -14px -14px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-hint);
    transition: color .15s ease;
}
.si-toast-close:hover,
.si-toast-close:focus-visible { color: var(--text); }
.si-toast-close:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .si-toast {
        transition: opacity .12s linear;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .si-toast-wrap { left: 16px; right: 16px; bottom: 16px; }
    .si-toast { max-width: none; }
}