/*
 * RoyalCrackers theme tokens
 * ---------------------------------------------------------------------------
 * The active theme comes from Admin > Website and is rendered as
 * <html data-theme="dark|light" data-bs-theme="dark|light">.
 *
 * Convention for every page:
 *   1. Use var(--fc-*) tokens for all colors (text, backgrounds, borders).
 *      Never hard-code a hex text/background color in a view.
 *   2. If a section needs colors that differ per theme, write both versions:
 *
 *        [data-theme="dark"]  .my-section { background: #0f1626; color: #f7f1e3; }
 *        [data-theme="light"] .my-section { background: #fff8ec; color: #1f2433; }
 *
 *   3. New tokens must be added to BOTH blocks below.
 */

/* ===== Dark theme (default) ============================================= */
:root,
[data-theme="dark"] {
    --fc-gold: #f5c451;
    --fc-amber: #ff8a3d;
    --fc-cream: #f7f1e3;

    /* Backgrounds */
    --fc-body-bg:
        radial-gradient(ellipse at 20% 0%, rgba(255,138,61,.18), transparent 45%),
        radial-gradient(ellipse at 80% 10%, rgba(245,196,81,.12), transparent 40%),
        linear-gradient(180deg, #05070f 0%, #0c1424 45%, #10182b 100%);
    --fc-surface: rgba(16,24,43,.72);
    --fc-panel: rgba(16,24,43,.85);
    --fc-input-bg: #0b1220;
    --fc-img-bg: #0b1220;
    --fc-nav-bg: rgba(7,11,22,.85);
    --fc-dropdown-bg: rgba(12,18,34,.98);
    --fc-page-bg: rgba(16,24,43,.9);
    --fc-page-disabled-bg: rgba(11,18,32,.7);
    --fc-overlay-bg: rgba(5,7,15,.88);

    /* Text */
    --fc-text: #f7f1e3;
    --fc-heading: #f7f1e3;
    --fc-muted: #9aa3b8;
    --fc-link: #f5c451;
    --fc-link-hover: #ff8a3d;
    --fc-accent: #f5c451;
    --fc-on-accent: #1a1205;
    --fc-success: #3ccf7f;
    --fc-danger: #ff6b6b;
    --fc-on-gold: var(--fc-on-accent);

    /* Borders & shadows */
    --fc-border: rgba(245,196,81,.2);
    --fc-border-soft: rgba(245,196,81,.12);
    --fc-border-strong: rgba(245,196,81,.45);
    --fc-focus-ring: rgba(245,196,81,.2);
    --fc-shadow: 0 16px 40px rgba(0,0,0,.45);

    /* Hero */
    --fc-hero-overlay: linear-gradient(90deg, rgba(5,7,15,.92) 0%, rgba(5,7,15,.55) 45%, rgba(5,7,15,.25) 100%);
    --fc-hero-title: #f5c451;
    --fc-hero-title-glow: rgba(245,196,81,.35);
    --fc-hero-text: #e8e2d4;

    /* Bootstrap mapping */
    --bs-body-color: var(--fc-text);
    --bs-body-color-rgb: 247,241,227;
    --bs-body-bg: #0c1424;
    --bs-heading-color: var(--fc-heading);
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--fc-muted);
    --bs-tertiary-color: var(--fc-muted);
    --bs-secondary-bg: #10182b;
    --bs-tertiary-bg: #0b1220;
    --bs-link-color: var(--fc-link);
    --bs-link-color-rgb: 245,196,81;
    --bs-link-hover-color: var(--fc-link-hover);
    --bs-link-hover-color-rgb: 255,138,61;
    --bs-border-color: var(--fc-border);
}

/* ===== Light theme ====================================================== */
[data-theme="light"] {
    --fc-gold: #c98a00;
    --fc-amber: #e8742a;
    --fc-cream: #f7f1e3;

    /* Backgrounds */
    --fc-body-bg:
        radial-gradient(ellipse at 20% 0%, rgba(255,138,61,.10), transparent 45%),
        radial-gradient(ellipse at 80% 10%, rgba(245,196,81,.12), transparent 40%),
        linear-gradient(180deg, #fffaf0 0%, #fbf5e8 50%, #f7f1e3 100%);
    --fc-surface: #ffffff;
    --fc-panel: #ffffff;
    --fc-input-bg: #ffffff;
    --fc-img-bg: #f3ede0;
    --fc-nav-bg: rgba(255,255,255,.92);
    --fc-dropdown-bg: #ffffff;
    --fc-page-bg: #ffffff;
    --fc-page-disabled-bg: #f3efe6;
    --fc-overlay-bg: rgba(31,36,51,.55);

    /* Text */
    --fc-text: #1f2433;
    --fc-heading: #141824;
    --fc-muted: #5f6675;
    --fc-link: #a86f00;
    --fc-link-hover: #d4621c;
    --fc-accent: #b07800;
    --fc-on-accent: #1a1205;
    --fc-success: #1a9b55;
    --fc-danger: #d93a3a;
    --fc-on-gold: var(--fc-on-accent);

    /* Borders & shadows */
    --fc-border: rgba(176,120,0,.25);
    --fc-border-soft: rgba(176,120,0,.14);
    --fc-border-strong: rgba(176,120,0,.55);
    --fc-focus-ring: rgba(201,138,0,.2);
    --fc-shadow: 0 16px 40px rgba(31,36,51,.12);

    /* Hero */
    --fc-hero-overlay: linear-gradient(90deg, rgba(255,250,240,.95) 0%, rgba(255,250,240,.8) 45%, rgba(255,250,240,.45) 100%);
    --fc-hero-title: #b07800;
    --fc-hero-title-glow: rgba(201,138,0,.18);
    --fc-hero-text: #2b3040;

    /* Bootstrap mapping */
    --bs-body-color: var(--fc-text);
    --bs-body-color-rgb: 31,36,51;
    --bs-body-bg: #fffaf0;
    --bs-heading-color: var(--fc-heading);
    --bs-emphasis-color: #000000;
    --bs-secondary-color: var(--fc-muted);
    --bs-tertiary-color: var(--fc-muted);
    --bs-secondary-bg: #f3efe6;
    --bs-tertiary-bg: #faf6ee;
    --bs-link-color: var(--fc-link);
    --bs-link-color-rgb: 168,111,0;
    --bs-link-hover-color: var(--fc-link-hover);
    --bs-link-hover-color-rgb: 212,98,28;
    --bs-border-color: var(--fc-border);
}

/* ===== Theme-aware utility fixes ======================================== */
[data-theme] .text-warning { color: var(--fc-accent) !important; }
[data-theme] .text-secondary,
[data-theme] .text-muted { color: var(--fc-muted) !important; }
[data-theme] .text-body { color: var(--fc-text) !important; }
[data-theme] .border-secondary { border-color: var(--fc-border) !important; }
[data-theme] hr { border-color: var(--fc-border); opacity: 1; }

[data-theme="light"] .text-white,
[data-theme="light"] .text-light { color: var(--fc-text) !important; }
[data-theme="light"] .text-white-50 { color: var(--fc-muted) !important; }
[data-theme="light"] .btn-outline-light { color: var(--fc-text); border-color: var(--fc-border-strong); }
[data-theme="light"] .btn-outline-light:hover { background: var(--fc-text); color: #fff; }

[data-theme] .table {
    --bs-table-color: var(--fc-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--fc-border);
    --bs-table-striped-color: var(--fc-text);
    --bs-table-hover-color: var(--fc-text);
    color: var(--fc-text);
}

[data-theme] .modal-content {
    background: var(--fc-dropdown-bg);
    color: var(--fc-text);
    border: 1px solid var(--fc-border);
}
[data-theme] .modal-header,
[data-theme] .modal-footer { border-color: var(--fc-border); }

/* ===== Auth pages (login / register / password) ========================= */
.auth-shell {
    min-height: 100vh;
    background: var(--fc-body-bg);
    color: var(--fc-text);
    font-family: 'Outfit', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.auth-brand {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .04em;
    font-size: 2.5rem;
    color: var(--fc-accent);
    text-decoration: none;
}
.auth-brand:hover { color: var(--fc-link-hover); }
.auth-card {
    width: 100%;
    max-width: 28rem;
    margin-top: 1.25rem;
    padding: 1.75rem 1.5rem;
    background: var(--fc-panel);
    border: 1px solid var(--fc-border);
    border-radius: 1rem;
    box-shadow: var(--fc-shadow);
    color: var(--fc-text);
}
.auth-card label,
.auth-card .text-gray-600,
.auth-card .text-gray-700,
.auth-card .text-gray-900 { color: var(--fc-text) !important; }
.auth-card .text-gray-500,
.auth-card .text-sm.text-gray-600 { color: var(--fc-muted) !important; }
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
    background-color: var(--fc-input-bg) !important;
    color: var(--fc-text) !important;
    border: 1px solid var(--fc-border) !important;
    border-radius: .5rem !important;
}
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
    border-color: var(--fc-accent) !important;
    box-shadow: 0 0 0 .2rem var(--fc-focus-ring) !important;
    outline: none !important;
}
.auth-card input[type="checkbox"] {
    background-color: var(--fc-input-bg);
    border-color: var(--fc-border-strong);
    color: var(--fc-accent);
}
.auth-card a { color: var(--fc-link) !important; }
.auth-card a:hover { color: var(--fc-link-hover) !important; }
.auth-card button[type="submit"]:not(.underline) {
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-amber)) !important;
    color: var(--fc-on-accent) !important;
    border: 0 !important;
    font-weight: 700;
}
.auth-card button[type="submit"]:not(.underline):hover { filter: brightness(1.05); }
.auth-card button.underline { color: var(--fc-link) !important; background: none !important; }
.auth-card button.underline:hover { color: var(--fc-link-hover) !important; }
.auth-card .text-red-600 { color: #e5484d !important; }
.auth-card .text-green-600 { color: #2fa36b !important; }

/* ===== Site logo ======================================================== */
.site-logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; }
.site-logo-sm { height: 30px; }

/* ===== Category tiles (/products) ======================================= */
.cat-tiles {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    padding: .9rem .25rem 1rem;
    scrollbar-width: thin;
}
.cat-tile {
    position: relative;
    flex: 0 0 auto;
    width: 112px;
    min-height: 112px;
    padding: .9rem .5rem .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-align: center;
    text-decoration: none;
    color: var(--fc-text);
    background: var(--fc-surface);
    border: 1px solid var(--fc-border);
    border-radius: 1rem;
    box-shadow: var(--fc-shadow);
    transition: transform .15s ease, border-color .15s ease;
}
.cat-tile:hover { transform: translateY(-2px); border-color: var(--fc-border-strong); color: var(--fc-text); }
.cat-tile.active {
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-amber));
    border-color: transparent;
    color: var(--fc-on-accent);
}
.cat-tile-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fc-img-bg);
    border: 2px solid var(--fc-border);
}
.cat-tile.active .cat-tile-img { border-color: var(--fc-on-accent); }
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; }
.cat-tile-all-icon { font-size: 1.5rem; color: var(--fc-accent); }
.cat-tile-name {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}
.cat-tile-count {
    position: absolute;
    top: .35rem;
    right: .45rem;
    min-width: 1.4rem;
    padding: 0 .35rem;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.4rem;
    border-radius: 999px;
    background: var(--fc-img-bg);
    color: var(--fc-muted);
    border: 1px solid var(--fc-border-soft);
}
.cat-tile.active .cat-tile-count { background: var(--fc-on-accent); color: var(--fc-gold); border-color: transparent; }
.cat-tiles-wrap { position: relative; }
.cat-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 1px solid var(--fc-border);
    background: var(--fc-surface);
    color: var(--fc-gold);
    box-shadow: var(--fc-shadow);
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.cat-scroll-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-amber));
    border-color: transparent;
    color: var(--fc-on-accent);
}
.cat-scroll-btn:disabled { opacity: .35; cursor: default; }
.cat-scroll-prev { left: -.5rem; }
.cat-scroll-next { right: -.5rem; }

/* ===== Catalog table (/products) ======================================== */
.catalog-table-wrap {
    border: 1px solid var(--fc-border);
    border-radius: 1rem;
    background: var(--fc-panel);
    box-shadow: var(--fc-shadow);
}
.catalog-table { min-width: 860px; }
.catalog-table thead th {
    background: linear-gradient(135deg, var(--fc-gold), var(--fc-amber));
    color: var(--fc-on-accent);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
    border: 0;
    padding: .85rem .75rem;
}
.catalog-table tbody td { border-color: var(--fc-border-soft); padding: .75rem; }
[data-theme="dark"]  .catalog-table tbody tr:nth-child(even) td { background: rgba(245,196,81,.04); }
[data-theme="light"] .catalog-table tbody tr:nth-child(even) td { background: #fbf6ea; }
.catalog-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: .5rem;
    background: var(--fc-img-bg);
    border: 1px solid var(--fc-border-soft);
}
.catalog-name-cell { min-width: 220px; }
.catalog-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.catalog-name-row .badge { font-size: .68rem; }
.catalog-name { font-weight: 700; color: var(--fc-heading); text-decoration: none; }
.catalog-name:hover { color: var(--fc-link-hover); }
.catalog-desc { font-size: .78rem; color: var(--fc-muted); margin-top: .15rem; }
.catalog-old-price { color: var(--fc-danger); text-decoration: line-through; font-weight: 600; }
.catalog-disc { font-size: .7rem; color: var(--fc-muted); }
.catalog-total { font-weight: 700; color: var(--fc-accent); white-space: nowrap; }

.cart-qty-inline {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--fc-border-strong);
    border-radius: .5rem;
    overflow: hidden;
    background: var(--fc-input-bg);
}
.cart-qty-inline-btn {
    width: 2rem;
    border: 0;
    background: transparent;
    color: var(--fc-text);
    font-weight: 700;
}
.cart-qty-inline-btn:hover:not(:disabled) { background: var(--fc-focus-ring); }
.cart-qty-inline-btn:disabled { opacity: .4; }
.cart-qty-inline-input {
    width: 3rem;
    border: 0;
    border-left: 1px solid var(--fc-border);
    border-right: 1px solid var(--fc-border);
    background: transparent;
    color: var(--fc-text);
    text-align: center;
    font-weight: 700;
    -moz-appearance: textfield;
}
.cart-qty-inline-input::-webkit-outer-spin-button,
.cart-qty-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty-inline-input:focus { outline: none; background: var(--fc-focus-ring); }
.cart-qty-inline.is-busy { opacity: .6; }

/* ===== Products search ================================================== */
.products-search { position: relative; flex: 1 1 auto; min-width: 260px; }
.products-search-icon {
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fc-accent);
    pointer-events: none;
}
.products-search .form-control {
    padding-left: 2.6rem;
    border-radius: 999px;
    background: var(--fc-input-bg);
    border-color: var(--fc-border);
    color: var(--fc-text);
}
.products-search .form-control:focus { border-color: var(--fc-accent); box-shadow: 0 0 0 .2rem var(--fc-focus-ring); }

/* ===== Catalog cards (/products, mobile) ================================ */
.catalog-card-list {
    border: 1px solid var(--fc-border);
    border-radius: 1rem;
    overflow: hidden;
    background: var(--fc-surface);
    box-shadow: var(--fc-shadow);
}
.catalog-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: .75rem;
    align-items: start;
    padding: 1rem .85rem;
    border-top: 1px solid var(--fc-border-soft);
}
.catalog-card:first-child { border-top: 0; }
[data-theme="dark"]  .catalog-card:nth-child(even) { background: rgba(245,196,81,.04); }
[data-theme="light"] .catalog-card:nth-child(even) { background: #fbf6ea; }
.catalog-card-img { display: inline-block; }
.catalog-card-img img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: .6rem;
    background: var(--fc-img-bg);
    border: 1px solid var(--fc-border-soft);
}
.catalog-card-body { min-width: 0; }
.catalog-card-body .catalog-name { display: block; font-size: .95rem; line-height: 1.25; }
.catalog-card-meta { font-size: .75rem; color: var(--fc-muted); margin-top: .2rem; }
.catalog-card-prices { display: flex; align-items: baseline; gap: .5rem; margin-top: .4rem; }
.catalog-card-old { color: var(--fc-danger); text-decoration: line-through; font-size: .85rem; }
.catalog-card-amount { color: var(--fc-success); font-weight: 700; }
.catalog-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.catalog-card-total { font-size: .75rem; color: var(--fc-muted); white-space: nowrap; }
.catalog-card-total [data-row-total] { color: var(--fc-danger); font-weight: 700; font-size: .85rem; }
.catalog-card-empty { padding: 1.5rem; text-align: center; color: var(--fc-muted); }

@media (max-width: 767.98px) {
    .products-search-form { width: 100%; }
    .products-search { min-width: 0; }
    .products-search .form-control { padding-top: .7rem; padding-bottom: .7rem; }
    .cat-tiles { gap: .6rem; padding-top: .6rem; }
    .cat-tile { width: 96px; min-height: 100px; padding: .75rem .4rem .6rem; }
    .cat-tile-img { width: 44px; height: 44px; }
    .cat-tile-name { font-size: .65rem; }
    .cat-scroll-btn { width: 2rem; height: 2rem; }
    .cat-scroll-prev { left: -.25rem; }
    .cat-scroll-next { right: -.25rem; }
    .cart-qty-inline-btn { width: 1.75rem; }
    .cart-qty-inline-input { width: 2.6rem; font-size: .9rem; }
}