/*
  ============================================================
  GLOBAL STYLESHEET: global.css
  Stick With Sam — by Sinister Sam
  ============================================================
  Link this in components/header.php so every page gets it:
    <link rel="stylesheet" href="<?= BASE ?>global.css"/>

  Page-specific CSS files (shop.css, cart.css etc.) are linked
  AFTER this file, so they can override anything here if needed.

  CONTENTS:
  1.  CSS Variables       — colour tokens, glass, shadows
  2.  Reset & Base        — box-sizing, body, font
  3.  Background          — full-page gradient image + overlay
  4.  Navigation          — fixed nav bar, logo, links, icon btns
  5.  Buttons             — primary, ghost, nav CTA
  6.  Glass Panels        — reusable card/panel style
  7.  Section Helpers     — eyebrow labels, section titles
  8.  Filter Tabs         — shared pill tab row
  9.  Search Bar          — shared search input
  10. Toast Notifications — bottom-of-screen feedback pills
  11. Scroll Reveal       — fade-in on scroll animation
  12. Footer              — shared footer across all pages
  13. Responsive          — shared breakpoints
  ============================================================
*/


/* ============================================================
   1. CSS VARIABLES
   Single source of truth for all colours, spacing and effects.
   Change a value here and it updates across every page.
   ============================================================ */
:root {

    /* ── Brand colours ── */
    --purple-deep:    #1a0a2e;   /* darkest bg — body fallback colour  */
    --purple-mid:     #5a1a8a;   /* mid purple for gradients           */
    --purple-bright:  #9b3fd4;   /* primary accent, buttons, links     */
    --purple-light:   #c49ef5;   /* hover states, italic headings      */
    --pink:           #d45fba;   /* secondary accent                   */
    --pink-light:     #e890d4;   /* lighter pink for btn gradients     */
    --gold:           #F5C842;   /* prices, stars, active tabs         */
    --gold-dim:       rgba(245, 200, 66, 0.18); /* gold tint bg        */

    /* ── Status colours (used on admin + commission pages) ── */
    --green:          #5ab88a;   /* success / done / approved          */
    --green-dim:      rgba(90, 184, 138, 0.15);
    --red:            #e05a7a;   /* error / declined / remove          */
    --red-dim:        rgba(224, 90, 122, 0.12);

    /* ── Glassmorphism layers ──
       Three levels of glass — use the right one for the context:
       --glass        very subtle, almost invisible
       --glass-mid    card backgrounds, panels
       --glass-strong nav, modals, prominent surfaces             */
    --glass:          rgba(255, 255, 255, 0.06);
    --glass-mid:      rgba(255, 255, 255, 0.12);
    --glass-strong:   rgba(255, 255, 255, 0.20);

    /* ── Borders ── */
    --border:         rgba(255, 255, 255, 0.15); /* default            */
    --border-bright:  rgba(255, 255, 255, 0.28); /* highlighted/hover  */

    /* ── Typography ── */
    --text:           #f0e8ff;               /* primary — light purple  */
    --text-soft:      #c8b8e8;               /* secondary / subtitles   */
    --muted:          rgba(200, 180, 230, 0.6); /* meta, placeholders   */

    /* ── Shadows & glows ── */
    --shadow:         0 8px 40px rgba(0, 0, 0, 0.35);
    --shadow-hover:   0 18px 50px rgba(0, 0, 0, 0.45);
    --glow:           0 0 40px rgba(155, 63, 212, 0.28);
    --glow-strong:    0 0 60px rgba(155, 63, 212, 0.40);
}


/* ============================================================
   2. RESET & BASE
   Zero out browser defaults. Set box-sizing and base font.
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    color: var(--text);
    overflow-x: hidden;
    background: var(--purple-deep); /* fallback while bg image loads  */
}

.about-text p strong {
    font-weight: 700 !important;
    color: var(--purple-light) !important;
}

img {
    display: block;
    max-width: 100%;
}

ul, ol { list-style: none; }

button { font-family: inherit; cursor: pointer; }

a, button { transition: color 0.2s, background 0.2s, opacity 0.2s; }


/* ============================================================
   3. BACKGROUND
   The purple gradient image is fixed behind all content.
   A dark overlay on top keeps text readable.
   Works with .bg-wrap output by components/header.php
   ============================================================ */
.bg-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.bg-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.78;
}

/* Dark overlay on top of the background image */
.bg-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
            160deg,
            rgba(26, 10, 46, 0.60) 0%,
            rgba(60, 10, 90,  0.38) 40%,
            rgba(26, 10, 46, 0.72) 100%
    );
}

/* Every page section needs z-index: 1 to sit above the fixed bg */
.page-content, section, .hero, .page, .gallery-wrap,
.shop-controls, .shop-grid, .commissions-wrap, .cta-wrap,
.cta-banner, .tracker-wrap, .featured-wrap, .controls,
.table-panel, .stats-row, .page-header {
    position: relative;
    z-index: 1;
}


/* ============================================================
   4. NAVIGATION
   Fixed at the top of every page.
   Rendered by components/navbar.php.
   .scrolled added by JS when user scrolls past 60px.
   ============================================================ */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;            /* above everything including modals   */
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.65rem 2.5rem;
    background: rgba(20, 5, 38, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px); /* Safari support           */
    border-bottom: 1px solid var(--border);
    transition: background 0.3s ease;
}

nav.scrolled {
    background: rgba(20, 5, 38, 0.78);
}

/* Signature logo */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
}

.nav-logo img {
    height: 55px;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s;
}

.nav-logo:hover img { opacity: 0.75; }

/* Text links */
.nav-link {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-link:hover { color: var(--text); }

/* Active page — gold underline */
.nav-link.active {
    color: var(--text);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 2px;
}

/* Icon button group */
.nav-icons {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Round glass icon button */
.nav-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--glass-strong);
    border: 1px solid var(--border-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: background 0.2s, transform 0.15s;
    color: var(--text);
}

.nav-icon-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

/* PNG icons — inverted to white */
.nav-icon-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}

/* Cart / wishlist badge counter */
.nav-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--gold);
    color: var(--purple-deep);
    font-size: 0.58rem;
    font-weight: 800;
    border-radius: 99px;
    padding: 1px 5px;
    min-width: 15px;
    text-align: center;
    display: none; /* JS sets display:block when count > 0           */
}

/* Admin nav badge */
.admin-badge {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    border-radius: 99px;
    padding: 3px 10px;
}


/* ============================================================
   5. BUTTONS
   Reusable across all pages.
   ============================================================ */

/* Primary — purple-to-pink gradient */
.btn-primary {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 28px rgba(155, 63, 212, 0.4);
    transition: opacity 0.2s, transform 0.18s;
}

.btn-primary:hover {
    opacity: 0.88;
    transform: translateY(-2px);
}

/* Ghost — glass pill */
.btn-ghost {
    display: inline-block;
    padding: 0.85rem 2rem;
    border-radius: 99px;
    background: var(--glass-strong);
    backdrop-filter: blur(12px);
    border: 1.5px solid var(--border-bright);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.18s;
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Nav CTA pill */
.btn-nav-cta {
    display: inline-block;
    padding: 0.48rem 1.1rem;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--purple-bright), var(--pink));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(155, 63, 212, 0.4);
    transition: opacity 0.2s, transform 0.15s;
}

.btn-nav-cta:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}


/* ============================================================
   6. GLASS PANELS
   Apply .glass-panel to any container needing the frosted look.
   Add .glass-panel-hover for clickable panels with lift effect.
   ============================================================ */
.glass-panel {
    background: var(--glass-mid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.glass-panel-hover {
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.glass-panel-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover), var(--glow);
    border-color: rgba(155, 63, 212, 0.45);
}

/* Standard panel with padding — used on cart, wishlist, commissions */
.panel {
    background: var(--glass-mid);
    backdrop-filter: blur(22px);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow);
}

/* Panel header row */
.panel-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.panel-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--text);
}

/* Gold item count badge */
.count-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--gold);
    color: var(--purple-deep);
    border-radius: 99px;
    padding: 2px 10px;
}


/* ============================================================
   7. SECTION HELPERS
   Shared heading patterns — landing, gallery, commissions.
   ============================================================ */

.section-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-eyebrow::before {
    content: '';
    width: 28px;
    height: 1.5px;
    background: var(--gold);
    display: block;
    flex-shrink: 0;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 1rem;
}

.section-title em {
    font-style: italic;
    color: var(--purple-light);
}

.section-sub {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.75;
    max-width: 500px;
    font-weight: 300;
}

.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.25rem 0;
}


/* ============================================================
   8. FILTER TABS
   Pill tab row — shop, gallery, admin pages.
   ============================================================ */
.filter-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tab {
    font-size: 0.77rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 99px;
    border: 1.5px solid var(--border);
    background: var(--glass-mid);
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    user-select: none;
}

.tab:hover {
    background: var(--glass-strong);
    color: var(--text);
    border-color: var(--border-bright);
}

.tab.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--purple-deep);
    font-weight: 600;
}


/* ============================================================
   9. SEARCH BAR
   Pill search input — shop and gallery pages.
   ============================================================ */
.search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass-strong);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 0.55rem 1.1rem;
    min-width: 220px;
}

.search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    color: var(--text);
    width: 100%;
}

.search-wrap input::placeholder { color: var(--muted); }


/* ============================================================
   10. TOAST NOTIFICATIONS
   JS creates/removes these via each page's toast() function.
   ============================================================ */
.toast-wrap {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    pointer-events: none;
}

.toast {
    background: rgba(20, 5, 38, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-bright);
    border-radius: 99px;
    padding: 0.6rem 1.25rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    box-shadow: var(--shadow), var(--glow);
    animation: toastIn 0.3s ease, toastOut 0.3s ease 2s both;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}


/* ============================================================
   11. SCROLL REVEAL
   JS adds .visible via IntersectionObserver in footer.php.
   Apply .reveal to any element you want to animate in on scroll.
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Card stagger animation — used by JS-rendered grids */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   12. FOOTER
   Rendered by components/footer.php on every page.
   ============================================================ */
footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--border);
    background: rgba(10, 2, 22, 0.70);
    backdrop-filter: blur(22px);
    padding: 3rem 2.5rem 2rem;
    margin-top: 4rem;
}

.footer-inner {
    max-width: 1160px;
    margin: 0 auto 2.5rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2rem;
}

.footer-logo img {
    height: 36px;
    filter: brightness(0) invert(1);
    margin-bottom: 0.85rem;
}

.footer-brand p {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.65;
    max-width: 220px;
    margin-top: 0.5rem;
}

.footer-socials {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.social-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--glass-mid);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s, border-color 0.2s;
}

.social-btn:hover {
    background: rgba(155, 63, 212, 0.3);
    border-color: rgba(155, 63, 212, 0.5);
}

.footer-col h4 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
}

.footer-col a {
    display: block;
    font-size: 0.8rem;
    color: var(--muted);
    text-decoration: none;
    margin-bottom: 0.55rem;
    transition: color 0.2s;
}

.footer-col a:hover { color: var(--text); }

.footer-bottom {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.5rem;
}

.footer-bottom p {
    font-size: 0.72rem;
    color: var(--muted);
}

.footer-sam {
    height: 40px;
    opacity: 0.35;
    filter: brightness(0) invert(1);
}

.kofi-btn img {
    height: 42px;
    width: auto;
    border-radius: 8px;
    transition: opacity 0.2s, transform 0.15s;
}

.kofi-btn:hover img {
    opacity: 0.85;
    transform: translateY(-2px);
}


/* ============================================================
   13. RESPONSIVE — SHARED BREAKPOINTS
   Page-specific breakpoints go in each page's own CSS file.
   ============================================================ */

@media (max-width: 900px) {
    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    nav {
        padding: 0.85rem 1.25rem;
        gap: 0.75rem;
    }

    .nav-link    { display: none; }
    .btn-nav-cta { display: none; }

    .footer-inner { grid-template-columns: 1fr; }

    footer { padding: 2rem 1.25rem 1.5rem; }
}


.nav-greeting {
    color: var(--text-soft);
    font-size: 0.85rem;
    font-weight: 600;
    margin-right: 0.4rem;
    white-space: nowrap;
}
.nav-logout {
    cursor: pointer;
}