/* VH360 PWA - Top Bar Banner */
.vh360-pwa-banner{position:fixed;top:0;left:0;right:0;z-index:99999;background:#111;color:#fff;font-family:inherit}
.vh360-pwa-banner__inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:12px}
.vh360-pwa-banner__text{font-size:14px;line-height:1.3}
.vh360-pwa-banner__actions{display:flex;align-items:center;gap:10px}
.vh360-pwa-btn{appearance:none;border:0;border-radius:6px;padding:8px 12px;cursor:pointer;font-size:14px}
.vh360-pwa-banner__close{appearance:none;border:0;background:transparent;color:#fff;font-size:20px;line-height:1;cursor:pointer;padding:0 6px}

/* Modal */
.vh360-pwa-modal{position:fixed;inset:0;z-index:100000}
.vh360-pwa-hidden{display:none}
.vh360-pwa-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.vh360-pwa-modal__panel{position:relative;background:#fff;color:#111;max-width:520px;margin:10vh auto 0;border-radius:12px;padding:18px 18px 16px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.vh360-pwa-modal__title{margin:0 0 10px;font-size:18px}
.vh360-pwa-modal__body{font-size:14px;line-height:1.5}
.vh360-pwa-modal__body ul,.vh360-pwa-modal__body ol{padding-left:20px}
.vh360-pwa-modal__close{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:22px;cursor:pointer}
html.vh360-pwa-modal-open{overflow:hidden}

/* VH360 Push Subscribe Widget */
.vh360-push-subscribe{padding:20px;background:#f9f9f9;border:1px solid #ddd;border-radius:8px;max-width:400px;margin:20px 0}
.vh360-push-subscribe-btn{display:inline-block;padding:12px 24px;background:#2271b1;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:500;transition:background .2s}
.vh360-push-subscribe-btn:hover{background:#135e96}
.vh360-push-success{color:#46b450;font-weight:bold;font-size:14px}
.vh360-push-error{color:#dc3232;font-size:14px}
.vh360-push-state{animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Standalone app refresh controls */
html.vh360-pwa-standalone{overscroll-behavior-y:contain}
.vh360-pwa-ptr{position:fixed;top:-54px;left:50%;z-index:99991;transform:translate(-50%,0);border-radius:999px;background:#0f172a;color:#fff;padding:9px 14px;font:600 13px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 10px 28px rgba(15,23,42,.28);opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.vh360-pwa-ptr.is-visible{opacity:1}
.vh360-pwa-update{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:99992;display:flex;align-items:center;justify-content:center;gap:12px;max-width:420px;margin:0 auto;border-radius:14px;background:#111827;color:#fff;padding:12px 14px;box-shadow:0 16px 38px rgba(17,24,39,.32);font:500 14px/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
.vh360-pwa-update button{border:0;border-radius:999px;background:#2563eb;color:#fff;padding:8px 12px;font-weight:700;cursor:pointer}

/*
 * Standalone iOS status-bar accommodation.
 *
 * The PWA uses black-translucent status-bar mode to keep the layout and
 * visual viewports consistent after orientation changes. Keep the header
 * backgrounds at the top of the viewport while moving their contents below
 * the status-bar safe area.
 */
@media (display-mode: standalone) {
    html .site-header {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }

    html .vh360-bulletin-banner .vh360-bulletin-banner-container {
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    }

    /*
     * When the urgent bulletin is the topmost element, it owns the safe-area
     * spacing. Do not apply the inset a second time inside the site header.
     */
    html body > .vh360-bulletin-banner + #page .site-header {
        padding-top: 10px;
    }
}