/* ============================================================
   Animated background bubbles
   ============================================================ */
.banner-bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .12;
  animation: bubbleFloat 16s ease-in-out infinite;
}
.bubble:nth-child(1) { width:180px;height:180px;background:rgba(0,122,255,1);   left:8%;  top:15%; animation-delay:0s;   }
.bubble:nth-child(2) { width:140px;height:140px;background:rgba(52,199,89,1);   right:12%;top:25%; animation-delay:-4s;  }
.bubble:nth-child(3) { width:160px;height:160px;background:rgba(255,149,0,1);   left:45%; bottom:20%;animation-delay:-8s;  }
.bubble:nth-child(4) { width:120px;height:120px;background:rgba(0,199,190,1);   right:20%;bottom:35%;animation-delay:-12s; }
.bubble:nth-child(5) { width:150px;height:150px;background:rgba(90,200,250,1);  left:25%; top:55%; animation-delay:-6s;  }
.bubble:nth-child(6) { width:110px;height:110px;background:rgba(255,55,95,1);   right:38%;top:10%; animation-delay:-10s; }
@keyframes bubbleFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  25%      { transform:translate(15px,-20px) scale(1.1); }
  50%      { transform:translate(-10px,15px) scale(0.95); }
  75%      { transform:translate(20px,10px) scale(1.05); }
}

/* ============================================================
   Banner zone shell
   ============================================================ */
.banner-zone { padding:12px 16px; margin:0; }
.promo-banner {
  border-radius:18px;
  overflow:hidden;
  margin-bottom:14px;
  position:relative;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  text-decoration:none;
  color:#fff;
  box-shadow:0 6px 28px rgba(0,0,0,.22);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  isolation:isolate;
}
.promo-banner:hover  { transform:translateY(-3px) scale(1.012); box-shadow:0 12px 36px rgba(0,0,0,.3); }
.promo-banner:active { transform:scale(.97); }
.promo-banner:last-child { margin-bottom:0; }

/* shared entry animation */
.promo-banner { animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes bannerEntrance {
  from { opacity:0; transform:translateY(14px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* Shared pseudo overlay for shimmer / sweep */
.promo-banner::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

.promo-banner-content { text-align:center; width:100%; position:relative; z-index:2; }
.promo-banner-headline { font-size:19px;font-weight:900;margin:0 0 4px;letter-spacing:.4px;text-shadow:0 2px 8px rgba(0,0,0,.18); }
.promo-banner-subtext  { font-size:13px;opacity:.95;margin:0; }
.promo-banner-cta {
  display:inline-block;
  margin-top:9px;
  padding:7px 18px;
  background:rgba(255,255,255,.28);
  border:1.5px solid rgba(255,255,255,.55);
  border-radius:24px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  backdrop-filter:blur(6px);
  transition:background .2s, transform .15s;
}
.promo-banner:hover .promo-banner-cta { background:rgba(255,255,255,.42); transform:scale(1.06); }
.promo-banner-countdown {
  font-variant-numeric:tabular-nums;
  font-size:22px;
  font-weight:900;
  margin-top:6px;
  letter-spacing:3px;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}

/* ============================================================
   FLASH SALE — fire shimmer + pulsing glow + sparks
   ============================================================ */
.promo-banner.tpl-flash {
  background: linear-gradient(120deg,#ff4500,#ff6b35,#ff9640,#ff6b35,#ff4500);
  background-size: 300% 100%;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             flashGradient 3s linear infinite;
  box-shadow: 0 6px 28px rgba(255,80,0,.45), 0 0 0 0 rgba(255,80,0,.35);
}
.promo-banner.tpl-flash:hover { box-shadow:0 10px 40px rgba(255,80,0,.6), 0 0 0 4px rgba(255,80,0,.25); }
@keyframes flashGradient {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
/* roving shimmer streak */
.promo-banner.tpl-flash::after {
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  background-size:250% 100%;
  animation: flashShimmer 2.2s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes flashShimmer {
  0%   { background-position:200% 0; }
  100% { background-position:-200% 0; }
}
/* headline pulse */
.promo-banner.tpl-flash .promo-banner-headline {
  animation: flashPulse 1.4s ease-in-out infinite;
}
@keyframes flashPulse {
  0%,100% { transform:scale(1);   filter:brightness(1); }
  50%      { transform:scale(1.04);filter:brightness(1.18); }
}
/* CTA glow ring */
.promo-banner.tpl-flash .promo-banner-cta {
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.7);
  animation: ctaGlowFlash 1.8s ease-in-out infinite;
}
@keyframes ctaGlowFlash {
  0%,100% { box-shadow:0 0 0 0 rgba(255,200,80,.0); }
  50%      { box-shadow:0 0 0 5px rgba(255,200,80,.5); }
}
/* tiny sparks via box-shadow on ::before */
.promo-banner.tpl-flash::before {
  content:"★";
  position:absolute;
  font-size:18px;
  color:rgba(255,240,100,.9);
  top:12px; left:18px;
  animation: sparkOrbit 2.6s linear infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes sparkOrbit {
  0%   { transform:translate(0,0) rotate(0deg)   scale(.8); opacity:1; }
  25%  { transform:translate(12px,-8px) rotate(90deg)  scale(1.2); opacity:.8; }
  50%  { transform:translate(0,-18px)  rotate(180deg) scale(.9); opacity:1; }
  75%  { transform:translate(-12px,-8px)rotate(270deg) scale(1.1); opacity:.7; }
  100% { transform:translate(0,0) rotate(360deg) scale(.8); opacity:1; }
}

/* ============================================================
   COUNTDOWN — digital pulse + scan-line + digit flip
   ============================================================ */
.promo-banner.tpl-countdown {
  background: linear-gradient(135deg,#0f0c29,#302b63,#24243e);
  background-size:200% 200%;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             countdownShift 8s ease-in-out infinite;
}
@keyframes countdownShift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
/* scan-line sweep */
.promo-banner.tpl-countdown::after {
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,255,200,.04) 4px);
  animation: scanLine 3s linear infinite;
}
@keyframes scanLine {
  from { background-position:0 0; }
  to   { background-position:0 80px; }
}
/* neon border pulse */
.promo-banner.tpl-countdown {
  border:1.5px solid rgba(0,255,180,.25);
  box-shadow:0 0 18px rgba(0,255,180,.15), 0 6px 28px rgba(0,0,0,.5);
}
.promo-banner.tpl-countdown:hover {
  box-shadow:0 0 32px rgba(0,255,180,.35), 0 12px 36px rgba(0,0,0,.6);
}
.promo-banner.tpl-countdown .promo-banner-countdown {
  color:#00ffb8;
  text-shadow:0 0 10px rgba(0,255,180,.8), 0 0 22px rgba(0,255,180,.4);
  animation: digitFlip 1s steps(1) infinite;
  font-family: 'Courier New', monospace;
}
@keyframes digitFlip {
  0%,49%  { opacity:1; }
  50%,99% { opacity:.85; }
}
/* glowing headline */
.promo-banner.tpl-countdown .promo-banner-headline {
  background:linear-gradient(90deg,#fff,#00ffb8,#fff);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: neonTextFlow 3s linear infinite;
}
@keyframes neonTextFlow {
  from { background-position:0% center; }
  to   { background-position:200% center; }
}
.promo-banner.tpl-countdown .promo-banner-cta {
  background:rgba(0,255,180,.15);
  border-color:rgba(0,255,180,.7);
  color:#00ffb8;
}
/* top-right corner rocket spark */
.promo-banner.tpl-countdown::before {
  content:"⏱";
  position:absolute;
  top:10px; right:14px;
  font-size:20px;
  animation: tickBounce 1s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes tickBounce {
  0%,100% { transform:translateY(0);  opacity:1; }
  50%      { transform:translateY(-4px);opacity:.7; }
}

/* ============================================================
   FREE SHIPPING — waves + float
   ============================================================ */
.promo-banner.tpl-shipping {
  background: linear-gradient(160deg,#667eea,#00c6fb,#4ecdc4);
  background-size:300% 300%;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             waveGradient 5s ease infinite;
}
@keyframes waveGradient {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}
.promo-banner.tpl-shipping::after {
  background: radial-gradient(ellipse 80% 60% at 60% 40%, rgba(255,255,255,.18), transparent 70%);
  animation: waveSheen 4s ease-in-out infinite;
}
@keyframes waveSheen {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.15) translateX(10px); }
}
.promo-banner.tpl-shipping .promo-banner-headline {
  animation: floatText 3.5s ease-in-out infinite;
}
@keyframes floatText {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-3px); }
}
.promo-banner.tpl-shipping::before {
  content:"🚚";
  position:absolute;
  font-size:24px;
  top:50%;
  left: calc(100% + 40px);
  transform: translateY(-50%);
  animation: truckDrive 9s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes truckDrive {
  0%   { left: calc(100% + 40px); opacity:0; }
  8%   { opacity:1; }
  88%  { opacity:1; }
  100% { left:-60px; opacity:0; }
}

/* ============================================================
   SEASONAL — sparkle confetti + shimmer
   ============================================================ */
.promo-banner.tpl-seasonal {
  background: linear-gradient(135deg,#f857a6,#ff5858,#fcb045,#f857a6);
  background-size:300% 100%;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             seasonalGrad 5s linear infinite;
}
@keyframes seasonalGrad {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.promo-banner.tpl-seasonal::after {
  background:
    radial-gradient(circle 2px at 15% 30%, rgba(255,255,180,.9) 0%, transparent 100%),
    radial-gradient(circle 2px at 75% 20%, rgba(255,255,255,.8) 0%, transparent 100%),
    radial-gradient(circle 2px at 90% 70%, rgba(255,220,100,.9) 0%, transparent 100%),
    radial-gradient(circle 2px at 30% 75%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(circle 2px at 55% 50%, rgba(255,240,160,.9) 0%, transparent 100%);
  animation: confettiTwinkle 2.5s ease-in-out infinite alternate;
}
@keyframes confettiTwinkle {
  from { opacity:0; transform:scale(.8); }
  to   { opacity:1; transform:scale(1.2); }
}
.promo-banner.tpl-seasonal .promo-banner-headline {
  animation: rainbowText 4s linear infinite;
  background: linear-gradient(90deg,#fff,#ffe,#fff,#fcf,#fff);
  background-size:300% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
@keyframes rainbowText {
  from { background-position:0% center; }
  to   { background-position:300% center; }
}
/* floating emoji icon */
.promo-banner.tpl-seasonal::before {
  content:"🌸";
  position:absolute;
  top:8px; right:14px;
  font-size:22px;
  animation: petalSpin 3s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes petalSpin {
  0%,100% { transform:rotate(-15deg) scale(1); }
  50%      { transform:rotate(15deg) scale(1.2); }
}

/* ============================================================
   NEW ARRIVAL — orbit ring + reveal sweep
   ============================================================ */
.promo-banner.tpl-new {
  background: linear-gradient(135deg,#6c5ce7,#a855f7,#06b6d4,#6c5ce7);
  background-size:300% 100%;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             newArrivalGrad 6s linear infinite;
}
@keyframes newArrivalGrad {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
/* sweeping reveal shimmer */
.promo-banner.tpl-new::after {
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.32) 50%, transparent 80%);
  background-size:200% 100%;
  animation: revealSweep 3s ease-in-out infinite;
}
@keyframes revealSweep {
  0%   { background-position:200% 0; opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { background-position:-200% 0; opacity:0; }
}
.promo-banner.tpl-new .promo-banner-headline {
  animation: popIn 3.5s ease-in-out infinite;
}
@keyframes popIn {
  0%,100% { letter-spacing:.4px; transform:scale(1); }
  50%      { letter-spacing:1.5px; transform:scale(1.03); }
}
/* orbit ring */
.promo-banner.tpl-new::before {
  content:"✦";
  position:absolute;
  font-size:30px;
  color:rgba(255,255,255,.6);
  top:50%; left:16px;
  transform:translateY(-50%);
  animation: orbitStar 2.5s linear infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes orbitStar {
  0%   { transform:translateY(-50%) rotate(0deg)   scale(1);   opacity:.6; }
  50%  { transform:translateY(-50%) rotate(180deg) scale(1.4); opacity:1; }
  100% { transform:translateY(-50%) rotate(360deg) scale(1);   opacity:.6; }
}
.promo-banner.tpl-new .promo-banner-cta {
  animation: ctaPop 2.5s ease-in-out infinite;
}
@keyframes ctaPop {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.08); }
}

/* ============================================================
   CUSTOM — Ken-Burns image zoom + vignette glow + text lift
   ============================================================ */
.promo-banner.tpl-custom {
  background-size:cover;
  background-position:center;
  min-height:100px;
}
.promo-banner.tpl-custom::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  animation: vignetteBreath 4s ease-in-out infinite alternate;
  z-index:1;
}
@keyframes vignetteBreath {
  from { opacity:.8; }
  to   { opacity:1; }
}
/* Ken-Burns zoom */
.promo-banner.tpl-custom::after {
  background:inherit;
  background-size:cover;
  background-position:center;
  animation: kenBurns 10s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes kenBurns {
  from { transform:scale(1.08) translate(0,0); }
  to   { transform:scale(1)    translate(-2%,-1%); }
}
.promo-banner.tpl-custom .promo-banner-content {
  position:relative;
  z-index:2;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.promo-banner.tpl-custom .promo-banner-headline {
  animation: textLift 3.5s ease-in-out infinite;
}
@keyframes textLift {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-4px); text-shadow:0 6px 18px rgba(0,0,0,.7); }
}
.promo-banner.tpl-custom .promo-banner-cta {
  background:rgba(255,255,255,.22);
  border:1.5px solid rgba(255,255,255,.6);
  animation: glassShine 3s ease-in-out infinite;
}
@keyframes glassShine {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow:0 0 0 3px rgba(255,255,255,.3); }
}

/* ============================================================
   COUPON — ticket punch + shimmer + wiggle code chip
   ============================================================ */
.promo-banner.tpl-coupon {
  background: linear-gradient(135deg,#f9c842,#f7971e,#f9c842);
  background-size: 300% 100%;
  color: #1a1200;
  animation: bannerEntrance .55s cubic-bezier(.22,1,.36,1) both,
             couponGold 4s linear infinite;
  box-shadow: 0 6px 28px rgba(249,200,66,.5), 0 2px 0 rgba(255,255,255,.2) inset;
  border: 2px dashed rgba(255,255,255,.55);
}
@keyframes couponGold {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.promo-banner.tpl-coupon:hover {
  box-shadow: 0 10px 40px rgba(249,200,66,.7), 0 2px 0 rgba(255,255,255,.2) inset;
}
/* ticket notch circles left + right */
.promo-banner.tpl-coupon::before {
  content: "";
  position: absolute;
  top: 50%; left: -10px;
  width: 20px; height: 20px;
  background: var(--bg-primary, #111);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: calc(100vw + 20px) 0 0 var(--bg-primary, #111);
  pointer-events: none;
  z-index: 3;
}
/* roving foil shimmer */
.promo-banner.tpl-coupon::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: couponShimmer 2.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes couponShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.promo-banner.tpl-coupon .promo-banner-headline {
  color: #1a1200;
  animation: couponHeadPop 3s ease-in-out infinite;
}
@keyframes couponHeadPop {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
/* code chip */
.promo-banner-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 7px 14px;
  background: rgba(255,255,255,.9);
  border: 1.5px dashed rgba(249,150,30,.8);
  border-radius: 10px;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: #b35e00;
  cursor: pointer;
  animation: chipWiggle 4s ease-in-out infinite;
  user-select: none;
  transition: background .15s, transform .15s;
}
.promo-banner-code-chip:active { transform: scale(.95); }
.promo-banner-code-chip:hover  { background: #fff; }
@keyframes chipWiggle {
  0%,100% { transform: rotate(0deg); }
  92%      { transform: rotate(0deg); }
  94%      { transform: rotate(-2deg); }
  96%      { transform: rotate(2deg); }
  98%      { transform: rotate(-1deg); }
}
.promo-banner-code-chip svg { flex-shrink: 0; }
/* copied flash */
.promo-banner-code-chip.copied {
  background: #d4f5d4;
  border-color: #22c55e;
  color: #166534;
  animation: none;
}
.promo-banner-discount-badge {
  position: absolute;
  top: -1px; right: 14px;
  background: #1a1200;
  color: #f9c842;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .8px;
  padding: 4px 10px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  animation: badgeDrop .6s cubic-bezier(.34,1.56,.64,1) .3s both;
  z-index: 4;
}
@keyframes badgeDrop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ============================================================
   Admin banners panel
   ============================================================ */
.banners-admin-list { display:flex; flex-direction:column; gap:10px; }

/* Card shell */
.banner-admin-card {
  background: var(--bg-secondary);
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--separator);
  transition: border-color .2s;
}
.banner-admin-card--active {
  border-color: var(--accent);
}

/* Collapsed header row */
.banner-admin-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
}
.banner-admin-head:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.banner-admin-head-left { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.banner-admin-head-label { font-size:15px; font-weight:700; color:var(--text-primary); }
.banner-admin-head-sub   { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
.banner-admin-head-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* Active pill */
.banner-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  white-space: nowrap;
}

/* Expand chevron — rotates when open */
.banner-expand-icon {
  transition: transform .22s ease;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.banner-admin-head[aria-expanded="true"] .banner-expand-icon {
  transform: rotate(180deg);
}

/* Collapsible body */
.banner-admin-body { border-top: 1px solid var(--separator); }

/* Kill every animation/transition on the admin preview strip */
.banner-admin-preview,
.banner-admin-preview::before,
.banner-admin-preview::after,
.banner-admin-preview * {
  animation: none !important;
  transition: none !important;
}
.banner-admin-preview {
  min-height: 60px;
  margin: 0 !important;
  border-radius: 0;
  pointer-events: none;
  background-position: 0% 50% !important;
}

.banner-admin-editor { padding:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.banner-enable-toggle { margin-right:8px; }
.banner-enable-label  { font-size:14px; font-weight:600; margin-right:16px; }
.banner-admin-editor .form-group { flex:1 1 100%; margin:0; }
.banner-admin-editor .form-group .form-input { width:100%; }

/* image upload row inside custom banner editor */
.banner-img-row { display:flex; gap:8px; align-items:center; }
.banner-img-row .form-input { flex:1; min-width:0; }
.banner-upload-label {
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  cursor:pointer; padding:8px 14px; border-radius:10px;
  font-size:13px; font-weight:700; flex-shrink:0;
  transition:opacity .2s;
}
.banner-img-thumb-wrap {
  display:flex; align-items:center; gap:10px; margin-top:10px;
}
.banner-img-thumb {
  width:72px; height:48px; object-fit:cover; border-radius:8px;
  border:2px solid rgba(255,255,255,.15);
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.banner-img-remove {
  font-size:12px; padding:4px 10px; border-radius:8px; opacity:.8;
  background:rgba(255,80,80,.2); border:1px solid rgba(255,80,80,.4);
  color:#ff6b6b; cursor:pointer; transition:opacity .15s;
}
.banner-img-remove:hover { opacity:1; }

/* ============================================================
   Admin Coupons tab
   ============================================================ */
/* Quick template chips */
/* ── Quick Template Cards ──────────────────────────── */
.coupon-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.coupon-tpl-card {
  --tpl-clr: var(--accent);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0;
  background: var(--bg-secondary);
  border: 1.5px solid var(--separator);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  overflow: hidden;
  font-family: inherit;
}
.coupon-tpl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--tpl-clr) 30%, transparent);
  border-color: color-mix(in srgb, var(--tpl-clr) 60%, transparent);
}
.coupon-tpl-card:active { transform: translateY(-1px); }

.coupon-tpl-card-head {
  width: 100%;
  padding: 16px 14px 12px;
  background: color-mix(in srgb, var(--tpl-clr) 12%, transparent);
  display: flex;
  align-items: center;
  gap: 10px;
}
.coupon-tpl-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--tpl-clr) 20%, transparent);
  border-radius: 10px;
  color: var(--tpl-clr);
  flex-shrink: 0;
}
.coupon-tpl-card-icon svg { width: 20px; height: 20px; display: block; }
.coupon-tpl-card-disc {
  font-size: 15px;
  font-weight: 800;
  color: var(--tpl-clr);
  line-height: 1.1;
  letter-spacing: -.3px;
}
.coupon-tpl-card-body {
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}
.coupon-tpl-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}
.coupon-tpl-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.coupon-tpl-card-code {
  display: inline-block;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  letter-spacing: 1.5px;
  font-weight: 700;
  background: color-mix(in srgb, var(--tpl-clr) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tpl-clr) 35%, transparent);
  color: var(--tpl-clr);
  border-radius: 6px;
  padding: 3px 8px;
}
.coupon-tpl-card-cta {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tpl-clr);
  opacity: .85;
}
/* Section heading row with SVG icon */
.admin-section-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.admin-section-head svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Coupon table cell styles */
.coupon-code-mono {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.coupon-disc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  box-sizing: border-box;
}
.coupon-disc-badge.percent {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.coupon-disc-badge.fixed {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
  color: var(--success);
}

/* Coupon status badge — theme-aware, read-only indicator */
.coupon-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-sm, 30px);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.coupon-status-badge.live {
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
}
.coupon-status-badge.paused {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
/* Coupon action buttons — all btn btn-sm, theme variables only */
.coupon-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.coupon-actions .btn { width: 75px; min-height: 35px; }

/* Coupon history list */
.coupon-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.coupon-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--separator);
  font-size: 13px;
  color: var(--text-primary);
}
.coupon-history-user { flex: 1; color: var(--text-secondary); }
.coupon-history-time { color: var(--text-tertiary); font-size: 11px; white-space: nowrap; }

/* ============================================================
   Checkout coupon section
   ============================================================ */
.coupon-section { padding: 0 0 4px; margin-top: 50px;}
.coupon-row { display: flex; gap: 8px; margin-bottom: 6px; }
.coupon-input { flex: 1; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.coupon-apply-btn { flex-shrink: 0; }
.coupon-msg { font-size: 12px; min-height: 16px; margin: 0 0 8px; }
.coupon-msg--err { color: #ff6b6b; }
.coupon-applied {
  display: flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.4);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
  font-size: 14px; color: #22c55e; font-weight: 600;
}
.coupon-applied svg { flex-shrink: 0; }
.coupon-applied span { flex: 1; }
.coupon-remove {
  background: none; border: none; color: inherit; opacity: .7;
  cursor: pointer; font-size: 16px; padding: 0 4px; line-height: 1;
}
.coupon-remove:hover { opacity: 1; }
.coupon-discount-row { color: #22c55e; }
.summary-total { font-weight: 800; font-size: 16px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 8px; margin-top: 4px; }