/* =====================================================================
   THANK-YOU POPUP  (.tzp-*)
   ---------------------------------------------------------------------
   The /thank-you experience, as a modal. Pairs with
   resources/views/partials/thank-you-popup.blade.php and
   assets/js/thank-you-popup.js — that JS opens it after a successful
   enquiry submit (on any page — the visitor never leaves the page they
   were on) and auto-opens it on /thank-you itself.

   Design: the client's reference — muted blue-grey card, condensed
   uppercase display heading on the right, brand lockup top-left, white
   close disc top-right, "Follow us" + outlined social discs bottom-left.

   Class names are deliberately .tzp-* only: main.js owns .model/.close/
   .overlay, and nothing here may trigger closeModel() by accident.
   ===================================================================== */

/* ---------- overlay + card shell ---------------------------------- */
.tzp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100; /* above site modals (999) and the promo offer (10050); below the cookie banner (99999) */
    display: flex;
    padding: clamp(14px, 3vw, 40px);
    background: rgba(26, 30, 35, 0.52);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.tzp-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.tzp-card {
    position: relative;
    margin: auto; /* centres, and stays scrollable when taller than the screen */
    width: min(1040px, 100%);
    min-height: min(560px, 78vh);
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(24px, 4vw, 56px);
    padding: clamp(24px, 3.2vw, 46px);
    background: #B8C4CF; /* the reference card tone */
    border-radius: 16px;
    box-shadow: 0 32px 90px rgba(10, 14, 18, 0.38);
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transform: translateY(16px) scale(0.975);
    transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.3, 1), opacity 0.4s ease;
}
.tzp-overlay.is-open .tzp-card {
    opacity: 1;
    transform: none;
}

/* ---------- brand lockup (top-left) -------------------------------- */
.tzp-brand {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    line-height: 0;
}
.tzp-brand img {
    display: block;
    width: clamp(92px, 8.5vw, 112px);
    height: auto;
    /* flat-white lockup: the red/black master logo filtered to a solid
       white silhouette so it reads on the blue-grey card (reference: white
       wordmark on the card). */
    filter: brightness(0) invert(1);
}

/* ---------- close disc (top-right) --------------------------------- */
.tzp-close {
    position: absolute;
    top: clamp(16px, 2.2vw, 28px);
    right: clamp(16px, 2.2vw, 28px);
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #111111;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(10, 14, 18, 0.14);
    transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.3, 1), box-shadow 0.3s ease;
}
.tzp-close:hover {
    transform: rotate(90deg) scale(1.06);
    box-shadow: 0 4px 16px rgba(10, 14, 18, 0.22);
}
.tzp-close:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
.tzp-close svg {
    display: block;
}

/* ---------- message block (right column) ---------------------------- */
.tzp-body {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: clamp(6px, 3.2vh, 40px);
}
.tzp-title {
    margin: 0;
    font-family: "Anton", "Arial Narrow", Impact, sans-serif;
    font-weight: 400; /* Anton ships one weight */
    font-size: clamp(38px, 5.4vw + 8px, 74px);
    line-height: 0.98;
    letter-spacing: 0.004em;
    text-transform: uppercase;
    color: #0B0B0B;
}
.tzp-note {
    margin: clamp(18px, 3.2vh, 32px) 0 0;
    font-size: clamp(13.5px, 0.9vw + 4px, 16px);
    line-height: 1.55;
    font-weight: 600;
    color: #0A0A0A;
}
.tzp-note strong {
    font-weight: 700;
}

/* ---------- follow-us row (bottom-left) ----------------------------- */
.tzp-foot {
    grid-column: 1;
    grid-row: 3;
    margin-top: clamp(26px, 5vh, 56px);
}
.tzp-follow {
    margin: 0 0 14px;
    font-size: clamp(14px, 0.5vw + 4px, 16px);
    font-weight: 700;
    color: #0A0A0A;
}
.tzp-social {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.tzp-soc {
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.3px solid rgba(10, 10, 10, 0.85);
    border-radius: 50%;
    color: #0A0A0A;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.tzp-soc:hover,
.tzp-soc:focus-visible {
    background: #0D0D0D;
    color: #FFFFFF;
    border-color: #0D0D0D;
}
.tzp-soc:active {
    transform: scale(0.94);
}
.tzp-soc:focus-visible {
    outline: 2px solid #111111;
    outline-offset: 3px;
}
.tzp-soc svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* ---------- phones: single column ----------------------------------- */
@media only screen and (max-width: 760px) {
    .tzp-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        min-height: 0;
        padding: 24px 22px 28px;
        border-radius: 16px;
    }
    .tzp-brand {
        grid-column: 1;
        grid-row: 1;
    }
    .tzp-body {
        grid-column: 1;
        grid-row: 2;
        margin-top: 34px;
    }
    .tzp-title {
        font-size: clamp(34px, 7.2vw + 12px, 56px);
    }
    .tzp-note {
        margin-top: 18px;
    }
    .tzp-foot {
        grid-column: 1;
        grid-row: 3;
        margin-top: 30px;
    }
    .tzp-close {
        width: 42px;
        height: 42px;
    }
}

/* ---------- /thank-you fallback page (no-JS + pre-open state) ------- */
/* Sits behind the popup; it is what a visitor with scripts off sees. */
.tzp-page {
    padding: clamp(80px, 14vh, 160px) 0 clamp(90px, 16vh, 180px);
    min-height: 60vh;
}
.tzp-page .container {
    max-width: 720px;
}
.tzp-page h1 {
    margin: 0 0 18px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 600;
    color: #171717;
}
.tzp-page__msg {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
    color: #45454B;
}
.tzp-page__note {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.6;
    color: #6B6B72;
}

/* ---------- enquiry submit loading veil ----------------------------- */
/* .modal1_1 was an unstyled logo block shown while a form posted (it
   shifted the page layout). Styled here as a proper centred veil so the
   now-AJAX submit (thank-you-popup.js) reads as a deliberate loading
   state instead of a layout glitch. Shown/hidden by the same jQuery
   .show()/.hide() calls the site already used. */
.modal1_1 {
    position: fixed;
    inset: 0;
    z-index: 10060; /* over site modals + promo, under the thank-you popup */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(249, 249, 249, 0.88);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.modal1_1 .center1_1 {
    line-height: 0;
}
.modal1_1 .center1_1 img {
    width: 128px;
    height: auto;
    animation: tzp-veil-pulse 1.4s ease-in-out infinite;
}
@keyframes tzp-veil-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.96); }
}

/* ---------- reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .tzp-overlay,
    .tzp-card,
    .tzp-close,
    .tzp-soc {
        transition: none !important;
    }
    .tzp-card {
        transform: none;
    }
    .modal1_1 .center1_1 img {
        animation: none;
    }
}