/* === 0. ІНСТАЛЯЦІЯ: ховаємо тригер, якщо додаток уже встановлено ===
   CSS-версія для миттєвого приховування без "блимання" до того, як
   відпрацює JS (visuals.js додатково дублює це через navigator.standalone
   для старих iOS, де ця медіа-умова не завжди спрацьовує). */
@media (display-mode: standalone) {
    .scv-install-trigger { display: none !important; }
}

/* === 1. СВІТЛА ТЕМА (БАЗА) === */
:root {
    --scv-modal-bg: rgb(191, 221, 255);
    --scv-modal-text: var(--text-primary, var(--sh-text, #1D1D1F));
    --scv-step-bg: color-mix(in srgb, var(--text-primary, #000) 6%, transparent);
    --scv-icon-bg: var(--bg-surface-solid, #ffffff);
    --scv-icon-fill: var(--text-primary, #111);
    --scv-border: var(--sh-ui-surface-border-strong, rgba(0,0,0,0.12));
}

/* === 2. ТЕМНА ТЕМА (ТІЛЬКИ ПО КЛАСУ) === */
/* Вмикається ТІЛЬКИ коли WP Dark Mode додав клас active */
html.wp-dark-mode-active body, 
body.wp-dark-mode-active {
    --scv-modal-bg: var(--sh-ui-modal-bg, var(--lg-surface-bg, #121212)) !important;
    --scv-modal-text: var(--text-primary, var(--sh-text, #F5F5F7)) !important;
    --scv-step-bg: color-mix(in srgb, var(--text-primary, #fff) 12%, transparent) !important;
    --scv-icon-bg: var(--bg-surface-solid, #1a1a1a) !important;
    --scv-icon-fill: var(--text-primary, #fff) !important;
    --scv-border: var(--sh-ui-surface-border-strong, rgba(255,255,255,0.14)) !important;
}

/* === 3. PULL TO REFRESH === */
body { overscroll-behavior-y: contain; }
#scv-ptr-box {
    position: fixed; top: 0; left: 0; width: 100%; height: 120px;
    display: flex; justify-content: center; align-items: flex-end;
    padding-bottom: 20px; z-index: 9999; pointer-events: none;
    transform: translateY(-100%); box-shadow: inset 0 -10px 10px -10px rgba(0,0,0,0.05);
}
.scv-ptr-icon { display: none !important; }
.scv-ptr-content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.scv-rocket-img { width: 60px; height: auto; display: block; transition: transform 0.3s, opacity 0.3s; opacity: 0.7; }
.scv-default-spin { width: 24px; height: 24px; border: 2px solid #666; border-top-color: transparent; border-radius: 50%; animation: scvSpin 0.8s linear infinite; }
.scv-rocket-launch { opacity: 1; animation: scvRocketFly 1.2s ease-in forwards; }
@keyframes scvRocketFly {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(10px) scale(0.9); }
    100% { transform: translateY(-500px) scale(1.5); opacity: 0; }
}
@keyframes scvSpin { to { transform: rotate(360deg); } }

/* === 4. УНІВЕРСАЛЬНІ СТИЛІ МОДАЛОК === */
.scv-modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: var(--sh-ui-overlay-bg, rgba(0, 0, 0, 0.6)); 
    z-index: 99999999; 
    display: flex; justify-content: center; align-items: center; 
    padding: 20px; box-sizing: border-box; 
    opacity: 0; animation: fadeInModal 0.3s forwards; 
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .scv-modal-overlay {
        -webkit-backdrop-filter: var(--sh-ui-overlay-blur, blur(10px));
        backdrop-filter: var(--sh-ui-overlay-blur, blur(10px));
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .scv-modal-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.scv-modal-card {
    /* Використовуємо змінні (важливо !important, щоб перебити старі кешовані стилі) */
    background: var(--scv-modal-bg) !important;
    color: var(--scv-modal-text) !important;
    border: 1px solid var(--scv-border) !important;
    
    width: 100%; max-width: 360px;
    border-radius: var(--sh-ui-modal-radius, 24px);
    padding: var(--space-10, 30px) var(--space-8, 25px);
    position: relative;
    box-shadow: var(--sh-ui-modal-shadow, 0 25px 60px rgba(0,0,0,0.4)); 
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .scv-modal-card {
        -webkit-backdrop-filter: var(--sh-ui-modal-blur, blur(12px));
        backdrop-filter: var(--sh-ui-modal-blur, blur(12px));
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .scv-modal-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

.scv-text-center { text-align: center; }

#scv-modal-close, #scv-offline-close, #scv-thanks-close { 
    cursor: pointer; 
    color: var(--scv-modal-text);
    opacity: 0.5; background: none; border: none; font-size: 24px; 
    position: absolute; top: 10px; right: 10px; 
}

#scv-offline-ok {
    background: var(--brand-primary, #3A67FF) !important;
    color: var(--brand-on-primary, #ffffff) !important;
    border-radius: var(--sh-ui-button-radius, 14px) !important;
    box-shadow: var(--shadow-sm, 0 8px 24px rgba(0,0,0,0.18)) !important;
}

#scv-offline-ok:active {
    transform: scale(var(--lg-press-scale, 0.98));
}

#scv-modal-close:focus-visible,
#scv-offline-close:focus-visible,
#scv-thanks-close:focus-visible,
#scv-offline-ok:focus-visible {
    outline: none;
    box-shadow: var(--sh-ui-focus-ring, 0 0 0 3px rgba(58, 103, 255, 0.45)) !important;
}

.scv-modal-header { text-align: center; margin-bottom: 25px; }
.scv-app-icon { width: 72px; height: 72px; border-radius: 16px; margin-bottom: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
.scv-modal-header h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.scv-intro-text { text-align: center; font-size: 14px; opacity: 0.7; margin-bottom: 20px; margin-top: 0; }

.scv-step-row {
    display: flex; align-items: center; gap: 15px;
    background: var(--scv-step-bg);
    padding: 12px 15px; border-radius: 16px;
    transition: background 0.3s;
}

.scv-step-row + .scv-step-row { margin-top: 8px; }

.scv-step-text { font-size: 14.5px; line-height: 1.35; }

.scv-step-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0;
    color: var(--scv-modal-text);
    opacity: 0.32;
}
.scv-step-arrow svg { width: 16px; height: 16px; display: block; }

.scv-step-icon {
    width: 40px; height: 40px;
    background: var(--scv-icon-bg);
    border-radius: 10px; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); flex-shrink: 0;
    transition: background 0.3s;
}
.scv-step-icon svg { width: 24px; height: 24px; }

/* Інверсія іконок при активному WP Dark Mode */
body.wp-dark-mode-active .scv-step-icon svg[fill="none"] { stroke: var(--scv-icon-fill) !important; }
body.wp-dark-mode-active .scv-step-icon svg[stroke="#007aff"] { stroke: #0A84FF !important; } /* Світліший синій для темної теми */

@keyframes fadeInModal { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

html, body {
    overscroll-behavior-y: contain; /* Блокує нативний рефреш на Android */
}