/* =============================================================
   ZEVIVO MOBILE CSS  —  v35
   All rules scoped to max-width: 991px (tablet/mobile) or
   max-width: 768px (phone only).
   DOES NOT touch any desktop (≥992px) layout.
   ============================================================= */

/* ---------------------------------------------------------------
   1. UNIFIED HEADER — mobile overrides
   The header-normal is now always visible.
   On mobile we collapse the top bar and show hamburger.
--------------------------------------------------------------- */
@media (max-width: 991px) {

  /* Keep header visible and styled */
  .header.header-normal {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1020;
    background: var(--color-dark-deep, #0d1b22) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
  }

  /* Hide the top bar (login / language) on mobile */
  .header-top {
    display: none !important;
  }

  /* Header main: logo left, hamburger right */
  .header-main {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
  }

  /* Logo always white on dark mobile header */
  .header.header-normal .logo-white { display: block !important; }
  .header.header-normal .logo-dark  { display: none  !important; }

  /* Logo size */
  .logo-container .logo {
    height: 40px !important;
    width: auto;
  }

  /* Hide desktop nav */
  .main-nav { display: none !important; }

  /* Show hamburger */
  .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1030;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    transition: all .3s ease;
    border-radius: 2px;
  }

  /* Hamburger → X animation when active */
  .mobile-menu-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Page body offset for fixed header */
  /* LAYOUT SYSTEM: padding-top = var(--header-height-mobile) from layout-system.css */
  /* TRANSITION: was 68px (magic number) — now token-driven */
  body {
    padding-top: var(--header-height-mobile, 68px);
  }

  /* Hero sections — remove top margin that was for old header-mobile */
  .hero-carousel { margin-top: 0 !important; }
}

/* ---------------------------------------------------------------
   2. MOBILE DRAWER
--------------------------------------------------------------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 360px;
  height: 100%;
  background: #0d1b22;
  z-index: 1050;
  overflow-y: auto;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
.mobile-drawer.is-open {
  right: 0;
}

.mobile-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1040;
  backdrop-filter: blur(2px);
}
.mobile-drawer-overlay.is-visible {
  display: block;
}

.mobile-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 32px;
}

/* Drawer header row */
.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-drawer-logo img {
  height: 36px;
  width: auto;
}

/* Close button */
.mobile-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  position: relative;
  width: 32px;
  height: 32px;
}
.mobile-drawer-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.mobile-drawer-close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-drawer-close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Drawer nav sections */
.mobile-drawer-nav {
  flex: 1;
  padding: 8px 0;
}

.mobile-nav-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-primary, 'Barlow', sans-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 16px 20px;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.mobile-nav-section-toggle:hover {
  color: #fff;
}
.mobile-nav-section-toggle i {
  font-size: 12px;
  transition: transform 0.25s ease;
  color: rgba(255,255,255,0.5);
}
.mobile-nav-section-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.mobile-nav-section-body {
  display: none;
  padding: 0 20px 12px;
  flex-direction: column;
}
.mobile-nav-section-body.is-open {
  display: flex;
}

.mobile-nav-label {
  font-family: var(--font-secondary, 'Barlow Condensed', sans-serif);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 12px 0 6px;
  padding: 0;
}

.mobile-nav-section-body a {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  font-family: var(--font-primary, 'Barlow', sans-serif);
  text-decoration: none;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s;
  display: block;
}
.mobile-nav-section-body a:last-child {
  border-bottom: none;
}
.mobile-nav-section-body a:hover,
.mobile-nav-section-body a:active {
  color: #e84c1e;
}

/* Drawer CTA buttons */
.mobile-drawer-cta {
  padding: 20px 20px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mobile-drawer-cta .btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 20px;
  font-size: 14px;
  letter-spacing: 1.5px;
  border-radius: 6px;
  min-height: 48px;
  line-height: 1.2;
}
.mobile-drawer-cta .green-bg {
  background: #e84c1e !important;
  color: #fff !important;
  border: none;
}
.mobile-drawer-cta .btn-outline-light {
  background: transparent !important;
  color: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

/* Body lock when drawer is open */
body.drawer-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------
   3. GENERAL MOBILE LAYOUT  (≤768px)
   Rules written from scratch based on actual v36 DOM structure.
   No v35 CSS used as source.
--------------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- BASE: Overflow prevention --- */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }
  *, *::before, *::after {
    box-sizing: border-box;
  }
  /* Only apply max-width to block-level and flex containers, not inline elements */
  div, section, article, main, header, footer, nav, aside,
  table, thead, tbody, tr, td, th,
  form, fieldset, figure, ul, ol, li {
    max-width: 100%;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- TYPOGRAPHY --- */
  h1 { font-size: 28px !important; line-height: 1.25 !important; }
  h2 { font-size: 22px !important; line-height: 1.3 !important; }
  h3 { font-size: 18px !important; }
  p  { font-size: 16px; }

  /* --- SPACING --- */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* --- BOOTSTRAP GRID: stack all columns --- */
  /* Only stack Bootstrap .row grids, not d-flex utility divs */
  .row:not(.no-stack) {
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .col,
  [class*="col-lg-"],
  [class*="col-md-"],
  [class*="col-sm-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Preserve inline flex rows (tags, icon groups, etc.) */
  .tags,
  .d-flex.align-items-center:not(.row),
  .download-btns-wrapper {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  /* --- BUTTONS: minimum tap target, stack side-by-side CTAs --- */
  .btn {
    min-height: 44px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Slide 1 CTA pair: stack vertically (target only the mt-4 button wrapper, not .tags) */
  .slide-1-hero .d-flex.mt-4 {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .slide-1-hero .d-flex.mt-4 .btn {
    width: 100% !important;
    margin-left: 0 !important;
    text-align: center;
  }

  /* --- TABLES: horizontal scroll --- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- BREADCRUMB --- */
  .market-breadcrumb {
    flex-wrap: wrap !important;
    font-size: 13px;
    padding: 8px 0 !important;
  }

  /* ============================================================
     HOMEPAGE — index.html
     ============================================================ */

  /* Carousel: fix inactive slides stacking vertically
     main.css sets display:flex on ALL .carousel-item which overrides Bootstrap's display:none.
     On mobile we use position:absolute for inactive slides so they don't take up space. */
  .carousel-inner {
    position: relative;
    overflow: hidden;
  }
  .carousel-item {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 380px;
    max-height: 480px;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
  }
  .carousel-item.active {
    position: relative !important;
    opacity: 1;
    z-index: 2;
  }

  /* Slide 1: single text column, full width */
  .slide-1-hero {
    padding: 48px 0 !important;
    min-height: 380px;
    max-height: 480px;
    display: flex !important;
    align-items: center !important;
  }
  .slide-1-hero .container { padding: 0 16px !important; }
  .slide-1-hero .row { flex-direction: row !important; } /* keep Bootstrap default */
  .slide-1-hero .col.col-12.col-lg-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    display: block !important;   /* never hide this column */
  }
  .slide-1-hero h1 { text-align: left !important; }
  .slide-1-hero .tags {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Slides 2–4: container has d-flex flex-column — override to block */
  .slide-2-hero .container,
  .slide-3-hero .container,
  .slide-4-hero .container {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 48px 16px !important;
  }
  .slide-2-hero,
  .slide-3-hero,
  .slide-4-hero {
    min-height: 380px;
    max-height: 480px;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .slide-2-hero .row,
  .slide-3-hero .row,
  .slide-4-hero .row {
    flex-direction: row !important;
  }
  .slide-2-hero .col,
  .slide-3-hero .col,
  .slide-4-hero .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Slide 5: plain container */
  .slide-5-hero {
    min-height: 380px;
    max-height: 480px;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .slide-5-hero .container { padding: 0 16px !important; }
  .slide-5-hero .row { flex-direction: row !important; }
  .slide-5-hero .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* App download buttons in slides */
  .download-btns-wrapper {
    flex-wrap: wrap;
    gap: 10px;
  }
  .download-btns img {
    height: 36px !important;
    width: auto !important;
  }

  /* Confidence section */
  .confidence .row { flex-direction: row !important; flex-wrap: wrap !important; }
  .confidence .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px;
  }

  /* How-to-start steps: stack vertically */
  .how-to-step {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px;
  }

  /* Support section */
  .support .row { flex-direction: column !important; }

  /* App invitation buttons */
  .app-invitation-btns .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px;
  }

  /* ============================================================
     MARKET PAGES — forex, commodities, metals, indices, shares
     ============================================================ */

  /* Market hero: left column is full width, right (d-none d-lg-*) already hidden by Bootstrap */
  .market-hero {
    padding: 48px 0 !important;
  }
  .market-hero .col-lg-6:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Market stats bar */
  .market-stats-bar .row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .market-stats-bar [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin-bottom: 12px;
  }

  /* Market table */
  .market-table-section table {
    font-size: 13px;
  }

  /* Market explainer / steps / why: stack */
  .market-explainer .row,
  .market-steps .row,
  .market-why .row {
    flex-direction: column !important;
  }

  /* Other markets cards */
  .other-markets .row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }
  .other-markets [class*="col-"] {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
    margin-bottom: 16px;
  }

  /* ============================================================
     ACCOUNT PAGES — super-zevivo-account, standard-account
     ============================================================ */

  .account-hero {
    padding: 48px 0 !important;
  }
  /* Right column already d-none d-lg-block — hidden by Bootstrap */
  .account-hero .col-lg-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Comparison section: scroll horizontally */
  .comparison-section .table-wrapper,
  .comparison-section table {
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
  }

  /* Detail section */
  .detail-section .row { flex-direction: column !important; }

  /* ============================================================
     PLATFORM PAGES — metatrader5, webtrader, vps
     ============================================================ */

  .platform-hero,
  .vps-hero {
    padding: 48px 0 !important;
  }
  /* Right column already d-none d-lg-block */
  .platform-hero .col-lg-6:first-child,
  .vps-hero .col-lg-6:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Platform download buttons: stack */
  .platform-download-section .d-flex {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  .platform-download-section .btn {
    width: 100% !important;
    text-align: center;
  }

  /* Platform features grid */
  .platform-features-section .row { flex-direction: column !important; }

  /* VPS plans: stack */
  .vps-plans-section .row { flex-direction: column !important; }
  .vps-plans-section [class*="col-"] { margin-bottom: 20px; }

  /* VPS connect / register */
  .vps-connect-section .row,
  .vps-register-section .row {
    flex-direction: column !important;
  }

  /* ============================================================
     CONTACT PAGE
     ============================================================ */

  .contact-hero {
    padding: 48px 0 !important;
  }
  .contact-hero .col-lg-6:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Contact channels: stack cards */
  .contact-channels-section .row { flex-direction: column !important; }
  .contact-channels-section [class*="col-"] { margin-bottom: 16px; }

  /* Contact main form */
  .contact-main-section .row { flex-direction: column !important; }

  /* ============================================================
     PARTNERSHIP PAGE
     ============================================================ */

  .partner-hero {
    padding: 48px 0 !important;
  }
  .partner-hero .col-lg-6:first-child {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Partner types / how / commission / benefits: stack */
  .partner-types-section .row,
  .partner-how-section .row,
  .partner-commission-section .row,
  .partner-benefits-section .row {
    flex-direction: column !important;
  }
  .partner-types-section [class*="col-"],
  .partner-how-section [class*="col-"],
  .partner-commission-section [class*="col-"],
  .partner-benefits-section [class*="col-"] {
    margin-bottom: 20px;
  }

  /* ============================================================
     LEGAL PAGES — terms-and-conditions, privacy-policy
     ============================================================ */

  .legal-hero {
    padding: 48px 16px !important;
    text-align: center;
  }

  .legal-content-section {
    padding: 32px 0 !important;
  }
  .legal-content-section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ============================================================
     SPREADS / SWAP RATE PAGES
     ============================================================ */

  .spreads-hero,
  .swap-hero {
    padding: 48px 0 !important;
  }
  .spreads-table-wrapper,
  .swap-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ============================================================
     ECONOMIC CALENDAR PAGE
     ============================================================ */

  .ec-widget-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ============================================================
     WEBTRADER PAGE
     ============================================================ */

  .webtrader-hero {
    padding: 48px 0 !important;
  }
  /* Webtrader iframe: reduce height for mobile */
  iframe[src*="webtrader"],
  .webtrader-frame {
    height: 400px !important;
    width: 100% !important;
  }

  /* ============================================================
     GLOBAL FOOTER
     ============================================================ */

  footer .row,
  .footer .row {
    flex-direction: column !important;
    gap: 24px;
  }
  footer [class*="col-"],
  .footer [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center;
  }
  footer .footer-links {
    justify-content: center !important;
  }

}