/**
 * Isolated mobile-only overrides.
 * Desktop CSS, PHP templates, and HTML are not modified by this file.
 * Every rule is wrapped in @media screen and (max-width: 768px).
 */

@media screen and (max-width: 768px) {
  /* Prevent horizontal side-scrolling */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Ensure images fit small screens */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Responsive stacking for grids/cards on mobile */
  .elementor-row,
  .elementor-container,
  .product-grid,
  .showcase-grid {
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Keep existing header/footer chrome from being restacked */
  header#tbay-header .elementor-row,
  header#tbay-header .elementor-container,
  .elementor-location-header .elementor-row,
  .elementor-location-header .elementor-container,
  footer#tbay-footer .elementor-row,
  footer#tbay-footer .elementor-container,
  .elementor-location-footer .elementor-row,
  .elementor-location-footer .elementor-container {
    flex-direction: revert !important;
  }

  /* Audio player & tabs alignment on mobile */
  .audio-player-container,
  .autx-guide__player {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .language-tabs-wrapper,
  .autx-guide__tabs,
  .autx-guide__tracks {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Touch-friendly buttons */
  .elementor-button,
  .cta-btn,
  a.btn,
  .autx-page__btn,
  .slider-btn-tutor {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* —— Compact mobile header (desktop > 768px untouched) —— */
  header,
  .site-header,
  .main-header,
  .elementor-location-header,
  .header-wrapper {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: auto !important;
    max-height: 60px !important;
  }

  /* Outer AUTX header is a 3-row stack — compact rows, do not clip the chrome */
  body.autx-site header#tbay-header,
  body.autx-site header#tbay-header.header-on-slider,
  body.autx-site header#tbay-header.tbay_header-template,
  body.autx-site header#tbay-header > .elementor,
  body.autx-site header#tbay-header .elementor-location-header,
  body.autx-site header#tbay-header .header-wrapper,
  body.autx-site header#tbay-header .tb-header-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }

  body.autx-site header#tbay-header .autx-switcher--header,
  body.autx-site header#tbay-header #autx-chrome-topbar {
    padding: 0 !important;
    min-height: 36px !important;
    max-height: 36px !important;
    height: 36px !important;
    overflow: hidden !important;
    background-color: #0b1118 !important;
    background-image: none !important;
  }

  body.autx-site header#tbay-header .autx-switcher__inner {
    padding: 0 10px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  body.autx-site header#tbay-header .elementor-element-711712e,
  body.autx-site header#tbay-header .elementor-element-711712e > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 4px 10px !important;
    min-height: 40px !important;
    max-height: 44px !important;
    height: 44px !important;
  }

  body.autx-site header#tbay-header .elementor-element-273193f,
  body.autx-site header#tbay-header .elementor-element-273193f > .elementor-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Scale down mobile logo cleanly */
  .site-header .custom-logo,
  .site-header img,
  .header-logo img,
  .elementor-widget-theme-site-logo img,
  body.autx-site header#tbay-header .custom-logo,
  body.autx-site header#tbay-header .header-logo-img,
  body.autx-site header#tbay-header .header-logo img,
  body.autx-site header#tbay-header .logo img,
  body.autx-site header#tbay-header .elementor-widget-theme-site-logo img,
  body.autx-site header#tbay-header .elementor-widget-fana-site-logo img,
  body.autx-site header#tbay-header .elementor-element-711712e .header-logo img,
  body.autx-site header#tbay-header .elementor-element-711712e .header-logo-img {
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
  }

  /* Adjust search, hamburger menu & action icon sizes */
  .mobile-menu-toggle,
  .navbar-toggler,
  .header-actions-mobile,
  .header-icons,
  body.autx-site header#tbay-header .btn-offcanvas,
  body.autx-site header#tbay-header .navbar-toggle,
  body.autx-site header#tbay-header .autx-theme-toggle,
  body.autx-site header#tbay-header .top-cart,
  body.autx-site header#tbay-header .top-wishlist,
  body.autx-site header#tbay-header .tbay-login,
  body.autx-site header#tbay-header .mini-cart,
  body.autx-site header#tbay-header .category-inside-title {
    transform: scale(0.9) !important;
    margin: 0 !important;
  }

  /* Compact search bar if present inside header */
  .site-header .search-form,
  .site-header .search-field,
  body.autx-site header#tbay-header .tbay-search-form .search-form,
  body.autx-site header#tbay-header .tbay-search-form .search-field,
  body.autx-site header#tbay-header .tbay-search-form .input-group,
  body.autx-site header#tbay-header .tbay-search-form .tbay-search,
  body.autx-site header#tbay-header .tbay-search-form input.tbay-search,
  body.autx-site header#tbay-header .tbay-search-form input[type="search"],
  body.autx-site header#tbay-header .tbay-search-form input[type="text"],
  body.autx-site header#tbay-header .tbay-search-form .select-category,
  body.autx-site header#tbay-header .tbay-search-form .SumoSelect,
  body.autx-site header#tbay-header .tbay-search-form .SumoSelect > .CaptionCont,
  body.autx-site header#tbay-header .tbay-search-form .button-search {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: 13px !important;
  }

  body.autx-site header#tbay-header .navbar-nav > li > a,
  body.autx-site header#tbay-header .navbar-nav > li > a .menu-title,
  body.autx-site header#tbay-header .elementor-element-273193f .menu-title {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* Hide Fana default white mobile header (duplicate of the dark #tbay-header) */
  .site-header-mobile,
  .mobile-header-wrapper,
  .theme-default-header,
  header.white-header,
  .elementor-section.elementor-top-section:has(.custom-logo-link[style*="background: #fff"]),
  .top-bar-mobile,
  .header-mobile-light,
  .topbar-device-mobile,
  body .topbar-device-mobile,
  body.autx-site .topbar-device-mobile,
  .topbar-device-mobile.d-xl-none,
  #search-mobile-nav-cover {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* Page body & main content start cleanly from the dark header */
  body.home,
  body.page,
  #page,
  body.autx-site .wrapper-container,
  body.autx-site #wrapper-container,
  body.tbay-search-mb .wrapper-container,
  body.tb-home .wrapper-container,
  .tb-home .wrapper-container,
  body.tbay-search-mb .wrapper-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Keep the intended dark custom header visible after the white bar is removed */
  body.autx-site header#tbay-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* —— Simplify mobile footer: hide office columns, clear bottom nav —— */
  footer .office-addresses,
  footer .elementor-column:has(.fa-flag),
  footer .elementor-column:has(.autx-flag),
  footer .widget-area:nth-child(n+3),
  .site-footer .footer-address-col,
  footer#tbay-footer .autx-footer-office,
  footer#tbay-footer .autx-footer-office--in,
  footer#tbay-footer .autx-footer-office--uk,
  footer#tbay-footer .elementor-element-af7b04a,
  footer#tbay-footer .elementor-element-c38d8f8,
  footer#tbay-footer a.autx-office-map {
    display: none !important;
  }

  footer,
  .site-footer,
  footer#tbay-footer,
  footer#tbay-footer.tbay-footer {
    padding: 20px 15px 75px 15px !important;
    text-align: center !important;
    background-color: #0b1118 !important;
  }

  footer .elementor-container,
  footer .footer-columns,
  footer#tbay-footer .elementor-container,
  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container,
  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container:has(> .elementor-column),
  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container > .elementor-row,
  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container > .elementor-row:has(> .elementor-column) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container > .elementor-column,
  footer#tbay-footer .elementor-element-ca6a011 > .elementor-container > .elementor-row > .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }

  footer ul,
  footer .menu,
  footer#tbay-footer ul,
  footer#tbay-footer .menu,
  footer#tbay-footer .elementor-icon-list-items {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  footer a,
  footer p,
  footer span,
  footer#tbay-footer a,
  footer#tbay-footer p,
  footer#tbay-footer span,
  footer#tbay-footer li,
  footer#tbay-footer .elementor-icon-list-text,
  footer#tbay-footer .heading-tbay-title,
  footer#tbay-footer .elementor-heading-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  footer#tbay-footer .elementor-element-28eb7045 > .elementor-container,
  footer#tbay-footer .elementor-element-28eb7045 > .elementor-container > .elementor-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hide floating desktop category / secondary nav strip */
  .header-categories,
  .category-nav-wrap,
  .desktop-secondary-nav,
  .header-nav-bar,
  .elementor-section:has(.header-categories),
  .site-header .main-navigation:not(.mobile-nav),
  .elementor-element-273193f,
  .elementor-element-273193f.elementor-sticky,
  .elementor-element-273193f.elementor-sticky--active,
  .elementor-element-273193f.element-sticky-header,
  body.autx-site header#tbay-header .elementor-element-273193f,
  body.autx-site header#tbay-header .category-inside,
  body.autx-site header#tbay-header .tbay-mainmenu {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  header#tbay-header .elementor-sticky__spacer,
  body.autx-site .elementor-element-273193f + .elementor-sticky__spacer {
    display: none !important;
    height: 0 !important;
  }

  /* Unstick leftover Elementor clones so they cannot float over content */
  .is-sticky,
  .sticky-header-wrap,
  .elementor-sticky--active {
    position: static !important;
  }

  /* Keep the compact dark header (logo + language) pinned at the top */
  body.autx-site header#tbay-header {
    position: sticky !important;
    top: 0 !important;
  }

  .site-content,
  #content,
  .page-content {
    margin-top: 0 !important;
    padding-top: 10px !important;
  }

  /* Hide floating desktop search + Call Us widget overlaying the hero */
  .header-search-wrap,
  .header-contact-widget,
  .elementor-widget-search-form,
  .header-call-us,
  .elementor-section:has(.header-call-us),
  div[class*="header-search"],
  div[class*="search-and-call"],
  body.autx-site header#tbay-header .tbay-search-form,
  body.autx-site header#tbay-header .tbay-element-search-form,
  body.autx-site header#tbay-header .elementor-widget-tbay-search-form,
  body.autx-site header#tbay-header .elementor-element-8358680,
  .elementor-element-8358680,
  .elementor-element-8358680.elementor-sticky--active {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .hero-slider,
  .elementor-section.elementor-top-section:first-of-type,
  .main-slider,
  body.autx-corporate-home .elementor-element-49f3a08d {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Solid dark top bar — no white bleed; Language/Currency stay readable */
  .top-bar,
  .header-top,
  .site-header,
  .elementor-location-header,
  body.autx-site header#tbay-header,
  body.autx-site header#tbay-header > .elementor,
  body.autx-site .autx-switcher,
  body.autx-site .autx-switcher--header,
  body.autx-site #autx-chrome-topbar {
    background-color: #0b1118 !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
  }

  html[data-autx-theme="dark"],
  html[data-autx-theme="dark"] body.autx-site {
    background-color: #0b1118 !important;
  }

  .top-bar-left,
  .top-bar-right,
  .language-currency-wrap,
  body.autx-site .autx-switcher__inner,
  body.autx-site .autx-switcher__end,
  body.autx-site .autx-switcher__controls {
    background: transparent !important;
    color: #ffffff !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-height: 36px !important;
    overflow: hidden !important;
  }

  body.autx-site header#tbay-header .autx-switcher__welcome,
  body.autx-site #autx-chrome-topbar .autx-switcher__welcome,
  body.autx-site header#tbay-header .autx-switcher__label,
  body.autx-site header#tbay-header .autx-switcher__divider,
  body.autx-site header#tbay-header .autx-switcher__submit {
    display: none !important;
  }

  body.autx-site header#tbay-header .autx-switcher__select,
  body.autx-site header#tbay-header .autx-fx,
  body.autx-site header#tbay-header .autx-fx__btn {
    min-width: 0 !important;
    width: auto !important;
    max-width: 38vw !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 0 20px 0 8px !important;
    font-size: 11px !important;
    line-height: 28px !important;
  }

  body.autx-site header#tbay-header .autx-theme-toggle {
    transform: scale(0.85) !important;
    margin: 0 !important;
  }

  body.autx-site header#tbay-header .header-logo-img,
  body.autx-site header#tbay-header .logo img,
  body.autx-site header#tbay-header .elementor-element-711712e .header-logo img,
  body.autx-site header#tbay-header .elementor-element-711712e .header-logo-img {
    max-height: 28px !important;
  }

  .top-bar a,
  .top-bar span,
  body.autx-site #autx-chrome-topbar a,
  body.autx-site #autx-chrome-topbar span,
  body.autx-site .autx-switcher a,
  body.autx-site .autx-switcher span,
  body.autx-site .autx-switcher label {
    color: #e2e8f0 !important;
  }
}
