/* Affinity Coupons - 2025 Modern UI Styles */
:root{
  --primary:#1E90FF; /* Electric Blue */
  --secondary:#FF6F00; /* Vibrant Orange */
  --accent:#2ECC71; /* Fresh Green */
  --bg:#FFFFFF; /* White */
  --bg-muted:#F5F6F7; /* Light Gray */
  --text:#2C3E50; /* Dark Charcoal */
}

html,body{height:100%;}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  scroll-behavior:smooth;
}

/* Navbar */
#mainNav{
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(0,0,0,0.05);
}
#mainNav .nav-link{
  font-weight:600;
}
#mainNav .btn.btn-primary{
  border-radius:12px;
}

/* Hero */
.hero-section{
  position:relative;
  background:linear-gradient(135deg, #E8F2FF 0%, #F5F6F7 100%);
  overflow:hidden;
}
.hero-bg::before{
  content:"";
  position:absolute; inset:-20% -10% auto auto; width:60vw; height:60vw;
  background:radial-gradient(closest-side, rgba(30,144,255,0.25), transparent 70%);
  filter:blur(40px);
}
.hero-title{
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight:800;
  line-height:1.1;
}
.text-gradient{
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-subtitle{font-size:1.125rem; color:#526375;}
.hero-cta .btn{padding:.9rem 1.25rem; border-radius:14px;}

.hero-image{position:relative;}
.floating-card{
  position:absolute; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:.5rem; animation:float 6s ease-in-out infinite;
}
.savings-card{ top:10%; left:-5%; }
.cashback-card{ bottom:8%; right:-5%; animation-delay: 1.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* Sections */
.section-title{font-weight:800;}
.section-subtitle{color:#6b7b8d;}

/* Coupon Card */
.coupon-card{
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.coupon-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.1); }
.coupon-header{ position:relative; padding:18px; background:linear-gradient(135deg,#ffffff,#f6f9ff); display:flex; align-items:center; gap:12px; }
.store-logo{height:34px; width:auto; object-fit:contain;}
.discount-badge{ position:absolute; right:14px; top:14px; background:var(--accent); color:#fff; padding:6px 10px; border-radius:10px; font-weight:700; font-size:.8rem; }
.coupon-body{ padding:18px; }
.price-info{ display:flex; gap:10px; align-items:center; }
.original-price{ color:#a2aebd; text-decoration:line-through; }
.sale-price{ color:var(--secondary); font-weight:800; }
.coupon-footer{ padding:18px; background:#fafbff; }
.reveal-coupon{ border-radius:12px; }

/* Stores Carousel (CSS auto-scroll) */
.stores-carousel{ overflow:hidden; position:relative; }
.stores-track{ display:flex; gap:40px; animation: scroll 20s linear infinite; align-items:center; }
@keyframes scroll{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-50%);} }
.store-item{ flex:0 0 auto; }
.store-logo-carousel{ height:36px; width:auto; filter:grayscale(100%); opacity:.75; transition:all .2s; }
.store-logo-carousel:hover{ filter:none; opacity:1; transform:scale(1.05); }

/* Trending Card */
.trending-card{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.06); display:flex; }
.trending-image{ position:relative; flex: 0 0 45%; }
.trending-image img{ height:100%; width:100%; object-fit:cover; }
.trending-badge{ position:absolute; top:16px; left:16px; background:var(--secondary); color:#fff; padding:6px 10px; border-radius:12px; font-weight:700; display:flex; gap:6px; align-items:center; }
.trending-content{ padding:20px; display:flex; flex-direction:column; gap:10px; }

/* Testimonials */
.testimonial-content{ max-width:700px; margin:0 auto; }
.testimonial-avatar{ width:56px; height:56px; object-fit:cover; margin-right:10px; }
.testimonial-author{ display:flex; align-items:center; justify-content:center; gap:10px; }

/* Newsletter */
.newsletter-box{ background:linear-gradient(135deg, rgba(30,144,255,.08), rgba(46,204,113,.08)); border:1px solid rgba(0,0,0,0.05); }
.newsletter-form .form-control{ border-radius:12px 0 0 12px; }
.newsletter-form .btn{ border-radius:0 12px 12px 0; }

/* Footer */
.footer a:hover{ color:#fff !important; }

/* Modal */
.coupon-code-display{ background:#f3f6ff; border:2px dashed var(--primary); border-radius:12px; padding:12px 16px; display:inline-block; }

/* Accessibility helpers */
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:8px; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .trending-card{ flex-direction:column; }
  .trending-image{ flex:0 0 auto; height:220px; }
}