@view-transition { navigation: auto; }

:root {
  --bg-deep: #0A0A0A;
  --bg-gradient: linear-gradient(135deg, #0A0A0A 0%, #121212 100%);
  --primary-brand: #64ffb3;
  --accent-cyan: #64ffb3;
  --accent-purple: #5E5CE6;
  --neon-price: #64ffb3;
  --neon-glow: rgba(100, 255, 179, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --text-white: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.4);
  --radius: 16px;
  --spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --accent-red: #FF3B30;
  --bg-card: rgba(255, 255, 255, 0.03);
  --border-color: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Tajawal', sans-serif; }

/* ============================================
   POLISH: Smooth Scroll + Custom Scrollbar
   ============================================ */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(100,255,179,0.15); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,255,179,0.3); }
* { scrollbar-width: thin; scrollbar-color: rgba(100,255,179,0.15) var(--bg-deep); }

/* Focus rings (replaces ugly blue outlines) */
*:focus-visible { outline: none; box-shadow: 0 0 0 2px #0A0A0A, 0 0 0 4px var(--accent-cyan); border-radius: 4px; }

/* Animated gradient text on prices */
.kaser-heading .kh-title i, .product-card .item-price .price-amount, .item-price-large .price-amount {
  background: linear-gradient(90deg, #64ffb3, #00e676, #64ffb3);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 3s ease infinite;
}
@keyframes gradientText { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* Ripple effect on buttons */
.ripple { position: relative; overflow: hidden; }
.ripple-effect { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.2); transform: scale(0); animation: rippleAnim 0.6s ease-out; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* Cursor glow (spotlight on cards) */
.glow-card { position: relative; overflow: hidden; }
.glow-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle 200px at var(--mx,50%) var(--my,50%), rgba(100,255,179,0.06) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 1; border-radius: inherit; }
.glow-card:hover::before { opacity: 1; }

/* Top loading bar */
#kaser-loading-bar { position: fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg,#64ffb3,#00e676); z-index:99999; transition: width 0.3s ease; box-shadow: 0 0 8px rgba(100,255,179,0.4); }
#kaser-loading-bar.done { width:100%; opacity:0; transition: width 0.3s ease, opacity 0.4s ease 0.3s; }

/* ============================================
   DARK/LIGHT TOGGLE SWITCH
   ============================================ */
.theme-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.theme-switch-wrap svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.theme-switch-wrap .sun-icon { color: #f5a623; }
.theme-switch-wrap .moon-icon { color: #6366f1; }
.theme-switch {
  display: inline-block;
  position: relative;
}
.theme-switch input {
  cursor: pointer;
  width: 52px;
  height: 26px;
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 1;
  margin: 0;
}
.theme-switch-inner {
  display: block;
  width: 120px;
  height: 30px;
  background: #e0e0e0;
  border-radius: 26px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
}
.theme-switch-inner::before {
  content: attr(data-on);
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  top: 7px;
  right: 16px;
  color: #666;
}
.theme-switch-inner::after {
  content: attr(data-off);
  width: 60px;
  height: 18px;
  background: #fff;
  border-radius: 26px;
  position: absolute;
  left: 2px;
  top: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 6px -2px rgba(0,0,0,0.3);
  color: #333;
}
.theme-switch input:checked + .theme-switch-inner {
  background: #1a1a2e;
}
.theme-switch input:checked + .theme-switch-inner::before {
  color: #fff;
}
.theme-switch input:checked + .theme-switch-inner::after {
  content: attr(data-on);
  left: 58px;
  background: #2d2d40;
  color: #fff;
}

html, body { 
  background: var(--bg-deep);
  color: var(--text-white);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================
   STARFIELD BACKGROUND (Global)
   ============================================ */
.stars-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.stars-layer {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  animation: starsDrift var(--drift-speed, 120s) linear infinite;
}

.stars-layer-small {
  --drift-speed: 60s;
  box-shadow:
    120px 80px rgba(100,255,179,0.3), 320px 180px rgba(100,255,179,0.2), 540px 60px rgba(100,255,179,0.15),
    780px 220px rgba(0,230,118,0.2), 160px 350px rgba(100,255,179,0.1), 450px 400px rgba(100,255,179,0.25),
    680px 340px rgba(0,230,118,0.15), 890px 420px rgba(100,255,179,0.2), 100px 500px rgba(100,255,179,0.1),
    380px 550px rgba(0,230,118,0.2), 600px 480px rgba(100,255,179,0.15), 820px 560px rgba(100,255,179,0.1),
    980px 300px rgba(0,230,118,0.25), 200px 650px rgba(100,255,179,0.12), 500px 620px rgba(100,255,179,0.18),
    720px 680px rgba(0,230,118,0.15), 940px 640px rgba(100,255,179,0.2), 60px 750px rgba(100,255,179,0.1),
    300px 780px rgba(0,230,118,0.15), 560px 720px rgba(100,255,179,0.22), 800px 760px rgba(100,255,179,0.12),
    150px 850px rgba(0,230,118,0.18), 420px 880px rgba(100,255,179,0.1), 660px 820px rgba(100,255,179,0.2),
    880px 860px rgba(0,230,118,0.15), 40px 920px rgba(100,255,179,0.12), 340px 940px rgba(100,255,179,0.18),
    580px 900px rgba(0,230,118,0.1), 760px 960px rgba(100,255,179,0.22), 920px 920px rgba(100,255,179,0.15);
}

.stars-layer-medium {
  --drift-speed: 90s;
  box-shadow:
    220px 120px rgba(100,255,179,0.4), 580px 90px rgba(0,230,118,0.3), 860px 160px rgba(100,255,179,0.25),
    180px 280px rgba(0,230,118,0.35), 480px 240px rgba(100,255,179,0.2), 720px 300px rgba(100,255,179,0.3),
    940px 260px rgba(0,230,118,0.25), 80px 420px rgba(100,255,179,0.3), 340px 380px rgba(0,230,118,0.2),
    620px 440px rgba(100,255,179,0.35), 840px 400px rgba(0,230,118,0.2), 140px 540px rgba(100,255,179,0.25),
    400px 500px rgba(0,230,118,0.3), 680px 560px rgba(100,255,179,0.2), 900px 520px rgba(0,230,118,0.35),
    60px 660px rgba(100,255,179,0.2), 300px 640px rgba(0,230,118,0.3), 540px 680px rgba(100,255,179,0.25),
    780px 620px rgba(0,230,118,0.2), 120px 760px rgba(100,255,179,0.3), 440px 720px rgba(0,230,118,0.2),
    660px 780px rgba(100,255,179,0.35), 860px 740px rgba(0,230,118,0.25), 180px 860px rgba(100,255,179,0.2),
    500px 840px rgba(0,230,118,0.3), 740px 880px rgba(100,255,179,0.25), 940px 820px rgba(0,230,118,0.2);
}

.stars-layer-large {
  --drift-speed: 150s;
  box-shadow:
    400px 200px rgba(100,255,179,0.5), 800px 300px rgba(0,230,118,0.4), 200px 500px rgba(100,255,179,0.35),
    600px 400px rgba(0,230,118,0.45), 900px 600px rgba(100,255,179,0.3), 100px 700px rgba(0,230,118,0.4),
    500px 800px rgba(100,255,179,0.35), 700px 900px rgba(0,230,118,0.3), 300px 300px rgba(100,255,179,0.4);
}

@keyframes starsDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-100vh); }
}

/* Dark-only: hide stars on light mode */
html[data-theme="light"] .stars-bg { display: none; }

/* ============================================

.container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }

/* ================= iOS HEADER ================= */
.kaser-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(20px);
  border-bottom: 0.5px solid var(--glass-border);
  padding: 1rem 0;
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.8rem; font-weight: 900; color: #fff; text-decoration: none; letter-spacing: -1px; }

/* ================= iOS HERO ================= */
.hero-section { padding: 10rem 0 6rem; text-align: center; }
.hero-title { 
  font-size: 5rem; font-weight: 900; margin-bottom: 1rem;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.6) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -2px;
}
.hero-subtitle { font-size: 1.4rem; color: var(--text-secondary); margin-bottom: 3rem; }

/* ================= iOS SEARCH (CONTROL CENTER STYLE) ================= */
.search-wrapper {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
  padding: 0.5rem; border-radius: 24px;
  display: flex; max-width: 700px; margin: 0 auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  transition: 0.4s var(--spring-easing);
}
.search-wrapper:focus-within { transform: scale(1.02); border-color: var(--accent-cyan); box-shadow: 0 0 30px rgba(100,255,179,0.2); }
.search-input { 
  flex-grow: 1; background: transparent; border: none; 
  padding: 1.2rem 1.5rem; color: #fff; font-size: 1.1rem; outline: none; 
}
.btn-search { 
  background: #fff; color: #000; border: none; padding: 0 2.5rem; 
  border-radius: 18px; font-weight: 800; cursor: pointer; transition: 0.3s;
}
.btn-search:hover { transform: scale(0.95); opacity: 0.9; }

/* ================= iOS CARDS ================= */
.listings-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); 
  gap: 1.5rem; 
  margin-top: 2rem; 
}
@media (max-width: 600px) {
  .listings-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
/* ================= DUAL MODE GRID ================= */
.dashboard-listings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

.kaser-card.dashboard-item {
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: 1.2rem;
  gap: 1rem;
  position: relative;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.kaser-card.dashboard-item:hover { transform: translateY(-5px); border-color: var(--accent-cyan); }

.card-index {
  position: absolute; top: 10px; left: 10px;
  width: 22px; height: 22px; background: rgba(255,255,255,0.05);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: rgba(255,255,255,0.3); z-index: 5;
}

.card-index-mobile {
  position: absolute; top: 15px; right: 15px;
  width: 24px; height: 24px; background: rgba(255,255,255,0.05);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; color: rgba(255,255,255,0.4); z-index: 5;
}

.card-image-wrapper {
  width: 100%;
  aspect-ratio: 1/1;
  background: #FFFFFF; /* STUDIO WHITE */
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-image-wrapper img { max-width: 85%; max-height: 85%; object-fit: contain; }

.item-details { display: flex; flex-direction: column; gap: 0.4rem; text-align: center; }
.item-category-tag { font-size: 0.65rem; color: var(--accent-cyan); margin: 0 auto; }
.item-title-text { font-size: 1rem; font-weight: 800; color: #fff; }
.item-meta { display: flex; justify-content: center; gap: 0.8rem; color: var(--text-secondary); font-size: 0.75rem; }
.item-price-text { font-size: 1.5rem; font-weight: 900; color: var(--neon-price); text-shadow: 0 0 10px rgba(100, 255, 179, 0.2); }

/* ================= TIPS SECTION ================= */
.dashboard-tips {
  margin-top: 4rem;
  padding: 2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  text-align: right;
  width: 100%;
}
.tips-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}
.tip-item { 
  flex: 1;
  display: flex; 
  flex-direction: column; 
  align-items: flex-end; 
  gap: 0.5rem; 
  padding: 0 1.5rem;
  position: relative;
}
.tip-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(255,255,255,0.05);
}
.tip-header { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.tip-icon { font-size: 1.4rem; }
.tip-title { font-weight: 800; color: #fff; font-size: 1rem; }
.tip-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; text-align: right; }

/* Tips Colors */
.tip-photos .tip-icon { color: #34c759; filter: drop-shadow(0 0 8px rgba(52, 199, 89, 0.4)); }
.tip-price .tip-icon { color: #007aff; filter: drop-shadow(0 0 8px rgba(0, 122, 255, 0.4)); }
.tip-title-color .tip-icon { color: #ff9f0a; filter: drop-shadow(0 0 8px rgba(255, 159, 10, 0.4)); }

/* ================= WIDE ADD & GHOST CARDS ================= */
.add-product-wide, .ghost-card-wide {
  width: 100%;
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  transition: 0.4s var(--spring-easing);
  position: relative;
  text-align: center;
}

.add-product-wide {
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.1);
  cursor: pointer;
}
.add-product-wide:hover { background: rgba(100, 255, 179, 0.03); border-color: var(--accent-cyan); transform: scale(1.02); }

.ghost-card-wide {
  background: rgba(255,255,255,0.01);
  border: 1px dashed rgba(255,255,255,0.03);
  opacity: 0.6;
}

.wide-add-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, #1d1d1d, var(--accent-cyan));
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #fff; box-shadow: 0 5px 15px rgba(100, 255, 179, 0.4);
}
.ghost-box-icon { font-size: 2.5rem; opacity: 0.3; margin-bottom: 0.2rem; }
.wide-text { font-weight: 800; font-size: 1.1rem; color: #fff; }
.wide-sub { font-size: 0.8rem; color: var(--text-secondary); }

/* ================= iOS BUTTONS ================= */
.btn-primary {
  background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%);
  color: #000; padding: 1rem 2rem; border-radius: 16px;
  font-weight: 800; text-decoration: none; transition: 0.4s var(--spring-easing);
  display: inline-block; border: none; cursor: pointer;
}
.btn-primary:hover { transform: scale(0.95); box-shadow: 0 10px 20px rgba(255,255,255,0.1); }

.btn-kaser-toggle {
  background: rgba(100, 255, 179, 0.1); border: 1px solid rgba(100, 255, 179, 0.2);
  color: var(--accent-cyan); padding: 0.8rem 2rem; border-radius: 14px;
  font-weight: 800; cursor: pointer; transition: 0.3s;
}
.btn-kaser-toggle.active-deal { background: var(--accent-cyan); color: #000; box-shadow: 0 0 20px rgba(100,255,179,0.4); }

/* ================= DASHBOARD SPECIALS ================= */
.dashboard-layout { 
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}
.dashboard-sidebar { 
  position: sticky;
  top: 20px;
  height: calc(100vh - 40px);
  margin: 20px;
  padding: 30px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: var(--glass-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.dashboard-main { 
  padding: 40px;
  overflow-y: auto; 
  overflow-x: hidden;
}
.sidebar-brand { margin-bottom: 2.5rem; text-align: center; }
.brand-tag { font-size: 0.75rem; color: var(--accent-cyan); font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-top: -5px; }

.sidebar-user-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--glass-border);
  padding: 1.2rem; border-radius: 24px; display: flex; align-items: center; gap: 15px;
  margin-bottom: 2.5rem; transition: 0.3s;
}
.sidebar-user-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.2); }
a.user-profile {
  cursor: pointer;
  transition: opacity 0.2s;
  border-radius: 999px;
  padding: 4px 8px;
}
a.user-profile:hover { opacity: 0.8; background: rgba(255,255,255,0.04); }
a.user-profile:hover .avatar { border-color: #fff; }
a.user-profile .avatar { transition: border-color 0.2s; }
.user-avatar { 
  width: 50px; height: 50px; background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.user-info { flex-grow: 1; }
.user-name { font-weight: 800; font-size: 1rem; color: #fff; margin-bottom: 2px; }
.user-status { font-size: 0.75rem; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.status-dot { width: 6px; height: 6px; background: #34c759; border-radius: 50%; box-shadow: 0 0 8px #34c759; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; }
.nav-group-label { font-size: 0.7rem; font-weight: 900; color: rgba(255,255,255,0.2); text-transform: uppercase; letter-spacing: 1px; margin: 1.5rem 1rem 0.5rem 0; }

.nav-item { 
  padding: 1.1rem 1.3rem; border-radius: 20px; color: var(--text-secondary); 
  font-weight: 700; font-size: 1rem; transition: 0.4s var(--spring-easing); 
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.nav-home-link { 
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  margin-bottom: 0.5rem;
}
.nav-item.active { 
  background: rgba(255,255,255,0.08); color: #fff; 
  border: 1px solid rgba(255,255,255,0.1); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transform: scale(1.02);
}
.nav-item.active::before {
  content: ''; position: absolute; right: -2rem; height: 30px; width: 4px;
  background: var(--accent-cyan); border-radius: 0 4px 4px 0;
  box-shadow: 0 0 15px var(--accent-cyan);
}
.nav-item:hover:not(.active) { background: rgba(255,255,255,0.03); transform: scale(1.02); }

.stats-row { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 2rem; 
  margin-bottom: 4rem; 
  width: 100%;
}

@media (max-width: 1100px) {
  .stats-row { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
}

.stat-card {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border); border-radius: 35px;
  padding: 2.5rem 2rem; text-align: center;
  transition: 0.5s var(--spring-easing);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.stat-card:hover { transform: translateY(-10px) scale(1.02); background: rgba(255, 255, 255, 0.06); }

/* Card Specific Themes */
.stat-card.active-ads { --card-glow: rgba(255, 159, 10, 0.15); --card-accent: #ff9f0a; }
.stat-card.sold-ads { --card-glow: rgba(52, 199, 89, 0.15); --card-accent: #34c759; }
.stat-card.rep-ads { --card-glow: rgba(100, 255, 179, 0.15); --card-accent: #64ffb3; }
.stat-card.views-ads { --card-glow: rgba(100, 255, 179, 0.15); --card-accent: #64ffb3; }

.stat-ring {
  width: 70px; height: 70px;
  transform: rotate(-90deg);
}
.stat-ring-bg {
  fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 5;
}
.stat-ring-fill {
  fill: none; stroke: var(--card-accent); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 189; stroke-dashoffset: 189;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.stat-card.animated .stat-ring-fill { stroke-dashoffset: var(--ring-offset, 189); }

.stat-card::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, var(--card-glow) 0%, transparent 70%);
  pointer-events: none;
}

.stat-icon { 
  font-size: 3rem; margin-bottom: 1.2rem; filter: drop-shadow(0 0 10px var(--card-accent));
  animation: floatIcon 3s ease-in-out infinite;
}
.stat-value { font-size: 4rem; font-weight: 900; color: #fff; margin: 0; letter-spacing: -2px; line-height: 1; }
.stat-label { font-size: 1rem; color: var(--text-secondary); margin-top: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ================= CUSTOM MODALS (iOS ALERT STYLE) ================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(40px);
  display: none; align-items: center; justify-content: center; z-index: 9999;
}
.modal-overlay.active { display: flex; animation: fadeIn 0.3s; }
.modal-content {
  background: rgba(20, 20, 20, 0.85); 
  border: 1px solid rgba(255,255,255,0.1);
  padding: 40px 30px; 
  border-radius: 30px; 
  max-width: 400px; width: 90%;
  text-align: center; 
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  transform: scale(0.8); transition: 0.4s var(--spring-easing);
}
.modal-overlay.active .modal-content { transform: scale(1); }

.modal-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.modal-btn {
  flex: 1;
  padding: 14px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.modal-btn-cancel {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.modal-btn-cancel:hover { background: rgba(255,255,255,0.1); }

.modal-btn-confirm {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  color: #000;
  box-shadow: 0 10px 30px rgba(100, 255, 179, 0.2);
}

.modal-btn-confirm.danger {
  background: #FF3B30; /* iOS Red */
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3);
}

/* ================= ACTION BUTTONS (MINI PILLS) ================= */
.action-btn-mini {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.action-btn-mini.edit:hover {
  background: rgba(100, 255, 179, 0.1);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.action-btn-mini.delete:hover {
  background: rgba(255, 59, 48, 0.1);
  border-color: #FF3B30;
  color: #FF3B30;
}

/* ================= PROMOTE BUTTON (GLOWING) ================= */
.action-btn-mini.promote {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 159, 0, 0.15));
  border: 1px solid rgba(255, 193, 7, 0.25);
  color: #ffc107;
  animation: glowPulse 2s ease-in-out infinite;
}
.action-btn-mini.promote:hover {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 159, 0, 0.3));
  border-color: #ffc107;
  color: #fff;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.2); }
  50% { box-shadow: 0 0 15px rgba(255, 193, 7, 0.5); }
}

/* ================= PROMOTION MODAL ================= */
.promo-option { margin: 1rem 0; text-align: right; }
.promo-option label {
  display: flex; align-items: center; gap: 10px;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; cursor: pointer; transition: 0.2s;
  font-size: 0.9rem; font-weight: 700;
}
.promo-option label:hover { background: rgba(255,255,255,0.06); }
.promo-option input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: #ffc107;
}
.promo-note {
  font-size: 0.75rem; color: var(--text-dim);
  text-align: center; line-height: 1.7;
  margin: 1.2rem 0 0.5rem;
}

/* ================= TOASTS (iOS NOTIFICATION STYLE) ================= */
#kaser-toast-container { position: fixed; top: 40px; width: 100%; display: flex; justify-content: center; pointer-events: none; }
.kaser-toast {
  background: rgba(25, 25, 25, 0.9); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); padding: 1.2rem 2.5rem;
  border-radius: 50px; color: #fff; font-weight: 700;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  animation: toastDown 0.5s var(--spring-easing);
}

@keyframes toastDown { from { transform: translateY(-100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================= MOBILE ================= */
@media (max-width: 900px) {
  .hero-title { font-size: 3rem; }
  .dashboard-layout { flex-direction: column; }
  .dashboard-sidebar { width: 100%; height: auto; }
}

/* ================= DASHBOARD ACTIONS ================= */
.dash-actions { display: flex; gap: 10px; margin-top: 1.5rem; }
.dash-btn { 
  flex: 1; padding: 0.8rem; border-radius: 16px; border: none; 
  font-weight: 800; cursor: pointer; transition: 0.4s var(--spring-easing); 
  font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-edit { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid var(--glass-border); }
.btn-sold { background: var(--accent-cyan); color: #000; box-shadow: 0 5px 15px rgba(100,255,179,0.2); }
.btn-delete { background: rgba(255, 69, 58, 0.1); color: var(--accent-red); border: 1px solid rgba(255, 69, 58, 0.2); }
.dash-btn:hover { transform: scale(1.08); filter: brightness(1.2); }

/* ================= LOGIN PORTAL (iOS STYLE) ================= */
.login-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: 2rem;
}
.login-portal {
  background: var(--bg-card); backdrop-filter: blur(40px);
  border: 1px solid var(--glass-border); border-radius: 40px;
  padding: 3.5rem; width: 100%; max-width: 460px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  text-align: center; animation: popIn 0.6s var(--spring-easing);
}
.login-input-group { text-align: right; margin-bottom: 1.5rem; }
.login-input-group label { display: block; margin-bottom: 0.6rem; color: var(--text-secondary); font-weight: 700; font-size: 0.9rem; }
.kaser-input {
  width: 100%; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  padding: 1.2rem; border-radius: 18px; color: #fff; font-size: 1.1rem; outline: none;
  transition: 0.3s;
}
.kaser-input:focus { border-color: var(--accent-cyan); background: rgba(255,255,255,0.08); box-shadow: 0 0 20px rgba(100,255,179,0.1); }
select.kaser-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.2rem center;
  padding-left: 3rem;
}
select.kaser-input option { background: #1a1a2e; color: #fff; }


/* ============================================
   ICONS & CURRENCY BADGE
   ============================================ */
.cat-icon i,
.nav-icon i,
.hero-icon,
.filter-icon {
  color: var(--primary-brand);
  font-size: inherit;
}
.cat-icon i { font-size: 1.8rem; }
.nav-icon i { font-size: 1.5rem; }
.product-card-wrapper { position: relative; }

/* Original Price Strikethrough */
.original-price {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.original-price s {
  text-decoration: line-through;
  color: var(--text-dim);
}

.pill-v2 i { margin-left: 6px; color: var(--primary-brand); }
.pill-v2.active i { color: var(--primary-brand); }
.btn-kaser-exclusive i { margin-left: 6px; }
.btn-gradient i { margin-left: 8px; }
.btn-search i { margin-left: 6px; }
.welcome-badge i { margin-left: 6px; }
.s-nav a i { width: 20px; text-align: center; margin-left: 8px; }
.mobile-bottom-nav .nav-btn i { font-size: 1.4rem; display: block; margin-bottom: 2px; }

.ci { display:inline; vertical-align:middle; margin:0 1px; }

.currency-badge {
  display: inline-block;
  background: rgba(100, 255, 179, 0.08);
  border: 1px solid rgba(100, 255, 179, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--primary-brand);
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1.4;
}
.price-amount {
  font-size: inherit;
  font-weight: 900;
  color: var(--neon-price);
  text-shadow: 0 0 12px var(--neon-glow);
}
.product-card .item-price .price-amount {
  font-size: 1.5rem;
}

/* ============================================
   V2.0 - NEW HOMEPAGE STYLES
   ============================================ */

/* Main Header (sub-pages: terms, privacy, profile) */
.main-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(10, 11, 16, 0.75); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 72px;
}
.header-right, .header-left {
  display: flex; align-items: center; gap: 1.5rem;
}
.header-logo { display: flex; align-items: center; }
.header-logo img { height: 30px; width: auto; }
.header-link {
  color: rgba(255,255,255,0.65); text-decoration: none; font-size: 0.9rem;
  font-weight: 700; transition: color 0.2s; position: relative;
  padding: 0.3rem 0;
}
.header-link:hover { color: #fff; }
.header-link::after {
  content: ''; position: absolute; bottom: -4px; right: 0; width: 0; height: 2px;
  background: var(--accent-cyan); border-radius: 2px; transition: width 0.3s ease;
}
.header-link:hover::after { width: 100%; }
.header-btn-outline {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.2rem; border-radius: 99px;
  border: 1px solid rgba(100,255,179,0.3); color: var(--accent-cyan);
  font-size: 0.85rem; font-weight: 700; text-decoration: none;
  transition: 0.25s;
}
.header-btn-outline:hover {
  background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan);
}

/* Navbar V2 */
.navbar-v2 {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: rgba(10, 11, 16, 0.7); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  padding: 0 2rem; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-v2 .logo-kaser {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
}
.navbar-v2 .main-logo {
  height: 42px;
  width: auto;
  display: block;
}
.navbar-v2 .nav-center {
  display: flex; align-items: center; gap: 2rem; list-style: none;
}
.navbar-v2 .nav-center a {
  color: var(--text-secondary); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: 0.3s; position: relative;
}
.navbar-v2 .nav-center a:hover, .navbar-v2 .nav-center a.active {
  color: #fff;
}
.navbar-v2 .nav-center a::after {
  content: ''; position: absolute; bottom: -4px; right: 0;
  width: 0; height: 2px; background: var(--accent-cyan);
  transition: 0.3s; border-radius: 2px;
}
.navbar-v2 .nav-center a:hover::after,
.navbar-v2 .nav-center a.active::after { width: 100%; }
.navbar-v2 .welcome-badge {
  display: flex; align-items: center; gap: 10px;
  background: rgba(100, 255, 179, 0.08);
  border: 1px solid rgba(100, 255, 179, 0.15);
  padding: 0.5rem 1.2rem; border-radius: 50px;
  color: var(--accent-cyan); font-weight: 800; font-size: 0.9rem;
}
.welcome-badge .crown { font-size: 1.1rem; }

/* Hamburger */
.hamburger-menu { display: none; cursor: pointer; color: #fff; font-size: 1.5rem; background: none; border: none; }
.mobile-nav-overlay {
  display: none; position: fixed; top: 72px; left: 0; width: 100%;
  background: rgba(10, 11, 16, 0.95); backdrop-filter: blur(20px);
  z-index: 999; padding: 2rem; text-align: center;
  border-bottom: 1px solid var(--glass-border);
}
.mobile-nav-overlay.active { display: flex; flex-direction: column; gap: 1.5rem; }
.mobile-nav-overlay a { color: var(--text-secondary); font-weight: 700; font-size: 1.1rem; text-decoration: none; }

/* Hero V2 */
.hero-v2 {
  padding: 10rem 2rem 4rem; text-align: center; position: relative;
  background: radial-gradient(ellipse at 50% 0%, rgba(100, 255, 179, 0.04) 0%, transparent 60%);
}
.hero-v2 .hero-logo {
  font-size: 7rem; font-weight: 900; color: #fff; line-height: 1;
  letter-spacing: -4px; margin-bottom: 1rem;
}
.hero-v2 .hero-logo .dot-cyan { color: var(--accent-cyan); }
.hero-v2 .hero-sub {
  font-size: 1.3rem; color: var(--text-secondary); margin-bottom: 2.5rem;
}
.hero-v2 .search-box {
  max-width: 720px; margin: 0 auto;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 0.4rem;
  display: flex; box-shadow: 0 15px 40px rgba(0,0,0,0.4);
  transition: 0.4s var(--spring-easing);
}
.hero-v2 .search-box:focus-within { border-color: var(--accent-cyan); transform: scale(1.01); box-shadow: 0 0 30px rgba(100,255,179,0.12); }
.hero-v2 .search-box input {
  flex: 1; background: transparent; border: none; padding: 1.2rem 1.5rem;
  color: #fff; font-size: 1.05rem; outline: none; font-weight: 600;
}
.hero-v2 .search-box input::placeholder { color: var(--text-dim); }
.hero-v2 .search-box button {
  background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  border: none; border-radius: 12px; padding: 0 2.5rem;
  color: #fff; font-weight: 800; font-size: 1rem; cursor: pointer;
  transition: 0.3s; white-space: nowrap;
}
.hero-v2 .search-box button:hover { transform: scale(0.96); opacity: 0.9; }

.bp-hero-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 1.2rem auto 0; padding: 0.9rem 2rem;
  background: linear-gradient(135deg, rgba(100,255,179,0.08), rgba(100,100,255,0.08));
  border: 1px solid rgba(100,255,179,0.15);
  border-radius: 16px; color: #64ffb3; font-weight: 800; font-size: 0.95rem;
  text-decoration: none; transition: 0.3s; max-width: 520px;
}
.bp-hero-link:hover { background: rgba(100,255,179,0.12); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(100,255,179,0.1); }
.bp-hero-link i { font-size: 1.2rem; }

/* Hero Marketing Carousel */
.hero-carousel {
  max-width: 720px;
  margin: 1.8rem auto 0;
  position: relative;
  text-align: center;
}
.hero-carousel-track {
  position: relative;
  height: 56px;
  overflow: hidden;
  background: rgba(100, 255, 179, 0.04);
  border: 1px solid rgba(100, 255, 179, 0.1);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-carousel-item {
  position: absolute;
  width: 100%;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  white-space: nowrap;
}
.hero-carousel-item.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-carousel-item.exit {
  opacity: 0;
  transform: translateY(-24px);
}
.hero-carousel-item .hc-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(100,255,179,0.3));
}
.hero-carousel-item .hc-text {
  color: var(--accent-cyan);
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 0 20px rgba(100, 255, 179, 0.15);
}
.hero-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 0.6rem;
}
.hero-carousel-dots .hc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(100, 255, 179, 0.15);
  transition: 0.3s;
  cursor: pointer;
}
.hero-carousel-dots .hc-dot.active {
  background: var(--accent-cyan);
  box-shadow: 0 0 8px rgba(100, 255, 179, 0.4);
  width: 18px;
  border-radius: 3px;
}
@media (max-width: 600px) {
  .hero-carousel-track { height: 72px; }
  .hero-carousel-item { white-space: normal; flex-direction: column; gap: 4px; padding: 0 1rem; }
  .hero-carousel-item .hc-text { font-size: 0.8rem; line-height: 1.4; }
}

/* Filters Bar V2 */
.filters-bar {
  padding: 0 2rem 2rem; margin-top: -1rem;
}
.filters-bar .filters-inner {
  max-width: 1100px; margin: 0 auto;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  padding: 1.2rem 1.8rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.filters-bar .filter-group {
  display: flex; gap: 0.8rem; flex-wrap: wrap; flex: 1;
}
.filters-bar .filter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  padding: 0.75rem 1.2rem; border-radius: 12px; color: #fff; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; outline: none; min-width: 140px;
  font-family: inherit; transition: 0.3s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  padding-left: 2.5rem;
}
.filters-bar .filter-select:hover { border-color: rgba(255,255,255,0.15); }
.filters-bar .filter-select:focus { border-color: var(--accent-cyan); }
.filters-bar .filter-select option { background: #1a1a2e; color: #fff; }

/* Global select dark theme override */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select option {
  background: #1a1a2e;
  color: #fff;
}
.btn-kaser-exclusive {
  background: transparent; border: 1.5px solid rgba(100, 255, 179, 0.3);
  color: #64ffb3; padding: 0.75rem 1.5rem; border-radius: 12px;
  font-weight: 800; font-size: 0.85rem; cursor: pointer;
  transition: 0.3s; white-space: nowrap; font-family: inherit;
}
.btn-kaser-exclusive:hover { background: rgba(100, 255, 179, 0.06); border-color: #64ffb3; }
.btn-kaser-exclusive.active {
  background: rgba(100, 255, 179, 0.12); border-color: #64ffb3;
  box-shadow: 0 0 20px rgba(100, 255, 179, 0.15);
}

/* Categories Grid */
.categories-section { padding: 0 2rem 2rem; }
.categories-section .section-header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto 1.2rem;
}
.categories-section .section-header h2 {
  font-size: 1.3rem; font-weight: 900; color: #fff;
}
.categories-section .section-header a {
  color: var(--text-secondary); font-size: 0.85rem; font-weight: 700; text-decoration: none;
}
.categories-scroll {
  display: flex; gap: 1.2rem; overflow-x: auto;
  max-width: 1100px; margin: 0 auto;
  padding: 0.5rem 0.5rem 1rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.categories-scroll.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}
.categories-scroll::-webkit-scrollbar { display: none; }
.cat-card {
  flex-shrink: 0; width: 90px;
  text-align: center; cursor: pointer; transition: 0.3s;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center;
  user-select: none;
  -webkit-user-select: none;
}
.cat-card:hover .cat-icon-wrap {
  transform: scale(1.08);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 20px rgba(100, 255, 179, 0.25);
}
.cat-card:hover .cat-icon-wrap::before { opacity: 1; }
.cat-card:hover .cat-name { color: var(--accent-cyan); text-shadow: 0 0 12px rgba(100,255,179,0.2); }
.cat-card.active .cat-icon-wrap {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 25px rgba(100, 255, 179, 0.35), inset 0 0 10px rgba(100,255,179,0.05);
  transform: scale(1.08);
}
.cat-card.active .cat-icon-wrap::before { opacity: 1; }
.cat-card.active .cat-icon-wrap img {
  filter: invert(1) brightness(2.5) drop-shadow(0 0 6px rgba(100,255,179,0.5));
}
.cat-card.active .cat-name { color: var(--accent-cyan); font-weight: 900; }
.cat-card .cat-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.cat-card .cat-name {
  font-weight: 700; font-size: 0.75rem;
  color: var(--text-secondary);
  transition: 0.3s;
  margin-top: 2px;
}

/* Listings Grid V2 */
.listings-section { padding: 2rem; }
.listings-section .listings-header {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1100px; margin: 0 auto 1.5rem;
}
.listings-section .listings-header h2 {
  font-size: 1.3rem; font-weight: 900; color: #fff;
}
.listings-grid-v2 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem; max-width: 1100px; margin: 0 auto;
}

/* Product Card V2 */
.product-card {
  background: rgba(255,255,255,0.02); backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  overflow: hidden; transition: 0.4s var(--spring-easing);
  text-decoration: none; color: inherit; display: block;
  position: relative; cursor: pointer;
}
.product-card:hover { transform: translateY(-6px); border-color: rgba(100,255,179,0.2); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.product-card .card-img-wrap {
  background: #fff; padding: 1.5rem; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.product-card .card-img-wrap img { max-width: 85%; max-height: 85%; object-fit: contain; }
.product-card .condition-badge {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 12px; border-radius: 8px; font-size: 0.7rem;
  font-weight: 900; z-index: 2;
}
.product-card .condition-badge.new {
  background: rgba(100, 255, 179, 0.15); color: var(--accent-cyan);
  border: 1px solid rgba(100, 255, 179, 0.2);
}
.product-card .condition-badge.used {
  background: rgba(100, 255, 179, 0.12); color: #64ffb3;
  border: 1px solid rgba(100, 255, 179, 0.15);
}
.product-card .card-body {
  padding: 1.2rem; position: relative;
}
.product-card .card-body .item-title {
  font-weight: 800; font-size: 1rem; color: #fff;
  margin-bottom: 0.4rem; line-height: 1.3;
}
.product-card .card-body .item-location {
  font-size: 0.8rem; color: var(--text-secondary);
  margin-bottom: 0.6rem; display: flex; align-items: center; gap: 4px;
}
.product-card .card-body .item-price {
  font-size: 1.5rem; font-weight: 900; color: var(--neon-price);
  text-shadow: 0 0 12px var(--neon-glow);
}


/* Kaser Fire Badge */
.kaser-fire-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: linear-gradient(135deg, #64ffb3, var(--accent-purple));
  color: #000; padding: 4px 10px; border-radius: 8px;
  font-size: 0.65rem; font-weight: 900;
  box-shadow: 0 0 20px rgba(100, 255, 179, 0.4);
  animation: firePulse 2s ease-in-out infinite;
}
@keyframes firePulse {
  0%, 100% { box-shadow: 0 0 15px rgba(204,255,0,0.3); }
  50% { box-shadow: 0 0 25px rgba(204,255,0,0.6); }
}

/* ============================================
   V2.0 - ADD LISTING PAGE STYLES
   ============================================ */

.add-listing-page {
  min-height: 100vh; display: flex; flex-direction: column;
}

/* Sidebar for add-listing page */
.add-listing-sidebar {
  position: fixed; right: 0; top: 0; width: 280px; height: 100vh;
  background: rgba(255,255,255,0.02); backdrop-filter: blur(16px);
  border-left: 1px solid var(--glass-border);
  padding: 2rem; display: flex; flex-direction: column;
  z-index: 100;
}
.add-listing-sidebar .s-logo {
  font-size: 1.6rem; font-weight: 900; color: #fff;
  margin-bottom: 2rem; text-align: center; text-decoration: none; display: block;
}
.add-listing-sidebar .s-logo .dot-cyan { color: var(--accent-cyan); }
.add-listing-sidebar .s-nav {
  display: flex; flex-direction: column; gap: 0.3rem; flex: 1;
}
.add-listing-sidebar .s-nav a {
  padding: 1rem 1.2rem; border-radius: 12px;
  color: var(--text-secondary); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: 0.3s;
  display: flex; align-items: center; gap: 12px;
}
.add-listing-sidebar .s-nav a:hover { background: rgba(255,255,255,0.03); color: #fff; }
.add-listing-sidebar .s-nav a.active {
  background: rgba(100,255,179,0.06); color: var(--accent-cyan);
  border: 1px solid rgba(100,255,179,0.1);
}
.add-listing-sidebar .s-nav a.logout {
  margin-top: auto; color: var(--text-dim);
}
.add-listing-sidebar .s-nav a.logout:hover { color: var(--accent-red); }

/* Main content for add-listing page */
.add-listing-main {
  margin-right: 280px; padding: 2.5rem 3.5rem; flex: 1;
  width: calc(100% - 280px);
}

/* Condition Pills V2 - Interactive */
.condition-pills-v2 {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.pill-v2 {
  flex: 1; min-width: 120px; text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: var(--radius); padding: 14px 10px;
  cursor: pointer; color: var(--text-secondary);
  font-weight: 700; font-size: 0.9rem;
  transition: 0.3s; user-select: none;
}
.pill-v2:hover { background: rgba(255,255,255,0.06); }
.pill-v2.active {
  border-color: var(--accent-cyan); color: var(--accent-cyan);
  background: rgba(100,255,179,0.06);
  box-shadow: 0 0 15px rgba(100,255,179,0.08);
}
.pill-v2 .pill-check {
  display: none; width: 8px; height: 8px;
  border: 2px solid var(--accent-cyan); border-radius: 50%;
  margin: 0 auto; margin-top: 6px;
}
.pill-v2.active .pill-check { display: block; }

/* Image Upload Zone V2 */
.upload-zone {
  border: 1.5px dashed rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 3rem 2rem;
  text-align: center; cursor: pointer;
  background: rgba(255,255,255,0.01);
  transition: 0.3s;
}
.upload-zone:hover { border-color: var(--accent-cyan); background: rgba(100,255,179,0.02); }

/* ============================
   TOY CAMERA UPLOADER
   ============================ */
.toy-camera-wrap {
  --cam-main: #64ffb3;
  --cam-dark: #00cc88;
  --cam-shutter: #FF3B30;
  --cam-lens-bg: #1a1a2e;
  position: relative;
  width: 5em;
  height: 4.5em;
  margin: 0 auto 1.2rem;
  perspective: 1200px;
  cursor: pointer;
}
.toy-camera-body {
  position: absolute;
  inset: 0;
  background: var(--cam-main);
  border-radius: 1.2em;
  transform-style: preserve-3d;
  transform: translateZ(20px);
  transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  box-shadow: 0 0.6em 0 var(--cam-dark), 0 1em 2em rgba(0,0,0,0.2);
  z-index: 10;
}
.toy-camera-body::before {
  content: ''; position: absolute; top: 20%; left: 0;
  width: 100%; height: 15%; background: var(--cam-dark);
}
.toy-camera-btn {
  position: absolute; top: -0.6em; right: 15%;
  width: 1.2em; height: 0.8em; background: var(--cam-shutter);
  border-radius: 0.3em 0.3em 0 0;
  box-shadow: 0 0.2em 0 #cc3643;
  transition: all 0.2s ease;
}
.toy-camera-lens {
  position: absolute; top: 50%; left: 50%;
  width: 55%; height: 60%;
  background: var(--cam-lens-bg);
  border-radius: 50%;
  transform: translate(-50%, -40%) translateZ(15px);
  border: 0.3em solid var(--cam-dark);
  box-shadow: 0 0.4em 0.8em rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.toy-camera-lens::after {
  content: ''; position: absolute; top: 15%; left: 20%;
  width: 30%; height: 20%; background: rgba(255,255,255,0.15); border-radius: 50%; transform: rotate(-25deg);
}
.toy-camera-photo {
  position: absolute; bottom: 10%; left: 12%;
  width: 75%; height: 75%;
  background: #fff; border-radius: 0.4em;
  transform: translateZ(-10px) translateY(0);
  transition: all 0.7s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.1);
  opacity: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.3em;
  font-size: 8px; color: #aaa; overflow: hidden;
}
.toy-camera-photo img {
  width: 100%; height: 70%; object-fit: cover; border-radius: 0.1em;
}
.toy-camera-photo span {
  font-size: 0.5em; margin-top: 0.2em; color: #888;
}
.toy-camera-wrap:hover .toy-camera-body {
  transform: translateZ(40px) rotateX(10deg);
}
.toy-camera-wrap:active .toy-camera-body {
  transform: translateZ(10px) scale(0.95);
}
.toy-camera-wrap:active .toy-camera-btn {
  transform: translateY(0.3em); box-shadow: 0 0.1em 0 #cc3643;
}
.toy-camera-wrap.checked .toy-camera-body {
  transform: translateZ(30px) translateY(-10%);
}
.toy-camera-wrap.checked .toy-camera-photo {
  opacity: 1;
  transform: translateZ(-30px) translateY(110%) rotate(5deg);
  animation: toy-photo-bounce 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.toy-camera-wrap.checked .toy-camera-lens::before {
  content: ''; position: absolute; inset: 0; background: #fff; opacity: 0;
  animation: toy-lens-flash 0.4s ease-out;
}
@keyframes toy-photo-bounce {
  0% { transform: translateZ(-30px) translateY(0); }
  100% { transform: translateZ(-30px) translateY(110%) rotate(5deg); }
}
@keyframes toy-lens-flash {
  0% { opacity: 1; transform: scale(0.1); }
  50% { opacity: 0.8; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2); }
}
/* old camera-box (kept for compatibility) */
.upload-zone .camera-box {
  width: 60px; height: 60px;
  background: rgba(100,255,179,0.08); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: var(--accent-cyan); font-size: 1.5rem;
}
.upload-zone .upload-text {
  font-weight: 800; font-size: 1.1rem; color: #fff; margin-bottom: 0.3rem;
}
.upload-zone .upload-sub {
  font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1.2rem;
}
.upload-zone .btn-browse {
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  color: #fff; padding: 10px 24px; border-radius: 12px;
  font-weight: 700; font-size: 0.9rem; cursor: pointer;
  display: inline-block; transition: 0.3s;
}
.upload-zone .btn-browse:hover { background: rgba(255,255,255,0.1); }

/* Gradient Button */
.btn-gradient {
  width: 100%; padding: 18px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  color: #fff; border: none; border-radius: var(--radius);
  font-size: 1.1rem; font-weight: 900; cursor: pointer;
  transition: 0.3s; font-family: inherit;
  box-shadow: 0 10px 40px rgba(100,255,179,0.25);
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 15px 50px rgba(100,255,179,0.35); }
.btn-gradient:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Mobile Bottom Nav */
.mobile-bottom-nav { display: none; }

/* ============================================
   V2.0 - HOMEPAGE RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .navbar-v2 .nav-center { display: none; }
  .navbar-v2 .welcome-badge { display: none; }
  .hamburger-menu { display: block; }
  .hero-v2 .hero-logo { font-size: 4rem; }
  .hero-v2 .search-box { flex-direction: column; }
  .hero-v2 .search-box button { width: 100%; padding: 1rem; }
  .listings-grid-v2 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .product-card .card-img-wrap { height: 150px; }
  .product-card .card-body .item-price { font-size: 1.2rem; }
  .filters-bar .filters-inner { flex-direction: column; align-items: stretch; }
  .filters-bar .filter-group { justify-content: center; }
  .categories-scroll { gap: 0.6rem; padding: 0.5rem 0.5rem 0.8rem; }
  .cat-card { width: 72px; }
  .cat-card .cat-icon-wrap { width: 56px; height: 56px; }
  .cat-card .cat-icon { font-size: 1.5rem; }
  .cat-card .cat-name { font-size: 0.65rem; }

  /* Add Listing Page Mobile */
  .add-listing-sidebar { display: none; }
  .add-listing-main { margin-right: 0; padding: 1.5rem; padding-bottom: 7rem; width: 100%; }
  .mobile-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 2000;
    height: 75px; background: rgba(10,11,16,0.9); backdrop-filter: blur(50px);
    border-top: 1px solid var(--glass-border);
    justify-content: space-around; align-items: center;
    padding-bottom: 10px;
  }
  .mobile-bottom-nav .nav-btn {
    display: flex; flex-direction: column; align-items: center;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.7rem; font-weight: 800; gap: 4px; transition: 0.3s;
  }
  .mobile-bottom-nav .nav-btn .nav-icon { font-size: 1.5rem; }
  .mobile-bottom-nav .nav-btn.active { color: var(--accent-cyan); }
  .pill-v2 { min-width: calc(50% - 5px); }
}

/* ================= PREMIUM ADD LISTING FORM ================= */
.premium-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.row-label {
  width: 150px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  text-align: left;
}

.row-input {
  flex: 1;
}

.form-header-mobile {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* Only show on mobile */
}

/* Condition Pills */
.condition-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.condition-pill {
  flex: 1;
  min-width: 120px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 12px;
  cursor: pointer;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.9rem;
  transition: 0.3s;
}

.condition-pill input {
  display: none;
}

.condition-pill:hover {
  background: rgba(255,255,255,0.05);
}

.condition-pill.active-pill {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(100, 255, 179, 0.05);
}

/* Price Input Wrapper */
.price-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.price-input-wrapper .kaser-input {
  padding-left: 50px; /* Space for currency tag */
}

.currency-tag {
  position: absolute;
  left: 15px;
  color: var(--text-dim);
  font-weight: 800;
  font-size: 0.9rem;
}

/* Premium Dropzone */
.premium-dropzone {
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: rgba(255,255,255,0.01);
  transition: 0.3s;
  display: block;
}

.premium-dropzone:hover {
  border-color: var(--accent-cyan);
  background: rgba(100, 255, 179, 0.02);
}

.camera-icon-box {
  width: 60px;
  height: 60px;
  background: rgba(100, 255, 179, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
  color: var(--accent-cyan);
}

.btn-secondary {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  transition: 0.3s;
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

/* Gradient Button */
.btn-primary-gradient {
  width: 100%;
  padding: 18px;
  background: linear-gradient(90deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 10px 30px rgba(100, 255, 179, 0.3);
}

.btn-primary-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(100, 255, 179, 0.4);
}

@media (max-width: 900px) {
  .dashboard-sidebar { display: none; }
  .add-listing-sidebar { display: none; }
  
  .dashboard-main { 
    max-width: 100vw !important; 
    padding: 1.5rem !important; 
    padding-bottom: 10rem !important; 
    margin: 0 !important;
  }
  /* Fix: space above bottom nav for add-listing standalone page */
  .add-listing-main {
    padding-bottom: 110px !important;
  }
  /* Fix submit button hidden behind bottom nav on mobile */
  .form-section .submit-btn,
  .form-section button[type="submit"],
  #section-add-form .submit-btn,
  #section-add-form button[type="submit"] {
    position: sticky;
    bottom: 100px;
    z-index: 100;
    margin-top: 1.5rem;
  }

  .dashboard-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    height: 85px;
    background: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(50px);
    border-top: 1px solid var(--glass-border);
    z-index: 2000;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  }

  .nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 6px;
    transition: 0.3s;
    position: relative;
  }

  .nav-btn.active { 
    color: var(--accent-cyan);
    text-shadow: 0 0 15px rgba(100, 255, 179, 0.5);
  }

  .nav-btn.active .btn-icon {
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px var(--accent-cyan));
  }

  .btn-icon { font-size: 1.8rem; transition: 0.3s var(--spring-easing); }

  .msg-badge {
    position: absolute; top: -5px; right: -5px;
    background: #007aff; color: #fff;
    font-size: 0.65rem; padding: 2px 8px;
    border-radius: 20px; border: 2px solid #000;
    font-weight: 900;
  }

  /* Adjust Stats and Cards for Mobile */
  .stats-row { 
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    padding-bottom: 10px !important;
    gap: 0.8rem !important; 
    grid-template-columns: none !important;
  }
  .stat-card {
    min-width: 140px !important;
    padding: 1.5rem 1rem !important;
  }

  .kaser-card.dashboard-item { 
    flex-direction: row !important; 
    align-items: center !important; 
    gap: 1.5rem !important; 
    padding: 1rem !important;
  }

  .card-image-wrapper { 
    width: 100px !important; 
    height: 100px !important; 
    border-radius: var(--radius) !important;
  }

  .item-details { text-align: right !important; align-items: flex-start !important; }
  .item-meta { justify-content: flex-start !important; }
  
  .item-title-text { font-size: 1.1rem !important; }
  .item-price-text { font-size: 1.4rem !important; }
  
  /* Adjust Form for Mobile */
  .back-btn { display: block; }
  .form-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .row-label { width: 100%; text-align: right; margin-bottom: 5px; }
  .row-input { width: 100%; }
  
  .condition-pill { min-width: calc(50% - 5px); }
}

/* ================= iOS SETTINGS TOGGLE ================= */
.ios-switch-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.ios-switch-label {
  font-weight: 700;
  color: #fff;
  font-size: 0.95rem;
}

.ios-switch {
  position: relative;
  display: inline-block;
  width: 58px;
  height: 32px;
}

.ios-switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.ios-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 50px;
  background: rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ios-slider:before {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  right: 3px;
  top: 2px;
  background: rgba(255,255,255,0.6);
  border-radius: 50%;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.ios-switch input:checked + .ios-slider {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  box-shadow: 0 0 14px rgba(100,255,179,0.35);
}

.ios-switch input:checked + .ios-slider:before {
  transform: translateX(-26px);
  background: #fff;
}

/* ============================
   NEON CHECKBOX (علامة صح نيون)
   ============================ */
.neon-check {
  --nc-primary: #64ffb3;
  --nc-size: 28px;
  position: relative;
  width: var(--nc-size);
  height: var(--nc-size);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-block;
}
.neon-check input { display: none; }
.neon-check-box {
  position: absolute;
  inset: 0;
  background: rgba(10,11,16,0.8);
  border-radius: 6px;
  border: 2px solid rgba(100,255,179,0.25);
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.neon-check:hover .neon-check-box { border-color: var(--nc-primary); transform: scale(1.05); }
.neon-check input:checked ~ .neon-check-box {
  border-color: var(--nc-primary);
  background: rgba(100,255,179,0.08);
  box-shadow: 0 0 16px rgba(100,255,179,0.2), inset 0 0 8px rgba(100,255,179,0.06);
}
.neon-check-svg {
  width: 70%;
  height: 70%;
  fill: none;
  stroke: var(--nc-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s ease;
}
.neon-check input:checked ~ .neon-check-box .neon-check-svg {
  stroke-dashoffset: 0;
  transform: scale(1.1);
}
.neon-check-glow {
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  background: var(--nc-primary);
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.15);
  transition: opacity 0.4s ease;
}
.neon-check input:checked ~ .neon-check-glow { opacity: 0.15; }
.neon-check-label {
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.neon-check-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
}

/* ============================
   WA NOTIFICATION PREVIEW CARD
   ============================ */
.wa-notif-preview {
  width: 100%;
  max-width: 340px;
  margin: 1rem auto 0;
  background: rgba(45,45,50,0.85);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: 0.3s ease;
}
.wa-notif-preview:hover { transform: scale(1.02); border-color: rgba(100,255,179,0.15); }
.wa-notif-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  font-size: 1.2rem;
  color: #fff;
  font-weight: 900;
}
.wa-notif-icon img {
  width: 28px; height: 28px;
  object-fit: contain;
}
.wa-notif-content { flex: 1; min-width: 0; }
.wa-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.wa-notif-app {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.wa-notif-time {
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
}
.wa-notif-body {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ============================================
   CROWD-HAGGLE ENGINE
   ============================================ */
.haggle-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  z-index: 2000; display: none; align-items: center; justify-content: center;
}
.haggle-overlay.active { display: flex; }
.haggle-modal {
  background: rgba(20,20,25,0.85); backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px; padding: 2.5rem; max-width: 480px; width: 90%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-height: 90vh; overflow-y: auto;
}
.haggle-modal .modal-close {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.06); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: 0.3s;
}
.haggle-modal .modal-close:hover { background: rgba(255,255,255,0.12); }
.haggle-header { text-align: center; margin-bottom: 2rem; position: relative; }
.haggle-header .haggle-icon { font-size: 2.5rem; color: var(--primary-brand); margin-bottom: 0.5rem; }
.haggle-header h2 { font-size: 1.6rem; font-weight: 900; margin-bottom: 0.3rem; }
.haggle-header p { color: var(--text-secondary); font-size: 0.9rem; }

.haggle-product-info {
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,0.03); border-radius: 16px; padding: 1rem;
  margin-bottom: 1.5rem;
}
.haggle-product-info img {
  width: 60px; height: 60px; border-radius: 12px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06);
}
.haggle-product-info .hp-name { font-weight: 800; font-size: 1rem; }
.haggle-product-info .hp-price { color: var(--primary-brand); font-weight: 900; font-size: 1.1rem; }

/* Price Slider Section */
.haggle-slider-section { margin-bottom: 1.5rem; }
.haggle-price-display {
  text-align: center; margin-bottom: 1.2rem;
}
.haggle-price-display .hpd-label {
  font-size: 0.75rem; color: var(--text-dim); margin-bottom: 4px;
}
.haggle-price-display .hpd-value {
  font-size: 2.8rem; font-weight: 900; color: var(--primary-brand);
  text-shadow: 0 0 25px rgba(100,255,179,0.15);
  direction: ltr;
}
.haggle-price-display .hpd-currency {
  font-size: 1rem; font-weight: 700; color: var(--text-secondary); margin-right: 4px;
}
.haggle-range-wrapper {
  position: relative; padding: 0.5rem 0; margin-bottom: 1rem;
}
.haggle-range-wrapper .range-labels {
  display: flex; justify-content: space-between;
  font-size: 0.7rem; color: var(--text-dim); margin-top: 6px;
}

/* Custom Range Slider */
input[type="range"].haggle-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px; outline: none;
  cursor: pointer; direction: ltr;
}
input[type="range"].haggle-slider::-webkit-slider-track {
  -webkit-appearance: none; height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
}
input[type="range"].haggle-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  background: var(--primary-brand);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(100,255,179,0.4), 0 0 0 6px rgba(100,255,179,0.12);
  transition: 0.15s ease;
  margin-top: -9px;
}
input[type="range"].haggle-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 30px rgba(100,255,179,0.6), 0 0 0 8px rgba(100,255,179,0.15);
}
input[type="range"].haggle-slider::-moz-range-track {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 10px; border: none;
}
input[type="range"].haggle-slider::-moz-range-thumb {
  width: 24px; height: 24px;
  background: var(--primary-brand); border: none;
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 0 20px rgba(100,255,179,0.4);
}
input[type="range"].haggle-slider::-moz-range-progress {
  height: 6px; background: var(--primary-brand);
  border-radius: 10px;
}

/* Manual Number Input */
.haggle-input-wrapper {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 0.6rem 1.2rem;
  margin-bottom: 0.5rem;
}
.haggle-input-wrapper .hi-label {
  font-size: 0.8rem; color: var(--text-dim); font-weight: 700; white-space: nowrap;
}
.haggle-input-wrapper input[type="number"].haggle-number-input {
  flex: 1; background: transparent; border: none;
  color: #fff; font-size: 1.3rem; font-weight: 900;
  outline: none; direction: ltr; text-align: center;
  padding: 0.3rem 0;
  -moz-appearance: textfield;
}
.haggle-input-wrapper input[type="number"].haggle-number-input::-webkit-outer-spin-button,
.haggle-input-wrapper input[type="number"].haggle-number-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.haggle-input-wrapper .hi-currency {
  font-size: 0.85rem; font-weight: 800; color: var(--primary-brand); white-space: nowrap;
}
.haggle-range-error {
  font-size: 0.75rem; color: #FF3B30; text-align: center;
  min-height: 1.2rem; margin-top: 4px;
  transition: 0.3s;
}

/* Phone Input */
.haggle-phone { margin-bottom: 1.5rem; }
.haggle-phone label {
  display: block; font-weight: 700; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 8px;
}
.haggle-phone input {
  width: 100%; padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; color: #fff; font-size: 1rem; outline: none;
  direction: ltr; text-align: left;
}
.haggle-phone input:focus {
  border-color: var(--primary-brand); box-shadow: 0 0 20px rgba(100,255,179,0.08);
}

/* Submit Button */
.btn-haggle-submit {
  width: 100%; padding: 1.2rem;
  background: linear-gradient(135deg, var(--primary-brand) 0%, var(--accent-purple) 100%);
  border: none; border-radius: 16px; color: #000; font-weight: 900;
  font-size: 1.15rem; cursor: pointer; transition: 0.3s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-haggle-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(100,255,179,0.25); }
.btn-haggle-submit:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Haggle Trigger Button */
.btn-haggle-trigger {
  width: 100%; padding: 1.2rem;
  background: rgba(100,255,179,0.1); border: 2px solid var(--primary-brand);
  border-radius: 16px; color: var(--primary-brand); font-weight: 900;
  font-size: 1.1rem; cursor: pointer; transition: 0.3s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 1rem;
}
.btn-haggle-trigger:hover {
  background: var(--primary-brand); color: #000;
  box-shadow: 0 10px 30px rgba(100,255,179,0.2);
}

/* ============================================
   OFFER INBOX
   ============================================ */
.inbox-page-container { padding: 6rem 2rem 4rem; min-height: 100vh; }
.inbox-header { margin-bottom: 2.5rem; }
.inbox-header h1 { font-size: 1.8rem; font-weight: 900; }
.inbox-header p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 5px; }
.inbox-stats {
  display: flex; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.inbox-stat {
  flex: 1; min-width: 120px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 1.2rem; text-align: center;
}
.inbox-stat .stat-number { font-size: 1.8rem; font-weight: 900; color: var(--primary-brand); }
.inbox-stat .stat-label { font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; }

.offer-card {
  background: rgba(255,255,255,0.03); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px; padding: 1.5rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 1.2rem; transition: 0.3s;
}
.offer-closed { opacity: 0.5; }
.offer-closed .oc-actions { display: none; }
.offer-card:hover { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }
.offer-card .oc-image {
  width: 70px; height: 70px; border-radius: 14px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.offer-card .oc-body { flex: 1; min-width: 0; }
.offer-card .oc-title { font-weight: 800; font-size: 1rem; margin-bottom: 4px; }
.offer-card .oc-price {
  font-size: 1.4rem; font-weight: 900; color: var(--primary-brand);
  text-shadow: 0 0 15px rgba(100,255,179,0.15);
}
.offer-card .oc-meta {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px;
}
.offer-card .oc-status {
  display: inline-block; padding: 3px 12px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 800;
}
.offer-card .oc-status.pending {
  background: rgba(100,255,179,0.12); color: var(--primary-brand);
  border: 1px solid rgba(100,255,179,0.2);
  animation: pulse-badge 2s infinite;
}
.offer-card .oc-status.accepted { background: rgba(52,199,89,0.12); color: #34C759; border: 1px solid rgba(52,199,89,0.2); }
.offer-card .oc-status.declined { background: rgba(255,59,48,0.1); color: #FF3B30; border: 1px solid rgba(255,59,48,0.15); }

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.offer-card .oc-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
.offer-card .oc-btn {
  padding: 0.7rem 1.2rem; border-radius: 12px; font-weight: 800;
  font-size: 0.8rem; border: none; cursor: pointer; transition: 0.3s;
  display: flex; align-items: center; gap: 6px; text-decoration: none;
}
.offer-card .oc-btn-accept {
  background: #25D366; color: #fff;
}
.offer-card .oc-btn-accept:hover { transform: scale(0.95); box-shadow: 0 5px 20px rgba(37,211,102,0.3); }
.offer-card .oc-btn-decline {
  background: rgba(255,59,48,0.1); color: #FF3B30; border: 1px solid rgba(255,59,48,0.2);
}
.offer-card .oc-btn-decline:hover { background: rgba(255,59,48,0.2); }

.offer-card .oc-phone {
  font-size: 0.8rem; color: var(--text-secondary);
  direction: ltr; text-align: left;
}

/* Notification Badge */
.notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--primary-brand); color: #000;
  border-radius: 10px; font-size: 0.65rem; font-weight: 900;
  margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 12px rgba(100,255,179,0.4);
}

/* ============================================
   SMART INSIGHTS
   ============================================ */
.insights-card {
  background: rgba(100,255,179,0.03); border: 1px solid rgba(100,255,179,0.12);
  border-radius: 20px; padding: 1.5rem; margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap;
}
.insights-card .ic-body { flex: 1; min-width: 200px; }
.insights-card .ic-icon { font-size: 2rem; color: var(--primary-brand); margin-bottom: 0.5rem; }
.insights-card .ic-title { font-weight: 900; font-size: 1rem; margin-bottom: 4px; color: #fff; }
.insights-card .ic-text { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.insights-card .ic-action {
  flex-shrink: 0; padding: 0.8rem 1.5rem;
  background: rgba(100,255,179,0.08); border: 1px solid var(--primary-brand);
  border-radius: 14px; color: var(--primary-brand); font-weight: 800;
  font-size: 0.85rem; cursor: pointer; transition: 0.3s;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.insights-card .ic-action:hover {
  background: var(--primary-brand); color: #000;
  box-shadow: 0 5px 20px rgba(100,255,179,0.2);
}

/* ============================================
   PRICE DROP BADGE
   ============================================ */
.price-drop-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(100,255,179,0.12); backdrop-filter: blur(8px);
  border: 1px solid rgba(100,255,179,0.2);
  padding: 3px 10px; border-radius: 8px;
  font-size: 0.65rem; font-weight: 800; color: var(--primary-brand);
  display: inline-flex; align-items: center; gap: 4px;
  animation: fade-in-up 0.5s ease;
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   FADE OUT ANIMATION
   ============================================ */
.fade-out {
  opacity: 0 !important;
  transform: translateX(20px) !important;
  transition: opacity 0.4s ease, transform 0.4s ease !important;
  pointer-events: none !important;
}

/* ==========================================
   PLEDGE BOX (العهدة)
   ========================================== */
.quran-verse {
  color: #d4a843;
  font-weight: 800;
  font-size: 0.9rem;
  display: inline-block;
  margin-bottom: 4px;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: var(--glass-border);
  border-radius: var(--radius);
}

/* ==========================================
   PARTNER SHOP CARDS
   ========================================== */
.partner-shop-card {
  padding: 1.2rem;
  margin-bottom: 1rem;
  border-radius: 16px;
}
.service-tag {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(100,255,179,0.08);
  color: var(--primary-brand);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid rgba(100,255,179,0.12);
}

/* ==========================================
   COMMISSION WHATSAPP BUTTON
   ========================================== */
.commission-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 1.2rem;
  background: #25D366;
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  border-radius: 16px;
  text-decoration: none;
  transition: 0.3s;
  box-shadow: 0 4px 20px rgba(37,211,102,0.25);
}
.commission-wa-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37,211,102,0.35);
}

@media (max-width: 700px) {
  .offer-card { flex-direction: column; align-items: flex-start; }
  .offer-card .oc-actions { width: 100%; }
  .offer-card .oc-btn { flex: 1; justify-content: center; }
  .haggle-price-display .hpd-value { font-size: 2rem; }
  .haggle-input-wrapper { padding: 0.5rem 0.8rem; }
}

/* ==========================================
   BNPL BADGE
   ========================================== */
.bnpl-badge {
  display: flex; align-items: center; gap: 4px;
  background: rgba(100,255,179,0.08);
  border: 1px solid rgba(100,255,179,0.15);
  border-radius: 6px; padding: 2px 5px; margin-top: 4px;
  font-size: 0.6rem; font-weight: 700; color: var(--accent-cyan);
  width: fit-content; direction: ltr;
}
.bnpl-badge .bnpl-logo { width: auto; flex-shrink: 0; display: block; }
.bnpl-badge .bnpl-text { font-size: 0.55rem; white-space: nowrap; direction: rtl; }
.bnpl-badge .bnpl-sep { width: 1px; height: 10px; background: rgba(100,255,179,0.2); flex-shrink: 0; }

/* BNPL on item detail page */
.bnpl-detail-section {
  background: rgba(100,255,179,0.03);
  border: 1px solid rgba(100,255,179,0.1);
  border-radius: 16px; padding: 1.2rem 1.5rem; margin-top: 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.bnpl-detail-section .bnpl-label {
  font-size: 0.8rem; color: var(--text-secondary); font-weight: 700;
}
.bnpl-detail-section .bnpl-monthly {
  font-size: 1.4rem; font-weight: 900; color: var(--accent-cyan);
}
.bnpl-detail-section .bnpl-logos {
  display: flex; align-items: center; gap: 8px;
  margin-right: auto;
}
.bnpl-detail-section .bnpl-logos img { height: 24px; width: auto; }

/* ==========================================
   SCARCITY / SOCIAL-PROOF TRIGGERS
   ========================================== */
.scarcity-hot {
  position: absolute; bottom: 30px; left: 8px; z-index: 3;
  background: linear-gradient(135deg, #FF3B30, #FF9500);
  color: #fff; padding: 2px 8px; border-radius: 6px;
  font-size: 0.6rem; font-weight: 900;
  display: inline-flex; align-items: center; gap: 3px;
  box-shadow: 0 0 12px rgba(255,59,48,0.4);
  animation: hotPulse 2s ease-in-out infinite;
}
@keyframes hotPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,59,48,0.3); transform: scale(1); }
  50% { box-shadow: 0 0 20px rgba(255,59,48,0.6); transform: scale(1.05); }
}

.scarcity-watching {
  position: absolute; bottom: 8px; left: 8px; z-index: 3;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8); padding: 2px 8px; border-radius: 6px;
  font-size: 0.6rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.scarcity-watching i { color: var(--accent-cyan); font-size: 0.55rem; }

/* ==========================================
   GUEST MOBILE BOTTOM NAV (Glassmorphism)
   ========================================== */
.guest-bottom-nav {
  display: none;
}
@media (max-width: 900px) {
  .guest-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; width: 100%;
    height: 82px; z-index: 2000;
    background: rgba(10, 11, 16, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.06);
    justify-content: space-around; align-items: center;
    padding-bottom: 12px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  }
  .guest-bottom-nav::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.3;
  }
  .guest-bottom-nav .g-nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.65rem; font-weight: 800; transition: 0.3s;
    position: relative;
  }
  .guest-bottom-nav .g-nav-btn .g-nav-icon {
    font-size: 1.5rem; transition: 0.3s var(--spring-easing);
  }
  .guest-bottom-nav .g-nav-btn.active {
    color: var(--accent-cyan);
    text-shadow: 0 0 12px rgba(100,255,179,0.3);
  }
  .guest-bottom-nav .g-nav-btn.active .g-nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--accent-cyan));
  }
  /* FAB "إضافة" button */
  .guest-bottom-nav .g-nav-fab {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #000; display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; font-weight: 900; text-decoration: none;
    margin-top: -20px;
    box-shadow: 0 4px 20px rgba(100,255,179,0.3);
    transition: 0.3s var(--spring-easing);
    border: 2px solid rgba(255,255,255,0.1);
  }
  .guest-bottom-nav .g-nav-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(100,255,179,0.5);
  }
  /* Add padding to bottom of content so nav doesn't overlap */
  .guest-nav-padding { padding-bottom: 90px !important; }
}

/* ==========================================
   CATEGORY ICON CROP CONTAINERS (SVG)
   ========================================== */
.cat-icon-wrap {
  width: 65px; height: 65px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 0.6rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(100, 255, 179, 0.25);
  position: relative;
  transition: 0.4s var(--spring-easing);
}
.cat-icon-wrap::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
  z-index: -1;
  opacity: 0;
  transition: 0.4s;
}
.cat-icon-wrap img {
  width: 50%; height: 50%;
  object-fit: contain;
  filter: invert(1) brightness(2) drop-shadow(0 0 4px rgba(100,255,179,0.3));
  transition: 0.3s;
}
.cat-icon-wrap i {
  font-size: 1.6rem;
  color: var(--accent-cyan);
  filter: drop-shadow(0 0 4px rgba(100,255,179,0.3));
  transition: 0.3s;
}

/* ==========================================
   AFFILIATE PROMOTIONAL BANNER
   ========================================== */
.affiliate-banner {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%);
  border: 1px solid rgba(100, 255, 179, 0.2);
  border-radius: var(--radius);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: 0.4s var(--spring-easing);
}
.affiliate-banner::before {
  content: '';
  position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, #64ffb3, #00e676, #64ffb3, #00e676);
  background-size: 300% 300%;
  z-index: -1;
  animation: gradientBorder 3s ease infinite;
  opacity: 0.6;
}
@keyframes gradientBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.affiliate-banner:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(100,255,179,0.15); }
.affiliate-banner .ab-icon { font-size: 2.5rem; margin-bottom: 0.8rem; }
.affiliate-banner .ab-title {
  font-size: 1.4rem; font-weight: 900; color: #fff;
  margin-bottom: 0.5rem; line-height: 1.4;
}
.affiliate-banner .ab-title .highlight { color: var(--primary-brand); }
.affiliate-banner .ab-sub {
  font-size: 0.9rem; color: var(--text-secondary);
  margin-bottom: 1.2rem; max-width: 500px; margin-left: auto; margin-right: auto;
  line-height: 1.7;
}
.affiliate-banner .ab-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--primary-brand), #00e676);
  color: #000; font-weight: 900; font-size: 1rem;
  border: none; border-radius: 50px;
  cursor: pointer; transition: 0.3s;
  box-shadow: 0 4px 20px rgba(100,255,179,0.3);
  font-family: 'Cairo', sans-serif;
}
.affiliate-banner .ab-btn:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(100,255,179,0.5); }

.affiliate-banner .ab-glow {
  position: absolute; width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100,255,179,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.affiliate-banner .ab-glow-1 { top: -80px; right: -40px; }
.affiliate-banner .ab-glow-2 { bottom: -60px; left: -60px; }

/* ==========================================
   AFFILIATE GLASSMORPHISM SIGNUP MODAL
   ========================================== */
.affiliate-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: none; align-items: center; justify-content: center;
  z-index: 10000;
}
.affiliate-modal-overlay.active { display: flex; }
.affiliate-modal {
  background: rgba(20, 25, 30, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(100, 255, 179, 0.15);
  border-radius: 24px;
  padding: 2.5rem;
  max-width: 440px; width: 90%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  max-height: 90vh; overflow-y: auto;
  position: relative;
}
.affiliate-modal .am-close {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,0.06); border: none; color: #fff;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  transition: 0.3s;
}
.affiliate-modal .am-close:hover { background: rgba(255,255,255,0.12); }
.affiliate-modal .am-header { text-align: center; margin-bottom: 2rem; }
.affiliate-modal .am-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.affiliate-modal .am-title { font-size: 1.4rem; font-weight: 900; color: #fff; margin-bottom: 0.3rem; }
.affiliate-modal .am-sub { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

.affiliate-modal .am-field { margin-bottom: 1.2rem; }
.affiliate-modal .am-field label {
  display: block; font-weight: 700; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 6px;
}
.affiliate-modal .am-field input,
.affiliate-modal .am-field select {
  width: 100%; padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; color: #fff; font-size: 0.95rem;
  outline: none; font-family: 'Cairo', sans-serif;
  transition: 0.3s;
}
.affiliate-modal .am-field input:focus,
.affiliate-modal .am-field select:focus {
  border-color: var(--primary-brand);
  box-shadow: 0 0 20px rgba(100,255,179,0.08);
}
.affiliate-modal .am-field select option { background: #1a1a2e; color: #fff; }
.affiliate-modal .am-field input::placeholder { color: var(--text-dim); }

.affiliate-modal .am-submit {
  width: 100%; padding: 1.1rem;
  background: linear-gradient(135deg, var(--primary-brand) 0%, #00e676 100%);
  border: none; border-radius: 14px; color: #000;
  font-weight: 900; font-size: 1.05rem; cursor: pointer;
  transition: 0.3s; font-family: 'Cairo', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.affiliate-modal .am-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(100,255,179,0.25); }
.affiliate-modal .am-submit:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.affiliate-modal .am-note {
  text-align: center; font-size: 0.75rem; color: var(--text-dim);
  margin-top: 1rem; line-height: 1.6;
}

/* ==========================================
   ADMIN AFFILIATES TAB
   ========================================== */
.affiliates-layout { display: flex; flex-direction: column; gap: 2.5rem; }
.affiliates-section h3 {
  font-size: 1.1rem; font-weight: 900; color: #fff;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.affiliates-section h3 .badge-count {
  background: rgba(100,255,179,0.1); color: var(--primary-brand);
  font-size: 0.75rem; padding: 2px 10px; border-radius: 20px;
}
.affiliates-table-container { overflow-x: auto; }
.affiliates-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.affiliates-table th {
  text-align: right; padding: 0.8rem 0.5rem;
  color: var(--text-dim); font-weight: 700; font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.affiliates-table td {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #fff;
}
.affiliates-table tr:hover td { background: rgba(255,255,255,0.02); }
.affiliates-table .aff-code {
  font-family: monospace; font-weight: 700;
  background: rgba(100,255,179,0.08);
  padding: 2px 8px; border-radius: 6px; color: var(--primary-brand);
  font-size: 0.8rem;
}
.affiliates-table .aff-platform {
  display: inline-block; padding: 2px 10px; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700;
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
}
.affiliates-table .aff-status {
  display: inline-block; padding: 2px 10px; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700;
}
.affiliates-table .aff-status.pending { background: rgba(255,193,7,0.1); color: #ffc107; }
.affiliates-table .aff-status.active { background: rgba(100,255,179,0.1); color: var(--primary-brand); }
.affiliates-table .aff-status.rejected { background: rgba(255,59,48,0.1); color: #FF3B30; }
.affiliates-table .aff-action-btn {
  padding: 0.4rem 0.8rem; border: none; border-radius: 8px;
  font-size: 0.75rem; font-weight: 700; cursor: pointer;
  font-family: 'Cairo', sans-serif; transition: 0.2s;
}
.affiliates-table .aff-action-btn.accept { background: rgba(100,255,179,0.12); color: var(--primary-brand); }
.affiliates-table .aff-action-btn.accept:hover { background: rgba(100,255,179,0.25); }
.affiliates-table .aff-action-btn.reject { background: rgba(255,59,48,0.12); color: #FF3B30; }
.affiliates-table .aff-action-btn.reject:hover { background: rgba(255,59,48,0.25); }
.affiliates-empty {
  text-align: center; padding: 3rem; color: var(--text-dim);
  font-size: 0.9rem;
}
.affiliates-empty i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: 0.3; }

/* ==========================================
   REALTIME TOAST QUEUE SYSTEM
   ========================================== */
#realtime-toast-queue {
  position: fixed; bottom: 100px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: 90%; max-width: 420px;
  display: flex; flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.rt-toast {
  background: rgba(15, 20, 25, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(100, 255, 179, 0.15);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: rtToastIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  display: flex; align-items: flex-start; gap: 10px;
  pointer-events: auto;
}
.rt-toast.rt-out {
  animation: rtToastOut 0.4s ease forwards;
}
.rt-toast .rt-icon {
  font-size: 1.3rem;
  flex-shrink: 0; margin-top: 1px;
}
.rt-toast .rt-text { flex: 1; }
.rt-toast .rt-text strong { color: var(--primary-brand); }
.rt-toast .rt-time {
  font-size: 0.7rem; color: var(--text-dim);
  flex-shrink: 0; white-space: nowrap;
}
@keyframes rtToastIn {
  from { opacity: 0; transform: translateY(30px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes rtToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* Affiliate code display in admin */
.aff-code-input {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  padding: 0.2rem 0.5rem; border-radius: 6px;
  font-family: monospace; font-size: 0.8rem; color: var(--primary-brand);
}

/* ==========================================
   ADMIN DASHBOARD — MVP STYLES
   ========================================== */
.admin-page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;
}
.admin-page-header h1 { font-size: 1.5rem; font-weight: 900; }

.admin-toolbar {
  display: flex; gap: 0.8rem; margin-bottom: 1.5rem; flex-wrap: wrap;
  align-items: center;
}
.admin-search {
  flex: 1; min-width: 220px;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: #fff;
  font-size: 0.9rem; outline: none; font-family: 'Cairo', sans-serif;
}
.admin-search::placeholder { color: var(--text-dim); }
.admin-search:focus { border-color: var(--primary-brand); }

.admin-btn {
  padding: 0.7rem 1.2rem; border-radius: 10px;
  font-weight: 800; font-size: 0.85rem; cursor: pointer;
  font-family: 'Cairo', sans-serif; border: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: 0.2s; white-space: nowrap;
}
.admin-btn-primary {
  background: linear-gradient(135deg, var(--primary-brand), #00e676);
  color: #000;
}
.admin-btn-primary:hover { transform: scale(1.03); }
.admin-btn-danger {
  background: rgba(255,59,48,0.12); color: #FF3B30;
}
.admin-btn-danger:hover { background: rgba(255,59,48,0.25); }
.admin-btn-secondary {
  background: rgba(255,255,255,0.05); color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.admin-btn-secondary:hover { background: rgba(255,255,255,0.1); }

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.admin-table th {
  text-align: right; padding: 0.8rem 0.6rem;
  color: var(--text-dim); font-weight: 700; font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
.admin-table td {
  padding: 0.8rem 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #fff; vertical-align: middle;
}
.admin-table tr:hover td { background: rgba(255,255,255,0.02); }
.admin-table .cell-actions { white-space: nowrap; display: flex; gap: 4px; }
.admin-table .cell-img {
  width: 48px; height: 48px; border-radius: 8px;
  object-fit: cover; border: 1px solid rgba(255,255,255,0.06);
}

.status-badge-admin {
  display: inline-block; padding: 2px 10px; border-radius: 8px;
  font-size: 0.7rem; font-weight: 700;
}
.status-badge-admin.active { background: rgba(100,255,179,0.1); color: var(--primary-brand); }
.status-badge-admin.banned { background: rgba(255,59,48,0.1); color: #FF3B30; }
.status-badge-admin.deleted { background: rgba(255,255,255,0.05); color: var(--text-dim); }

.toggle-mini {
  width: 40px; height: 22px; border-radius: 11px;
  background: rgba(255,255,255,0.1); position: relative; cursor: pointer;
  transition: 0.3s; flex-shrink: 0;
}
.toggle-mini.active { background: #34C759; }
.toggle-mini::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: 0.3s;
}
.toggle-mini.active::after { transform: translateX(-18px); }

.admin-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(20px);
  display: none; align-items: center; justify-content: center;
  z-index: 10000; padding: 2rem;
}
.admin-modal-overlay.active { display: flex; }
.admin-modal {
  background: rgba(20, 22, 28, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 2rem;
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
}
.admin-modal .am-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}
.admin-modal .am-header h3 {
  font-size: 1.2rem; font-weight: 900; color: #fff;
}
.admin-modal .am-close {
  background: rgba(255,255,255,0.06); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.admin-modal .am-close:hover { background: rgba(255,255,255,0.12); }

.am-form-row { margin-bottom: 1.2rem; }
.am-form-row label {
  display: block; font-weight: 700; font-size: 0.85rem;
  color: var(--text-secondary); margin-bottom: 6px;
}
.am-form-row input,
.am-form-row select,
.am-form-row textarea {
  width: 100%; padding: 0.9rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: #fff; font-size: 0.95rem;
  outline: none; font-family: 'Cairo', sans-serif;
}
.am-form-row input:focus,
.am-form-row select:focus,
.am-form-row textarea:focus { border-color: var(--primary-brand); }
.am-form-row select option { background: #1a1a2e; color: #fff; }
.am-form-row textarea { resize: vertical; min-height: 100px; }

.settings-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
@media (max-width: 768px) { .settings-grid { grid-template-columns: 1fr; } }
.setting-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; padding: 1.5rem;
}
.setting-card .sc-label {
  font-size: 0.8rem; color: var(--text-secondary);
  font-weight: 700; margin-bottom: 0.5rem;
}
.setting-card .sc-value {
  font-size: 2rem; font-weight: 900; color: var(--primary-brand);
  margin-bottom: 0.8rem;
}
.setting-card .sc-input {
  width: 100%; padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; color: #fff;
  font-size: 1rem; outline: none; font-family: 'Cairo', sans-serif;
}
.setting-card .sc-input:focus { border-color: var(--primary-brand); }
.setting-card .sc-suffix {
  font-size: 0.75rem; color: var(--text-dim); margin-top: 6px;
}

.admin-img-grid {
  display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem;
}
.admin-img-item {
  position: relative; width: 70px; height: 70px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.admin-img-item img { width: 100%; height: 100%; object-fit: cover; }
.admin-img-item .img-remove {
  position: absolute; top: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF3B30; color: #fff; border: none;
  font-size: 12px; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}

.admin-empty {
  text-align: center; padding: 3rem; color: var(--text-dim); font-size: 0.9rem;
}
.admin-empty i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: 0.3; }

/* Theme Toggle Button */
.theme-toggle-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.3s; font-size: 1rem;
}
.theme-toggle-btn:hover { background: rgba(100,255,179,0.08); color: var(--accent-cyan); border-color: rgba(100,255,179,0.15); }

/* Light Theme Overrides */
html[data-theme="light"] {
  --bg-deep: #f3f4f6;
  --bg-gradient: linear-gradient(135deg, #f3f4f6 0%, #f8fafc 100%);
  --text-white: #111827;
  --text-secondary: rgba(17, 24, 39, 0.6);
  --text-dim: rgba(17, 24, 39, 0.4);
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: 1px solid rgba(0, 0, 0, 0.06);
  --bg-card: #ffffff;
  --border-color: rgba(0, 0, 0, 0.08);
  --accent-cyan: #059669;
}
html[data-theme="light"] body {
  background: var(--bg-gradient);
  color: var(--text-white);
}

/* Task 1 & 2 — Global Containers: White Backgrounds + Depth */
html[data-theme="light"] .navbar-v2 {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .navbar-v2 .nav-center a { color: var(--text-secondary); }
html[data-theme="light"] .navbar-v2 .nav-center a:hover,
html[data-theme="light"] .navbar-v2 .nav-center a.active { color: #111827; }

html[data-theme="light"] .hero-v2 { background: radial-gradient(ellipse at 50% 0%, rgba(5, 150, 105, 0.06) 0%, transparent 60%); }
html[data-theme="light"] .hero-v2 .hero-logo { color: #111827; }
html[data-theme="light"] .hero-v2 .hero-sub { color: var(--text-secondary); }
html[data-theme="light"] .hero-v2 .search-box {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .hero-v2 .search-box input { color: #111827; }
html[data-theme="light"] .hero-v2 .search-box input::placeholder { color: rgba(17,24,39,0.35); }
html[data-theme="light"] .bp-hero-link {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08);
  color: var(--accent-cyan); box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .bp-hero-link:hover { background: rgba(5,150,105,0.04); }

html[data-theme="light"] .filters-bar .filters-inner {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .filters-bar .filter-select {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.1);
  color: #111827;
}

html[data-theme="light"] .product-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .product-card .card-body .item-title { color: #111827; }

html[data-theme="light"] .listings-section .listings-header h2 { color: #111827; }
html[data-theme="light"] .categories-section .section-header h2 { color: #111827; }

html[data-theme="light"] .trust-banner-v2 { background: rgba(5, 150, 105, 0.06); }

html[data-theme="light"] .mobile-nav-overlay {
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .mobile-nav-overlay a { color: var(--text-secondary); }

html[data-theme="light"] .theme-toggle-btn {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  color: #111827;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .theme-toggle-btn:hover {
  background: rgba(5,150,105,0.08);
  color: var(--accent-cyan);
  border-color: rgba(5,150,105,0.2);
}

/* Task 3 — Story Categories Light Mode Fix */
html[data-theme="light"] .cat-icon-wrap {
  background: #ffffff;
  border-color: rgba(5,150,105,0.35);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .cat-icon-wrap img { filter: none; }
html[data-theme="light"] .cat-card .cat-name { color: rgba(17,24,39,0.7); }
html[data-theme="light"] .cat-card.active .cat-name { color: var(--accent-cyan); }
html[data-theme="light"] .cat-card:hover .cat-name { color: var(--accent-cyan); }

/* Light Mode — Floating Sell Button + Mobile Bottom Nav */
html[data-theme="light"] .story-sell-circle {
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
html[data-theme="light"] .story-sell-circle i {
  color: var(--accent-cyan);
  filter: drop-shadow(0 0 6px rgba(5,150,105,0.25));
}
html[data-theme="light"] .story-sell-text-wrap {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .story-sell-text { color: var(--accent-cyan); }

html[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}
html[data-theme="light"] .mobile-bottom-nav .nav-btn.active {
  text-shadow: 0 0 12px rgba(5,150,105,0.2);
}

/* ==========================================
   LIGHT MODE — COMPREHENSIVE OVERRIDES
   ========================================== */
html[data-theme="light"] {
  --primary-brand: #059669;
  --neon-price: #059669;
  --text-primary: #111827;
}

/* Footer */
html[data-theme="light"] .kaser-footer { border-top-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .kaser-footer h5 { color: #111827; }
html[data-theme="light"] .kaser-footer p,
html[data-theme="light"] .kaser-footer a,
html[data-theme="light"] .kaser-footer-social a { color: rgba(17,24,39,0.55); }
html[data-theme="light"] .kaser-footer a:hover { color: var(--accent-cyan); }
html[data-theme="light"] .kaser-footer-bottom { border-top-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .kaser-footer-bottom p { color: rgba(17,24,39,0.35); }
html[data-theme="light"] .kaser-footer-contact li { color: rgba(17,24,39,0.55); }
html[data-theme="light"] .kaser-footer-contact li i { color: var(--accent-cyan); }
html[data-theme="light"] .footer-payment-icon { opacity: 0.4; }

/* Main Header (sub-pages) */
html[data-theme="light"] .main-header {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(0,0,0,0.06);
}
html[data-theme="light"] .header-link { color: rgba(17,24,39,0.55); }
html[data-theme="light"] .header-link:hover { color: #111827; }

/* Dashboard & Portal */
html[data-theme="light"] .dashboard-sidebar { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
html[data-theme="light"] .stat-value,
html[data-theme="light"] .tip-title,
html[data-theme="light"] .user-name,
html[data-theme="light"] .item-title-text,
html[data-theme="light"] .portal-hamburger { color: #111827; }
html[data-theme="light"] .stat-card { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .stat-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
html[data-theme="light"] .dashboard-tips { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .top-header h2 { color: #111827; }
html[data-theme="light"] .item-price-text { color: var(--accent-cyan); }
html[data-theme="light"] .item-category-tag { background: rgba(5,150,105,0.06); color: var(--accent-cyan); }

/* Cart Drawer */
html[data-theme="light"] .cart-drawer { background: #fff; }
html[data-theme="light"] .cart-receipt { background: rgba(0,0,0,0.01); border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .cart-rec-name,
html[data-theme="light"] .cart-rec-qty-val { color: #111827; }
html[data-theme="light"] .cart-rec-qty-btn { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); color: rgba(17,24,39,0.5); }
html[data-theme="light"] .cart-rec-qty-btn:hover { background: rgba(0,0,0,0.06); color: #111827; }
html[data-theme="light"] .cart-receipt-table th { border-bottom-color: rgba(0,0,0,0.06); color: rgba(17,24,39,0.4); }
html[data-theme="light"] .cart-receipt-table td { border-bottom-color: rgba(0,0,0,0.03); }
html[data-theme="light"] .cart-receipt-header { border-bottom-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .cart-rec-total-row { border-top-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .cart-rec-total-row .label { color: rgba(17,24,39,0.5); }
html[data-theme="light"] .cart-close:hover { color: #111827; background: rgba(0,0,0,0.06); }
html[data-theme="light"] .cart-header { border-bottom-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .cart-header h3 { color: #111827; }

/* Report Modal */
html[data-theme="light"] .report-reason-item { background: rgba(0,0,0,0.01); border-color: rgba(0,0,0,0.06); color: rgba(17,24,39,0.6); }
html[data-theme="light"] .report-reason-item:hover { border-color: rgba(0,0,0,0.12); color: #111827; }
html[data-theme="light"] .report-details-input { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.01); color: #111827; }
html[data-theme="light"] .report-modal-close { background: rgba(0,0,0,0.04); color: rgba(17,24,39,0.5); }
html[data-theme="light"] .report-modal-close:hover { background: rgba(0,0,0,0.08); color: #111827; }

/* Delete Account Modal */
html[data-theme="light"] .delete-modal input { border-color: rgba(0,0,0,0.1); background: rgba(0,0,0,0.01); color: #111827; }

/* Offer Cards & Insights */
html[data-theme="light"] .offer-card { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .offer-card:hover { background: #f8fafc; }
html[data-theme="light"] .insights-card { background: rgba(5,150,105,0.04); border-color: rgba(5,150,105,0.08); }
html[data-theme="light"] .insights-card .ic-title { color: #111827; }
html[data-theme="light"] .offer-card .oc-title { color: #111827; }

/* Misc elements */
html[data-theme="light"] .setting-card { background: #fff; }
html[data-theme="light"] .setting-card .sc-value { color: var(--accent-cyan); }
html[data-theme="light"] .setting-card .sc-input { color: #111827; }
html[data-theme="light"] .admin-search { background: #fff; border-color: rgba(0,0,0,0.08); color: #111827; }
html[data-theme="light"] .add-listing-sidebar { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .add-listing-sidebar .s-logo { color: #111827; }
html[data-theme="light"] .add-listing-sidebar .s-nav a:hover { background: rgba(0,0,0,0.03); color: #111827; }
html[data-theme="light"] .condition-pills-v2 .pill-v2 { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .form-section .submit-btn { color: #fff; }
html[data-theme="light"] .pi-tab:hover { color: #111827; }
html[data-theme="light"] .pi-tab.active { color: var(--accent-cyan); }
html[data-theme="light"] .neon-check-box { background: rgba(255,255,255,0.9); border-color: rgba(5,150,105,0.3); }
html[data-theme="light"] .review-item { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .review-item .r-name { color: #111827; }
html[data-theme="light"] .review-item .r-text { color: rgba(17,24,39,0.6); }

/* Seller cards */
html[data-theme="light"] .seller-card { background: #fff; border-color: rgba(0,0,0,0.06); }
html[data-theme="light"] .seller-card:hover { border-color: rgba(5,150,105,0.2); }
html[data-theme="light"] .seller-name { color: #111827; }
html[data-theme="light"] .seller-meta { color: rgba(17,24,39,0.5); }
html[data-theme="light"] .recent-seller-item { background: #fff; border-color: rgba(0,0,0,0.04); }

/* Legal pages */
html[data-theme="light"] .legal-card { background: #fff; }
html[data-theme="light"] .legal-card h2 { color: #111827; }
html[data-theme="light"] .legal-card p,
html[data-theme="light"] .legal-card li { color: rgba(17,24,39,0.6); }

/* ==========================================
   UNIFIED GLOBAL MOBILE BOTTOM NAV
   ========================================== */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 900px) {
  .mobile-bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; width: 100%;
    height: 82px; z-index: 9999;
    background: rgba(10, 11, 16, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    justify-content: space-around; align-items: center;
    padding-bottom: 12px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  }
  .mobile-bottom-nav::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.3;
  }
  .mobile-bottom-nav .nav-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--text-secondary); text-decoration: none;
    font-size: 0.65rem; font-weight: 800; transition: 0.3s;
    position: relative;
  }
  .mobile-bottom-nav .nav-btn .nav-icon {
    font-size: 1.4rem; transition: 0.3s var(--spring-easing);
  }
  .mobile-bottom-nav .nav-btn.active {
    color: var(--accent-cyan);
    text-shadow: 0 0 12px rgba(100,255,179,0.3);
  }
  .mobile-bottom-nav .nav-btn.active .nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px var(--accent-cyan));
  }
  /* Global mobile nav padding helper */
  body:has(.mobile-bottom-nav) { padding-bottom: 90px; }
}

/* ==========================================
   PC FIXED STORY-STYLE SELL BUTTON
   ========================================== */
.story-sell-btn {
  display: none;
}
@media (min-width: 992px) {
  .story-sell-btn {
    display: flex; flex-direction: column-reverse; align-items: center;
    position: fixed; bottom: 25px; left: 25px; z-index: 10001;
    text-decoration: none;
  }
  .story-sell-circle {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a2e 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    cursor: pointer;
    animation: storyPulse 2.5s ease-in-out infinite, storyWiggle 7s ease-in-out infinite;
  }
  .story-sell-circle::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
    z-index: -1;
    animation: storyRotate 3s linear infinite;
  }
  .story-sell-circle::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    z-index: -1;
    filter: blur(8px);
    opacity: 0.5;
    animation: storyPulseGlow 2.5s ease-in-out infinite;
  }
  .story-sell-circle i {
    font-size: 1.8rem; color: var(--accent-cyan);
    filter: drop-shadow(0 0 6px rgba(100,255,179,0.4));
  }
  .story-sell-text-wrap {
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 6px 14px;
    min-width: 160px;
    text-align: center;
    height: 32px;
    overflow: hidden;
    position: relative;
  }
  .story-sell-text-track {
    position: relative;
    height: 100%;
  }
  .story-sell-text {
    position: absolute; width: 100%; left: 0; top: 0;
    font-size: 0.75rem; font-weight: 800; color: var(--accent-cyan);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px;
  }
  .story-sell-text.active {
    opacity: 1;
    transform: translateY(0);
  }
  .story-sell-text.exit {
    opacity: 0;
    transform: translateY(-18px);
  }
}
@keyframes storyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes storyPulseGlow {
  0%, 100% { opacity: 0.4; filter: blur(8px); }
  50% { opacity: 0.7; filter: blur(14px); }
}
@keyframes storyRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes storyWiggle {
  0%, 88%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-6deg); }
  92% { transform: rotate(6deg); }
  94% { transform: rotate(-4deg); }
  96% { transform: rotate(4deg); }
  98% { transform: rotate(0deg); }
}

/* Similar Products Section */
#similar-products-section {
  margin-top: 2.5rem !important;
  padding: 2rem 2rem;
  background: rgba(255,255,255,0.015);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
#similar-products-section h3 {
  font-weight: 900;
  font-size: 1.1rem;
  color: #fff;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.similar-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
  width: 100%;
  max-width: 1400px;
}
.similar-products-grid .card-link { display: block; text-decoration: none; width: 100%; }
.similar-products-grid .kaser-card { height: 100%; }
@media (max-width: 900px) {
  .similar-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
  }
}

/* Reveal-up micro-animation */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes revealUp {
  to { opacity: 1; transform: translateY(0); }
}
.reveal-up:nth-child(2) { animation-delay: 0.1s; }
.reveal-up:nth-child(3) { animation-delay: 0.2s; }
.reveal-up:nth-child(4) { animation-delay: 0.3s; }

/* Breadcrumbs */
.breadcrumbs-wrap {
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 1200px;
  margin: 1rem auto 0;
  padding: 0 1.5rem;
}
.breadcrumbs-wrap a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: 0.2s;
}
.breadcrumbs-wrap a:hover { color: var(--accent-cyan); }
.breadcrumbs-wrap span { color: var(--text-dim); }
.breadcrumbs-wrap .sep { margin: 0 0.4rem; color: var(--text-dim); user-select: none; }

/* Mobile Sticky Action Bar */
.mobile-sticky-action { display: none; }
@media (max-width: 991px) {
  .mobile-sticky-action {
    display: flex; position: fixed;
    bottom: 70px; left: 0; width: 100%; z-index: 9998;
    justify-content: space-between; align-items: center; padding: 1rem;
    backdrop-filter: blur(10px); background: rgba(20,20,20,0.85);
    border-top: 1px solid rgba(100,255,179,0.2);
    border-bottom: 1px solid rgba(100,255,179,0.1);
  }
  body:has(.mobile-sticky-action) { padding-bottom: 150px; }
}

/* Alert banners (ads limit, etc.) */
.alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 16px; }
.alert-warning { background: rgba(255,193,7,0.1); border: 1px solid rgba(255,193,7,0.3); color: #ffc107; }
.alert-danger { background: rgba(255,59,48,0.1); border: 1px solid rgba(255,59,48,0.3); color: #FF3B30; }
.alert i { margin-left: 8px; }

/* ==========================================
   SMART BUILDER
   ========================================== */
.smart-builder-toggle {
  width: 100%;
  padding: 14px 20px;
  background: rgba(100,255,179,0.06);
  border: 1px solid rgba(100,255,179,0.15);
  border-radius: 12px;
  color: var(--accent-cyan);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.3s;
  font-family: 'Cairo', sans-serif;
}
.smart-builder-toggle:hover {
  background: rgba(100,255,179,0.1);
  border-color: rgba(100,255,179,0.3);
}
.smart-builder-panel {
  margin-top: 12px;
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.node-selector-level {
  animation: fadeSlideIn 0.25s var(--spring-easing);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.node-select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-family: 'Cairo', sans-serif !important;
}
.node-select:focus {
  border-color: var(--accent-cyan) !important;
  outline: none;
}

/* ===== NOTIFICATION BELL ===== */
.notif-bell-wrap {
  position: relative;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.notif-bell-wrap:hover { color: var(--accent-cyan); }
.notif-bell-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #FF3B30;
  border: 2px solid var(--bg-primary, #0a0a0f);
  border-radius: 50%;
  display: none;
  animation: notifPulse 2s infinite;
}
.notif-bell-dot.unread { display: block; }
@keyframes notifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ===== NOTIFICATION DROPDOWN ===== */
.notif-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 360px;
  max-height: 480px;
  overflow-y: auto;
  background: rgba(15,15,20,0.98);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  z-index: 9999;
  direction: rtl;
}
.notif-dropdown::-webkit-scrollbar { width: 4px; }
.notif-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.notif-empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.notif-empty i { font-size: 1.5rem; display: block; margin-bottom: 0.5rem; }
.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: rgba(255,255,255,0.03); }
.notif-content { display: flex; flex-direction: column; gap: 8px; }
.notif-message {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #e0e0e0;
  word-break: break-word;
}
.notif-thumb {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: opacity 0.2s;
}
.notif-thumb:hover { opacity: 0.85; }
.notif-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
.notif-time {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.6;
}
.notif-like-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all 0.2s;
}
.notif-like-btn:hover:not(:disabled) { color: #FF3B30; background: rgba(255,59,48,0.08); }
.notif-like-btn.liked { color: #FF3B30; }
.notif-like-btn:disabled { cursor: default; opacity: 0.9; }
.notif-like-count { font-size: 0.75rem; min-width: 12px; }

/* ===== LIGHTBOX ===== */
.notif-lightbox {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.92);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.notif-lightbox-close {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.notif-lightbox-close:hover { background: rgba(255,255,255,0.2); }
.notif-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}

/* Responsive dropdown */
@media (max-width: 480px) {
  .notif-dropdown {
    width: calc(100vw - 32px);
    left: -80px;
    max-height: 400px;
  }
}

/* ==========================================
   KASER BREADCRUMB & BACK BUTTON (Global)
   ========================================== */
.kaser-breadcrumb-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 2rem; max-width: 1300px; margin: 0 auto;
  flex-wrap: wrap; gap: 0.8rem;
}
.kaser-breadcrumb-bar .kbc-back {
  display: flex; align-items: center; gap: 6px;
  padding: 0.5rem 1.2rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03); color: #fff;
  font-weight: 700; font-size: 0.85rem; cursor: pointer;
  text-decoration: none; font-family: 'Tajawal', 'Cairo', sans-serif;
  transition: 0.3s; flex-shrink: 0;
}
.kaser-breadcrumb-bar .kbc-back:hover {
  border-color: #64ffb3; background: rgba(100,255,179,0.06);
  color: #64ffb3;
}
.kaser-breadcrumb-trail {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; flex-wrap: wrap;
}
.kaser-breadcrumb-trail a {
  color: var(--text-secondary); text-decoration: none;
  font-weight: 600; transition: 0.2s;
}
.kaser-breadcrumb-trail a:hover { color: #64ffb3; }
.kaser-breadcrumb-trail .kbc-sep {
  color: var(--text-dim); font-size: 0.7rem;
}
.kaser-breadcrumb-trail .kbc-current {
  color: #64ffb3; font-weight: 800; pointer-events: none;
}

/* ============================
   GLOBAL SPLASH LOADING SCREEN
   ============================ */
.kaser-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0s 0.6s;
}
.kaser-splash.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.splash-inner {
  text-align: center;
  max-width: 320px;
  width: 90%;
}
.splash-logo {
  height: 64px;
  width: auto;
  margin-bottom: 2.5rem;
  animation: splashPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(100, 255, 179, 0.25));
}
@keyframes splashPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.06); opacity: 1; }
}
.splash-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}
.splash-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #64ffb3, #00e676, #64ffb3);
  background-size: 200% 100%;
  animation: splashGradient 1.2s linear infinite;
  transform: scaleX(0.15);
  transform-origin: right center;
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes splashGradient {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.splash-status {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 600;
  min-height: 1.4em;
  transition: opacity 0.3s;
}

/* ============================
   3D CARD TILT EFFECT
   ============================ */
.card-link {
  perspective: 1000px;
  position: relative;
}
.kaser-card {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, border-color 0.3s ease;
  will-change: transform;
  transform-style: preserve-3d;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 18px;
  overflow: hidden;
}
.kaser-card:hover {
  border-color: rgba(100,255,179,0.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 20px rgba(100,255,179,0.06);
}
.kaser-card.tilt-active {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(100, 255, 179, 0.08);
  border-color: rgba(100,255,179,0.25);
}
.kaser-card .card-image {
  backface-visibility: hidden;
  width: 100%; height: 100%; object-fit: cover;
}
.kaser-card .card-img-wrap {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
}
.kaser-card .card-info {
  transform: translateZ(30px);
  padding: 0.9rem 1rem 1rem;
}
.kaser-card .card-title {
  font-size: 0.85rem; font-weight: 700; color: #fff;
  margin-bottom: 0.4rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kaser-card .card-price {
  font-size: 1.1rem; font-weight: 900; color: var(--accent-cyan);
  text-shadow: 0 0 8px rgba(100,255,179,0.15);
  margin-bottom: 0.25rem;
}
.kaser-card .card-meta {
  font-size: 0.72rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kaser-card .card-seller-row {
  font-size: 0.7rem; color: var(--text-dim);
  margin-top: 0.5rem; display: flex; align-items: center; gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.04); padding-top: 0.5rem;
}
.kaser-card .seller-avatar-mini {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 1px solid rgba(100,255,179,0.15);
}
.kaser-card .badge,
.kaser-card .price-drop-badge {
  transform: translateZ(20px);
}
.kaser-card .cat-tag {
  position: absolute; top: 8px; right: 8px; z-index: 7;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  color: rgba(255,255,255,0.7); font-size: 0.55rem; font-weight: 800;
  padding: 2px 8px; border-radius: 6px;
  text-transform: uppercase;
}
.kaser-card .bnpl-badge-mini {
  position: absolute; bottom: 38px; left: 8px; z-index: 7;
  background: rgba(139,92,246,0.25); backdrop-filter: blur(4px);
  color: #fff; font-size: 0.55rem; font-weight: 700;
  padding: 2px 6px; border-radius: 6px;
  display: flex; align-items: center; gap: 3px;
}

/* Card buttons always visible on mobile */
@media (max-width: 768px), (hover: none) {
  .card-cart-btn { opacity: 1; transform: translateY(0); }
  .kaser-fav-btn { opacity: 1; }
  .report-btn { opacity: 1; }
}

/* Card cart button always slightly visible */
.card-cart-btn { opacity: 0.85; }
.card-link:hover .card-cart-btn { opacity: 1; }

/* ============================
   ADD-TO-CART BUTTON ON CARDS (Uiverse)
   ============================ */
.card-cart-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 10;
  width: 130px;
  height: 38px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #64ffb3, #00cc88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.103);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-link:hover .card-cart-btn {
  opacity: 1;
  transform: translateY(0);
}
.card-cart-btn.in-cart {
  background: linear-gradient(135deg, #f5a623, #e09510);
}
.card-cart-icon-wrap {
  position: absolute;
  left: -50px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  transition-duration: .5s;
}
.card-cart-icon-wrap svg {
  width: 16px;
  height: 16px;
  fill: rgb(17, 17, 17);
}
.card-cart-text {
  height: 100%;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(17, 17, 17);
  z-index: 1;
  transition-duration: .5s;
  font-size: 0.9em;
  font-weight: 700;
  margin: 0;
}
.card-link:hover .card-cart-btn .card-cart-icon-wrap {
  transform: translateX(58px);
  border-radius: 40px;
  transition-duration: .5s;
}
.card-link:hover .card-cart-btn .card-cart-text {
  transform: translate(10px,0px);
  transition-duration: .5s;
}
.card-cart-btn:active {
  transform: scale(0.95) translateY(6px);
  transition-duration: .5s;
}
.card-link:hover .card-cart-btn:active {
  transform: scale(0.95) translateY(0);
}

/* ============================
   SLIDE-OUT CART DRAWER
   ============================ */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  height: 100dvh;
  z-index: 99991;
  background: var(--bg-deep);
  border-left: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 4px 0 30px rgba(0,0,0,0.5);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.cart-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cart-header h3 i {
  color: var(--accent-cyan);
}
.cart-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}
.cart-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0.8rem;
}

/* ============================
   RECEIPT-STYLE CART
   ============================ */
.cart-receipt {
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.8rem;
  overflow: hidden;
}
.cart-receipt-header {
  text-align: center;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.cart-receipt-logo {
  font-size: 1rem;
  font-weight: 900;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-bottom: 2px;
}
.cart-receipt-logo img { height: 22px; width: auto; }
.cart-receipt-info {
  font-size: 0.6rem;
  color: var(--text-dim);
}
.cart-receipt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-bottom: 0.6rem;
}
.cart-receipt-table th {
  text-align: right;
  padding: 0.3rem 0.2rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cart-receipt-table td {
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  vertical-align: middle;
}
.cart-rec-img {
  width: 36px; height: 36px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.cart-rec-name {
  font-weight: 700;
  color: #fff;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
}
.cart-rec-qty {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.cart-rec-qty-btn {
  width: 18px; height: 18px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: var(--text-secondary);
  font-size: 0.55rem; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center;
  line-height: 1; padding: 0;
}
.cart-rec-qty-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.cart-rec-qty-val { font-weight: 700; color: #fff; font-size: 0.75rem; min-width: 14px; text-align: center; }
.cart-rec-price { font-weight: 800; color: var(--accent-cyan); font-size: 0.75rem; white-space: nowrap; }
.cart-rec-remove {
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: rgba(255,59,48,0.08); color: #FF3B30; cursor: pointer;
  font-size: 0.55rem; display: inline-flex; align-items: center; justify-content: center;
}
.cart-rec-remove:hover { background: #FF3B30; color: #fff; }
.cart-rec-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-weight: 900;
  font-size: 0.95rem;
}
.cart-rec-total-row .label { color: var(--text-secondary); font-size: 0.8rem; }
.cart-rec-total-row .value { color: var(--accent-cyan); }
.cart-rec-checkout {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  border: none;
  background: var(--accent-cyan);
  color: #000;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  transition: 0.2s;
}
.cart-rec-checkout:hover { background: #00e676; transform: translateY(-1px); }

.cart-footer {
  padding: 0.8rem;
  border-top: none;
  flex-shrink: 0;
}

.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  color: var(--text-secondary);
}
.cart-empty i {
  font-size: 3rem;
  color: var(--text-dim);
  margin-bottom: 1rem;
}
.cart-empty p {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.cart-empty span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ============================
   CART EMPTY LOADER ANIMATION
   ============================ */
.cart-loader-anim {
  --cart-scale: 1;
  position: relative;
  width: 160px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transform: scale(var(--cart-scale));
  transform-origin: center center;
  margin: 0 auto;
}
@media (max-width: 480px) { .cart-loader-anim { --cart-scale: 0.7; } }

.cart-falling-items {
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1;
}
.cart-fall-item {
  position: absolute;
  opacity: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: cart-fall-item 4s cubic-bezier(0.3, 0, 0.5, 1) infinite;
}
.cart-fall-i1 { top: -15px; left: 58px; width: 20px; height: 32px; --cr: -15deg; animation-delay: 0.05s; }
.cart-fall-i2 { top: -10px; left: 70px; width: 35px; height: 26px; --cr: 10deg; animation-delay: 0.8s; }
.cart-fall-i3 { top: -20px; left: 85px; width: 24px; height: 32px; --cr: 25deg; animation-delay: 1.6s; }
.cart-fall-i4 { top: -15px; left: 58px; width: 28px; height: 28px; --cr: -5deg; animation-delay: 2.4s; }
.cart-fall-i5 { top: -25px; left: 75px; width: 26px; height: 34px; --cr: 5deg; animation-delay: 3.2s; }

@keyframes cart-fall-item {
  0% { transform: translateY(-20px) scale(0.8) rotate(0deg); opacity: 0; }
  10% { opacity: 1; transform: translateY(20px) scale(1) rotate(calc(var(--cr) / 2)); }
  25% { transform: translateY(55px) scale(1) rotate(var(--cr)); opacity: 1; }
  35%, 100% { transform: translateY(75px) scale(0.9) rotate(var(--cr)); opacity: 0; }
}

.cart-icon-svg {
  position: relative;
  z-index: 2;
  width: 140px;
  height: 120px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2364ffb3' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='35' y1='90' x2='110' y2='90' /%3E%3Cline x1='40' y1='90' x2='50' y2='70' /%3E%3Cpolyline points='10,15 25,15 40,30' /%3E%3Cline x1='40' y1='30' x2='50' y2='70' /%3E%3Cline x1='68' y1='30' x2='71' y2='70' /%3E%3Cline x1='96' y1='30' x2='93' y2='70' /%3E%3Cline x1='125' y1='30' x2='115' y2='70' /%3E%3Cline x1='40' y1='30' x2='125' y2='30' /%3E%3Cline x1='43' y1='43' x2='122' y2='43' /%3E%3Cline x1='47' y1='57' x2='118' y2='57' /%3E%3Cline x1='50' y1='70' x2='115' y2='70' /%3E%3Ccircle cx='45' cy='105' r='8' /%3E%3Ccircle cx='105' cy='105' r='8' /%3E%3C/g%3E%3C/svg%3E");
  animation: cart-bounce-anim 0.8s ease-in-out infinite;
  animation-delay: 0.2s;
}
@keyframes cart-bounce-anim {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(2.5px); }
  60% { transform: translateY(0); }
}
.cart-empty-text {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.cart-item {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  animation: cartItemIn 0.35s ease;
}
@keyframes cartItemIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
.cart-item-img {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-card);
}
.cart-item-info {
  flex: 1;
  min-width: 0;
}
.cart-item-title {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.cart-item-price {
  font-size: 0.85rem;
  color: var(--accent-cyan);
  font-weight: 800;
}
.cart-item-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,59,48,0.12);
  color: #FF3B30;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: 0.2s;
}
.cart-item-remove:hover {
  background: #FF3B30;
  color: #fff;
}

.cart-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}
#cart-total-amount {
  color: var(--accent-cyan);
}
.cart-checkout {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 14px;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: 0.3s;
}
.cart-checkout:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

/* Cart badge in navbar */
.cart-badge-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  transition: 0.2s;
}
.cart-badge-btn:hover {
  color: var(--accent-cyan);
}
.cart-count-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: var(--accent-cyan);
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

/* ---- Favorites Badge ---- */
.fav-badge-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  transition: 0.2s;
}
.fav-badge-btn:hover {
  color: var(--accent-cyan);
}
.fav-count-badge {
  position: absolute;
  top: -2px;
  left: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 99px;
  background: var(--primary-brand);
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .cart-drawer {
    max-width: 100%;
  }
}

/* ============================
   KASER SECTION HEADING (خطوط + عنوان)
   ============================ */
.kaser-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  padding: 0 0.5rem;
}
.kh-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.4;
  min-width: 30px;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.kaser-heading.visible .kh-line {
  transform: scaleX(1);
}
.kh-line:first-child {
  background: linear-gradient(90deg, transparent, var(--accent-cyan));
  transform-origin: right center;
}
.kh-line:last-child {
  background: linear-gradient(270deg, transparent, var(--accent-cyan));
  transform-origin: left center;
}
.kh-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.kh-title i {
  color: var(--accent-cyan);
}
.kh-view-all {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  flex-shrink: 0;
}
.kh-view-all:hover {
  color: var(--accent-cyan);
}

/* Dark variant for sections without bg */
.kaser-heading.dark .kh-title {
  color: var(--text-primary);
}

/* Keep old listing-header as fallback */
.listings-section .listings-header {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
}
.listings-section .listings-header h2 {
  font-size: 1.3rem; font-weight: 900; color: #fff;
}

/* Responsive */
@media (max-width: 640px) {
  .kaser-heading {
    gap: 0.6rem;
    padding: 0 1rem;
  }
  .kh-title {
    font-size: 1rem;
  }
  .kh-view-all {
    font-size: 0.7rem;
  }
}

/* ============================
   SKELETON LOADING STATES
   ============================ */
@keyframes kaserShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.kaser-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.025) 25%,
    rgba(255,255,255,0.07) 37%,
    rgba(255,255,255,0.025) 63%
  );
  background-size: 200% 100%;
  animation: kaserShimmer 1.5s ease-in-out infinite;
  border-radius: 8px;
}

/* Listing card skeleton */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}
.skeleton-card-image {
  height: 200px;
  background: rgba(255,255,255,0.03);
}
.skeleton-card-body {
  padding: 1rem;
}
.skeleton-card-body .kaser-skeleton {
  height: 14px;
  margin-bottom: 10px;
}
.skeleton-card-body .kaser-skeleton:last-child {
  margin-bottom: 0;
}

/* Seller skeleton */
.skeleton-seller {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
}
.skeleton-seller-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton-seller-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Recent seller skeleton (horizontal) */
.skeleton-seller-compact {
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.skeleton-seller-compact .skeleton-seller-avatar {
  width: 40px; height: 40px;
}

/* Item detail skeleton */
.skeleton-detail {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
}
.skeleton-detail-image {
  aspect-ratio: 4/3;
  border-radius: 24px;
}
.skeleton-detail-info .kaser-skeleton {
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .skeleton-detail { grid-template-columns: 1fr; }
}

/* Dashboard listing skeleton */
.skeleton-dashboard-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.2rem;
}
.skeleton-dashboard-item .kaser-skeleton {
  height: 14px;
  margin-bottom: 10px;
}

/* ============================
   SMART PRICE INDEX WIDGET
   ============================ */
.pi-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 2rem;
}
.pi-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  -webkit-overflow-scrolling: touch;
}
.pi-tabs::-webkit-scrollbar { height: 3px; }
.pi-tabs::-webkit-scrollbar-thumb { background: rgba(100,255,179,0.15); border-radius: 10px; }
.pi-tab {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pi-tab:hover { border-color: rgba(255,255,255,0.1); color: #fff; }
.pi-tab.active {
  background: rgba(100,255,179,0.1);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}
.pi-tab i { font-size: 0.7rem; }

.pi-indicator {
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
  transition: border-color 0.3s;
}
.pi-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.pi-price-big {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}
.pi-currency {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 700;
}
.pi-trend {
  font-size: 1.4rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pi-trend i { font-size: 1.1rem; }
.pi-range {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}
.pi-range strong { color: var(--text-primary); }
.pi-advice {
  font-size: 0.85rem;
  font-weight: 700;
}
.pi-chart {
  margin-bottom: 0.8rem;
  padding: 0.5rem 0;
}
.pi-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 60px;
}
.pi-bar-wrapper {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
}
.pi-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s;
}
.pi-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.pi-monthly {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .pi-widget { padding: 1rem; border-radius: 14px; }
  .pi-price-big { font-size: 1.4rem; }
  .pi-trend { font-size: 1.1rem; }
  .pi-tab { padding: 0.3rem 0.6rem; font-size: 0.7rem; }
  .pi-tab i { display: none; }
}

/* ============================
   KASER FOOTER (Global)
   ============================ */

/* ============================
   SCROLL REVEAL ANIMATIONS
   ============================ */
.reveal {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
  opacity: 1;
}
.reveal-up {
  transform: translateY(40px);
}
.reveal-up.revealed {
  transform: translateY(0);
}
.reveal-left {
  transform: translateX(-40px);
}
.reveal-left.revealed {
  transform: translateX(0);
}
.reveal-right {
  transform: translateX(40px);
}
.reveal-right.revealed {
  transform: translateX(0);
}
.reveal-scale {
  transform: scale(0.9);
}
.reveal-scale.revealed {
  transform: scale(1);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Text reveal on scroll */
.reveal-text {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-text.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: opacity 0.1s ease;
    transform: none !important;
  }
}
.kaser-footer {
  background: rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: 40px;
  padding-top: 40px;
}
.kaser-footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 30px;
}
.kaser-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.kaser-footer h5 {
  color: #fff;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.kaser-footer p, .kaser-footer a {
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  line-height: 1.8;
  text-decoration: none;
  display: block;
}
.kaser-footer a:hover { color: var(--accent-cyan); }
.kaser-footer-logo {
  height: 36px;
  width: auto;
  margin-bottom: 12px;
}
.kaser-footer-social {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.kaser-footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  transition: all 0.3s;
}
.kaser-footer-social a:hover {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-cyan);
}
.kaser-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.kaser-footer-bottom p {
  margin: 0;
  color: rgba(255,255,255,0.35);
  font-size: 0.8rem;
}
.kaser-payment-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}
.kaser-payment-icons svg {
  height: 28px;
  width: auto;
  opacity: 0.6;
}
.kaser-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.kaser-footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}
.kaser-footer-contact li i {
  color: var(--accent-cyan);
  width: 18px;
}
.kaser-whatsapp-footer {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: #fff !important;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.kaser-whatsapp-footer:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37,211,102,0.25);
  color: #fff !important;
}
.footer-payment-icon {
  height: 28px;
  width: auto;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .kaser-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================
   PORTAL MOBILE SIDEBAR
   ============================ */
.portal-hamburger {
  display: none;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

@media (max-width: 900px) {
  .portal-hamburger {
    display: flex;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 6px;
    align-items: center;
    justify-content: center;
  }
  .dashboard-sidebar {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    background: var(--bg-deep);
    border-left: 1px solid var(--border-color);
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
    padding: 1rem !important;
    border-radius: 0 !important;
    height: 100dvh !important;
    top: 0 !important;
    position: fixed !important;
  }
  .dashboard-sidebar.open {
    transform: translateX(0);
  }
  .sidebar-overlay.open {
    display: block;
  }
  .dashboard-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  .dashboard-sidebar .sidebar-close-mobile {
    display: flex !important;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  .dashboard-sidebar .sidebar-close-mobile:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
  }
}
.app-coming-soon {
  text-align: center;
  padding: 1.5rem 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  margin-top: 0;
}
.app-coming-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1rem;
}
.app-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: nowrap;
}
.app-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
}
.app-badge img {
  height: 50px;
  width: auto;
  display: block;
}
.app-badge-soon {
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .app-badge img { height: 38px; }
  .app-badges { gap: 1.2rem; }
  .app-badge-soon { font-size: 0.75rem; }
}

/* ============================
   PHONE OTP VERIFICATION
   ============================ */
.phone-verify-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.phone-verify-section h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.phone-verify-section h4 .verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(100,255,179,0.1);
  color: var(--accent-cyan);
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
}
.phone-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  direction: ltr;
}
.phone-prefix {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.55rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  white-space: nowrap;
}
.phone-input {
  flex: 1;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  direction: ltr;
  text-align: left;
  letter-spacing: 1px;
}
.phone-input:focus {
  border-color: var(--accent-cyan);
  outline: none;
}
.phone-input.error {
  border-color: #FF3B30;
}
.phone-send-btn {
  padding: 0.55rem 1.2rem;
  border-radius: 10px;
  border: none;
  background: var(--accent-cyan);
  color: #000;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.2s;
}
.phone-send-btn:hover { opacity: 0.85; }
.phone-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.otp-inputs {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1rem 0;
}
.otp-box {
  width: 48px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 900;
  text-align: center;
  font-family: inherit;
  letter-spacing: 2px;
  caret-color: var(--accent-cyan);
}
.otp-box:focus {
  border-color: var(--accent-cyan);
  outline: none;
  box-shadow: 0 0 0 2px rgba(100,255,179,0.15);
}
.otp-box.error { border-color: #FF3B30; }
.otp-verify-btn {
  width: 100%;
  padding: 0.65rem;
  border-radius: 12px;
  border: none;
  background: var(--accent-cyan);
  color: #000;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 0.4rem;
}
.otp-verify-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.otp-error {
  text-align: center;
  font-size: 0.8rem;
  color: #FF3B30;
  margin-top: 0.5rem;
  min-height: 1.2em;
}
.otp-timer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}
.phone-verified-locked {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: rgba(100,255,179,0.05);
  border: 1px solid rgba(100,255,179,0.12);
  border-radius: 10px;
  margin-top: 0.5rem;
}
.phone-verified-locked i { color: var(--accent-cyan); }
.phone-verified-locked span {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  direction: ltr;
}

/* ============================
   LOCATION MAP PICKER
   ============================ */
.location-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.location-section h4 {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.location-section h4 .verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(100,255,179,0.1);
  color: var(--accent-cyan);
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 0.7rem;
  font-weight: 800;
}
.location-saved {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: rgba(100,255,179,0.05);
  border: 1px solid rgba(100,255,179,0.12);
  border-radius: 10px;
}
.location-saved i { color: var(--accent-cyan); }
.location-saved span {
  color: var(--text-secondary);
  font-size: 0.85rem;
  direction: rtl;
  text-align: right;
}@media (min-width: 900px) {
  .app-badge img { height: 65px; }
  .app-badge-soon { font-size: 0.95rem; }
}

/* ============================
   LEGAL PAGES (Terms & Privacy)
   ============================ */
.legal-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 8rem 1.5rem 4rem;
}
.legal-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(12px);
}
.legal-card h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.legal-card h2 .num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(100,255,179,0.12);
  color: var(--accent-cyan);
  font-size: 0.85rem;
  font-weight: 900;
  flex-shrink: 0;
}
.legal-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent-cyan);
  margin: 1.4rem 0 0.6rem;
}
.legal-card p, .legal-card li {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.9;
  margin-bottom: 0.8rem;
}
.legal-card ul {
  padding-right: 1.2rem;
  margin: 0.5rem 0 1rem;
}
.legal-card ul li::marker { color: var(--accent-cyan); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}
.back-link:hover { color: var(--accent-cyan); }
@media (max-width: 600px) {
  .legal-container { padding: 6rem 1rem 3rem; }
  .legal-card { padding: 1.5rem 1.2rem; }
  .legal-card h2 { font-size: 1.2rem; }
}

/* ============================
   REPORT / FLAG SYSTEM
   ============================ */
.report-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,59,48,0.12);
  color: #FF3B30;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-link:hover .report-btn {
  opacity: 1;
  transform: scale(1);
}
.report-btn:hover {
  background: #FF3B30;
  color: #fff;
  transform: scale(1.15) !important;
}
.report-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,59,48,0.2);
  background: rgba(255,59,48,0.06);
  color: #FF3B30;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
  margin-top: 0.8rem;
}
.report-detail-btn:hover { background: rgba(255,59,48,0.12); }

/* ============================
   TRUSTED SELLER BADGE
   ============================ */
.trusted-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--accent-cyan);
  color: #000;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 0.6rem;
  font-weight: 900;
  white-space: nowrap;
  vertical-align: middle;
}
.trusted-badge i { font-size: 0.55rem; }

/* ============================
   BENCHMARK BADGE + MODAL
   ============================ */
.benchmark-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #8B5CF6, #6366F1);
  color: #fff;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 0.65rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 2px 8px rgba(99,102,241,0.2);
}
.benchmark-badge:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(99,102,241,0.3); }
.benchmark-badge i { font-size: 0.6rem; }
.benchmark-badge-card {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}
.benchmark-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99994;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.benchmark-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.5rem;
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}
.benchmark-modal h3 {
  font-size: 1rem;
  font-weight: 900;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}
.benchmark-modal-close {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,0.08);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.benchmark-modal-close:hover { background: rgba(255,255,255,0.15); }
.benchmark-imgs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 100%;
}
.benchmark-imgs-grid img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  cursor: zoom-in;
  transition: 0.2s;
}
.benchmark-imgs-grid img:hover { border-color: #8B5CF6; transform: scale(1.02); }
.benchmark-result-text {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(139,92,246,0.05);
  border: 1px solid rgba(139,92,246,0.1);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* ============================
   STAR RATING SYSTEM
   ============================ */
.stars-rating { display: inline-flex; gap: 2px; direction: rtl; }
.stars-rating .star-btn {
  background: none; border: none; cursor: pointer; font-size: 1.3rem;
  color: rgba(255,255,255,0.12); transition: color 0.15s, transform 0.15s; padding: 2px;
}
.stars-rating .star-btn:hover,
.stars-rating .star-btn.active { color: #f5a623; transform: scale(1.1); }
.stars-rating .star-btn:hover ~ .star-btn,
.stars-rating .star-btn.active ~ .star-btn { color: #f5a623; }
.stars-display { display: inline-flex; gap: 1px; }
.stars-display i { color: #f5a623; font-size: 0.75rem; }
.stars-display .stars-empty { color: rgba(255,255,255,0.08); }
.review-form-wrapper {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 1.5rem; margin-bottom: 2rem;
}
.review-form-wrapper h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.review-form-wrapper h4 i { color: #f5a623; }
.review-form-row { margin-bottom: 0.8rem; }
.review-textarea {
  width: 100%; padding: 0.7rem; border-radius: 10px; resize: vertical; min-height: 80px;
  border: 1px solid var(--border-color); background: rgba(255,255,255,0.04);
  color: #fff; font-family: inherit; font-size: 0.85rem;
}
.review-textarea::placeholder { color: var(--text-dim); }
.review-submit-btn {
  padding: 0.65rem 1.5rem; border-radius: 10px; border: none; cursor: pointer;
  background: var(--accent-cyan); color: #000; font-weight: 800; font-size: 0.85rem;
}
.review-submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.review-token-info {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.4rem;
  background: rgba(255,255,255,0.02);
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
}

/* ============================
   DANGER ZONE — DELETE ACCOUNT
   ============================ */
.danger-zone {
  background: rgba(255,59,48,0.03);
  border: 1px solid rgba(255,59,48,0.12);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 2rem;
}
.danger-zone h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FF3B30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.danger-zone p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.danger-zone-btn {
  padding: 0.65rem 1.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255,59,48,0.3);
  background: rgba(255,59,48,0.08);
  color: #FF3B30;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.2s;
}
.danger-zone-btn:hover {
  background: #FF3B30;
  color: #fff;
}
.delete-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99993;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.delete-modal {
  background: var(--bg-card);
  border: 1px solid rgba(255,59,48,0.2);
  border-radius: 20px;
  padding: 2rem;
  width: 100%;
  max-width: 420px;
}
.delete-modal h3 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #FF3B30;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.delete-modal p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.delete-modal input {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  direction: ltr;
  text-align: left;
  margin-bottom: 1.2rem;
}
.delete-modal-btns {
  display: flex;
  gap: 0.8rem;
}
.delete-modal-cancel {
  flex: 1;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.85rem;
}
.delete-modal-confirm {
  flex: 1;
  padding: 0.7rem;
  border-radius: 10px;
  border: none;
  background: #FF3B30;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.85rem;
}
.delete-modal-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.report-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99992;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  padding: 1rem;
}
.report-modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.report-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 1.5rem;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.9);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.report-modal-overlay.open .report-modal {
  transform: scale(1);
}
.report-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}
.report-modal-header h3 {
  font-size: 1rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.report-modal-header h3 i { color: #FF3B30; }
.report-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: 0.2s;
}
.report-modal-close:hover { background: rgba(255,255,255,0.12); }

.report-reasons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.report-reason-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.2s;
}
.report-reason-item:hover { border-color: rgba(255,255,255,0.15); color: #fff; }
.report-reason-item.selected {
  border-color: #FF3B30;
  background: rgba(255,59,48,0.08);
  color: #FF3B30;
}
.report-reason-item i { font-size: 0.9rem; width: 20px; text-align: center; }

.report-details-input {
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  min-height: 70px;
  margin-bottom: 1rem;
}
.report-details-input::placeholder { color: var(--text-dim); }
.report-submit-btn {
  width: 100%;
  padding: 0.8rem;
  border-radius: 12px;
  border: none;
  background: #FF3B30;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.report-submit-btn:hover { background: #e0352b; }
.report-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Admin reports table */
.reports-table { width: 100%; border-collapse: collapse; }
.reports-table th {
  text-align: right;
  padding: 0.8rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reports-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 0.8rem;
  color: var(--text-primary);
  vertical-align: middle;
}

/* ============================
   ORDERS MANAGEMENT SYSTEM
   ============================ */
.orders-page { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; }
.orders-top-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.orders-top-bar h2 { font-size: 1.3rem; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 0.5rem; }
.orders-filter-bar { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.orders-filter-bar::-webkit-scrollbar { height: 3px; }
.orders-filter-tab { flex-shrink: 0; padding: 0.5rem 1rem; border-radius: 99px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
.orders-filter-tab:hover { border-color: rgba(255,255,255,0.15); color: #fff; }
.orders-filter-tab.active { background: rgba(100,255,179,0.08); border-color: var(--accent-cyan); color: var(--accent-cyan); }
.orders-filter-count { font-size: 0.65rem; background: rgba(255,255,255,0.06); padding: 1px 7px; border-radius: 99px; }
.orders-filter-tab.active .orders-filter-count { background: rgba(100,255,179,0.15); }
.orders-search { padding: 0.55rem 1rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #fff; font-size: 0.85rem; font-family: inherit; width: 100%; margin-bottom: 1rem; }
.orders-table-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); }
.orders-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.orders-table th { text-align: right; padding: 0.7rem 0.8rem; font-size: 0.7rem; font-weight: 700; color: var(--text-dim); border-bottom: 1px solid rgba(255,255,255,0.06); white-space: nowrap; }
.orders-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.02); vertical-align: middle; }
.orders-table tr:hover td { background: rgba(255,255,255,0.02); }
.orders-table tr.clickable { cursor: pointer; }
.orders-table tr.clickable:hover td { background: rgba(100,255,179,0.03); }
.orders-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 99px; font-size: 0.65rem; font-weight: 700; white-space: nowrap; }
.orders-badge-note { background: rgba(245,158,11,0.1); color: #F59E0B; }
.orders-badge-paid { background: rgba(16,185,129,0.08); color: #10B981; }
.orders-badge-source { font-size: 0.65rem; color: var(--text-dim); }
.orders-load-more { text-align: center; margin-top: 1.5rem; }
.orders-load-more button { padding: 0.7rem 2rem; border-radius: 12px; border: 1px solid var(--accent-cyan); background: rgba(100,255,179,0.05); color: var(--accent-cyan); font-weight: 800; font-size: 0.85rem; cursor: pointer; font-family: inherit; }
.orders-load-more button:hover { background: var(--accent-cyan); color: #000; }

/* Order Details */
.order-details-page { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
.order-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.8rem; margin-bottom: 1.5rem; }
.order-stat-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 1rem; text-align: center; }
.order-stat-num { font-size: 1.3rem; font-weight: 900; color: #fff; }
.order-stat-label { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }
.order-detail-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 1.5rem; }
.order-detail-row { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.85rem; }
.order-detail-row:last-child { border-bottom: none; }
.order-detail-label { color: var(--text-dim); }
.order-detail-value { color: #fff; font-weight: 600; }
.order-detail-select { padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #fff; font-family: inherit; font-size: 0.82rem; }

/* Customer Page */
.customer-page { max-width: 1300px; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: 280px 1fr; gap: 1.5rem; align-items: start; }
.customer-sidebar { position: sticky; top: 20px; }
.customer-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 1.5rem; }
.customer-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-cyan); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 900; color: #000; margin-bottom: 0.8rem; }
.customer-name { font-size: 1.1rem; font-weight: 900; color: #fff; margin-bottom: 0.2rem; }
.customer-since { font-size: 0.75rem; color: var(--text-dim); margin-bottom: 1rem; }
.customer-contact { font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.customer-overview { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.05); }
.customer-overview h4 { font-size: 0.8rem; font-weight: 800; color: var(--text-dim); margin-bottom: 0.6rem; }
.customer-overview-item { display: flex; justify-content: space-between; padding: 0.35rem 0; font-size: 0.78rem; }
.customer-overview-item .col { color: var(--text-dim); }
.customer-overview-item .cval { color: #fff; font-weight: 600; }
.customer-main { min-width: 0; }
.customer-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.8rem; margin-bottom: 1.5rem; }
@media (max-width: 768px) { .customer-page { grid-template-columns: 1fr; } .customer-sidebar { position: static; } }

/* Abandoned Carts */
.carts-analytics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.carts-analytic-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 1.5rem; text-align: center; }
.carts-analytic-card h3 { font-size: 0.75rem; font-weight: 700; color: var(--text-dim); margin-bottom: 0.5rem; }
.carts-analytic-val { font-size: 1.8rem; font-weight: 900; color: #fff; }
.carts-analytic-val.recovery { color: #10B981; }
.carts-date-filter { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.carts-date-filter input { padding: 0.5rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: #fff; font-family: inherit; }
.export-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border-radius: 10px; border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); color: #10B981; font-weight: 700; font-size: 0.82rem; cursor: pointer; font-family: inherit; }
.export-btn:hover { background: #10B981; color: #fff; }

/* Shipping Section */
.ship-section { 
  background: rgba(100,255,179,0.02); 
  border: 1px solid rgba(100,255,179,0.1); 
  border-radius: 16px; 
  padding: 1.5rem; 
  margin-top: 1.2rem;
  transition: border-color 0.2s;
}
.ship-section:hover { border-color: rgba(100,255,179,0.18); }
.ship-section h4 { 
  font-size: 1rem; 
  font-weight: 800; 
  margin-bottom: 1rem; 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  color: var(--accent-cyan);
}
.ship-form { display: flex; flex-direction: column; gap: 0.8rem; }
.ship-form input, .ship-form select { 
  width: 100%; 
  padding: 0.6rem 0.9rem; 
  border-radius: 10px; 
  border: 1px solid rgba(255,255,255,0.1); 
  background: rgba(255,255,255,0.04); 
  color: #fff; 
  font-family: inherit; 
  font-size: 0.85rem; 
  outline: none;
  transition: border-color 0.2s;
}
.ship-form input:focus, .ship-form select:focus { border-color: var(--accent-cyan); }
.ship-form-row { display: flex; gap: 0.6rem; }
.ship-form-row input { flex: 1; }

/* ============================
   BIN DELETE BUTTON (Uiverse)
   ============================ */
.kaser-bin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background-color: rgba(255, 95, 95, 0.85);
  cursor: pointer;
  border: 2px solid rgba(255, 201, 201, 0.5);
  transition-duration: 0.3s;
  padding: 0;
  margin: 0;
  gap: 1px;
}
.kaser-bin-btn .bin-top {
  width: 15px;
  transform-origin: right;
  transition-duration: 0.3s;
}
.kaser-bin-btn .bin-bottom {
  width: 13px;
}
.kaser-bin-btn:hover .bin-top {
  transform: rotate(45deg);
}
.kaser-bin-btn:hover {
  background-color: rgb(255, 0, 0);
  border-color: rgb(255, 201, 201);
}
.kaser-bin-btn:active {
  transform: scale(0.9);
}

/* ============================
   TRANSACTION CARD (Uiverse)
   ============================ */
.txn-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  animation: txnFadeIn 0.3s ease;
}
@keyframes txnFadeIn { from { opacity: 0; } to { opacity: 1; } }
.txn-container {
  background-color: #ffffff;
  display: flex;
  width: 460px;
  height: 120px;
  position: relative;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
}
.txn-left-side {
  background-color: #5de2a3;
  width: 130px;
  height: 120px;
  border-radius: 4px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
  flex-shrink: 0;
  overflow: hidden;
}
.txn-right-side {
  width: calc(100% - 130px);
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
  padding: 0 20px;
}
.txn-right-side:hover { background-color: #f9f7f9; }
.txn-arrow {
  width: 20px; height: 20px; margin-right: 20px;
}
.txn-new {
  font-size: 23px;
  font-family: "Lexend Deca", "Cairo", sans-serif;
  margin-left: 20px;
  font-weight: 700;
}
.txn-card {
  width: 70px;
  height: 46px;
  background-color: #c7ffbc;
  border-radius: 6px;
  position: absolute;
  display: flex;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
  box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);
}
.txn-card-line {
  width: 65px;
  height: 13px;
  background-color: #80ea69;
  border-radius: 2px;
  margin-top: 7px;
}
.txn-buttons {
  width: 8px;
  height: 8px;
  background-color: #379e1f;
  box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;
  border-radius: 50%;
  margin-top: 5px;
  transform: rotate(90deg);
  margin: 10px 0 0 -30px;
}
.txn-container:hover .txn-card {
  animation: txnSlideTop 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
.txn-container:hover .txn-post {
  animation: txnSlidePost 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@keyframes txnSlideTop {
  0% { transform: translateY(0); }
  50% { transform: translateY(-70px) rotate(90deg); }
  60% { transform: translateY(-70px) rotate(90deg); }
  100% { transform: translateY(-8px) rotate(90deg); }
}
.txn-post {
  width: 63px;
  height: 75px;
  background-color: #dddde0;
  position: absolute;
  z-index: 11;
  bottom: 10px;
  top: 120px;
  border-radius: 6px;
  overflow: hidden;
}
.txn-post-line {
  width: 47px;
  height: 9px;
  background-color: #545354;
  position: absolute;
  border-radius: 0px 0px 3px 3px;
  right: 8px;
  top: 8px;
}
.txn-post-line:before {
  content: "";
  position: absolute;
  width: 47px;
  height: 9px;
  background-color: #757375;
  top: -8px;
}
.txn-screen {
  width: 47px;
  height: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 22px;
  right: 8px;
  border-radius: 3px;
}
.txn-numbers {
  width: 12px;
  height: 12px;
  background-color: #838183;
  box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 52px;
}
.txn-numbers-line2 {
  width: 12px;
  height: 12px;
  background-color: #aaa9ab;
  box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;
  border-radius: 2px;
  position: absolute;
  transform: rotate(90deg);
  left: 25px;
  top: 68px;
}
@keyframes txnSlidePost {
  50% { transform: translateY(0); }
  100% { transform: translateY(-70px); }
}
.txn-dollar {
  position: absolute;
  font-size: 16px;
  font-family: "Lexend Deca", "Cairo", sans-serif;
  width: 100%;
  left: 0;
  top: 0;
  color: #4b953b;
  text-align: center;
}
.txn-container.active .txn-dollar {
  animation: txnFadeInUp 0.3s 1s backwards;
}
@keyframes txnFadeInUp {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}
.txn-container.active .txn-card {
  animation: txnSlideTop 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;
}
.txn-container.active .txn-post {
  animation: txnSlidePost 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;
}
@media only screen and (max-width: 480px) {
  .txn-container { transform: scale(0.7); }
  .txn-new { font-size: 18px; }
}

/* ============================
   HAMBURGER TOGGLE (Uiverse)
   ============================ */
.hamburger-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
}
.hamburger-toggle .hbar {
  width: 100%;
  height: 4px;
  background-color: rgb(76, 189, 151);
  border-radius: 5px;
  transition-duration: .3s;
}
.hamburger-toggle.open .hbar:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: left center;
}
.hamburger-toggle.open .hbar:nth-child(2) {
  transform: rotate(135deg);
  transform-origin: center;
  margin-left: 0;
}
.hamburger-toggle.open .hbar:nth-child(3) {
  transform: rotate(-45deg);
  transform-origin: left center;
}

/* ============================
   EDIT BUTTON (Uiverse)
   ============================ */
.kaser-edit-btn {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  border: none;
  background-color: rgb(93, 93, 116);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.123);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  padding: 0;
}
.kaser-edit-btn::before {
  content: "";
  width: 200%;
  height: 200%;
  background-color: rgb(102, 102, 141);
  position: absolute;
  z-index: 1;
  transform: scale(0);
  transition: all 0.3s;
  border-radius: 50%;
  filter: blur(10px);
}
.kaser-edit-btn:hover::before { transform: scale(1); }
.kaser-edit-btn:hover { box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.336); }
.kaser-edit-btn svg {
  height: 17px; fill: white; z-index: 3;
  transition: all 0.2s; transform-origin: bottom;
}
.kaser-edit-btn:hover svg { transform: rotate(-15deg) translateX(5px); }
.kaser-edit-btn::after {
  content: "";
  width: 25px; height: 1.5px;
  position: absolute; bottom: 12px; left: -5px;
  background-color: white; border-radius: 2px;
  z-index: 2; transform: scaleX(0);
  transform-origin: left; transition: transform 0.5s ease-out;
}
.kaser-edit-btn:hover::after { transform: scaleX(1); left: 10px; transform-origin: right; }

/* ============================
   BOOKMARK FAVORITE (Uiverse)
   ============================ */
.kaser-fav-btn {
  position: absolute; top: 8px; left: 8px; z-index: 8;
  width: 36px; height: 36px; border-radius: 10px;
  background-color: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
  border: none; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: 0.3s; padding: 0;
}
.kaser-fav-btn svg { width: 16px; }
.kaser-fav-btn svg path {
  stroke-dasharray: 200 0; stroke-dashoffset: 0;
  stroke: white; fill: #dddddd00;
  transition-delay: 0s; transition-duration: 0.5s;
}
.kaser-fav-btn.faved svg path {
  fill: #ff4d4d;
  animation: kaserBookmark 0.5s linear;
  transition-delay: 0.5s; stroke: #ff4d4d;
}
@keyframes kaserBookmark {
  0% { stroke-dasharray: 0 200; stroke-dashoffset: 80; }
  100% { stroke-dasharray: 200 0; }
}
.kaser-fav-btn:hover { background-color: rgba(0,0,0,0.6); transform: scale(1.1); }

/* ============================
   INBOX MESSAGE ICON (Uiverse)
   ============================ */
.inbox-icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: none;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.082);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  background-color: #464646;
  cursor: pointer; transition: all 0.3s;
}
.inbox-icon-btn svg { height: 17px; transition: all 0.3s; }
.inbox-icon-btn svg path { fill: white; }
.inbox-icon-btn:hover { transform: scale(1.1); }
.inbox-badge {
  position: absolute; top: -5px; right: -5px;
  background-color: rgb(255, 255, 255); border-radius: 50%;
  font-size: 0.65em; color: rgb(0, 0, 0);
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

/* ============================
   SHARE BUTTON (Uiverse)
   ============================ */
.kaser-connect-btn {
  width: 130px; height: 40px; border: none; border-radius: 30px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: white; font-weight: 600; font-family: inherit;
  background: linear-gradient(to right, #8be3fc, #576bff);
  box-shadow: 0 20px 30px -7px rgba(97, 118, 238, 0.5);
  transition: all 0.3s ease-in-out; cursor: pointer; font-size: 0.85rem;
}
.kaser-connect-btn:hover { box-shadow: none; transform: translate(0px, 2.2px); }
.kaser-connect-btn:active { transform: scale(0.96) translate(0px, 3.2px); }
.kaser-connect-btn svg { width: 1em; height: 1em; fill: white; }

/* ============================
   TOP SELLERS RANKING PODIUM
   ============================ */
.top-sellers-podium { display: flex; gap: 1rem; justify-content: center; align-items: flex-end; flex-wrap: wrap; padding: 20px 0; }
.seller-rank-card {
  width: 200px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.2rem 1rem; text-align: center;
  transition: 0.4s; text-decoration: none; color: #fff; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.seller-rank-card:hover { transform: translateY(-8px); border-color: rgba(100,255,179,0.25); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.seller-rank-card.rank-1 { width: 220px; min-height: 260px; background: linear-gradient(180deg, rgba(255,215,0,0.08), rgba(255,255,255,0.02)); border-color: rgba(255,215,0,0.3); order: 2; }
.seller-rank-card.rank-2 { order: 1; }
.seller-rank-card.rank-3 { order: 3; }
.seller-rank-medal { font-size: 2.2rem; }
.seller-rank-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-brand), var(--accent-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 900; color: #000;
  background-size: cover; background-position: center;
}
.seller-rank-card.rank-1 .seller-rank-avatar { width: 80px; height: 80px; font-size: 1.8rem; border: 3px solid rgba(255,215,0,0.5); }
.seller-rank-name { font-weight: 800; font-size: 0.95rem; color: #fff; }
.seller-rank-card.rank-1 .seller-rank-name { font-size: 1.05rem; }
.seller-rank-stats { font-size: 0.75rem; color: var(--text-dim); }
.seller-rank-rating { display: flex; align-items: center; gap: 3px; font-size: 0.8rem; color: #f5a623; font-weight: 700; }
.seller-rank-rating i { font-size: 0.7rem; }

/* ============================
   BLUR-UP IMAGE LOADING
   ============================ */
.blur-up-img {
  filter: blur(12px);
  opacity: 0.5;
  transition: filter 0.6s ease, opacity 0.6s ease;
}
.blur-up-img.loaded {
  filter: blur(0);
  opacity: 1;
}
.card-image.blur-up-img { object-fit: cover; }

/* ============================
   FINAL TOUCHES: Scroll Snap + Enhanced Cascade + Gyro
   ============================ */
.page-snap {
  scroll-snap-type: y proximity;
  overflow-y: scroll;
  height: 100vh;
}
.page-snap > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Enhanced stagger reveal — alternating directions */
.reveal-alt-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal-alt-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal-alt-left.revealed,
.reveal-alt-right.revealed { opacity: 1; transform: translateX(0); }
.reveal-pop { opacity: 0; transform: scale(0.9); transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.reveal-pop.revealed { opacity: 1; transform: scale(1); }
.reveal-rotate { opacity: 0; transform: rotateY(15deg) scale(0.95); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal-rotate.revealed { opacity: 1; transform: rotateY(0) scale(1); }

/* Faster cascade for dense grids */
.reveal-stagger.speed-40 .reveal { transition-delay: calc(var(--i, 0) * 40ms) !important; }
.reveal-stagger.speed-80 .reveal { transition-delay: calc(var(--i, 0) * 80ms) !important; }

/* ============================
   BACK TO TOP BUTTON
   ============================ */
#kaser-back-to-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 9999;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-cyan); color: #000;
  border: none; cursor: pointer; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275), visibility 0.3s;
  box-shadow: 0 4px 20px rgba(100,255,179,0.3);
}
#kaser-back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#kaser-back-to-top:hover { transform: translateY(-3px) scale(1.1); box-shadow: 0 6px 28px rgba(100,255,179,0.45); }
@media (max-width: 768px) {
  #kaser-back-to-top { bottom: 82px; }
}

/* ============================
   PAGE HEADER + BREADCRUMB
   ============================ */
.page-header-banner {
  background: linear-gradient(135deg, rgba(100,255,179,0.04), rgba(10,10,10,0.95)), url('LOGO-KASER.png') center/200px no-repeat;
  background-color: #0A0A0A;
  padding: 5rem 2rem 2.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(100,255,179,0.08);
}
.page-header-title {
  font-size: 1.8rem; font-weight: 900; color: #fff; margin-bottom: 0.5rem;
}
.page-breadcrumb {
  font-size: 0.8rem; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.page-breadcrumb a { color: var(--accent-cyan); text-decoration: none; font-weight: 700; }
.page-breadcrumb a:hover { color: #fff; }
.page-breadcrumb i { font-size: 0.6rem; }

/* ============================
   SERVICE TRUST BAR
   ============================ */
.service-bar {
  max-width: 1400px; margin: 0 auto; padding: 16px 20px;
}
.service-bar-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  background: rgba(255,255,255,0.015); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 1.5rem 1rem;
}
.service-item {
  display: flex; align-items: center; gap: 12px;
  color: #fff; padding: 0.8rem 1rem; border-radius: 14px;
  transition: 0.3s;
}
.service-item:hover { background: rgba(100,255,179,0.04); }
.service-item i { font-size: 1.5rem; color: var(--accent-cyan); width: 36px; text-align: center; flex-shrink: 0; }
.service-item strong { font-size: 0.85rem; display: block; }
.service-item span { font-size: 0.7rem; color: var(--text-dim); display: block; margin-top: 2px; }
@media (max-width: 768px) {
  .service-bar-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 440px) {
  .service-bar-inner { grid-template-columns: 1fr; }
}

/* ============================
   BROWSE VIEW TOGGLE + PAGINATION
   ============================ */
.browse-view-btn {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); cursor: pointer; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.browse-view-btn.active { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); }
.browse-view-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.browse-view-btn.active:hover { color: #000; }
.browse-sort-select { cursor: pointer; min-width: 130px; }
.browse-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 2rem; flex-wrap: wrap; }
.browse-page-btn {
  min-width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); cursor: pointer; font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center; transition: 0.2s;
  font-family: inherit; padding: 0 10px;
}
.browse-page-btn.active { background: var(--accent-cyan); color: #000; border-color: var(--accent-cyan); }
.browse-page-btn:hover:not(.active) { border-color: rgba(255,255,255,0.2); color: #fff; }
.browse-page-btn:disabled { opacity: 0.3; cursor: default; }

/* List view cards */
.browse-grid.list-view { display: flex; flex-direction: column; gap: 10px; }
.browse-grid.list-view .card-link { flex: none; max-width: 100%; }
.browse-grid.list-view .kaser-card { display: flex; flex-direction: row; height: 160px; }
.browse-grid.list-view .card-img-wrap { width: 200px; height: 160px; flex-shrink: 0; }
.browse-grid.list-view .card-info { flex: 1; }

/* ============================
   DASHBOARD ITEM CARDS (Portal)
   ============================ */
.status-badge-dash {
  position: absolute; top: 8px; right: 8px; z-index: 7;
  padding: 3px 10px; border-radius: 8px;
  font-size: 0.6rem; font-weight: 900;
  backdrop-filter: blur(8px);
}
.status-badge-dash.active {
  background: rgba(52,199,89,0.2); color: #34c759;
  border: 1px solid rgba(52,199,89,0.3);
}
.status-badge-dash.sold {
  background: rgba(255,59,48,0.2); color: #FF3B30;
  border: 1px solid rgba(255,59,48,0.3);
}
.card-link.vertical-mode { width: 100%; }
.card-link.wide-mode { width: 100%; }
.card-link.wide-mode .kaser-card { display: flex; flex-direction: row; }
.card-link.wide-mode .card-img-wrap { width: 40%; flex-shrink: 0; }
.card-link.wide-mode .card-info { flex: 1; }
.card-link.vertical-mode .kaser-card { display: flex; flex-direction: column; }
.card-link.vertical-mode .card-img-wrap { width: 100%; }

/* ============================
   CART COUPON + SHIPPING + FLASH DEAL
   ============================ */
.cart-coupon-row { display: flex; gap: 6px; margin: 6px 0; }
.cart-coupon-input {
  flex: 1; padding: 0.5rem 0.8rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: #fff; font-family: inherit; font-size: 0.8rem; outline: none;
}
.cart-coupon-btn {
  padding: 0.5rem 1rem; border-radius: 8px; border: none;
  background: rgba(100,255,179,0.1); color: var(--accent-cyan);
  font-weight: 800; font-size: 0.8rem; cursor: pointer; font-family: inherit;
  transition: 0.2s;
}
.cart-coupon-btn:hover { background: rgba(100,255,179,0.2); }
.cart-rec-free-shipping-hint {
  font-size: 0.7rem; color: var(--text-dim); text-align: center;
  padding: 6px 0; border-top: 1px dashed rgba(255,255,255,0.06);
  margin-top: 4px;
}
.flash-deal-badge {
  position: absolute; top: 10px; left: 10px; z-index: 8;
  background: linear-gradient(135deg, #FF3B30, #FF6B35);
  color: #fff; padding: 4px 10px; border-radius: 8px;
  font-size: 0.65rem; font-weight: 900;
  display: flex; align-items: center; gap: 4px;
  animation: flashPulse 1.5s ease-in-out infinite;
}
@keyframes flashPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.flash-deal-badge i { font-size: 0.6rem; }
.cart-recovery-modal {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: rgba(20,20,25,0.95); border: 1px solid rgba(100,255,179,0.2);
  border-radius: 16px; padding: 1rem 1.5rem; max-width: 320px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: slideUpIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
}
@keyframes slideUpIn {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ============================
   ITEM PAGE ENHANCEMENTS
   ============================ */

/* ---- Image Pan Zoom (animate-ui style) ---- */
.main-image-wrapper {
  overflow: hidden; cursor: zoom-in;
}
.main-image {
  transition: transform 0.25s ease-out;
  transform-origin: center center;
}

/* ---- Image Lightbox ---- */
.image-lightbox {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10005; background: rgba(0,0,0,0.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.image-lightbox.active { opacity: 1; visibility: visible; }
.image-lightbox img {
  max-width: 90vw; max-height: 85vh; object-fit: contain;
  border-radius: 16px; transition: transform 0.3s;
}
.image-lightbox .lb-close {
  position: fixed; top: 20px; right: 20px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 50%; width: 44px; height: 44px;
  font-size: 1.3rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10006; transition: 0.2s;
}
.image-lightbox .lb-close:hover { background: rgba(255,59,48,0.3); }
.image-lightbox .lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; border-radius: 50%; width: 48px; height: 48px;
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 10006; transition: 0.2s;
}
.image-lightbox .lb-nav:hover { background: rgba(100,255,179,0.15); }
.image-lightbox .lb-prev { right: 30px; }
.image-lightbox .lb-next { left: 30px; }
.image-lightbox .lb-counter {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.5); font-size: 0.85rem; font-weight: 700; z-index: 10006;
}

/* ---- Product Description ---- */
.item-description-section {
  background: linear-gradient(145deg, rgba(100,255,179,0.03), rgba(139,92,246,0.03));
  border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 1.2rem; margin-bottom: 1.2rem;
}
.item-description-section h4 {
  font-size: 0.95rem; font-weight: 900; color: #fff;
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
}
.item-description-section h4 i { color: var(--accent-cyan); }
.item-description-content {
  font-size: 0.9rem; color: var(--text-secondary);
  line-height: 1.9; white-space: pre-wrap; word-break: break-word;
}
.item-description-content.collapsed { max-height: 120px; overflow: hidden; }
.btn-read-more {
  display: none; background: none; border: none; color: var(--accent-cyan);
  font-family: 'Cairo',sans-serif; font-weight: 700; font-size: 0.8rem;
  cursor: pointer; padding: 6px 0; margin-top: 4px;
}

/* ---- Stock Status Badge ---- */
.stock-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 99px; font-size: 0.72rem; font-weight: 800;
}
.stock-available { background: rgba(100,255,179,0.1); color: var(--accent-cyan); }
.stock-reserved { background: rgba(255,193,7,0.1); color: #ffc107; }
.stock-sold { background: rgba(255,59,48,0.1); color: #FF3B30; }

/* ---- Warranty Badge ---- */
.warranty-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.15);
  border-radius: 12px; padding: 8px 14px; font-size: 0.78rem; color: #c4b5fd;
  font-weight: 700; margin-top: 0.5rem;
}
.warranty-badge i { color: var(--accent-purple); }

/* ---- Price Sparkline ---- */
.price-sparkline-wrap {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,59,48,0.04); border: 1px solid rgba(255,59,48,0.08);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 0.8rem; font-size: 0.78rem;
}
.price-sparkline-wrap svg { flex-shrink: 0; }
.price-sparkline-text { color: var(--accent-cyan); font-weight: 700; }
.price-sparkline-saved { color: #FF3B30; }

/* ---- Social Proof ---- */
.social-proof-row {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 0.8rem;
}
.social-proof-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; color: var(--text-dim); font-weight: 600;
}
.social-proof-item i { color: var(--accent-cyan); font-size: 0.8rem; }
.social-proof-item .live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #FF3B30;
  animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ---- Seller Tier Badge ---- */
.seller-tier-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 99px; font-size: 0.68rem; font-weight: 800;
  margin-right: 4px;
}
.tier-new { background: rgba(139,92,246,0.1); color: #c4b5fd; }
.tier-active { background: rgba(59,130,246,0.1); color: #60a5fa; }
.tier-elite { background: linear-gradient(135deg, rgba(100,255,179,0.15), rgba(255,193,7,0.15)); color: var(--accent-cyan); }

/* ---- Seller Stats Mini ---- */
.seller-stats-mini {
  display: flex; gap: 14px; flex-wrap: wrap; margin-top: 0.6rem;
  padding-top: 0.8rem; border-top: 1px solid rgba(255,255,255,0.04);
}
.seller-stat {
  text-align: center; font-size: 0.7rem; color: var(--text-dim);
}
.seller-stat strong { display: block; color: #fff; font-size: 0.9rem; font-weight: 800; }

/* ---- Recently Viewed ---- */
.recently-viewed-section {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.recently-viewed-section h3 {
  font-weight: 900; font-size: 1rem; color: #fff; margin-bottom: 1rem;
}
.recently-viewed-grid {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  max-width: 1400px;
}
.recently-viewed-grid::-webkit-scrollbar { height: 3px; }
.recently-viewed-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 10px; }
.recently-viewed-card {
  flex: 0 0 160px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: 12px;
  overflow: hidden; text-decoration: none; scroll-snap-align: start;
  transition: 0.2s;
}
.recently-viewed-card:hover { border-color: var(--accent-cyan); transform: translateY(-2px); }
.recently-viewed-card img {
  width: 100%; height: 100px; object-fit: cover;
}
.recently-viewed-card .rv-info { padding: 8px 10px; }
.recently-viewed-card .rv-title {
  font-size: 0.72rem; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recently-viewed-card .rv-price {
  font-size: 0.72rem; font-weight: 800; color: var(--accent-cyan); margin-top: 2px;
}

/* ---- Copy Link Button ---- */
.btn-copy-link {
  width: 100%; padding: 0.6rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: var(--text-secondary);
  font-family: 'Cairo',sans-serif; font-weight: 700; font-size: 0.8rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; transition: 0.2s; margin-top: 0.4rem;
}
.btn-copy-link:hover { background: rgba(100,255,179,0.06); border-color: rgba(100,255,179,0.2); color: var(--accent-cyan); }
.btn-copy-link.copied { background: rgba(100,255,179,0.1); border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ---- Item Page Skeleton (Enhanced) ---- */
.item-skeleton {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem;
}
.item-skeleton-gallery {
  background: var(--bg-card); border-radius: 24px;
  aspect-ratio: 4/3; border: 1px solid var(--border-color);
}
.item-skeleton-info { display: flex; flex-direction: column; gap: 14px; }
.item-skel { border-radius: 10px; }
.item-skel-sm { height: 14px; width: 40%; }
.item-skel-md { height: 22px; width: 70%; }
.item-skel-lg { height: 36px; width: 90%; }
.item-skel-xl { height: 52px; width: 60%; }
.item-skel-btn { height: 48px; width: 100%; }
.item-skel-spec { height: 80px; width: 100%; }
.item-skel-seller { height: 160px; width: 100%; }
@media (max-width: 900px) {
  .item-skeleton { grid-template-columns: 1fr; }
}

/* ============================
   BROWSE PAGE ENHANCEMENTS
   ============================ */

/* ---- Active Filter Chips ---- */
.active-filters-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; align-items: center;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 99px;
  background: rgba(100,255,179,0.06); border: 1px solid rgba(100,255,179,0.15);
  color: var(--accent-cyan); font-size: 0.72rem; font-weight: 700;
  cursor: pointer; transition: 0.2s;
}
.filter-chip:hover { background: rgba(255,59,48,0.08); border-color: rgba(255,59,48,0.2); color: #FF3B30; }
.filter-chip i { font-size: 0.65rem; }
.clear-all-filters {
  background: none; border: 1px solid rgba(255,59,48,0.15);
  color: #FF3B30; font-size: 0.7rem; font-weight: 700;
  padding: 5px 12px; border-radius: 99px; cursor: pointer;
  font-family: 'Cairo',sans-serif; transition: 0.2s;
}
.clear-all-filters:hover { background: rgba(255,59,48,0.1); }

/* ---- Quick Sort Pills ---- */
.sort-pills {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem;
}
.sort-pill {
  padding: 6px 14px; border-radius: 99px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; font-family: 'Cairo',sans-serif; transition: 0.2s;
  white-space: nowrap;
}
.sort-pill:hover { border-color: rgba(100,255,179,0.3); color: #fff; }
.sort-pill.active {
  background: rgba(100,255,179,0.08); border-color: var(--accent-cyan);
  color: var(--accent-cyan); box-shadow: 0 0 12px rgba(100,255,179,0.1);
}

/* ---- Browse Skeleton Cards ---- */
.browse-skeleton-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem;
  padding: 0;
}
.browse-skeleton-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius); overflow: hidden;
}
.browse-skeleton-card .bsk-img { height: 200px; }
.browse-skeleton-card .bsk-body { padding: 1rem; }
.browse-skeleton-card .bsk-body .kaser-skeleton { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.browse-skeleton-card .bsk-body .kaser-skeleton:last-child { width: 50%; margin-bottom: 0; }
@media (max-width: 768px) {
  .browse-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .browse-skeleton-card .bsk-img { height: 140px; }
}

/* ---- Mobile Filter Drawer ---- */
.mobile-filter-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 10003; background: rgba(10,10,15,0.97);
  backdrop-filter: blur(20px); border-top: 1px solid rgba(100,255,179,0.1);
  border-radius: 24px 24px 0 0; padding: 1.2rem;
  max-height: 85vh; overflow-y: auto;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.mobile-filter-drawer.active { transform: translateY(0); }
.mobile-filter-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10002; background: rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; transition: 0.3s;
}
.mobile-filter-backdrop.active { opacity: 1; visibility: visible; }
.mobile-filter-handle {
  width: 40px; height: 4px; background: rgba(255,255,255,0.2);
  border-radius: 99px; margin: 0 auto 1rem;
}
.mobile-filter-trigger {
  display: none; align-items: center; gap: 8px;
  padding: 0.7rem 1rem; border-radius: 12px;
  background: rgba(100,255,179,0.06); border: 1px solid rgba(100,255,179,0.15);
  color: var(--accent-cyan); font-weight: 800; font-size: 0.85rem;
  font-family: 'Cairo',sans-serif; cursor: pointer;
  width: 100%; justify-content: center; margin-bottom: 1rem;
}
.mobile-filter-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  color: #fff; border-radius: 50%; width: 36px; height: 36px;
  font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .mobile-filter-trigger { display: flex; }
  .browse-filters-bar { display: none; } /* hidden on mobile, shown in drawer */
}

/* ---- Infinite Scroll Toggle ---- */
.infini-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.7rem; color: var(--text-dim); font-weight: 700;
  cursor: pointer; user-select: none;
}
.infini-toggle input { accent-color: var(--accent-cyan); width: 14px; height: 14px; cursor: pointer; }

/* ---- Empty State Suggestions ---- */
.browse-suggestions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 1rem;
}
.browse-suggestions a {
  padding: 8px 16px; border-radius: 8px;
  background: rgba(100,255,179,0.04); border: 1px solid rgba(100,255,179,0.1);
  color: var(--accent-cyan); font-size: 0.8rem; text-decoration: none;
  font-weight: 700; transition: 0.2s;
}
.browse-suggestions a:hover { background: rgba(100,255,179,0.08); border-color: rgba(100,255,179,0.2); }

/* ---- Glass Filter Bar ---- */
.browse-filters-bar.glass {
  background: rgba(10,10,20,0.85); backdrop-filter: blur(16px);
  border: 1px solid rgba(100,255,179,0.08);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}
.browse-filters-bar select option {
  background: #111; color: #fff;
}

/* ---- View Button Improvements ---- */
.browse-view-btn {
  padding: 0.5rem 0.7rem; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
  color: var(--text-dim); cursor: pointer; font-size: 0.9rem; transition: 0.2s;
}
.browse-view-btn:hover { border-color: var(--accent-cyan); color: #fff; }
.browse-view-btn.active { background: rgba(100,255,179,0.08); border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ---- Quick Stats Counter ---- */
.browse-live-counter {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.5rem;
}
.browse-live-counter i { color: var(--accent-cyan); }
.browse-live-counter strong { color: #fff; font-weight: 800; }

/* ---- Staggered Card Animation ---- */
.browse-grid .card-link { opacity: 0; transform: translateY(20px); animation: staggerIn 0.4s ease-out forwards; }
.browse-grid .card-link:nth-child(1) { animation-delay: 0.05s; }
.browse-grid .card-link:nth-child(2) { animation-delay: 0.1s; }
.browse-grid .card-link:nth-child(3) { animation-delay: 0.15s; }
.browse-grid .card-link:nth-child(4) { animation-delay: 0.2s; }
.browse-grid .card-link:nth-child(5) { animation-delay: 0.25s; }
.browse-grid .card-link:nth-child(6) { animation-delay: 0.3s; }
.browse-grid .card-link:nth-child(7) { animation-delay: 0.35s; }
.browse-grid .card-link:nth-child(8) { animation-delay: 0.4s; }
.browse-grid .card-link:nth-child(n+9) { animation-delay: 0.45s; }
@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ============================
   PORTAL DASHBOARD ENHANCEMENTS
   ============================ */

/* ---- Listing Filter Tabs ---- */
.listing-filter-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.2rem;
}
.listing-filter-tab {
  padding: 7px 18px; border-radius: 99px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; font-family: 'Cairo',sans-serif; transition: 0.2s;
}
.listing-filter-tab:hover { border-color: rgba(100,255,179,0.25); color: #fff; }
.listing-filter-tab.active {
  background: rgba(100,255,179,0.08); border-color: var(--accent-cyan);
  color: var(--accent-cyan); box-shadow: 0 0 10px rgba(100,255,179,0.08);
}
.listing-filter-tab .tab-count { margin-right: 4px; font-size: 0.68rem; opacity: 0.7; }

/* ---- Batch Action Bar ---- */
.batch-action-bar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0.8rem 1rem; border-radius: 14px;
  background: rgba(100,255,179,0.04); border: 1px solid rgba(100,255,179,0.1);
  margin-bottom: 1rem; font-size: 0.78rem; color: var(--text-dim);
}
.batch-action-bar.visible { display: flex; }
.batch-action-bar button {
  padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: #fff; font-size: 0.72rem;
  font-weight: 700; font-family: 'Cairo',sans-serif; cursor: pointer; transition: 0.2s;
}
.batch-action-bar button:hover { background: rgba(255,255,255,0.06); }
.batch-action-bar button.batch-delete { border-color: rgba(255,59,48,0.2); color: #FF3B30; }
.batch-action-bar button.batch-delete:hover { background: rgba(255,59,48,0.08); }
.batch-action-bar button.batch-sold { border-color: rgba(100,255,179,0.2); color: var(--accent-cyan); }
.batch-action-bar button.batch-sold:hover { background: rgba(100,255,179,0.06); }
.dash-card-check {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  width: 22px; height: 22px; accent-color: var(--accent-cyan);
  cursor: pointer; opacity: 0; transition: 0.2s;
}
.kaser-card:hover .dash-card-check,
.kaser-card.has-check .dash-card-check { opacity: 1; }

/* ---- Dashboard Listing Bump Button ---- */
.dash-bump-btn {
  padding: 0.35rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(139,92,246,0.2);
  background: rgba(139,92,246,0.06); color: #c4b5fd;
  font-size: 0.68rem; font-weight: 700; font-family: 'Cairo',sans-serif;
  cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 4px;
}
.dash-bump-btn:hover { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.3); }
.dash-bump-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Enhanced Stats Row ---- */
.enhanced-stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 1.5rem;
}
.enhanced-stat-card {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 1rem; display: flex; align-items: center;
  gap: 12px; transition: 0.2s;
}
.enhanced-stat-card:hover { border-color: rgba(100,255,179,0.15); background: rgba(255,255,255,0.03); }
.enhanced-stat-card .es-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.enhanced-stat-card .es-icon.cyan { background: rgba(100,255,179,0.1); color: var(--accent-cyan); }
.enhanced-stat-card .es-icon.purple { background: rgba(139,92,246,0.1); color: var(--accent-purple); }
.enhanced-stat-card .es-icon.amber { background: rgba(255,193,7,0.1); color: #ffc107; }
.enhanced-stat-card .es-info { flex: 1; min-width: 0; }
.enhanced-stat-card .es-label { font-size: 0.68rem; color: var(--text-dim); font-weight: 600; }
.enhanced-stat-card .es-value { font-size: 1.2rem; font-weight: 900; color: #fff; margin-top: 2px; }

/* ---- Onboarding Checklist ---- */
.onboarding-checklist {
  background: linear-gradient(145deg, rgba(100,255,179,0.04), rgba(139,92,246,0.04));
  border: 1px solid rgba(100,255,179,0.1); border-radius: 16px;
  padding: 1.2rem; margin-bottom: 1.5rem;
}
.onboarding-checklist h4 {
  font-weight: 900; font-size: 0.95rem; color: #fff;
  margin-bottom: 0.3rem; display: flex; align-items: center; gap: 8px;
}
.onboarding-checklist h4 i { color: var(--accent-cyan); }
.onboarding-checklist .oc-subtitle { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 1rem; }
.onboarding-checklist .oc-progress {
  height: 4px; background: rgba(255,255,255,0.06); border-radius: 99px;
  margin-bottom: 1rem; overflow: hidden;
}
.onboarding-checklist .oc-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--primary-brand));
  border-radius: 99px; transition: width 0.5s ease;
}
.onboarding-checklist .oc-tasks { display: flex; flex-direction: column; gap: 6px; }
.oc-task {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  font-size: 0.78rem; transition: 0.2s;
}
.oc-task.pending { color: var(--text-secondary); background: rgba(255,255,255,0.015); }
.oc-task.done { color: var(--accent-cyan); background: rgba(100,255,179,0.03); }
.oc-task .oc-check {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 0.6rem;
}
.oc-task.pending .oc-check { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.15); }
.oc-task.done .oc-check { background: rgba(100,255,179,0.12); color: var(--accent-cyan); }
.oc-task a { color: var(--accent-cyan); font-weight: 700; }

/* ---- Dashboard Skeleton ---- */
.dash-skeleton-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius); overflow: hidden;
}
.dash-skeleton-card .dsk-img { height: 200px; }
.dash-skeleton-card .dsk-body { padding: 1rem; }
.dash-skeleton-card .dsk-body .kaser-skeleton { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.dash-skeleton-card .dsk-body .kaser-skeleton:nth-child(2) { width: 60%; }
.dash-skeleton-card .dsk-body .dsk-row { display: flex; gap: 8px; margin-top: 10px; }
.dash-skeleton-card .dsk-body .dsk-row .kaser-skeleton { height: 28px; flex: 1; }

/* ---- Sidebar Badge ---- */
.sidebar-badge {
  display: inline-flex; margin-right: auto; padding: 1px 7px;
  border-radius: 99px; background: rgba(100,255,179,0.1);
  color: var(--accent-cyan); font-size: 0.65rem; font-weight: 700;
}

/* ---- Income Summary ---- */
.income-summary-card {
  background: linear-gradient(135deg, rgba(100,255,179,0.05), rgba(139,92,246,0.05));
  border: 1px solid rgba(100,255,179,0.1); border-radius: 14px;
  padding: 1.2rem; margin-bottom: 1.2rem;
}
.income-summary-card h4 {
  font-weight: 900; font-size: 0.9rem; color: #fff;
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 6px;
}
.income-summary-card .is-row {
  display: flex; justify-content: space-between; font-size: 0.8rem;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.income-summary-card .is-row:last-child { border-bottom: none; font-weight: 800; color: var(--accent-cyan); padding-top: 8px; }
.income-summary-card .is-label { color: var(--text-dim); }
.income-summary-card .is-value { color: #fff; font-weight: 700; }

/* ============================
   PROFILE PAGE ENHANCEMENTS
   ============================ */

/* ---- Profile Skeleton ---- */
.profile-skeleton { padding: 6rem 20px 2rem; max-width: 1000px; margin: 0 auto; }
.profile-skel-header {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 24px; padding: 2rem; margin-bottom: 2rem;
}
.profile-skel-avatar { width: 80px; height: 80px; border-radius: 50%; flex-shrink: 0; }
.profile-skel-info { flex: 1; }
.profile-skel-info .kaser-skeleton { height: 14px; margin-bottom: 10px; border-radius: 8px; }
.profile-skel-info .kaser-skeleton:first-child { height: 24px; width: 50%; }
.profile-skel-info .kaser-skeleton:last-child { width: 70%; }
.profile-skel-stats {
  display: flex; gap: 1.5rem; margin-bottom: 2rem;
}
.profile-skel-stat {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 1rem; flex: 1;
}
.profile-skel-review { margin-bottom: 0.8rem; }
.profile-skel-review .kaser-skeleton:nth-child(1) { width: 25%; height: 14px; }
.profile-skel-review .kaser-skeleton:nth-child(2) { width: 100%; height: 50px; margin-top: 6px; border-radius: 10px; }

/* ---- Rating Distribution Bars ---- */
.rating-bars { margin: 1.2rem 0; }
.rating-bar-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 5px;
  font-size: 0.7rem; color: var(--text-dim);
}
.rating-bar-row .rb-stars { width: 40px; text-align: left; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.rating-bar-row .rb-track { flex: 1; height: 8px; background: rgba(255,255,255,0.04); border-radius: 99px; overflow: hidden; }
.rating-bar-row .rb-fill { height: 100%; background: var(--accent-cyan); border-radius: 99px; transition: width 0.6s ease; }
.rating-bar-row .rb-count { width: 30px; text-align: right; flex-shrink: 0; font-weight: 700; color: #fff; }

/* ---- Profile Stats Enhanced ---- */
.profile-extra-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 1rem 0; }
.profile-extra-stat {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.7rem; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.profile-extra-stat strong { color: #fff; font-weight: 800; margin: 0 3px; }
.profile-extra-stat i { color: var(--accent-cyan); font-size: 0.75rem; }

/* ---- Profile Product Sort ---- */
.profile-product-sort {
  display: flex; gap: 6px; margin-bottom: 1rem; margin-top: -0.3rem;
}
.profile-product-sort .pps-btn {
  padding: 4px 12px; border-radius: 99px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  color: var(--text-dim); font-size: 0.68rem; font-weight: 700;
  cursor: pointer; font-family: 'Cairo',sans-serif; transition: 0.2s;
}
.profile-product-sort .pps-btn:hover { border-color: rgba(100,255,179,0.2); color: #fff; }
.profile-product-sort .pps-btn.active {
  background: rgba(100,255,179,0.06); border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

/* ---- Profile Share Button ---- */
.profile-share-btn {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim); border-radius: 10px; padding: 8px 16px;
  font-size: 0.78rem; font-weight: 700; font-family: 'Cairo',sans-serif;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: 0.2s;
}
.profile-share-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ---- Profile Enhanced Responsive ---- */
@media (max-width: 600px) {
  .profile-skel-header { flex-direction: column; text-align: center; }
  .profile-skel-stats { flex-direction: column; }
  .profile-product-sort { overflow-x: auto; padding-bottom: 4px; }
}

/* ============================
   MESSAGES / OFFERS PAGE ENHANCEMENTS
   ============================ */

/* ---- Offer Filter Tabs ---- */
.offer-filter-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem;
}
.offer-filter-tab {
  padding: 6px 16px; border-radius: 99px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-secondary); font-size: 0.76rem; font-weight: 700;
  cursor: pointer; font-family: 'Cairo',sans-serif; transition: 0.2s;
}
.offer-filter-tab:hover { border-color: rgba(100,255,179,0.25); color: #fff; }
.offer-filter-tab.active {
  background: rgba(100,255,179,0.08); border-color: var(--accent-cyan);
  color: var(--accent-cyan); box-shadow: 0 0 10px rgba(100,255,179,0.08);
}
.offer-filter-tab .oft-count { margin-right: 4px; font-size: 0.65rem; opacity: 0.7; }

/* ---- Offer Search ---- */
.offer-search-wrap {
  display: flex; align-items: center; gap: 8px; margin-bottom: 1rem;
}
.offer-search-wrap input {
  flex: 1; padding: 0.5rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: rgba(255,255,255,0.03);
  color: #fff; font-family: inherit; font-size: 0.82rem;
}
.offer-search-wrap input::placeholder { color: rgba(255,255,255,0.2); }
.offer-search-wrap button {
  padding: 0.5rem 1rem; border-radius: 10px;
  background: rgba(100,255,179,0.06); border: 1px solid rgba(100,255,179,0.15);
  color: var(--accent-cyan); font-family: inherit; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; transition: 0.2s;
}
.offer-search-wrap button:hover { background: rgba(100,255,179,0.12); }

/* ---- Price Comparison in Offer Card ---- */
.oc-price-compare {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0;
  font-size: 0.7rem;
}
.oc-price-compare .oc-original {
  color: var(--text-dim); text-decoration: line-through;
}
.oc-price-compare .oc-offer {
  color: var(--accent-cyan); font-weight: 800;
}
.oc-price-compare .oc-diff {
  padding: 1px 8px; border-radius: 99px; font-weight: 700;
}
.oc-price-compare .oc-diff.under { background: rgba(255,59,48,0.08); color: #FF3B30; }
.oc-price-compare .oc-diff.over { background: rgba(100,255,179,0.08); color: var(--accent-cyan); }

/* ---- Enhanced Offer Stats ---- */
.offer-enhanced-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 1rem;
}
.offer-e-stat {
  background: rgba(255,255,255,0.02); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 0.6rem 0.8rem; text-align: center;
}
.offer-e-stat .oes-value { font-size: 1rem; font-weight: 900; color: #fff; }
.offer-e-stat .oes-label { font-size: 0.65rem; color: var(--text-dim); margin-top: 2px; }

/* ---- Offer Skeleton ---- */
.offer-skeleton-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 14px; padding: 1rem; margin-bottom: 0.6rem;
}
.offer-skeleton-card .osk-img { width: 60px; height: 60px; border-radius: 10px; flex-shrink: 0; }
.offer-skeleton-card .osk-body { flex: 1; }
.offer-skeleton-card .osk-body .kaser-skeleton { height: 12px; margin-bottom: 6px; border-radius: 6px; }
.offer-skeleton-card .osk-body .kaser-skeleton:last-child { width: 50%; }
.offer-skeleton-card .osk-actions { width: 100px; height: 32px; border-radius: 8px; flex-shrink: 0; }

/* ---- Offer Action Link ---- */
.oc-view-listing {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-cyan); font-size: 0.7rem; font-weight: 700;
  text-decoration: none; margin-top: 4px; transition: 0.2s;
}
.oc-view-listing:hover { opacity: 0.8; }

/* ---- Refresh Button ---- */
.offer-refresh-btn {
  padding: 0.5rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim); font-family: inherit; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; transition: 0.2s;
}
.offer-refresh-btn:hover { border-color: rgba(100,255,179,0.2); color: var(--accent-cyan); }

@media (max-width: 600px) {
  .offer-card { flex-direction: column; align-items: flex-start; }
  .offer-card .oc-actions { width: 100%; }
  .offer-card .oc-btn { flex: 1; justify-content: center; }
}

/* ============================
   HOMEPAGE ENHANCEMENTS
   ============================ */

/* ---- Hero Stats Bar ---- */
.hero-stats-bar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  max-width: 1400px; margin: 20px auto 0; padding: 0 20px;
}
.hero-stat-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; padding: 0.8rem 1.2rem; min-width: 140px;
}
.hero-stat-item .hsi-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
  background: rgba(100,255,179,0.08); color: var(--accent-cyan);
}
.hero-stat-item .hsi-info { flex: 1; min-width: 0; }
.hero-stat-item .hsi-value { font-size: 1.1rem; font-weight: 900; color: #fff; }
.hero-stat-item .hsi-label { font-size: 0.62rem; color: var(--text-dim); margin-top: 1px; }
@media (max-width: 768px) {
  .hero-stats-bar { gap: 6px; padding: 0 12px; }
  .hero-stat-item { flex: 1 1 140px; min-width: 0; padding: 0.6rem 0.8rem; }
  .hero-stat-item .hsi-value { font-size: 0.9rem; }
}

/* ---- Shelf Skeleton ---- */
.shelf-skeleton-row {
  display: flex; gap: 14px; overflow: hidden; padding-bottom: 12px;
}
.shelf-skeleton-card {
  flex: 0 0 calc(25% - 11px); min-width: 220px; max-width: 320px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius); overflow: hidden;
}
.shelf-skeleton-card .ssk-img { height: 200px; }
.shelf-skeleton-card .ssk-body { padding: 1rem; }
.shelf-skeleton-card .ssk-body .kaser-skeleton { height: 14px; margin-bottom: 8px; border-radius: 6px; }
.shelf-skeleton-card .ssk-body .kaser-skeleton:nth-child(2) { width: 60%; }
.shelf-skeleton-card .ssk-body .kaser-skeleton:nth-child(3) { width: 40%; height: 28px; }
@media (max-width: 768px) {
  .shelf-skeleton-card { flex: 0 0 calc(50% - 7px); min-width: 150px; }
  .shelf-skeleton-card .ssk-img { height: 140px; }
}

/* ---- Flash Deals Shelf ---- */
.flash-deals-section {
  max-width: 1400px; margin: 10px auto 0; padding: 0 20px 10px;
}
.flash-deals-section .kaser-heading {
  position: relative;
}
.flash-deals-section .kaser-heading .kh-title {
  color: #FF3B30; display: flex; align-items: center; gap: 8px;
}
.flash-deals-section .kaser-heading .kh-title::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #FF3B30;
  animation: livePulse 1.5s ease-in-out infinite;
}
.flash-deals-section .shelf-row {
  border: 1px solid rgba(255,59,48,0.08);
  border-radius: 16px; padding: 8px;
  background: rgba(255,59,48,0.02);
}
.flash-deals-section .kaser-card {
  border-color: rgba(255,59,48,0.12);
}
.flash-deals-section .kaser-card:hover {
  border-color: rgba(255,59,48,0.25);
}
.flash-countdown-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  background: rgba(255,59,48,0.9); color: #fff;
  padding: 3px 10px; border-radius: 99px;
  font-size: 0.65rem; font-weight: 800;
  animation: pulseRed 2s ease-in-out infinite;
}
@keyframes pulseRed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ---- Enhanced Service Bar ---- */
.service-bar-inner .service-item {
  transition: all 0.3s; cursor: default;
}
.service-bar-inner .service-item:hover {
  background: rgba(100,255,179,0.04);
  border-radius: 14px; padding: 0.8rem 1rem; margin: -0.4rem;
}
.service-bar-inner .service-item:hover i {
  transform: scale(1.15); color: var(--accent-cyan);
  transition: 0.3s;
}

/* ---- Mobile Sticky Search ---- */
.mobile-search-fab {
  display: none; position: fixed; bottom: 90px; left: 16px; z-index: 9997;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent-cyan); color: #000; border: none;
  cursor: pointer; font-size: 1.2rem;
  box-shadow: 0 4px 20px rgba(100,255,179,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: 0.3s; opacity: 0; visibility: hidden; transform: scale(0.8);
}
@media (max-width: 768px) {
  .mobile-search-fab.visible { opacity: 1; visibility: visible; transform: scale(1); }
}
.mobile-search-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(100,255,179,0.45); }

/* ---- Category Badge Count ---- */
.cat-scroll-card .cat-count {
  font-size: 0.6rem; color: var(--accent-cyan); font-weight: 700;
  margin-top: -2px;
}

/* ============================
   CHECKOUT PAGE
   ============================ */

.checkout-page { padding: 6rem 1.5rem 4rem; max-width: 1200px; margin: 0 auto; min-height: 100vh; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .checkout-grid { grid-template-columns: 1fr; } }

/* Order Summary */
.checkout-summary {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 1.5rem; position: sticky; top: 90px;
}
.checkout-summary h3 {
  font-weight: 900; font-size: 1.1rem; color: #fff;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;
}
.checkout-summary h3 i { color: var(--accent-cyan); }
.checkout-item-row {
  display: flex; gap: 12px; padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.checkout-item-row:last-child { border-bottom: none; }
.checkout-item-img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  flex-shrink: 0; border: 1px solid rgba(255,255,255,0.06);
}
.checkout-item-info { flex: 1; min-width: 0; }
.checkout-item-name { font-size: 0.8rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-item-seller { font-size: 0.65rem; color: var(--text-dim); margin-top: 2px; }
.checkout-item-price { font-size: 0.85rem; font-weight: 800; color: var(--accent-cyan); margin-top: 2px; }
.checkout-item-qty { font-size: 0.7rem; color: var(--text-dim); flex-shrink: 0; text-align: left; }
.checkout-totals { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06); }
.checkout-total-row {
  display: flex; justify-content: space-between; font-size: 0.78rem;
  padding: 4px 0; color: var(--text-secondary);
}
.checkout-total-row.final {
  font-size: 1rem; font-weight: 900; color: #fff; padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 0.4rem;
}
.checkout-total-row.final .ct-value { color: var(--accent-cyan); font-size: 1.1rem; }
.checkout-total-row .ct-value { font-weight: 700; color: #fff; }
.checkout-total-row.saved { color: #FF3B30; }
.checkout-coupon-row { display: flex; gap: 8px; margin: 1rem 0; }
.checkout-coupon-row input {
  flex: 1; padding: 0.6rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: rgba(255,255,255,0.03);
  color: #fff; font-family: inherit; font-size: 0.8rem;
}
.checkout-coupon-row button {
  padding: 0.6rem 1rem; border-radius: 10px; border: 1px solid var(--accent-cyan);
  background: rgba(100,255,179,0.06); color: var(--accent-cyan);
  font-weight: 800; font-size: 0.78rem; font-family: inherit; cursor: pointer;
}
.checkout-coupon-row button:hover { background: rgba(100,255,179,0.12); }
.checkout-coupon-status { font-size: 0.7rem; color: var(--accent-cyan); margin-top: -0.5rem; margin-bottom: 0.8rem; }
.coupon-remove { color: #FF3B30; cursor: pointer; margin-right: 8px; font-weight: 700; }

/* Checkout Form */
.checkout-form-section {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 1.5rem;
}
.checkout-form-section h3 {
  font-weight: 900; font-size: 1.1rem; color: #fff;
  margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.5rem;
}
.checkout-form-section h3 i { color: var(--accent-cyan); }
.checkout-field {
  margin-bottom: 1rem;
}
.checkout-field label {
  display: block; font-size: 0.72rem; font-weight: 700;
  color: var(--text-dim); margin-bottom: 0.3rem;
}
.checkout-field input, .checkout-field textarea, .checkout-field select {
  width: 100%; padding: 0.7rem 0.8rem; border-radius: 10px;
  border: 1px solid var(--border-color); background: rgba(255,255,255,0.03);
  color: #fff; font-family: inherit; font-size: 0.85rem;
  transition: border-color 0.2s;
}
.checkout-field input:focus, .checkout-field textarea:focus {
  border-color: var(--accent-cyan); outline: none;
}
.checkout-field textarea { min-height: 70px; resize: vertical; }
.checkout-field .chk-error { color: #FF3B30; font-size: 0.65rem; margin-top: 3px; display: none; }
.checkout-field.error input, .checkout-field.error textarea {
  border-color: #FF3B30 !important;
}
.checkout-field.error .chk-error { display: block; }

/* Payment Methods */
.checkout-payment-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.checkout-pm-option {
  display: flex; align-items: center; gap: 8px;
  padding: 0.7rem 1.2rem; border-radius: 12px;
  border: 1px solid var(--border-color); background: rgba(255,255,255,0.02);
  color: var(--text-secondary); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: 0.2s; font-family: inherit;
  white-space: nowrap;
}
.checkout-pm-option:hover { border-color: rgba(255,255,255,0.15); color: #fff; }
.checkout-pm-option.selected {
  border-color: var(--accent-cyan); background: rgba(100,255,179,0.06);
  color: var(--accent-cyan);
}
.checkout-pm-option i { font-size: 1rem; }

/* Terms Checkbox */
.checkout-terms { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.2rem; font-size: 0.72rem; color: var(--text-dim); }
.checkout-terms a { color: var(--accent-cyan); }

/* Submit Button */
.checkout-submit-btn {
  width: 100%; padding: 1rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-cyan), #00cc88);
  color: #000; font-weight: 900; font-size: 1rem;
  border: none; cursor: pointer; font-family: inherit;
  transition: 0.3s; box-shadow: 0 4px 20px rgba(100,255,179,0.2);
}
.checkout-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(100,255,179,0.3); }
.checkout-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Success / Confirmation */
.checkout-confirm {
  text-align: center; padding: 4rem 2rem; max-width: 600px; margin: 0 auto;
}
.checkout-confirm .cc-icon {
  font-size: 4rem; margin-bottom: 1rem;
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.checkout-confirm .cc-icon.success { background: rgba(100,255,179,0.1); color: var(--accent-cyan); border: 2px solid rgba(100,255,179,0.2); }
.checkout-confirm .cc-icon.failed { background: rgba(255,59,48,0.1); color: #FF3B30; border: 2px solid rgba(255,59,48,0.2); }
.checkout-confirm h2 { font-weight: 900; font-size: 1.6rem; color: #fff; margin-bottom: 0.5rem; }
.checkout-confirm .cc-order { font-size: 1.2rem; font-weight: 800; color: var(--accent-cyan); margin-bottom: 1rem; }
.checkout-confirm .cc-detail { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.3rem; }
.checkout-confirm .cc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.checkout-confirm .cc-actions a {
  padding: 0.7rem 1.8rem; border-radius: 12px; font-weight: 800;
  font-size: 0.9rem; text-decoration: none; transition: 0.2s;
}
.cc-actions .cc-primary { background: var(--accent-cyan); color: #000; }
.cc-actions .cc-secondary { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #fff; }
.cc-actions .cc-primary:hover { opacity: 0.9; }
.cc-actions .cc-secondary:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* Empty Cart State */
.checkout-empty { text-align: center; padding: 6rem 2rem; }
.checkout-empty i { font-size: 4rem; display: block; margin-bottom: 1rem; color: rgba(255,255,255,0.06); }
.checkout-empty h2 { font-weight: 800; font-size: 1.3rem; color: #fff; margin-bottom: 0.5rem; }
.checkout-empty p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }
.checkout-empty a { background: var(--accent-cyan); color: #000; padding: 0.7rem 2rem; border-radius: 30px; font-weight: 800; text-decoration: none; display: inline-block; }

/* Loading skeleton */
.checkout-skeleton { max-width: 1200px; margin: 0 auto; padding: 6rem 1.5rem 4rem; display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; }
.checkout-skel-box { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; padding: 1.5rem; }
.checkout-skel-box .kaser-skeleton { height: 16px; margin-bottom: 10px; border-radius: 8px; }
.checkout-skel-box .kaser-skeleton:first-child { height: 24px; width: 40%; }
.checkout-skel-box .kaser-skel-row { display: flex; gap: 10px; margin-bottom: 12px; }
.checkout-skel-box .kaser-skel-row .kaser-skeleton { height: 52px; flex: 1; border-radius: 10px; }
.checkout-skel-box .kaser-skel-btn { height: 52px; border-radius: 14px; }
@media (max-width: 900px) { .checkout-skeleton { grid-template-columns: 1fr; } }

/* ---- Checkout Delivery Options ---- */
.checkout-delivery-methods { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 0.8rem; }

/* ============================
   ADD LISTING PAGE ENHANCEMENTS
   ============================ */

/* ---- Step by Step ---- */
.listing-steps { display: flex; gap: 8px; margin-bottom: 2rem; flex-wrap: wrap; }
.listing-step {
  flex: 1; min-width: 100px; text-align: center; padding: 0.8rem 1rem;
  border-radius: 12px; font-size: 0.78rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02);
  color: var(--text-dim); transition: 0.3s; cursor: pointer;
}
.listing-step.active { border-color: var(--accent-cyan); background: rgba(100,255,179,0.06); color: var(--accent-cyan); }
.listing-step.done { border-color: rgba(100,255,179,0.15); color: var(--accent-cyan); opacity: 0.7; }
.listing-step i { display: block; font-size: 1.2rem; margin-bottom: 4px; }
.form-step { display: none; }
.form-step.active { display: block; }

/* ---- Sticky Submit Bar (Mobile) ---- */
.listing-sticky-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 10001; padding: 0.7rem 1rem;
  background: rgba(10,10,15,0.95); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(100,255,179,0.1);
  justify-content: space-between; align-items: center; gap: 8px;
}
@media (max-width: 900px) { .listing-sticky-bar { display: flex; } }
.listing-sticky-bar button {
  padding: 0.6rem 1rem; border-radius: 10px; font-weight: 800;
  font-size: 0.78rem; border: none; cursor: pointer; font-family: inherit;
  transition: 0.2s;
}
.listing-sticky-bar .lsb-draft { background: rgba(255,255,255,0.04); color: var(--text-dim); border: 1px solid rgba(255,255,255,0.08); }
.listing-sticky-bar .lsb-preview { background: rgba(139,92,246,0.08); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.15); }
.listing-sticky-bar .lsb-publish { background: var(--accent-cyan); color: #000; flex: 2; }

/* ---- Live Preview Panel ---- */
.live-preview-panel {
  position: sticky; top: 20px;
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 20px; padding: 1rem;
  max-height: 85vh; overflow-y: auto;
}
.live-preview-panel h4 {
  font-size: 0.8rem; font-weight: 800; color: var(--text-dim);
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 6px;
}
.live-preview-panel h4 i { color: var(--accent-cyan); }
@media (max-width: 1100px) { .live-preview-panel { display: none; } }

/* ---- Quick Templates ---- */
.listing-templates { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1.5rem; }
.listing-templates button {
  padding: 0.5rem 1rem; border-radius: 99px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: 0.2s;
}
.listing-templates button:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(100,255,179,0.04); }

/* ---- Character Counter ---- */
.char-counter { font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; text-align: left; }
.char-counter.warning { color: #FF3B30; }
.char-counter.good { color: var(--accent-cyan); }

/* ---- Smart Price Suggestion ---- */
.price-suggestion {
  font-size: 0.72rem; margin-top: 6px; padding: 8px 12px;
  border-radius: 8px; display: none;
}
.price-suggestion.show { display: block; }
.price-suggestion.normal { background: rgba(100,255,179,0.04); border: 1px solid rgba(100,255,179,0.1); color: var(--accent-cyan); }
.price-suggestion.warning { background: rgba(255,193,7,0.04); border: 1px solid rgba(255,193,7,0.1); color: #ffc107; }
.price-suggestion button { margin-right: 8px; background: none; border: 1px solid var(--accent-cyan); color: var(--accent-cyan); border-radius: 6px; padding: 2px 10px; font-size: 0.65rem; cursor: pointer; font-family: inherit; }

/* ---- Draft Indicator ---- */
.draft-indicator {
  display: none; padding: 6px 14px; border-radius: 8px;
  font-size: 0.72rem; font-weight: 700; margin-bottom: 1rem;
  background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.12);
  color: #c4b5fd;
}
.draft-indicator.show { display: inline-flex; align-items: center; gap: 8px; }
.draft-indicator button { background: none; border: none; color: #FF3B30; cursor: pointer; font-family: inherit; font-size: 0.65rem; font-weight: 700; }

/* ---- Image Star (Primary) ---- */
.img-preview-star {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.4); font-size: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: 0.2s;
}
.img-preview-star.primary { background: rgba(100,255,179,0.15); border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ---- Enhanced Success Screen ---- */
.publish-success { text-align: center; padding: 3rem 2rem; }
.publish-success .ps-icon { font-size: 4rem; margin-bottom: 1rem; color: var(--accent-cyan); }
.publish-success h2 { font-size: 1.8rem; font-weight: 900; color: #fff; margin-bottom: 0.5rem; }
.publish-success .ps-link { font-size: 0.9rem; color: var(--accent-cyan); font-weight: 800; cursor: pointer; margin: 0.8rem 0; padding: 0.5rem 1rem; background: rgba(100,255,179,0.06); border: 1px solid rgba(100,255,179,0.12); border-radius: 10px; display: inline-block; }
.publish-success .ps-stats { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 1.5rem; }

/* ============================
   PORTAL SETTINGS ENHANCEMENTS
   ============================ */

/* ---- Settings Card Group ---- */
.settings-card {
  background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px; padding: 1.5rem; margin-bottom: 1rem;
}
.settings-card h4 {
  font-weight: 900; font-size: 0.95rem; color: #fff;
  margin-bottom: 1rem; display: flex; align-items: center; gap: 8px;
}
.settings-card h4 i { color: var(--accent-cyan); width: 20px; text-align: center; }

/* ---- Profile Completeness Meter ---- */
.completeness-meter {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.completeness-meter .cm-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem; font-size: 0.8rem;
}
.completeness-meter .cm-label { color: #fff; font-weight: 800; }
.completeness-meter .cm-pct { color: var(--accent-cyan); font-weight: 900; }
.completeness-meter .cm-bar {
  height: 6px; background: rgba(255,255,255,0.05); border-radius: 99px;
  overflow: hidden; margin-bottom: 0.5rem;
}
.completeness-meter .cm-fill {
  height: 100%; background: linear-gradient(90deg, var(--accent-cyan), var(--primary-brand));
  border-radius: 99px; transition: width 0.5s ease;
}
.completeness-meter .cm-tasks {
  display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.65rem;
}
.cm-task { padding: 3px 10px; border-radius: 99px; }
.cm-task.done { background: rgba(100,255,179,0.06); color: var(--accent-cyan); }
.cm-task.pending { background: rgba(255,255,255,0.03); color: var(--text-dim); }

/* ---- Danger Zone Collapse ---- */
.danger-zone-collapse .dz-header {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 0.8rem 1rem; border-radius: 10px;
  border: 1px solid rgba(255,59,48,0.1); background: rgba(255,59,48,0.02);
  color: #FF3B30; font-weight: 800; font-size: 0.85rem;
  font-family: 'Cairo',sans-serif;
}
.danger-zone-collapse .dz-body { display: none; margin-top: 0.8rem; }
.danger-zone-collapse.open .dz-body { display: block; }
.danger-zone-collapse.open .dz-header { border-radius: 10px 10px 0 0; }

/* ---- Settings Field Helper ---- */
.setting-helper { font-size: 0.67rem; color: var(--text-dim); margin-top: 4px; }

/* ---- Logo Preview (Larger) ---- */
#logo-preview { width: 100px !important; height: 100px !important; }

/* ============================
   REPUTATION TAB ENHANCEMENTS
   ============================ */

/* ---- Reviews List ---- */
.review-list { display: flex; flex-direction: column; gap: 8px; }
.rev-card {
  background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; padding: 1rem;
  transition: 0.2s;
}
.rev-card:hover { border-color: rgba(255,255,255,0.1); }
.rev-card.high { border-right: 3px solid var(--accent-cyan); }
.rev-card.medium { border-right: 3px solid rgba(255,193,7,0.5); }
.rev-card.low { border-right: 3px solid rgba(255,59,48,0.3); }
.rev-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.rev-card-author { display: flex; align-items: center; gap: 8px; }
.rev-card-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 0.8rem; color: #000;
  background: var(--primary-brand);
}
.rev-card-name { font-weight: 700; font-size: 0.85rem; color: #fff; }
.rev-card-date { font-size: 0.68rem; color: var(--text-dim); }
.rev-card-text { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.7; margin-top: 0.4rem; }

/* ---- Review Filter Pills ---- */
.rev-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.rev-filter-pill {
  padding: 5px 14px; border-radius: 99px; font-size: 0.72rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02);
  color: var(--text-secondary); cursor: pointer; font-family: inherit; transition: 0.2s;
}
.rev-filter-pill:hover { border-color: rgba(100,255,179,0.2); color: #fff; }
.rev-filter-pill.active { border-color: var(--accent-cyan); background: rgba(100,255,179,0.06); color: var(--accent-cyan); }

/* ---- Featured Review ---- */
.featured-review {
  background: linear-gradient(135deg, rgba(100,255,179,0.05), rgba(139,92,246,0.05));
  border: 1px solid rgba(100,255,179,0.1); border-radius: 16px;
  padding: 1.2rem; margin-bottom: 1rem;
}
.featured-review .fr-label {
  font-size: 0.7rem; font-weight: 800; color: var(--accent-cyan);
  margin-bottom: 0.5rem; display: flex; align-items: center; gap: 6px;
}

/* ---- WhatsApp Share for Review ---- */
.wa-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #25D366; color: #fff; padding: 0.6rem 1.2rem;
  border-radius: 10px; font-weight: 800; font-size: 0.8rem;
  text-decoration: none; transition: 0.2s; cursor: pointer;
  border: none; font-family: inherit;
}
.wa-share-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,211,102,0.25); }
.wa-share-template { font-size: 0.7rem; color: var(--text-dim); margin-top: 8px; }

/* ---- Reputation Tips ---- */
.rep-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 1rem; }
.rep-tip {
  background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04);
  border-radius: 12px; padding: 1rem;
}
.rep-tip .rt-icon { font-size: 1.3rem; margin-bottom: 0.5rem; }
.rep-tip .rt-text { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.6; }

/* ---- Reputation Skeleton ---- */
.rep-skel-row { display: flex; gap: 10px; margin-bottom: 10px; }
.rep-skel-row .kaser-skeleton { height: 14px; border-radius: 6px; flex: 1; }
.rep-skel-row .kaser-skeleton:last-child { flex: 0.3; }
.rep-skel-card { padding: 14px; background: rgba(255,255,255,0.015); border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; margin-bottom: 8px; }

/* ---- Public Profile Button ---- */
.view-profile-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-secondary); padding: 0.5rem 1rem;
  border-radius: 10px; font-weight: 700; font-size: 0.78rem;
  text-decoration: none; transition: 0.2s;
}
.view-profile-btn:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }

/* ============================
   BUILD PC PAGE ENHANCEMENTS
   ============================ */

/* ---- Budget Bar ---- */
.bp-budget-bar {
  background: rgba(100,255,179,0.04); border: 1px solid rgba(100,255,179,0.1);
  border-radius: 12px; padding: 0.8rem 1.2rem; margin-bottom: 1rem;
}
.bp-budget-bar .bb-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.bp-budget-bar .bb-header input {
  width: 120px; padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3);
  color: #fff; font-family: inherit; font-size: 0.75rem; text-align: center;
}
.bp-budget-bar .bb-track { height: 8px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.bp-budget-bar .bb-fill { height: 100%; background: linear-gradient(90deg, var(--accent-cyan), #00cc88); border-radius: 99px; transition: width 0.5s; }
.bp-budget-bar .bb-labels { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-dim); margin-top: 4px; }

/* ---- Skip Button ---- */
.bp-skip-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0.4rem 1rem; border-radius: 8px; margin-top: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-dim); font-size: 0.75rem; cursor: pointer;
  font-family: inherit; transition: 0.2s;
}
.bp-skip-btn:hover { border-color: rgba(255,255,255,0.15); color: #fff; }

/* ---- Wattage Calculator ---- */
.bp-wattage {
  padding: 0.8rem 1rem; margin-top: 0.8rem; border-radius: 10px;
  font-size: 0.78rem; font-weight: 700;
}
.bp-wattage.ok { background: rgba(100,255,179,0.05); border: 1px solid rgba(100,255,179,0.15); color: var(--accent-cyan); }
.bp-wattage.warn { background: rgba(255,193,7,0.05); border: 1px solid rgba(255,193,7,0.15); color: #ffc107; }
.bp-wattage.bad { background: rgba(255,59,48,0.05); border: 1px solid rgba(255,59,48,0.15); color: #FF3B30; }

/* ---- Build Card (Kaser-style) ---- */
.bp-listing-card .card-img-wrap { position: relative; }
.bp-listing-card .card-image { width: 100%; height: 160px; object-fit: contain; background: #1a1a1a; border-radius: 10px; }
.bp-listing-card .card-cart-mini {
  position: absolute; bottom: 8px; left: 8px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-cyan); color: #000; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; transition: 0.2s;
}
.bp-listing-card .sg-cat-tag {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.6); color: var(--accent-cyan);
  padding: 2px 8px; border-radius: 6px; font-size: 0.6rem; font-weight: 700;
}
.bp-listing-card .card-seller-row { font-size: 0.7rem; margin-top: 6px; }
.bp-listing-card .sg-bnpl { 
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  background: rgba(139,92,246,0.1); color: #c4b5fd; font-size: 0.6rem; margin-top: 4px;
}

/* ---- Compare Modal ---- */
.bp-compare-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
}
.bp-compare-modal.active { display: flex; }
.bp-compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  background: rgba(20,25,40,0.95); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 1.5rem; max-width: 600px; width: 90%;
}
.bp-compare-grid .bc-header { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; }
.bp-compare-grid .bc-close { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }

/* ---- Skeleton ---- */
.bp-skel-card {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px; padding: 1rem;
}
.bp-skel-card .bpsk-img { height: 150px; border-radius: 10px; margin-bottom: 0.6rem; }
.bp-skel-card .bpsk-body .kaser-skeleton { height: 12px; border-radius: 6px; margin-bottom: 6px; }
.bp-skel-card .bpsk-body .kaser-skeleton:nth-child(2) { width: 60%; }
.bp-skel-card .bpsk-body .kaser-skeleton:nth-child(3) { width: 40%; height: 22px; }

/* ---- Price Filter ---- */
.bp-price-filter { display: flex; gap: 6px; align-items: center; margin-bottom: 0.8rem; }
.bp-price-filter input {
  width: 100px; padding: 0.4rem 0.6rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.2);
  color: #fff; font-family: inherit; font-size: 0.75rem;
}
.bp-price-filter button {
  padding: 0.4rem 0.8rem; border-radius: 8px; border: 1px solid var(--accent-cyan);
  background: rgba(100,255,179,0.06); color: var(--accent-cyan);
  font-family: inherit; font-size: 0.7rem; cursor: pointer; font-weight: 700;
}

/* ============================
   ANIMATION & UI SYSTEM v2
   ============================ */

/* ---- View Transitions API ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fadeOut 0.25s ease-out; }
::view-transition-new(root) { animation: fadeIn 0.35s ease-out; }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Unified Card Hover ---- */
.kaser-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.kaser-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(100,255,179,0.08);
  border-color: rgba(100,255,179,0.15);
}
.kaser-card .card-image {
  transition: transform 0.4s ease;
}
.kaser-card:hover .card-image { transform: scale(1.03); }

/* ---- Scroll Progress Bar ---- */
#kaser-scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary-brand));
  z-index: 10001; width: 0;
  transition: width 0.1s ease;
  box-shadow: 0 0 6px rgba(100,255,179,0.3);
}

/* ---- Universal Toast ---- */
.kaser-toast-container {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column-reverse; gap: 6px;
  max-width: 400px; width: auto;
}
.kaser-toast {
  padding: 10px 20px; border-radius: 12px; font-size: 0.82rem;
  font-weight: 700; font-family: 'Cairo',sans-serif;
  animation: toastSlideIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  display: flex; align-items: center; gap: 8px;
  opacity: 1;
}
.kaser-toast.success { background: #064E3B; border: 1px solid rgba(16,185,129,0.3); color: #6EE7B7; }
.kaser-toast.error { background: #450A0A; border: 1px solid rgba(239,68,68,0.3); color: #FCA5A5; }
.kaser-toast.warning { background: #422006; border: 1px solid rgba(255,193,7,0.3); color: #FDE68A; }
.kaser-toast.info { background: #172554; border: 1px solid rgba(59,130,246,0.3); color: #93C5FD; }
.kaser-toast.removing { opacity: 0; transform: translateX(30px); }
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Animated Heart (Favorites) ---- */
.kaser-fav-btn.faved svg path { fill: #FF3B30; stroke: #FF3B30; }
.kaser-fav-btn { transition: transform 0.2s; }
.kaser-fav-btn:active { transform: scale(1.3); }
@keyframes heartBeat {
  0% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.3); }
  60% { transform: scale(1); }
}
.kaser-fav-btn.just-faved { animation: heartBeat 0.6s ease-in-out; }

/* ---- Shake on Error ---- */
@keyframes shakeError {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}
.shake { animation: shakeError 0.5s ease-in-out; }

/* ---- Tab Indicator Slide ---- */
.tab-indicator-bar {
  display: flex; position: relative; border-bottom: 2px solid rgba(255,255,255,0.06); margin-bottom: 1rem;
}
.tab-indicator-bar .tab-btn {
  padding: 0.6rem 1.2rem; border: none; background: none;
  color: var(--text-secondary); font-weight: 700; font-size: 0.82rem;
  cursor: pointer; font-family: inherit; transition: color 0.2s;
  position: relative; z-index: 1;
}
.tab-indicator-bar .tab-btn.active { color: var(--accent-cyan); }
.tab-indicator-bar .tab-slider {
  position: absolute; bottom: -2px; height: 2px;
  background: var(--accent-cyan); border-radius: 2px;
  transition: left 0.3s ease, width 0.3s ease;
}

/* ---- Nav Link Underline ---- */
.navbar-v2 .nav-center a {
  position: relative; transition: color 0.3s;
}
.navbar-v2 .nav-center a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--accent-cyan); border-radius: 2px;
  transition: width 0.3s ease;
}
.navbar-v2 .nav-center a:hover::after,
.navbar-v2 .nav-center a.active::after { width: 100%; }

/* ---- Focus Ring ---- */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 0 3px rgba(100,255,179,0.08) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* ---- Button Ripple ---- */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-effect {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: scale(0); animation: rippleExpand 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ---- Success Celebration ---- */
@keyframes celebPop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.celeb-icon { animation: celebPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275); }

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  @view-transition { navigation: none; }
}

/* ---- Smooth Scroll ---- */
html { scroll-behavior: smooth; }

/* ---- Animated Badge Percent Icon (animate-ui style) ---- */
.badge-percent-icon {
  color: var(--accent-cyan); flex-shrink: 0;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.badge-percent-icon:hover { animation: badgeSpin 0.6s ease; }
@keyframes badgeSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
.badge-percent-icon .bp-circle { transition: stroke 0.3s; }
.badge-percent-icon:hover .bp-circle { stroke: var(--accent-cyan); }

/* ---- Animated Delete Icon (animate-ui style) ---- */
.animated-delete-icon {
  display: inline-block; width: 14px; height: 14px; vertical-align: middle;
  color: currentColor;
}
.animated-delete-icon .ad-lid-inner {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.animated-delete-icon:hover .ad-lid-inner {
  transform: translateY(-2px);
}
.animated-delete-icon .ad-body {
  transition: d 0.4s ease;
}
.animated-delete-icon .ad-line-left,
.animated-delete-icon .ad-line-right {
  transition: d 0.4s ease;
}

/* ---- Animated Link Icon (animate-ui style) ---- */
.animated-link-icon {
  display: inline-block; width: 16px; height: 16px; vertical-align: middle; flex-shrink: 0;
}
.btn-copy-link .animated-link-icon { color: currentColor; }
@keyframes linkBreathe {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  30% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
  65% { transform: rotate(0deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
.btn-copy-link:hover .animated-link-icon,
.btn-copy-link:hover .animated-link-icon path {
  animation: linkBreathe 1s ease-in-out;
}

/* ---- Animated Map Pin Icon (animate-ui style) ---- */
.animated-pin-icon {
  display: inline-block; width: 12px; height: 12px; vertical-align: middle; flex-shrink: 0;
  color: var(--text-dim);
  transition: transform 0.5s ease, color 0.3s;
}
.card-meta:hover .animated-pin-icon,
.kaser-card:hover .animated-pin-icon {
  color: var(--accent-cyan);
  animation: pinBounce 0.5s ease;
}
@keyframes pinBounce {
  0%   { transform: translateY(0); }
  60%  { transform: translateY(-4px); }
  100% { transform: translateY(-2px); }
}
.animated-pin-icon .pin-circle {
  transition: opacity 0.3s, stroke-dasharray 0.5s;
}
.kaser-card:hover .animated-pin-icon .pin-circle {
  opacity: 1;
  stroke-dasharray: 100;
}

/* ============================
   ANIMATED ICONS (animate-ui style)
   ============================ */

.anim-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; color: currentColor; }

/* ---- Hammer (bargain) ---- */
.anim-hammer { transform-origin: 0% 100%; transform-box: fill-box; transition: transform 0.3s; }
.anim-hammer:hover { animation: hammerSwing 0.8s ease-in-out; }
@keyframes hammerSwing {
  0%   { transform: rotate(0deg); }
  60%  { transform: rotate(-20deg); }
  80%  { transform: rotate(25deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Trending Down (price drop) ---- */
@keyframes trendLine {
  from { opacity: 0; stroke-dashoffset: 50; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes trendArrow {
  0%   { opacity: 0; stroke-dashoffset: 12; }
  60%  { opacity: 0; stroke-dashoffset: 12; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}
.anim-trend-line { stroke-dasharray: 50; stroke-dashoffset: 50; }
.anim-trend-arrow { stroke-dasharray: 12; stroke-dashoffset: 12; }
.anim-trend-wrap:hover .anim-trend-line { animation: trendLine 0.4s ease forwards; }
.anim-trend-wrap:hover .anim-trend-arrow { animation: trendArrow 0.6s ease forwards; }

/* ---- Saudi Riyal (currency) ---- */
.anim-riyal-line { stroke-dasharray: 30; stroke-dashoffset: 30; }
.anim-riyal-wrap:hover .anim-riyal-line { animation: trendLine 0.6s ease forwards; }

/* ---- Send (submit) ---- */
.anim-send-plane { transition: transform 0.5s ease; }
.anim-send-wrap:hover .anim-send-plane { transform: translate(3px, -3px) scale(0.85); }
.anim-send-trail { stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; }
.anim-send-wrap:hover .anim-send-trail { animation: trendLine 0.55s ease 0.1s forwards; }

/* ---- Settings (gear) ---- */
.anim-gear { transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275); }
.anim-gear:hover { animation: gearSpin 0.6s ease; }
@keyframes gearSpin { to { transform: rotate(180deg); } }

/* ---- Menu (hamburger) ---- */
.anim-menu-l1, .anim-menu-l2, .anim-menu-l3 { transition: all 0.35s cubic-bezier(0.175,0.885,0.32,1.275); }
.hamburger-toggle.open .anim-menu-l1 { transform: translateY(6px) rotate(45deg); }
.hamburger-toggle.open .anim-menu-l2 { opacity: 0; }
.hamburger-toggle.open .anim-menu-l3 { transform: translateY(-6px) rotate(-45deg); }

/* ---- Search Icon (wobble) ---- */
.anim-search-lens { transform-origin: center; transform-box: fill-box; }
@keyframes searchWobble {
  0%   { transform: translate(0,0) rotate(0deg); }
  25%  { transform: translate(2px,-1px) rotate(6deg); }
  50%  { transform: translate(-2px,2px) rotate(-6deg); }
  75%  { transform: translate(1px,-1px) rotate(4deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
.search-trigger-btn:hover .anim-search-lens,
.anim-search-wrap:hover .anim-search-lens { animation: searchWobble 1.2s ease-in-out; }

/* ---- Eye Icon (blink) ---- */
.anim-eye-lid { transform-origin: center; transform-box: fill-box; }
@keyframes eyeBlink { 50% { scaleY: 0.1; } }
@keyframes pupilScan { 0%,100% { transform: translateX(0); } 33% { transform: translateX(-2px); } 66% { transform: translateX(2px); } }
.anim-eye-wrap:hover .anim-eye-lid { animation: eyeBlink 0.25s ease-in-out; }
.anim-eye-wrap:hover .anim-pupil { animation: pupilScan 1.6s ease-in-out; }

/* ---- Twitter/X Icon (pulse) ---- */
@keyframes twPulse { 50% { scale: 1.04; } }
@keyframes twShake { 33% { rotate: 2deg; } 66% { rotate: -2deg; } }
.anim-tw-wrap:hover svg { animation: twPulse 0.6s ease-in-out, twShake 0.6s ease-in-out; }

/* ---- Discord/Telegram Icon (bounce + blink) ---- */
@keyframes socialBounce { 50% { transform: translateY(-3px) scale(1.04); } }
.anim-social-wrap:hover svg { animation: socialBounce 0.6s ease-in-out; }