/* #TATARR PWA — install banner v2 — layout coloana stanga + pasi permanent vizibili */

/* === DARK (default) === */
.tatarr-ios-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 12px;
    padding-right: 32px; /* spatiu pentru close in colt */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(15,18,25,.72);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    border-top: 1px solid rgba(200,215,240,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -10px 30px -10px rgba(0,0,0,.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: "Manrope", system-ui, sans-serif;
    color: #EEF2F8;
}
.tatarr-ios-banner.show { transform: translateY(0); }
.tatarr-ios-banner::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #C8D0DC, transparent);
    opacity: 0.7;
    pointer-events: none;
}

/* === STANGA: icon deasupra + Instaleaza dedesubt (coloana) === */
.tatarr-ios-banner-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    width: 56px;
}
.tatarr-ios-banner-icon {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    object-fit: contain;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,.5);
}
.tatarr-ios-banner-title {
    color: #EEF2F8 !important;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    display: block;
}

/* === DREAPTA: pasi numerotati (iOS) - max 3 randuri, 1 step = 1 rand === */
.tatarr-ios-banner-steps {
    flex: 1;
    min-width: 0;
    color: rgba(238,242,248,.85);
    font-size: 11px;
    line-height: 1.4;
    align-self: center;
}
.tatarr-ios-banner-steps ol {
    margin: 0;
    padding-left: 16px;
}
.tatarr-ios-banner-steps li {
    color: rgba(238,242,248,.85);
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tatarr-ios-banner-steps strong {
    color: #EEF2F8 !important;
    font-weight: 600;
}

/* Sageata animata — pozitionata in MIJLOCUL banner-ului (jos), pointeaza catre butonul Share */
.tatarr-ios-banner-arrow {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2px);
    transform: translateX(-50%);
    color: #C8D0DC;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
    animation: tatarr-bounce 1.4s infinite;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
@keyframes tatarr-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(7px); }
}
html[data-theme="light"] .tatarr-ios-banner-arrow {
    color: #3A4252;
    text-shadow: 0 2px 6px rgba(80,95,120,.30);
}

/* Pe Android: text simplu in dreapta */
.tatarr-ios-banner-text { flex: 1; min-width: 0; color: #EEF2F8; align-self: center; }
.tatarr-ios-banner-text span {
    color: rgba(238,242,248,.85);
    font-size: 12px;
    line-height: 1.35;
}

/* Buton close — in coltul dreapta-sus al banner-ului */
.tatarr-ios-banner-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent; border: none;
    color: rgba(238,242,248,.5);
    font-size: 22px; line-height: 1;
    padding: 4px 6px; cursor: pointer;
    transition: color .2s;
    font-family: inherit;
    z-index: 2;
}
.tatarr-ios-banner-close:hover { color: #EEF2F8; }

/* Buton install Android */
.tatarr-ios-banner-cta {
    background: linear-gradient(135deg, #4F5867 0%, #6B7585 18%, #95A0B0 38%, #BFC8D5 50%, #95A0B0 62%, #6B7585 82%, #4F5867 100%);
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,.22);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    cursor: pointer; flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(20,24,32,.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(60,70,85,.4);
    font-family: inherit;
    align-self: center;
}
.tatarr-ios-banner-cta:hover { transform: translateY(-1px); }

/* === LIGHT MODE — TOATE textele intunecate === */
html[data-theme="light"] .tatarr-ios-banner {
    background: rgba(245,248,253,.88);
    border-top-color: rgba(20,24,32,.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 -10px 30px -10px rgba(80,95,120,.30);
    color: #0F141C;
}
html[data-theme="light"] .tatarr-ios-banner::before {
    background: linear-gradient(90deg, transparent, #3A4252, transparent);
}
html[data-theme="light"] .tatarr-ios-banner-title  { color: #0F141C !important; }
html[data-theme="light"] .tatarr-ios-banner-steps  { color: rgba(15,20,28,.85); }
html[data-theme="light"] .tatarr-ios-banner-steps li     { color: rgba(15,20,28,.85); }
html[data-theme="light"] .tatarr-ios-banner-steps strong { color: #0F141C !important; }
html[data-theme="light"] .tatarr-ios-banner-text   { color: #0F141C; }
html[data-theme="light"] .tatarr-ios-banner-text span    { color: rgba(15,20,28,.78); }
html[data-theme="light"] .tatarr-ios-banner-close        { color: rgba(15,20,28,.50); }
html[data-theme="light"] .tatarr-ios-banner-close:hover  { color: #0F141C; }
html[data-theme="light"] .tatarr-ios-banner-cta {
    border-color: rgba(20,24,32,.20);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.55),
        0 6px 16px -6px rgba(60,75,100,.55);
}

/* Fallback: daca site-ul NU are inca data-theme (la primul load) si OS prefera light */
@media (prefers-color-scheme: light) {
    html:not([data-theme="dark"]) .tatarr-ios-banner {
        background: rgba(245,248,253,.88);
        color: #0F141C;
    }
    html:not([data-theme="dark"]) .tatarr-ios-banner-title,
    html:not([data-theme="dark"]) .tatarr-ios-banner-steps strong { color: #0F141C !important; }
    html:not([data-theme="dark"]) .tatarr-ios-banner-steps,
    html:not([data-theme="dark"]) .tatarr-ios-banner-steps li { color: rgba(15,20,28,.85); }
}