/* ============================================================
   FILE: css/premium.css — JOEBEST A1 Electronics Store
   Premium styles — dark mode, countdown, search, wishlist, etc.
   ============================================================ */

/* ── Scroll Reveal ── */
.sr { opacity:0; transform:translateY(28px); transition:opacity .55s ease,transform .55s ease; }
.sr.sr-visible { opacity:1; transform:translateY(0); }
.sr-delay-1 { transition-delay:.08s; }
.sr-delay-2 { transition-delay:.16s; }
.sr-delay-3 { transition-delay:.24s; }
.sr-delay-4 { transition-delay:.32s; }

/* ── Countdown ── */
.cd-unit { display:inline-flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.15);border-radius:6px;padding:4px 10px;min-width:46px; }
.cd-num  { font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;line-height:1; }
.cd-lbl  { font-size:10px;color:rgba(255,255,255,.7);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px; }
.cd-sep  { font-size:22px;font-weight:800;color:rgba(255,255,255,.6);margin:0 2px;line-height:1;align-self:flex-start;padding-top:4px; }

/* ── Wishlist Nav ── */
.nav-wishlist { position:relative;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;color:var(--text);transition:all var(--transition);cursor:pointer;background:var(--gray-1);text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent; }
.nav-wishlist:hover { background:var(--orange-pale);color:var(--orange); }
.wishlist-count { position:absolute;top:2px;right:8px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1; }

/* ── Zoom Box ── */
#zoom-box { will-change:transform; }
@media (max-width:900px) { #zoom-box { display:none!important; } }

/* ── Dark Mode ── */
:root.dark {
  --white:#1e1e2e; --gray-1:#16213e; --gray-2:#252545; --gray-3:#303060;
  --gray-4:#505090; --text:#e8e8f0; --text-muted:#9090b0;
  --orange-pale:rgba(245,124,0,.12); --success-light:rgba(46,125,50,.15);
  --danger-light:rgba(198,40,40,.15);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 16px rgba(0,0,0,.4); --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}
:root.dark body        { background:var(--gray-1);color:var(--text); }
:root.dark .navbar     { background:#1a1a2e; }
:root.dark .product-card { background:#252545;border-color:var(--gray-3); }
:root.dark .product-card:hover { border-color:var(--orange); }
:root.dark .order-summary,.auth-card,.cart-table-wrap,.admin-card,.profile-content-box,
:root.dark .sc,.filter-bar,.modal { background:#1e1e2e;border-color:var(--gray-3); }
:root.dark .form-control,:root.dark select,:root.dark textarea { background:#252545;border-color:var(--gray-3);color:var(--text); }
:root.dark .btn-ghost  { background:var(--gray-2);color:var(--text); }
:root.dark .section-alt { background:#16213e; }
:root.dark .cat-card   { background:#252545;border-color:var(--gray-3); }
:root.dark .modal-header { background:#1e1e2e;border-color:var(--gray-3); }
:root.dark .admin-topbar { background:#1a1a2e;border-color:var(--gray-3); }
:root.dark .admin-main   { background:#16213e; }
:root.dark .admin-table th { background:#252545; }
:root.dark .admin-table td { background:#1e1e2e; }
:root.dark .admin-table tr:hover td { background:rgba(245,124,0,.08); }
:root.dark .nav-wishlist,:root.dark .nav-cart,:root.dark .nav-user,:root.dark .nav-link { background:var(--gray-2); }
:root.dark .nav-wishlist:hover,:root.dark .nav-cart:hover,:root.dark .nav-user:hover,:root.dark .nav-link:hover { background:rgba(245,124,0,.15); }
:root.dark .footer,:root.dark .top-bar,:root.dark .category-nav { background:#0d0d1a; }
:root.dark .sch { background:#252545;border-color:var(--gray-3); }
:root.dark .pmenu-btn { background:#1e1e2e;border-color:var(--gray-3);color:var(--text); }
:root.dark .pmenu-btn:hover,:root.dark .pmenu-btn.active { background:rgba(245,124,0,.12); }
:root.dark .wl-btn { background:rgba(30,30,46,.93); }
:root.dark .search-dropdown { background:#1e1e2e; }
:root.dark .pay-method-btn { background:#252545;border-color:var(--gray-3);color:var(--text); }
:root.dark .cart-item { border-color:var(--gray-3); }
:root.dark .cart-table-header { background:#252545; }
:root.dark .filter-select { background:#252545;border-color:var(--gray-3);color:var(--text); }
:root.dark #newsletter-section { background:linear-gradient(135deg,#0d0d1a,#1a1a2e); }

/* ── Policy Pages ── */
.policy-body { max-width:760px;margin:0 auto;padding:48px 20px; }
.policy-body h2 { font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--dark);margin:28px 0 12px; }
.policy-body h2:first-child { margin-top:0; }
.policy-body p  { font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:14px; }
.policy-body ul { padding-left:20px;margin-bottom:14px; }
.policy-body ul li { font-size:14.5px;color:var(--text-muted);line-height:1.8;margin-bottom:6px; }
.policy-body strong { color:var(--text); }

/* ── 404 Page ── */
.error-page { min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 20px; }
.error-code  { font-family:var(--font-display);font-size:clamp(80px,15vw,160px);font-weight:800;line-height:1;margin-bottom:16px;background:linear-gradient(135deg,var(--orange),var(--orange-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }

/* ── Contact Page ── */
.contact-grid { display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:48px 0; }
.contact-info-card { background:var(--white);border:1.5px solid var(--gray-2);border-radius:var(--radius);padding:24px;display:flex;align-items:flex-start;gap:16px;transition:all var(--transition); }
.contact-info-card:hover { border-color:var(--orange);transform:translateY(-3px);box-shadow:var(--shadow-md); }
.contact-icon { width:52px;height:52px;border-radius:12px;background:var(--orange-pale);color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0; }
@media(max-width:768px) { .contact-grid{grid-template-columns:1fr;gap:24px;padding:28px 0;} }

/* ── Order Tracking ── */
.track-steps { display:flex;align-items:flex-start;gap:0;margin:32px 0;position:relative; }
.track-steps::before { content:'';position:absolute;top:20px;left:20px;right:20px;height:3px;background:var(--gray-2);z-index:0; }
.track-step { flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1; }
.track-step-dot { width:40px;height:40px;border-radius:50%;background:var(--gray-2);border:3px solid var(--gray-3);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all .4s ease; }
.track-step.done   .track-step-dot { background:var(--success);border-color:var(--success);color:#fff; }
.track-step.active .track-step-dot { background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 5px rgba(245,124,0,.2);animation:pulse-dot 1.5s ease infinite; }
@keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 5px rgba(245,124,0,.2)} 50%{box-shadow:0 0 0 10px rgba(245,124,0,.05)} }
.track-step-label { font-size:12px;font-weight:600;color:var(--text-muted);text-align:center;line-height:1.3; }
.track-step.done .track-step-label,.track-step.active .track-step-label { color:var(--text); }
.track-progress-bar { position:absolute;top:20px;left:20px;height:3px;background:var(--success);z-index:0;transition:width .6s ease;transform:translateY(-50%);margin-top:1.5px; }
@media(max-width:600px){ .track-steps{flex-direction:column;align-items:flex-start;gap:16px} .track-steps::before,.track-progress-bar{display:none} .track-step{flex-direction:row;gap:12px;width:100%} .track-step-label{text-align:left} }

/* ── Wishlist Empty State ── */
#wishlist-empty { text-align:center;padding:80px 20px;display:flex;flex-direction:column;align-items:center;gap:12px; }
#wishlist-empty .icon { font-size:56px; }
#wishlist-empty h3 { font-size:22px;font-weight:700; }
#wishlist-empty p { color:var(--text-muted); }

/* ── Admin site control grid ── */
.admin-section #section-sitecontrol .form-full { grid-column:1/-1; }

/* ── Newsletter section responsive ── */
@media(max-width:600px) {
  #newsletter-section input,#newsletter-section button { border-radius:var(--radius-sm)!important; }
}

/* ── Product Condition Badges ── */
.condition-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 4;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: .3px;
}
.badge-uk-used     { background:#1565c0; color:#fff; }
.badge-uk-used-b   { background:#1976d2; color:#fff; }
.badge-locally-used{ background:#6a1b9a; color:#fff; }

/* ── Mobile overflow fix — no horizontal scroll on any page ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
* { box-sizing: border-box; }

/* ── Cart item mobile — price shown below name ── */
@media (max-width: 600px) {
  .cart-item-price, .cart-item-total { font-size: 13px; }
  .cart-qty-btn { width: 32px !important; height: 32px !important; }
}

/* ── Product card condition badge position ── */
.product-card { position: relative; overflow: visible; }