/* Theme styles */
body{background:#0f0f10;color:#e5e7eb}
.container{max-width:1200px}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.badge{background:#0b1220;color:#9ee6a6;border:1px solid #1f2937}

/* Buttons (match admin .btn-primary look) */
.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:all .3s ease}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(102,126,234,.3)}

/* Slider */
.slider-wrapper{position:relative}
.slider{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:8px;cursor:grab}
.slider.dragging{cursor:grabbing}
.swiper{padding-bottom:8px;width:100%}
.swiper-slide{height:auto}
.owl-carousel .item{height:auto}
.owl-carousel{width:100%}
.banner{
  background: radial-gradient(1200px 600px at 20% -20%, rgba(99,102,241,0.35), transparent 60%),
              radial-gradient(800px 400px at 120% 0%, rgba(236,72,153,0.25), transparent 60%),
              linear-gradient(135deg, #111827 0%, #0b0f1a 100%);
  border:1px solid rgba(255,255,255,0.06);
}
.mobile-menu{background: rgb(0 0 0 / 60%);border: 1px solid rgba(255, 255, 255, .08);backdrop-filter: blur(8px);}
.card-hover:hover{transform:translateY(-4px); box-shadow:0 10px 25px rgba(0,0,0,.5)}
.card-hover{transition:all .25s ease}
.btn-outline{border:1px solid rgba(255,255,255,.15); color:#cbd5e1; padding:.5rem 1rem; border-radius:.5rem; transition:all .2s ease}
.btn-outline:hover{border-color:rgba(99,102,241,.8); color:#fff; box-shadow:0 6px 16px rgba(99,102,241,.25)}
.btn-coupon{background-image:linear-gradient(135deg,#ef4444 0%,#ec4899 100%); color:#fff; padding:.5rem 1rem; border-radius:.5rem; transition:transform .15s ease, box-shadow .15s ease}
.btn-coupon:hover{transform:translateY(-1px); box-shadow:0 10px 20px rgba(236,72,153,.25)}
.pill{display:inline-flex;align-items:center;gap:.5rem;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem}
.pill-info{background:rgba(59,130,246,.15);color:#bfdbfe;border:1px solid rgba(59,130,246,.25)}
.pill-warn{background:rgba(245,158,11,.12);color:#fde68a;border:1px solid rgba(245,158,11,.25)}
.pill-danger{background:rgba(239,68,68,.12);color:#fecaca;border:1px solid rgba(239,68,68,.25)}
.share-btn{width:36px;height:36px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);transition:background .15s ease, transform .15s ease}
.share-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-1px)}
.slider::-webkit-scrollbar{display:none}
.slide{min-width:320px;scroll-snap-align:start}
.slider.snap{scroll-snap-type:x mandatory}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);width:40px;height:40px;border-radius:9999px;color:#fff;display:flex;align-items:center;justify-content:center}
.slider-arrow:hover{background:rgba(255,255,255,.12)}
.slider-arrow.left{left:-12px}
.slider-arrow.right{right:-12px}

/* Header title inline arrows */
.arrow-inline{position:static;transform:none;width:36px;height:36px}
.header-actions{display:flex;align-items:center;gap:8px}

@media (max-width: 768px){
  .slide{min-width: 100%}
  .slider-arrow.left{left:6px}
  .slider-arrow.right{right:6px}
  
  .header-actions{
    width: 100%;
    justify-content: space-between;
  }
}

/* Urgent Coupons - Instagram Stories Style */
.urgent-coupon-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

.urgent-coupon-item:hover {
  transform: translateY(-4px);
}

.urgent-coupon-item:hover .w-20 {
  color: #fbbf24;
}

/* Scrollbar hide for urgent coupons */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Gradient border animation for urgent items */
.urgent-coupon-item .border-red-500 {
  background: linear-gradient(45deg, #ef4444, #ec4899, #8b5cf6, #ef4444);
  background-size: 400% 400%;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}