/* Affinity Coupons - 2025 Modern UI Styles */
:root{
  --primary:#1D4ED8;
  --secondary:#C026D3;
  --accent:#F59E0B;
  --bg:#F7F9FC;
  --bg-muted:#EEF2FF;
  --text:#0B1220;
}

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;
}

section.bg-light{ background:var(--bg-muted) !important; }

/* Navbar */
#mainNav{
  backdrop-filter:saturate(180%) blur(16px);
  background:rgba(255,255,255,0.78);
  border-bottom:1px solid rgba(2,6,23,0.08);
}
#mainNav .navbar-brand{ letter-spacing:-0.2px; }
#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; }

/* Bootstrap theme overrides */
.bg-primary{ background-color:var(--primary) !important; }
.btn-outline-primary{ color:var(--primary); border-color:var(--primary); }
.btn-outline-primary:hover{ background-color:var(--primary); border-color:var(--primary); color:#fff; }
.border-primary{ border-color:var(--primary) !important; }

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

/* Buttons palette alignment */
.btn-primary{ background-color:var(--primary); border-color:var(--primary); }
.btn-primary:hover{ background-color:#1E40AF; border-color:#1E40AF; }
.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:
    radial-gradient(1000px 700px at 10% 20%, rgba(29,78,216,0.22), transparent 60%),
    radial-gradient(900px 600px at 90% 30%, rgba(192,38,211,0.18), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, var(--bg) 100%);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-section .row.min-vh-100{ padding-top:96px; padding-bottom:48px; }
.hero-bg::before{
  content:"";
  position:absolute; inset:-20% -10% auto auto; width:60vw; height:60vw;
  background:radial-gradient(closest-side, rgba(245,158,11,0.22), 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;
  border:1px solid rgba(2,6,23,0.06);
}
.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;}

/* Service / Inner Page Hero */
.service-hero{
  position:relative;
  padding:7rem 0 3.25rem;
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(29,78,216,0.16), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(192,38,211,0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 70%);
  border-bottom:1px solid rgba(2,6,23,0.06);
  overflow:hidden;
}
.service-hero::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% -20%;
  height:70%;
  background:radial-gradient(closest-side, rgba(245,158,11,0.16), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
.service-hero .lead{ color:#526072 !important; }
.service-hero img{ border:1px solid rgba(2,6,23,0.06); }

header.py-5.mt-5.bg-light{
  position:relative;
  padding:7rem 0 3.25rem !important;
  margin-top:0 !important;
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(29,78,216,0.16), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(192,38,211,0.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 70%) !important;
  border-bottom:1px solid rgba(2,6,23,0.06);
  overflow:hidden;
}
header.py-5.mt-5.bg-light::after{
  content:"";
  position:absolute;
  inset:auto -20% -35% -20%;
  height:70%;
  background:radial-gradient(closest-side, rgba(245,158,11,0.16), transparent 70%);
  filter:blur(40px);
  pointer-events:none;
}
header.py-5.mt-5.bg-light .lead{ color:#526072 !important; }
header.py-5.mt-5.bg-light img{ border:1px solid rgba(2,6,23,0.06); }

/* 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; }
.badge-special{ background:var(--secondary); 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; }
.coupon-status{ font-size:.85rem; color:#475569; display:flex; align-items:center; gap:8px; margin-top:10px; }
.coupon-status .ok{ color:var(--primary); }
.coupon-status .warn{ color:#b45309; }
.coupon-status .error{ color:#b91c1c; }
.coupon-expired .reveal-coupon{ opacity:.6; pointer-events:none; }

/* 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(29,78,216,.10), rgba(192,38,211,.10)); border:1px solid rgba(2,6,23,0.06); }
@supports (background: color-mix(in srgb, #000 10%, #fff)){
  .newsletter-box{ background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, white), color-mix(in srgb, var(--secondary) 10%, white)); }
}

/* 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(29,78,216,.18);
}
.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.bg-dark{ background:linear-gradient(180deg, #0B1220 0%, #070B14 100%) !important; }
.footer hr{ border-color:rgba(255,255,255,0.14); }
.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; }
}
:where(.dropdown-menu) .dropdown-item{ border-radius:8px; }
:where(.dropdown-menu) .dropdown-item:focus{ background:rgba(29,78,216,.08); outline:none; }
#mainNav .navbar-brand .text-primary, .text-primary{ color:var(--primary) !important; }