/* ── SAFARI MOBILE FIXES ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Replace any 100vw usage with safe equivalent */
body {
  min-width: 0;
}

/* Safari form rendering reset */
input, select, button, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Prevent Safari from auto-zooming on form focus */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  font-size: 16px !important;
}

/* ============================================================
   AUTOWORLDRENTAL — NAV CONFLICT NEUTRALIZER
   Add this AFTER style.css in header.php to kill the old
   checkbox-based mobile nav rules without editing style.css.
   ============================================================ */

/* Kill the old checkbox trigger */
#menu-icon:checked ~ ul { display: none !important; }

/* Kill the old absolute-position mobile nav */
@media screen and (max-width: 958px) {
  .access-content ul {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -290px !important;
    width: min(280px, 85vw) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-right: 1px solid #cdcdcd !important;
    box-shadow: 8px 0 24px rgba(0,0,0,.12) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: left .25s ease, opacity .25s ease, visibility .25s ease !important;
    z-index: 99998 !important;
    /* Ensure fixed panel never affects document flow */
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
  }

  /* Open state */
  .access-content.nav-open ul {
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Show the X close button */
  .menu-close { display: block !important; }
  .menu-close span { display: block !important; cursor: pointer; }

  /* Kill arrow pseudo on mobile items (was for old dropdown) */
  .access-content > ul > li.menu-item-has-children:before {
    display: none !important;
    content: none !important;
  }
}

/* Global mobile safety */
@media screen and (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, input, select, textarea { max-width: 100%; }
}

/* ── KILL LEGACY LEFT-SLIDER LAYOUT ON MOBILE ── */
@media (max-width: 900px) {
  body.left-slider,
  body.two-column {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  #conteiner,
  #content,
  #main,
  #primary,
  .conteiner {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* Two-column sidebar reset */
  .two-column #content,
  .two-column #secondary {
    width: 100% !important;
    margin-left: 0 !important;
    float: none !important;
  }
}

/* ── ENSURE NAV CLOSED BY DEFAULT ── */
.access-content ul {
  left: -290px !important;
}

.access-content.nav-open ul {
  left: 0 !important;
}

/* ── KILL HARDCODED CONTAINER WIDTHS FROM OLD THEME ── */
@media (max-width: 900px) {
  /* Main containers */
  #main,
  #slider-content,
  #progress-bar-steps,
  #footer-content,
  .footer-content,
  #branding-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Two-column layout — stack vertically */
  .two-column #content {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .two-column #secondary {
    margin-left: 0 !important;
    width: 100% !important;
    float: none !important;
  }

  /* Old slider form widths */
  .center-slider #slider-form,
  .page .main-form,
  .main-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Branding layout */
  #branding-content div {
    float: none !important;
  }

  .title-content {
    width: auto !important;
  }

  .access-content {
    width: auto !important;
    padding: 0 !important;
  }

  /* Member/auth area */
  #branding-content div.member {
    float: right !important;
    margin-top: 16px !important;
  }
}

/* ── HEADER — all three elements in one row on mobile ── */
@media (max-width: 900px) {
  /* Header bar — flex row */
  #branding-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    flex-wrap: nowrap !important;
  }

  /* Hamburger — left */
  .access-content {
    order: 1 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  /* Logo — center */
  .title-content {
    order: 2 !important;
    flex: 1 !important;
    text-align: center !important;
    padding: 0 !important;
    width: auto !important;
    top: 0 !important;
    position: relative !important;
  }

  .title-content img {
    max-height: 44px !important;
    height: auto !important;
    display: inline-block !important;
  }

  /* Auth area — right */
  #authArea,
  #branding-content div.member {
    order: 3 !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin-top: 0 !important;
  }

  /* Hide the menus div (language selector) */
  #branding-content .menus {
    display: none !important;
  }
}

/* ── HEADER — ALL ITEMS ON ONE ROW ── */
@media (max-width: 900px) {
  #branding {
    min-height: 56px !important;
  }

  #branding-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Remove float from all branding children */
  #branding-content > div {
    float: none !important;
  }

  /* Logo — left side */
  .title-content {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    top: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    order: 1 !important;
  }

  .title-content img {
    max-height: 46px !important;
    width: auto !important;
    display: block !important;
  }

  /* Hamburger — after logo */
  .access-content {
    order: 2 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .access-content .menu-icon {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  /* Auth area — right side */
  #authArea,
  #branding-content div.member {
    order: 3 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
    position: relative !important;
    top: 0 !important;
  }

  /* Menus bar (language etc) — hide on mobile */
  #branding-content .menus {
    display: none !important;
  }
}

/* ── HAMBURGER — BIGGER TAP TARGET ── */
@media (max-width: 900px) {
  .access-content .menu-icon {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    cursor: pointer !important;
  }

  .access-content .menu-icon img {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }
}

/* ── SAFARI: fixed elements must not exceed viewport width ── */
#awr-chatbot-toggle {
  max-width: calc(100vw - 32px);
}

#awr-chatbot-box {
  max-width: calc(100vw - 28px);
}

#awr-mtb {
  max-width: 100%;
  width: 100% !important;
}