/* ==========================================================================
   App Download Widget
   Widget unic, dark-glass, responsive, pentru promovarea aplicatiei mobile.
   Accent configurabil printr-o singura variabila: --app-accent.
   Pentru a-l potrivi cu tema site-ului, schimba doar valorile de mai jos.
   ========================================================================== */

:root {
    --app-accent: #de9b35;          /* accent principal (gold) */
    --app-accent-soft: #f0b556;     /* accent deschis pentru highlight */
    --app-surface: 22, 26, 34;      /* rgb fundal card (#161a22) */
    --app-surface-2: 30, 35, 46;    /* rgb fundal butoane (#1e232e) */
    --app-radius: 16px;
    --app-shadow: 0 18px 50px -12px rgba(0, 0, 0, .75),
                  0 0 0 1px rgba(255, 255, 255, .04);
}

/* Container fix in coltul din dreapta-jos, peste tot continutul */
.app-download {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 9998;                  /* sub player (200) doar daca s-ar suprapune; vezi .has-player */
    font-family: 'Oswald', 'Figtree', system-ui, -apple-system, sans-serif;
    pointer-events: none;           /* doar copiii primesc click */
    transition: bottom .35s cubic-bezier(.22, 1, .36, 1);
}

/* Ridica widgetul deasupra player-ului persistent cand acesta e activ */
.app-download.has-player {
    bottom: calc(6.25rem + env(safe-area-inset-bottom));
}

.app-download > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   FAB (buton mic, starea colapsata)
   -------------------------------------------------------------------------- */
.app-download__fab {
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .6rem .95rem;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    background:
        linear-gradient(135deg, var(--app-accent) 0%, #b97d1f 100%);
    box-shadow: 0 10px 24px -8px rgba(222, 155, 53, .55),
                0 0 0 1px rgba(255, 255, 255, .12) inset;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    animation: appFabIn .4s cubic-bezier(.22, 1, .36, 1);
}
.app-download__fab:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px -8px rgba(222, 155, 53, .7),
                0 0 0 1px rgba(255, 255, 255, .18) inset;
}
.app-download__fab:active { transform: translateY(0) scale(.98); }
.app-download__fab svg { width: 18px; height: 18px; flex-shrink: 0; }

.app-download.is-collapsed .app-download__fab { display: inline-flex; }
.app-download.is-collapsed .app-download__card { display: none; }

/* --------------------------------------------------------------------------
   Cardul principal (starea extinsa)
   -------------------------------------------------------------------------- */
.app-download__card {
    position: relative;
    width: 300px;
    max-width: calc(100vw - 2rem);
    padding: 1.05rem 1.05rem 1.1rem;
    border-radius: var(--app-radius);
    background:
        radial-gradient(120% 120% at 100% 0%,
            rgba(var(--app-surface-2), .9) 0%,
            rgba(var(--app-surface), .96) 55%),
        rgba(var(--app-surface), .96);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--app-shadow);
    overflow: hidden;
    animation: appCardIn .45s cubic-bezier(.22, 1, .36, 1);
}

/* Linie de accent in partea de sus a cardului */
.app-download__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--app-accent) 25%,
        var(--app-accent-soft) 50%,
        var(--app-accent) 75%,
        transparent 100%);
    opacity: .9;
}

/* Glow difuz decorativ */
.app-download__card::after {
    content: "";
    position: absolute;
    top: -45px; right: -45px;
    width: 130px; height: 130px;
    background: radial-gradient(circle, rgba(222, 155, 53, .22) 0%, transparent 70%);
    pointer-events: none;
}

/* Buton inchidere */
.app-download__close {
    position: absolute;
    top: .6rem; right: .6rem;
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .06);
    cursor: pointer;
    transition: all .2s ease;
    z-index: 2;
}
.app-download__close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    transform: rotate(90deg);
}
.app-download__close svg { width: 14px; height: 14px; }

/* Antet: iconita + texte */
.app-download__head {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    padding-right: 1.4rem;
}
.app-download__icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--app-accent);
    background: linear-gradient(135deg,
        rgba(222, 155, 53, .18) 0%,
        rgba(222, 155, 53, .06) 100%);
    box-shadow: 0 0 0 1px rgba(222, 155, 53, .25) inset;
}
.app-download__icon svg { width: 24px; height: 24px; }

.app-download__title {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.app-download__sub {
    margin: .15rem 0 0;
    font-size: .76rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .55);
    font-family: 'Figtree', system-ui, sans-serif;
}

/* Lista de butoane store */
.app-download__stores {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.store-btn {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .85rem;
    border-radius: 11px;
    text-decoration: none;
    color: #fff;
    background: rgba(var(--app-surface-2), .85);
    border: 1px solid rgba(255, 255, 255, .07);
    transition: transform .22s ease, border-color .22s ease,
                background .22s ease, box-shadow .22s ease;
}
.store-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(222, 155, 53, .55);
    background: rgba(var(--app-surface-2), 1);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6),
                0 0 0 1px rgba(222, 155, 53, .2);
}
.store-btn:active { transform: translateY(0); }

.store-btn__logo {
    flex-shrink: 0;
    width: 30px; height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.store-btn__logo svg { width: 24px; height: 24px; }

.store-btn__text { display: flex; flex-direction: column; line-height: 1.1; }
.store-btn__text small {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .5);
    font-family: 'Figtree', system-ui, sans-serif;
}
.store-btn__text strong {
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
}

.store-btn__arrow {
    margin-left: auto;
    color: rgba(255, 255, 255, .25);
    transition: transform .22s ease, color .22s ease;
}
.store-btn:hover .store-btn__arrow {
    color: var(--app-accent);
    transform: translateX(3px);
}
.store-btn__arrow svg { width: 16px; height: 16px; display: block; }

/* Link "Mai tarziu" */
.app-download__later {
    display: block;
    width: 100%;
    margin-top: .85rem;
    padding: .15rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .4);
    font-size: .72rem;
    font-family: 'Figtree', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    transition: color .2s ease;
}
.app-download__later:hover { color: rgba(255, 255, 255, .75); }

/* --------------------------------------------------------------------------
   Animatii
   -------------------------------------------------------------------------- */
@keyframes appCardIn {
    from { opacity: 0; transform: translateY(20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes appFabIn {
    from { opacity: 0; transform: translateY(14px) scale(.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .app-download {
        left: max(1rem, env(safe-area-inset-left));
        right: max(1rem, env(safe-area-inset-right));
    }
    .app-download__card,
    .app-download.is-collapsed .app-download__fab { margin-left: auto; }
    .app-download__card { width: 100%; max-width: 100%; }
    .app-download__title { font-size: .98rem; }
}

/* Player persistent are inaltime mai mare pe ecrane foarte mici */
@media (max-width: 640px) {
    .app-download.has-player { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Respecta preferinta de reducere a miscarii */
@media (prefers-reduced-motion: reduce) {
    .app-download,
    .app-download__card,
    .app-download__fab,
    .store-btn,
    .store-btn__arrow,
    .app-download__close { animation: none !important; transition: none !important; }
}