/* --- 1. VARIABLES & THEME --- */
:root {
  /* Default Dark Mode (Matches current site exactly) */
  --bg-body: #000000;
  --bg-card: #7C9987;
  --bg-nav: rgba(0, 1, 10, 0.95);
  --border-nav: #111;
  
  --text-main: #ffffff;
  --text-muted: #9ca3af;
  --text-card: #ffffff;
  
  --color-accent: #DDE0C5;
  --color-black: #000000;

  /* Component Specific */
  --btn-pill-bg: #DDE0C5;
  --btn-pill-text: #000000;
  
  --bg-match-card: #DDE0C5;
  --text-match-card: #000000;
  --bg-pill-strip: #000000;
  --text-pill-strip: #ffffff;
  
  --color-light-btn: #DDE0C5; /* Restore missing variable */

  /* Dimensions */
  --width-max: 1200px;
  --width-content: 740px;
  --border-radius: 12px;
}

/* Professional Light Mode [data-theme="light"] */
[data-theme="light"] {
  --bg-body: #FDFDF2; /* Cream/Beige */
  --bg-card: #000000;
  --bg-nav: #FDFDF2;
  --border-nav: rgba(0,0,0,0.1);
  
  --text-main: #000000;
  --text-muted: #4b5563;
  --text-card: #DDE0C5;
  
  --color-accent: #000000;
  
  --btn-pill-bg: #000000;
  --btn-pill-text: #DDE0C5;
  
  --bg-match-card: #000000;
  --text-match-card: #DDE0C5;
  --bg-pill-strip: #DDE0C5;
  --text-pill-strip: #000000;
}

/* Force Text Colors in Light Mode (Pattern from sample) */
[data-theme="light"] .section-title,
[data-theme="light"] .total-odds-text,
[data-theme="light"] .tap-copy-text,
[data-theme="light"] .info-subtitle, 
[data-theme="light"] .about-text-content,
[data-theme="light"] .rules-content {
    color: #000000;
}

/* Fix Sports Tabs in Light Mode */
[data-theme="light"] .sport-tab {
    color: #444444; /* Dark grey for inactive */
}
[data-theme="light"] .sport-tab img {
    filter: brightness(0) !important; /* Force white icons to black with priority */
    opacity: 0.5;
}
[data-theme="light"] .sport-tab.active img {
    opacity: 1;
    filter: brightness(0) !important; /* Ensure active stays black */
}
[data-theme="light"] .sport-tab.active {
    color: #000000; /* Force active text black */
}
[data-theme="light"] .sport-tab.active span {
    border-bottom: 3px solid #000000; /* Force active underline black */
}

/* Keep these white/beige in light mode (e.g. inside black cards) */
[data-theme="light"] .match-card,
[data-theme="light"] .vip-cat-name,
[data-theme="light"] .sub-plan-card,
[data-theme="light"] .info-pill-header {
    color: #DDE0C5;
}

/* Fix "Follow Us" Section for Light Mode (It has a beige background, so needs black text) */
[data-theme="light"] .follow-us-container {
    color: #000000;
}
[data-theme="light"] .follow-us-title {
    color: #000000;
}
[data-theme="light"] .social-icon {
    color: #000000;
    border-color: #000000;
}
[data-theme="light"] .social-icon i {
    color: #000000;
}

/* Fix SEO Text Section for Light Mode */
[data-theme="light"] .seo-section h3,
[data-theme="light"] .seo-section p {
    color: #000000;
}
[data-theme="light"] .seo-section div,
[data-theme="light"] .seo-section span {
    color: #000000 !important; /* Override inline style white */
    border-color: #000000 !important; /* Override inline border white */
}

/* Fix "Packages Footer" text */
[data-theme="light"] .packages-footer {
    color: #000000 !important; /* Override inline #ccc */
}

/* Fix "How to Pay" Page Redesign for Light Mode */
[data-theme="light"] .info-page-dark-wrapper {
    background-color: transparent !important; /* Allow cream body to show */
    color: #000000;
}
[data-theme="light"] .info-pill-header {
    background-color: #000000; /* Black Pill */
    color: #DDE0C5; /* Beige Text */
}
[data-theme="light"] .info-subtitle {
    color: #000000;
}
[data-theme="light"] .htp-card-beep {
    background-color: #000000; /* Black Card */
    color: #DDE0C5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
[data-theme="light"] .htp-card-title {
    color: #DDE0C5;
}
[data-theme="light"] .htp-inner-black {
    background-color: #DDE0C5; /* Beige inner box to contrast with Black Card */
    color: #000000;
}
[data-theme="light"] .htp-btn-small {
    background-color: #000000; /* Button inside beige box */
    color: #DDE0C5;
    border: 1px solid #000000;
}

/* Fix "Contact Us" Page for Light Mode */
[data-theme="light"] .info-page-dark-wrapper .section-title {
    color: #000000 !important; /* Override inline beige color */
}
[data-theme="light"] .contact-action-btn {
    background-color: #000000; /* Black Button */
    color: #DDE0C5;
    border: 1px solid #000000;
}
[data-theme="light"] .advert-sponsorship-card {
    background-color: #000000; /* Black Card */
    color: #DDE0C5;
}

/* Fix "About Us" Page for Light Mode */
[data-theme="light"] .about-icon-large {
    color: #000000 !important;
}
[data-theme="light"] .info-page-dark-wrapper h1 {
    color: #000000 !important; /* Override inline style */
}
[data-theme="light"] .about-text-content {
    color: #000000 !important;
}

/* Fix VIP Disclaimer in Light Mode */
[data-theme="light"] .vip-disclaimer p {
    color: #000000;
}

/* Fix "Payment / Gateways" Page for Light Mode */
[data-theme="light"] .gateway-page-title {
    color: #000000 !important;
}
[data-theme="light"] .gateway-subtitle {
    color: #000000 !important;
}

/* Fix Buttons to use Brand Green in Light Mode */
[data-theme="light"] .country-subscribe-btn, 
[data-theme="light"] .gateway-select-btn,
[data-theme="light"] .contact-action-btn,
[data-theme="light"] .htp-btn-small {
    background-color: #000000 !important; /* Black as requested */
    color: #DDE0C5 !important; /* Beige Text */
    border: 1px solid #000000;
}

/* Fix "Gateway Details / Payment Info" Page for Light Mode */
[data-theme="light"] .payment-page-title {
    color: #000000 !important;
}
[data-theme="light"] .payment-info-card {
    background-color: #000000;
    border-color: #DDE0C5;
    color: #DDE0C5;
}
[data-theme="light"] .payment-card-header h5,
[data-theme="light"] .payment-info-list li span,
[data-theme="light"] .payment-info-list li span:first-child,
[data-theme="light"] .payment-info-list li span:last-child {
    color: #DDE0C5 !important;
}
[data-theme="light"] .payment-info-list li {
    border-color: rgba(221, 224, 197, 0.2);
}
[data-theme="light"] form label {
    color: #DDE0C5;
}
[data-theme="light"] .payment-submit-btn {
    background-color: #DDE0C5;
    color: #000000;
}

/* --- 2. RESET --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--bg-body);
  color: var(--text-main);
  font-family: "Inter", "Roboto", sans-serif;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.3s;
}
ul {
  list-style: none;
}
img {
  display: block;
  max-width: 100%;
}

/* --- 3. LAYOUT WRAPPERS --- */
.container {
  max-width: var(--width-max);
  margin: 0 auto;
  padding: 0 20px;
}
/* Utility to force white text on the greenish background components */
.bg-theme-green, [style*="#7C9987"], .page-header-pill, .ticket-date-nav, .cat-header-inner, .timer-btn-inner, .status-badge, .about-header, .cat-card-inner, .tips-header {
    color: white !important;
}
.bg-theme-green i, .page-header-pill i, .ticket-date-nav i, .cat-header-inner i, .timer-btn-inner i, .status-badge i, .about-header i, .cat-card-inner i, .tips-header i {
    color: white !important;
}
.content-wrapper {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 15px;
}

/* --- 4. HEADER --- */
header {
  padding: 20px 0;
  position: sticky;
  top: 0;
  background-color: rgba(0, 1, 10, 0.95);
  z-index: 1000;
  border-bottom: 1px solid #111;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
}
.logo i {
  font-size: 18px;
}
.logo img {
  height: 40px;
  width: auto;
}

.desktop-nav {
  display: flex;
  gap: 30px;
  font-size: 14px;
  font-weight: 600;
  color: #ccc;
}
.desktop-nav a:hover {
  color: white;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Header Buttons */
.btn-pill {
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--text-muted);
  color: var(--text-main);
}
.btn-solid {
  background: var(--btn-pill-bg);
  color: var(--btn-pill-text);
  border: 1px solid var(--btn-pill-bg);
}

.btn-vip-dashboard,
.btn-login-mobile {
  background-color: #DDE0C5 !important;
  color: #000000 !important;
  border-color: #DDE0C5 !important;
}

.icon-btn {
  font-size: 18px;
  color: white;
  cursor: pointer;
  margin-left: 10px;
}

.hamburger-btn {
  display: none;
  background-color: transparent;
  color: white;
  width: 40px;
  height: 35px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  margin-left: 10px;
}

/* Mobile Nav Overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 76px;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
  z-index: 99;
  border-bottom: 1px solid #222;
}
.mobile-nav-overlay.open {
  height: auto;
  padding-bottom: 20px;
  border-bottom: 1px solid #333;
}
.mobile-nav-links {
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
}
.mobile-nav-links a {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  border-bottom: 1px solid #222;
  padding-bottom: 15px;
}

/* Mobile Header Responsiveness */
@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }
  .hamburger-btn {
    display: flex;
  }
  .btn-pill {
    display: none;
  } /* Hide auth buttons on mobile header */
  
  .btn-vip-dashboard,
  .btn-login-mobile {
    display: flex !important;
    padding: 8px 15px;
    font-size: 10px;
    margin-right: -5px;
  }
  
  .logo img {
    height: 30px;
  }
}

/* --- 5. HERO BANNER --- */
.hero-section {
  margin: 30px auto;
  max-width: 900px;
  padding: 0 15px;
  display: flex;
  justify-content: center;
}
.hero-img {
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  display: block; /* Removes inline gap */
}

/* --- 6. SPORTS NAV (Dark Strip) --- */
.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 50px 0 30px;
  color: #DDE0C5;
  letter-spacing: 1px;
}

.sports-nav-container {
  max-width: var(--width-content);
  margin: 0 auto 20px;
  padding: 0 15px;
}

.sports-row {
  display: flex;
  background-color: transparent;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 15px;
  /* padding-left: 15px; Optional for spacing */
}
.sports-row::-webkit-scrollbar {
  display: none;
}

.sport-tab {
  flex: 0 0 auto; /* Don't stretch */
  display: flex;
  flex-direction: column; /* Icon above text */
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: #6a7a60; /* Muted Green/Grey for inactive */
  transition: 0.2s;
  min-width: 70px;
}

@media (max-width: 600px) {
  .sport-tab {
    padding: 4px 6px; /* Ultra compact */
    min-width: 55px;   
    gap: 4px;
  }
  .sport-tab img {
    width: 22px; /* Ultra tiny mobile icon */
    height: 22px;
  }
  .sport-tab span {
    font-size: 10px; /* Ultra tiny mobile text */
  }
}

.sport-tab img {
  width: 30px; /* Small desktop icon */
  height: 30px;
  object-fit: contain;
  opacity: 0.6; /* Dim inactive */
  filter: grayscale(100%);
  transition: 0.3s;
}

.sport-tab span {
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  position: relative;
  padding-bottom: 5px; /* Space for underline */
}

/* Active State */
.sport-tab.active {
  color: #DDE0C5; /* Bright Beige */
}

.sport-tab.active img {
  opacity: 1;
  filter: none; /* Show full brightness */
}

.sport-tab.active span {
  border-bottom: 3px solid #DDE0C5; /* Underline text only */
}

/* --- 7. DATE NAV & MATCH CARD --- */
.date-bar {
  background-color: #DDE0C5; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  font-weight: 700;
  text-transform: none;
  font-size: 14px;
  color: #000;
  border: none;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.date-bar i {
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  font-weight: 900;
}

/* Match Card Design (New) */
.match-card {
  background-color: #DDE0C5; 
  border-radius: 20px; /* Reduced rounding */
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  color: #000;
  display: flex;
  flex-direction: column;
  max-width: 600px; /* More compact width */
  margin-left: auto;
  margin-right: auto;
}

.match-card-body {
  padding: 20px 20px 5px; /* Compact padding */
}

/* Card Header (League & Time) */
.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #000; /* Thinner divider */
  padding-bottom: 8px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 20px;
}

.league-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #000;
  overflow: hidden; /* Constraint for child truncation */
  max-width: 75%; /* Leave room for time */
}
.league-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0; /* Prevent icon shrinking */
}

.league-info span {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-time {
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

/* Teams & Scores */
.teams-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.team-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.team-logo-wrapper {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.team-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.team-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  max-width: 100px;
  text-transform: none;
}

.score-block {
  padding: 0 10px;
  text-align: center;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.score-text {
  font-size: 28px; /* Compact score size */
  font-weight: 800;
  color: #000; 
  letter-spacing: 0.5px;
  line-height: 1;
}
.score-text.won {
  color: #2ECC71; /* Brighter, more vibrant green for score */
}
.score-text.lost {
  color: #E74C3C; /* Brighter red */
}
.ht-score {
  font-size: 10px;
  color: #555;
  font-weight: 600;
}
/* .vs-text {
  font-size: 22px;
  font-weight: 900;
  color: #333;
} */


.upcoming-match-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.upcoming-score {
  font-size: 24px;
  font-weight: 900;
  color: #000; 
  letter-spacing: 3px;
  line-height: 1;
}

.upcoming-text {
  font-size: 10px;
  font-weight: 700;
  color: #000;
  text-transform: none; 
  opacity: 0.8;
  white-space: nowrap;
}
.match-status {
  font-size: 10px;
  text-transform: none;
  color: #555;
  font-weight: 700;
  margin-top: 2px;
}

/* Prediction Strip (Footer) */
.prediction-strip {
  background-color: #000000;
  color: #ffffff;
  padding: 12px 18px; /* Compact pill */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 5px 20px 20px 20px; /* Reduced margins */
  border-radius: 10px;
  text-transform: none;
}

.prediction-text {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin-right: auto; /* Push everything else to the right */
}

.prediction-odd {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.prediction-divider {
    height: 20px;
    width: 3px; /* Thicker */
    background-color: white;
    opacity: 0.4;
    margin: 0 15px; /* Spacing around divider */
    display: inline-block;
}

.prediction-strip.locked {
    background: linear-gradient(90deg, #111, #222);
    cursor: pointer;
    text-decoration: none;
    gap: 12px;
    transition: background 0.2s ease;
}

.prediction-strip.locked:hover {
    background: linear-gradient(90deg, #1a1a1a, #333);
}

.locked-tip-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
}

.locked-tip-text .fa-lock {
    font-size: 11px;
    opacity: 0.7;
}

.locked-tip-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: #dcdfc6;
    color: #000000;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    animation: locked-cta-pulse 2.4s ease-in-out infinite;
}

@keyframes locked-cta-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 223, 198, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(220, 223, 198, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .locked-tip-cta { animation: none; }
}

/* Mobile Responsiveness for New Card */

@media (max-width: 600px) {
    /* Reduce whitespace in cards */
  .match-card-body {
    padding: 15px 15px 5px !important; /* Force tight padding */
  }
  .card-header-row {
    margin-bottom: 10px !important;
    padding-bottom: 5px !important;
    border-bottom-width: 1px !important;
  }
  .league-info span {
      font-size: 11px !important; /* Smaller league text */
      font-weight: 700 !important;
  }
  .league-icon {
      width: 14px !important;
      height: 14px !important;
  }
  .match-time {
      font-size: 12px !important;
  }

  .prediction-strip {
    margin: 5px 15px 15px 15px !important; /* Tighter margins */
    padding: 8px 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
  .prediction-text, .prediction-odd {
      font-size: 12px !important;
  }
  
  /* Reduce whitespace around categories */
  .hero-section {
    margin: 20px auto 15px !important; /* Slightly relaxed */
  }
  .section-title {
    margin: 20px 0 15px !important; /* Relaxed headers */
    font-size: 18px !important; 
    letter-spacing: 0.5px !important;
  }
  .sports-nav-container {
    margin-bottom: 20px !important; /* Breathing room */
  }
  .date-bar {
      margin-bottom: 25px !important;
      padding: 10px 15px !important;
  }
  
  .team-block {
     font-size: 12px;
     flex-direction: column !important;
     gap: 3px !important;
  }
  .team-logo-wrapper {
      width: 35px !important;
      height: 35px !important;
      margin-bottom: 2px !important;
  }
  .team-block.home {
     flex-direction: column !important;
     text-align: center;
     justify-content: flex-start;
  }
  .team-block.away {
     text-align: center;
     justify-content: flex-start;
  }
  .team-name {
    font-size: 11px !important;
    max-width: 90px;
    line-height: 1.1 !important;
  }
  .score-text {
    font-size: 22px !important; /* Smaller score */
  }
  .vs-text {
      font-size: 16px !important;
  }
}
/* --- CATEGORIES GRID (VIP) --- */
.category-box {
    text-align: center;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 15px;
}

.cat-header-title {
    color: #DDE0C5; /* Updated to Beige */
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.cat-card-outer {
    display: block;
    border: 3px solid #DDE0C5;
    border-radius: 12px;
    padding: 15px 10px;
    text-align: left;
    color: #DDE0C5; /* Updated to Beige */
    text-decoration: none;
    transition: all 0.2s;
    background: transparent;
}

.cat-card-outer:hover {
    background: #DDE0C5; /* Solid Beige on hover */
    color: #000; /* Black text on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(221, 224, 197, 0.4);
}

.cat-card-outer:hover i {
    color: #000;
}
/* Ensure images invert color on hover if possible, or handle via JS. 
   For now, we handle text/icons. */

.cat-card-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    justify-content: center;
}

.cat-card-inner i, .cat-card-inner img {
    font-size: 20px;
    width: 24px;
    color: #DDE0C5; /* Icon Beige */
} 

.cat-card-outer:hover .cat-card-inner i {
    color: #000;
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
    .cat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* --- 8. APP CTA SECTION --- */
.app-cta-section {
  text-align: center;
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
}
.app-cta-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: #ddd;
}
.btn-get-app {
  display: inline-block;
  background-color: var(--color-light-btn);
  color: black;
  font-weight: 700;
  padding: 12px 30px;
  border-radius: 8px;
  font-size: 16px;
}

/* --- 9. ROLLOVER TABLE --- */
.rollover-section {
  max-width: 600px;
  margin: 0 auto 60px;
  text-align: center;
  padding: 0 15px;
}
.rollover-header {
  margin-bottom: 20px;
}
.rollover-header h2 {
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.rollover-header p {
  font-size: 14px;
  color: #ccc;
}

.rollover-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 14px;
}
.rollover-table th {
  background-color: var(--color-light-btn);
  color: black;
  font-weight: 900;
  padding: 12px;
  text-transform: uppercase;
}
.rollover-table td {
  background-color: var(--color-light-btn);
  color: black;
  padding: 12px;
  font-weight: 700;
  border-bottom: 1px solid #cbd5e1;
}
.rollover-sep {
  background-color: #000 !important;
  color: white !important;
  font-weight: 900;
  text-transform: uppercase;
  padding: 10px !important;
  font-size: 12px;
}
.btn-vip-rollover {
  background-color: var(--color-light-btn);
  color: black;
  padding: 15px 20px;
  border-radius: 8px;
  font-weight: 900;
  text-transform: uppercase;
  display: inline-block;
  width: 100%;
  max-width: 400px;
}

/* --- 10. SUBSCRIPTION PLANS --- */
.subscription-section {
  text-align: center;
  max-width: 500px;
  margin: 0 auto 60px;
  padding: 0 15px;
}
.trophy-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: block;
}
.sub-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
}
.sub-desc {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 20px;
}
.sub-features {
  text-align: left;
  display: inline-block;
  margin-bottom: 30px;
  font-size: 13px;
  color: #ddd;
}
.sub-features li {
  margin-bottom: 8px;
}
.sub-features i {
  margin-right: 8px;
  background: white;
  color: black;
  border-radius: 2px;
  padding: 1px;
  font-size: 10px;
}

.plan-btn {
  display: block;
  width: 100%;
  border: 1px solid #333;
  padding: 15px;
  border-radius: 30px;
  margin-bottom: 15px;
  background: #7C9987;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}
.plan-btn:hover {
  border-color: var(--color-light-btn);
  background: #0a0f35;
}
.plan-name {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.plan-price {
  font-size: 12px;
  color: #aaa;
}
.sub-footer-text {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  margin-top: 20px;
  padding: 0 10px;
}

/* --- 11. UPCOMING TIPS (Split View) --- */
.tips-split-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto 60px;
  flex-wrap: wrap;
  padding: 0 15px;
}
.tips-col {
  flex: 1;
  min-width: 300px;
  background: transparent;
}
.tips-header {
  background-color: #7C9987;
  padding: 15px;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 14px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.tips-header.vip {
  color: var(--color-gold);
}
.tips-header.free {
  color: white;
}
.tip-list-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid #222;
}
.tip-list-item:last-child {
  border: none;
}
.free-tips-placeholder {
  text-align: center;
  padding: 30px;
}
.warning-icon {
  font-size: 40px;
  color: #ccc;
  margin-bottom: 10px;
}
.free-text {
  font-size: 12px;
  color: #ccc;
}
.btn-click-view {
  background: var(--color-light-btn);
  color: black;
  width: 100%;
  padding: 12px;
  border-radius: 30px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 20px;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* --- 12. SEO TEXT & FOOTER --- */
.seo-section {
  max-width: 800px;
  margin: 0 auto 60px;
  text-align: center;
  color: #ccc;
  font-size: 14px;
  padding: 0 20px;
}
.seo-section h3 {
  color: white;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 900;
}
.seo-section p {
  margin-bottom: 15px;
  line-height: 1.6;
}

/* --- 12. FOOTER --- */
.site-footer {
  background-color: #7C9987 !important; /* Sage Green */
  padding: 80px 40px 40px;
  color: #ffffff !important;
  border-top: none;
}

.footer-main-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-col {
  flex: 1;
  min-width: 250px;
}

.footer-links-col {
  text-align: left;
}

.footer-vertical-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-vertical-links li {
  margin-bottom: 15px;
}

.footer-vertical-links a {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: opacity 0.2s;
}

.footer-vertical-links a:hover {
  opacity: 0.8;
}

.footer-actions-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.footer-app-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: nowrap; /* Keep side-by-side */
}

.footer-app-img {
  height: 55px;
  width: auto;
  transition: transform 0.2s;
}

.footer-app-img:hover {
  transform: translateY(-2px);
}

.footer-social-icons {
  display: flex;
  gap: 25px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-social-icons a {
  color: #ffffff !important;
  font-size: 50px; /* Big icons as per image */
  line-height: 1;
  transition: transform 0.2s;
}

.footer-social-icons a:hover {
  transform: scale(1.1);
}

.footer-copyright {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  border-top: none;
  margin-top: -10px; /* Bring closer to socials */
  width: auto;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 40px 15px 30px;
  }

  .footer-main-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Center horizontally relative to each other */
    margin-bottom: 40px;
    gap: 15px;
    flex-wrap: nowrap; /* Keep side-by-side like web */
  }
  
  .footer-col {
    min-width: 0;
    width: auto;
    text-align: left;
  }

  .footer-links-col {
    flex: 0 0 auto;
  }

  .footer-vertical-links li {
    margin-bottom: 10px;
  }

  .footer-vertical-links a {
    font-size: 14px; /* Reduced from 20px (web) */
  }
  
  .footer-actions-col {
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically if height allows */
    gap: 15px;
    flex: 1;
    text-align: center;
  }

  .footer-app-btns {
    justify-content: flex-end;
    gap: 8px;
  }

  .footer-app-img {
    height: 28px; /* Scaled down from 55px (web) */
  }

  .footer-social-icons {
    justify-content: flex-end;
    gap: 12px;
  }

  .footer-social-icons a {
    font-size: 20px; /* Scaled down from 50px (web) */
  }
  
  .footer-copyright {
    font-size: 11px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
  }
}

.footer-nav a:hover {
  color: white;
}

/* App Store Buttons */
.app-btns-row {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 35px;
}

.app-btn-img {
  height: 45px;
  width: auto;
  transition: transform 0.2s;
}

.app-btn-img:hover {
  transform: scale(1.05);
}

/* Social Media Icons */
.social-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.social-row a {
  width: 45px;
  height: 45px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.social-row a:hover {
  transform: scale(1.1);
  border-color: white;
  background-color: rgba(255, 255, 255, 0.1);
}

.social-row i {
  font-size: 20px;
  color: white;
}

/* Copyright */
.copyright {
  font-size: 13px;
  color: white; /* Force White */
  opacity: 0.7;
  margin-top: 30px;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-top-row {
    flex-direction: column;
    text-align: center;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-nav {
    justify-content: center;
    gap: 15px;
  }

  .footer-nav a {
    font-size: 14px;
  }

  .app-btn-img {
    height: 40px;
  }

  .social-row {
    gap: 15px;
  }

  .social-row a {
    width: 42px;
    height: 42px;
  }
}

/* --- 13. SETTINGS SIDEBAR (Overlay) --- */
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.settings-overlay.active {
  opacity: 1;
  visibility: visible;
}
.settings-sidebar {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background-color: var(--bg-body);
  border-left: 1px solid var(--border-nav);
  z-index: 99999;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}

.settings-sidebar.active {
  right: 0;
}

.sidebar-header {
    padding: 30px 20px;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--border-nav);
}

.sidebar-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sidebar-user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #7C9987;
    object-fit: cover;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
}

.sidebar-user-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-muted);
}

.sidebar-user-name {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-main);
}

.sidebar-scroll-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: block;
}

/* Nav Item Styles */
.sidebar-nav-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s;
}

.sidebar-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: #7C9987;
}

.sidebar-nav-item:hover {
    background: rgba(255,255,255,0.05);
    padding-left: 20px;
}

.sidebar-nav-item.logout {
    color: #ff5f5f;
}
.sidebar-nav-item.logout i {
    color: #ff5f5f;
}

/* Language Toggle Customization */
.sidebar-lang-selector {
    background: #111;
    border: 1px solid #222;
    padding: 12px 15px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.sidebar-lang-selector:hover {
    border-color: #7C9987;
}

.language-dropdown {
    display: none;
    background: #111;
    border-radius: 12px;
    margin-top: 5px;
    overflow: hidden;
    border: 1px solid #222;
}

.language-option {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
}

.language-option:hover {
    background: #222;
}

.language-option.active {
    background: #222;
}

/* Light Mode Overrides */
html[data-theme="light"] .sidebar-lang-selector {
    background: #fff;
    border-color: #e0e0e0;
    color: #333;
}

html[data-theme="light"] .sidebar-lang-selector:hover {
    border-color: #7C9987;
}

html[data-theme="light"] .language-dropdown {
    background: #fff;
    border-color: #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

html[data-theme="light"] .language-option {
    color: #333;
}

html[data-theme="light"] .language-option:hover {
    background: #f5f5f5;
}

html[data-theme="light"] .language-option.active {
    background: #f0f0f0;
}

/* Theme Options Styling */
.sidebar-theme-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.theme-option-label input[type="radio"] {
    accent-color: #7C9987;
    width: 18px;
    height: 18px;
}

/* --- 14. PROMO POPUP --- */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.4s ease;
  padding: 20px;
}
.popup-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.popup-content {
  position: relative;
  max-width: 600px;
  width: 100%;
}
.popup-content img {
  width: 100%;
  border-radius: 12px;
}
.popup-close {
  position: absolute;
  top: -15px;
  right: -15px;
  background-color: var(--color-red);
  color: white;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 2px solid white;
  z-index: 10;
}
.popup-close:hover {
  transform: scale(1.1);
}
@keyframes popUpScale {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- UTILITY & ANIMATIONS --- */
.hidden {
  display: none !important;
}
.category-content,
.vip-category-content,
.date-group {
  display: none;
}
.category-content.active,
.vip-category-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
.date-group.active {
  display: block;
  animation: slideIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideIn {
  from {
    transform: translateX(10px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- 15. CATEGORIES GRID SECTIONS (VIP & FREE) --- */
.categories-wrapper {
  max-width: 900px;
  margin: 0 auto 30px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.category-box {
  background-color: rgba(28, 57, 52, 0.6); /* Subtle dark container */
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
}

.cat-header-title {
  color: white;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Columns */
  gap: 15px;
}

/* The Outer "Light" Container */
.cat-card-outer {
  background-color: var(--color-light-btn); /* The whitish-blue rim */
  border-radius: 8px;
  padding: 6px; /* Thickness of the rim */
  display: block;
  transition: transform 0.2s ease;
  text-decoration: none;
}

.cat-card-outer:hover {
  transform: translateY(-3px);
  filter: brightness(1.1);
}

/* The Inner "Dark" Button */
.cat-card-inner {
  background-color: #7C9987; /* Dark Blue inside */
  color: white;
  width: 100%;
  height: 100%;
  padding: 12px 5px;
  border-radius: 5px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.cat-card-inner i {
  font-size: 16px;
  color: var(--color-light-btn); /* Icon matches rim color */
}

@media (max-width: 768px) {
  .cat-grid {
    /* Tablet: 2 Columns */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .cat-grid {
    /* Mobile: Keep it 2 Columns (instead of 1) */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; /* Slightly tighter gap for small screens */
  }

  .cat-card-inner {
    /* Reduce padding slightly to ensure text fits */
    padding: 10px 4px;
    font-size: 11px; /* Slightly smaller text if needed */
    justify-content: center; /* Keep centered */
  }

  .cat-card-inner i {
    font-size: 14px;
  }
}

/* --- 16. HOW TO PLAY / PAY PAGE --- */

.how-to-pay-wrapper {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Header Section */
.htp-header {
  text-align: center;
  margin-bottom: 60px;
}

.htp-title-pill {
  display: inline-block;
  background-color: var(--color-light-btn); /* Light blue */
  color: black;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 15px 60px;
  border-radius: 12px;
  margin-bottom: 30px;
}

.htp-subtitle {
  color: white;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

/* Split Layout */
.htp-content {
  display: flex;
  align-items: center; /* Vertically center image with text */
  justify-content: center;
  gap: 50px;
  margin-bottom: 80px;
}

.htp-image-col {
  flex: 0 0 300px; /* Fixed width for image column */
  display: flex;
  justify-content: center;
}

.illustration-img {
  width: 100%;
  max-width: 250px;
  /* If you don't have the SVG yet, this filter makes a black PNG look blue-ish */
  /* filter: drop-shadow(0 0 10px rgba(0, 100, 255, 0.5)); */
}

/* Instructions Card */
.htp-text-card {
  background-color: #020418; /* Very dark blue card */
  padding: 40px;
  border-radius: 8px;
  flex: 1; /* Takes remaining space */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.htp-steps-list {
  list-style: none;
  color: #d1d5db; /* Light grey text */
  font-size: 14px;
  line-height: 1.8;
}

.htp-steps-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

/* Custom bullet logic if needed, or just use the text dashed */
.htp-steps-list li::before {
  content: "•";
  color: white;
  font-weight: bold;
  margin-right: 10px;
  font-size: 20px;
  line-height: 1;
}

/* Video Section */
.htp-video-section {
  max-width: 800px;
  margin: 0 auto 100px;
  display: flex;
  justify-content: center;
}

.video-box {
  width: 100%;
  height: 400px;
  background-color: #020418;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #1a1f3d;
}

.video-box i {
  font-size: 60px;
  color: #333;
}

/* Responsive */
@media (max-width: 900px) {
  .htp-content {
    flex-direction: column;
    gap: 30px;
  }

  .htp-image-col {
    flex: none;
    order: -1; /* Keep image on top */
  }

  .illustration-img {
    max-width: 150px; /* Smaller image on mobile */
  }

  .htp-title-pill {
    font-size: 18px;
    padding: 12px 40px;
  }

  .video-box {
    height: 250px; /* Smaller video box on mobile */
  }
}

/* --- 17. PACKAGES PAGE --- */

.packages-wrapper {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px;
  text-align: center;
}

.packages-title {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 50px;
  color: white;
}

/* Grid Layout */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards side by side */
  gap: 30px;
  margin-bottom: 60px;
  place-items: center; /* Centers items when there's only one */
}

/* Card Styling */
.pkg-card {
  background-color: #020418; /* Deep Blue Card Background */
  border-radius: 16px; /* Smooth rounded corners */
  padding: 40px 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Optional: Add a subtle border if the background is too similar to body */
  /* border: 1px solid #1a1f3d; */
}

/* Header (Icon + Title) */
.pkg-header {
  margin-bottom: 30px;
}

.pkg-icon-circle {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pkg-icon-circle .trophy-icon {
  width: 60px;
  height: 60px;
  filter: drop-shadow(0 0 10px rgba(255, 193, 7, 0.4));
}

.pkg-header h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
  color: white;
}

.pkg-desc {
  font-size: 14px;
  color: #ccc;
  font-weight: 400;
}

/* Feature List */
.pkg-features {
  text-align: left;
  width: 100%;
  margin-bottom: 40px;
  padding-left: 10px;
}

.pkg-features li {
  margin-bottom: 15px;
  font-size: 14px;
  color: #ddd;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pkg-features i {
  color: white; /* The checkbox icon color */
  font-size: 16px;
  background-color: transparent;
  border-radius: 2px;
}

/* The Outline Button */
.btn-pkg-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  width: 100% !important;
  padding: 15px;
  border-radius: 50px; /* Pill shape */
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-pkg-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: white;
}

.pkg-btn-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.pkg-btn-price {
  font-size: 11px;
  color: #aaa;
}

/* Footer Text */
.packages-footer {
  max-width: 800px;
  margin: 0 auto;
  color: #ccc;
  font-size: 13px;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 900px) {
  .packages-grid {
    grid-template-columns: 1fr; /* Stack cards vertically on mobile */
    max-width: 400px;
    margin: 0 auto 50px;
  }
}

/* --- 18. ABOUT US PAGE --- */

.about-wrapper {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The 'About Us' Title Pill */
.about-header {
  background-color: #7C9987; /* Dark Navy Box */
  padding: 15px 50px;
  border-radius: 8px;
  margin-bottom: 30px;
  display: inline-block;
  /* Optional: Add a subtle glow/border if needed */
  /* border: 1px solid #1a1f3d; */
}

.about-header h1 {
  font-size: 24px;
  font-weight: 900;
  color: white;
  margin: 0;
  font-style: italic; /* Slight italic style often used in sports headers */
}

/* The Main Content Box */
.about-content-box {
  background-color: #020418; /* Deep Midnight Blue Card */
  padding: 50px;
  border-radius: 4px; /* Slightly sharper corners than other cards */
  color: white; /* White text for better contrast */
  font-size: 15px;
  line-height: 1.8;
  text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.about-content-box p {
  margin-bottom: 25px;
}

.about-content-box p:last-child {
  margin-bottom: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .about-content-box {
    padding: 30px 20px;
    font-size: 14px;
  }

  .about-header {
    padding: 12px 35px;
  }

  .about-header h1 {
    font-size: 20px;
  }
}

/* --- 19. VIP DASHBOARD PAGE --- */

.vip-dashboard-wrapper {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Welcome Banner */
.vip-welcome-banner {
  background-color: var(
    --color-light-btn
  ); /* The light blue/white background */
  border-radius: 12px;
  padding: 30px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  color: black; /* Text is dark on this banner */
}

.vip-banner-content h1 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.vip-banner-content p {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
}

.vip-banner-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.throne-icon {
  font-size: 40px;
  color: var(--color-gold);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.status-badge {
  background-color: #7C9987;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Disclaimer Text */
.vip-disclaimer {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  color: white;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.5;
}

/* Subscription Timer Button */
.timer-section {
  margin-top: 50px;
  margin-bottom: 80px;
  display: flex;
  justify-content: center;
}

.timer-btn-outer {
  background-color: var(--color-light-btn); /* Light rim */
  padding: 6px;
  border-radius: 8px;
  width: 100%;
  max-width: 600px;
  cursor: pointer;
  transition: transform 0.2s;
}

.timer-btn-outer:hover {
  transform: scale(1.02);
}

.timer-btn-inner {
  background-color: #7C9987; /* Dark inside */
  color: white;
  padding: 15px;
  border-radius: 6px;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 700px) {
  .vip-welcome-banner {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 25px;
  }

  .vip-banner-content h1 {
    font-size: 20px;
    line-height: 1.4;
  }

  .vip-disclaimer {
    font-size: 13px;
    padding: 0 10px;
  }
}

/* --- 20. SPORT CATEGORY SELECTION VIEW --- */

.category-view-wrapper {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wide Header Pill (Football) */
.cat-view-header {
  background-color: var(--color-light-btn); /* Light Blue Rim */
  padding: 8px; /* Thickness of the rim */
  border-radius: 8px;
  width: 100%;
  max-width: 700px;
  margin-bottom: 30px;
}

.cat-header-inner {
  background-color: #7C9987; /* Dark inner */
  color: white;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.cat-header-inner i {
  color: var(--color-light-btn);
  font-size: 24px;
}

/* Disclaimer Text */
.cat-view-disclaimer {
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  max-width: 650px;
  margin-bottom: 60px;
}

/* Selection Cards Grid */
.bet-options-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.bet-option-card {
  border: 1px solid white; /* Thin white outline */
  border-radius: 8px;
  background-color: transparent; /* Or very dark blue if preferred */
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  transition: 0.3s;
  cursor: pointer;
  padding: 20px;
}

.bet-option-card:hover {
  /* background-color: rgba(255, 255, 255, 0.1); Removed dark hover effect */
  /* border-color: var(--color-light-btn); */
  transform: translateY(-5px);
}

.option-icon {
  width: 60px; /* Sets the size of your SVG */
  height: 60px; /* Keeps it square */
  margin-bottom: 20px;
  object-fit: contain; /* Ensures the SVG scales correctly without distortion */
  display: block; /* Prevents alignment issues */
}

.option-text {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 500px) {
  .bet-options-grid {
    flex-direction: column;
    align-items: center;
  }

  .bet-option-card {
    width: 100%;
    max-width: 250px;
    height: 160px; /* Slightly shorter on mobile */
    flex-direction: row; /* Horizontal layout on mobile? or keep vertical */
    gap: 20px;
  }

  .option-icon {
    margin-bottom: 0;
    font-size: 40px;
  }

  .option-text {
    text-align: left;
  }
}

/* --- 21. TICKET VIEW (PREDICTIONS TABLE) --- */

.ticket-view-wrapper {
  max-width: 800px;
  margin: 40px auto 80px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Headers */
.page-header-pill {
  background-color: #7C9987;
  border: 1px solid var(--color-light-btn);
  padding: 10px 40px;
  border-radius: 8px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 600px;
  justify-content: center;
}

.page-sub-title {
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 30px;
  text-align: center;
}

/* Date Nav */
.ticket-date-nav {
  background-color: #7C9987;
  width: 100%;
  max-width: 700px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  border-radius: 4px;
  margin-bottom: 30px;
}
.nav-arrow {
  cursor: pointer;
  padding: 5px;
}

/* Ticket List Container */
.ticket-list {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

/* Reuse Homepage Match Card Styling with proper spacing */
.ticket-list .match-card {
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.ticket-list .match-card:last-child {
  margin-bottom: 0;
}

/* --- TICKET ACTIONS ROW (The specific layout from your screenshot) --- */
.ticket-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

/* 1. TIP PILL (Left) */
.ticket-actions .pill-grey {
  background-color: var(--color-light-btn); /* #DDE0C5 */
  color: black;
  font-weight: 900;
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 2. PREDICTION TEXT (Center) */
.ticket-actions .center-text {
  color: white;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  flex-grow: 1; /* Pushes to take available center space */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. RIGHT GROUP (Odd + Status) */
.ticket-actions .right-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ticket-actions .pill-odd {
  background-color: var(--color-light-btn); /* Matches TIP pill background */
  color: black;
  font-weight: 800;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.status-badge {
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  color: black;
  white-space: nowrap;
}

.status-badge.won {
  background-color: var(--color-green);
}
.status-badge.lost {
  background-color: var(--color-red);
  color: white;
}
.status-badge.void {
  background-color: #6b7280;
  color: white;
}

/* --- FOOTER & BOOKING CODES --- */
.ticket-footer-section {
  text-align: center;
  width: 100%;
  max-width: 700px;
}

.total-odds-text {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 30px;
}

.tap-copy-text {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 20px;
}

/* Bookies Grid - Desktop */
.bookies-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

.bookie-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.bookie-item:hover {
  opacity: 0.8;
}

.copy-icon {
  font-size: 24px;
  color: white;
  border: 2px solid white;
  border-radius: 6px;
  padding: 5px;
}

.bookie-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
}

.bookie-name {
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
}

.bookie-code {
  display: none; /* Hidden, only used for copy functionality */
}

/* --- RESPONSIVE --- */
@media (max-width: 600px) {
  /* Fix Ticket Actions for small screens */
  .ticket-actions {
    gap: 5px;
  }

  .ticket-actions .pill-grey,
  .ticket-actions .pill-odd,
  .status-badge {
    padding: 6px 10px; /* Smaller padding */
    font-size: 11px; /* Smaller font */
  }

  .ticket-actions .center-text {
    font-size: 11px;
  }

  /* Force Single Row for Booking Codes on Mobile */
  .bookies-grid {
    justify-content: flex-start; /* Align left to allow scroll start */
    overflow-x: auto; /* Enable horizontal scroll */
    padding-bottom: 10px; /* Space for scrollbar touch area */
    gap: 20px;
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    scrollbar-width: none; /* Hide scrollbar Firefox */
  }

  .bookies-grid::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
  }

  .bookie-item {
    flex: 0 0 auto; /* Prevent shrinking */
  }

  .bookie-name {
    font-size: 12px;
  }

  .copy-icon {
    font-size: 20px;
  }
}

/* --- 21. HOW TO PAY PAGE --- */

.how-to-pay-wrapper {
  max-width: 1000px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* Header Section */
.htp-header {
  text-align: center;
  margin-bottom: 60px;
}

.htp-title-pill {
  display: inline-block;
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  color: white;
  margin-bottom: 20px;
}

.htp-subtitle {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* Content Section (Image + Steps) */
.htp-content {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: start;
}

.htp-image-col {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.illustration-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  object-fit: contain;
}

.htp-text-card {
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  border-radius: 12px;
  padding: 35px 40px;
}

.htp-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.htp-steps-list li {
  font-size: 14px;
  color: #ddd;
  line-height: 1.8;
  margin-bottom: 15px;
  padding-left: 0;
}

.htp-steps-list li:last-child {
  margin-bottom: 0;
}

/* Video Section */
.htp-video-section {
  text-align: center;
}

.video-box {
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  border-radius: 12px;
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.video-box i {
  font-size: 60px;
  color: #333;
  margin-bottom: 15px;
}

.video-box p {
  font-size: 14px;
  color: #888;
}

.video-box iframe {
  width: 100%;
  max-width: 800px;
  height: 450px;
  border-radius: 8px;
}

/* Responsive */
@media (max-width: 768px) {
  .htp-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .htp-image-col {
    order: -1;
  }

  .illustration-img {
    max-width: 200px;
  }

  .htp-text-card {
    padding: 25px 20px;
  }

  .htp-steps-list li {
    font-size: 13px;
  }

  .video-box {
    padding: 40px 20px;
  }

  .video-box iframe {
    height: 250px;
  }
}

/* --- 22. CONTACT US PAGE --- */

.contact-wrapper {
  max-width: 900px;
  margin: 60px auto 100px;
  padding: 0 20px;
}

/* Header Section */
.contact-header {
  text-align: center;
  margin-bottom: 60px;
}

.contact-title-pill {
  display: inline-block;
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  padding: 12px 30px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  color: white;
  margin-bottom: 20px;
}

.contact-subtitle {
  font-size: 16px;
  color: #ccc;
  line-height: 1.6;
}

/* Contact Cards Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 60px;
}

.contact-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  border-radius: 12px;
  padding: 40px 25px;
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
}

.contact-card:hover {
  transform: translateY(-5px);
  border-color: #3b82f6;
}

.contact-icon {
  width: 70px;
  height: 70px;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.contact-icon i {
  font-size: 30px;
  color: #3b82f6;
}

.contact-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
}

.contact-link {
  font-size: 14px;
  color: #3b82f6;
  text-decoration: none;
  transition: color 0.2s;
}

.contact-link:hover {
  color: #60a5fa;
}

/* Social Media Section */
.contact-social {
  text-align: center;
  padding: 40px 20px;
  background-color: var(--bg-card);
  border: 1px solid #1a1f3d;
  border-radius: 12px;
}

.social-text {
  font-size: 16px;
  color: #ccc;
  margin-bottom: 25px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  transition: all 0.2s;
}

.social-icon:hover {
  background-color: #3b82f6;
  border-color: #3b82f6;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-card {
    padding: 30px 20px;
  }

  .social-icons {
    gap: 15px;
  }

  .social-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
}

/* Mobile Auth Buttons */
.mobile-auth-btn {
  background-color: #DDE0C5 !important;
  border: none !important;
  color: #000000 !important;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s;
}

.mobile-btn-signin {
  background-color: #DDE0C5 !important;
}

.mobile-btn-register {
  background-color: #DDE0C5 !important;
}

.mobile-auth-btn:hover {
  transform: scale(1.02);
  background-color: #EBF0D0 !important;
}

/* --- VIP DASHBOARD --- */

.vip-dashboard-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Hero Section */
.hero-section {
  margin-bottom: 30px;
  text-align: center;
}

.hero-img {
  width: 100%;
  max-width: 800px;
  height: auto;
  border-radius: 12px;
}

/* VIP Disclaimer */
.vip-disclaimer {
  background-color: transparent;
  border: none;
  padding: 0;
  margin-bottom: 40px;
  text-align: center;
}

.vip-disclaimer p {
  color: #ccc;
  font-size: 15px;
  line-height: 1.8;
  margin: 0;
  font-weight: 400;
}

/* Category Box */
.category-box {
  margin-bottom: 40px;
}

.cat-header-title {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  color: white;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cat-card-outer {
  text-decoration: none;
  display: block;
  background: #C8D8E4;
  padding: 8px;
  border-radius: 16px;
  transition: transform 0.2s;
}

.cat-card-outer:hover {
  transform: translateY(-3px);
}

.cat-card-inner {
  background-color: #7C9987;
  border: none;
  padding: 20px 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  transition: all 0.3s;
}

.cat-card-inner:hover {
  background-color: #0f1433;
}

.cat-card-inner i {
  font-size: 28px;
  color: white;
}

/* Timer Section */
.timer-section {
  margin-top: 50px;
  margin-bottom: 30px;
  text-align: center;
}

.timer-btn-outer {
  display: inline-block;
}

.timer-btn-inner {
  background-color: var(--bg-card);
  border: 2px solid #667eea;
  padding: 20px 40px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  letter-spacing: 1.5px;
}

.d-left-countdown-title {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.countdown-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.countdown-single {
  font-size: 24px;
  font-weight: 900;
  color: white;
  margin: 0;
}

.countdown-single span {
  display: block;
  font-size: 12px;
  color: #666;
  font-weight: 400;
}

.upgrade-text {
  color: #FF4444;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.upgrade-text i {
  margin-right: 8px;
}

/* Responsive */
@media (max-width: 900px) {
  .cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .hero-img {
    max-width: 100%;
  }

  .cat-card-inner {
    padding: 25px 15px;
    font-size: 13px;
  }

  .cat-card-inner i {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .cat-grid {
    grid-template-columns: 1fr;
  }

  .countdown-single {
    font-size: 20px;
  }

  .timer-btn-inner {
    padding: 15px 25px;
    font-size: 14px;
  }
}

/* User Menu Dropdown */
.user-menu-dropdown {
  position: relative;
  display: inline-block;
}

.user-menu-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 10px;
  background-color: var(--bg-card);
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  border-radius: 8px;
  z-index: 1000;
  border: 1px solid #1a1f3d;
}

.user-menu-dropdown-content.show {
  display: block;
}

.user-menu-dropdown-content a {
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: background-color 0.2s;
}

.user-menu-dropdown-content a:hover {
  background-color: rgba(59, 130, 246, 0.1);
}

.user-menu-dropdown-content a i {
  width: 16px;
  font-size: 14px;
}

.user-menu-dropdown-content a:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.user-menu-dropdown-content a:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* User Avatar in Header */
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-menu-btn {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding-left: 8px !important;
}

/* Updated User Menu Button (Without Button Wrapper) */
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 25px;
  transition: background-color 0.2s;
}

.user-menu-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-name {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.user-menu-btn .fa-chevron-down {
  font-size: 10px;
  color: white;
}

/* --- CATEGORY VIEW PAGE --- */

.category-view-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* Category Header */
.cat-view-header {
  background-color: var(--color-light-btn);
  padding: 8px;
  border-radius: 8px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto 30px;
}

.cat-header-inner {
  background-color: #7C9987;
  color: white;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.cat-header-inner i {
  color: var(--color-light-btn);
  font-size: 24px;
}

/* Category Disclaimer */
.cat-view-disclaimer {
  text-align: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto 60px;
}

/* Selection Cards Grid */
.bet-options-grid {
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
  margin: 50px 0; /* Updated: Top/Down Margins */
  flex-wrap: wrap;
}

.bet-option-card {
  border: none;
  border-radius: 12px; /* Slightly more rounded */
  background-color: #DDE0C5; /* Match Card Beige */
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: black; /* Default text black */
  transition: 0.3s;
  cursor: pointer;
  padding: 20px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.bet-option-card:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 8px 15px rgba(0,0,0,0.2); Removed dark hover effect */
  /* filter: brightness(1.05); */
}

.option-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  object-fit: contain;
  display: block;
  /* Ensure icon is black if it's an SVG */
  filter: brightness(0); 
}

.option-text {
  font-weight: 900;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  color: white; /* White Text */
  background-color: black; /* Black Pill */
  padding: 8px 25px;
  border-radius: 30px;
  display: inline-block;
  min-width: 140px;
}

/* Responsive */
/* Responsive */
@media (max-width: 500px) {
  .bet-options-grid {
    flex-direction: row; /* Keep row */
    flex-wrap: wrap; /* Allow wrapping */
    overflow-x: visible; /* No scroll */
    justify-content: space-between; /* Space out items */
    gap: 12px; /* Slightly larger gap */
    margin: 30px 0;
    padding-bottom: 0;
  }

  .bet-option-card {
    width: calc(50% - 6px); /* Fit 2 per row */
    min-width: unset;
    flex: 0 0 auto;
    max-width: none;
    height: 180px; /* Taller for better spacing */
    padding: 20px 10px; /* Vertical padding */
    justify-content: space-between; /* Push icon up, text down */
  }

  .option-icon {
    width: 50px; /* Larger icon */
    height: 50px;
    margin-bottom: 0; /* Remove margin, handled by space-between */
    margin-top: 10px; /* Push down slightly from top */
  }

  .option-text {
    font-size: 13px;
    padding: 10px 5px; /* Adjust padding */
    min-width: unset;
    width: 90%; /* Not full edge-to-edge */
    text-align: center; /* Explicitly center text */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
    max-width: 250px;
    height: 160px;
  }

  .option-icon {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
  }
}

/* --- EMPTY STATE --- */
.empty-state-box {
  max-width: 500px;
  width: 90% !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 60px 40px;
  background-color: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block !important; /* Back to block for text-align to work on inline children */
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state-icon i {
  font-size: 36px;
  color: white;
}

.empty-state-title {
  font-size: 24px;
  font-weight: 900;
  color: white;
  margin-bottom: 15px;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
}

.empty-state-text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}

.empty-state-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 10px auto !important;
  /* Removed align-self since parent is no longer flex */
  gap: 10px;
  background: var(--color-light-btn);
  color: black;
  padding: 15px 35px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s;
}

.empty-state-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(200, 216, 228, 0.3);
  color: black;
}

.empty-state-btn i {
  font-size: 16px;
}

@media (max-width: 600px) {
  .empty-state-box {
    padding: 40px 25px;
    margin: 40px auto;
  }

  .empty-state-title {
    font-size: 20px;
  }

  .empty-state-text {
    font-size: 14px;
  }
}

/* --- GATEWAY SELECTION PAGE --- */
.gateway-selection-wrapper {
  max-width: 1000px;
  margin: 60px auto;
  padding: 0 20px;
}

.gateway-page-title {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  color: white;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gateway-subtitle {
  text-align: center;
  font-size: 15px;
  color: #9ca3af;
  margin-bottom: 50px;
}

/* Country Selector Grid */
.country-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 60px;
}

.country-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s;
}

.country-option.selected {
  transform: scale(1.02);
}

.country-flag-box {
  background: var(--color-light-btn);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.flag-emoji {
  font-size: 28px;
}

.country-name {
  font-weight: 900;
  font-size: 14px;
  color: #000;
  letter-spacing: 1px;
}

.country-subscribe-btn {
  background: #0a1741;
  border: 2px solid rgba(200, 216, 228, 0.3);
  border-radius: 50px;
  padding: 15px 20px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
}

.country-subscribe-btn:hover {
  border-color: var(--color-light-btn);
  transform: translateY(-2px);
}

.country-option.selected .country-subscribe-btn {
  border-color: var(--color-light-btn);
  background: rgba(200, 216, 228, 0.1);
}

.btn-label {
  font-size: 13px;
  font-weight: 700;
}

.btn-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--color-light-btn);
}

/* Payment Gateways Section */
.payment-gateways-section {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gateways-title {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: white;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.gateways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
}

.gateway-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
}

.gateway-card:hover {
  border-color: var(--color-light-btn);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.gateway-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gateway-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.gateway-select-btn {
  background: var(--color-light-btn);
  color: black;
  border: none;
  border-radius: 50px;
  padding: 12px 25px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  width: 100%;
}

.gateway-select-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(200, 216, 228, 0.4);
}

/* Modal Styling */
.modal-content {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-title {
  color: white;
  font-weight: 900;
}

.modal-body {
  color: white;
}

.confirmation-details {
  padding: 20px 0;
}

.confirmation-details p {
  margin-bottom: 10px;
  color: #d1d5db;
}

.confirmation-details strong {
  color: white;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-primary {
  background: var(--color-light-btn);
  border: none;
  color: black;
  font-weight: 700;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .gateway-page-title {
    font-size: 24px;
  }

  .country-selector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .country-flag-box {
    padding: 15px;
  }

  .flag-emoji {
    font-size: 24px;
  }

  .country-name {
    font-size: 12px;
  }

  .gateways-grid {
    grid-template-columns: 1fr;
  }
}

/* --- PAYMENT PAGE STYLES --- */
.payment-page-wrapper {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.payment-page-title {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  color: white;
  margin-bottom: 40px;
  text-transform: uppercase;
}

.payment-info-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
}

.payment-card-header {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-card-header h5 {
  margin: 0;
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.payment-card-body {
  padding: 25px;
}

.payment-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.payment-info-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d1d5db;
}

.payment-info-list li:last-child {
  border-bottom: none;
}

.payment-info-list li span:first-child {
  font-weight: 500;
  color: #9ca3af;
}

.payment-info-list li span:last-child {
  font-weight: 700;
  color: white;
}

.payment-info-list li.total-row {
  background: rgba(200, 216, 228, 0.1);
  margin: 15px -25px -25px;
  padding: 20px 25px;
  border-radius: 0 0 12px 12px;
}

.payment-info-list li.total-row span:last-child {
  color: var(--color-light-btn);
  font-size: 18px;
}

.wallet-address-row {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 10px;
}

.wallet-address-row span:first-child {
  word-break: break-all;
  font-family: monospace;
  font-size: 13px;
  color: var(--color-light-btn) !important;
}

.copy-btn {
  background: var(--color-light-btn);
  color: black;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.copy-btn:hover {
  transform: translateY(-2px);
}

.qr-code-row {
  justify-content: center !important;
  padding: 20px 0 !important;
}

.qr-code-row img {
  max-width: 200px;
  border-radius: 8px;
}

.instruction-row {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 10px;
  padding-top: 20px !important;
}

.instruction-row span {
  color: #9ca3af !important;
  font-size: 14px;
  line-height: 1.6;
}

.payment-submit-btn {
  background: var(--color-light-btn);
  color: black;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.payment-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(200, 216, 228, 0.3);
}

/* Payment form styles */
.payment-card-body .form-group {
  margin-bottom: 20px;
}

.payment-card-body label {
  display: block;
  color: #d1d5db;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
}

.payment-card-body .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 12px 15px;
  border-radius: 8px;
}

.payment-card-body .form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--color-light-btn);
  outline: none;
  box-shadow: 0 0 0 3px rgba(200, 216, 228, 0.2);
}

/* Old card styles for online.blade.php compatibility */
.sp_site_card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.sp_site_card .card-header {
  background: rgba(255, 255, 255, 0.05);
  padding: 20px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp_site_card .card-header h5 {
  margin: 0;
  color: white;
  font-weight: 700;
}

.sp_site_card .card-body {
  padding: 25px;
}

.sp_site_card .card-footer {
  padding: 20px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sp_site_card .list-group {
  background: transparent;
  border: none;
}

.sp_site_card .list-group-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d1d5db;
  padding: 12px 0;
}

.sp_theme_btn {
  background: var(--color-light-btn);
  color: black;
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
}

.sp_theme_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(200, 216, 228, 0.4);
}

@media (max-width: 768px) {
  .payment-page-title {
    font-size: 22px;
  }
  
  .payment-card-body {
    padding: 20px;
  }
}

/* --- DATE PICKER MODAL --- */
.date-label-clickable {
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  padding: 5px 15px; 
}

/* Custom Calendar Modal */
.custom-calendar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.custom-calendar-modal {
  background: #1e2128;
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  color: #fff;
  overflow: hidden;
  padding-bottom: 20px;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px;
}

.calendar-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.close-calendar {
  cursor: pointer;
  font-size: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.close-calendar:hover {
  opacity: 1;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px 20px;
}

#currentMonthLabel {
  font-weight: 700;
  font-size: 16px;
}

.nav-arr {
  cursor: pointer;
  padding: 5px 10px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.nav-arr:hover {
  opacity: 1;
}

.calendar-grid-header, .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 10px;
  text-align: center;
}

.calendar-grid-header {
  background: #14171d;
  padding: 8px 10px;
  margin-bottom: 10px;
}

.calendar-grid-header span {
  font-size: 12px;
  font-weight: 500;
  color: #aaa;
}

.calendar-day {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  border-radius: 50%;
  transition: background 0.2s;
  margin: 3px auto;
}

.calendar-day:hover:not(.empty-day) {
  background: rgba(124, 153, 135, 0.2);
}

.calendar-day.empty-day {
  cursor: default;
}

.calendar-day.is-today {
  background: #7C9987;
  color: #000 !important;
}

.calendar-day.selected {
  background: #7C9987;
  color: #000 !important;
  box-shadow: 0 0 0 2px #fff inset;
}

.calendar-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
  padding: 0 20px;
}

.favorites-legend {
  font-size: 12px;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 8px;
  height: 3px;
  background: #7C9987;
  border-radius: 10px;
}

.btn-today {
  background: #7C9987;
  color: #000;
  border: none;
  padding: 10px 40px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
  width: auto;
  min-width: 120px;
}

.btn-today:hover {
  background: #8dab99;
  transform: translateY(-2px);
}

.date-label-clickable:hover {
  color: var(--color-green);
}

.date-picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}

.date-picker-modal.active {
  display: flex;
}

.date-picker-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
}

.date-picker-content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid #1a1f3d;
  border-radius: 16px;
  width: 90%;
  max-width: 350px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #1a1f3d;
}

.date-picker-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: white;
}

.date-picker-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 18px;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s;
}

.date-picker-close:hover {
  color: white;
}

.date-picker-body {
  padding: 25px 20px;
}

.date-picker-input {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  border: 1px solid #333;
  border-radius: 8px;
  background: #0a0f35;
  color: white;
  cursor: pointer;
}

.date-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.date-picker-footer {
  display: flex;
  gap: 10px;
  padding: 20px;
  border-top: 1px solid #1a1f3d;
}

.date-picker-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

.date-picker-btn.cancel {
  background: transparent;
  border: 1px solid #333;
  color: white;
}

.date-picker-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.date-picker-btn.confirm {
  background: var(--color-green);
  color: black;
}

.date-picker-btn.confirm:hover {
  background: #00cc6a;
  transform: translateY(-2px);
}
/* --- FOOTER CONTENT (ODDS, CODES, SOCIAL) --- */

.total-odds-text {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #DDE0C5; 
  margin: 30px 0 10px;
  text-transform: uppercase;
}

.tap-copy-text {
  text-align: center;
  color: #ccc;
  font-size: 14px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tap-copy-text i {
  font-size: 18px;
  color: #DDE0C5; /* Icon color */
}

/* The Beige Strip containing specific buttons */
.booking-codes-strip {
  background-color: #DDE0C5;
  border-radius: 8px; /* Slightly less rounded than 12px based on screenshot looks rectangular-ish */
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  width: 100%;
}

.booking-code-box {
    display: contents; /* Let buttons sit directly in the flex strip */
}

.booking-btn {
  background-color: #000;
  color: white;
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  font-size: 13px;
  font-weight: 700;
  min-width: 160px;
  justify-content: flex-start;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.booking-btn i {
  color: #fff;
}

.booking-btn img {
  width: 20px; 
  height: 20px;
  object-fit: contain;
}

/* Social Footer Section */
.follow-us-container {
  background-color: #DDE0C5;
  border-radius: 12px;
  padding: 12px 10px; /* Extremely reduced */
  text-align: center;
  color: #000;
  margin-top: 12px;
  margin-bottom: 12px;
}

.follow-us-title {
  font-size: 16px; /* Reduced further */
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.follow-us-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
}

.follow-us-icons a {
  color: #002D15; /* Dark Green like in screenshot */
  font-size: 28px;
  transition: transform 0.2s;
}

.follow-us-icons a:hover {
  transform: scale(1.1);
}

.follow-us-text {
  font-size: 13px; /* Reduced from 14px */
  line-height: 1.4;
  font-weight: 500;
  max-width: 400px;
  margin: 0 auto;
}
/* --- SUBSCRIPTION PLAN DESIGN --- */

.plans-section-wrapper {
  padding: 10px 20px 40px; /* Reduced top padding (was 40px) */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.sub-plan-card {
  background-color: #DDE0C5; 
  border-radius: 12px; /* Tighter radius */
  padding: 15px 12px; /* Extremely reduced */
  width: 100%;
  max-width: 280px; /* Extreme slim (was 320px/360px) */
  text-align: center;
  color: #000;
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub-plan-title {
  font-size: 16px; /* Reduced further */
  font-weight: 800;
  margin-bottom: 12px;
  color: #000;
  line-height: 1.2;
}

.sub-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  width: 100%;
  text-align: left;
  display: inline-block;
  max-width: 100%; 
}

.sub-plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px; /* Extremely tight */
  font-size: 12px; /* Reduced further */
  font-weight: 500;
  color: #000;
  white-space: nowrap; /* Single line on desktop too */
  overflow: hidden;
  text-overflow: ellipsis;
  justify-content: flex-start; /* Ensure left align */
}

.feature-check-icon {
  width: 18px; /* Smaller icon */
  height: 18px;
  background-color: #000;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-check-icon i {
  color: #fff;
  font-size: 8px;
}

.sub-plan-price {
  font-size: 20px; /* Reduced further */
  font-weight: 900;
  color: #000;
  margin-bottom: 12px;
}

.sub-plan-btn {
  background-color: #000;
  color: #fff !important;
  font-size: 13px; /* Reduced from 16px */
  font-weight: 700;
  text-transform: uppercase;
  padding: 12px 30px; /* Reduced from 18px 40px */
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  transition: transform 0.2s, background-color 0.2s;
  border: none;
  cursor: pointer;
}

.sub-plan-btn:hover {
  transform: scale(1.05);
  background-color: #222;
}

/* Mobile Responsiveness for Plans */
@media (max-width: 600px) {
  .sub-plan-card {
    padding: 20px 15px;
    max-width: 90%; 
    margin: 0 auto;
  }
  
  .sub-plan-title {
    font-size: 26px;
    margin-bottom: 20px;
  }
  
  .sub-plan-features li {
    font-size: 13px;
    gap: 8px;
    margin-bottom: 10px;
  }
  
  .sub-plan-price {
    font-size: 30px;
    margin-bottom: 20px;
  }
  
  .sub-plan-btn {
    padding: 15px 30px;
    font-size: 14px;
  }

  /* Booking Codes Mobile - Single Line Horizontal Scroll */
  .booking-codes-strip {
      flex-wrap: nowrap;
      overflow-x: auto;
      justify-content: flex-start;
      padding: 15px 10px;
      -webkit-overflow-scrolling: touch;
      gap: 10px;
      /* Center if single item/fits, Left-align scroll if overflow */
      width: fit-content;
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
  }
  
  .booking-btn {
      flex: 0 0 auto; /* Prevent shrinking */
      min-width: auto; /* Allow natural width based on content */
      padding: 10px 15px; /* Smaller padding */
      font-size: 12px;
  }
}
/* --- VIP CATEGORIES (SAGE GREEN GRID) --- */

.vip-categories-wrapper {
  margin: 30px auto;
  max-width: 600px;
  padding: 0 15px; /* Added padding to prevent edge touching on mobile */
}

/* Header - Using .section-title in HTML instead, but if we keep this class, style it similarly or remove. 
   Actually, the user said "same styling as HIGH RISK TIPS", which allows me to simply use the .section-title class in HTML. 
   I will remove the .vip-cat-header-title block from CSS or just leave it unused. */

/* Grid */
.vip-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Always 4 cols */
  gap: 10px;
}

/* Card */
.vip-cat-card {
  background-color: #7C9585; /* Muted Sage Green from screenshot */
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s;
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.vip-cat-card:hover {
  transform: translateY(-3px);
  background-color: #6a8274; /* Slightly darker sage */
}

.vip-cat-icon {
  font-size: 28px;
  color: #fff; /* White Icon */
  margin-bottom: 5px;
  width: 35px;
  height: 35px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* Force White for images */
}

.vip-cat-name {
  color: #fff; /* White Text */
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  text-transform: capitalize;
}

/* Responsive */
@media (max-width: 600px) {
  .vip-cat-grid {
    grid-template-columns: repeat(4, 1fr) !important; /* Force 4 columns on mobile */
    gap: 8px;
  }
  
  .vip-cat-icon {
      font-size: 20px;
      width: 25px;
      height: 25px;
  }
  
  .vip-cat-name {
      font-size: 9px;
  }
}

/* --- INFO PAGES REDESIGN (How to Pay, About, Contact) --- */

.info-page-dark-wrapper {
  background-color: #000000;
  color: #DDE0C5;
  min-height: 80vh;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Shared Header Elements */
.info-pill-header {
  background-color: #DDE0C5;
  color: #000;
  font-weight: 900;
  font-size: 24px;
  padding: 10px 40px;
  border-radius: 8px;
  display: inline-block;
  text-transform: uppercase;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.info-pill-header i {
  margin-right: 10px;
}

.info-subtitle {
  color: #ccc;
  font-size: 16px;
  margin-bottom: 50px;
  text-align: center;
  max-width: 600px;
}

/* HOW TO PAY GRID */
.htp-grid-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.htp-card-beep {
  background-color: #DDE0C5;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.htp-card-title {
  font-weight: 900;
  font-size: 20px;
  margin-bottom: 25px;
  text-transform: uppercase;
  color: #000;
}

.htp-inner-black {
  background-color: #000;
  color: #ccc;
  width: 100%;
  padding: 30px 20px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.8;
}

.htp-btn-small {
  background-color: #DDE0C5;
  color: #000;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 20px;
  font-size: 13px;
  text-decoration: none;
}

/* ABOUT US */
.about-icon-large {
  font-size: 50px;
  color: #DDE0C5;
  margin-bottom: 20px;
}

.about-text-content {
  max-width: 800px;
  text-align: center;
  font-size: 16px;
  line-height: 2;
  color: #ccc;
}

.about-text-content p {
  margin-bottom: 25px;
}

/* CONTACT US */
.contact-buttons-row {
  display: flex;
  gap: 20px;
  margin-bottom: 60px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-action-btn {
  background-color: #DDE0C5;
  color: #000;
  padding: 15px 30px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  min-width: 280px;
  transition: transform 0.2s;
}

.contact-action-btn:hover {
  transform: translateY(-2px);
}

.cnt-icon {
  font-size: 32px;
}

.cnt-text h4 {
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 5px 0;
}
.cnt-text span {
  font-size: 14px;
  font-weight: 500;
}

.advert-sponsorship-card {
  background-color: #7C9987; /* Sage Green */
  width: 100%;
  max-width: 700px;
  padding: 50px;
  border-radius: 20px;
  text-align: center;
  color: white;
}

.advert-title {
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 30px;
  text-transform: uppercase;
}

.advert-email {
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .htp-grid-system {
    grid-template-columns: 1fr;
  }
  
  .contact-buttons-row {
    flex-direction: column;
  }
  
  .info-pill-header {
    font-size: 18px;
    padding: 10px 25px;
  }

  .about-text-content {
    font-size: 14px;
  }
}

/* --- VIP Locked Rows Redesign --- */
.vip-locked-list-wrapper {
  max-width: 600px;
  margin: 0 auto 30px;
  border-radius: 8px;
  overflow: hidden;
}

.vip-locked-row {
  display: flex;
  margin-bottom: 2px;
  height: 50px;
  align-items: stretch;
  transition: transform 0.2s;
}
.vip-locked-row:hover {
  transform: scale(1.01);
}

.vip-locked-left {
  background-color: #7C9987 !important; /* Fixed Green */
  color: #fff !important; /* Fixed White */
  flex: 0 0 45%;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 12px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 13px;
}

.vlr-time {
  opacity: 0.9;
  font-weight: 400;
}

.vip-locked-right {
  background-color: #DDE0C5 !important; /* Fixed Beige */
  color: #000 !important; /* Fixed Black */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center; /* Centered content */
  gap: 10px; /* Space between text and lock */
  padding: 0 20px;
  font-weight: 700;
  font-size: 14px;
}

.vip-locked-right i {
  font-size: 16px;
  color: #000 !important;
}

.vip-locked-right span, 
.vip-locked-right i {
  animation: blink-animation 1.5s infinite ease-in-out;
}

@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

@media (max-width: 600px) {
  .vip-locked-left {
    flex: 0 0 50%;
    padding: 0 10px;
    font-size: 11px;
    gap: 6px;
  }
  .vip-locked-right {
    padding: 0 15px;
    font-size: 12px;
  }
}

/* --- Sidebar User Profile --- */
.sidebar-user-profile {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
}

.sidebar-user-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--btn-pill-bg);
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
}

.sidebar-user-label {
  font-size: 11px;
  opacity: 0.6;
  text-transform: uppercase;
  font-weight: 600;
}

.sidebar-user-name {
  font-size: 16px;
  font-weight: 800;
  color: white;
}

/* --- DOWNLOAD APP BANNER --- */
.download-app-banner {
  background-color: #DDE0C5;
  border-radius: 15px;
  padding: 20px 15px;
  text-align: center;
  color: #000000;
  margin: 12px 0;
}

.banner-promo-text {
  max-width: 800px;
  margin: 0 auto 12px;
  font-size: 11px; /* Extremely small */
  line-height: 1.3;
  font-weight: 500;
}

.banner-title {
  font-size: 16px; /* Further reduced */
  font-weight: 900;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.banner-store-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.banner-app-btn {
  height: 50px; /* Consistent height for SVG buttons */
  width: auto;
  transition: transform 0.2s;
}

.banner-app-btn:hover {
  transform: translateY(-2px);
}

.store-maintext {
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 600px) {
  .download-app-banner {
    padding: 25px 15px;
    border-radius: 15px;
  }
  
  .banner-promo-text {
    font-size: 12px;
    margin-bottom: 15px;
  }
  
  .banner-title {
    font-size: 18px; 
    margin-bottom: 20px;
  }

  .banner-store-buttons {
    flex-wrap: nowrap; /* Force one row */
    gap: 10px;
    width: 100%;
  }
  
  .banner-app-btn {
    height: 36px; /* Reduced for mobile */
  }
}

/* --- PAYMENT INFO COPY BUTTONS --- */
.copy-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-icon-btn {
    background: none;
    border: none;
    color: var(--color-light-btn);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.copy-icon-btn:hover {
    transform: scale(1.2);
    color: #fff;
}

.wallet-address-row .copy-btn {
    background: var(--color-light-btn);
    color: #000;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    margin-left: 10px;
    cursor: pointer;
}

/* Settings Redesign Styles */
.settings-page-wrapper {
  background: var(--bg-body);
  min-height: 100vh;
  padding: 40px 20px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-avatar-wrapper {
  width: 120px;
  height: 120px;
  position: relative;
  margin-bottom: 15px;
  cursor: pointer;
}

.settings-avatar-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #DDE0C5;
  background: #DDE0C5;
}

.settings-user-name {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 25px;
  color: var(--text-main);
  text-align: center;
}

.settings-pill {
  border-radius: 50px;
  padding: 15px 30px;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000 !important;
  text-transform: uppercase;
  min-height: 60px;
  width: 100%;
  max-width: 600px;
}

.settings-subscription-pill {
  background: #DDE0C5;
  margin-bottom: 25px;
}

.settings-label-pill {
  background: #DDE0C5;
  font-size: 14px;
}

.settings-data-pill {
  background: #7C9987;
  text-align: center;
}

.settings-action-btn {
  background: #DDE0C5;
  color: #000 !important;
  width: 100%;
  max-width: 600px;
  height: 70px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 30px;
  text-decoration: none;
  transition: opacity 0.2s;
  border: none;
}

.settings-action-btn:hover {
  opacity: 0.9;
}

.settings-card {
  background: #DDE0C5;
  padding: 50px 30px;
  border-radius: 30px;
  width: 100%;
  max-width: 480px;
  color: #000;
}

.settings-card form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.settings-input-pill, .settings-input-dark {
  background: #000;
  color: #fff !important;
  border: 1px solid #7C9987;
  border-radius: 50px;
  padding: 20px 30px;
  width: 100%;
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

.settings-input-pill::placeholder, .settings-input-dark::placeholder {
  color: rgba(255,255,255,0.6);
}

.settings-header-bar {
  background: #7C9987;
  padding: 18px;
  width: 100%;
  max-width: 700px;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 35px;
}

.settings-header-bar h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
  color: #DDE0C5;
  text-transform: uppercase;
}

.settings-text-block {
  background: #111;
  color: #fff;
  padding: 30px;
  border-radius: 15px;
  font-size: 15px;
  line-height: 1.6;
  width: 100%;
  max-width: 700px;
  margin-bottom: 30px;
  font-weight: 500;
}

.settings-qr-box {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

.settings-form-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
}

.settings-input-placeholder {
  height: 10px;
  visibility: hidden;
}

@media (max-width: 600px) {
    .settings-page-wrapper {
        padding: 30px 15px;
    }
    .settings-avatar-wrapper {
        width: 100px;
        height: 100px;
    }
    .settings-pill {
        padding: 12px 20px;
        font-size: 14px;
        min-height: 50px;
        margin-bottom: 10px;
    }
    .settings-subscription-pill {
        margin-bottom: 20px;
    }
    .settings-label-pill {
        margin-bottom: 2px !important;
        font-size: 12px;
    }
    .settings-data-pill {
        margin-bottom: 15px !important;
    }
    .settings-action-btn {
        height: 60px;
        font-size: 18px;
        margin-top: 20px;
    }
    .settings-card {
        padding: 35px 20px;
    }
    .settings-input-pill, .settings-input-dark {
        padding: 15px 20px;
        font-size: 14px;
    }
    .settings-header-bar {
        padding: 12px;
        margin-bottom: 25px;
    }
    .settings-header-bar h1 {
        font-size: 18px;
    }
    .settings-text-block {
        padding: 20px;
        font-size: 13px;
        margin-bottom: 20px;
    }
    .settings-qr-box {
        margin-bottom: 30px;
    }
}

/* Homepage App Popup */
.app-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.app-popup-overlay.active {
    display: flex;
    opacity: 1;
}

.app-popup-content {
    position: relative;
    max-width: 90%;
    width: 350px; /* Adjust based on image aspect ratio */
    text-align: center;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-popup-overlay.active .app-popup-content {
    transform: scale(1);
}

.app-popup-content img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    transition: transform 0.2s;
    display: block;
}

.app-popup-content img:hover {
    transform: scale(1.02);
}

.app-popup-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 32px;
    height: 32px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    line-height: 32px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.2s, background 0.2s;
}

.app-popup-close:hover {
    transform: scale(1.1);
    background: #f0f0f0;
}

/* --- VIP PLAN PICKER (mirrors the app's VIP Access screen) --- */
/* Cards stay sage in both themes (like the match cards); the selected plan
   flips to black with sage type. Mobile stacks pitch → plans → benefits →
   sticky CTA; wide screens split into info (left) and plan picker (right). */
.vp-section {
  --vp-sage: #DDE0C5;
  --vp-ink: #000000;
  --vp-muted: #4b5563;
  --vp-orange: #E07A1A;
  max-width: var(--width-content);
  margin: 0 auto 40px;
  padding: 0 15px;
  display: grid;
  gap: 22px;
  text-align: left;
}

/* Mobile: dissolve the columns so every block can be ordered like the app. */
.vp-col { display: contents; }
.vp-pitch { order: 1; }
.vp-plans-wrap { order: 2; }
.vp-benefits-wrap { order: 3; }
.vp-cta-wrap { order: 4; }

.vp-card {
  background: var(--vp-sage);
  color: var(--vp-ink);
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}
[data-theme="light"] .vp-card { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.12); }

.vp-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}
.vp-label::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--vp-sage);
}
[data-theme="light"] .vp-label::before { background: var(--vp-ink); }

/* Pitch */
.vp-pitch { padding: 20px; }
.vp-pitch-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.vp-crown {
  width: 56px; height: 56px; flex-shrink: 0;
  border-radius: 14px;
  background: var(--vp-ink);
  color: var(--vp-sage);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.vp-pitch-title { font-size: 19px; font-weight: 800; letter-spacing: 0.3px; color: var(--vp-ink); }
.vp-pitch-sub { font-size: 12.5px; font-weight: 600; letter-spacing: 0.4px; color: var(--vp-muted); margin-top: 4px; }
.vp-pitch-body { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: #1f2937; }

/* Plan tiles */
.vp-plans { display: flex; flex-direction: column; gap: 12px; }
.vp-plan { position: relative; display: block; cursor: pointer; }
.vp-plan input { position: absolute; opacity: 0; pointer-events: none; }
.vp-plan-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border-radius: 14px;
  background: var(--vp-sage);
  color: var(--vp-ink);
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
[data-theme="light"] .vp-plan-card { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); }
.vp-plan:hover .vp-plan-card { transform: translateY(-2px); }
.vp-plan:active .vp-plan-card { transform: scale(0.985); }
.vp-plan input:focus-visible + .vp-plan-card { outline: 3px solid var(--vp-orange); outline-offset: 2px; }

.vp-plan input:checked + .vp-plan-card {
  background: var(--vp-ink);
  color: var(--vp-sage);
  border-color: var(--vp-sage);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  animation: vp-pop 0.45s ease-out;
}
[data-theme="light"] .vp-plan input:checked + .vp-plan-card { border-color: var(--vp-ink); }

.vp-radio {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  border: 2.5px solid var(--vp-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--vp-ink);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.vp-radio i { transform: scale(0); transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.vp-plan input:checked + .vp-plan-card .vp-radio { background: var(--vp-sage); border-color: var(--vp-sage); }
.vp-plan input:checked + .vp-plan-card .vp-radio i { transform: scale(1); }

.vp-plan-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vp-plan-name { font-size: 16px; font-weight: 700; }
.vp-plan-billed { font-size: 12px; opacity: 0.7; }
.vp-plan-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.vp-price { font-size: 19px; font-weight: 800; white-space: nowrap; }
.vp-save { font-size: 11.5px; font-weight: 700; color: #2f6b2a; white-space: nowrap; }
.vp-plan input:checked + .vp-plan-card .vp-save { color: var(--vp-sage); opacity: 0.8; }

.vp-plan-card.has-badge { padding-top: 22px; }
.vp-badge {
  position: absolute;
  top: -2px; right: -2px;
  padding: 4px 10px;
  border-radius: 0 13px 0 10px;
  background: var(--vp-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

@keyframes vp-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

/* Benefits */
.vp-benefits { list-style: none; margin: 0; padding: 6px 18px; }
.vp-benefits li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-size: 14.5px; line-height: 1.35;
  color: var(--vp-ink);
}
.vp-benefits li + li { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.vp-tick {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--vp-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}

/* CTA: sticks to the bottom of the viewport while the picker is on screen. */
.vp-cta-wrap {
  position: static;
  z-index: 5;
}
.vp-cta {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 2px solid var(--vp-ink);
  border-radius: 14px;
  background: var(--vp-sage);
  color: var(--vp-ink);
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease, opacity 0.2s ease;
}
[data-theme="light"] .vp-cta { background: var(--vp-ink); color: var(--vp-sage); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2); }
.vp-cta:hover { transform: translateY(-1px); }
.vp-cta:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.vp-cta:not(:disabled)::after {
  content: "";
  position: absolute;
  top: -50%; left: -30%;
  width: 20%; height: 200%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.35), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: vp-sheen 6.4s ease-in-out infinite;
}
@keyframes vp-sheen {
  0%, 30% { left: -30%; }
  55%, 100% { left: 130%; }
}
.vp-legal {
  margin: 12px 8px 0;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}
.vp-legal a { color: var(--text-main); font-weight: 600; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .vp-plan-card, .vp-radio i, .vp-cta { transition: none; }
  .vp-plan input:checked + .vp-plan-card { animation: none; }
  .vp-cta::after { display: none; }
}

@media (max-width: 400px) {
  .vp-plan-card { padding: 11px 12px; gap: 10px; }
  .vp-plan-card.has-badge { padding-top: 20px; }
  .vp-plan-name { font-size: 15px; }
  .vp-price { font-size: 17px; }
  .vp-cta { font-size: 15px; }
}

.free-tips-app-cta {
  margin: 18px 0;
  padding: 20px;
  border: 1px solid rgba(221, 224, 197, 0.35);
  border-radius: 16px;
  background: var(--bg-match-card);
  color: var(--text-match-card);
  text-align: center;
}
.free-tips-app-cta p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.free-tips-app-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 13px 18px;
  border-radius: 12px;
  background: #000;
  color: #dde0c5;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

/* Wide screens: info on the left, picker + CTA on the right. */
@media (min-width: 900px) {
  .vp-section {
    max-width: 1100px;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
  }
  .vp-col { display: flex; flex-direction: column; gap: 22px; }
  .vp-cta-wrap { position: static; }
}