/* ============================================================
   INSPERO global theme — black (#010001) + gold (#DCAE30)
   Loaded LAST so it re-skins every page (all controllers) with
   the same dark maison look without touching page markup.
   ============================================================ */

:root {
    --ins-black: #010001;        /* primary black — page background */
    --ins-surface: #101012;      /* card / panel surface */
    --ins-surface-2: #17171a;    /* lifted surface (hover, inputs) */
    --ins-gold: #dcae30;         /* gold accent (from the logo) */
    --ins-gold-bright: #e8c860;  /* highlight gold */
    --ins-gold-deep: #b8901f;    /* pressed / border gold */
    --ins-text: #f5f2ea;         /* warm off-white body text */
    --ins-muted: #a8a294;        /* muted text */
    --ins-line: rgba(220, 174, 48, 0.22);  /* gold hairline borders */
    --ins-line-soft: rgba(255, 255, 255, 0.08);
    --ins-on-gold: #010001;      /* black text on gold */
}

/* ---------- Base ---------- */

html.inspero-root,
.ins-body {
    background: var(--ins-black);
    color: var(--ins-text);
    font-family: 'Jost', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.ins-body {
    min-height: 100vh;
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(220, 174, 48, 0.10), transparent 60%),
        radial-gradient(900px 500px at -10% 25%, rgba(220, 174, 48, 0.05), transparent 55%),
        var(--ins-black);
}

h1, h2, h3, h4 { font-family: 'Cormorant Garamond', serif; }

a { color: inherit; }
.ins-gold { color: var(--ins-gold); }

::selection { background: rgba(220, 174, 48, 0.35); color: #fff; }

a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ins-gold);
    outline-offset: 3px;
}

/* ---------- Header / nav ---------- */

.ins-header {
    background: rgba(1, 0, 1, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ins-line);
}

.ins-logo-img { border-radius: 6px; }

.ins-logo-word {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 0.42em;
    font-size: 1.3rem;
    color: var(--ins-gold);
}

.ins-navlink {
    color: var(--ins-muted);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: color .25s ease;
}
.ins-navlink:hover { color: var(--ins-gold-bright); }
.ins-navlink.active { color: var(--ins-gold); }

.ins-iconbtn { color: var(--ins-text); }
.ins-iconbtn:hover { background: rgba(220, 174, 48, 0.12); color: var(--ins-gold-bright); }

/* ---------- Collection mega-menu (CK-style columns, dark) ---------- */

.ins-mega-wrap { display: inline-flex; align-items: center; }
/* Bridge the hover gap between the link and the panel */
.ins-mega-wrap::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 26px;
    bottom: -26px;
    display: none;
}

.ins-mega {
    /* Anchored to the sticky header (nearest positioned ancestor), so it
       always opens flush under it regardless of scroll position. */
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(4, 3, 4, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--ins-line);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s cubic-bezier(.22,.61,.36,1),
                transform .3s cubic-bezier(.22,.61,.36,1),
                visibility 0s linear .3s;
    z-index: 60;
}
.ins-mega-wrap:hover .ins-mega,
.ins-mega-wrap:focus-within .ins-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.ins-mega-feature {
    position: relative;
    display: block;
    border-radius: 10px;
    border: 1px solid var(--ins-line);
    overflow: hidden;
    min-height: 150px;
}
.ins-mega-feature img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    filter: brightness(.75);
}
.ins-mega-feature span {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: .3rem .8rem;
    background: rgba(1, 0, 1, .75);
    border: 1px solid var(--ins-line);
    border-radius: 999px;
    color: var(--ins-gold);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ins-mega-head {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ins-text);
    margin-bottom: .9rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--ins-line);
    transition: color .2s ease;
}
.ins-mega-head:hover { color: var(--ins-gold); }

.ins-mega-list { list-style: none; margin: 0; padding: 0; }
.ins-mega-list li + li { margin-top: .55rem; }
.ins-mega-list a {
    font-size: .84rem;
    color: var(--ins-muted);
    letter-spacing: .04em;
    transition: color .2s ease, padding-left .25s cubic-bezier(.22,.61,.36,1);
}
.ins-mega-list a:hover {
    color: var(--ins-gold-bright);
    padding-left: 6px;
}

.ins-search {
    background: var(--ins-surface-2);
    border: 1px solid var(--ins-line);
    color: var(--ins-text);
    border-radius: 999px;
    /* The global input rule's padding out-ranks Tailwind's pl-* classes
       (attribute selector specificity), so restate the icon clearance here. */
    padding-left: 2.4rem !important;
}
.ins-search::placeholder { color: var(--ins-muted); }
.ins-search:focus { border-color: var(--ins-gold); box-shadow: 0 0 0 1px var(--ins-gold); }

.ins-avatar { border: 1px solid var(--ins-line); }

/* ---------- Bottom nav / sheets / cards ---------- */

.ins-bottomnav {
    background: rgba(1, 0, 1, 0.95);
    border-top: 1px solid var(--ins-line);
    backdrop-filter: blur(10px);
}
.ins-bottomlink { color: var(--ins-muted); }
.ins-bottomlink:hover, .ins-bottomlink.active { color: var(--ins-gold); }

.ins-sheet {
    background: var(--ins-surface);
    color: var(--ins-text);
    border: 1px solid var(--ins-line);
    border-bottom: none;
}
.ins-sheetlink { border: 1px solid var(--ins-line-soft); }
.ins-sheetlink:hover { background: rgba(220, 174, 48, 0.10); border-color: var(--ins-line); }

.ins-divider { background: var(--ins-line); }

.ins-card {
    background: var(--ins-surface);
    color: var(--ins-text);
    border: 1px solid var(--ins-line);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

/* ---------- Footer ---------- */

.ins-footer {
    background: #060506;
    border-top: 1px solid var(--ins-line);
}
.ins-footer-head {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    color: var(--ins-gold);
    letter-spacing: 0.08em;
}
.ins-footer-link { color: var(--ins-muted); transition: color .2s ease; }
.ins-footer-link:hover { color: var(--ins-gold-bright); }
.ins-footer-tagline { color: var(--ins-muted); font-size: 0.9rem; max-width: 26ch; }
.ins-footer-bottom { border-top: 1px solid var(--ins-line-soft); }
.ins-footer-copy { color: var(--ins-muted); }

/* ============================================================
   Global dark re-skin of legacy light utilities & components.
   The inner pages were written light-first (white cards, stone
   greys); these overrides flip them to the INSPERO palette so
   EVERY controller's views share one theme.
   ============================================================ */

/* Light backgrounds -> dark surfaces */
.bg-white, .bg-stone-50, .bg-stone-100, .bg-gray-50, .bg-gray-100,
.bg-neutral-50, .bg-neutral-100, .bg-slate-50, .bg-slate-100,
.bg-amber-50, .bg-orange-50 {
    background-color: var(--ins-surface) !important;
    color: var(--ins-text);
}
.bg-stone-200, .bg-gray-200, .bg-neutral-200 {
    background-color: var(--ins-surface-2) !important;
    color: var(--ins-text);
}

/* Dark text -> warm light text */
.text-stone-900, .text-stone-800, .text-stone-700,
.text-gray-900, .text-gray-800, .text-gray-700,
.text-neutral-900, .text-neutral-800, .text-slate-900, .text-black {
    color: var(--ins-text) !important;
}
.text-stone-600, .text-stone-500, .text-stone-400,
.text-gray-600, .text-gray-500, .text-gray-400,
.text-neutral-600, .text-neutral-500, .text-muted {
    color: var(--ins-muted) !important;
}

/* Amber/primary accents -> gold */
.text-amber-600, .text-amber-700, .text-amber-500, .text-primary,
.text-yellow-600, .text-orange-600 {
    color: var(--ins-gold) !important;
}

/* Light borders -> gold hairlines */
.border-stone-200, .border-stone-300, .border-gray-200, .border-gray-300,
.border-neutral-200, .border-slate-200, .border-amber-300 {
    border-color: var(--ins-line) !important;
}
.divide-stone-200 > *, .divide-gray-200 > * { border-color: var(--ins-line-soft) !important; }

/* Hovers that lightened now glow gold instead */
.hover\:bg-stone-50:hover, .hover\:bg-stone-100:hover,
.hover\:bg-gray-50:hover, .hover\:bg-gray-100:hover,
.hover\:bg-amber-50:hover, .hover\:bg-amber-100:hover {
    background-color: rgba(220, 174, 48, 0.10) !important;
}
.hover\:text-stone-600:hover, .hover\:text-stone-900:hover,
.hover\:text-gray-900:hover {
    color: var(--ins-gold-bright) !important;
}

/* ---------- Forms ---------- */

input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
select, textarea, .form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--ins-line) !important;
    border-radius: 12px;
    color: var(--ins-text) !important;
    padding: 0.65rem 0.95rem;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.04em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
input::placeholder, textarea::placeholder {
    color: var(--ins-muted) !important;
    letter-spacing: 0.14em;
    font-size: 0.85em;
}
input:hover, select:hover, textarea:hover {
    border-color: rgba(220, 174, 48, 0.45) !important;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    border-color: var(--ins-gold) !important;
    box-shadow: 0 0 0 3px rgba(220, 174, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--ins-text) !important;
    outline: none;
}
label, .form-label, .col-form-label { color: var(--ins-text); }
.invalid-feedback { color: #ff8f8f; }

/* ---------- Buttons ---------- */

.button-primary, .btn-primary,
button[type="submit"].btn, .add-to-cart-btn, .buy-now-btn {
    background: linear-gradient(135deg, var(--ins-gold-bright), var(--ins-gold) 55%, var(--ins-gold-deep)) !important;
    border: none !important;
    color: var(--ins-on-gold) !important;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.button-primary:hover, .btn-primary:hover, .add-to-cart-btn:hover, .buy-now-btn:hover {
    filter: brightness(1.08);
    color: var(--ins-on-gold) !important;
}
.btn-outline-secondary, .button-secondary, .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--ins-gold) !important;
    color: var(--ins-gold) !important;
}
.btn-outline-secondary:hover, .button-secondary:hover, .btn-secondary:hover {
    background: rgba(220, 174, 48, 0.12) !important;
    color: var(--ins-gold-bright) !important;
}

/* Black tailwind BUTTONS (bg-stone-900/800) become gold CTAs.
   NOTE: `.bg-black` / `.bg-gray-900` are deliberately excluded — they are
   used with bg-opacity-* as modal overlays (e.g. #settingsModal), and turning
   them gold floods the screen and blacks out the sheet text. */
.bg-stone-900, .bg-stone-800 {
    background: linear-gradient(135deg, var(--ins-gold-bright), var(--ins-gold) 55%, var(--ins-gold-deep)) !important;
    color: var(--ins-on-gold) !important;
}
.bg-stone-900 *, .bg-stone-800 * { color: var(--ins-on-gold); }
.hover\:bg-stone-800:hover, .hover\:bg-stone-700:hover {
    filter: brightness(1.08);
}

/* Settings sheet links must always read on the dark surface */
.ins-sheet, .ins-sheet a, .ins-sheet span, .ins-sheet h2 { color: var(--ins-text); }
.ins-sheetlink:hover span { color: var(--ins-gold-bright); }

/* ---------- Cards / panels / modals ---------- */

.card, .auth-card, .product-card, .cart-card, .order-card,
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl {
    --tw-shadow-color: rgba(0, 0, 0, 0.8);
}
.card, .auth-card {
    background-color: var(--ins-surface) !important;
    border: 1px solid var(--ins-line) !important;
    color: var(--ins-text);
}
.modal-content, .dropdown-menu {
    background-color: var(--ins-surface) !important;
    color: var(--ins-text) !important;
    border: 1px solid var(--ins-line) !important;
}
.dropdown-item { color: var(--ins-text) !important; }
.dropdown-item:hover { background: rgba(220, 174, 48, 0.10) !important; color: var(--ins-gold-bright) !important; }

/* Alerts */
.alert { border: 1px solid var(--ins-line); }
.alert-success { background: rgba(30, 90, 45, 0.35) !important; color: #b9e6c3 !important; }
.alert-danger, .alert-error { background: rgba(120, 30, 30, 0.35) !important; color: #ffc2c2 !important; }
.alert-warning { background: rgba(220, 174, 48, 0.15) !important; color: var(--ins-gold-bright) !important; }
.alert-info { background: rgba(40, 70, 110, 0.35) !important; color: #bcd8f5 !important; }

/* Tables */
table { color: var(--ins-text); }
th { color: var(--ins-gold); }
td, th { border-color: var(--ins-line-soft) !important; }

/* Splash screen (classes come from main.css, re-skinned dark) */
.splash-screen { background: var(--ins-black) !important; }
.splash-text { color: var(--ins-gold) !important; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.35em; }
.splash-tagline { color: var(--ins-muted) !important; letter-spacing: 0.2em; }
.splash-logo { border-radius: 10px; }

/* Price + rating accents */
.price, .product-price, .total, .grand-total { color: var(--ins-gold) !important; }
.star, .rating, .fa-star { color: var(--ins-gold); }

/* Horizontal rules */
hr { border-color: var(--ins-line-soft); }

/* Wishlist heart active state — must out-rank the muted text-gray override */
.fav_btn.favorite,
.fav_btn.favorite svg {
    color: var(--ins-gold) !important;
}
.fav_btn.favorite {
    border-color: var(--ins-gold) !important;
    background: rgba(220, 174, 48, 0.16) !important;
}

/* The "Added to Cart" modal popup is not wanted on INSPERO — the toast in
   #alert-container already confirms the action. Keep the element in the DOM
   (details.js toggles it) but never show it. */
#cart-success { display: none !important; }