/* --- 1. Основные глобальные стили и задний фон --- */
:root {
  --bg-deep: #0a1526;
  --bg-card: #0d1e36;
  --accent-blue: #0088cc;
  --accent-cyan: #00b4ff;
  --accent-green: #28a745;
  --accent-red-start: #ff3344;
  --accent-red-end: #cc0011;
  --text-main: #ffffff;
  --text-secondary: #e2ecf8;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-deep);
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(0, 136, 204, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(0, 180, 255, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #0e1e38 0%, #060c17 100%);
  background-attachment: fixed;
}

/* --- 2. Стилизация блоков .about-wrap и контентных дивов --- */
.about-wrap {
  background: var(--bg-card) !important;
  border: 1px solid var(--accent-blue) !important;
  border-radius: 14px !important;
  padding: 35px !important;
  margin: 30px auto !important;
  max-width: 900px !important;
  width: 100% !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 
              0 0 15px rgba(0, 136, 204, 0.25) !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
}

/* Верхняя неоновая полоса 1xBet */
.about-wrap::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0088cc 0%, #00b4ff 50%, #28a745 100%) !important;
}

/* --- 3. Центрирование и стилизация блока .booking-content --- */
.booking-content {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  text-align: center !important;
  max-width: 900px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- 4. Заголовки и Читаемый Текст --- */
.about-wrap h1, 
.about-wrap h2, 
.about-wrap h3, 
.about-wrap h4 {
  color: var(--text-main) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: 20px !important;
  margin-bottom: 15px !important;
  background: linear-gradient(90deg, #ffffff 30%, #33c4ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.about-wrap,
.about-wrap p, 
.about-wrap div, 
.about-wrap span, 
.about-wrap li {
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* Обычные текстовые ссылки */
.about-wrap p a,
p a {
  display: inline !important;
  color: var(--accent-cyan) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(0, 180, 255, 0.6) !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.about-wrap p a:hover,
p a:hover {
  color: #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
}

/* --- 5. Выравнивание и Центрирование ВСЕХ кнопок --- */
.about-wrap .btn-group,
.about-wrap div:has(> a),
.about-wrap div:has(> button:not(.navbar-toggle)) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 20px auto !important;
  width: 100% !important;
  text-align: center !important;
}

/* Стандартная синяя кнопка (1xBet Blue) — scoped away from .navbar-toggle,
   which is a fixed-size icon button, not a CTA */
.about-wrap a.btn,
.about-wrap button:not(.navbar-toggle),
a[class*="btn"],
button:not(.navbar-toggle) {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 15px auto !important;
  text-align: center !important;
  
  min-width: 240px !important;
  max-width: 90% !important;
  padding: 14px 28px !important;
  
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  text-decoration: none !important;
  
  color: #ffffff !important;
  background: linear-gradient(180deg, #00aaff 0%, #0077c8 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.25s ease-in-out !important;
}

.about-wrap a.btn:hover,
.about-wrap button:not(.navbar-toggle):hover,
a[class*="btn"]:hover,
button:not(.navbar-toggle):hover {
  background: linear-gradient(180deg, #1ab3ff 0%, #0088cc 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 180, 255, 0.6) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* --- 6. Красная кнопка (.btn.btn-red) --- */
.btn.btn-red,
a.btn.btn-red,
button.btn.btn-red {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 15px auto !important;
  text-align: center !important;
  
  min-width: 240px !important;
  max-width: 90% !important;
  padding: 14px 28px !important;
  
  color: #ffffff !important;
  background: linear-gradient(180deg, var(--accent-red-start) 0%, var(--accent-red-end) 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 15px rgba(204, 0, 17, 0.4) !important;
}

.btn.btn-red:hover,
a.btn.btn-red:hover,
button.btn.btn-red:hover {
  background: linear-gradient(180deg, #ff4d5e 0%, #e60014 100%) !important;
  box-shadow: 0 6px 20px rgba(255, 51, 68, 0.6) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* ============ 6b. IN-CONTENT CTA-БЛОК (.cta-inline) ============
   The CTA buttons used to live in a standalone <section class="booking">
   floating between the header and the article — visually orphaned. They
   are now placed inside the content card (.about-wrap / .contentinner),
   right after the paragraph they follow logically, wrapped in
   `.booking-content.cta-inline`. This layer:
     - contains the row to the text column width;
     - gives it real top/bottom breathing room + a faint hairline so it
       reads as a deliberate CTA panel, not loose buttons;
     - keeps one shared button system (colour is the only difference);
     - stacks to full-width on phones with no overflow.
   The base template (style.css) still tries to give .booking-content a
   hard `padding-right: 400px`, `.booking-content a { margin-right: 40px }`
   and `.btn { padding: 15px 80px }`; every rule here overrides that. */

/* the CTA panel: a contained band inside the content flow */
.about-wrap .cta-inline,
.contentinner .cta-inline,
.cta-inline.cta-inline {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 14px !important;

  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 26px auto !important;
  padding: 20px 20px !important;
  min-height: 0 !important;
  text-align: center !important;

  /* subtle tie to the surrounding card: faint wash + neon hairline on top */
  background: linear-gradient(180deg, rgba(0, 180, 255, 0.06) 0%, rgba(0, 180, 255, 0.02) 100%) !important;
  border: 1px solid rgba(0, 180, 255, 0.16) !important;
  border-radius: 14px !important;
  position: relative !important;
}
.about-wrap .cta-inline::before,
.contentinner .cta-inline::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  top: -1px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.55), transparent) !important;
}

/* tighten the gap where the panel butts against a heading right after it */
.about-wrap .cta-inline + h2,
.about-wrap .cta-inline + h3 {
  margin-top: 10px !important;
}

/* the CTAs themselves — one shared visual system, colour is the only
   thing that differs between the two. Overrides section 5's generic
   `min-width: 240px` / `margin: 15px auto` and style.css `.btn` padding. */
.cta-inline > a.btn {
  flex: 1 1 240px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;               /* <- lets it shrink on phones */
  max-width: 320px !important;
  margin: 0 !important;
  padding: 15px 26px !important;

  font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* when only ONE CTA is present (nested block on qeydiyyat page),
   don't let it stretch full width — keep it button-sized */
.cta-inline > a.btn:only-child {
  flex: 0 1 300px !important;
}

/* blue CTA (1xBet Qeydiyyat / .btn-white in markup) */
.cta-inline > a.btn.btn-white {
  background: linear-gradient(180deg, #00b4ff 0%, #0077c8 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(0, 136, 204, 0.55) !important;
}
.cta-inline > a.btn.btn-white:hover,
.cta-inline > a.btn.btn-white:focus {
  background: linear-gradient(180deg, #1ec1ff 0%, #0088cc 100%) !important;
  box-shadow: 0 10px 24px -4px rgba(0, 180, 255, 0.65) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

/* red CTA (1xBet Giriş / .btn-red in markup) */
.cta-inline > a.btn.btn-red {
  background: linear-gradient(180deg, var(--accent-red-start) 0%, var(--accent-red-end) 100%) !important;
  box-shadow: 0 6px 18px -4px rgba(204, 0, 17, 0.5) !important;
}
.cta-inline > a.btn.btn-red:hover,
.cta-inline > a.btn.btn-red:focus {
  background: linear-gradient(180deg, #ff4d5e 0%, #e60014 100%) !important;
  box-shadow: 0 10px 24px -4px rgba(255, 51, 68, 0.6) !important;
  transform: translateY(-2px) !important;
  color: #ffffff !important;
}

.cta-inline > a.btn:active {
  transform: translateY(0) scale(0.985) !important;
}

/* ---- phones: stack, go full-width, never overflow ---- */
@media (max-width: 560px) {
  .about-wrap .cta-inline,
  .contentinner .cta-inline,
  .cta-inline.cta-inline {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    max-width: 100% !important;
    margin: 22px auto !important;
    padding: 16px 14px !important;
  }
  .cta-inline > a.btn,
  .cta-inline > a.btn:only-child {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 16px !important;
    font-size: 14.5px !important;
    letter-spacing: 0.4px !important;
    white-space: normal !important;      /* wrap long label instead of clipping */
  }
}

/* very narrow phones (<=360px): trim card + panel padding so the button
   still has room, and never overflow */
@media (max-width: 360px) {
  .about-wrap { padding: 24px 15px !important; }
  .about-wrap .cta-inline,
  .contentinner .cta-inline,
  .cta-inline.cta-inline { padding: 14px 12px !important; }
  .cta-inline > a.btn { font-size: 14px !important; }
}

/* ====================== 7. HEADER ======================
   The template's own header CSS (style.css) ships a working
   .navbar-toggle / .nav-menu system. This layer re-skins it in the
   site's navy/cyan palette, turns the absolutely-positioned "hero
   overlay" bar into a proper sticky header, and rebuilds the mobile
   layout so the brand + burger stay aligned and the open menu keeps
   a visible, tappable header on top of it. */
:root {
  --hdr-h: 64px;          /* mobile header height */
  --hdr-h-lg: 68px;       /* desktop header height */
}

.header-main {
  position: relative !important;
  z-index: 1000 !important;
}

.header-main .header-lower {
  position: sticky !important;
  top: 0 !important;
  transform: none !important;
  /* solid (not translucent+blurred) on purpose: backdrop-filter creates a
     CSS containing block for descendants, which breaks the fixed-position
     full-screen .nav-menu overlay. Keep this layer filter-free. */
  background: linear-gradient(180deg, #060e1b 0%, #0a1526 100%) !important;
  border-bottom: 1px solid rgba(0, 180, 255, 0.22) !important;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.7) !important;
  z-index: 1000 !important;                 /* stays above the open overlay */
}
.header-main .header-lower::after {
  content: "" !important;
  position: absolute !important;
  inset-inline: 0 !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 180, 255, 0.7), transparent) !important;
}

.header-main .navbar {
  /* match the content .container exactly: same 1170px cap + 15px gutters,
     so the header edges line up with the page grid instead of drifting */
  width: 100% !important;
  max-width: 1170px !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: var(--hdr-h) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* brand mark (no logo image on this build — a text wordmark).
   NOTE: the base template sets html{font-size:10px}, so rem here is
   0.625x — brand sizing is in px on purpose to stay predictable. */
.header-main .brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
.header-main .brand-mark span {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue)) !important;
  box-shadow: 0 6px 16px -6px rgba(0, 180, 255, 0.7) !important;
  flex: none !important;
}

/* burger button — reuses the template's .navbar-toggle / .icon-bar markup */
.header-main .navbar-toggle {
  display: none !important;                 /* shown only <992px (rule below) */
  width: 42px !important;
  height: 42px !important;
  margin: 0 0 0 auto !important;            /* pushes itself to the far end */
  padding: 0 !important;
  border: 1px solid rgba(0, 180, 255, 0.35) !important;
  border-radius: 11px !important;
  background: rgba(0, 180, 255, 0.10) !important;
  transition: background 0.18s ease, transform 0.12s ease, border-color 0.18s ease !important;
  float: none !important;
  flex: none !important;
  position: relative !important;
  z-index: 3 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.header-main .navbar-toggle:hover {
  background: rgba(0, 180, 255, 0.2) !important;
  border-color: rgba(0, 180, 255, 0.55) !important;
}
.header-main .navbar-toggle:active { transform: scale(0.94) !important; }
.header-main .navbar-toggle.is-active {
  background: rgba(0, 180, 255, 0.18) !important;
  border-color: rgba(0, 180, 255, 0.55) !important;
}
/* rebuild the icon geometry from scratch: three 18px bars, 5px apart,
   centred in the 42px box; middle bar hides + outer bars cross on .is-active */
.header-main .navbar-toggle .icon-bar {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 2px !important;
  margin: -1px 0 0 -9px !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  transition: background 0.12s ease !important;
}
.header-main .navbar-toggle .icon-bar:before,
.header-main .navbar-toggle .icon-bar:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  transition: transform 0.22s ease !important;
}
.header-main .navbar-toggle .icon-bar:before { top: -6px !important; bottom: auto !important; }
.header-main .navbar-toggle .icon-bar:after  { top: 6px !important; bottom: auto !important; }
.header-main .navbar-toggle.is-active .icon-bar { background: transparent !important; }
.header-main .navbar-toggle.is-active .icon-bar:before {
  top: -6px !important;
  transform: translateY(6px) rotate(45deg) !important;
}
.header-main .navbar-toggle.is-active .icon-bar:after {
  top: 6px !important;
  transform: translateY(-6px) rotate(-45deg) !important;
}

.header-main .menubar { float: none !important; padding: 0 !important; }

.header-main nav ul li a {
  color: var(--text-secondary) !important;
  font-family: 'Open Sans', sans-serif !important;
  transition: color 0.2s ease !important;
}
.header-main nav ul li a:hover,
.header-main nav ul li a:focus { color: #ffffff !important; }
.header-main nav ul li a:after { background-color: var(--accent-cyan) !important; }

/* tablet range: keep brand + burger from drifting to the extreme edges */
@media (min-width: 620px) and (max-width: 991px) {
  .header-main .navbar { max-width: 600px !important; }
}

/* ---------- desktop nav (>=992px) ---------- */
@media (min-width: 992px) {
  .header-main .navbar { min-height: var(--hdr-h-lg) !important; padding: 0 15px !important; }
  .header-main .brand-mark { font-size: 21px !important; }
  .header-main .brand-mark span { width: 36px !important; height: 36px !important; font-size: 13.5px !important; }

  /* menu block: sit flush to the right container edge, opposite the brand.
     The template sets `.nav-menu { width: 100% }` at >=992px — that's what
     squashed the wordmark to zero width; override it to shrink-wrap. */
  .header-main .nav-menu {
    background: transparent !important;
    isolation: auto !important;
    position: static !important;
    width: auto !important;
    margin-left: auto !important;
    /* shrink-wrap the menu, but never let it collapse narrower than its
       own row — otherwise .navbar-nav overflows left onto the wordmark */
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .header-main .nav-menu > ul,
  .header-main .navbar-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  .header-main .navbar-nav > li { flex: 0 0 auto !important; }
  .header-main .navbar-nav > li {
    float: none !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .header-main nav ul li a {
    display: block !important;
    padding: 22px 14px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }
}

/* keep the header container locked to the SAME responsive steps as the
   template's .container so their left/right edges always line up */
@media (min-width: 768px) and (max-width: 991px) {
  .header-main .navbar { max-width: 750px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-main .navbar { max-width: 970px !important; }
  /* narrower desktop: tighten the nav so all six items + wordmark fit on
     one row without the first link riding over the brand */
  .header-main nav ul li a {
    padding: 22px 9px !important;
    font-size: 13.5px !important;
    letter-spacing: -0.005em !important;
  }
  .header-main .nav-menu > ul,
  .header-main .navbar-nav { gap: 2px !important; }
}
/* mid desktop: a touch of tightening so it stays comfortable */
@media (min-width: 1200px) and (max-width: 1319px) {
  .header-main nav ul li a { padding: 22px 11px !important; font-size: 14px !important; }
}
@media (min-width: 1200px) {
  .header-main .navbar { max-width: 1170px !important; }
}

/* ---------- mobile nav / overlay (<=991px) ---------- */
@media (max-width: 991px) {
  .header-main .navbar-toggle { display: inline-flex !important; }

  .header-main .nav-menu {
    /* full-screen sheet that starts BELOW the sticky header, so the brand
       and the burger (now an X) stay visible and tappable while it's open */
    position: fixed !important;
    top: var(--hdr-h) !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    /* fully opaque (no alpha) so page content can never show through */
    background: rgb(9, 16, 28) !important;
    isolation: isolate !important;
    z-index: 900 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateY(-8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease !important;
  }
  .header-main .nav-menu.open-nav {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    bottom: 0 !important;
  }

  .header-main .nav-menu > ul,
  .header-main .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    padding: 28px 20px 40px !important;
    margin: 0 !important;
    opacity: 1 !important;
  }
  .header-main .nav-menu li {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    float: none !important;
  }
  .header-main .nav-menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: #eaf2fb !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid rgba(0, 180, 255, 0.18) !important;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
  }
  .header-main .nav-menu li a:hover,
  .header-main .nav-menu li a:focus,
  .header-main .nav-menu li a:active {
    background: rgba(0, 180, 255, 0.16) !important;
    border-color: rgba(0, 180, 255, 0.45) !important;
    color: #ffffff !important;
  }
  /* the template's decorative hover underline spans have no place in the sheet */
  .header-main .nav-menu li a > span { display: none !important; }

  /* lock body scroll behind the open sheet */
  body.nav-open { overflow: hidden !important; }
}