/**
 * Wallvixo v1.0 - PWA Install Banner Styles
 * Play-Store-like installation prompt
 */

/* ================== Install Banner ================== */
.wv-pwa-banner{
    position:fixed;
    left:50%;
    bottom:14px;
    transform:translate(-50%,160%);
    width:min(560px, calc(100% - 24px));
    background:linear-gradient(135deg, rgba(28,36,64,.96), rgba(22,30,54,.96));
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border:1px solid rgba(142,70,232,.4);
    border-radius:18px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(142,70,232,.12);
    z-index:99999;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
    opacity:0;
    color:#fff;
    font-family:'Inter','Segoe UI',sans-serif;
}
.wv-pwa-banner.show{ transform:translate(-50%,0); opacity:1; }

[data-theme="light"] .wv-pwa-banner{
    background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,249,253,.98));
    color:#1a1a2e;
    border-color:rgba(142,70,232,.3);
    box-shadow:0 22px 60px rgba(40,30,80,.18);
}

.wv-pwa-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    overflow:hidden;
    flex-shrink:0;
    background:linear-gradient(135deg,#8E46E8,#a05cf0);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:800;
    font-size:22px;
    box-shadow:0 8px 22px rgba(142,70,232,.4);
}
.wv-pwa-icon img{ width:100%; height:100%; object-fit:cover; display:block; }

.wv-pwa-text{ flex:1; min-width:0; }
.wv-pwa-title{
    font-weight:700;
    font-size:14.5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:1.2;
}
.wv-pwa-sub{
    font-size:12px;
    opacity:.8;
    margin-top:3px;
    line-height:1.35;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.wv-pwa-sub strong{ color:#a05cf0; font-weight:700; }

.wv-pwa-btn{
    background:linear-gradient(135deg,#8E46E8,#7035c2);
    color:#fff;
    border:none;
    padding:9px 20px;
    border-radius:22px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 8px 18px rgba(142,70,232,.45);
    transition:transform .2s, box-shadow .2s;
    font-family:inherit;
    letter-spacing:.2px;
}
.wv-pwa-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(142,70,232,.55); }
.wv-pwa-btn:active{ transform:translateY(0); }

.wv-pwa-close{
    background:transparent;
    border:none;
    color:inherit;
    opacity:.55;
    cursor:pointer;
    font-size:24px;
    line-height:1;
    padding:4px 8px;
    border-radius:8px;
    flex-shrink:0;
    transition:opacity .2s, background .2s;
    font-family:inherit;
}
.wv-pwa-close:hover{ opacity:1; background:rgba(255,255,255,.08); }

/* iOS hint variant — no install button */
.wv-pwa-banner.wv-pwa-ios .wv-pwa-btn{ display:none; }

@media(max-width:520px){
    .wv-pwa-banner{
        bottom:74px;            /* avoid mobile bottom nav */
        padding:12px 12px;
        gap:10px;
    }
    .wv-pwa-icon{ width:44px; height:44px; border-radius:12px; font-size:18px; }
    .wv-pwa-title{ font-size:13.5px; }
    .wv-pwa-sub{ font-size:11.5px; }
    .wv-pwa-btn{ padding:8px 14px; font-size:12px; }
}

/* When app is installed (running standalone) — hide install hints */
.pwa-installed .wv-pwa-banner{ display:none !important; }

/* Standalone-mode polish: trim browser-like UI quirks when app is installed */
@media all and (display-mode: standalone){
    body{ user-select:none; -webkit-user-select:none; }
    body{ overscroll-behavior-y: contain; }
}