/* ===========================
   SilentGamerz — Modern UI
   Drop-in for /store/assets/styles.css
   =========================== */

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --bg: #0b0f1a;
  --bg-2:#0f1422;
  --surface:#121a2a;
  --surface-2:#17233b;
  --text:#e8edf6;
  --muted:#9fb0cf;
  --primary:#7aa2ff;
  --primary-2:#99b6ff;
  --accent:#2ee6b6;
  --danger:#ff6b7a;
  --border: rgba(255,255,255,.08);
  --glow: 0 10px 25px rgba(0,0,0,.28), inset 0 0 0 1px var(--border);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --maxw: 1080px;
  --gap: 16px;
  --gap-lg: 22px;
  --shadow-lg: 0 24px 60px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f7fb; --bg-2:#eef2fb;
    --surface:#ffffff; --surface-2:#f5f7fb;
    --text:#111827; --muted:#5b6b82;
    --primary:#4169e1; --primary-2:#5d84ff; --accent:#16c79a;
    --border: rgba(10,20,40,.1);
  }
}

html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 0% -20%, #1b2242 0%, transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, #152144 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font: 15.5px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout */
.container{
  width:100%;
  max-width: var(--maxw);
  margin: 32px auto 72px;
  padding: 0 var(--gap);
}

/* Top Nav */
.nav{
  position: sticky; top:0; z-index: 20;
  background: rgba(11,15,26,.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
@media (prefers-color-scheme: light){ .nav{ background: rgba(245,247,251,.7); } }
.nav-inner{
  display:flex; align-items:center; gap:12px;
  max-width: var(--maxw); margin:0 auto; padding:12px var(--gap);
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px;
}

/* the logo itself */
.brand .logo{
  width:28px; height:28px;           /* change to 32px if you want a bit bigger */
  border-radius:50%;                 /* circle; or 10px for rounded square */
  background:url('/store/assets/sg.png') center/cover no-repeat;
  box-shadow:none;                   /* remove old glow */
}

.nav-links{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.nav-links a{
  color:var(--muted); text-decoration:none;
  padding:8px 12px; border-radius:12px; transition: all .2s ease;
}
.nav-links a:hover{ color:var(--text); background: rgba(255,255,255,.06); transform: translateY(-1px); }

/* Grid */
.grid{ display:grid; gap: var(--gap); }
@media(min-width:740px){ .grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(min-width:1040px){ .grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--glow);
  padding: 18px;
}
.card h1,.card h2,.card h3{ margin:0 0 8px; line-height:1.25; }
.muted{ color:var(--muted); }
.sep{ height:1px; background: var(--border); margin:14px 0; }

/* Product card extras */
.product{ display:flex; flex-direction:column; gap:10px; }
.price{ font-weight:800; font-size:1.12rem; letter-spacing:.2px; }
.actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* Buttons */
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:700; letter-spacing:.2px;
  color:var(--text); background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border); transition: transform .07s ease, filter .2s ease, background .2s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  color:#0b0f1a;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(122,162,255,.35);
}
.btn.ghost{
  background: transparent; border:1px dashed var(--border); color: var(--muted);
}
.btn.danger{
  background: linear-gradient(180deg, rgba(255,107,122,.18), rgba(255,107,122,.1));
  color:#ffd7db; border-color: rgba(255,107,122,.35);
}

/* Forms */
form{ display:block; }
.input, select, textarea{
  width:100%; padding:12px 12px; border-radius:12px; outline:none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)), #0f1527;
  color:var(--text); border:1px solid var(--border); transition: box-shadow .2s ease, border-color .2s ease;
}
.input:focus, select:focus, textarea:focus{
  border-color: rgba(122,162,255,.6);
  box-shadow: 0 0 0 4px rgba(122,162,255,.15);
}
.input::placeholder{ color:#7d8db0; }
textarea{ min-height:120px; resize: vertical; }
label{ display:block; font-weight:700; margin: 8px 0 6px; }
.form-row{ display:grid; gap: var(--gap); }
@media(min-width:720px){ .form-row-2{ grid-template-columns:1fr 1fr; } }

/* Tables (admin) */
.table{
  width:100%; border-collapse: collapse; overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--surface);
  border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--glow);
}
.table th, .table td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); }
.table th{ color:var(--muted); font-weight:800; font-size:.94rem; letter-spacing:.2px; }
.table tr:hover td{ background: rgba(255,255,255,.04); }

/* Alerts & badges */
.alert{
  padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--surface);
  color: var(--text); margin: 10px 0 16px;
}
.alert.error{ background: linear-gradient(180deg, rgba(255,107,122,.08), rgba(255,107,122,.05)); border-color: rgba(255,107,122,.3); color:#ffdbe0; }
.alert.info { background: linear-gradient(180deg, rgba(122,162,255,.08), rgba(122,162,255,.05)); border-color: rgba(122,162,255,.3); }

.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.82rem; font-weight:700; }
.badge.ok{ background: rgba(46,230,182,.16); color:#b5ffe9; }
.badge.warn{ background: rgba(255,201,92,.16); color:#ffeec0; }
.badge.danger{ background: rgba(255,107,122,.16); color:#ffd2d7; }

/* Footer */
.footer{ margin: 46px 0 0; color:var(--muted); text-align:center; font-size:.92rem; opacity:.9; }

/* Utilities */
.center{ text-align:center; }
.mt-1{ margin-top:8px } .mt-2{ margin-top:14px } .mt-3{ margin-top:20px } .mt-4{ margin-top:28px }
.mb-1{ margin-bottom:8px } .mb-2{ margin-bottom:14px } .mb-3{ margin-bottom:20px } .mb-4{ margin-bottom:28px }
.w-100{ width:100% } .hidden{ display:none }

/* Subtle page entrance */
@media (prefers-reduced-motion: no-preference) {
  .card, .table, .nav { animation: fadeUp .35s ease both; }
  @keyframes fadeUp { from{opacity:0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }
}

/* Mobile tweaks */
@media(max-width:480px){
  .nav-inner{ padding:10px var(--gap); }
  .nav-links a{ padding:6px 10px; }
  .container{ margin: 22px auto 56px; }
}


/* ==== FIX: 4-per-row grid + compact thumbnails (defensive) ==== */

/* 4 columns desktop, then 3/2/1 */
.grid.grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap: 1rem; align-items:start; }
@media (max-width:1200px){ .grid.grid-4{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:900px) { .grid.grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .grid.grid-4{ grid-template-columns:1fr; } }

/* Keep cards from stretching weirdly */
.grid.grid-4 .card.product{ width:100%; padding:0.9rem; border-radius:12px; }

/* If you have a .thumb wrapper, fix its height */
.card.product .thumb{ width:100%; height:160px; border-radius:10px; overflow:hidden; margin-bottom:.5rem; }
.card.product .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* If you DON'T have .thumb, cap any product img inside the card */
.card.product > img{ width:100%; height:160px; object-fit:cover; border-radius:10px; display:block; margin-bottom:.5rem; }

/* Compact text */
.card.product h3{ font-size:1rem; margin:.35rem 0 .25rem; }
.card.product .muted{ font-size:.85rem; }
.card.product .price{ font-size:.95rem; font-weight:700; color:#60a5fa; }

/* Compact form */
.card.product form{ margin-top:.55rem; display:flex; gap:.45rem; align-items:center; }
.card.product form .input{ max-width:72px; padding:.35rem .45rem; font-size:.85rem; }
.card.product form .btn{ padding:.42rem .7rem; font-size:.85rem; }




/* ===== Modern product card polish (no markup changes) ===== */

/* Card: glassy surface, gradient ring, subtle lift */
.card.product{
  position: relative;
  border-radius: 14px;
  padding: 14px 14px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 12px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.card.product::before{
  /* thin gradient border ring */
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(122,162,255,.35), rgba(46,230,182,.25));
  -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:.18; transition:opacity .2s ease;
}
.card.product:hover{
  transform: translateY(-6px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
.card.product:hover::before{ opacity:.35; }

/* Thumb: soft inset rail + slight zoom on hover */
.card.product .thumb{
  height: 150px; /* keep compact; change to 140 if you want even smaller */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  background: radial-gradient(80% 100% at 10% 10%, rgba(122,162,255,.18), transparent),
              radial-gradient(80% 100% at 90% 90%, rgba(46,230,182,.12), transparent),
              #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 8px 0 rgba(0,0,0,.25);
}
.card.product .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.card.product:hover .thumb img{ transform: scale(1.06); filter: saturate(1.06); }

/* Title & description */
.card.product h3{
  font-size: 1.02rem; font-weight: 800; letter-spacing:.2px;
  margin: 2px 0 6px;
}
.card.product .muted{
  color: var(--muted);
  font-size: .88rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}

/* Meta row: duration badge + price */
.card.product .meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 8px;
}
.badge.brand{
  background: linear-gradient(135deg, rgba(122,162,255,.25), rgba(46,230,182,.22));
  color:#cfe0ff; border:1px solid rgba(255,255,255,.08);
  padding: .25rem .55rem; border-radius: 999px; font-weight:800; font-size:.75rem;
}
.card.product .price{
  font-weight: 900; color:#9ec1ff; letter-spacing:.2px; font-size: .98rem;
}

/* Actions: compact, pill buttons, styled qty */
.card.product form{
  margin-top: 12px; display:flex; gap:10px; align-items:center;
}
.card.product form .input{
  max-width: 74px; text-align:center; padding:.42rem .5rem;
  border-radius: 12px; background:#0e1426;
  border:1px solid rgba(255,255,255,.12); color:#eaf1ff; font-weight:700;
}
.card.product form .input:focus{
  border-color: rgba(122,162,255,.55);
  box-shadow: 0 0 0 4px rgba(122,162,255,.18);
}
.card.product form .btn{
  border-radius: 999px;
  padding:.55rem .9rem; font-weight:800; letter-spacing:.2px;
  background: linear-gradient(135deg, var(--primary), #6aa2ff);
  box-shadow: 0 14px 34px rgba(122,162,255,.28);
}
.card.product form .btn:hover{
  filter: brightness(1.05);
  transform: translateY(-2px);
}

/* Subtle grid rhythm & breathing space */
.grid.grid-4{ gap: 1.25rem; }

/* Filter chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .66rem; border-radius:999px; font-weight:700;
  background:rgba(255,255,255,.05); color:#cfe0ff; text-decoration:none;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}
.chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,.08); }
.chip.active{ background:linear-gradient(135deg, rgba(122,162,255,.25), rgba(46,230,182,.25)); border-color:rgba(255,255,255,.18); color:#fff; }

/* 4-per-row grid (desktop) with responsive fallbacks */
.grid.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; align-items:start; }
@media (max-width:1200px){ .grid.grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) { .grid.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .grid.grid-4{ grid-template-columns:1fr; } }

/* Fixed-size thumbnails so images never stretch cards */
.card.product .thumb{ width:100%; height:160px; border-radius:10px; overflow:hidden; margin-bottom:.5rem; }
.card.product .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }



.sidebar a {
  transition: background .2s, color .2s;
}
.sidebar a:hover {
  background: rgba(255,255,255,.08);
}
.sidebar a.active {
  background: linear-gradient(135deg, #7aa2ff44, #2ee6b644);
  font-weight: 600;
  color: #fff;
}


/* === Wide layout to match index.php === */
.container { 
  max-width: 1920px;    /* match your homepage width */
  margin: 0 auto;
  padding: 1rem 1.25rem;
}
.nav .nav-inner {
  max-width: 1920px;    /* center the top nav to the same width */
  margin: 0 auto;
}

/* Tables span full width nicely */
.table {
  width: 100%;
  border-collapse: collapse;
}


/* Sidebar Titles */
.sidebar h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .6rem;
  color: #ffffff;
  letter-spacing: 0.3px;
}

/* Sidebar Links */
.sidebar a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  padding: .6rem .8rem;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 500;
  color: #d1d5db; /* lighter gray text */
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all .2s ease;
}

/* Hover effect */
.sidebar a:hover {
  background: rgba(124, 179, 255, 0.08);
  color: #ffffff;
  border-color: rgba(124, 179, 255, 0.25);
}

/* Active link */
.sidebar a.active {
  background: linear-gradient(135deg, #4f7cff, #2ee6b6);
  border-color: transparent;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79,124,255,0.25);
}

/* Count badge */
.sidebar a span.muted-small {
  background: rgba(255, 255, 255, 0.1);
  color: #a5b4fc;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 8px;
  line-height: 1.2;
  margin-left: .5rem;
  transition: background .2s;
}

/* Hover badge glow */
.sidebar a:hover span.muted-small {
  background: rgba(124, 179, 255, 0.2);
  color: #fff;
}


/* --- Product cards: modern polish & hover glow --- */

/* make sure card can render the highlight overlay */
.card.product { 
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  box-shadow: 0 2px 14px rgba(0,0,0,.25);
}

.card.product:hover {
  transform: translateY(-6px);
  border-color: rgba(124,179,255,0.35);
  box-shadow: 0 12px 30px rgba(79,124,255,.18), 0 6px 16px rgba(46,230,182,.12), 0 2px 14px rgba(0,0,0,.32);
}

/* subtle top glow */
.card.product::before {
  content:"";
  position:absolute; inset:0; border-radius: inherit; pointer-events:none;
  background: radial-gradient(1200px 200px at 50% -20%, rgba(124,179,255,.08), transparent 60%);
  opacity:.7;
}

/* thumbnail polish + gentle zoom on hover */
.product .thumb{
  position: relative;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#142032,#0b1324);
}
.product .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.card.product:hover .thumb img{ transform: scale(1.05); }

/* titles & text */
.card.product h3{ font-size:1.06rem; letter-spacing:.2px; }
.card.product .muted{ color:#9fb3d8; }

/* badges unified */
.badge{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .80rem;
}
.badge.brand{
  background: rgba(46,230,182,.15);
  border-color: rgba(46,230,182,.30);
  color: #c7fff0;
}

/* buttons: lift & glow */
.btn{
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(124,179,255,.25);
}
.btn:active{ transform: translateY(0); }

/* inputs inside cards */
.product .input{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: #e5ecff;
}

/* consistent spacing for the price/duration row */
.product .meta{ margin-top: .45rem; }

/* accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .card.product,
  .btn,
  .product .thumb img{ transition: none !important; }
  .card.product:hover{ transform:none; }
}


/* === Equal-height product cards === */

/* grid already defines columns, so we enforce same height */
.grid {
  align-items: stretch; /* ensures all grid items stretch equally */
}

/* product cards fill the height */
.card.product {
  display: flex;
  flex-direction: column;
}

/* main content grows, footer actions stick to bottom */
.card.product .actions {
  margin-top: auto; /* push add-to-cart row down */
}

/* ==== SG: lock the navbar logo size & crop the glow ==== */
.nav .brand{
  display:flex; align-items:center; gap:10px;
  color:var(--text); text-decoration:none; font-weight:800; letter-spacing:.3px;
}

.nav .brand .logo{
  width:28px;                 /* change to 32px if you want bigger */
  height:28px;
  border-radius:50%;          /* perfect circle */
  overflow:hidden;            /* clip anything outside the circle */
  display:inline-block;
  background: url('/store/assets/sg.png') center/110% no-repeat;
  /* 120% zoom trims most of the PNG halo; tweak 110–140% to taste */
  box-shadow:none;            /* remove theme glow */
}

/* kill any old theme layers on the logo block */
.nav .brand .logo::before,
.nav .brand .logo::after{
  content:none; display:none;
}