/* ============================================================
   Mostbet Colombia — Midnight Premium custom design layer
   Gold + Deep Blue palette, Sora/Inter typography, glassmorphism
   ============================================================ */

:root{
  --font-display: 'Sora', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gold-1: #FFB800;
  --gold-2: #FF6B35;
  --gold-soft: rgba(255,184,0,.15);
  --blue-soft: rgba(77,163,255,.15);

  --glass-bg:     rgba(255,255,255,.035);
  --glass-bg-hi:  rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.08);
}

/* ----- Typography ----- */
body,
input, textarea, select, button{
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.title, .heading, .wp-block-heading,
.welcome-section .title,
.lwptoc_header b,
.lwptoc_item_label{
  font-family: var(--font-display);
  letter-spacing: -0.012em;
  font-weight: 700;
}
h1{ font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

/* Hero H1 — gradient text */
.welcome-section h1{
  background: linear-gradient(135deg, #FFD86B 0%, #FFB800 40%, #FF6B35 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Numbers / amounts / odds — tabular figures */
.wp-block-table td, .wp-block-table th{
  font-variant-numeric: tabular-nums;
}

/* ----- Body backdrop with subtle pattern ----- */
body{
  background:
    radial-gradient(ellipse 1200px 800px at 20% 0%, rgba(77,163,255,.08), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 80% 100%, rgba(255,184,0,.05), transparent 55%),
    #0a1628;
  background-attachment: fixed;
}

/* ----- Hero section: override bright-blue bundle bg with dark glass + pattern ----- */
.welcome-section{
  position: relative;
  isolation: isolate;
  /* Override the bundle's bright --theme-color-secondary background */
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse 60% 80% at 18% 30%, rgba(255,184,0,.10), transparent 60%),
    radial-gradient(ellipse 70% 90% at 85% 75%, rgba(77,163,255,.14), transparent 60%),
    linear-gradient(135deg, #11203a 0%, #0d1a30 50%, #0a1628 100%) !important;
  border: 1px solid rgba(255,184,0,.18);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(77,163,255,.06),
    0 20px 60px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.05);
  padding: 32px !important;
  overflow: hidden;
}
/* Subtle diagonal weave on top of hero */
.welcome-section::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(45deg, rgba(255,184,0,.018) 0 1px, transparent 1px 24px);
  pointer-events: none;
  border-radius: 20px;
}
/* Glow rim accents */
.welcome-section::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,184,0,.12), transparent 25%),
    radial-gradient(circle at 100% 100%, rgba(77,163,255,.10), transparent 30%);
  pointer-events: none;
  border-radius: 20px;
  mix-blend-mode: screen;
}
/* Make sure inner content stacks above pseudo-elements */
.welcome-section > *{ position: relative; z-index: 1; }

/* Hero description text — keep white on dark */
.welcome-section .description,
.welcome-section .description p{
  color: #EAF0FA !important;
}

/* ----- Glassmorphism for content sections ----- */
.wp-block-hc-alternate-group-section{
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 28px;
  margin: 24px 0;
  position: relative;
  overflow: hidden;
}
/* Subtle gradient border ring */
.wp-block-hc-alternate-group-section::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,184,0,.35), rgba(77,163,255,.18) 50%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: .55;
}
/* Nested h3-sections inside h2 sections — quieter style */
.wp-block-hc-alternate-group-section .wp-block-hc-alternate-group-section{
  background: var(--glass-bg-hi);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 16px 0;
}
.wp-block-hc-alternate-group-section .wp-block-hc-alternate-group-section::before{
  display: none;
}

/* ----- Tables ----- */
.wp-block-table table{
  background: rgba(10,22,40,.55);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,184,0,.15);
  border-collapse: separate !important;
  border-spacing: 0;
}
.wp-block-table thead th{
  background: linear-gradient(135deg, rgba(255,184,0,.18), rgba(255,107,53,.10)) !important;
  color: var(--gold-1) !important;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .85em;
  padding: 14px 12px !important;
  border-bottom: 1px solid rgba(255,184,0,.3) !important;
}
.wp-block-table tbody td{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  padding: 12px !important;
}
.wp-block-table tbody tr:last-child td{ border-bottom: none !important; }
.wp-block-table tbody tr:hover td{
  background: rgba(255,184,0,.04);
}

/* ----- TOC styling ----- */
.lwptoc{
  background: var(--glass-bg) !important;
  border: 1px solid rgba(255,184,0,.22) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px 20px !important;
}
.lwptoc_header{
  color: var(--gold-1) !important;
}
.lwptoc_item a{
  color: #EAF0FA !important;
  transition: color .15s ease;
}
.lwptoc_item a:hover{
  color: var(--gold-1) !important;
}

/* ----- Buttons: gradient gold + glow ----- */
.btn.accent,
a.btn.accent,
.btn.accent.fn_link_href{
  background: linear-gradient(135deg, #FFD86B 0%, #FFB800 50%, #FF6B35 100%) !important;
  border: none !important;
  color: #0a1628 !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  border-radius: 10px;
  box-shadow: 0 0 24px rgba(255,184,0,.28), 0 4px 14px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn.accent:hover,
a.btn.accent:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(255,184,0,.5), 0 8px 22px rgba(0,0,0,.35);
  filter: brightness(1.06);
}
.btn.accent:active,
a.btn.accent:active{
  transform: translateY(0);
}

/* Secondary (white) button — golden text */
.btn.secondary,
a.btn.secondary{
  background: #ffffff !important;
  color: #C58200 !important;
  font-weight: 700 !important;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.secondary:hover,
a.btn.secondary:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
}

/* Download (google_play / app_store) accent buttons */
.btn.google_play.accent,
.btn.app_store.accent{
  background: linear-gradient(135deg, #1A3458 0%, #0f1f36 100%) !important;
  color: #EAF0FA !important;
  border: 1px solid rgba(255,184,0,.3) !important;
  box-shadow: 0 0 18px rgba(255,184,0,.12);
}
.btn.google_play.accent:hover,
.btn.app_store.accent:hover{
  border-color: rgba(255,184,0,.6) !important;
  box-shadow: 0 0 24px rgba(255,184,0,.25);
}

/* ----- Links ----- */
.content-block a,
.welcome-section a,
.faq-section a{
  color: var(--gold-1);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,184,0,.4);
  transition: color .15s ease, border-color .15s ease;
}
.content-block a:hover,
.welcome-section a:hover,
.faq-section a:hover{
  color: #FFD86B;
  border-bottom-color: rgba(255,184,0,.8);
}

/* ----- Header refinement ----- */
.header{
  background: linear-gradient(180deg, #122849 0%, #0f1f36 100%);
  border-bottom: 1px solid rgba(255,184,0,.18);
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
}
/* Sub-menu bar (Pagos/Bonos/App/Aviator) */
.desktop_menu_container,
.mobile_menu_container{
  background: rgba(10,22,40,.65);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
.primary_menu_desktop_ver .menu-item.current-menu-item > a,
.primary_menu_mobile_ver .menu-item.current-menu-item > a{
  color: var(--gold-1) !important;
  background: linear-gradient(135deg, rgba(255,184,0,.18), rgba(255,107,53,.08));
  border-radius: 8px;
}
.primary_menu_desktop_ver .menu-item > a:hover,
.primary_menu_mobile_ver .menu-item > a:hover{
  color: var(--gold-1) !important;
}

/* ----- FAQ items — interactive ----- */
.faq-section .item{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 4px 18px;
  margin-bottom: 10px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.faq-section .item:hover{
  border-color: rgba(255,184,0,.4);
  background: var(--glass-bg-hi);
  transform: translateX(2px);
}
.faq-section .faq_question{
  cursor: pointer;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-section .faq_question > div[itemprop="name"]{
  font-family: var(--font-display);
  font-weight: 600;
  color: #EAF0FA;
}
.faq-section .faq_arrow{
  color: var(--gold-1);
  transition: transform .2s ease;
}

/* ----- Footer ----- */
.footer{
  background: linear-gradient(180deg, #0f1f36 0%, #08111f 100%);
  border-top: 1px solid rgba(255,184,0,.12);
  margin-top: 60px;
}
.footer .heading{
  color: var(--gold-1);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85em;
}
.footer a:hover{
  color: var(--gold-1) !important;
}

/* ----- Welcome section image — soft glow ----- */
.welcome-section .image img,
.media img{
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(255,184,0,.15),
    0 20px 50px rgba(0,0,0,.45),
    0 0 80px rgba(255,184,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.welcome-section .image img:hover,
.media img:hover{
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,184,0,.3),
    0 24px 60px rgba(0,0,0,.5),
    0 0 100px rgba(255,184,0,.12);
}

/* ----- Breadcrumbs ----- */
.breadcrumbs{
  color: rgba(234,240,250,.6);
  font-size: .9em;
}
.breadcrumbs a{
  color: var(--gold-1);
  border-bottom: none;
}

/* ----- Lists ----- */
.wp-block-list li{
  line-height: 1.7;
}
.wp-block-list li strong{
  color: var(--gold-1);
}

/* ----- Selection ----- */
::selection{
  background: rgba(255,184,0,.35);
  color: #0a1628;
}

/* ----- Scroll-to-top button accent ----- */
#wpfront-scroll-top-container img{
  filter: drop-shadow(0 0 12px rgba(255,184,0,.4));
}

/* ----- Responsive niceties ----- */
@media (max-width: 768px){
  .wp-block-hc-alternate-group-section{ padding: 20px; border-radius: 14px; }
  .welcome-section::before{ inset: -20px -10px; }
  h1{ font-size: 1.6rem; }
}