/*
  ОРНОТУУ СУНУШУНУН КӨРҮНҮШҮ (ТЗ, 38-тапшырма; 36-тапшырманын баннери)
  ====================================================================

  keyboard.css сыяктуу эле — ТАЗА CSS, Tailwind ЭМЕС. Себеби ошол:
    1. Styles/app.css тийилбейт — баннер долбоордун курамасына (build)
       эч кандай таасир тийгизбейт;
    2. Tailwind'дин классы бул жерде керек эмес, баннер курамага көз
       каранды эмес туура көрүнөт.

  Баннер БАШТАЛЫШЫНАН КӨРҮНБӨЙТ: Razor аны `hidden` менен чыгарат, JS гана
  ачат. JS иштебесе — колдонуучу эч нерсе көрбөйт, сайт мурдагыдай иштейт.

  Орду: ылдый жакта, бирок клавиатуранын туруктуу баскычынан (.kbd-fab,
  оң ылдый бурчта 64px) бийигирээк — экөө бири-бирин жаппасын.
*/

.pwa-banner {
    /* keyboard.css'тин z-index'и 2147483000 — баннер андан ТӨМӨН турсун. */
    position: fixed;
    z-index: 2147482000;
    right: 12px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.pwa-banner[hidden] {
    display: none;
}

.pwa-card {
    --pwa-bg: #ffffff;
    --pwa-line: #e5e5e5;
    --pwa-text: #18181b;
    --pwa-muted: #71717a;
    --pwa-accent: #d97706;
    --pwa-accent-text: #ffffff;
    --pwa-ghost-bg: #f4f4f5;

    width: 100%;
    max-width: 520px;
    padding: 14px 16px;
    border: 1px solid var(--pwa-line);
    border-radius: 16px;
    background: var(--pwa-bg);
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
    color: var(--pwa-text);
    font-size: 15px;
    line-height: 1.45;
    pointer-events: auto;
}

/*
  Караңгы түс keyboard.css жана Styles/app.css менен бир эрежеде:
  `data-theme` коюлса — колдонуучунун тандоосу, коюлбаса — OS чечет.
*/
:root[data-theme="dark"] .pwa-card {
    --pwa-bg: #18181b;
    --pwa-line: #3f3f46;
    --pwa-text: #fafafa;
    --pwa-muted: #a1a1aa;
    --pwa-accent: #f59e0b;
    --pwa-accent-text: #1c1917;
    --pwa-ghost-bg: #27272a;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pwa-card {
        --pwa-bg: #18181b;
        --pwa-line: #3f3f46;
        --pwa-text: #fafafa;
        --pwa-muted: #a1a1aa;
        --pwa-accent: #f59e0b;
        --pwa-accent-text: #1c1917;
        --pwa-ghost-bg: #27272a;
        box-shadow: 0 12px 32px rgb(0 0 0 / 0.55);
    }
}

/* Жумшак чыгуу. Кыймылды каалабагандарга — кыймылсыз. */
.pwa-card {
    animation: pwa-rise 180ms ease-out;
}

@keyframes pwa-rise {
    from { transform: translateY(12px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-card { animation: none; }
}

/* --- үстүңкү сап: 🍔 + текст ---------------------------------------------- */

.pwa-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pwa-emoji {
    flex: none;
    font-size: 26px;
    line-height: 1.2;
}

.pwa-text {
    margin: 0;
    font-weight: 500;
}

/* --- iPhone'дун көрсөтмөсү ------------------------------------------------ */

.pwa-steps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--pwa-ghost-bg);
    color: var(--pwa-muted);
    font-size: 14px;
}

.pwa-steps[hidden] {
    display: none;
}

.pwa-share {
    flex: none;
    width: 20px;
    height: 20px;
    color: #0a84ff;
}

/* --- баскычтар ------------------------------------------------------------ */

.pwa-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.pwa-btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.pwa-btn[hidden] {
    display: none;
}

.pwa-btn:active {
    filter: brightness(0.94);
}

.pwa-btn:focus-visible {
    outline: 3px solid var(--pwa-accent);
    outline-offset: 2px;
}

.pwa-btn-main {
    background: var(--pwa-accent);
    color: var(--pwa-accent-text);
}

.pwa-btn-ghost {
    border-color: var(--pwa-line);
    background: transparent;
    color: var(--pwa-muted);
}

/* Абдан тар экранда баскычтар бири-биринин астына түшөт. */
@media (max-width: 340px) {
    .pwa-actions {
        flex-direction: column;
    }
}