/* ============================================================
   TnG Marketplace - storefront styles
   Elegant marketplace UI, themeable via Bootstrap 5.3 color modes.
   Light  = :root
   Dark   = [data-bs-theme="dark"]
   ============================================================ */

:root{
    --brand:#635bff;
    --brand-2:#8b5cf6;
    --brand-ink:#ffffff;
    --brand-soft-bg:#eef0ff;
    --brand-soft-ink:#4f46e5;

    --bg:#f6f7f9;
    --surface:#ffffff;
    --surface-2:#eef0f4;
    --border:#e7e9ef;
    --text:#1a1d29;
    --text-muted:#6b7280;

    --nav-bg:rgba(255,255,255,.82);
    --shadow-sm:0 1px 2px rgba(20,20,43,.06);
    --shadow-md:0 8px 24px rgba(20,20,43,.10);
    --shadow-lg:0 16px 40px rgba(20,20,43,.14);

    --hero-from:#312e81;
    --hero-to:#1e1b4b;

    --radius:16px;
    --radius-sm:12px;
}

[data-bs-theme="dark"]{
    --brand:#8b83ff;
    --brand-2:#a78bfa;
    --brand-ink:#0b0d12;
    --brand-soft-bg:rgba(124,120,255,.14);
    --brand-soft-ink:#b4aeff;

    --bg:#0d0f14;
    --surface:#161922;
    --surface-2:#1e222c;
    --border:#272c38;
    --text:#e7e9f0;
    --text-muted:#9aa1ae;

    --nav-bg:rgba(18,20,27,.82);
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 10px 28px rgba(0,0,0,.55);
    --shadow-lg:0 18px 44px rgba(0,0,0,.6);

    --hero-from:#312e81;
    --hero-to:#0f0d2b;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
    font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    margin:0;
    -webkit-font-smoothing:antialiased;
    transition:background-color .25s ease, color .25s ease;
}
a{ text-decoration:none; color:var(--brand); }
.container{ max-width:1180px; }

/* ---- Navbar ------------------------------------------------ */
.tng-nav{
    background:var(--nav-bg);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:1030;
}
.tng-nav .brand{
    font-weight:800; font-size:1.4rem; letter-spacing:-.6px; color:var(--text);
    display:inline-flex; align-items:center; gap:8px;
}
.brand-logo{ height:34px; width:34px; border-radius:7px; object-fit:cover; flex:0 0 auto; }
/* Hide the emblem in the nav on mobile (keeps just the wordmark) */
@media (max-width:576px){ .tng-nav .brand-logo{ display:none; } }
.tng-nav .brand .brand-accent{
    background:linear-gradient(120deg,var(--brand),var(--brand-2));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.tng-nav .form-control{
    background:var(--surface-2); border-color:transparent; border-radius:999px 0 0 999px;
}
.tng-nav .form-control:focus{ background:var(--surface); box-shadow:none; border-color:var(--brand); }
.tng-nav .input-group .btn-brand{ border-radius:0 999px 999px 0; }

.nav-ico{
    color:var(--text); display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; transition:background-color .15s, color .15s;
}
.nav-ico:hover{ background:var(--surface-2); color:var(--brand); }

.tng-cart-badge{
    position:absolute; top:-2px; right:-2px; background:linear-gradient(120deg,var(--brand),var(--brand-2));
    color:#fff; font-size:.62rem; font-weight:700; border-radius:999px; padding:1px 6px; line-height:1.3;
    box-shadow:0 2px 6px rgba(99,91,255,.5);
}

/* Theme toggle */
.theme-toggle{
    border:1px solid var(--border); background:var(--surface); color:var(--text);
    width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; transition:transform .2s, background-color .15s, color .15s, border-color .15s;
}
.theme-toggle:hover{ color:var(--brand); border-color:var(--brand); transform:rotate(-15deg); }
.theme-toggle .bi-sun-fill{ display:none; }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill{ display:inline; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill{ display:none; }

/* User dropdown link */
.user-link{ color:var(--text); }
.user-link:hover{ color:var(--brand); }

/* ---- Hero -------------------------------------------------- */
.tng-hero{
    background:
        radial-gradient(120% 140% at 85% 10%, rgba(139,92,246,.45), transparent 55%),
        linear-gradient(120deg,var(--hero-from),var(--hero-to));
    color:#fff; border-radius:22px; padding:52px 44px; margin:24px 0; position:relative; overflow:hidden;
    box-shadow:var(--shadow-lg);
}
.tng-hero::after{
    content:""; position:absolute; inset:0;
    background:radial-gradient(60% 80% at 15% 120%, rgba(255,255,255,.10), transparent 60%);
    pointer-events:none;
}
.tng-hero h1{ font-weight:800; font-size:2.15rem; margin:0 0 10px; letter-spacing:-.5px; max-width:640px; }
.tng-hero p{ color:#d7d9f2; margin:0; max-width:560px; font-size:1.02rem; }
.tng-hero .hero-ico{ position:absolute; right:30px; bottom:-16px; font-size:9rem; opacity:.14; transform:rotate(-8deg); }
.tng-hero .btn-hero{
    margin-top:18px; background:#fff; color:#312e81; font-weight:700; border:0; border-radius:999px; padding:.6rem 1.4rem;
}
.tng-hero .btn-hero:hover{ background:#f0f0ff; }

/* ---- Section title ---------------------------------------- */
.section-title{
    font-weight:800; font-size:1.3rem; margin:32px 0 16px; display:flex; align-items:center; gap:10px;
    letter-spacing:-.3px; color:var(--text);
}
.section-title .bi{ color:var(--brand); }
.section-title .see-all{ margin-left:auto; font-size:.82rem; font-weight:600; }

/* ---- Merchant card ---------------------------------------- */
.merchant-card{
    background:var(--surface); border-radius:var(--radius); overflow:hidden; height:100%;
    border:1px solid var(--border); transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
    display:block; color:inherit; box-shadow:var(--shadow-sm);
}
.merchant-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.merchant-card .banner{ height:100px; background:linear-gradient(120deg,var(--brand),var(--brand-2)); background-size:cover; background-position:center; }
.merchant-card .body{ padding:0 16px 16px; position:relative; }
.merchant-card .logo{
    width:58px; height:58px; border-radius:14px; overflow:hidden; background:var(--surface);
    border:3px solid var(--surface); box-shadow:var(--shadow-sm); margin-top:-30px; margin-bottom:10px;
    display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--brand); font-size:1.4rem;
}
.merchant-card h5{ font-weight:700; margin:0 0 4px; font-size:1.06rem; color:var(--text); }
.merchant-card .desc{ color:var(--text-muted); font-size:.82rem; min-height:34px; line-height:1.4; }
.merchant-card .visit{ margin-top:8px; font-size:.78rem; font-weight:700; color:var(--brand); }

/* ---- Product card ----------------------------------------- */
.product-card{
    background:var(--surface); border-radius:var(--radius); overflow:hidden; height:100%;
    border:1px solid var(--border); transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
    display:block; color:inherit; box-shadow:var(--shadow-sm);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent; }
.product-card .thumb{
    aspect-ratio:1/1; background:var(--surface-2) center/cover no-repeat; display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:2.4rem; overflow:hidden; transition:transform .35s ease;
}
.product-card:hover .thumb{ transform:scale(1.05); }
.product-card .body{ padding:12px 14px 14px; }
.product-card .name{
    font-weight:600; font-size:.92rem; color:var(--text); display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; line-height:1.25;
}
.product-card .price{ color:var(--text); font-weight:800; margin-top:6px; font-size:1rem; }
.product-card .merchant{ color:var(--text-muted); font-size:.75rem; }

.badge-soft{ background:var(--brand-soft-bg); color:var(--brand-soft-ink); font-weight:600; }

/* CSS placeholder tile (product with no image) */
.thumb.pph, .pph-tile{ flex-direction:column; color:#fff; padding:14px; text-align:center; overflow:hidden; }
.pph-name{ font-weight:700; font-size:.92rem; line-height:1.22; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,.18); }
.pph-shop{ margin-top:10px; font-size:.6rem; text-transform:uppercase; letter-spacing:.09em; font-weight:600; opacity:.9; }
.pph-tile{ display:flex; align-items:center; justify-content:center; }
.pph-lg .pph-name{ font-size:1.5rem; -webkit-line-clamp:5; }
.pph-lg .pph-shop{ font-size:.72rem; margin-top:14px; }

/* ---- Store header ----------------------------------------- */
.store-header{ position:relative; background:var(--surface); border-radius:20px; overflow:hidden; border:1px solid var(--border); margin:22px 0; box-shadow:var(--shadow-sm); }
.store-header .banner{ height:170px; background:linear-gradient(120deg,var(--hero-from),var(--hero-to)) center/cover; }
/* name/description sit fully BELOW the banner; the logo overlaps it as an avatar */
.store-header .body{ padding:14px 24px 20px 136px; min-height:56px; }
.store-header .logo{
    position:absolute; left:24px; top:120px; z-index:2;
    width:92px; height:92px;
    border-radius:18px; border:4px solid var(--surface); background:var(--surface);
    box-shadow:var(--shadow-md); overflow:hidden; display:flex; align-items:center; justify-content:center;
    font-weight:800; color:var(--brand); font-size:2.1rem;
}
@media (max-width:420px){
    .store-header .body{ padding-left:116px; }
    .store-header .logo{ width:80px; height:80px; top:126px; }
}

/* ---- Buttons ---------------------------------------------- */
.btn-brand{
    background:linear-gradient(120deg,var(--brand),var(--brand-2)); border:0; color:var(--brand-ink); font-weight:600;
    box-shadow:0 4px 14px rgba(99,91,255,.28);
}
.btn-brand:hover{ filter:brightness(1.05); color:var(--brand-ink); box-shadow:0 6px 18px rgba(99,91,255,.36); }
.btn-brand:focus{ color:var(--brand-ink); box-shadow:0 0 0 .2rem rgba(99,91,255,.35); }

/* ---- Panels ----------------------------------------------- */
.tng-panel{ background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:22px; box-shadow:var(--shadow-sm); }

/* ---- Timeline --------------------------------------------- */
.timeline{ list-style:none; padding:0; margin:0; }
.timeline li{ position:relative; padding:0 0 20px 26px; border-left:2px solid var(--border); }
.timeline li:last-child{ border-left-color:transparent; }
.timeline li .dot{ position:absolute; left:-8px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--surface-2); border:2px solid var(--surface); }
.timeline li.done .dot{ background:var(--brand); box-shadow:0 0 0 3px var(--brand-soft-bg); }
.timeline li .t{ font-weight:600; color:var(--text); }
.timeline li .d{ color:var(--text-muted); font-size:.8rem; }

/* ---- Footer ----------------------------------------------- */
footer.tng-footer{
    background:var(--surface); color:var(--text-muted); margin-top:48px; padding:30px 0;
    font-size:.85rem; border-top:1px solid var(--border);
}
footer.tng-footer a{ color:var(--text-muted); }
footer.tng-footer a:hover{ color:var(--brand); }

/* ---- Legal / policy pages --------------------------------- */
.legal{ max-width:820px; margin:0 auto; }
.legal .legal-head{ margin:26px 0 6px; }
.legal .legal-head h1{ font-weight:800; letter-spacing:-.4px; margin:0; }
.legal .updated{ color:var(--text-muted); font-size:.85rem; }
.legal h2{ font-size:1.15rem; font-weight:700; margin:26px 0 10px; color:var(--text); }
.legal p, .legal li{ color:var(--text); line-height:1.7; }
.legal .text-muted, .legal small{ color:var(--text-muted) !important; }
.legal ul{ padding-left:1.1rem; }
.legal li{ margin-bottom:6px; }
.legal .lead{ color:var(--text-muted); font-size:1rem; }
.policy-nav a{ font-size:.85rem; }

/* ---- Pagination (brand-tinted, theme-aware) --------------- */
.pagination{
    --bs-pagination-color:var(--text);
    --bs-pagination-bg:var(--surface);
    --bs-pagination-border-color:var(--border);
    --bs-pagination-hover-color:var(--brand);
    --bs-pagination-hover-bg:var(--surface-2);
    --bs-pagination-hover-border-color:var(--border);
    --bs-pagination-focus-color:var(--brand);
    --bs-pagination-active-bg:var(--brand);
    --bs-pagination-active-border-color:var(--brand);
    --bs-pagination-disabled-bg:var(--surface);
    --bs-pagination-disabled-border-color:var(--border);
    gap:4px;
}
.pagination .page-link{ border-radius:8px; }

/* ---- Misc small polish ------------------------------------ */
.tng-panel .table{ --bs-table-bg:transparent; }
.form-control, .form-select{ border-radius:10px; }
.btn{ border-radius:10px; }