/* ============================================================
   Premium Marketplace v4 — Theme-Variable System
   Dark Mode (default) + Refined Light Mode (no white-out)
   ============================================================ */

/* Defaults; can be overridden by /theme.css from admin settings */
:root,
[data-bs-theme="dark"]{
  --pm-bg-0:#05060d;
  --pm-bg-1:#0a0d1a;
  --pm-bg-2:#10142b;
  --pm-surface: rgba(18,22,46,.72);
  --pm-surface-2: rgba(28,32,60,.55);
  --pm-border: rgba(120,140,220,.18);
  --pm-border-strong: rgba(120,140,220,.32);
  --pm-text:#e8ecf8;
  --pm-text-dim:#9aa3c4;
  --pm-muted:#6c7596;
  --pm-primary:#3b82f6;
  --pm-secondary:#a855f7;
  --pm-accent:#22d3ee;
  --pm-pink:#ec4899;
  --pm-success:#22c55e;
  --pm-danger:#ef4444;
  --pm-warning:#f59e0b;
  --pm-radius:14px;
  --pm-radius-sm:10px;
  --pm-radius-lg:22px;
  --pm-font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --pm-glow: 0 0 28px rgba(59,130,246,.45), 0 0 60px rgba(168,85,247,.25);
  --pm-glow-soft: 0 6px 24px rgba(59,130,246,.22);
  --pm-shadow-card: 0 10px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  --pm-grad: linear-gradient(135deg,var(--pm-primary) 0%, var(--pm-secondary) 55%, var(--pm-accent) 100%);
  --pm-grad-btn: linear-gradient(135deg,#3b82f6 0%, #6366f1 45%, #a855f7 100%);
  --pm-card-opacity: .72;
}

/* LIGHT MODE — soft, tinted, no harsh white */
[data-bs-theme="light"]{
  --pm-bg-0:#eef2f8;
  --pm-bg-1:#e9eef6;
  --pm-bg-2:#dfe6f1;
  --pm-surface: rgba(255,255,255,.65);
  --pm-surface-2: rgba(244,247,252,.85);
  --pm-border: rgba(80,100,160,.18);
  --pm-border-strong: rgba(80,100,160,.32);
  --pm-text:#0f1430;
  --pm-text-dim:#3b4566;
  --pm-muted:#6b7493;
  --pm-glow: 0 0 18px rgba(59,130,246,.22), 0 0 32px rgba(168,85,247,.14);
  --pm-glow-soft: 0 4px 18px rgba(59,130,246,.16);
  --pm-shadow-card: 0 6px 26px rgba(40,50,90,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --pm-card-opacity: .82;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:var(--pm-font);
  color:var(--pm-text);
  background:
    radial-gradient(1100px 600px at 12% -10%, color-mix(in oklab, var(--pm-primary) 22%, transparent), transparent 60%),
    radial-gradient(900px 520px at 88% 8%, color-mix(in oklab, var(--pm-secondary) 22%, transparent), transparent 60%),
    radial-gradient(700px 480px at 50% 110%, color-mix(in oklab, var(--pm-accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg,var(--pm-bg-0),var(--pm-bg-1) 50%, var(--pm-bg-0));
  background-attachment: fixed;
  transition: background-color .4s ease, color .4s ease;
  animation: pm-fade-in .5s ease both;
}
@keyframes pm-fade-in{from{opacity:0}to{opacity:1}}
::selection{background:color-mix(in oklab,var(--pm-primary) 45%, transparent);color:#fff}

/* Smooth theme switching */
body,.card,.app-card,.app-nav,.navbar,.btn,.form-control,.form-select,.table,.dropdown-menu,.modal-content,.alert,.badge,.list-group-item,.nav-link,.admin-side,.admin-top,.admin-main,input,textarea,select{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* Headings & links */
h1,h2,h3,h4,h5,h6{color:var(--pm-text);font-weight:700;letter-spacing:-.01em}
a{color:var(--pm-primary);text-decoration:none}
a:hover{color:var(--pm-accent)}
.text-muted,.small.text-muted{color:var(--pm-muted)!important}

/* Navbar */
.app-nav,.navbar{
  background: color-mix(in oklab, var(--pm-bg-1) 75%, transparent)!important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom:1px solid var(--pm-border);
}
.navbar .nav-link{color:var(--pm-text-dim)!important;font-weight:500}
.navbar .nav-link:hover{color:var(--pm-text)!important}
.navbar-brand{color:var(--pm-text)!important}

/* Cards / glass surfaces */
.card,.app-card{
  background: var(--pm-surface)!important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border:1px solid var(--pm-border)!important;
  border-radius: var(--pm-radius-lg);
  box-shadow: var(--pm-shadow-card);
  color:var(--pm-text);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--pm-shadow-card),var(--pm-glow-soft)}
.card-header,.card-footer{
  background: transparent!important;
  border-color: var(--pm-border)!important;
  color: var(--pm-text);
}
.card-body{color:var(--pm-text)}

/* Buttons — unified gradient + adaptive glow (overrides Bootstrap) */

/* =========================
   BASE BUTTON (SAFE)
   ========================= */

button.btn,
input[type=submit],
input[type=button],
.btn{
  border-radius: var(--pm-radius)!important;
  font-weight: 600;
  letter-spacing: .01em;
  padding: .55rem 1.15rem;
  transition: all .25s ease;
  cursor: pointer;
}

/* =========================
   PRIMARY BLUE BUTTONS
   ========================= */

.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-secondary,
.btn-dark{

  background: linear-gradient(135deg,#2563eb,#1e40af)!important;
  color:#fff!important;
  border:0!important;

  box-shadow:
    0 10px 25px rgba(37,99,235,.25),
    0 0 10px rgba(255,255,255,.12);
}

.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-dark:hover{

  transform: translateY(-2px) scale(1.03);

  box-shadow:
    0 18px 40px rgba(37,99,235,.35),
    0 0 20px rgba(37,99,235,.45),
    0 0 10px rgba(255,255,255,.25);
}

.btn-primary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.btn-secondary:active,
.btn-dark:active{
  transform: scale(.98);
}

/* =========================
   OUTLINE PRIMARY (YOUR BUTTON)
   ========================= */

.btn-outline-primary{
  background:#fff!important;
  color:#2563eb!important;
  border:2px solid #2563eb!important;

  box-shadow: 0 6px 15px rgba(37,99,235,.10);
}

.btn-outline-primary:hover{
  background:#2563eb!important;
  color:#fff!important;

  transform: translateY(-2px) scale(1.03);

  box-shadow:
    0 15px 35px rgba(37,99,235,.35),
    0 0 25px rgba(37,99,235,.45);
}

.btn-outline-primary:active{
  transform: scale(.98);
}

/* =========================
   OTHER OUTLINE BUTTONS
   ========================= */

.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light{

  background: transparent!important;
  color: var(--pm-text, #333)!important;
  border:1px solid var(--pm-border-strong, #ccc)!important;
}

.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-dark:hover,
.btn-outline-light:hover{

  background: linear-gradient(135deg,#2563eb,#1e40af)!important;
  color:#fff!important;

  transform: translateY(-2px);

  box-shadow:
    0 15px 35px rgba(37,99,235,.3),
    0 0 20px rgba(37,99,235,.4);
}

/* =========================
   LOGIN BUTTON FIX (IMPORTANT)
   ========================= */

.btn-login,
.login-btn,
button[type="submit"]{

  background: linear-gradient(135deg,#2563eb,#1e40af)!important;
  color:#fff!important;
  border:0!important;

  box-shadow: 0 10px 25px rgba(37,99,235,.25);
}

/* =========================
   SIZES
   ========================= */

.btn-sm{
  padding:.35rem .75rem;
  font-size:.85rem;
  border-radius: var(--pm-radius-sm)!important;
}

.btn-lg{
  padding:.85rem 1.6rem;
  font-size:1.05rem;
}

/* =========================
   DISABLED
   ========================= */

.btn:disabled,
.btn.disabled{
  opacity:.55;
  filter:grayscale(.3);
  box-shadow:none;
  transform:none;
}

/* Tables */
.table{color:var(--pm-text);border-color:var(--pm-border);background:transparent}
.table > :not(caption) > * > *{background:transparent!important;color:var(--pm-text);border-color:var(--pm-border)}
.table thead th{
  background: linear-gradient(180deg, color-mix(in oklab,var(--pm-primary) 18%, transparent), transparent)!important;
  color:var(--pm-text)!important;
  border-bottom:1px solid var(--pm-border-strong)!important;
  text-transform:uppercase;font-size:.78rem;letter-spacing:.06em;font-weight:700;
}
.table tbody tr:hover > *{
  background: color-mix(in oklab, var(--pm-primary) 8%, transparent)!important;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pm-accent) 30%, transparent);
}

/* Alerts / badges / dropdowns / modals */
.alert{
  background: var(--pm-surface)!important;
  color:var(--pm-text)!important;
  border:1px solid var(--pm-border)!important;
  border-radius:var(--pm-radius);
  backdrop-filter: blur(10px);
}
.alert-success{border-left:3px solid var(--pm-success)!important}
.alert-danger{border-left:3px solid var(--pm-danger)!important}
.alert-warning{border-left:3px solid var(--pm-warning)!important}
.alert-info{border-left:3px solid var(--pm-accent)!important}
.badge{border-radius:999px;padding:.4em .75em;font-weight:600}
.bg-success-subtle{background:color-mix(in oklab,var(--pm-success) 18%, transparent)!important}
.text-success-emphasis{color:var(--pm-success)!important}
.dropdown-menu{
  background: var(--pm-surface)!important;
  backdrop-filter: blur(18px);
  border:1px solid var(--pm-border)!important;
  border-radius:var(--pm-radius);
  box-shadow: var(--pm-shadow-card);
}
.dropdown-item{color:var(--pm-text)!important}
.dropdown-item:hover,.dropdown-item:focus{background:color-mix(in oklab,var(--pm-primary) 18%, transparent)!important;color:var(--pm-text)!important}
.modal-content{background:var(--pm-surface)!important;color:var(--pm-text);border:1px solid var(--pm-border);backdrop-filter:blur(20px);border-radius:var(--pm-radius-lg)}
.list-group-item{background:var(--pm-surface)!important;color:var(--pm-text)!important;border-color:var(--pm-border)!important}

/* Pagination */
.page-link{background:var(--pm-surface)!important;color:var(--pm-text)!important;border-color:var(--pm-border)!important}
.page-item.active .page-link{background:var(--pm-grad-btn)!important;border-color:transparent!important;color:#fff!important}

/* Hero */
.hero{
  background: var(--pm-surface);
  border:1px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  padding: 4rem 2rem;
  backdrop-filter: blur(20px);
  position:relative;overflow:hidden;
  
  
}

/* ========================================
   MOBILE HERO & STATS FIX
   ======================================== */

@media (max-width:768px){

  /* Hero */
  .hero{
    padding:1.5rem .8rem !important;
    min-height:auto !important;
  }

  .hero h1{
    font-size:1.8rem !important;
    line-height:1.15 !important;
    margin-bottom:10px !important;
  }

  .hero p{
    font-size:.9rem !important;
    line-height:1.4 !important;
    margin-bottom:15px !important;
  }

  /* Buttons */
  .hero .btn{
    padding:.7rem .9rem !important;
    font-size:.9rem !important;
  }

  /* Stats Row */
  .hero .row:last-child{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    margin-top:20px !important;
  }

  .hero .row:last-child > div,
  .hero .col-md-4,
  .hero .col-lg-4{
    width:33.33% !important;
    flex:0 0 33.33% !important;
    max-width:33.33% !important;
    text-align:center !important;
    margin-top:0 !important;
  }

  .hero .row:last-child h1,
  .hero .row:last-child h2,
  .hero .row:last-child h3,
  .hero .display-6{
    font-size:1.8rem !important;
    margin-bottom:5px !important;
  }

  .hero .row:last-child p,
  .hero .row:last-child small{
    font-size:.75rem !important;
    line-height:1.2 !important;
  }
}
.hero::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1px;
  background: var(--pm-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  background:var(--pm-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p{color:var(--pm-text-dim);font-size:1.1rem;max-width:680px}

/* Utility */
.glow-text{background:var(--pm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
hr{border-color:var(--pm-border)!important;opacity:1}
.border, .border-top,.border-bottom,.border-start,.border-end{border-color:var(--pm-border)!important}
.bg-light,.bg-white{background:var(--pm-surface)!important;color:var(--pm-text)!important}
.text-dark,.text-black{color:var(--pm-text)!important}

/* Fade-up util */
.fade-up{animation:pm-up .5s ease both}
@keyframes pm-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}