/* Spoon Services — Neon Yellow theme UI-only multipage */
:root{
  --bg: #08080C;
  --panel: #101018;
  --panel-2: #131323;
  --muted: #b7b7c3;
  --text: #EDEDF3;
  --yellow: #FFEA00;
  --yellow-2: #FFF347;
  --accent-glow: 0 0 32px rgba(255,234,0,.65), 0 0 96px rgba(255,234,0,.45);
  --radius: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);background:var(--bg);overflow-x:hidden}
a{color:var(--yellow);text-decoration:none}
.muted{color:var(--muted)}
.center{text-align:center}

/* Starfield canvas */
#starfield{position:fixed;inset:0;z-index:-1}

/* Top ribbon */
.top-ribbon{background:linear-gradient(90deg, rgba(255,234,0,.15), transparent 15%, transparent 85%, rgba(255,234,0,.15));border-bottom:1px solid rgba(255,234,0,.25);backdrop-filter:blur(6px)}
.ribbon-inner{max-width:1200px;margin:0 auto;padding:.55rem 1rem;display:flex;gap:.5rem;align-items:center;justify-content:center;font-weight:600;letter-spacing:.04em;font-size:.78rem}
.ribbon-link{color:var(--yellow)}.sep{opacity:.5}

/* === NAVBAR FINAL HARD FIX === */
.navbar {
  width: 100%;
  padding-left: calc((100vw - 1200px) / 2 + 1rem);
  padding-right: calc((100vw - 1200px) / 2 + 1rem);
  margin-top: 14px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn{border:none;cursor:pointer;font-weight:700;padding:.55rem .95rem;border-radius:999px;letter-spacing:.02em;transition:.2s transform ease,.2s box-shadow ease,.2s background ease;display:inline-flex;align-items:center;justify-content:center}
.btn-solid{color:#000;background:linear-gradient(180deg,var(--yellow),var(--yellow-2));box-shadow:var(--accent-glow)}
.btn-solid:hover{transform:translateY(-1px)}
.btn-outline{color:var(--yellow);background:transparent;border:1.5px solid rgba(255,234,0,.55);box-shadow:var(--accent-glow)}
.icon-btn{background:transparent;border:1.5px solid rgba(255,234,0,.35);color:var(--yellow);border-radius:12px;padding:.5rem;display:grid;place-items:center}
.icon-btn:hover{box-shadow:var(--accent-glow)}
.btn.full{width:100%}

/* Containers */
.container{max-width:1200px;margin:0 auto;padding:1.25rem 1rem 3rem}
.container.narrow{max-width:720px}

/* Hero */
.hero{text-align:center;padding:4.5rem 0 2.25rem}
.title{font-size:3.2rem;margin:0 0 .3rem;letter-spacing:.06em;font-weight:800}
.subtitle{margin:0 0 1.6rem;opacity:.75}

/* Search & dropdown */
.search-row{display:grid;grid-template-columns:1fr 260px;gap:.8rem;max-width:720px;margin:0 auto 1.2rem}
.search{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.7rem .9rem}
.search input{background:transparent;border:none;outline:none;width:100%;color:var(--text);font-size:.95rem}
.search-ic{color:var(--muted)}
.dropdown{position:relative}
.dropdown-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);border-radius:12px;padding:.7rem .9rem;color:var(--text);cursor:pointer}
.dropdown .menu{display:none;position:absolute;top:110%;left:0;right:0;background:#0f0f16;border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;z-index:5}
.dropdown.open .menu{display:block}
.dropdown .menu a{display:block;padding:.65rem .9rem;color:var(--muted)}
.dropdown .menu a:hover{background:#141422;color:var(--text)}

/* Regions */
.regions{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin:1.2rem auto 0;
  flex-wrap:wrap;
  max-width:720px; /* same visual width as search-row */
}
.chip{display:flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--muted);cursor:pointer;transition:.2s}
.chip.active,.chip:hover{color:#000;background:linear-gradient(180deg,var(--yellow),var(--yellow-2));box-shadow:var(--accent-glow)}

.search-row .regions{
  grid-column: 1 / -1;
  justify-content: center;
}

/* Product grid */
.products h2{text-align:center;margin:1.4rem 0 .9rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.search-row{grid-template-columns:1fr}}
@media (max-width:700px){.grid{grid-template-columns:repeat(2,1fr)}.title{font-size:2.6rem}}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.4)}
.thumb{height:150px;background:radial-gradient(60% 80% at 50% 30%, rgba(255,234,0,.15), transparent 60%),linear-gradient(135deg,#2a2a39,#1a1a26);display:grid;place-items:center}
.thumb.small{height:64px;width:96px;border-radius:12px}
.blocked{text-align:center;color:#E8E8F0;font-weight:600;background:linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,255,255,.05));padding:18px 14px;border-radius:12px;border:1px dashed rgba(255,255,255,.22)}
.card-body{padding:.9rem}
.meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.name{font-weight:600}.globe{opacity:.9}
.foot{display:flex;align-items:center;justify-content:flex-end;gap:.6rem}
.price{font-weight:700}
.pagination{display:flex;justify-content:center;gap:.5rem;margin:1rem 0 0}
.page{display:inline-block;padding:.45rem .8rem;border-radius:10px;background:rgba(255,255,255,.05);color:var(--muted)}
.page.active{background:linear-gradient(180deg,var(--yellow),var(--yellow-2));color:#000;box-shadow:var(--accent-glow)}

/* Modal */
.modal::backdrop{background:rgba(0,0,0,.6)}
.modal .modal-card{width:min(720px,90vw);background:#0f0f16;border:1px solid rgba(255,255,255,.1);border-radius:16px;color:var(--text);padding:0}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-head h3{margin:0}
.modal-body{padding:1.25rem}
.modal-body h4{margin:.25rem 0 .4rem;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.tags{display:flex;gap:.4rem;margin:.8rem 0}
.tag{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:.3rem .55rem;border-radius:999px;font-size:.8rem}
.label{display:block;margin:.7rem 0 .25rem;color:var(--muted)}
.select select{width:100%;background:#0d0d16;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--text);padding:.65rem .7rem}
.qty{display:flex;align-items:center;gap:.6rem}
.qty input[type=number]{width:80px;background:#0d0d16;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:var(--text);padding:.6rem .5rem}
.pricebox{display:flex;align-items:center;gap:.3rem;background:#0d0d16;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.6rem .6rem}
.pricebox input{width:80px;background:transparent;border:none;color:var(--text);outline:none}
.modal-foot{padding:1rem}

/* Auth pages */
.auth{padding:3rem 0}
.auth-title{text-align:center;margin:0 0 1rem}
.form{display:grid;gap:.55rem}
.input{background:#0d0d16;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text);padding:.8rem .9rem;outline:none}
.input:focus{border-color:rgba(255,234,0,.6);box-shadow:var(--accent-glow)}

/* Cart / Checkout */
.section-title{margin:1rem 0 1rem}
.cart-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cart-left{display:flex;gap:1rem;align-items:center}
.cart-info h4{margin:.1rem 0 .2rem}
.trash{background:#1c1c28;border:1px solid rgba(255,255,255,.1);color:#eee;border-radius:10px;padding:.5rem .6rem;cursor:pointer}
.checkout{display:grid;grid-template-columns:1fr 320px;gap:1rem;margin-top:1.25rem}
.subhead{margin:.2rem 0 .6rem;color:#bfbfca;letter-spacing:.06em}
.row{display:flex;gap:.6rem}
.proc{flex:1;background:#121223;border:1px solid rgba(255,255,255,.12);padding:1rem;border-radius:12px;color:var(--text);cursor:pointer}
.proc.active{outline:2px solid rgba(255,234,0,.45);box-shadow:var(--accent-glow)}
.coupon{display:flex;gap:.6rem}
.order-details{margin-top:.8rem;display:grid;gap:.35rem}
.order-details div{display:flex;justify-content:space-between;color:var(--muted)}

/* Footer */
.footer{max-width:1200px;margin:2rem auto 2.5rem;padding:0 1rem;text-align:center;color:var(--muted)}
.footer-panel{background:#101018;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:1.2rem}
.footer-links{display:flex;justify-content:center;gap:1rem;margin-bottom:.6rem}
.footer-links a{color:var(--muted)}
.footer .dot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.18);display:inline-block;align-self:center}
::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
}

/* FAQ Page */
.faq-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 2rem;   /* was 3rem */
}

.faq-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: .15rem;   /* tighter */
}

.faq-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 1.2rem;   /* was 2rem — this was the big gap */
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* Drop animation */
.drop-in {
  animation: faqDrop .45s ease-out;
}

@keyframes faqDrop {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.faq-item {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,234,0,.25);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(255,234,0,.18);
}

.faq-item summary {
  padding: 1rem 1.2rem;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  color: var(--yellow);
  font-size: 1.2rem;
}

.faq-item[open] summary::after {
  content: "−";
}

/* Reviews Page */
.reviews-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 3rem;
}

.reviews-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: .25rem;
}

.reviews-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.review-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,234,0,.25);
  border-radius: 16px;
  padding: 1.1rem;
  box-shadow: 0 0 22px rgba(255,234,0,.18);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.stars {
  color: var(--yellow);
  letter-spacing: 2px;
  font-size: .95rem;
}

.review-text {
  font-weight: 500;
}

.review-time {
  color: var(--muted);
  font-size: .8rem;
}

.verified {
  margin-top: auto;
  font-size: .8rem;
  color: var(--yellow);
  opacity: .9;
}

/* Responsive */
@media (max-width: 1000px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* TOS Page */
.tos-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding-top: 3rem;
}

.tos-title {
  text-align: center;
  font-weight: 700;
  margin-bottom: .25rem;
}

.tos-sub {
  text-align: center;
  color: var(--muted);
  margin-bottom: 2rem;
}

.tos-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,234,0,.25);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 0 22px rgba(255,234,0,.18);
}

.tos-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-left: 1.2rem;
}

.tos-list li {
  color: var(--text);
  line-height: 1.6;
}

/* FAQ smooth accordion animation */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 1.2rem;
  color: var(--muted);
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    padding 0.25s ease;
}

/* When opened */
.faq-item[open] .faq-answer {
  max-height: 200px; /* enough for short answers */
  opacity: 1;
  padding: 0 1.2rem 1rem;
}

/* Hover only when closed */
.faq-item:not([open]) summary:hover {
  background: rgba(255,234,0,0.03);
}

/* Login popup */
.login-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-size: 1rem;
}

.login-popup p {
  margin-top: 1rem;
  font-weight: 600;
}

.login-popup.error p {
  color: #ff4d4d;
}

.login-popup.success p {
  color: #2bff88;
}

/* Spinner */
.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(255,255,255,.15);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.login-popup.error .spinner {
  color: #ff4d4d;
}

.login-popup.success .spinner {
  color: #2bff88;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.user-pill {
  cursor: default;
  pointer-events: none;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  gap: 1rem;
}

/* === NAVBAR HARD LOCK (SAFE) === */

.navbar {
  max-width: 1200px;
  margin: 14px auto 0;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  white-space: nowrap;
}

/* Navbar link typography fix */
.nav-links a {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* === NAVBAR FINAL TYPOGRAPHY (LOCKED) === */

/* SPOON brand */
.brand {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--yellow);
}

/* Nav links */
.nav-links a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e6e6ee;
}

/* Active / hover */
.nav-links a:hover,
.nav-links a.active {
  color: #ffffff;
}

/* Account page */
.account-wrap {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

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

.account-card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid rgba(255,234,0,.25);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 0 22px rgba(255,234,0,.18);
}

.card-title {
  margin-bottom: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--yellow);
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .6rem;
}

.info-row span {
  color: var(--muted);
}

/* Balance / form input subtle neon focus */
.input,
.balance-input {
  border: 1px solid rgba(255,234,0,.25);
  box-shadow: none;
  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

/* Focus glow — toned down */
.input:focus,
.balance-input:focus {
  border-color: rgba(255,234,0,.6);
  box-shadow:
    0 0 6px rgba(255,234,0,.25),
    0 0 14px rgba(255,234,0,.18);
  animation: neonPulse 1.8s ease-in-out infinite;
}

/* Smooth pulse animation */
@keyframes neonPulse {
  0% {
    box-shadow:
      0 0 6px rgba(255,234,0,.18),
      0 0 12px rgba(255,234,0,.12);
  }
  50% {
    box-shadow:
      0 0 10px rgba(255,234,0,.35),
      0 0 22px rgba(255,234,0,.25);
  }
  100% {
    box-shadow:
      0 0 6px rgba(255,234,0,.18),
      0 0 12px rgba(255,234,0,.12);
  }
}

.history-table {
  margin-top: 1rem;
  display: flex;      /* IMPORTANT */
  flex-direction: column;
  gap: .6rem;
}

.history-table:not(.orders-history) .history-head,
.history-table:not(.orders-history) .history-row {
  display: grid;
  grid-template-columns: 1.2fr .6fr 1fr;
}

.history-head {
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,.05);
}

.history-row {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,234,0,.25);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem;
}

.positive {
  color: var(--yellow);
  font-weight: 600;
}

.category-search {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: .55rem .8rem;
  color: var(--text);
  outline: none;
  font-size: .85rem;
}

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

.dropdown .menu a {
  display: block;
  padding: .6rem .9rem;
  cursor: pointer;
}

.btn-outline:hover {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  color: #000;
  box-shadow: var(--accent-glow);
  transform: translateY(-1px);
}

/* =======================
   ADMIN DASHBOARD
======================= */

.admin-wrap {
  padding-top: 2rem;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(255,234,0,.25);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 0 22px rgba(255,234,0,.18);
  text-align: center;
}

.stat-label {
  display: block;
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: .3rem;
}

.stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--yellow);
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

.admin-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,234,0,.3);
  color: var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.admin-btn:hover {
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  color: #000;
  transform: translateY(-2px);
  box-shadow: var(--accent-glow);
}

/* Responsive */
@media (max-width: 900px) {
  .admin-stats,
  .admin-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .admin-stats,
  .admin-actions {
    grid-template-columns: 1fr;
  }
}

/* =======================
   ADMIN RANGE SELECTOR
======================= */

.admin-ranges {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin: 1.5rem 0 2.2rem;
  flex-wrap: wrap;
}

.range-btn {
  padding: .45rem .9rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid rgba(255,234,0,.25);
  background: rgba(255,255,255,.04);
  transition: .2s ease;
}

.range-btn:hover,
.range-btn.active {
  color: #000;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  box-shadow: var(--accent-glow);
}

/* =======================
   ADMIN – BALANCE EDIT
======================= */

.admin-balance-edit {
  margin-top: 2rem;
}

.balance-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.balance-input-wrap {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.balance-hint {
  font-size: .75rem;
  color: var(--muted);
  opacity: .85;
}

.btn-danger {
  background: linear-gradient(180deg, #ff3b3b, #c90000);
  color: #fff;
  border: none;
}

.btn-danger:hover {
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.6);
}

/* Compact invoice rows — NOT stock tables */
.history-row-admin {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 1fr 0.5fr;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,234,0,.25);
  margin-bottom: .5rem;
  font-size: .85rem;
}

.history-row .btn,
.history-row-admin .btn {
  padding: .35rem .6rem;
  font-size: .75rem;
}

.link-row {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem .8rem;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease;
}

.link-row:hover {
  background: rgba(255,234,0,.08);
  transform: translateX(2px);
}

.admin-customers-header {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

/* =======================
   ADMIN CUSTOMERS TABLE
======================= */

.admin-customers-card { padding: 1rem; }

.admin-customers-grid{
  display:grid;
  grid-template-columns: 2.4fr 1fr 1fr 1.1fr; /* email | balance | orders | spent */
  gap: 1rem;
  align-items:center;
}

.admin-customers-head{
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,234,0,.18);
  margin-bottom: .75rem;
}

.head-title{
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.head-sub{
  margin-top: .2rem;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.40);
}

.head-col{ display:flex; flex-direction:column; }

.admin-customers-row{
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,234,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  color: var(--text);
  text-decoration: none;
}

.admin-customers-row:hover{
  transform: translateY(-2px);
  box-shadow: var(--accent-glow);
  background: rgba(255,255,255,.04);
}

.email-col{ color: var(--yellow); font-weight: 600; }
.center{ text-align:center; }
.right{ text-align:right; }
.mono{ font-variant-numeric: tabular-nums; }

@media (max-width: 900px){
  .admin-customers-grid{
    grid-template-columns: 1.8fr .9fr .9fr 1fr;
  }
}

@media (max-width: 650px){
  .admin-customers-grid{
    grid-template-columns: 1.6fr .9fr .9fr;
  }
  .admin-customers-head .right,
  .admin-customers-row .right{
    display:none; /* hide Total Spent column on small screens */
  }
}

/* Orders grid layout */
.orders-grid {
  display: grid;
  grid-template-columns: 
    1.4fr   /* Order ID */
    2fr     /* Email */
    1fr     /* Type */
    1fr     /* Amount */
    1.2fr   /* Status */
    1.6fr;  /* Date */
  align-items: center;
  gap: 1rem;
}

/* Status pills */
.status {
  font-weight: 600;
}

.status.completed {
  color: #00ff88;
}

.status.pending {
  color: #ff4444;
}

/* Capitalize type nicely */
.capitalize {
  text-transform: capitalize;
}

/* =========================
   ADMIN ADD REVIEW FORM
========================= */

.admin-review-add {
  max-width: 720px;
  margin: 2rem auto;
}

.review-add-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 1rem;
}

.review-textarea {
  min-height: 120px;
  resize: vertical;
}

.review-submit {
  margin-top: 0.5rem;
}

.product-card {
  background: #0f0f12;
  border-radius: 14px;
  padding: 0.8rem;
  border: 1px solid rgba(255,234,0,0.15);
}

.thumb-placeholder {
  text-align: center;
  color: #bfae00;
  font-size: 0.85rem;
}

.product-title {
  font-size: 0.95rem;
  margin-top: 0.6rem;
}

.product-price {
  font-weight: bold;
  color: #FFEA00;
  margin: 0.4rem 0;
}

.modal {
  background: #0f0f12;
  border-radius: 16px;
  width: 420px;
  padding: 1.5rem;
  position: relative;
  border: 1px solid rgba(255,234,0,0.2);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.modal-section {
  margin: 1rem 0;
}

.hidden {
  display: none;
}

/* ===== PRODUCT CART MODAL ===== */

.modal-cart {
  width: 100%;
  max-width: 520px;
  background: #0b0b0f;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 0 40px rgba(255,234,0,0.15);
}

.modal-cart h4 {
  margin-bottom: 8px;
  font-weight: 500;
  color: #ccc;
}

.qty-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.qty-input {
  flex: 1;
}

.price-box {
  min-width: 90px;
  text-align: center;
  padding: 12px;
  border-radius: 12px;
  background: #111;
  border: 1px solid #222;
  color: #ffea00;
  font-weight: 600;
}

.cart-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.cart-main {
  flex: 1;
}

.cart-icon {
  width: 54px;
  border-radius: 14px;
  background: #7a1fa2;
  color: #fff;
  font-size: 18px;
}

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease;
  z-index: 1000;
}

/* When modal is OPEN */
.modal-overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

.product-modal {
  width: 420px;
  background: radial-gradient(circle at top, #111 0%, #080808 100%);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 0 40px rgba(255,234,0,.25);
  animation: modalIn .25s ease-out;
  position: relative;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 22px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}

.product-modal-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;

  text-align: center;
  width: 100%;
  display: block;
}

.product-modal-section {
  margin-bottom: 16px;
}

.modal-label {
  font-size: 13px;
  color: #aaa;
  display: block;
  margin-bottom: 6px;
}

.modal-description {
  font-size: 14px;
  color: #ddd;
  line-height: 1.45;
  white-space: normal;
}

.modal-select {
  width: 100%;
  padding: 10px 12px;
  background: #0c0c0c;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
}

.amount-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.modal-qty:focus {
  border-color: #ffea00;
  box-shadow: 0 0 0 1px rgba(255,234,0,.35);
}

.price-pill {
  padding: 10px 14px;
  border-radius: 10px;
  background: #111;
  border: 1px solid #ffea00;
  color: #ffea00;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.modal-add {
  flex: 1;
}

.cart-square {
  width: 48px;
  border-radius: 12px;
  border: 1px solid #ffea00;
  background: #0c0c0c;
  color: #ffea00;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}

.cart-square:hover {
  background: #ffea00;
  color: #000;
}

/* =========================
   PRODUCT MODAL – QTY + PRICE
   ========================= */

.modal-qty-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* Amount input */
.modal-qty {
  height: 44px;
  padding: 0 12px;

  background: #0c0c0c;
  color: #ffffff;

  border: 1px solid #333;
  border-radius: 10px;

  font-size: 14px;
  outline: none;
  flex: 1;
}

/* $0.00 price box */
.modal-price {
  height: 44px;
  min-width: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0c0c0c;
  color: #ffea00;

  border: 1px solid #ffea00;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 700;
}

   HOME PRODUCTS GRID – 4 PER ROW
   =============================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;

  align-items: start;   /* 🔥 ADD THIS */
}

/* Product card sizing */
.product-card {
  width: 100%;
  background: #0c0c0c;

  border-radius: 16px;
  border: 1px solid rgba(255,234,0,0.15);

  box-shadow: 0 0 25px rgba(0,0,0,0.6);

  overflow: hidden;              /* 🔥 IMPORTANT */

  padding-top: 8px;              /* 🔥 REDUCE THIS (was causing gap) */

  display: flex;          /* 🔥 ADD */
  flex-direction: column; /* 🔥 ADD */
  height: auto;           /* 🔥 ADD */
  align-self: start;      /* 🔥 ADD */
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(255,234,0,0.25);
}

/* ===============================
   PRODUCT THUMBNAIL (ORIGINAL RESTORE)
=============================== */

.product-thumb {
  width: 100%;

  height: clamp(120px, 18vw, 151px);
  /* 🔥 scales with screen, but NEVER exceeds 151 */

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0b0b0b;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.product-thumb img {
  max-width: 100%;
  max-height: 180px;

  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}

/* 🔥 MOBILE ONLY FIX */
@media (max-width: 768px){

  /* 🔥 BIGGER THUMBNAIL */
  .product-thumb {
    height: 180px;                 /* ⬅️ bigger */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .product-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* 🔥 CARD TIGHTENED TO MATCH */
  .product-card {
    padding: 10px;                 /* less padding = tighter */
  }

  .product-body {
    padding: 8px 8px 10px;
  }

  .product-title {
    font-size: 14px;
    margin: 6px 0 4px;
  }

  .product-action-row {
    margin-top: 6px;
  }

  .buy-now-wide {
    height: 38px;
    font-size: 13px;
  }

}

/* ===============================
   TEXT + BUTTON (UNCHANGED)
=============================== */

.product-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #f1f1f6;
}

.product-price {
  color: #ffea00;
  font-weight: 700;
  font-size: 15px;
}

/* Button */
.product-body .btn {
  margin-top: auto;
}

/* ===============================
   PRODUCTS LAYOUT – FINAL FIX
=============================== */

.products-container {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Force cards to behave */
.product-card {
  width: 100%;
}

/* Close animation */
.modal-overlay.closing .product-modal {
  animation: modalOut .22s ease-in forwards;
}

@keyframes modalOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(.97) translateY(12px);
  }
}

.admin-products-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-products-head,
.admin-products-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1.2fr;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
}

.admin-products-head {
  background: #111;
  color: #aaa;
  font-weight: 600;
}

.admin-products-row {
  background: linear-gradient(180deg, #111, #0b0b0b);
  border: 1px solid rgba(255,234,0,.15);
}

.admin-products-row .cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-products-head span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cell.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.status-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.status-pill.on {
  background: rgba(255,234,0,.15);
  color: #ffea00;
}

.status-pill.off {
  background: rgba(255,255,255,.08);
  color: #aaa;
}

.btn-xs {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}

/* ===========================
   ADMIN FORM CLEANUP
=========================== */

.admin-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.clean-form {
  padding: 2.5rem;
}

/* 2-column layout */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/* Stack nicely on small screens */
@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-col {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.85rem;
  opacity: 0.85;
}

/* Inline quantity inputs */
.inline-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Textarea fix */
.textarea {
  min-height: 140px;
  resize: vertical;
}

/* File input cleanup */
.file-input {
  padding: 0.55rem;
}

/* Button positioning */
.form-actions {
  margin-top: 2.5rem;
  display: flex;
  justify-content: flex-end;
}

/* ===============================
   PRODUCT CARD – ACTION ROW (NEW)
   =============================== */

.product-action-row {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 6px;              /* close to thumbnail */
  padding-top: 6px;

  border-top: 1px solid rgba(255,255,255,0.04);
}

.buy-now-btn {
  flex: 1;
  height: 42px;

  border-radius: 999px;
  border: none;

  font-weight: 700;
  font-size: 14px;
  cursor: pointer;

  color: #000;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  box-shadow: var(--accent-glow);

  transition: transform .15s ease, box-shadow .15s ease;
}

.buy-now-btn:hover {
  transform: translateY(-1px);
}

.action-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.18);
}

.action-price {
  min-width: 64px;
  text-align: right;

  font-weight: 700;
  font-size: 14px;
  color: var(--text);

  opacity: 0.9;
}

/* ===============================
   PRODUCT CARD – SINGLE ACTION BTN
   =============================== */

.product-action-row {
  margin-top: 8px;
}

.buy-now-wide {
  width: 100%;

  padding: 9px 14px;          /* 🔽 slimmer vertically */
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: #ffee00;
  color: #000;

  font-weight: 600;
  line-height: 1;             /* 🔑 prevents vertical bloat */

  border: none;
  cursor: pointer;
}

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px;

  border: none;
  border-radius: 14px; /* matches example curves */

  cursor: pointer;

  background: linear-gradient(180deg, var(--yellow), var(--yellow-2));
  box-shadow: var(--accent-glow);

  color: #000;
  font-weight: 700;
}

.buy-now-wide:hover {
  transform: translateY(-1px);
}

.buy-text {
  font-size: 14px;
}

.price-text {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
}

.buy-now-wide .divider {
  width: 1px;
  height: 16px;               /* 🔽 shorter divider */
  background: rgba(0, 0, 0, 0.25);
  margin: 0 10px;
}

.product-card {
  width: 100%;
  min-width: 0;
}

/* === BUY NOW BUTTON (CLEAN NEON STYLE) === */
.buy-now-wide {
  width: 100%;
  height: 44px; /* slimmer but still premium */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  background: #000;
  color: #ffea00;

  border-radius: 12px;
  border: 1.5px solid rgba(255, 234, 0, 0.65);

  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.2px;

  cursor: pointer;
  position: relative;
  overflow: hidden;

  transition:
    box-shadow 0.25s ease,
    transform 0.18s ease,
    border-color 0.25s ease;
}

/* Divider between text and price */
.buy-now-wide .divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 234, 0, 0.35);
}

/* Price text */
.buy-now-wide .price-text {
  font-weight: 600;
}

/* Hover glow */
.buy-now-wide:hover {
  border-color: rgba(255, 234, 0, 0.95);
  box-shadow:
    0 0 10px rgba(255, 234, 0, 0.25),
    0 0 22px rgba(255, 234, 0, 0.15);
  transform: translateY(-1px);
}

/* Click / press */
.buy-now-wide:active {
  transform: translateY(0);
  box-shadow:
    0 0 6px rgba(255, 234, 0, 0.25);
}

/* Subtle sweep animation */
.buy-now-wide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 234, 0, 0.08),
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.buy-now-wide:hover::after {
  transform: translateX(100%);
}

/* =====================================
   EXACT BOOTSTRAP-LIKE BUTTON GEOMETRY
   ===================================== */

.product-card .buy-now-wide {
  width: 100%;
  height: 32px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: none;
  border-radius: 6px;

  /* FONT POLISH */
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.4;
  text-transform: none;

  cursor: pointer;

  background: linear-gradient(
    180deg,
    var(--yellow),
    var(--yellow-2)
  );

  box-shadow: none;
}

.product-card .buy-now-wide .buy-text {
  font-weight: 600;
}

.product-card .buy-now-wide .price-text {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* divider inside button */
.product-card .buy-now-wide .divider {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.25);
  margin: 0 10px;
}

/* text */
.product-card .buy-now-wide .buy-text,
.product-card .buy-now-wide .price-text {
  font-weight: 500;
}

/* ===============================
   PRODUCT CARD STRUCTURE FIX
   =============================== */

.product-body {
  display: flex;
  flex-direction: column;
}

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1; /* take remaining space */
}

/* push button to bottom */
.product-action-row {
  margin-top: auto;
}

/* ===============================
   HARD RESET PRODUCT CARD LAYOUT
   =============================== */

.product-thumb {
  margin-bottom: 0 !important;
}

.product-body {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px !important; /* tight, controlled */
  flex: 1;
}

.product-title {
  margin: 6px 0 8px !important;   /* kill default margins */
  font-size: 15px;
}

/* button pinned to bottom */
.product-action-row {
  margin-top: auto !important;
  padding-top: 8px;
}

.product-action-row button {
  margin-bottom: 0 !important;
}

/* ===============================
   PRODUCT REGION PICKER (ADMIN)
   =============================== */

.region-picker {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.region-option {
  position: relative;
}

.region-option input {
  display: none;
}

.region-option span {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 12px;
  border-radius: 10px;

  font-size: 14px;
  font-weight: 500;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);

  cursor: pointer;
  transition: all 0.15s ease;
}

.region-option input:checked + span {
  background: rgba(255,234,0,0.15);
  border-color: #FFEA00;
  box-shadow: 0 0 10px rgba(255,234,0,0.35);
}

.region-option span:hover {
  background: rgba(255,255,255,0.08);
}

/* ===============================
   PRODUCT REGION FLAGS
   =============================== */

.product-regions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0.9;
}

.product-regions span {
  display: inline-flex;
  align-items: center;
}

.product-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.product-flags {
  display: flex;
  gap: 6px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.9;
}

.product-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-flags {
  display: flex;
  gap: 6px;
  font-size: 15px;
  opacity: 0.9;
}

/* ===== FINAL BUY NOW BUTTON OVERRIDE ===== */
.buy-now-wide {
  background: linear-gradient(
      180deg,
      #0f0f0f 0%,
      #070707 100%
      ) !important;
  color: #ffea00 !important;

  border: 1.5px solid rgba(255, 234, 0, 0.75) !important;
  border-radius: 12px;

  height: 44px;
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14.5px;

  box-shadow: none;
  text-shadow: none;

  transition:
    box-shadow 0.25s ease,
    transform 0.18s ease,
    border-color 0.25s ease;
}

/* Divider */
.buy-now-wide .divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.18);
}

/* Text */
.buy-now-wide .buy-text,
.buy-now-wide .price-text {
  color: #ffea00 !important;
}

/* Hover */
.buy-now-wide:hover {
  border-color: rgba(255, 234, 0, 1);
  box-shadow:
    0 0 10px rgba(255, 234, 0, 0.25),
    0 0 22px rgba(255, 234, 0, 0.15);
  transform: translateY(-1px);
}

/* Active */
.buy-now-wide:active {
  transform: translateY(0);
  box-shadow: 0 0 6px rgba(255, 234, 0, 0.25);
}

/* --- REGION FILTER FIX --- */

.product-card.is-hidden {
  display: none !important;
}

/* ===== FINAL GRID FIX – OVERRIDE BAD FLEX ===== */

/* Grid container */
.products-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

/* Product card MUST NOT be flex */
.product-card {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Flex only INSIDE the card */
.product-body {
  display: flex !important;
  flex-direction: column !important;
}

/* Filtering */
.product-card.is-hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 900px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .products-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   CATEGORY DROPDOWN – SCROLL FIX
   =============================== */

.dropdown .menu {
  max-height: 260px;          /* HARD CAP */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Scrollbar – Chrome / Edge / Safari */
.dropdown .menu::-webkit-scrollbar {
  width: 6px;
}

.dropdown .menu::-webkit-scrollbar-track {
  background: transparent;
}

.dropdown .menu::-webkit-scrollbar-thumb {
  background: rgba(255, 234, 0, 0.35);
  border-radius: 10px;
}

.dropdown .menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 234, 0, 0.65);
}

/* Firefox */
.dropdown .menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,234,0,.45) transparent;
}

.modal-actions {
  display: flex;
  justify-content: center;   /* ⬅️ center horizontally */
  gap: 10px;                  /* ⬅️ spacing between buttons */
  margin-top: 8px;
}

.admin-products-head {
  grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1.2fr;
}

.admin-products-head {
  padding-left: 10px;
}

.admin-products-head span {
  display: flex;
  align-items: center;
}

.admin-products-row .cell {
  display: flex;
  align-items: center;
}

/* --- FOOTER LINKS CENTERED --- */
.footer-links {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* --- FOOTER TOP (links centered) --- */
.footer-top {
  width: 100%;
  display: flex;
  flex-direction: column;   /* stack links then socials */
  justify-content: center;
  align-items: center;
  gap: 6px;
}

/* --- SOCIAL PILL BUTTONS UNDER TEXT --- */
.footer-socials {
  margin-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* tiny pill chips */
.footer-socials .social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 4px 10px;
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 500;

  color: #ffea00;
  text-decoration: none;

  background: rgba(255, 234, 0, 0.07);
  border: 1px solid rgba(255, 234, 0, 0.25);

  transition: .18s ease;
}

/* subtle glow hover */
.footer-socials .social-link:hover {
  background: #ffea00;
  color: #000;
  box-shadow: 0 0 14px #ffea00;
  transform: translateY(-1px);
}

/* icon size scaled to text */
.footer-socials i {
  font-size: 0.85rem;
}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#ffea00;
  color:#000;
  font-weight:900;
  border-radius:50px;
  padding:2px 7px;
  font-size:12px;
  box-shadow:0 0 12px #ffea00;
}

.mini-cart{
  position: absolute;
  width: 260px;
  background:#0a0a0a;
  border:1px solid #ffea00;
  border-radius:16px;
  padding:14px;
  box-shadow: 0 0 25px rgba(255,234,0,.55);
  z-index: 999999;
}

/* closed */
.mini-cart.hidden{
  display:none !important;
}

/* open */
.mini-cart.show{
  display:block;
}

/* scroll */
#miniCartItems{
  max-height:240px;
  overflow-y:auto;
  padding-right:10px;
}

/* scrollbar */
#miniCartItems::-webkit-scrollbar{ width:6px; }
#miniCartItems::-webkit-scrollbar-thumb{
  background:#ffea00;
  border-radius:10px;
}

.mini-cart-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:8px 0;
}

#cartButton{
  position: relative;
}

.cart-wrap{
  position: relative;   /* ✅ anchor dropdown to cart button */
  display: inline-block;
}

.mini-cart{
  position: absolute;   /* ✅ not fixed */
  top: calc(100% + 12px);
  right: 0;
  left: auto;
}

/* ===== MINI CART CLEANUP ===== */

.mini-cart-title{
  text-align: center;
  font-weight: 900;
  font-size: 1rem;
  margin-bottom: 10px;
  color: #ffea00;
  letter-spacing: 0.5px;
}

.mini-cart-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 8px;
  border-radius: 12px;
  margin: 6px 0;
  background: rgba(255,234,0,0.04);
  border: 1px solid rgba(255,234,0,0.10);
}

.mini-cart-left{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mini-cart-name{
  color: #ffea00;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.mini-cart-qty{
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  font-weight: 600;
}

.mini-cart-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

.mini-cart-price{
  font-weight: 900;
  color: #ffffff;
  font-size: 0.9rem;
}

.mini-cart-trash{
  background: none;
  border: none;
  cursor: pointer;
  color: #ff3b3b;
  font-size: 0.95rem;
  padding: 6px;
  border-radius: 10px;
  transition: .15s ease;
}

.mini-cart-trash:hover{
  background: rgba(255,59,59,0.15);
  transform: scale(1.05);
}

/* footer */
.mini-cart-footer{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,234,0,0.15);
}

.mini-cart-subtotal{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  color: rgba(255,234,0,0.9);
  margin-bottom: 10px;
}

.mini-cart-subtotal-price{
  color: #ffffff;
  font-weight: 900;
}

.mini-cart-checkout{
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
}

/* ==============================
   MINI CART — FINAL CLEAN VERSION
================================ */

.cart-wrap{
  position: relative;
  display: inline-block;
}

.mini-cart{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 260px;

  background: rgba(10,10,10,0.96);
  border: 1px solid rgba(255,234,0,0.30);
  outline: 1px solid rgba(255,234,0,0.06);
  border-radius: 16px;
  padding: 14px;

  /* ✅ IMPORTANT: no band glow */
  box-shadow: none;

  /* ✅ clean glow without strips */
  filter: drop-shadow(0 0 14px rgba(255,234,0,0.22));

  z-index: 999999;
}

/* closed */
.mini-cart.hidden{
  display:none !important;
}

/* open */
.mini-cart.show{
  display:block;
}

/* ==========================
   MINI CART — REMOVE UGLY GLOW
   (Button + subtotal area)
========================== */

/* stop glow bleed from checkout button */
.mini-cart .btn,
.mini-cart .btn-solid,
.mini-cart-checkout{
  box-shadow: none !important;
  filter: none !important;
}

/* make checkout still look good without glow */
.mini-cart .btn-solid,
.mini-cart-checkout{
  background: #ffea00 !important;
  color: #000 !important;
  border: 1px solid rgba(255,234,0,0.55) !important;
}

/* stop any glow/blur coming from mini cart footer/subtotal */
.mini-cart-footer,
.mini-cart-subtotal,
.mini-cart-subtotal-price{
  box-shadow: none !important;
  filter: none !important;
}

/* =========================
   CHECKOUT PAGE (SPOON THEME)
========================= */

.checkout-wrap{
  max-width: 1100px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.checkout-title{
  font-size: 1.7rem;
  font-weight: 900;
  text-align: left;
  color: #fff;
  margin-bottom: 22px;
}

.checkout-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
}

.checkout-card{
  background: rgba(20,20,25,0.70);
  border: 1px solid rgba(255,234,0,0.20);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}

.checkout-card-title{
  font-weight: 900;
  letter-spacing: 1px;
  font-size: .95rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
  text-transform: uppercase;
}

/* items panel */
.checkout-items{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgba(255,234,0,0.04);
  border: 1px solid rgba(255,234,0,0.10);
}

.ci-left{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ci-name{
  color: #ffea00;
  font-weight: 800;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.ci-qty{
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.ci-price{
  font-weight: 900;
  color: #fff;
  font-size: .95rem;
}

.checkout-empty{
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-weight: 700;
  padding: 20px 0;
}

/* payments */
.checkout-payments{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.pay-method{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,234,0,0.18);
  cursor: pointer;
  color: #fff;
  transition: .18s ease;
}

.pay-method:hover{
  border-color: rgba(255,234,0,0.35);
  transform: translateY(-1px);
}

.pay-method.active{
  border-color: rgba(255,234,0,0.55);
  box-shadow: 0 0 18px rgba(255,234,0,0.25);
}

.pay-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,234,0,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: #ffea00;
  font-size: 1.1rem;
}

.pay-label{
  font-weight: 900;
  letter-spacing: .5px;
}

/* purchase button */
.checkout-purchase{
  width: 100%;
  height: 46px;
  border-radius: 14px;
  background: #ffea00;
  color: #000;
  font-weight: 900;
  border: none;
  cursor: pointer;
  transition: .15s ease;
}

.checkout-purchase:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(255,234,0,0.35);
}

/* coupon */
.coupon-row{
  display:flex;
  gap: 10px;
  align-items: center;
}

.coupon-input{
  flex: 1;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,234,0,0.18);
  padding: 12px 14px;
  color: #fff;
  outline: none;
}

.coupon-input:focus{
  border-color: rgba(255,234,0,0.50);
}

.coupon-apply{
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,234,0,0.35);
  background: rgba(255,234,0,0.08);
  color: #ffea00;
  font-weight: 900;
  cursor:pointer;
  transition:.15s ease;
}

.coupon-apply:hover{
  background: rgba(255,234,0,0.18);
}

/* order details */
.order-details{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.od-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}

.od-row.total{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,234,0,0.15);
  font-weight: 900;
  color: #fff;
}

/* responsive */
@media(max-width: 960px){
  .checkout-grid{
    grid-template-columns: 1fr;
  }
}

/* CONNECTED CHECKOUT PANELS */
.checkout-panel{
  background: rgba(20,20,25,0.70);
  border: 1px solid rgba(255,234,0,0.22);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 0 24px rgba(0,0,0,0.35);
}

/* sections inside the connected panel */
.checkout-section{
  padding: 6px 0 14px;
}

/* soft divider instead of harsh line */
.checkout-section-soft{
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,234,0,0.10);
}

/* IMPORTANT: REMOVE THE HARSH TOTAL LINE */
.od-row.total{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,234,0,0.10); /* very soft */
  font-weight: 900;
  color: #fff;
}

/* ✅ STOP CHECKOUT PANELS FROM STRETCHING TALL */
.checkout-grid{
  align-items: start !important;   /* top align both columns */
}

/* ✅ EACH PANEL ONLY FITS CONTENT (NO FORCED HEIGHT) */
.checkout-panel{
  height: auto !important;
  min-height: unset !important;
  align-self: start !important;
}

/* OPTIONAL: tighten order details spacing so it looks more compact */
.order-details{
  margin-top: 6px;
}

.od-row{
  padding: 6px 0;
}

.purchase-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999999;
}

.purchase-modal.hidden{ display:none; }

.purchase-box{
  width: min(680px, 92vw);
  background: rgba(12,12,16,.96);
  border: 1px solid rgba(255,234,0,.35);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 0 40px rgba(255,234,0,.22);
}

.purchase-title{
  color:#ffea00;
  font-weight: 900;
  font-size: 1.25rem;
  text-align:center;
}

.purchase-sub{
  margin-top: 6px;
  text-align:center;
  color: rgba(255,255,255,.75);
  font-weight: 600;
}

.purchase-deliveries{
  margin-top: 16px;
  max-height: 340px;
  overflow: auto;
  padding-right: 8px;
}

.purchase-head{
  color: rgba(255,234,0,.95);
  font-weight: 900;
  margin-bottom: 10px;
}

.delivery-row{
  border-radius: 16px;
  padding: 12px 14px;
  margin: 10px 0;
  background: rgba(255,234,0,.05);
  border: 1px solid rgba(255,234,0,.12);
}

.delivery-title{
  color:#ffea00;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 8px;
}

.delivery-serial{
  color: white;
  font-weight: 800;
  font-size: .95rem;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.08);
  word-break: break-all;
}

.purchase-note{
  color: rgba(255,255,255,.8);
  text-align:center;
  padding: 18px;
}

.purchase-actions{
  display:flex;
  justify-content:center;
  gap: 12px;
  margin-top: 18px;
}

.delivery-group{
  border: 1px solid rgba(255,234,0,0.18);
  background: rgba(255,234,0,0.04);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

.delivery-group .delivery-title{
  font-weight: 900;
  color: #ffea00;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.delivery-serials{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.delivery-code{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,234,0,0.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-size: 0.9rem;
  user-select: text;
  cursor: text;
  word-break: break-word;
}

/* ✅ TELEGRAM BOX INSIDE PURCHASE DELIVERABLES */
.delivery-telegram{
  margin-top: 8px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 234, 0, 0.18);
}

.delivery-telegram i{
  color: #ffea00;
  font-size: 18px;
  flex-shrink: 0;
}

.delivery-telegram a{
  color: #ffea00;
  font-weight: 800;
  text-decoration: none;
  word-break: break-word;
  font-size: 0.95rem;
}

.delivery-telegram a:hover{
  text-decoration: underline;
}

/* ORDER HISTORY — MATCH BALANCE STYLE BUT 6 COL */
.orders-table{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.orders-product-name{
  color:#fff;
  font-weight:700;
}

.orders-invoice{
  font-size:.8rem;
  color:rgba(255,255,255,.55);
  margin-top:3px;
}

.orders-payment{
  color:#ffea00;
  font-weight:700;
  text-transform:lowercase;
}

.orders-amount{
  font-weight:700;
}

.orders-qty{
  font-weight:700;
}

.orders-date{
  color:rgba(255,255,255,.75);
  font-weight:600;
}

/* FAQ animation wrapper */
.faq-anim {
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

/* spacing for answer */
.faq-answer {
  padding: 0 1.2rem 1rem;
  line-height: 1.6;
}

/* OPEN STATE — JS sets height */
.faq-item[open] .faq-anim {
  height: auto;
}

/* ADMIN BACK BUTTON */
.admin-back{
  max-width: 900px;
  margin: 0 auto 18px auto;
}

.admin-back-btn{
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 14px;
  letter-spacing: .5px;
}

/* MINI CART BASE STATE (hidden visually but still renderable) */
.mini-cart {
  transform-origin: top right;
  transform: translateY(-12px) scale(0.94);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.25s cubic-bezier(.2,.8,.2,1),
    opacity 0.20s ease,
    box-shadow 0.25s ease;
}

/* OPEN STATE */
.mini-cart.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
  box-shadow: 0 0 28px rgba(255,234,0,0.25);
}

.hidden {
  display: none !important;
}

.announcement-text {
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: .06em;
  text-align: center;
  text-shadow: 0 0 6px rgba(255,234,0,.25);
  animation: ribbonPulse 4s ease-in-out infinite;
}

@keyframes ribbonPulse {
  0%   { opacity:.85; }
  50%  { opacity:1; }
  100% { opacity:.85; }
}

.announcement-text {
  font-weight: 700;
  color: var(--yellow);
  text-align: center;
  letter-spacing: .05em;
  animation: ribbonGlow 5s ease-in-out infinite;
}

@keyframes ribbonGlow {
  0% { opacity:.85; text-shadow:0 0 4px rgba(255,234,0,.2); }
  50% { opacity:1; text-shadow:0 0 10px rgba(255,234,0,.4); }
  100% { opacity:.85; text-shadow:0 0 4px rgba(255,234,0,.2); }
}

.announcement-text {
  font-weight: 700;
  color: var(--yellow);
  text-align: center;
  letter-spacing: .05em;

  font-size: 0.95rem;  /* 👈 slightly smaller than normal */
  line-height: 1.5;

  animation: neonBreath 5s ease-in-out infinite;
}

@keyframes neonBreath {
  0% {
    text-shadow:
      0 0 2px rgba(255,234,0,.25),
      0 0 6px rgba(255,234,0,.15);
  }
  50% {
    text-shadow:
      0 0 6px rgba(255,234,0,.6),
      0 0 14px rgba(255,234,0,.35),
      0 0 22px rgba(255,234,0,.2);
  }
  100% {
    text-shadow:
      0 0 2px rgba(255,234,0,.25),
      0 0 6px rgba(255,234,0,.15);
  }
}

.product-modal{
  position: relative;
}

/* ===============================
   PRODUCT MODAL SWIRL ANIMATION
================================ */

/* GLOBAL LOADER */
.swirl-success{
  position:fixed;               /* FIXED NOT ABSOLUTE */
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:rgba(0,0,0,0.85);
  z-index:9999;                 /* ABOVE EVERYTHING */
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.swirl-success.active{
  opacity:1;
}

.swirl-circle{
  width:48px;
  height:48px;
  border-radius:50%;
  border:4px solid rgba(0,255,136,.15);
  border-top:4px solid #00ff88;
  animation:swirlSpin 0.8s linear infinite;
  box-shadow:0 0 18px rgba(0,255,136,.6);
}

.swirl-text{
  color:#00ff88;
  font-weight:900;
  letter-spacing:.6px;
  font-size:1rem;
  text-shadow:0 0 10px rgba(0,255,136,.7);
}

@keyframes swirlSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.category-subtext{
  font-size:.8rem;
  opacity:.6;
  margin-top:4px;
  letter-spacing:.5px;
}

/* Force dropdown text to match Spoon UI */
.modal-select,
.modal-select option {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

/* Slim variant dropdown control */
.modal-select {
  height: 38px;              /* was tall — this slims it */
  padding: 0 14px;           /* less vertical padding */
  font-size: 15px;           /* smaller text */
  border-radius: 12px;       /* matches other inputs */
  line-height: 1;            /* prevents vertical bloat */
}

/* Also tighten the qty input row so they align */
.modal-qty {
  height: 42px;
  font-size: 15px;
}

.modal-select {
  font-weight: 500;   /* was bold (600–700), this softens it */
  font-size: 15px;
}

.modal-select option {
  font-weight: 500;
}

/* Amount input base */
.modal-qty {
  border: 1px solid rgba(255, 234, 0, 0.15);
  box-shadow: 0 0 0 rgba(255, 234, 0, 0);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* Hover + focus glow (smooth fade in) */
.modal-qty:hover,
.modal-qty:focus {
  border-color: #ffea00;
  box-shadow: 0 0 12px rgba(255, 234, 0, 0.45);
}

/* ===== CLEAN MODAL SYSTEM ===== */

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0); /* no dim when closed */
  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease, background .25s ease;
  z-index: 1000;
}

/* OPEN */
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,.65);
}

/* CLOSE ANIMATION */
.modal-overlay.closing {
  opacity: 0;
  background: rgba(0,0,0,0);
}

/* Modal box */
.product-modal {
  transform: scale(.92);
  opacity: 0;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}

.modal-overlay.show .product-modal {
  transform: scale(1);
  opacity: 1;
}

.product-modal.closing {
  transform: scale(.92);
  opacity: 0;
}

/* =========================
   CHECKOUT – CONTACT EMAIL
========================= */

.guest-email-input {
  width: 100%;
  height: 54px;

  padding: 0 18px;
  margin-top: 10px;

  border-radius: 16px;
  border: 1px solid rgba(255, 234, 0, 0.35);

  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;

  outline: none;
  transition: all 0.2s ease;
}

/* placeholder */
.guest-email-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
}

/* focus glow */
.guest-email-input:focus {
  border-color: #ffea00;
  box-shadow: 0 0 18px rgba(255, 234, 0, 0.45);
  background: rgba(0, 0, 0, 0.75);
}

/* logged-in (disabled) state */
.guest-email-input:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

/* Email error toast */
.toast.error{
  background: rgba(255, 40, 40, 0.12);
  border: 1px solid rgba(255, 40, 40, 0.45);
  color: #ff4d4d;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(255, 0, 0, 0.35);
}

/* =========================
   ACCOUNT ICON (matches cart)
========================= */

.account-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 13px;
}

/* Match cart glow behavior */
.account-icon:hover {
  box-shadow: var(--accent-glow);
}

/* =========================
   MODAL PRICE BOX (clean version)
========================= */

.price-pill {
  background: #0b0b0f;                     /* matches modal field background */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 600;
  padding: 0 14px;
  height: 40px;
  min-width: 90px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* soft static glow instead of focus highlight */
  box-shadow: 0 0 12px rgba(255,234,0,.08);
}

/* REMOVE focus behavior completely */
.amount-row:focus-within .price-pill {
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 16px rgba(255,234,0,.18);
}

/* =========================================
   BALANCE TABLE — RESTORE
   ========================================= */

.history-table.balance-history .history-head,
.history-table.balance-history .history-row {
  display: grid !important;
  grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr;
  align-items: center;
}

/* ✅ FORCE Action column to center (header + rows) */
.history-table.orders-history .orders-head > div:last-child{
  justify-content: center !important;
  text-align: center !important;
  padding-left: 0 !important;
}

.history-table.orders-history .orders-row > div:last-child{
  justify-content: center !important;
  padding-left: 0 !important;
}

/* ✅ Make the content inside that cell center too */
.history-table.orders-history .orders-row .orders-actions{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

/* badges behave nicely */
.history-table.orders-history .orders-row .action-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Space below Orders pager */
.account-card .pager {
    margin-bottom: 18px;
}

/* =========================
   NAV SERVICES DROPDOWN
========================= */

.nav-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

.services-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;

  width:28px;
  height:26px;

  background:transparent;

  border:1px solid rgba(255,234,0,.35);
  border-radius:7px;

  cursor:pointer;
  transition:.2s ease;
}

.services-btn:hover{
  box-shadow:0 0 10px rgba(255,234,0,.45);
}

.services-btn span{
  width:14px;
  height:1.6px;

  background:#FFEA00;

  border-radius:2px;   /* smooth curved tips */

  display:block;
}

/* dropdown box */
.services-menu{

  position:absolute;
  top:42px;
  left:0;

  z-index:9999;   /* THIS FIXES THE DROPDOWN LAYER */

  display:flex;
  flex-direction:column;
  gap:2px;

  padding:10px;

  background:#050505;

  border:1px solid rgba(255,234,0,.25);
  border-radius:12px;

  box-shadow:0 0 25px rgba(255,234,0,.2);

  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;

  transition:.2s ease;
}

/* open state */

.services-menu.open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* links */

.services-menu a{
  color:#fff;
  text-decoration:none;
  padding:8px 14px;
  font-weight:600;
  border-radius:8px;
  transition:.15s ease;
}

.services-menu a:hover{
  background:rgba(255,234,0,.12);
  color:#FFEA00;
}

/* =========================
   SERVICES NAV DROPDOWN
========================= */

.nav-dropdown{
  position:relative;
}

/* services text link */

.services-link{
  background:none;
  border:none;

  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;

  color:#ffffff;

  display:flex;
  align-items:center;
  gap:6px;

  cursor:pointer;
  padding:0;

  animation:servicesGlow 1.4s ease-in-out infinite;

  transition:color .2s ease, text-shadow .2s ease;
}

@keyframes servicesGlow{
  0%{
    text-shadow:0 0 4px rgba(255,255,255,.15);
  }
  50%{
    text-shadow:
      0 0 8px rgba(255,255,255,.55),
      0 0 16px rgba(255,255,255,.25);
  }
  100%{
    text-shadow:0 0 4px rgba(255,255,255,.15);
  }
}

.services-link:hover{
  animation:none;
  color:rgba(255,255,255,.65);
  text-shadow:none;
}

.arrow{
  font-size:11px;
  transition:.2s ease;
}

/* rotate arrow when open */

.nav-dropdown.open .arrow{
  transform:rotate(180deg);
}

/* dropdown menu */

.services-menu{

  position:absolute;
  top:38px;
  left:0;

  background:#050505;

  border:1px solid rgba(255,234,0,.25);
  border-radius:12px;

  padding:8px;

  min-width:200px;

  box-shadow:0 0 25px rgba(255,234,0,.18);

  display:flex;
  flex-direction:column;
  gap:2px;

  opacity:0;
  transform:translateY(-6px);
  pointer-events:none;

  transition:.2s ease;
}

.services-menu a{
  color:#fff;
  text-decoration:none;
  padding:9px 12px;
  border-radius:8px;
  font-weight:500;
  transition:.15s ease;
}

.services-menu a:hover{
  background:rgba(255,234,0,.12);
  color:#FFEA00;
}

/* open state */

.nav-dropdown.open .services-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.chart-card h3{
margin-bottom:20px;
font-weight:600;
color:#fff;
} 

.admin-data-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:40px;
}

.admin-table{
width:100%;
border-collapse:collapse;
}

.admin-table th{
text-align:left;
color:#ffea00;
padding-bottom:10px;
}

.admin-table td{
padding:8px 0;
border-bottom:1px solid rgba(255,255,255,0.05);
}

/* =========================
   ADMIN DASHBOARD LAYOUT FIX
========================= */

/* Keep dashboard centered and consistent width */
.admin-wrap{
max-width:1100px;
margin:0 auto;
}

/* =========================
   RANGE BUTTONS
========================= */

.admin-ranges{
display:grid;
grid-template-columns:repeat(3,auto);
justify-content:center;
gap:10px;
margin:25px 0 35px;
}

.admin-ranges a:nth-child(4),
.admin-ranges a:nth-child(5){
grid-column:span 1;
justify-self:center;
}

/* =========================
   STATS GRID (3 x 2)
========================= */

.admin-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin:25px 0 40px;
}

/* Equal height cards */
.stat-card{
min-height:105px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

/* =========================
   CHART GRID
========================= */

.admin-charts{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:10px;
}

/* chart card layout */
.chart-card{
background:#0a0a0a;
border:1px solid rgba(255,234,0,0.2);
border-radius:14px;
padding:25px;

display:grid;
grid-template-rows:auto auto auto;
gap:12px;

box-shadow:0 0 25px rgba(255,234,0,0.12);
}

/* chart title */
.chart-card h3{
margin:0;
font-weight:600;
color:#fff;
}

/* chart area */
.chart-card canvas{
width:100%;
height:220px !important;
display:block;
}

/* stat under chart */
.chart-stat{
text-align:center;
padding-top:8px;
border-top:1px solid rgba(255,234,0,0.15);
}

.chart-stat span{
display:block;
font-size:12px;
color:#999;
margin-bottom:3px;
}

.chart-stat strong{
font-size:20px;
font-weight:700;
color:#ffea00;
}

/* =========================
   TABLES GRID
========================= */

.admin-section{
margin-top:40px;
}

.admin-section .admin-table{
margin-top:10px;
}

/* Wrap tables side by side */
.admin-section:first-of-type,
.admin-section:nth-of-type(2){
width:100%;
}

/* =========================
   ADMIN BUTTON GRID
========================= */

.admin-actions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:40px;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:950px){

.admin-stats{
grid-template-columns:repeat(2,1fr);
}

.admin-charts{
grid-template-columns:1fr;
}

.admin-actions{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.admin-stats{
grid-template-columns:1fr;
}

.admin-actions{
grid-template-columns:1fr;
}

}

/* =========================
   ADMIN TABLE CARD HEIGHT FIX
========================= */

/* make the container taller */
.admin-section{
height:320px;
display:flex;
flex-direction:column;
}

/* keep the title fixed */
.admin-section-title{
margin-bottom:12px;
}

/* table area scrolls instead of overflowing */
.admin-table{
flex:1;
overflow-y:auto;
display:block;
}

/* keep header visible */
.admin-table thead{
display:table;
width:100%;
table-layout:fixed;
}

.admin-table tbody{
display:block;
max-height:220px;
overflow-y:auto;
}

/* rows align correctly */
.admin-table tr{
display:table;
width:100%;
table-layout:fixed;
}

/* clean scrollbar */
.admin-table tbody::-webkit-scrollbar{
width:6px;
}

.admin-table tbody::-webkit-scrollbar-thumb{
background:rgba(255,234,0,0.35);
border-radius:10px;
}

/* =========================
   RANGE BUTTONS (FIXED)
========================= */

.admin-ranges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  max-width:320px;
  margin:25px auto 35px;
}

.admin-ranges a{
  min-width:90px;
  text-align:center;
}

/* =========================
   STATS GRID (3 + 2 CENTERED)
========================= */

.admin-stats{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:22px;
margin:25px 0 40px;
}

/* normal card styling */
.stat-card{
min-height:105px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:100%;
max-width:340px;
}

/* top row (3 cards) */
.admin-stats .stat-card:nth-child(1){ grid-column:1 / span 2; }
.admin-stats .stat-card:nth-child(2){ grid-column:3 / span 2; }
.admin-stats .stat-card:nth-child(3){ grid-column:5 / span 2; }

/* bottom row centered */
.admin-stats .stat-card:nth-child(4){ grid-column:2 / span 2; }
.admin-stats .stat-card:nth-child(5){ grid-column:4 / span 2; }

.chart-stat{
margin-top:12px;
text-align:center;
}

.chart-stat span{
display:block;
font-size:12px;
color:#9a9a9a;
margin-bottom:3px;
}

.chart-stat strong{
font-size:22px;
color:#ffea00;
font-weight:700;
}

.admin-products-row{
  position:relative;
  z-index:1;
}

.admin-products-row .actions{
  position:relative;
  z-index:5;
}

/* =========================
ORDER ROW CARD STYLE
========================= */

.admin-order-row{
display:grid;
align-items:center;
padding:14px 18px;
border-radius:14px;
border:1px solid rgba(255,234,0,0.18);
background:#0b0b0b;
margin-bottom:10px;
transition:all .18s ease;
box-shadow:0 0 10px rgba(0,0,0,.7);
}

/* hover glow */
.admin-order-row:hover{
transform:translateY(-1px);
border-color:#ffea00;
box-shadow:0 0 14px rgba(255,234,0,.35);
}

/* header spacing */
.history-head{
padding:12px 18px;
margin-bottom:6px;
opacity:.85;
}

/* =========================
ADMIN REVIEW ROW STYLE
========================= */

.admin-review-row{
display:grid;
grid-template-columns:2fr 1fr 4fr 2fr auto;
align-items:center;
gap:18px;
padding:14px 18px;
margin-bottom:10px;

background:#0b0b0b;
border:1px solid rgba(255,234,0,0.18);
border-radius:14px;

box-shadow:0 0 10px rgba(0,0,0,.7);
transition:all .18s ease;
}

.admin-review-row:hover{
transform:translateY(-1px);
border-color:#ffea00;
box-shadow:0 0 14px rgba(255,234,0,.35);
}

.review-email{
font-weight:600;
}

.review-rating{
color:#ffea00;
letter-spacing:2px;
}

.review-message{
opacity:.9;
}

.review-delete{
justify-self:end;
}

.modal-description {
  font-size: 14px;
  color: #ddd;
  line-height: 1.5;
}

.modal-description p {
  margin: 0 0 10px 0;
}

.modal-description ul {
  margin: 0 0 10px 16px;
  padding: 0;
}

.modal-description li {
  margin: 4px 0;
}

.modal-description a {
  color: #4da3ff;
  text-decoration: none;
  font-weight: 500;
}

.modal-description a:hover {
  text-decoration: underline;
}

.modal-description p {
  position: relative;
  padding-left: 14px;
}

.modal-description p::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #fff;
}

.product-edit-card{
  max-width:900px;
  margin:0 auto;
  padding:28px;
}

.form-group{
  margin-bottom:18px;
}

.full-input{
  width:100%;
}

.description-box{
  min-height:160px;
  resize:vertical;
  font-family:monospace;
}

.form-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:18px;
}

.thumb-preview{
  margin-top:12px;
}

.thumb-preview img{
  width:260px;
  border-radius:12px;
  border:1px solid #333;
}

.save-btn{
  margin-top:20px;
  width:100%;
}

.region-picker{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.product-edit-card .modal-label{
  display:block;
  text-align:center;
  margin-bottom:10px;
}

.toast{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#111;
  border:1px solid #ffea00;
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  font-size:14px;
  z-index:9999;

  opacity:0;
  transform:translateY(20px);
  transition:all .35s ease;
}

.toast.show{
  opacity:1;
  transform:translateY(0);
}

.toast.hidden{
  display:none;
}

/* CREATE PRODUCT FORM */

.clean-form{
  max-width:1000px;
  margin:0 auto;
  padding:30px;
}

/* grid layout */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  margin-bottom:20px;
}

/* columns */
.form-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* labels */
.form-label{
  display:block;
  font-size:14px;
  margin-bottom:6px;
  color:#ddd;
}

/* textarea */
.textarea{
  min-height:140px;
  resize:vertical;
  font-family:monospace;
}

/* inline quantity inputs */
.inline-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

/* regions + categories alignment */
.region-picker{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

/* section titles */
.clean-form .modal-label{
  display:block;
  text-align:center;
  margin-top:20px;
}

/* action button */
.form-actions{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

.form-actions .btn{
  min-width:180px;
}

.ci-qty-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}

.qty-btn{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,234,0,0.35);
  background:rgba(255,234,0,0.08);
  color:#ffea00;
  font-weight:900;
  cursor:pointer;
  transition:0.2s;
}

.qty-btn:hover{
  background:rgba(255,234,0,0.25);
  box-shadow:0 0 10px rgba(255,234,0,0.4);
}

.qty-number{
  min-width:18px;
  text-align:center;
  font-weight:800;
  color:#fff;
}

/* =========================
   CHECKOUT PRODUCT ROW FIX
   (restore original layout)
========================= */

.checkout-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LEFT SIDE */
.checkout-item .ci-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

/* TITLE LEFT */
.checkout-item .ci-name{
  color:#ffea00;
  font-weight:900;
  text-align:left;
}

/* QTY UNDER TITLE */
.checkout-item .ci-qty{
  display:flex;
  align-items:center;
  gap:6px;
}

/* NUMBER */
.checkout-item .qty-number{
  min-width:14px;
  text-align:center;
  font-weight:800;
  color:#fff;
}

/* BUTTONS */
.checkout-item .qty-btn{
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid rgba(255,234,0,.35);
  background:rgba(255,234,0,.08);
  color:#ffea00;
  font-weight:900;
  cursor:pointer;
  transition:.15s;
}

.checkout-item .qty-btn:hover{
  background:#ffea00;
  color:#000;
}

/* RIGHT SIDE */
.checkout-item .ci-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* CUSTOM VARIANT DROPDOWN */

.custom-variant-select{
  position:relative;
  width:100%;
}

/* SELECTED ROW */

.variant-selected{
  padding:10px 12px 10px 6px;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:0;

  width:100%;
}

/* DROPDOWN LIST */

.variant-dropdown{
  position:absolute;
  top:100%;
  left:0;
  width:100%;

  background:#0c0c0c;
  border:1px solid #333;
  border-radius:10px;

  max-height:180px; /* 5 rows */
  overflow-y:auto;

  z-index:50;
}

.variant-dropdown.hidden{
  display:none;
}

/* DROPDOWN OPTION */

.variant-option{
  padding:10px 12px;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:10px;
}

.variant-option:hover{
  background:#1a1a1a;
}

/* TITLE */

.variant-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* PRICE */

.variant-price{
  flex-shrink:0;
  margin-left:auto;
}

.custom-variant-select{
  position:relative;
  width:100%;
  padding:0 !important;
}

.variant-selected{
  padding:10px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0;
  width:100%;
}

/* =========================
   UNIVERSITY UNLOCK CARD
========================= */

.university-unlock{
  max-width:500px;
  margin:40px auto;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.university-unlock p{
  max-width:340px;
  margin:10px auto 20px auto;
}

.university-unlock form{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.university-unlock .input{
  width:260px;
  text-align:center;
}

.university-unlock .btn{
  width:100%;
  max-width:340px;
}

/* =========================
   UNIVERSITY PAGE
========================= */

.university-page{
max-width:900px;
margin:0 auto;
padding:40px 20px;
text-align:center;
}


/* =========================
   UNIVERSITY HEADER
========================= */

.university-header{
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:6px;
}

/* LOGO */

.university-logo{
width:120px;
margin-bottom:6px;
}


/* =========================
   ACCESS ROW
========================= */

.university-access-row{
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
margin-bottom:12px;
}

/* REDEEM BUTTON */

.redeem-btn{
position:absolute;
right:0;
top:0;
padding:10px 16px;
}

/* ACCESS GRANTED */

.access-granted{
position:absolute;
right:0;
top:0;
font-weight:600;
color:#00ffa2;
}


/* =========================
   SEARCH BAR
========================= */

.university-search-wrap{
display:flex;
flex-direction:column;
align-items:center;
margin-top:6px;
margin-bottom:18px;
}

.university-search{
display:block;
width:100%;
max-width:420px;
margin:0 auto;

padding:12px 16px;

border-radius:8px;

border:1px solid #333;
background:#0a0a0a;

color:#fff;
font-size:15px;

transition:border-color .2s ease, box-shadow .2s ease;
}

.university-search:focus{
outline:none;
border-color:#ffea00;
box-shadow:0 0 10px rgba(255,234,0,.25);
}

.university-divider{
width:100%;
max-width:860px;
height:1px;
background:rgba(255,255,255,.08);
margin:22px auto 0 auto;
}


/* =========================
   LESSON BLOCKS
========================= */

.university-lessons{
margin-top:10px;
}

.lesson-block{
background:#0a0a0a;
border:1px solid #222;
border-radius:10px;
margin-bottom:12px;
overflow:hidden;
}

.lesson-content{
height:0;
overflow:hidden;
transition:height .3s ease;
}

.lesson-content-inner{
padding:0 18px 18px 18px;
}

.lesson-text{
text-align:left;
line-height:1.6;
}

.lesson-locked{
text-align:center;
padding-top:4px;
}

.locked-text{
font-weight:600;
margin-bottom:10px;
color:#ffea00;
}

/* =========================
   UNIVERSITY ADMIN CREATE
========================= */

.university-create{
max-width:800px;
margin:30px auto;
text-align:left;
}

.university-create-form{
margin-top:20px;
}

.lesson-grid{
display:grid;
grid-template-columns: 1fr 1.6fr;
gap:16px;
align-items:start;
}

.lesson-grid textarea{
height:160px;
resize:vertical;
}

.university-create-btn{
width:100%;
margin-top:16px;
}

.university-divider{
width:100%;
height:1px;
background:rgba(255,255,255,.08);
margin:22px auto 28px auto;
max-width:700px;
}

.lesson-header{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 20px;
cursor:pointer;
}

.lesson-left{
display:flex;
align-items:flex-start;
gap:12px;
}

.lesson-number{
color:#ffea00;
font-weight:700;
font-size:14px;
min-width:26px;
}

.lesson-text-wrap{
display:flex;
flex-direction:column;
}

.lesson-title{
font-size:15px;
font-weight:600;
color:#fff;
}

.lesson-date{
font-size:12px;
color:#777;
margin-top:2px;
}

.lesson-toggle{
font-size:20px;
opacity:.7;
}

/* =========================
   UNIVERSITY ACCESS BAR
========================= */

.university-header{
display:flex;
flex-direction:column;
align-items:center;
}

.university-logo{
width:120px;
margin:10px auto 18px auto;
display:block;
}

.university-access-row{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
margin-bottom:4px;
}

/* ACCESS STATUS PILL */

.access-pill{
padding:8px 14px;
border-radius:999px;
font-size:13px;
font-weight:600;
letter-spacing:.3px;
}

/* ENABLED */

.access-enabled{
background:rgba(0,255,140,.15);
border:1px solid #00ff9c;
color:#00ff9c;
box-shadow:0 0 8px rgba(0,255,140,.4);
}

/* DISABLED */

.access-disabled{
background:rgba(255,0,80,.12);
border:1px solid #ff004c;
color:#ff004c;
box-shadow:0 0 8px rgba(255,0,80,.35);
}

/* small redeem link */

.redeem-link{
display:inline-block;

padding:4px 10px;

font-size:12px;
font-weight:600;

color:#00ff9c;

border:1px solid #00ff9c;
border-radius:999px;

background:rgba(0,255,156,.04);

box-shadow:0 0 5px rgba(0,255,156,.25);

text-decoration:none;

transition:.2s ease;
}

.redeem-link:hover{
background:rgba(0,255,156,.1);
box-shadow:0 0 8px rgba(0,255,156,.5);
color:#7dffc8;
}

/* =========================
   RESTRICTED CONTENT
========================= */

.lesson-locked{
text-align:center;
padding:12px 0;
}

.restricted-text{
font-size:15px;
font-weight:600;
color:#ff004c;
text-shadow:0 0 8px rgba(255,0,80,.6);
margin-bottom:8px;
}

.restricted-x{
font-size:20px;
font-weight:700;
color:#ff004c;
text-shadow:0 0 8px rgba(255,0,80,.7);
opacity:.9;
}


/* =========================
   UNIVERSITY HEADER
========================= */

.university-header{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:10px;
}

.university-logo{
width:120px;
margin-bottom:10px;
}


/* =========================
   TOP RIGHT BUTTON GROUP
========================= */

.university-top-actions{
position:absolute;
top:0;
right:0;

display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}

/* first row */

.access-row{
display:flex;
gap:10px;
}

/* second row */

.admin-row{
display:flex;
justify-content:flex-end;
width:100%;
}


/* =========================
   ACCESS STATUS
========================= */

.access-pill{
padding:6px 14px;
font-size:12px;
font-weight:600;
border-radius:999px;
white-space:nowrap;
}

.access-enabled{
color:#00ff9c;
border:1px solid #00ff9c;
box-shadow:0 0 10px rgba(0,255,156,.5);
}

.access-disabled{
color:#ff004c;
border:1px solid #ff004c;
box-shadow:0 0 10px rgba(255,0,76,.5);
}


/* =========================
   ACCESS BUTTON
========================= */

.redeem-btn-small{
padding:6px 14px;
font-size:12px;
font-weight:600;
color:#00ff9c;
border:1px solid #00ff9c;
border-radius:999px;
text-decoration:none;
box-shadow:0 0 10px rgba(0,255,156,.4);
transition:.2s;
}

.redeem-btn-small:hover{
box-shadow:0 0 16px rgba(0,255,156,.8);
}


/* =========================
   ADMIN BUTTON
========================= */

.university-admin-btn{
padding:6px 14px;
font-size:12px;
font-weight:600;
color:#FFEA00;
border:1px solid rgba(255,234,0,.4);
border-radius:999px;
text-decoration:none;
box-shadow:0 0 8px rgba(255,234,0,.3);
transition:.2s ease;
}

.university-admin-btn:hover{
box-shadow:0 0 12px rgba(255,234,0,.6);
background:rgba(255,234,0,.08);
}

/* =========================
   UNIVERSITY DESCRIPTION
========================= */

.university-description{
font-size:12px;
color:#c9a700;

margin-top:2px;
margin-bottom:6px;

text-align:center;
line-height:1.4;

opacity:.85;
}

/* =========================
   UNIVERSITY FILTERS
========================= */

.university-filters{

display:flex;
align-items:center;
gap:8px;

margin-top:10px;
margin-bottom:16px;

flex-wrap:wrap;

}

/* =========================
   CATEGORY DROPDOWN
========================= */

.category-dropdown{
position:relative;
display:inline-block;
}

.category-selected{
display:flex;
align-items:center;
justify-content:center;

padding:4px 12px;
min-height:28px;

font-size:11px;
font-weight:600;

color:#c9a700;
background:#0a0a0a;

border:1px solid rgba(255,234,0,.35);
border-radius:999px;

cursor:pointer;
user-select:none;

transition:.2s ease;
}

.category-selected:hover{
background:rgba(255,234,0,.08);
box-shadow:0 0 8px rgba(255,234,0,.2);
}


/* DROPDOWN MENU */

.category-menu{
position:absolute;
top:calc(100% + 6px);
left:0;

display:flex;
flex-direction:column;

width:180px;
padding:6px 0;

background:#0c0c0c;
border:1px solid rgba(255,234,0,.25);
border-radius:10px;

box-shadow:0 0 12px rgba(255,234,0,.15);

max-height:200px;
overflow-y:auto;
overflow-x:hidden;

opacity:0;
transform:translateY(-6px);
pointer-events:none;

transition:.2s ease;
z-index:1000;
}

/* OPEN STATE */

.category-dropdown.open .category-menu{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* MENU ITEMS */

.category-menu a{
display:block;
padding:8px 12px;

font-size:12px;
font-weight:500;
color:#c9a700;
text-decoration:none;
white-space:nowrap;

transition:.15s ease;
}

.category-menu a:hover{
background:rgba(255,234,0,.1);
}


/* SCROLLBAR */

.category-menu::-webkit-scrollbar{
width:6px;
}

.category-menu::-webkit-scrollbar-track{
background:#0b0b0b;
border-radius:10px;
}

.category-menu::-webkit-scrollbar-thumb{
background:rgba(255,234,0,.4);
border-radius:10px;
}

.category-menu::-webkit-scrollbar-thumb:hover{
background:rgba(255,234,0,.7);
}

/* FILTER BUTTONS */

.filter-pill{

padding:4px 10px;

font-size:11px;
font-weight:600;

border-radius:999px;

color:#c9a700;

border:1px solid rgba(255,234,0,.35);

background:rgba(255,234,0,.04);

text-decoration:none;

transition:.2s ease;

}

.filter-pill:hover{
background:rgba(255,234,0,.15);
box-shadow:0 0 8px rgba(255,234,0,.35);
}

/* CATEGORY DROPDOWN */

.category-dropdown{
position:relative;
}

.category-selected{

padding:4px 10px;

font-size:11px;
font-weight:600;

border-radius:999px;

color:#c9a700;

border:1px solid rgba(255,234,0,.35);

background:#0a0a0a;

cursor:pointer;

}

/* =========================
   CATEGORY DROPDOWN MENU
========================= */

.category-menu{

position:absolute;
top:100%;
left:0;

background:#0c0c0c;

border:1px solid rgba(255,234,0,.25);
border-radius:10px;

width:180px;

padding:6px 0;

margin-top:6px;

box-shadow:0 0 12px rgba(255,234,0,.15);

/* THIS PART ENABLES SCROLL */

max-height:200px;   /* ~5 items */
overflow-y:auto;

z-index:100;
}

/* visible state */

.category-dropdown.open .category-menu{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

/* dropdown items */

.category-menu a{

padding:8px 12px;

font-size:12px;
color:#c9a700;

text-decoration:none;

transition:.15s ease;

}

.category-menu a:hover{
background:rgba(255,234,0,.1);
}

.admin-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,.7);
z-index:999;
}

.admin-modal.hidden{
display:none;
}

/* =========================
   ADMIN UNIVERSITY LAYOUT
========================= */

.admin-wrap{
max-width:1100px;
margin:0 auto;
padding:30px 20px;
}

.account-card{
background:#0a0a0a;
border:1px solid rgba(255,234,0,.35);
border-radius:14px;
padding:24px;
margin-bottom:30px;
box-shadow:0 0 18px rgba(255,234,0,.12);
}

/* headings */

.card-title{
font-size:20px;
margin-bottom:18px;
color:#ffea00;
}

/* grid for inputs */

.lesson-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:16px;
}

.lesson-grid textarea{
grid-column:1 / -1;
min-height:120px;
}

/* upload */

.lesson-upload{
margin-bottom:18px;
}

/* categories list */

.category-list{
margin-top:14px;
display:flex;
flex-wrap:wrap;
gap:10px;
}

.category-item{
display:flex;
align-items:center;
gap:10px;
background:#0f0f0f;
border:1px solid #222;
padding:6px 10px;
border-radius:8px;
}

/* =========================
   ADMIN TABLE
========================= */

.admin-products-table{
background:#0a0a0a;
border:1px solid #222;
border-radius:12px;
overflow:hidden;
}

.admin-products-head{
display:grid;
grid-template-columns:2fr 1fr 1fr;
padding:14px 18px;
background:#111;
font-weight:600;
color:#aaa;
}

.admin-products-row{
display:grid;
grid-template-columns:2fr 1fr 1fr;
align-items:center;
padding:16px 18px;
border-top:1px solid #161616;
}

.admin-products-row:hover{
background:#0e0e0e;
}

.cell{
display:flex;
align-items:center;
gap:10px;
}

/* actions */

.cell a{
margin-right:6px;
}

/* pagination */

.admin-pagination{
display:flex;
justify-content:center;
gap:10px;
margin-top:20px;
}

.admin-pagination a{
padding:6px 12px;
border:1px solid #ffea00;
border-radius:999px;
color:#ffea00;
text-decoration:none;
}

.admin-pagination a.active{
background:#ffea00;
color:#000;
}

/* =========================
   ADMIN MODAL OVERLAY
========================= */

.admin-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.75);

z-index:9999;
}

/* hidden state */

.admin-modal.hidden{
display:none;
}


/* =========================
   MODAL BOX
========================= */

.admin-modal-box{

width:500px;
max-width:90%;

background:#0b0b0b;

border:1px solid rgba(255,234,0,.25);
border-radius:14px;

padding:26px;

box-shadow:
0 0 40px rgba(255,234,0,.15),
0 0 80px rgba(255,234,0,.05);
}


/* title */

.admin-modal-box h3{
text-align:center;
margin-bottom:20px;
color:#FFEA00;
}


/* modal inputs spacing */

.admin-modal-box .input{
margin-bottom:14px;
}


/* buttons */

.modal-actions{
display:flex;
justify-content:center;
gap:12px;
margin-top:10px;
}

/* =========================
   UNIVERSITY VIDEO PLAYER
========================= */

.lesson-media{
margin-top:16px;
}

.lesson-video{
width:100%;
max-width:760px;

border-radius:12px;

border:1px solid rgba(255,234,0,.25);

box-shadow:0 0 16px rgba(255,234,0,.15);
}

.lesson-file{
display:inline-block;

margin-top:10px;

padding:6px 14px;

border:1px solid rgba(255,234,0,.4);
border-radius:999px;

color:#FFEA00;

text-decoration:none;
}

/* =========================
   LESSON TITLE + DATE
========================= */

.lesson-left{
display:flex;
align-items:flex-start;
gap:10px;
}

.lesson-text-wrap{
display:flex;
flex-direction:column;
align-items:flex-start;
line-height:1.2;
}

.lesson-title{
font-weight:600;
font-size:15px;
}

.lesson-date{
font-size:12px;
opacity:.6;
margin-top:2px;
}

/* =========================
   LESSON RIGHT SIDE
========================= */

.lesson-right{
display:flex;
align-items:center;
gap:10px;
}


/* CATEGORY PILL */

.lesson-category-pill{

padding:4px 10px;

font-size:11px;
font-weight:600;

color:#FFEA00;

border:1px solid rgba(255,234,0,.35);
border-radius:999px;

background:rgba(255,234,0,.05);

box-shadow:0 0 6px rgba(255,234,0,.25);

white-space:nowrap;
}

/* =========================
   UNIVERSITY PAGINATION
========================= */

.university-pagination{
display:flex;
justify-content:center;
gap:8px;
margin-top:30px;
flex-wrap:wrap;
}

.page-btn{

padding:6px 12px;

font-size:12px;
font-weight:600;

color:#FFEA00;

border:1px solid rgba(255,234,0,.4);
border-radius:999px;

background:#0a0a0a;

text-decoration:none;

transition:.2s ease;

}

.page-btn:hover{
box-shadow:0 0 10px rgba(255,234,0,.45);
}

.page-btn.active{
background:#FFEA00;
color:#000;
}

/* =========================
   ADMIN LESSON TABLE
========================= */

.admin-products-table{
width:100%;
margin-top:20px;
border-radius:10px;
overflow:hidden;
border:1px solid #222;
background:#0b0b0b;
}

/* HEADER */

.admin-products-head{
display:grid;
grid-template-columns: 1fr 160px 160px;

padding:12px 16px;

font-size:12px;
font-weight:600;

color:#FFEA00;

border-bottom:1px solid #222;
}

/* ROWS */

.admin-products-row{
display:grid;
grid-template-columns: 1fr 160px 160px;

align-items:center;

padding:12px 16px;

border-bottom:1px solid #1a1a1a;

transition:.15s ease;
}

.admin-products-row:hover{
background:#0f0f0f;
}

/* CELLS */

.admin-products-row .cell{
display:flex;
align-items:center;
}

/* TITLE */

.admin-products-row strong{
font-weight:600;
font-size:13px;
color:#fff;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

/* ACTIONS */

.admin-products-row .cell:last-child{
gap:6px;
justify-content:flex-end;
}

/* =========================
   ADMIN ACTION BUTTONS
========================= */

.btn-xs{
padding:4px 10px;
font-size:11px;
border-radius:6px;
}

.btn-outline{
border:1px solid rgba(255,234,0,.35);
color:#FFEA00;
background:transparent;
}

.btn-outline:hover{
background:rgba(255,234,0,.1);
}

.btn-danger{
border:1px solid rgba(255,0,70,.4);
color:#ff0046;
background:transparent;
}

.btn-danger:hover{
background:rgba(255,0,70,.1);
}

/* =========================
   ADMIN PAGINATION
========================= */

.admin-pagination{
display:flex;
justify-content:center;
gap:6px;
margin-top:18px;
}

.admin-pagination a{

padding:5px 10px;

font-size:11px;
font-weight:600;

border-radius:6px;

color:#FFEA00;

border:1px solid rgba(255,234,0,.35);

text-decoration:none;

background:#0a0a0a;

transition:.15s ease;
}

.admin-pagination a:hover{
background:rgba(255,234,0,.08);
}

.admin-pagination a.active{
background:#FFEA00;
color:#000;
}

/* =========================
   PINNED LESSONS
========================= */

.university-pinned{
margin-bottom:30px;
}

.pinned-title{
font-size:13px;
font-weight:600;
color:#FFEA00;
margin-bottom:12px;
}

/* 3 column grid */

.pinned-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

/* card */

.pinned-card{

background:#0b0b0b;
border:1px solid rgba(255,234,0,.35);

border-radius:10px;

padding:14px;

display:flex;
flex-direction:column;
gap:6px;

transition:.15s ease;

}

.pinned-card:hover{
border-color:#FFEA00;
box-shadow:0 0 12px rgba(255,234,0,.2);
}

/* title */

.pinned-card-title{
font-size:13px;
font-weight:600;
color:#fff;
}

/* date */

.pinned-card-date{
font-size:11px;
opacity:.6;
}

/* category */

.pinned-card-category{
font-size:11px;
color:#FFEA00;
}

/* open button */

.pinned-card-open{

margin-top:6px;

font-size:11px;
font-weight:600;

color:#FFEA00;

text-decoration:none;

border:1px solid rgba(255,234,0,.35);
border-radius:6px;

padding:4px 8px;

width:fit-content;

}

/* =========================
   PINNED CARDS
========================= */

.pinned-card{

position:relative;

background:#0b0b0b;
border:1px solid rgba(255,234,0,.35);

border-radius:12px;

padding:20px;

display:flex;
flex-direction:column;
align-items:center;

gap:8px;

transition:.2s ease;

}

/* hover glow */

.pinned-card:hover{
border-color:#FFEA00;
box-shadow:0 0 20px rgba(255,234,0,.25);
}


/* PIN ICON */

.pinned-pin{

position:absolute;
top:10px;
right:10px;

font-size:14px;

color:#FFEA00;

opacity:.8;

}


/* TITLE */

.pinned-card-title{

font-size:14px;
font-weight:600;

color:#FFEA00;

text-align:center;

/* glow */

text-shadow:
0 0 4px rgba(255,234,0,.6),
0 0 10px rgba(255,234,0,.4);

animation:pinGlow 2.5s ease-in-out infinite;

}


/* subtle sparkle glow */

@keyframes pinGlow{

0%{
text-shadow:
0 0 4px rgba(255,234,0,.5),
0 0 8px rgba(255,234,0,.3);
}

50%{
text-shadow:
0 0 6px rgba(255,234,0,.9),
0 0 16px rgba(255,234,0,.6);
}

100%{
text-shadow:
0 0 4px rgba(255,234,0,.5),
0 0 8px rgba(255,234,0,.3);
}

}


/* DATE */

.pinned-card-date{
font-size:11px;
opacity:.7;
}


/* BUTTON */

.pinned-card-open{

margin-top:10px;

display:inline-block;

font-size:11px;
font-weight:600;

color:#FFEA00;

text-decoration:none;

border:1px solid rgba(255,234,0,.35);
border-radius:6px;

padding:6px 12px;

transition:.15s ease;

}

.pinned-card-open:hover{
background:rgba(255,234,0,.08);
border-color:#FFEA00;
}

/* PINNED CARD CONTENT */

.pinned-card-content{
height:0;
overflow:hidden;
transition:height .35s ease;
width:100%;
}

.pinned-card-content-inner{
padding-top:14px;
}

.pinned-card.open .pinned-card-open{
background:rgba(255,234,0,.08);
}

/* PINNED OPEN BUTTON */

.pinned-card-open{

background:transparent;
color:#FFEA00;

border:1px solid rgba(255,234,0,.35);
border-radius:6px;

padding:6px 12px;

font-size:11px;
font-weight:600;

cursor:pointer;

transition:.15s ease;

}

.pinned-card-open:hover{

background:rgba(255,234,0,.08);
border-color:#FFEA00;

}

/* PINNED CONTENT TEXT */

.pinned-card-content .lesson-text{

font-size:12px;
line-height:1.4;

opacity:.9;

}

/* LINKS INSIDE PINNED CONTENT */

.pinned-card-content a{

color:#4da3ff;
text-decoration:underline;

}

.pinned-card-content a:hover{

color:#7cbcff;

}

/* ADMIN LESSON TABLE LAYOUT */

.admin-products-head,
.admin-products-row{

display:grid;

/* Title | Date | Actions */

grid-template-columns: 1fr 170px 200px;

align-items:center;

}


/* DATE COLUMN */

.admin-products-row .cell:nth-child(2){

font-size:12px;
line-height:1.2;

white-space:normal;
word-break:break-word;

opacity:.9;

}


/* ACTIONS COLUMN */

.admin-products-row .cell:nth-child(3){

display:flex;
gap:8px;
justify-content:flex-end;

flex-wrap:nowrap;

}

/* LINKS INSIDE LESSON CONTENT */

.lesson-text a,
.pinned-card-content a{

color:#4da3ff;
text-decoration:underline;

word-break:break-word;

}

.lesson-text a:hover,
.pinned-card-content a:hover{

color:#7cbcff;

}

.pinned-card-content{
height:0;
overflow:hidden;
transition:height .35s ease;
}

.university-category-links{
margin-top:30px;
display:flex;
flex-direction:column;
gap:14px;
}

.category-link-block{
display:flex;
align-items:flex-start;
gap:16px;

background:#0b0b0b;
border:1px solid rgba(255,234,0,.35);

padding:16px 18px;
border-radius:10px;
}

.category-link-icon{
font-size:22px;
width:28px;
margin-top:2px;
}

.category-link-text{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
}

.category-link-title{
color:#FFEA00;
font-weight:600;
font-size:16px;
text-decoration:none;
cursor:pointer;

position:relative;
display:inline-block;

text-shadow:
0 0 3px #FFEA00,
0 0 6px #FFEA00,
0 0 12px rgba(255,234,0,.6);

animation:neonSparkle 2.5s infinite ease-in-out;
}

.category-link-title:hover{
text-decoration:underline;
}

/* NATURAL STAR TWINKLES */

.category-link-title::before,
.category-link-title::after{
content:"✦";
position:absolute;
color:#ffffff;
opacity:0;
pointer-events:none;
}

/* star 1 */

.category-link-title::before{
top:-7px;
left:6px;
font-size:7px;
animation:twinkleStar1 4.6s infinite ease-in-out;
}

/* star 2 */

.category-link-title::after{
bottom:-6px;
right:4px;
font-size:6px;
animation:twinkleStar2 5.4s infinite ease-in-out;
}

.category-link-desc{
color:#bfbfbf;
font-size:13px;
margin-top:3px;
line-height:1.4;
}

@keyframes neonSparkle{

0%{
text-shadow:
0 0 2px #FFEA00,
0 0 5px #FFEA00,
0 0 10px rgba(255,234,0,.6);
}

50%{
text-shadow:
0 0 6px #FFEA00,
0 0 12px #FFEA00,
0 0 20px rgba(255,234,0,.9);
}

100%{
text-shadow:
0 0 2px #FFEA00,
0 0 5px #FFEA00,
0 0 10px rgba(255,234,0,.6);
}

}

/* random feeling twinkles */

@keyframes twinkleStar1{

0%,100%{
opacity:0;
transform:scale(.4) rotate(0deg);
}

30%{
opacity:.9;
transform:scale(1.1) rotate(15deg);
}

60%{
opacity:0;
transform:scale(.5);
}

}

@keyframes twinkleStar2{

0%,100%{
opacity:0;
transform:scale(.5) rotate(0deg);
}

40%{
opacity:.8;
transform:scale(1.2) rotate(-10deg);
}

70%{
opacity:0;
transform:scale(.4);
}

}

#editBlockDescription{
min-height:90px;
resize:vertical;
}
/* UNIVERSITY KEYS TABLE FIX */

.university-keys-head,
.university-keys-row{
  display:grid;
  grid-template-columns: 2.5fr 1fr 1fr 1.5fr 1.5fr 1.2fr;
  align-items:center;
  gap:10px;
}

.university-keys-head span{
  font-size:13px;
  color:#FFEA00;
  opacity:.9;
}

.university-keys-row{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,234,0,.06);
}

.university-keys-row .cell{
  font-size:12.5px;
}

.mono{
  font-family:monospace;
  letter-spacing:.5px;
}

.university-keys-head span{
  white-space: nowrap;
}

.schedule-badge{
  background:#1a1a1a;
  border:1px solid #333;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  color:#FFEA00;
  font-weight:600;
  display:inline-block;
}

.schedule-badge.on{
  background:#003300;
  border:1px solid #00d100;
  color:#00ff66;
}

/* =========================
   UNIVERSITY ADMIN TABLE ONLY
========================= */

.university-admin .admin-products-head,
.university-admin .admin-products-row{
  display:grid;
  grid-template-columns: minmax(260px, 2.4fr) minmax(160px, 1.1fr) minmax(220px, 1.2fr);
  align-items:center;
  gap:18px;
}

.university-admin .admin-products-head{
  padding:14px 18px;
  border:1px solid #1f1f1f;
  border-radius:12px;
  margin-bottom:10px;
  background:#0c0c0c;
}

.university-admin .admin-products-head span{
  font-size:14px;
  font-weight:700;
  color:#FFEA00;
  white-space:nowrap;
}

.university-admin .admin-products-row{
  padding:14px 18px;
  border:1px solid #1f1f1f;
  border-radius:12px;
  margin-bottom:10px;
  background:#0c0c0c;
  transition:0.2s;
}

.university-admin .admin-products-row:hover{
  border-color:#FFEA00;
  box-shadow:0 0 10px rgba(255,234,0,0.15);
}

.university-admin .cell{
  display:flex;
  align-items:center;
  min-width:0;
}

/* TITLE */
.university-admin .title-cell{
  justify-content:flex-start;
  align-items:flex-start;
}

.university-admin .title-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  min-width:0;
}

.university-admin .title-wrap strong{
  font-size:14px;
  font-weight:600;
  color:#fff;
  line-height:1.3;
  word-break:break-word;
}

/* STATUS UNDER TITLE */
.university-admin .schedule-badge{
  display:inline-block;
  width:fit-content;
  font-size:11px;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  background:#111;
  border:1px solid #333;
  color:#FFEA00;
}

.university-admin .status-pill{
  width:fit-content;
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
}

/* CREATED */
.university-admin .created-cell{
  justify-content:flex-start;
  font-size:13px;
  opacity:0.75;
  white-space:nowrap;
}

/* ACTIONS */
.university-admin .actions-cell{
  justify-content:flex-end;
}

.university-admin .actions-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

.university-admin .actions-wrap .btn{
  padding:6px 10px;
  font-size:12px;
}

/* =========================
   ADMIN PRODUCTS TABLE FIX (HORIZONTAL ACTIONS)
========================= */

/* GRID */
.admin-products-head,
.admin-products-row{
  display:grid !important;
  grid-template-columns: 2.5fr 1fr 1fr 1fr 1fr 2fr !important;
  align-items:center !important;
  gap:12px !important;
}

/* CELLS */
.admin-products-row .cell,
.admin-products-head span{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
}

/* ACTIONS COLUMN */
.cell.actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;   /* 🔥 FORCE NO WRAP */
}

/* BUTTON GROUP */
.actions-left{
  display:flex !important;
  gap:6px !important;
  flex-wrap:nowrap !important;   /* 🔥 FORCE NO WRAP */
}

/* BUTTONS */
.cell.actions .btn{
  white-space:nowrap !important;
  padding:6px 10px !important;
  font-size:12px !important;
}

/* DELETE BUTTON */
.cell.actions form{
  margin:0 !important;
}

/* =========================
   CENTER TABLE COLUMNS
========================= */

/* CENTER HEADERS */
.admin-products-head span:nth-child(3),
.admin-products-head span:nth-child(4){
  justify-content:center !important;
  text-align:center !important;
}

/* CENTER VALUES */
.cell.variants,
.cell.stock{
  justify-content:center !important;
  text-align:center !important;
}

/* =========================
   VARIANT DROPDOWN ARROW
========================= */

.variant-selected{
  position:relative;
  padding-right:30px; /* space for arrow */
}

/* arrow */
.variant-selected::after{
  content:"﹀";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:14px;
  color:rgba(255,255,255,0.55); /* grey */
  transition:0.2s ease;
}

/* rotate when open */
.custom-variant-select.open .variant-selected::after{
  transform:translateY(-50%) rotate(180deg);
}

/* ===============================
   FINAL FIX — ORDERS TABLE ALIGNMENT
   =============================== */

.history-table.orders-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* FORCE grid */
.history-table.orders-history .orders-head,
.history-table.orders-history .orders-row {
  display: grid !important;

  grid-template-columns:
    2.5fr   /* Product */
    0.8fr   /* Price */
    0.5fr   /* Qty */
    1fr     /* Payment */
    1fr     /* Status */
    1.5fr;  /* Action */

  align-items: center;
  width: 100%;
}

/* HEADERS */
.history-table.orders-history .orders-head > div {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ROW CELLS */
.history-table.orders-history .orders-row > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRODUCT LEFT */
.history-table.orders-history .orders-head > div:first-child,
.history-table.orders-history .orders-row > div:first-child {
  justify-content: flex-start;
  text-align: left;
}

/* ACTION CENTERED */
.orders-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* ===============================
   HARD FIX — ORDERS TABLE TEXT BREAKING
   =============================== */

/* FORCE CLEAN GRID */
.history-table.orders-history .orders-head,
.history-table.orders-history .orders-row {
  display: grid !important;

  grid-template-columns:
    minmax(180px, 2.5fr)   /* Product */
    minmax(90px, 0.9fr)    /* Price */
    minmax(60px, 0.6fr)    /* Qty */
    minmax(120px, 1fr)     /* Payment */
    minmax(110px, 1fr)     /* Status */
    minmax(140px, 1.5fr);  /* Action */

  column-gap: 18px;  /* 🔑 THIS FIXES CRUSHING */
  align-items: center;
}

/* HEADER FIX */
.history-table.orders-history .orders-head > div {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 0.85rem;
  white-space: nowrap;   /* 🔑 PREVENT TEXT MERGING */
}

/* ROW CELLS */
.history-table.orders-history .orders-row > div {
  display: flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;   /* 🔑 KEY FIX */
}

/* PRODUCT COLUMN LEFT */
.history-table.orders-history .orders-head > div:first-child,
.history-table.orders-history .orders-row > div:first-child {
  justify-content: flex-start;
  white-space: normal;   /* allow wrapping here only */
}

/* ACTION BUTTON CENTER */
.orders-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* pager style matching your theme */
.pager{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}
.page-btn{
  padding:6px 12px;
  border-radius:10px;
  border:1px solid rgba(255,234,0,0.25);
  background:rgba(255,234,0,0.06);
  color:#ffea00;
  font-weight:900;
  text-decoration:none;
}
.page-btn:hover{ background:rgba(255,234,0,0.12); }
.page-btn.disabled{
  opacity:0.45;
  pointer-events:none;
}
.page-num{
  color:rgba(255,255,255,0.75);
  font-weight:800;
}

/* deliverables download / telegram styling */
.delivery-download{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,234,0,0.20);
  background:rgba(255,234,0,0.06);
  margin-top:10px;
}
.delivery-download i{
  color:#ffea00;
  font-size:1.05rem;
}
.delivery-download a{
  color:white;
  font-weight:900;
  text-decoration:none;
}
.delivery-download a:hover{
  text-decoration:underline;
}

.delivery-telegram{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,180,255,0.25);
  background:rgba(0,180,255,0.08);
  margin-top:10px;
}
.delivery-telegram i{
  color:#24A1DE;
  font-size:1.05rem;
}
.delivery-telegram a{
  color:#ffea00;
  font-weight:900;
  text-decoration:none;
}
.delivery-telegram a:hover{
  text-decoration:underline;
}

/* clean order table grid (6 columns) */
.orders-table{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.orders-product-name{
  color:white;
  font-weight:900;
  line-height:1.2;
}

.orders-invoice{
  margin-top:4px;
  color:rgba(255,255,255,0.6);
  font-weight:800;
  font-size:0.82rem;
}

.orders-payment{
  color:#ffea00;
  font-weight:900;
  text-transform:lowercase;
}

.orders-amount{
  color:white;
  font-weight:900;
}

.orders-qty{
  color:rgba(255,255,255,0.85);
  font-weight:900;
}

.orders-date{
  font-weight:800;
}

/* Modern Deliverables Button */
.deliver-btn{
  padding:6px 14px;
  border-radius:10px;
  border:1px solid rgba(255,234,0,0.35);
  background:rgba(255,234,0,0.08);
  color:#ffea00;
  font-weight:800;
  font-size:0.85rem;
  letter-spacing:.4px;
  cursor:pointer;
  transition:all .25s ease;
  box-shadow:0 0 0 rgba(255,234,0,0);
}

/* Hover */
.deliver-btn:hover{
  background:rgba(255,234,0,0.18);
  border-color:#ffea00;
  transform:translateY(-1px);
  box-shadow:0 0 10px rgba(255,234,0,0.45);
}

/* Click */
.deliver-btn:active{
  transform:scale(.97);
  box-shadow:0 0 6px rgba(255,234,0,0.6);
}

/* Align table cells */
.history-row span {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center header titles over each column */
.history-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
}

/* Keep product column left aligned */
.product-cell {
  align-items: flex-start !important;
  text-align: left;
}

.history-head span:first-child {
  justify-content: flex-start;
  padding-left: 6px;
}

/* Balance table ONLY */
.account-card .history-table:not(.orders-history) .history-head,
.account-card .history-table:not(.orders-history) .history-row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr;
  gap: 22px;
  align-items: center;
}

.payment-type {
  font-weight: 800;
  color: #ffea00;
}

/* Make balance rows same height as order rows */
.history-table .history-row {
  min-height: 64px;
  padding: 14px 16px !important;
}

/* Modal overlay fade */
.purchase-modal{
  transition: opacity .25s ease;
}

.purchase-modal.hidden{
  opacity:0;
  pointer-events:none;
}

/* Modal box pop animation */
.purchase-box{
  transform: scale(.92);
  opacity:0;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}

/* When modal is visible */
.purchase-modal:not(.hidden) .purchase-box{
  transform: scale(1);
  opacity:1;
}

/* Override global hidden behavior for modal */
.purchase-modal.hidden {
  display:flex !important;   /* keep layout */
  opacity:0;
  pointer-events:none;
}

.purchase-modal {
  display:flex;
  opacity:1;
  transition: opacity .25s ease;
}

/* Modal box animation */
.purchase-box {
  transform: scale(.92);
  opacity:0;
  transition: all .28s cubic-bezier(.2,.8,.2,1);
}

.purchase-modal:not(.hidden) .purchase-box {
  transform: scale(1);
  opacity:1;
}

/* Product column layout (title + invoice) */
.orders-row span:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers invoice under title */
  gap: 4px;
}

/* Product title */
.orders-row span:first-child strong {
  font-weight: 900;
  color: white;
}

/* Invoice ID under title */
.orders-row .mono {
  font-size: 0.78rem;
  opacity: 0.65;
  letter-spacing: 0.5px;
}

/* Make product column content stack + center */
.orders-row span:first-child {
  text-align: center;
}

/* Force invoice under title properly */
.orders-row span:first-child strong {
  display: block;
}

.orders-row span:first-child .mono {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  opacity: 0.65;
  letter-spacing: 0.5px;
}

.product-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.product-title {
  font-weight: 900;
  color: #fff;
}

.invoice-id {
  font-size: 0.78rem;
  opacity: 0.6;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.delivery-replacement{
  font-size: 0.65rem;
  font-weight: 900;
  color: #ffae00;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.delivery-box{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,234,0,0.15);
  background:rgba(0,0,0,0.35);
}

.replacement-head{
  margin-top:18px;
  color:#00ff88;
  text-shadow:0 0 8px rgba(0,255,136,0.6);
}

.review-input{
  width:100%;
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,234,0,.25);
  background:rgba(0,0,0,.45);
  color:white;
  font-weight:700;
}
.review-stars-modal{
  margin-top:14px;
  display:flex;
  gap:10px;
  font-size:24px;
  cursor:pointer;
  color:#ffea00;
}

/* ===== Review Modal Styling Fix ===== */

.review-input{
  width:100%;
  margin-top:16px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid rgba(255,234,0,.25);
  background:rgba(0,0,0,.45);
  color:#fff;
  font-family: 'Poppins', sans-serif; /* matches site */
  font-weight:500;
  font-size:14px;
  resize:none;
  transition:.2s;
}

.review-input:focus{
  outline:none;
  border-color:#ffea00;
  box-shadow:0 0 10px rgba(255,234,0,.4);
}

.review-stars-modal{
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:12px;
  font-size:26px;
  cursor:pointer;
  color:#ffea00;
  user-select:none;
}

.review-stars-modal span{
  transition:.15s ease;
}

.review-stars-modal span:hover{
  transform:scale(1.2);
}

/* Center submit button cleanly */
#reviewModal .purchase-actions{
  justify-content:center;
  gap:14px;
  margin-top:18px;
}

#reviewModal .btn-solid{
  min-width:140px;
}

/* REVIEW SUCCESS OVERLAY */
.review-success-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:rgba(0,0,0,0.82);
  border-radius:20px;
  z-index:10;
}

/* Smaller spinner */
.review-success-spinner{
  width:44px;
  height:44px;
  border-radius:50%;
  border:4px solid rgba(0,255,120,0.15);
  border-top:4px solid #00ff88;
  animation: reviewSpin 0.8s linear infinite;
  box-shadow:0 0 14px rgba(0,255,120,0.6);
}

/* Smaller text */
.review-success-text{
  color:#00ff88;
  font-weight:800;
  font-size:0.95rem;
  letter-spacing:0.6px;
  text-shadow:0 0 8px rgba(0,255,120,0.6);
}

.review-success-overlay.hidden{
  display:none;
}

.review-success-overlay{
  pointer-events:none; /* IMPORTANT */
}

.reviewed-badge{
  padding:6px 14px;
  border-radius:10px;
  background:#00ff88;
  color:black;
  font-weight:900;
  font-size:0.85rem;
  box-shadow:0 0 10px rgba(0,255,136,.5);
  display:flex;
  align-items:center;
  justify-content:center;
}

.review-success-spinner{
  width:36px;
  height:36px;
  border:4px solid rgba(0,255,136,.25);
  border-top-color:#00ff88;
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  margin:0 auto;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.reviewed-btn{
  background: linear-gradient(135deg,#00ff88,#00cc6a);
  border: 1px solid #00ff88;
  color: #001a0f;
  font-weight: 900;
  box-shadow: 0 0 12px rgba(0,255,136,.35);
  cursor: default;
}

.orders-actions button{
  min-width: 120px;
}

/* =========================
   Order Status Pills
========================= */

.orders-status{
  display:flex;
  justify-content:center;
  align-items:center;
}

.status-pill{
  padding:5px 12px;
  border-radius:999px;
  font-size:0.75rem;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  border:1px solid;
}

/* Pending = Orange */
.status-pending{
  color:#ffae00;
  border-color:#ffae00;
  background:rgba(255,174,0,0.08);
  box-shadow:0 0 8px rgba(255,174,0,0.25);
}

/* Paid / Completed = Green */
.status-paid,
.status-completed{
  color:#00ff88;
  border-color:#00ff88;
  background:rgba(0,255,136,0.08);
  box-shadow:0 0 8px rgba(0,255,136,0.25);
}

/* Expired = Red */
.status-expired{
  color:#ff4d4d;
  border-color:#ff4d4d;
  background:rgba(255,77,77,0.08);
  box-shadow:0 0 8px rgba(255,77,77,0.25);
}

/* ===== FINAL ORDERS LAYOUT (ONLY RULE THAT SHOULD EXIST) ===== */

.history-table.orders-history .orders-head,
.history-table.orders-history .orders-row {
  display: grid !important;
  grid-template-columns: 2.6fr 0.8fr 0.5fr 1fr 1.1fr 1.9fr !important;
  align-items: center;
  padding: 14px 16px;
}

/* Header */
.history-table.orders-history .orders-head > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Rows */
.history-table.orders-history .orders-row > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Product stacked */
.history-table.orders-history .product-cell {
  flex-direction: column;
  align-items: flex-start;
}

/* Actions right */
.history-table.orders-history .orders-head > div:last-child,
.history-table.orders-history .orders-row > div:last-child {
  justify-content: flex-end;
}

/* ===== Restore Order Card Appearance ===== */

/* Each order row should look like a rounded card */
.history-table.orders-history .orders-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,234,0,0.35);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* Header bar rounded like before */
.history-table.orders-history .orders-head {
  background: rgba(255,255,255,0.05);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 6px;
}

/* Restore spacing inside product column */
.history-table.orders-history .product-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Product title */
.product-title {
  font-weight: 900;
  color: #fff;
}

/* Invoice */
.invoice-id {
  font-size: 0.78rem;
  opacity: 0.65;
}

/* Date under invoice (smaller as you wanted earlier) */
.product-cell .order-date {
  font-size: 0.72rem;
  opacity: 0.5;
}

/* ===== FINAL ORDERS GRID (balanced width) ===== */

.orders-history .orders-head,
.orders-history .orders-row{
  display:grid;
  grid-template-columns:
    2.4fr   /* Product */
    0.7fr   /* Price */
    0.5fr   /* Qty */
    0.9fr   /* Payment */
    1fr     /* Status */
    1.4fr;  /* Action */

  align-items:center;
  padding:14px 18px;
  width:100%;
  box-sizing:border-box;
}

/* Center Action column (header + buttons) */
.orders-history .orders-head > div:last-child,
.orders-history .orders-row > div:last-child{
  display:flex;
  justify-content:center;
  align-items:center;
}

.orders-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}

.history-table.orders-history .orders-row{
  margin-bottom:8px;
}

/* ===============================
   FORCE FINAL ORDERS LAYOUT
   (Overrides ALL other CSS)
================================ */

/* Center columns */
.history-table.orders-history > .orders-head > div,
.history-table.orders-history > .orders-row > div{
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Product left */
.history-table.orders-history > .orders-head > div:first-child,
.history-table.orders-history > .orders-row > div:first-child{
    justify-content: flex-start !important;
}

/* Action centered */
.orders-actions{
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Center ACTION header exactly above buttons */
.history-table.orders-history > .orders-head > div:last-child{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* =========================================
   FORCE BALANCE TO LOOK LIKE ORDERS
   (override ALL old history-table styles)
========================================= */

.history-table.balance-modern{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
    margin-top:14px !important;
}

/* Header (same as Orders) */
.history-table.balance-modern .history-head{
    display:grid !important;
    grid-template-columns: 2.6fr 1fr 1fr 1.4fr !important;
    padding:14px 18px !important;
    border-radius:16px !important;

    background: linear-gradient(
        90deg,
        rgba(20,20,28,.9),
        rgba(10,10,16,.9)
    ) !important;

    border: none !important;
}

/* Header text */
.history-table.balance-modern .history-head span{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

/* Rows — SAME look as Orders cards */
.history-table.balance-modern .history-row{
    display:grid !important;
    grid-template-columns: 2.6fr 1fr 1fr 1.4fr !important;
    align-items:center !important;

    padding:18px 18px !important;
    border-radius:18px !important;

    border:1px solid rgba(255,234,0,.35) !important;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.65),
        rgba(0,0,0,.35)
    ) !important;

    box-shadow:
        0 0 20px rgba(255,234,0,.08),
        inset 0 0 40px rgba(255,234,0,.02) !important;
}

/* Cell alignment */
.history-table.balance-modern .history-row span{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
}

/* Amount highlight */
.history-table.balance-modern .positive{
    color:#ffea00 !important;
    font-weight:900 !important;
}

/* Kill old borders/backgrounds */
.history-table.balance-modern .history-row,
.history-table.balance-modern .history-head{
    background-clip:padding-box !important;
}

/* ===== FORCE Balance table to match Orders (FINAL OVERRIDE) ===== */

.account-wrap .history-table.balance-modern .history-row{
  background: linear-gradient(
    90deg,
    rgba(10,10,18,0.95),
    rgba(5,5,10,0.95)
  ) !important;

  border: 1px solid rgba(255,234,0,.25) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  box-shadow: none !important;
}

/* spacing between rows like orders */
.account-wrap .history-table.balance-modern{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* make header match orders style */
.account-wrap .history-table.balance-modern .history-head{
  background: rgba(255,255,255,.05) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
}

/* ===== BALANCE = EXACT SAME AS ORDERS ===== */

.account-wrap .history-table.balance-modern .history-row{
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.015)
    ) !important;

    border: 1px solid rgba(255,234,0,.25) !important;
    border-radius: 18px !important;

    box-shadow:
        0 0 22px rgba(255,234,0,.18) !important;
}

/* ===== Add same glow to Orders rows ===== */

.account-wrap .orders-history .orders-row{
    box-shadow:
        0 0 22px rgba(255,234,0,.18) !important;
}

/* ===== Match Orders header to Balance style ===== */

.account-wrap .orders-history .orders-head > div{
    font-weight: 900 !important;
    color: var(--muted) !important;   /* grey like Balance */
    letter-spacing: 0.02em;
}

/* Action column badges */
.action-badge{
  padding:6px 14px;
  border-radius:10px;
  font-weight:900;
  font-size:0.8rem;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Pending = orange */
.action-pending{
  color:#ffae00;
  border:1px solid #ffae00;
  background:rgba(255,174,0,0.08);
  box-shadow:0 0 8px rgba(255,174,0,0.25);
}

/* Expired = red */
.action-expired{
  color:#ff4d4d;
  border:1px solid #ff4d4d;
  background:rgba(255,77,77,0.08);
  box-shadow:0 0 8px rgba(255,77,77,0.25);
}

/* Status badges (same as balance page) */
.status-badge{
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  display: inline-block;
}

/* Complete = green (match orders style) */
.action-complete{
  color:#00ff88;
  border:1px solid #00ff88;
  background:rgba(0,255,136,0.08);
  box-shadow:0 0 8px rgba(0,255,136,0.25);
}

/* ===============================
   MOBILE — CLEAN ORDERS (ACTUAL FINAL)
   =============================== */

@media (max-width: 768px) {

  /* stack layout */
  .history-table.orders-history > .orders-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    padding: 16px;
  }

  .history-table.orders-history > .orders-row > div {
    display: block !important;
    width: 100%;
  }

  /* hide header */
  .history-table.orders-history > .orders-head {
    display: none !important;
  }

  /* hide unwanted columns */
  .orders-qty,
  .orders-status {
    display: none !important;
  }

  /* ===== LAYOUT ORDER ===== */

  .product-cell {
    order: 1;
  }

  .orders-payment {
    order: 2;
    display: block !important;
    font-size: 0.85rem;
    font-weight: 800;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
  }

  .orders-payment::before {
    content: "Payment: ";
    color: #ffea00;
  }

  .orders-amount {
    order: 3;
    font-size: 1.2rem;
    font-weight: 900;
    color: #ffea00;
    margin-bottom: 6px;
  }

  .orders-actions {
    order: 4;
    display: flex !important;
    gap: 10px;
  }

  .orders-actions button {
    flex: 1;
  }

}

/* REMOVE THE NUMBER SAFELY */
@media (max-width: 768px) {

/* ===============================
   KILL ORDER ROW COUNTERS (FINAL FIX)
   =============================== */

.history-table.orders-history,
.history-table.orders-history * {
  counter-reset: none !important;
  counter-increment: none !important;
}

/* remove any generated numbers */
.history-table.orders-history .orders-row::before,
.history-table.orders-history .orders-row::after {
  content: none !important;
  display: none !important;
}

/* ALSO block list numbering just in case */
.history-table.orders-history .orders-row {
  list-style: none !important;
}

/* ===============================
   KILL QTY COLUMN (FINAL FIX)
   =============================== */

@media (max-width: 768px) {

  .history-table.orders-history .orders-qty {
    display: none !important;
  }

}

@media (max-width: 768px) {

  .history-table.orders-history > .orders-row > .orders-qty {
    display: none !important;
  }

}

/* ===============================
   FINAL MODAL SYSTEM (CLEAN FIX)
   =============================== */

/* 🔥 REQUIRED */
.hidden {
  display: none !important;
}

/* ===============================
   OVERLAY (FULL SCREEN)
   =============================== */
.modal-overlay,
.purchase-modal {
  position: fixed !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px;

  background: rgba(0,0,0,0.7);

  z-index: 999999;
}

/* ===============================
   MODAL BOX
   =============================== */
.product-modal,
.purchase-box {
  width: calc(100% - 24px);   /* 🔥 THIS IS THE REAL FIX */
  max-width: 420px;

  max-height: 85vh;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: 16px;
  background: #0c0c0c;

  margin: 0 auto;
}

/* ===============================
   SCROLLABLE CONTENT
   =============================== */
.purchase-deliveries {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

/* ===============================
   ACTION BUTTON AREA
   =============================== */
.purchase-actions {
  flex-shrink: 0;
  margin-top: 10px;
}

/* ===============================
   MOBILE FIX (REAL)
   =============================== */
@media (max-width: 768px) {

  .modal-overlay,
  .purchase-modal {
    padding: 10px;
  }

  .product-modal,
  .purchase-box {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
  }

}

.modal-overlay,
.purchase-modal {
  padding: 12px;  /* ensures space on BOTH sides */
}

@media (max-width: 768px) {

  .product-modal,
  .purchase-box {
    width: calc(100% - 20px);  /* 🔥 prevents right cutoff */
    max-width: 100%;
  }

}

/* ===============================
   MOBILE NAVBAR — CLEAN LAYOUT
   =============================== */

@media (max-width: 768px){

  .navbar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* LEFT SIDE STACK */
  .nav-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 🔥 MAIN LINKS (HOME etc) */
  .nav-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;

    width: 100%;
  }

  /* 🔥 SERVICES DROPDOWN ON ITS OWN ROW */
  .nav-dropdown {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }

  /* 🔥 RIGHT SIDE BUTTONS CENTERED + CLOSE */
  .nav-right {
    width: 100%;
    display: flex;
    justify-content: center;   /* CENTER */
    align-items: center;

    gap: 10px;                 /* 🔥 closer together */

    margin-top: 12px;
    flex-wrap: wrap;
  }

  /* tighten buttons */
  .btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* icons aligned nicely */
  .icon-btn {
    margin: 0;
  }

}

/* =========================
   MOBILE MODAL SCROLL FIX
========================= */

.product-modal {
  max-height: 90vh;
  overflow-y: auto;   /* allow scrolling */
  overflow-x: visible; /* allow dropdown to escape */
  display: flex;
  flex-direction: column;
}

/* Limit long descriptions only */
.modal-description {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Smooth scrolling on iPhone */
.product-modal {
  -webkit-overflow-scrolling: touch;
}

/* =========================
   VARIANT DROPDOWN MOBILE FIX
========================= */

.custom-variant-select{
  position: relative !important;
  width: 100%;
  overflow: visible !important;
}

.variant-selected{
  position: relative;
  z-index: 2;
}

.variant-dropdown{
  position: absolute !important;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;

  background: #0c0c0c;
  border: 1px solid #333;
  border-radius: 10px;

  max-height: 220px;
  overflow-y: auto;
  z-index: 99999;

  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

.variant-dropdown.hidden{
  display: none !important;
}

.product-modal{
  overflow: visible !important;
}

.modal-overlay{
  overflow: visible !important;
}

@media (max-width: 768px){
  .product-modal{
    overflow: visible !important;
  }

  .custom-variant-select{
    overflow: visible !important;
  }

  .variant-dropdown{
    position: absolute !important;
    z-index: 99999 !important;
  }
}

.custom-variant-select {
  position: relative;
}

.variant-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;

  z-index: 9999;
  max-height: 200px;
  overflow-y: auto;
}

/* ===============================
   UNIVERSAL MODAL RESPONSIVE FIX
=============================== */

/* Make modal scale properly */
.product-modal {
  width: min(520px, 95vw) !important;
  max-height: 90vh !important;

  display: flex !important;
  flex-direction: column !important;

  overflow-y: auto !important;   /* allow scroll */
  overflow-x: visible !important; /* allow dropdown */
}

/* Prevent inner sections from trapping dropdown */
.product-modal-section {
  overflow: visible !important;
}

/* Fix dropdown positioning */
.custom-variant-select {
  position: relative !important;
  overflow: visible !important;
}

.variant-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  width: 100% !important;

  z-index: 999999 !important;

  max-height: 220px !important;
  overflow-y: auto !important;

  background: #0c0c0c;
  border: 1px solid #333;
  border-radius: 10px;

  box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

/* Mobile tightening */
@media (max-width: 768px) {
  .product-modal {
    width: 95vw !important;
    max-height: 85vh !important;
  }
}

/* ===============================
   SMART VERTICAL RESIZE (DESKTOP + MOBILE)
=============================== */

.product-modal {
  height: auto !important;          /* shrink to content */
  max-height: 90vh !important;      /* never exceed screen */

  display: flex !important;
  flex-direction: column !important;
}

/* Let content grow naturally */
.product-modal-section {
  flex: 0 0 auto !important;
}

/* Only scroll if content is too big */
.product-modal {
  overflow-y: auto !important;
}