/**
 * Zadwa Network — PWA Styles  v2.6.7
 * All selectors prefixed with #zn-install-sheet where needed to beat
 * BuddyBoss/WooCommerce global button resets.
 */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */

:root {
    --zn-pwa-bg:          #0a0a0a;
    --zn-pwa-surface:     #161618;
    --zn-pwa-border:      rgba(255, 255, 255, 0.09);
    --zn-pwa-text:        #f0f0f0;
    --zn-pwa-text-muted:  #888890;
    --zn-pwa-accent:      #00c9ff;
    --zn-pwa-radius:      22px;
    --zn-pwa-radius-sm:   13px;
    --zn-pwa-shadow:      0 -6px 50px rgba(0, 0, 0, 0.7);
    --zn-pwa-transition:  360ms cubic-bezier(0.32, 0, 0.12, 1);
}

/* ── Backdrop ──────────────────────────────────────────────────────────────── */

.zn-install-backdrop {
    position:       fixed;
    inset:          0;
    background:     transparent;
    z-index:        99998;
    transition:     background var(--zn-pwa-transition);
    pointer-events: none;
}
.zn-install-backdrop--visible {
    background:              rgba(0, 0, 0, 0.72);
    pointer-events:          auto;
    backdrop-filter:         blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Install Sheet ─────────────────────────────────────────────────────────── */

#zn-install-sheet.zn-install-sheet {
    position:      fixed;
    left:          50%;
    bottom:        0;
    z-index:       99999;
    width:         100%;
    max-width:     540px;
    background:    var(--zn-pwa-surface);
    border-radius: var(--zn-pwa-radius) var(--zn-pwa-radius) 0 0;
    box-shadow:    var(--zn-pwa-shadow);
    padding:       0 22px 28px;
    transform:     translateX(-50%) translateY(100%);
    transition:    transform var(--zn-pwa-transition);
    will-change:   transform;
    /* Reset any theme box-sizing weirdness */
    box-sizing:    border-box;
}
#zn-install-sheet.zn-install-sheet--visible {
    transform: translateX(-50%) translateY(0);
}

/* Drag handle */
#zn-install-sheet .zn-install-handle {
    width:         36px;
    height:        4px;
    background:    rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    margin:        12px auto 14px;
}

/* Header */
#zn-install-sheet .zn-install-header {
    display:         flex;
    justify-content: flex-end;
    margin-bottom:   6px;
}

/* ── All buttons inside the sheet — full reset first ──────────────────────── */
/* This overrides BuddyBoss / WooCommerce global button CSS */
#zn-install-sheet button {
    box-sizing:    border-box;
    font-family:   inherit;
    line-height:   1;
    outline:       none;
    -webkit-tap-highlight-color: transparent;
}

/* Dismiss X */
#zn-install-sheet .zn-install-dismiss {
    background:      rgba(255, 255, 255, 0.1) !important;
    border:          none !important;
    color:           var(--zn-pwa-text-muted) !important;
    width:           30px !important;
    height:          30px !important;
    border-radius:   50% !important;
    cursor:          pointer;
    font-size:       13px !important;
    padding:         0 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    transition:      background 150ms;
    box-shadow:      none !important;
    text-shadow:     none !important;
}
#zn-install-sheet .zn-install-dismiss:hover,
#zn-install-sheet .zn-install-dismiss:active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: var(--zn-pwa-text) !important;
}

/* ── App row ───────────────────────────────────────────────────────────────── */

#zn-install-sheet .zn-install-app-row {
    display:       flex;
    flex-direction: row;
    align-items:   flex-start;
    gap:           16px;
    margin-bottom: 20px;
}

/* Icon — grid overlay so fallback Z never leaks outside */
#zn-install-sheet .zn-install-app-icon {
    display:         grid;
    grid-template:   1fr / 1fr;
    width:           72px;
    min-width:       72px;
    height:          72px;
    border-radius:   18px;
    overflow:        hidden;
    background:      #0a141e;
    box-shadow:      0 0 0 1px rgba(0, 201, 255, 0.25),
                     0 4px 16px rgba(0, 0, 0, 0.5);
    flex-shrink:     0;
}

/* Both children occupy the same grid cell (they overlay each other) */
#zn-install-sheet .zn-install-icon-img,
#zn-install-sheet .zn-install-icon-fallback {
    grid-area: 1 / 1;
    width:     72px;
    height:    72px;
}

#zn-install-sheet .zn-install-icon-img {
    object-fit:    cover;
    border-radius: 18px;
    display:       block;
}

/* Fallback Z — shown behind the image, hidden once image loads */
#zn-install-sheet .zn-install-icon-fallback {
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       36px;
    font-weight:     800;
    color:           var(--zn-pwa-accent);
    font-family:     system-ui, -apple-system, sans-serif;
    letter-spacing:  -1px;
    text-shadow:     0 0 14px rgba(0, 201, 255, 0.6);
    z-index:         0;
    /* Sits behind image */
}
#zn-install-sheet .zn-install-icon-img {
    z-index: 1;
}

/* App text */
#zn-install-sheet .zn-install-app-info {
    flex:      1;
    min-width: 0;
}
#zn-install-sheet .zn-install-app-name {
    font-size:     18px;
    font-weight:   700;
    color:         var(--zn-pwa-text);
    margin-bottom: 4px;
    line-height:   1.2;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
#zn-install-sheet .zn-install-app-subtitle {
    font-size:   13px;
    color:       var(--zn-pwa-text-muted);
    margin-bottom: 8px;
    line-height: 1.45;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* Stars */
#zn-install-sheet .zn-install-rating {
    display:     flex;
    align-items: center;
    gap:         5px;
}
#zn-install-sheet .zn-install-stars {
    display:     flex;
    align-items: center;
    gap:         1px;
    font-size:   14px;
    line-height: 1;
}
#zn-install-sheet .zn-star { display: inline-block; }
#zn-install-sheet .zn-star--full  { color: #f0b429; }
#zn-install-sheet .zn-star--half  { color: #f0b429; opacity: 0.65; }
#zn-install-sheet .zn-star--empty { color: rgba(240, 180, 41, 0.22); }
#zn-install-sheet .zn-install-rating-count {
    color:     var(--zn-pwa-text-muted);
    font-size: 12px;
}

/* ── Install Button ────────────────────────────────────────────────────────── */

#zn-install-sheet .zn-install-actions {
    margin-bottom: 10px;
}
#zn-install-sheet .zn-install-btn--primary {
    position:        relative;
    width:           100% !important;
    height:          52px !important;
    background:      linear-gradient(135deg, #00c9ff 0%, #0097c4 100%) !important;
    color:           #000000 !important;
    border:          none !important;
    border-radius:   var(--zn-pwa-radius-sm) !important;
    font-size:       17px !important;
    font-weight:     700 !important;
    cursor:          pointer;
    letter-spacing:  -0.3px;
    overflow:        hidden;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px;
    box-shadow:      0 2px 18px rgba(0, 201, 255, 0.35) !important;
    transition:      opacity 160ms, transform 110ms;
    padding:         0 20px !important;
    text-shadow:     none !important;
    text-transform:  none !important;
}
#zn-install-sheet .zn-install-btn--primary:hover {
    background: linear-gradient(135deg, #19d1ff 0%, #00a8d8 100%) !important;
    color: #000 !important;
}
#zn-install-sheet .zn-install-btn--primary:active {
    opacity:   0.88;
    transform: scale(0.985);
}

/* Button spinner */
#zn-install-sheet .zn-install-btn-spinner {
    display:         none;
    width:           18px;
    height:          18px;
    border:          2px solid rgba(0,0,0,0.25);
    border-top-color: #000;
    border-radius:   50%;
    animation:       zn-spin 0.65s linear infinite;
    flex-shrink:     0;
}
#zn-install-sheet .zn-install-btn--loading .zn-install-btn-text {
    opacity: 0.7;
}
#zn-install-sheet .zn-install-btn--loading .zn-install-btn-spinner {
    display: block;
}

@keyframes zn-spin {
    to { transform: rotate(360deg); }
}

/* ── Not Now ───────────────────────────────────────────────────────────────── */

/* Strong override — beats BuddyBoss global button blue */
#zn-install-sheet .zn-install-footer {
    text-align: center;
    margin-top: 8px;
}
#zn-install-sheet .zn-install-not-now,
#zn-install-sheet button.zn-install-not-now {
    background:    transparent !important;
    background-image: none !important;
    border:        none !important;
    box-shadow:    none !important;
    color:         var(--zn-pwa-text-muted) !important;
    font-size:     14px !important;
    font-weight:   400 !important;
    cursor:        pointer;
    padding:       10px 24px !important;
    border-radius: 8px !important;
    width:         auto !important;
    height:        auto !important;
    display:       inline-block !important;
    text-shadow:   none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transition:    color 150ms, background 150ms;
}
#zn-install-sheet .zn-install-not-now:hover,
#zn-install-sheet button.zn-install-not-now:hover,
#zn-install-sheet .zn-install-not-now:active,
#zn-install-sheet button.zn-install-not-now:active {
    background:    rgba(255,255,255,0.06) !important;
    color:         var(--zn-pwa-text) !important;
}

/* ── iOS instructions ──────────────────────────────────────────────────────── */

#zn-install-sheet .zn-install-ios-instructions {
    background:    rgba(255, 255, 255, 0.05);
    border:        1px solid var(--zn-pwa-border);
    border-radius: var(--zn-pwa-radius-sm);
    padding:       16px;
    margin-bottom: 12px;
}
#zn-install-sheet .zn-install-ios-step {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    color:       var(--zn-pwa-text);
    font-size:   15px;
    line-height: 1.5;
}
#zn-install-sheet .zn-install-ios-icon {
    font-size:   24px;
    flex-shrink: 0;
}

/* ── Manual Steps ──────────────────────────────────────────────────────────── */

#zn-install-sheet .zn-install-manual-steps {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    background:     rgba(255,255,255,0.04);
    border:         1px solid var(--zn-pwa-border);
    border-radius:  var(--zn-pwa-radius-sm);
    padding:        18px 16px;
    margin-bottom:  12px;
}
#zn-install-sheet .zn-install-manual-step {
    display:     flex;
    align-items: center;
    gap:         12px;
    color:       var(--zn-pwa-text);
    font-size:   14px;
    line-height: 1.5;
}
#zn-install-sheet .zn-install-step-num {
    min-width:       26px;
    width:           26px;
    height:          26px;
    background:      var(--zn-pwa-accent);
    color:           #000;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    font-weight:     700;
    flex-shrink:     0;
    line-height:     1;
}

/* ── Toast guide ───────────────────────────────────────────────────────────── */

.zn-install-toast {
    position:       fixed;
    bottom:         80px;
    left:           16px;
    right:          16px;
    z-index:        99999;
    max-width:      480px;
    margin:         0 auto;
    transform:      translateY(20px);
    opacity:        0;
    transition:     transform var(--zn-pwa-transition), opacity var(--zn-pwa-transition);
    pointer-events: none;
}
.zn-install-toast--visible {
    transform:      translateY(0);
    opacity:        1;
    pointer-events: auto;
}
.zn-install-toast-inner {
    background:    var(--zn-pwa-surface);
    border:        1px solid rgba(0, 201, 255, 0.3);
    border-radius: var(--zn-pwa-radius-sm);
    padding:       14px 16px;
    display:       flex;
    align-items:   center;
    gap:           12px;
    box-shadow:    0 8px 32px rgba(0, 0, 0, 0.6);
    color:         var(--zn-pwa-text);
    font-size:     14px;
    line-height:   1.4;
}
.zn-install-toast-icon {
    font-size:   22px;
    flex-shrink: 0;
}
.zn-install-toast-inner > span:not(.zn-install-toast-icon) {
    flex: 1;
}
.zn-install-toast-close {
    background:    rgba(255,255,255,0.08) !important;
    border:        none !important;
    color:         var(--zn-pwa-text-muted) !important;
    width:         26px !important;
    height:        26px !important;
    border-radius: 50% !important;
    cursor:        pointer;
    display:       flex !important;
    align-items:   center !important;
    justify-content: center !important;
    font-size:     12px !important;
    flex-shrink:   0;
    padding:       0 !important;
    box-shadow:    none !important;
}

/* ── Push Prompt ───────────────────────────────────────────────────────────── */

.zn-push-prompt {
    position:       fixed;
    bottom:         80px;
    left:           16px;
    right:          16px;
    z-index:        99997;
    background:     var(--zn-pwa-surface);
    border:         1px solid var(--zn-pwa-border);
    border-radius:  var(--zn-pwa-radius-sm);
    padding:        16px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    box-shadow:     0 8px 32px rgba(0,0,0,0.55);
    transform:      translateY(20px);
    opacity:        0;
    transition:     transform var(--zn-pwa-transition), opacity var(--zn-pwa-transition);
    max-width:      400px;
    margin:         0 auto;
}
.zn-push-prompt--visible { transform: translateY(0); opacity: 1; }
.zn-push-prompt-icon { font-size: 28px; }
.zn-push-prompt-text strong {
    display:       block;
    color:         var(--zn-pwa-text);
    font-size:     16px;
    margin-bottom: 4px;
}
.zn-push-prompt-text p {
    color: var(--zn-pwa-text-muted); font-size: 14px; margin: 0; line-height: 1.4;
}
.zn-push-prompt-actions { display: flex; gap: 8px; }
.zn-push-allow {
    flex: 1; padding: 10px;
    background: var(--zn-pwa-accent) !important;
    color: #000 !important;
    border: none !important;
    border-radius: var(--zn-pwa-radius-sm) !important;
    font-size: 14px !important; font-weight: 600 !important; cursor: pointer;
}
.zn-push-deny {
    padding: 10px 16px; background: transparent !important;
    color: var(--zn-pwa-text-muted) !important;
    border: 1px solid var(--zn-pwa-border) !important;
    border-radius: var(--zn-pwa-radius-sm) !important;
    font-size: 14px !important; cursor: pointer;
    box-shadow: none !important;
}

/* ── Update Banner ─────────────────────────────────────────────────────────── */

.zn-pwa-update-banner {
    position:      fixed; top: 0; left: 0; right: 0; z-index: 99999;
    background:    linear-gradient(90deg, #001a2c 0%, #002538 100%);
    border-bottom: 1px solid rgba(0,201,255,0.25);
    padding:       12px 16px;
    display:       flex; align-items: center; gap: 12px;
    font-size:     14px; color: #e8f8ff;
}
.zn-pwa-update-banner span { flex: 1; }
.zn-pwa-update-banner button {
    background:    rgba(0,201,255,0.15) !important;
    border:        1px solid rgba(0,201,255,0.3) !important;
    color:         var(--zn-pwa-accent) !important;
    padding:       6px 14px !important;
    border-radius: 6px !important;
    cursor:        pointer; font-size: 13px !important;
    box-shadow:    none !important;
}
.zn-pwa-update-dismiss {
    background: transparent !important;
    border: none !important;
    color: rgba(255,255,255,0.45) !important;
    padding: 4px 8px !important;
}

/* ── Standalone Shell ──────────────────────────────────────────────────────── */

.zn-pwa-standalone .browser-only,
.zn-pwa-standalone #wpadminbar { display: none !important; }
.zn-pwa-standalone body {
    margin-top:     0 !important;
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
}

/* Page transition */
.zn-pwa-transitioning::after {
    content: ''; position: fixed; inset: 0;
    background: var(--zn-pwa-bg); z-index: 9999;
    animation: zn-fade-out 300ms ease forwards; pointer-events: none;
}
@keyframes zn-fade-out { 0% { opacity: 0.5; } 100% { opacity: 0; } }

/* Pull-to-refresh */
.zn-ptr-indicator {
    position: fixed; top: 20px; left: 50%;
    transform: translateX(-50%); z-index: 9999;
    background: var(--zn-pwa-surface); color: var(--zn-pwa-accent);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; box-shadow: 0 2px 16px rgba(0,201,255,0.3);
    animation: zn-ptr-spin 0.6s linear infinite;
}
@keyframes zn-ptr-spin {
    from { transform: translateX(-50%) rotate(0deg); }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* ── Desktop / large screen ────────────────────────────────────────────────── */

@media (min-width: 560px) {
    #zn-install-sheet.zn-install-sheet {
        border-radius: var(--zn-pwa-radius);
        bottom:        24px;
        max-width:     460px;
        transform:     translateX(-50%) translateY(0) scale(0.94);
        opacity:       0;
        transition:    transform var(--zn-pwa-transition), opacity var(--zn-pwa-transition);
    }
    #zn-install-sheet.zn-install-sheet--visible {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity:   1;
    }
}

/* ── Admin tab ─────────────────────────────────────────────────────────────── */

.zn-pwa-admin .form-table th { width: 200px; }
.zn-pwa-admin code { font-size: 12px; line-height: 1.5; }