/**
 * Popup banner + header line (announcement strip).
 * Loaded only when one of them is enabled in Site Settings.
 *
 * @package VoiceLink_Classic_Theme
 */

/* ── Header line (top strip) ── */
.vl-topbar{position:fixed;top:0;left:0;right:0;z-index:10000;font-size:13px;font-weight:600;font-family:'Inter',sans-serif}
.vl-topbar-inner{max-width:1200px;margin:0 auto;padding:9px 44px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center;position:relative}
.vl-topbar-link{text-decoration:underline;font-weight:700}
.vl-topbar-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:0;font-size:20px;line-height:1;cursor:pointer;opacity:.85;padding:0 4px}
.vl-topbar-close:hover{opacity:1}

/* Offset the fixed navbar + content so nothing overlaps (JS refines to actual height). */
body.vl-has-topbar{padding-top:40px}
body.vl-has-topbar #navbar{top:40px}

/* Dismissed state (set synchronously before paint to avoid flash). */
html.vl-topbar-off .vl-topbar{display:none !important}
html.vl-topbar-off body.vl-has-topbar{padding-top:0 !important}
html.vl-topbar-off #navbar{top:0 !important}

/* ── Popup banner ── */
.vl-popup{position:fixed;inset:0;z-index:10001;display:none;align-items:center;justify-content:center;padding:20px}
.vl-popup.is-open{display:flex}
.vl-popup-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.6)}
.vl-popup-card{position:relative;background:#fff;border-radius:18px;max-width:640px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:vlPopIn .25s ease;max-height:90vh;overflow-y:auto}
/* Roomier on large desktops, where 640px can still look small. */
@media(min-width:1400px){
	.vl-popup-card{max-width:720px}
}
@keyframes vlPopIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.vl-popup-x{position:absolute;top:10px;right:12px;z-index:2;background:rgba(255,255,255,.85);border:0;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:#0f172a;display:flex;align-items:center;justify-content:center}
.vl-popup-x:hover{background:#fff}
.vl-popup-img{display:block;width:100%;height:auto}
.vl-popup-body{padding:1.5rem 1.5rem 1.75rem;text-align:center;font-family:'Inter',sans-serif}
.vl-popup-title{font-size:1.35rem;font-weight:800;color:#0f172a;margin:0 0 .5rem}
.vl-popup-text{font-size:.95rem;color:#475569;line-height:1.6;margin:0 0 1.1rem}
.vl-popup-cta{display:inline-block;background:#0042F6;color:#fff;font-weight:700;font-size:.95rem;padding:.7rem 1.6rem;border-radius:10px;text-decoration:none}
.vl-popup-cta:hover{background:#0031C2}
body.vl-popup-open{overflow:hidden}

@media(max-width:480px){
	.vl-popup-card{max-width:100%}
	.vl-topbar{font-size:12px}
	.vl-topbar-inner{padding-left:16px;padding-right:40px}
}