/* ================================================================
   Axe Arena – Responsive Fixes
   Only adds what is genuinely absent from booking-wizard.css.
   Does NOT redefine existing rules.
   ================================================================ */


/* ================================================================
   FIX 1: Wrong class name — addon grid responsive rules
   booking-wizard.css targets .axwiz-addon-grid but the HTML
   template outputs .axwiz-addons-grid (with an 's').
   These rules mirror the existing ones on the correct class.
   ================================================================ */

@media (max-width: 900px) {
  .axwiz-addons-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 768px) {
  .axwiz-addons-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

@media (max-width: 600px) {
  .axwiz-addons-grid { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 480px) {
  .axwiz-addons-grid { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 812px) and (orientation: landscape) {
  .axwiz-addons-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ================================================================
   FIX 2: Nav-bar button stacking on phones
   booking-wizard.css uses .axwiz-footer for stacking rules but the
   HTML template outputs .axwiz-nav-bar for all step navigation rows.
   ================================================================ */

@media (max-width: 480px) {
  .axwiz-nav-bar {
    flex-direction: column;
    gap: 10px;
  }
  .axwiz-nav-bar .axwiz-btn-back {
    order: 2;
    width: 100%;
    justify-content: center;
  }
  .axwiz-nav-bar .axwiz-btn-next,
  .axwiz-nav-bar .axwiz-btn-submit {
    order: 1;
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
}


/* ================================================================
   FIX 3: Large screen improvements
   Nothing in the existing CSS handles screens wider than 1200px
   beyond one max-width rule.
   ================================================================ */

/* Laptop 1200–1440px — comfortable reading width */
@media (min-width: 1200px) {
  .axwiz-outer { padding: 32px; }
  .axwiz-wrap  { max-width: 980px; }
  .axwiz-sidebar { width: 220px; }
  .axwiz-content { padding: 32px 36px; }
  .axwiz-panel-title { font-size: 1.25rem; }
  .axwiz-service-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .axwiz-addons-grid  { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* Large desktop 1441–1920px — MacBook Pro 16", iMac, Windows 1080p */
@media (min-width: 1441px) {
  .axwiz-outer { padding: 40px; }
  .axwiz-wrap  { max-width: 1040px; }
  .axwiz-sidebar { width: 230px; }
  .axwiz-content { padding: 36px 40px; }
  .axwiz-panel-title { font-size: 1.3rem; }
  .axwiz-service-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .axwiz-addons-grid  { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .axwiz-step-label { font-size: .8rem; }
}

/* Ultra-wide 1921px+ — iMac 5K, Mac Pro, 4K monitors */
@media (min-width: 1921px) {
  .axwiz-outer { padding: 52px; }
  .axwiz-wrap  { max-width: 1100px; }
  .axwiz-sidebar { width: 240px; }
  .axwiz-content { padding: 40px 46px; }
  .axwiz-panel-title { font-size: 1.35rem; }
  .axwiz-step-icon  { width: 36px; height: 36px; }
  .axwiz-step-label { font-size: .82rem; }
}


/* ================================================================
   FIX 4: Calendar layout on mid-range screens (600–768px gap)
   The cal-layout switches to 1-col at 768px. On 600–768px it helps
   to tighten padding since the panel is narrower.
   ================================================================ */

@media (max-width: 768px) and (min-width: 601px) {
  .axwiz-cal-box { padding: 14px 12px; }
  .axwiz-cal-day { font-size: .82rem; }
}


/* ================================================================
   FIX 5: Ensure inputs never trigger iOS Safari zoom on all sizes
   (belt-and-suspenders — the existing rule targets .axwiz-wrap
   which may not be active in all contexts)
   ================================================================ */

@media (max-width: 768px) {
  input.axwiz-input,
  select.axwiz-input,
  select.axwiz-select,
  textarea.axwiz-input,
  input[type="date"],
  input[type="time"],
  input[type="tel"],
  input[type="email"],
  input[type="text"] {
    font-size: 16px !important;
  }
}


/* ================================================================
   FIX 6: iPad Pro 11" and 12.9" (1024px) — sidebar + grid tune
   The 900px breakpoint rules kick in a 2-col service grid.
   Between 901–1024px there's no specific rule, so grids jump.
   ================================================================ */

@media (min-width: 901px) and (max-width: 1024px) {
  .axwiz-service-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .axwiz-addons-grid  { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .axwiz-sidebar { width: 200px; }
}


/* ================================================================
   FIX 7: Cross-browser additions
   ================================================================ */

/* Edge/IE: remove select arrow */
.axwiz-wrap select::-ms-expand { display: none; }

/* Samsung Internet: button focus ring */
.axwiz-btn:focus-visible {
  outline: 2px solid var(--axwiz-primary, #FF6B35);
  outline-offset: 2px;
}

/* Firefox: number input spinner removal */
.axwiz-input[type="number"]::-moz-number-spin-box { display: none; }

/* Safari: date/time input alignment */
@supports (-webkit-touch-callout: none) {
  input[type="date"].axwiz-input,
  input[type="time"].axwiz-input,
  input[type="date"].axwiz-dt-input,
  input[type="time"].axwiz-dt-input {
    line-height: normal;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}


/* ================================================================
   EDGE / IE11 SPECIFIC FIXES
   ================================================================ */

/* Edge Chromium (modern): grid auto-fit fallback */
@supports not (display: grid) {
  .axwiz-service-grid,
  .axwiz-time-grid,
  .axwiz-addons-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .axwiz-service-grid > *,
  .axwiz-addons-grid  > * { -ms-flex: 0 0 calc(50% - 8px); flex: 0 0 calc(50% - 8px); }
  .axwiz-time-grid    > * { -ms-flex: 0 0 calc(33% - 5px);  flex: 0 0 calc(33% - 5px); }
}

/* ── Sidebar: must collapse on phones in ALL Edge versions ── */
@media (max-width: 768px) {
  /* Force sidebar to full-width regardless of -ms-flex-shrink behaviour */
  .axwiz-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
  }
  /* Force wrap to column in all Edge/IE flex models */
  .axwiz-wrap {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
    min-height: unset !important;
  }
  /* Prevent axwiz-content from overflowing horizontally */
  .axwiz-content {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
  }
  /* Prevent all panels from overflowing */
  .axwiz-panel {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }
}

/* ── html/body: prevent horizontal scroll on ALL browsers ── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
/* But only within the plugin overlay */
body.axearena-plugin-page {
  overflow-x: hidden !important;
}

/* ── Edge: fix -ms-text-size-adjust interaction ── */
.axwiz-wrap {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}