/* Affinity Coupons - 2025 Modern UI Styles */
:root{
  --primary:#2563eb; /* Indigo Blue */
  --secondary:#0ea5e9; /* Sky Blue */
  --accent:#14b8a6; /* Teal Accent */
  --bg:#f8fafc; /* Slate-50 */
  --bg-muted:#f1f5f9; /* Slate-100 */
  --text:#0f172a; /* Slate-900 */
}

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(248,250,252,0.8);
  border-bottom:1px solid rgba(2,6,23,0.06);
}
#mainNav .nav-link{
  font-weight:600;
}
#mainNav .nav-link:hover,
#mainNav .nav-link.active{ color:var(--primary) !important; }
#mainNav .btn.btn-primary{ border-radius:12px; }

/* Global link styling */
a:not(.btn){ color:var(--primary); }
a:not(.btn):hover{ color:#1d4ed8; }

/* Buttons palette alignment */
.btn-primary{ background-color:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background-color:#1d4ed8; border-color:#1d4ed8; }
.btn-outline-dark{ color:var(--primary); border-color:var(--primary); }
.btn-outline-dark:hover{ background-color:var(--primary); color:#fff; border-color:var(--primary); }

/* Hero */
.hero-section{
  position:relative;
  background:linear-gradient(135deg, #eef2ff 0%, var(--bg) 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:#475569;}
.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(37,99,235,.09), rgba(20,184,166,.09)); border:1px solid rgba(2,6,23,0.06); }

/* Form styling for consistency */
.form-control, .form-select{ border-radius:12px; border-color:#e2e8f0; }
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .25rem rgba(37,99,235,.15);
}
.offers-form .card{ border:1px solid rgba(2,6,23,0.06); }
.offers-form .card-header{ background:linear-gradient(135deg,#ffffff,#f6f9ff); }
.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; }
}