/* Admin-built popups (Filament > Popups). Only loaded on pages that
   actually render one — see partials/site-popups.blade.php. z-index sits
   above the WhatsApp bubble (9998) but under the cookie banner (10000),
   so the cookie choice stays reachable. Colours come from the theme
   variables just below, so every block adapts to whichever theme is set. */

/* ---- Themes ------------------------------------------------------------ */
.ap-popup {
    --ap-bg: #f6f7f8;
    --ap-fg: #3d4852;
    --ap-title: #004d65;
    --ap-accent: #FC6304;
    --ap-link: #004d65;
    --ap-btn-bg: linear-gradient(135deg, #ff8a2a, #FC6304);
    --ap-btn-fg: #fff;
    --ap-x-bg: #fff;
    --ap-x-fg: #263238;
    --ap-glow-a: rgba(252, 99, 4, 0.16);
    --ap-glow-b: rgba(0, 77, 101, 0.12);
    --ap-check-bg: #FC6304;
    --ap-check-fg: #fff;
    --ap-badge-bg: #FC6304;
    --ap-badge-fg: #fff;
    --ap-box-bg: #fff;
    --ap-box-fg: #004d65;
    --ap-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ap-popup--brand {
    --ap-bg: linear-gradient(135deg, #00303f 0%, #004d65 52%, #0b6b8a 100%);
    --ap-fg: #e6f4f8;
    --ap-title: #ffffff;
    --ap-accent: #FC6304;
    --ap-link: #ffb37a;
    --ap-x-bg: rgba(255, 255, 255, 0.16);
    --ap-x-fg: #fff;
    --ap-glow-a: rgba(252, 99, 4, 0.5);
    --ap-glow-b: rgba(0, 200, 240, 0.35);
    --ap-box-bg: rgba(255, 255, 255, 0.12);
    --ap-box-fg: #fff;
    --ap-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ap-popup--sunset {
    --ap-bg: linear-gradient(135deg, #ff7a00 0%, #f0324b 55%, #b0146e 100%);
    --ap-fg: #fff;
    --ap-title: #fff;
    --ap-accent: #ffd54a;
    --ap-link: #fff;
    --ap-btn-bg: #fff;
    --ap-btn-fg: #c4260c;
    --ap-x-bg: rgba(255, 255, 255, 0.22);
    --ap-x-fg: #fff;
    --ap-glow-a: rgba(255, 213, 74, 0.55);
    --ap-glow-b: rgba(255, 255, 255, 0.28);
    --ap-check-bg: #fff;
    --ap-check-fg: #e0301e;
    --ap-badge-bg: #ffd54a;
    --ap-badge-fg: #5c1d00;
    --ap-box-bg: rgba(255, 255, 255, 0.2);
    --ap-box-fg: #fff;
    --ap-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.ap-popup--midnight {
    --ap-bg: linear-gradient(135deg, #090d24 0%, #161c4a 55%, #2b1d63 100%);
    --ap-fg: #e8eaff;
    --ap-title: #ffffff;
    --ap-accent: #ffb400;
    --ap-link: #ffd66b;
    --ap-btn-bg: linear-gradient(135deg, #ffd23f, #ffb400);
    --ap-btn-fg: #1a1300;
    --ap-x-bg: rgba(255, 255, 255, 0.14);
    --ap-x-fg: #fff;
    --ap-glow-a: rgba(255, 180, 0, 0.35);
    --ap-glow-b: rgba(120, 90, 255, 0.45);
    --ap-check-bg: #ffb400;
    --ap-check-fg: #1a1300;
    --ap-badge-bg: #ffb400;
    --ap-badge-fg: #1a1300;
    --ap-box-bg: rgba(255, 255, 255, 0.09);
    --ap-box-fg: #ffd66b;
    --ap-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* ---- Shell ------------------------------------------------------------- */
.ap-popup[hidden] { display: none; }

.ap-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.ap-popup.is-open { opacity: 1; }

.ap-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(4, 12, 22, 0.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.ap-popup__dialog {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    background: var(--ap-bg);
    color: var(--ap-fg);
    border-radius: 22px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
    transform: translateY(26px) scale(.94);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.15);
}
.ap-popup.is-open .ap-popup__dialog { transform: none; }
.ap-popup__dialog--md { max-width: 640px; }
.ap-popup__dialog--lg { max-width: 1060px; }
.ap-popup__dialog--xl { max-width: 1280px; }

/* Soft coloured light behind the content. */
.ap-popup__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.ap-popup__glow--a { width: 380px; height: 380px; top: -140px; right: -100px; background: var(--ap-glow-a); }
.ap-popup__glow--b { width: 420px; height: 420px; bottom: -180px; left: -140px; background: var(--ap-glow-b); }

.ap-popup__x {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--ap-x-bg);
    color: var(--ap-x-fg);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: transform .15s ease;
}
.ap-popup__x:hover { transform: rotate(90deg) scale(1.05); }
.ap-popup__x:focus-visible { outline: 3px solid var(--ap-accent); outline-offset: 2px; }

.ap-popup__scroll {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 44px 44px 40px;
}

/* ---- Header ------------------------------------------------------------ */
.ap-popup__head {
    text-align: center;
    margin: 0 auto 28px;
    max-width: 820px;
}
.ap-popup__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--ap-badge-bg);
    color: var(--ap-badge-fg);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.ap-popup__badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: ap-blink 1.4s ease-in-out infinite;
}
.ap-popup__title {
    margin: 0;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ap-title);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}
.ap-popup__subtitle {
    margin: 14px auto 0;
    max-width: 62ch;
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.5;
    opacity: .92;
}

/* ---- Columns ----------------------------------------------------------- */
.ap-popup__cols { display: block; }
.ap-popup__col > * + * { margin-top: 18px; }
.ap-popup__col:empty { display: none; }
/* Stacked (phones, or a one-column popup): same rhythm between the columns. */
.ap-popup__col + .ap-popup__col { margin-top: 22px; }

@media (min-width: 760px) {
    .ap-popup__cols--two {
        display: grid;
        gap: 34px;
        align-items: center;
        grid-template-columns: 1fr 1fr;
    }
    .ap-popup__cols--split-60-40 { grid-template-columns: 1.5fr 1fr; }
    .ap-popup__cols--split-40-60 { grid-template-columns: 1fr 1.5fr; }
    .ap-popup__col + .ap-popup__col { margin-top: 0; }
}

/* ---- Blocks ------------------------------------------------------------ */
.ap-popup__heading {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    font-weight: 800;
    color: var(--ap-title);
}
.ap-popup__heading--center { text-align: center; }

.ap-popup__text {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ap-fg);
}
.ap-popup__text > :first-child { margin-top: 0; }
.ap-popup__text > :last-child { margin-bottom: 0; }
.ap-popup__text p { margin: 0 0 .9em; }
.ap-popup__text a { color: var(--ap-link); text-decoration: underline; }
.ap-popup__text ul, .ap-popup__text ol { margin: 0 0 .9em; padding-left: 1.3em; }
.ap-popup__text h3 { color: var(--ap-title); }

.ap-popup__image { margin: 0; }
.ap-popup__image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
}

/* Video: the shape matches how it was filmed, and it uses the full width
   of its column (vertical clips are capped by height instead so they never
   run off the screen). */
.ap-popup__video {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.ap-popup__video--wide { aspect-ratio: 16 / 9; }
.ap-popup__video--vertical { aspect-ratio: 9 / 16; width: min(100%, calc(74vh * 9 / 16)); margin-inline: auto; }
.ap-popup__video--portrait { aspect-ratio: 4 / 5; width: min(100%, calc(74vh * 4 / 5)); margin-inline: auto; }
.ap-popup__video--square { aspect-ratio: 1 / 1; width: min(100%, 74vh); margin-inline: auto; }
.ap-popup__video iframe,
.ap-popup__video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}
.ap-popup__video--natural video {
    position: static;
    display: block;
    height: auto;
    max-height: 74vh;
}

/* "Tap to unmute" — autoplay has to start silent, this restores sound. */
.ap-popup__unmute {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    animation: ap-nudge 2.4s ease-in-out infinite;
}
.ap-popup__unmute svg { width: 18px; height: 18px; fill: currentColor; }
.ap-popup__unmute:hover { background: #000; }

/* Countdown */
.ap-popup__countdown { text-align: center; }
.ap-popup__countdown-label {
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ap-accent);
}
.ap-popup__countdown-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.ap-popup__countdown-boxes > div {
    padding: 12px 6px 10px;
    border-radius: 14px;
    background: var(--ap-box-bg);
    box-shadow: var(--ap-box-shadow);
}
.ap-popup__countdown-boxes b {
    display: block;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.05;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ap-box-fg);
}
.ap-popup__countdown-boxes span {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .85;
}
.ap-popup__countdown.is-ended .ap-popup__countdown-boxes { display: none; }
.ap-popup__countdown-ended {
    font-size: 22px;
    font-weight: 800;
    color: var(--ap-title);
}

/* Highlight card: coloured header strip over a white body. */
.ap-popup__card {
    background: #fff;
    color: #3d4852;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
}
.ap-popup__card-head {
    padding: 12px 18px;
    color: #fff;
    font-weight: 800;
    font-size: 17px;
}
.ap-popup__card-body {
    padding: 15px 18px 18px;
    font-size: 15.5px;
    line-height: 1.55;
}
.ap-popup__card--blue .ap-popup__card-head { background: #004d65; }
.ap-popup__card--green .ap-popup__card-head { background: #2e7d32; }
.ap-popup__card--red .ap-popup__card-head { background: #c62828; }
.ap-popup__card--orange .ap-popup__card-head { background: #FC6304; }
.ap-popup__card--gray .ap-popup__card-head { background: #5a6672; }

.ap-popup__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ap-popup__checklist li {
    position: relative;
    padding-left: 36px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ap-fg);
}
.ap-popup__checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--ap-check-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.ap-popup__checklist li::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid var(--ap-check-fg);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ---- Buttons ----------------------------------------------------------- */
.ap-popup__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ap-popup__buttons--center { justify-content: center; }
.ap-popup__buttons--stack { flex-direction: column; }

.ap-popup .ap-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 32px;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ap-popup .ap-btn:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); }
.ap-popup .ap-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ap-popup__buttons--stack .ap-btn { width: 100%; }

.ap-popup .ap-btn--primary { background: var(--ap-btn-bg); color: var(--ap-btn-fg) !important; }
.ap-popup .ap-btn--whatsapp { background: linear-gradient(135deg, #2bd46c, #128c7e); color: #fff !important; }
.ap-popup .ap-btn--light { background: #fff; color: #004d65 !important; }
.ap-popup .ap-btn--secondary {
    background: transparent;
    color: var(--ap-fg) !important;
    border-color: currentColor;
    box-shadow: none;
}

.ap-popup .ap-btn--pulse { animation: ap-pulse 1.9s ease-out infinite; }

body.ap-popup-lock { overflow: hidden; }

/* ---- Motion ------------------------------------------------------------ */
@keyframes ap-pulse {
    0%   { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0.55); }
    70%  { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 16px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(255, 255, 255, 0); }
}
@keyframes ap-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.7); }
}
@keyframes ap-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ---- Phones ------------------------------------------------------------ */
@media (max-width: 759px) {
    .ap-popup { padding: 10px; align-items: flex-end; }
    .ap-popup__dialog { max-height: calc(100dvh - 20px); border-radius: 20px; }
    .ap-popup__scroll { padding: 30px 18px 24px; }
    .ap-popup__head { margin-bottom: 20px; }
    .ap-popup__title { font-size: 28px; }
    .ap-popup__buttons .ap-btn { flex: 1 1 100%; }
    .ap-popup .ap-btn { padding: 16px 22px; }
    .ap-popup__x { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-popup, .ap-popup__dialog, .ap-popup__x { transition: none; }
    .ap-btn--pulse, .ap-popup__badge::before, .ap-popup__unmute { animation: none !important; }
}

/* The site's base theme paints any focused/hovered <button> pink — keep the
   popup's own colours for its close and unmute buttons. */
.ap-popup .ap-popup__x:focus { background: var(--ap-x-bg); color: var(--ap-x-fg); }
.ap-popup .ap-popup__x:hover { background: var(--ap-x-bg); color: var(--ap-x-fg); }
.ap-popup .ap-popup__unmute:focus { background: rgba(0, 0, 0, 0.78); color: #fff; }
.ap-popup .ap-popup__unmute:hover { background: #000; color: #fff; }