/* =============================================
   Store links shared by every page: nav buttons, platform ordering,
   and the phone download bar. Platform classes come from stores.js.
   ============================================= */

/* ---------- Nav: both stores, always ---------- */
.nav-stores { display: flex; align-items: center; gap: 8px; }
.nav-store {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 14px 0 11px;
    background: #050905;
    border: 1px solid rgba(232, 231, 187, 0.20);
    border-radius: 11px;
    color: #E8E7BB !important;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px; font-weight: 600 !important; letter-spacing: -0.01em;
    white-space: nowrap; text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.nav-store:hover {
    border-color: #C8A84B;
    transform: translateY(-1px);
    box-shadow: 0 0 22px 2px rgba(200, 168, 75, 0.22);
}
.nav-store svg { width: 17px; height: 17px; flex-shrink: 0; }

/* The visitor's own store leads and gets the gold treatment */
.is-ios .nav-store--apple,
.is-android .nav-store--play {
    background: #C8A84B; border-color: #C8A84B; color: #1C3D14 !important;
}
.is-ios .nav-store--apple:hover,
.is-android .nav-store--play:hover { background: #d4b455; }

.is-android .nav-store--play,
.is-android .store-btn--play { order: -1; }

/* Matching emphasis on the big buttons: gold edge on the visitor's store */
.is-ios .store-btn--apple,
.is-android .store-btn--play {
    border-color: rgba(200, 168, 75, 0.75);
    box-shadow: 0 0 24px 2px rgba(200, 168, 75, 0.14);
}

@media (max-width: 600px) {
    .nav-stores { gap: 6px; }
    .nav-store { height: 34px; padding: 0 11px 0 9px; gap: 6px; font-size: 12px; border-radius: 10px; }
    .nav-store svg { width: 15px; height: 15px; }
}
@media (max-width: 360px) {
    /* Smallest phones: icons carry it, labels stay for screen readers */
    .nav-store span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .nav-store { padding: 0 10px; }
}

/* ---------- Phone download bar (home page) ---------- */
.get-bar { display: none; }
@media (max-width: 768px) {
    .get-bar {
        position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 10px 10px 10px 14px;
        background: rgba(8, 14, 7, 0.94);
        border: 1px solid rgba(232, 231, 187, 0.14);
        border-radius: 16px;
        backdrop-filter: blur(16px) saturate(1.3);
        -webkit-backdrop-filter: blur(16px) saturate(1.3);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
        transform: translateY(calc(100% + 24px));
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) * 0.5);
    }
    .get-bar.show { transform: translateY(0); }
    .get-bar-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .get-bar-text strong { font-size: 14px; font-weight: 700; color: #E8E7BB; }
    .get-bar-text span { font-size: 12px; color: rgba(232, 231, 187, 0.55); }
    /* On a known phone, offer just that phone's store */
    .is-ios .get-bar .nav-store--play,
    .is-android .get-bar .nav-store--apple { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .get-bar { transition: none; }
}