/* ============================================================================
 * Money Track — Cookie consent banner (static fallback, Vite-independent).
 *
 * Self-contained on purpose: it does NOT rely on the design tokens (--space-*,
 * --radius-*) or the .btn system, because those only ship through the Vite
 * bundle. When the Vite manifest is stale the banner would otherwise render
 * completely unstyled. All values here are hardcoded so it always looks right
 * on both the guest (marketing) and authed app layouts.
 * ============================================================================ */

[x-cloak] { display: none !important; }

.mt-cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    max-width: 680px;
    margin-inline: auto;
    background: #1d1d1f;
    color: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
    z-index: 9000;
    padding: 18px 22px;
    box-sizing: border-box;
}

.mt-cookie-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 680px) {
    .mt-cookie-inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }
}

.mt-cookie-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #c7c7cc;
}
.mt-cookie-text strong { color: #ffffff; font-weight: 700; }
.mt-cookie-text a { color: #6ab0ff; text-decoration: underline; }
.mt-cookie-text a:hover { color: #8fc4ff; }

.mt-cookie-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.mt-cookie-btn {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 11px 18px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.mt-cookie-btn:active { transform: translateY(1px); }
.mt-cookie-btn:focus-visible { outline: 3px solid rgba(0, 113, 227, 0.5); outline-offset: 2px; }

.mt-cookie-btn--ghost {
    background: transparent;
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.28);
}
.mt-cookie-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
}

.mt-cookie-btn--solid {
    background: #0071e3;
    color: #ffffff;
}
.mt-cookie-btn--solid:hover { background: #0062c4; }

/* Mobile: sit above the bottom nav, stack buttons full-width. */
@media (max-width: 679px) {
    .mt-cookie-banner { bottom: 88px; }
    .mt-cookie-actions { width: 100%; }
    .mt-cookie-btn { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mt-cookie-btn { transition: none; }
}