/* ==========================================================================
   MAGIC STORE — theme + refinement layer
   Dark (default) and light ([data-theme="light"]) palettes are declared as
   tokens in includes/theme-head.php (loaded by app_start.php and by the
   standalone pages: login, register, reset-password, guest-order, reviews).
   This sheet restyles the shared UI on top of those tokens, keeps contrast
   correct on both themes, and removes the over-decorated bits (heavy glows,
   glassy borders, stray gradients).
   `html ` prefix = beats page-level single-class rules on every page.
   ========================================================================== */

/* ---------- base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    transition: background-color 0.25s ease, color 0.25s ease;
}
::selection { background: rgba(var(--primary-rgb), 0.30); }
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: 0.01em; }
img { max-width: 100%; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- theme toggle ---------- */
.theme-toggle {
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--fill);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover {
    background: var(--fill-strong);
    border-color: var(--border-strong);
    color: var(--primary-light);
    transform: translateY(-1px);
}
.theme-toggle:active { transform: translateY(0); }

/* ---------- sidebar ---------- */
html .sidebar {
    background: var(--bg-nav);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
}
html .sidebar-logo .logo-circle {
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
html .sidebar-logo .logo-text .magic { color: var(--primary-light); }
html .sidebar-logo .logo-text .store { color: var(--text); }
html .nav-item > a,
html .nav-item > .nav-toggle {
    color: var(--text-2);
    font-size: 15px;
    border-radius: 10px;
    padding: 10px 14px;
}
html .nav-item > a:hover,
html .nav-item > .nav-toggle:hover { color: var(--text); background: var(--fill); }
html .nav-item > a.active { color: var(--primary-light); font-weight: 600; }
html .nav-indicator {
    background: rgba(var(--primary-rgb), 0.14);
    border-color: rgba(var(--primary-rgb), 0.30);
}
html .nav-sub a { color: var(--text-3); }
html .nav-sub a:hover { color: var(--text); background: var(--fill); }
html .nav-sub a.active { color: var(--primary-light); }
html .sidebar-bottom p { color: var(--text-3); }

/* ---------- topbar ---------- */
html .topbar { gap: 14px; }
html .pill-icon {
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}
html .pill-icon:hover { color: var(--primary-light); background: var(--fill); }
html .topbar-search {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 50px;
}
html .topbar-search:hover { border-color: var(--border-strong); }
html .topbar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18); }
html .topbar-search i { color: var(--text-3); }
html .topbar-search input { color: var(--text); }
html .topbar-search input::placeholder { color: var(--text-3); }
html .friends-pill {
    background: var(--surface);
    border: 2px solid var(--border);
}
html .friends-icon { background: var(--fill); color: var(--text); }
html .user-pill {
    background: var(--surface);
    border: 2px solid var(--border);
}
html .user-info .name { color: var(--text); }
html .user-avatar-wrap {
    background: linear-gradient(135deg, var(--text), var(--text-2));
}
html .user-avatar-fallback { color: #fff; }
html .notif-dropdown,
html .user-dropdown { box-shadow: var(--shadow-3); }
html .user-dropdown .divider { background: var(--border); }

/* badges / counters keep white ink in both themes */
html .cart-count,
html .notif-dot,
html .fr-badge,
html .fr-req-badge,
html .fr-unread,
html .bn-badge,
html .logo-circle,
html .ml-dot,
html .friends-pill .fr-badge,
html .review-avatar { color: #fff; }

/* ---------- section headers ---------- */
.hscroll-header { align-items: flex-end; gap: 12px; }
.hscroll-header h2,
html .related-section h2,
html .orders-section-title,
html .product-description h3,
html .checkout-form h2,
html .cart-summary h3,
html .checkout-summary h3 {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text);
}
html .hscroll-header a {
    color: var(--link);
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
html .hscroll-header a:hover { color: var(--primary-light); }

/* ---------- cards ---------- */
html .hscroll-card,
html .p-card,
html .related-card,
html .product-card,
html .wall-card,
html .review-card,
html .order-card,
html .settings-card,
html .profile-top-card,
html .cart-summary,
html .cart-item,
html .sum-item,
html .gift-card,
html .product-guarantee,
html .otp-box,
html .checkout-summary,
html .store-pager a {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
html .hscroll-card,
html .p-card,
html .related-card,
html .product-card,
html .wall-card,
html .review-card { border-radius: 14px; }
html .order-card,
html .settings-card,
html .profile-top-card,
html .cart-summary,
html .cart-item,
html .sum-item,
html .gift-card,
html .product-guarantee,
html .otp-box { border-radius: 16px; }

html .hscroll-card,
html .p-card,
html .related-card,
html .product-card,
html .review-card,
html .order-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
html .hscroll-card:hover,
html .p-card:hover,
html .related-card:hover,
html .product-card:hover,
html .review-card:hover,
html .order-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: var(--shadow-2);
}
html .hscroll-card:active,
html .p-card:active,
html .related-card:active,
html .product-card:active { transform: translateY(-1px); }

/* card internals */
html .hscroll-card-title,
html .p-card-title,
html .related-card-title { color: var(--text); }
html .hscroll-card-price,
html .related-card-price { color: var(--text); }
html .hscroll-card-price .old,
html .p-card-old,
html .product-price-detail .price-old { color: var(--text-3); }
html .hscroll-card-stock,
html .stock-unlimited { color: var(--success); }
html .p-card-new,
html .product-price-detail .price-new { color: var(--text); }
html .p-card-cat { color: var(--text-3); }

/* card artwork sits a touch under full brightness; hover lifts it back up */
html .hscroll-card-img img,
html .p-card-img img,
html .related-card-img img,
html .product-card .product-card-img img {
    filter: brightness(0.96) saturate(0.98);
    transition: filter 0.24s ease, transform 0.24s ease;
}
html .hscroll-card:hover .hscroll-card-img img,
html .p-card:hover .p-card-img img,
html .related-card:hover .related-card-img img,
html .product-card:hover .product-card-img img {
    filter: brightness(1.02) saturate(1);
}

/* badges over artwork keep white ink */
html .hscroll-card-badge,
html .p-card-badge,
html .detail-badge,
html .hscroll-card-plat,
html .p-card-platform { color: #fff; }
html .hscroll-card-badge,
html .p-card-badge { background: var(--danger-solid); }
html .hscroll-card-plat,
html .p-card-platform {
    background: rgba(8, 8, 12, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* ---------- buttons ---------- */
.btn,
.btn-login,
.btn-verify,
.store-search button,
.hero-slide-btn,
.back-btn,
.cart-qty button,
.chip-copy {
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}
html .btn-primary,
html .btn-login,
html .btn-success,
html .btn-danger,
html .btn-verify.primary,
html .store-search button,
html .hero-slide-btn,
html .btn-wa,
html .fr-add,
html .fr-add-btn,
html .fr-accept,
html .fr-send,
html .home-enter-btn,
html .slide-buy-btn,
html .store-pager a.active,
html .wall-discover,
html .btn-browse,
html .empty-box .btn-browse,
html .hero-slide-btn { color: #fff; }
html .fr-add,
html .fr-add-btn,
html .fr-send,
html .fr-unread,
html .friends-icon .fr-badge { color: #fff; }

/* solid CTAs get the deep purple so white ink clears contrast on both themes */
html .wall-discover,
html .btn-browse,
html .empty-box .btn-browse,
html .btn-primary,
html .btn-login,
html .btn-verify.primary,
html .store-search button,
html .store-pager a.active,
html .home-enter-btn,
html .fr-add,
html .fr-add-btn,
html .fr-send,
html .fr-unread,
html .friends-icon .fr-badge { background: var(--primary-strong); }
html .wall-discover:hover,
html .btn-browse:hover { background: var(--primary-hover); }

/* buttons that sit on slide art / brand colours: darken the fill under the ink */
html .slide-buy-btn,
html .hero-slide-btn { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.30); }

html .btn-primary:hover,
html .btn-login:hover,
html .btn-verify.primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
}
html .btn-primary:active,
html .btn-login:active { transform: translateY(0); box-shadow: none; }
html .btn-secondary {
    background: var(--fill);
    border: 1px solid var(--border);
    color: var(--text-2);
}
html .btn-secondary:hover {
    background: var(--fill-strong);
    border-color: var(--border-strong);
    color: var(--text);
}
html .btn-success { background: var(--success); }
html .btn-success:hover { filter: brightness(0.94); }
html .btn-danger { background: var(--danger); }
html .btn-danger:hover { filter: brightness(0.94); }
html .btn[disabled],
html .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- forms ---------- */
.form-group label { color: var(--text-2); }
html .forgot-link { color: var(--link); }
.form-control,
.settings-input,
.otp-input,
.fr-input-bar input {
    background: var(--fill);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 10px;
}
.form-control::placeholder,
.settings-input::placeholder,
.otp-input::placeholder,
.fr-input-bar input::placeholder { color: var(--text-3); }
.form-control:hover,
.settings-input:hover { border-color: var(--border-strong); }
.form-control:focus,
.settings-input:focus,
.otp-input:focus,
.fr-input-bar input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
    background: var(--surface);
}
select.form-control option { background: var(--surface); color: var(--text); }
input[type="range"] { accent-color: var(--primary); }

/* ---------- alerts / status ---------- */
.alert { border-radius: 12px; border: 1px solid transparent; }
.alert-success { background: rgba(39, 201, 149, 0.12); color: var(--success); border-color: rgba(39, 201, 149, 0.28); }
.alert-error { background: rgba(225, 112, 85, 0.12); color: var(--danger); border-color: rgba(225, 112, 85, 0.28); }
.status-pill { border-radius: 8px; letter-spacing: 0.04em; }
.status-pill.success { background: rgba(39, 201, 149, 0.12); color: var(--success); border: 1px solid rgba(39, 201, 149, 0.30); }
.status-pill.info { background: rgba(var(--primary-rgb), 0.12); color: var(--primary-light); border: 1px solid rgba(var(--primary-rgb), 0.30); }
.status-pill.warning { background: rgba(253, 203, 110, 0.14); color: var(--warning); border: 1px solid rgba(253, 203, 110, 0.32); }
.status-pill.error { background: rgba(225, 112, 85, 0.12); color: var(--danger); border: 1px solid rgba(225, 112, 85, 0.30); }

/* ---------- misc component fixes ---------- */
html .breadcrumb { color: var(--text-3); }
html .breadcrumb a { color: var(--text-2); }
html .breadcrumb a:hover { color: var(--primary-light); }
html .breadcrumb span { color: var(--text-3); }
html .product-meta { color: var(--text-2); }
html .product-meta i { color: var(--text-3); }
html .product-description p { color: var(--text-2); }
html .order-date,
html .order-item-field,
html .sum-qty { color: var(--text-3); }
html .order-item-field strong { color: var(--text-2); }
html .order-item-name,
html .settings-value { color: var(--text); }
html .settings-label,
html .otp-hint,
html .price-filter label { color: var(--text-2); }
html .review-text { color: var(--text-2); }
html .empty-cart,
html .empty-cart h3,
html .empty-box h3,
html .empty-box p,
html .store-products-empty h3,
html .store-products-empty p,
html .store-products-empty i { color: var(--text-3); }
html .empty-cart p { color: var(--text-3); }
html .cart-summary-row { color: var(--text-2); }
html .cart-summary-row.total { color: var(--text); border-top-color: var(--border); }
html .sum-name,
html .sum-price { color: var(--text); }
html .sum-row { color: var(--text-2); }
html .flash-msg {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-2);
}
html .mobile-menu-btn { background: var(--fill); border: 1px solid var(--border); color: var(--text); }
html .tray-icon { color: var(--text); }

/* footer */
.footer { border-top: 1px solid var(--border); color: var(--text-3); }
.footer-links a { color: var(--text-3); }
.footer-links a:hover { color: var(--primary-light); }

/* media overlays keep light ink in both themes */
html .hero-slide-title,
html .hero-slide-subtitle,
html .hero-arrow,
html .scroll-arrow,
html .wall-card-sub,
html .home-title .store,
html .home-subtitle { color: #fff; }
html .hero-slide-title,
html .wall-card-sub { text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55); }
html .home-subtitle { color: rgba(255, 255, 255, 0.72); }

/* soft keyboard/search layer */
html #searchDrop { background: var(--surface); border-color: var(--border); }

/* ---------- phone header (≤900px): calmer glass ---------- */
@media (max-width: 900px) {
    .topbar {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-2);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
    .bottom-nav {
        background: var(--glass-bg);
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-2);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
    }
}

/* ---------- button motion: shine sweep / swipe fill / press + click ripple ---------- */
html .btn-primary,
html .btn-login,
html .btn-verify.primary,
html .store-search button,
html .hero-slide-btn,
html .home-enter-btn,
html .btn-browse,
html .wall-discover,
html .login-btn,
html .fr-add,
html .fr-add-btn,
html .fr-send {
    position: relative;
    overflow: hidden;
}
html .btn-primary::after,
html .btn-login::after,
html .btn-verify.primary::after,
html .store-search button::after,
html .hero-slide-btn::after,
html .home-enter-btn::after,
html .btn-browse::after,
html .wall-discover::after,
html .login-btn::after,
html .fr-add::after,
html .fr-add-btn::after,
html .fr-send::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 55%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.26) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.3s ease;
    pointer-events: none;
    z-index: 1;
}
html .btn-primary:hover::after,
html .btn-login:hover::after,
html .btn-verify.primary:hover::after,
html .store-search button:hover::after,
html .hero-slide-btn:hover::after,
html .home-enter-btn:hover::after,
html .btn-browse:hover::after,
html .wall-discover:hover::after,
html .login-btn:hover::after,
html .fr-add:hover::after,
html .fr-add-btn:hover::after,
html .fr-send:hover::after { left: 135%; }

/* secondary buttons: colour wash sweeps in from the left */
html .btn-secondary,
html .guest-btn,
html .back-btn,
html .chip-copy {
    background-image: linear-gradient(rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.16));
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size 0.28s cubic-bezier(0.25, 1, 0.5, 1), color 0.24s ease,
                border-color 0.24s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
html .btn-secondary:hover,
html .guest-btn:hover,
html .back-btn:hover,
html .chip-copy:hover {
    background-image: linear-gradient(rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.16));
    background-size: 100% 100%;
    color: var(--primary-light);
    border-color: rgba(var(--primary-rgb), 0.40);
}

/* press feedback for icon / pill controls */
html .pill-icon:active,
html .cart-qty button:active,
html .chip-copy:active,
html .store-pager a:active { transform: scale(0.90); }
html .hero-arrow:active { transform: translateY(-50%) scale(0.90); }
html .home-enter-btn:active,
html .btn-browse:active,
html .wall-discover:active { transform: translateY(0) scale(0.97); }

/* click ripple (JS in theme-head injects .ms-ripple inside the pressed control) */
.ms-ripple {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: 0% 0%;
    opacity: 0.55;
    animation: msRipple 0.6s ease-out forwards;
}
@keyframes msRipple {
    to { background-size: 230% 230%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html .btn-primary::after,
    html .btn-login::after,
    html .btn-verify.primary::after,
    html .store-search button::after,
    html .hero-slide-btn::after,
    html .home-enter-btn::after,
    html .btn-browse::after,
    html .wall-discover::after,
    html .login-btn::after,
    html .fr-add::after,
    html .fr-add-btn::after,
    html .fr-send::after { display: none; }
    html .btn-secondary,
    html .guest-btn,
    html .back-btn,
    html .chip-copy { transition: none; }
    .ms-ripple { display: none; }
}