/* ===================================
   FreshBonusDeals.vip — global styles
   Bootstrap 5.3 theme overrides
   =================================== */

:root {
  --bs-primary: #1a3c4a;
  --bs-primary-rgb: 26, 60, 74;
  --bs-secondary: #5a6a6e;
  --bs-secondary-rgb: 90, 106, 110;
  --bs-success: #2e7d62;
  --bs-info: #4a8299;
  --bs-warning: #c9a55d;
  --bs-danger: #b04545;
  --bs-light: #f8f6f2;
  --bs-dark: #132833;
  --bs-dark-rgb: 19, 40, 51;
  --bs-body-bg: #fdfbf7;
  --bs-body-color: #1f2e38;

  --gold: #c9a55d;
  --gold-rgb: 201, 165, 93;
  --champagne: #f7f4ee;
  --teal: #1a3c4a;
  --slate: #5a6a6e;
  --ink: #132833;
  --white-10: rgba(255,255,255,0.1);
  --white-20: rgba(255,255,255,0.2);
  --white-50: rgba(255,255,255,0.5);
  --white-75: rgba(255,255,255,0.75);
  --dark-5: rgba(19,40,51,0.05);
  --dark-10: rgba(19,40,51,0.1);
  --dark-20: rgba(19,40,51,0.2);
  --dark-60: rgba(19,40,51,0.6);
}

/* ------------------------------
   Base & typography
   ------------------------------ */
html, body { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
}

a { color: var(--bs-primary); transition: color .2s, transform .2s; }
a:hover { color: var(--gold); }

::selection { background: rgba(201,165,93,.25); }

/* ------------------------------
   Spacing helpers
   ------------------------------ */
.py-6 { padding-top: 4rem; padding-bottom: 4rem; }
.py-7 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-7 { padding-top: 6rem; }
.pb-7 { padding-bottom: 6rem; }
@media (min-width: 992px) {
  .py-6 { padding-top: 6rem; padding-bottom: 6rem; }
  .py-7 { padding-top: 8rem; padding-bottom: 8rem; }
}

/* ------------------------------
   Colors & buttons
   ------------------------------ */
.text-gold { color: var(--gold) !important; }
.bg-gold { background-color: var(--gold) !important; }
.border-gold-20 { border-color: var(--white-20) !important; }
.border-gold { border-color: var(--gold) !important; }

.btn-gold {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b08f4b;
  --bs-btn-hover-border-color: #b08f4b;
}

.btn-primary {
  --bs-btn-hover-bg: #132f3b;
  --bs-btn-hover-border-color: #132f3b;
}

.btn-outline-gold {
  --bs-btn-color: var(--gold);
  --bs-btn-border-color: var(--gold);
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: var(--gold);
  --bs-btn-hover-border-color: var(--gold);
}

.btn-white {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--ink);
  --bs-btn-hover-bg: #f2f2f2;
}

/* ------------------------------
   Header
   ------------------------------ */
.header-top { background: var(--teal); }
.navbar { transition: box-shadow .2s, padding .2s; }
.navbar-toggler:focus { box-shadow: none; }
.navbar .nav-link {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .02em;
}
.navbar .nav-link:hover { color: var(--gold); }

/* ------------------------------
   Hero & sections
   ------------------------------ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.section {
  position: relative;
  padding: 5rem 0;
}
@media (min-width: 992px) {
  .section { padding: 7rem 0; }
}

.section.bg-image,
.bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay-dark { background: rgba(0,0,0,0.6); }

.z-1 { position: relative; z-index: 1; }
.z-2 { position: relative; z-index: 2; }
.z-3 { position: relative; z-index: 3; }

.display-hero {
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.display-section {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lead-lg {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.65;
}

.section-label {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.section-label::after {
  content: '';
  display: inline-block;
  width: 3rem;
  height: 1px;
  margin-left: .75rem;
  background: currentColor;
}

/* ------------------------------
   Decorative elements
   ------------------------------ */
.deco-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
}
.deco-blob-gold { background: var(--gold); }
.deco-blob-teal { background: var(--teal); }

.deco-line {
  width: 80px;
  height: 2px;
  background: var(--gold);
}
.deco-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.deco-ring {
  position: absolute;
  border: 1px solid var(--white-20);
  border-radius: 50%;
  pointer-events: none;
}

.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--white-20);
}
.glass-light {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--dark-10);
}

.card-glow {
  box-shadow: 0 18px 60px -15px rgba(19,40,51,.12);
  transition: transform .3s, box-shadow .3s;
}
.card-glow:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 72px -18px rgba(19,40,51,.18);
}

/* ------------------------------
   Badges & trust chips
   ------------------------------ */
.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1px solid var(--white-20);
  border-radius: 50rem;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.trust-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: 50rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--white-20);
  background: rgba(0,0,0,0.25);
  color: #fff;
}

/* ------------------------------
   Buttons & CTAs
   ------------------------------ */
.showreel-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  position: relative;
  box-shadow: 0 0 0 15px rgba(201,165,93,.15), 0 0 0 30px rgba(201,165,93,.08);
  transition: transform .3s, box-shadow .3s;
}
.showreel-btn:hover { transform: scale(1.06); }
.showreel-btn i { font-size: 1.5rem; }

.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  border-radius: 50rem;
  font-weight: 600;
  transition: all .25s;
}

/* ------------------------------
   Forms
   ------------------------------ */
.form-control, .form-select {
  border-color: var(--dark-10);
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 .2rem rgba(201,165,93,.15);
}

.form-notification {
  display: none;
  padding: .75rem 1rem;
  border-radius: .5rem;
  margin-top: 1rem;
  font-size: .9rem;
}
.form-notification.show { display: block; }

/* ------------------------------
   Counters
   ------------------------------ */
.counter-value {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--teal);
}
.counter-label {
  font-size: .85rem;
  color: var(--slate);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ------------------------------
   Masonry / Bento / Grids
   ------------------------------ */
.masonry-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
  .masonry-item.tall { grid-row: span 2; }
  .masonry-item.wide { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .masonry-grid { grid-template-columns: repeat(4, 1fr); }
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(3, 1fr); }
  .bento-feature { grid-column: span 2; grid-row: span 2; }
}

.feature-deck .deck-card {
  position: sticky;
  top: 100px;
  margin-bottom: 2rem;
}

/* ------------------------------
   Horizontal curtain accordion
   ------------------------------ */
.curtain-wrap {
  display: flex;
  min-height: 520px;
  border-radius: 1rem;
  overflow: hidden;
}
.curtain-panel {
  flex: 1;
  min-width: 80px;
  transition: flex .45s cubic-bezier(.25,.8,.25,1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.curtain-panel:hover { flex: 4; }
.curtain-panel .panel-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: all .35s;
}
.curtain-panel:hover .panel-title {
  writing-mode: horizontal-tb;
  transform: rotate(0);
}
@media (max-width: 767px) {
  .curtain-wrap { flex-direction: column; min-height: auto; }
  .curtain-panel { min-height: 80px; flex: unset; width: 100%; }
  .curtain-panel .panel-title { writing-mode: horizontal-tb; transform: none; }
  .curtain-panel:hover .panel-title { transform: none; }
}

/* ------------------------------
   Game switcher
   ------------------------------ */
.game-switcher .game-tab {
  cursor: pointer;
  padding: 1rem;
  border-radius: .75rem;
  border: 1px solid var(--dark-10);
  background: #fff;
  transition: all .2s;
  margin-bottom: .75rem;
}
.game-switcher .game-tab:hover,
.game-switcher .game-tab.active {
  border-color: var(--gold);
  box-shadow: 0 10px 30px -12px rgba(19,40,51,.12);
}
.game-switcher .game-tab.active { background: var(--champagne); }
.game-panel { display: none; }
.game-panel.active { display: block; }

/* ------------------------------
   Timeline
   ------------------------------ */
.timeline-track {
  position: relative;
  padding-left: 2rem;
}
.timeline-track::before {
  content: '';
  position: absolute;
  left: .55rem;
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  background: var(--gold);
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: .25rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--gold);
  border-radius: 50%;
  background: var(--bs-body-bg);
}

/* ------------------------------
   FAQ
   ------------------------------ */
.accordion-button:not(.collapsed) {
  background: var(--champagne);
  color: var(--ink);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: var(--gold); }

/* ------------------------------
   Pricing
   ------------------------------ */
.pricing-card {
  border-radius: 1.25rem;
  border: 1px solid var(--dark-10);
  background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: 0 20px 60px -20px rgba(201,165,93,.25);
  transform: translateY(-12px);
}
.bestseller-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 50rem;
  background: var(--gold);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* ------------------------------
   Cookie banner
   ------------------------------ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--ink);
  color: #fff;
  padding: 1rem 0;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cookie-banner.show { transform: translateY(0); }

/* ------------------------------
   Marquee
   ------------------------------ */
.marquee-track {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-content {
  display: flex;
  gap: 2rem;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}
.marquee-track:hover .marquee-content { animation-play-state: paused; }
.marquee-reverse .marquee-content { animation-direction: reverse; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------
   Footer
   ------------------------------ */
.site-footer {
  background: var(--ink);
}
.site-footer a { color: var(--white-75); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer-links a { display: inline-block; transition: color .2s, transform .2s; }
.footer-links a:hover { transform: translateX(3px); }
.text-white-75 { color: var(--white-75) !important; }
.offline-notice {
  background: rgba(255,255,255,0.05);
  border-color: rgba(201,165,93,.25);
}

/* ------------------------------
   Reel / horizontal scroll
   ------------------------------ */
.reel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.reel-track > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ------------------------------
   Utility accents
   ------------------------------ */
.ls-1 { letter-spacing: .1em; }
.text-shadow { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.rotate-45 { transform: rotate(45deg); }

/* ------------------------------
   Responsive tweaks
   ------------------------------ */
@media (max-width: 991.98px) {
  .display-hero { font-size: clamp(2.4rem, 10vw, 4rem); }
  .display-section { font-size: clamp(1.85rem, 7vw, 2.8rem); }
}

@media (max-width: 767.98px) {
  .hero-section { min-height: auto; padding: 7rem 0 4rem; }
  .masonry-item.wide, .masonry-item.tall { grid-column: span 1 !important; grid-row: span 1 !important; }
  .reel-track { gap: .75rem; }
}