/*
 * Summer on the Peninsula — request-the-list popup.
 * Rendered by inc/site/summer-popup.php, enqueued only while the offer window is
 * open. Seasonal: delete this file with its template when the offer retires.
 *
 * Tokens come from assets/brand-tokens.css. Every var() carries a literal
 * fallback so the overlay is never unstyled if that sheet is dropped.
 */

.pmvr-summer[hidden]{display:none}
.pmvr-summer__scrim{position:fixed;inset:0;background:rgba(2,7,6,.58);z-index:9994;opacity:0;transition:opacity .3s ease}
.pmvr-summer.is-open .pmvr-summer__scrim{opacity:1}
.pmvr-summer__card{position:fixed;z-index:9996;max-height:80vh;overflow-y:auto;background:var(--pmvr-card,#111023);color:var(--pmvr-text,#F7F4EC);border:1px solid var(--pmvr-border,rgba(255,255,255,.10));box-shadow:0 24px 70px rgba(0,0,0,.55);font-family:var(--pmvr-fb,'Lato',-apple-system,sans-serif)}

/* Desktop: centred card. Never on arrival — see the trigger script. */
@media(min-width:769px){
	.pmvr-summer__card{left:50%;top:50%;width:min(440px,calc(100vw - 48px));border-radius:14px;padding:34px 34px 28px;transform:translate(-50%,-46%) scale(.97);opacity:0;transition:opacity .38s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1)}
	.pmvr-summer.is-open .pmvr-summer__card{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* Mobile: bottom sheet, no scrim. Nothing is covered on arrival and the page
   stays readable and scrollable behind it — this is the surface Google's
   intrusive-interstitial treatment actually looks at. */
@media(max-width:768px){
	.pmvr-summer__scrim{display:none}
	.pmvr-summer__card{left:0;right:0;bottom:0;border-radius:16px 16px 0 0;border-width:1px 0 0;padding:20px 20px calc(16px + env(safe-area-inset-bottom));transform:translateY(101%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
	.pmvr-summer.is-open .pmvr-summer__card{transform:translateY(0)}
}

/* The close button shares a flex row with the eyebrow rather than being absolutely
   positioned over it, so it cannot overlap the heading at any width or font size. */
.pmvr-summer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.pmvr-summer__close{flex:0 0 auto;margin:-10px -10px 0 0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--pmvr-muted,#A3A9C4);border-radius:50%;transition:color .2s,background .2s}
.pmvr-summer__close:hover{color:var(--pmvr-text,#F7F4EC);background:rgba(255,255,255,.06)}
.pmvr-summer__close:focus-visible{outline:2px solid var(--pmvr-gh,#BBB0F2);outline-offset:2px}

.pmvr-summer__eyebrow{margin:3px 0 0;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pmvr-g,#A194E6)}
.pmvr-summer__title{margin:0 0 12px;font-family:var(--pmvr-fd,'Albert Sans',sans-serif);font-size:1.52rem;line-height:1.22;font-weight:600;letter-spacing:-.01em;color:var(--pmvr-text,#F7F4EC)}
.pmvr-summer__body{margin:0 0 22px;font-size:.95rem;line-height:1.62;color:var(--pmvr-soft,rgba(247,244,236,.78))}

.pmvr-summer__actions{display:flex;flex-direction:column;gap:10px}
.pmvr-summer__btn{display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 20px;border-radius:8px;font-size:.92rem;font-weight:600;letter-spacing:.01em;text-decoration:none;transition:background .22s,border-color .22s,color .22s}
.pmvr-summer__btn--wa{background:#25D366;color:#04120A}
.pmvr-summer__btn--wa:hover{background:#1FBB59}
.pmvr-summer__btn--mail{background:transparent;color:var(--pmvr-text,#F7F4EC);border:1px solid var(--pmvr-border,rgba(255,255,255,.10))}
.pmvr-summer__btn--mail:hover{border-color:var(--pmvr-gh,#BBB0F2);color:var(--pmvr-gh,#BBB0F2)}
.pmvr-summer__btn:focus-visible{outline:2px solid var(--pmvr-gh,#BBB0F2);outline-offset:2px}

.pmvr-summer__fine{margin:16px 0 0;font-size:.72rem;line-height:1.5;color:var(--pmvr-muted,#A3A9C4)}

/* Mobile sizing. Must come AFTER the component rules above: a media query adds no
   specificity, so the base declarations would otherwise win on equal weight.
   Tuned against a measured 375x812 sheet, to keep it under half the viewport so
   the page behind stays the larger surface. Body type goes UP to 16px here, not
   down — height is bought back from leading and margins instead. */
@media(max-width:768px){
	.pmvr-summer__head{margin-bottom:9px}
	.pmvr-summer__title{font-size:1.26rem;margin-bottom:9px}
	.pmvr-summer__body{font-size:1rem;line-height:1.5;margin-bottom:17px}
	.pmvr-summer__actions{gap:9px}
	.pmvr-summer__btn{min-height:48px}
	.pmvr-summer__fine{margin-top:12px}
}

/* The float button sits at bottom-right and would collide with the sheet.
 *
 * Hidden with `visibility`, deliberately, not `opacity`.
 * pmvr_render_whatsapp_float() fades the button in with
 * `animation: pmvrWaIn … forwards`, and a filled animation beats ordinary
 * declarations in the cascade at ANY specificity — an `opacity:0` here simply
 * never applies, which is how it reached production on 2026-08-27. Only
 * !important outbids an animation, and that would push the override-debt ratchet
 * past its baseline.
 *
 * `animation:none` also works but costs more than it looks: cancelling the
 * animation makes it restart when the popup closes, so the button stays
 * invisible through its 0.8s delay before fading back in. The keyframes never
 * touch `visibility`, so this has no cascade conflict and restores instantly. */
body.pmvr-summer-open .pmvr-wa-float{visibility:hidden;pointer-events:none}

@media(prefers-reduced-motion:reduce){
	.pmvr-summer__card,.pmvr-summer__scrim,body.pmvr-summer-open .pmvr-wa-float{transition:none}
	@media(min-width:769px){.pmvr-summer__card{transform:translate(-50%,-50%) scale(1)}}
	@media(max-width:768px){.pmvr-summer__card{transform:translateY(0)}}
	.pmvr-summer:not(.is-open) .pmvr-summer__card{opacity:0;visibility:hidden}
}