/* ==========================================================================
   Sajil - site-wide responsive fixes

   Load once, from templates/web/includes/header.html, AFTER style.css.
   That reaches 19 of the 20 public pages; activate-account.html does not use
   the shared header and links this file itself.

   This file only fills specific gaps found by auditing style.css and the
   templates. Most of the site is already responsive (the account dashboard
   grid, the reservation steps and the login card all collapse correctly),
   so nothing here re-does work that already exists.

   It replaces responsive-fixes.css, which only covered the home page. Every
   rule from that file is included below.
   ========================================================================== */


/* ==========================================================================
   1. NO SIDEWAYS SCROLL
   style.css has no overflow-x guard anywhere. Decorative shapes sit at
   negative offsets with fixed widths (an 800px circle at right:-200px, a
   1500px .background-decoration, .geometric-shapes absolutely positioned),
   which pushes the page wider than a phone screen. That is what makes a
   phone render the whole site zoomed out with a horizontal scrollbar.
   ========================================================================== */

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

.hero-section,
.collection,
.about,
.features,
.why,
.services,
.video-section,
.gallery-section,
.testimonial-section,
.faq-section,
.app-section,
.call-sajil-container,
.call-sajil-section,
.work-periods-section,
.info-hero,
.dashboard-section {
  overflow-x: hidden;
  overflow-x: clip;          /* clip keeps position:sticky working */
}

@media (max-width: 992px) {
  .background-decoration {
    width: 100%;
    max-width: 700px;
  }

  .call-sajil-decoration,
  .work-periods-decoration {
    width: 420px;
    height: 420px;
    right: -140px;
  }
}

@media (max-width: 768px) {
  .background-decoration,
  .geometric-shapes {
    display: none;           /* purely decorative, and the main overflow source */
  }

  .call-sajil-decoration,
  .work-periods-decoration {
    width: 300px;
    height: 300px;
    right: -110px;
    bottom: -110px;
  }
}


/* ==========================================================================
   2. FLUID MEDIA
   ========================================================================== */

img,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

svg:not([width]) {
  max-width: 100%;
}


/* ==========================================================================
   3. STOP iOS ZOOMING INTO FORM FIELDS
   iOS Safari zooms the page whenever a field under 16px is focused, and
   leaves it zoomed. style.css sets inputs to 11px-14px, and gets SMALLER at
   phone widths (.select-date-btn drops to 11px below 480px), which makes it
   happen on every form on the site.

   !important is deliberate: rules like `.form-group input` and
   `.select-date-btn` outrank a plain `input` selector, and this has to win
   over all of them, only on phones.
   ========================================================================== */

@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-control,
  .form-input,
  .phone-input,
  .filter-input,
  .select-date-btn,
  .location-select,
  .promo-input {
    font-size: 16px !important;
  }
}


/* ==========================================================================
   4. TOUCH TARGETS
   Roughly 44px is the comfortable minimum for a fingertip.
   ========================================================================== */

@media (max-width: 768px) {
  button,
  .btn,
  .btn-main,
  .plan-tab,
  .apply-btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
  }
}


/* ==========================================================================
   5. LONG WORDS AND TEXT
   Long Arabic words, emails and branch addresses can force a container
   wider than the screen.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
p, li, td, th,
.detail-value,
.item-value,
.branch-address {
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 6vw, 1.9rem); }
  h3 { font-size: clamp(1.1rem, 5vw, 1.4rem); }
}


/* ==========================================================================
   6. TABLES
   reservation/mobile/checkout_points.html has a table with no scroll
   wrapper, and it renders inside the app's webview on narrow phones.
   ========================================================================== */

@media (max-width: 768px) {
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ==========================================================================
   7. HYPERPAY CARD FORM
   style.css has no rules for the COPYandPAY widget (.wpwl-*). Its default
   form is around 416px wide plus padding, which overflows phones up to about
   400px, including the mobile checkout inside the app.
   ========================================================================== */

.wpwl-container,
.wpwl-form,
.payment-widget,
.payment-form-card {
  max-width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .wpwl-form {
    width: 100% !important;
    padding-inline: 12px !important;
  }

  .wpwl-group,
  .wpwl-wrapper,
  .wpwl-control {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  /* expiry and CVV sit side by side on desktop; stack them on a phone */
  .wpwl-group-expiry,
  .wpwl-group-cvv {
    width: 100% !important;
    padding: 0 !important;
  }

  .wpwl-button-pay {
    width: 100% !important;
    min-height: 48px;
    float: none !important;
  }

  .wpwl-brand-card {
    max-width: 52px;
  }
}


/* ==========================================================================
   8. MODALS
   step-one, step-two and payment_method all open Bootstrap modals. On a
   phone they should use the full width rather than a narrow centred card.
   ========================================================================== */

@media (max-width: 576px) {
  .modal-dialog {
    margin: 12px;
    max-width: calc(100% - 24px);
  }

  .modal-dialog.modal-lg {
    max-width: calc(100% - 24px) !important;
  }

  .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
  }

  .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
  }

  .modal-footer > .btn {
    flex: 1 1 100%;
    margin: 0;
  }
}


/* ==========================================================================
   9. PAGE-SPECIFIC GAPS
   Only containers that had no mobile rule and actually lay out in a row.
   ========================================================================== */

/* account dashboard: the orders area is a centred flex row */
@media (max-width: 768px) {
  .orders-container {
    flex-direction: column;
    text-align: center;
    padding: 20px 12px;
  }
}

/* work periods: each line is a flex row of day and hours */
@media (max-width: 480px) {
  .work-hours li {
    flex-wrap: wrap;
    gap: 4px 12px;
  }
}

/* branches: the selector and cards should span the screen */
@media (max-width: 768px) {
  .branch-selector,
  .branch-selector select,
  .branch-card {
    width: 100%;
    max-width: 100%;
  }
}


/* ==========================================================================
   10. HOME PAGE BOOKING FORM

   Why it was overflowing on phones, three rules stacking up:

   a) style.css, in its max-width:768px block, sets
          .booking-form { width: fit-content !important; margin: -63px 0; }
      fit-content makes the form as wide as its widest child, which is the
      branch dropdown showing a long name such as
      "Dawadmi City - King Abdulaziz Road". So the form grows past the
      screen edge.

   b) .form-fields { grid-template-columns: 1fr } - in CSS grid, 1fr really
      means minmax(auto, 1fr), so a column will not shrink below its content.
      The long <select> blows the column out. minmax(0, 1fr) fixes it.

   c) html/body have overflow-x: hidden (section 1), which is right, but it
      CLIPS the overflow - that is why labels looked sliced off on the right
      instead of scrolling.

   The selectors below are prefixed with .hero-section so they outrank the
   style.css rules and win without needing more !important than necessary.
   ========================================================================== */

@media (max-width: 768px) {

  /* --- the hero holding the form ---------------------------------------

     On a phone the photo gets its own band, starting directly BELOW the
     header so the header does not cover any of it, anchored top centre.
     The form starts below the photo, overlapping its bottom edge slightly
     so the two read as one piece.

     Two values to tune if needed:
       --header-h   where the photo starts. Set it to the header's height
                    on a phone; the photo begins just underneath.
       --hero-band  how tall the visible photo is. */
  .hero-section {
    --header-h: 84px;
    --hero-band: clamp(210px, 62vw, 300px);
    --hero-overlap: 32px;

    position: relative;
    height: auto !important;
    min-height: 0;
    padding: calc(var(--header-h) + var(--hero-band) - var(--hero-overlap)) 0 28px !important;
    background-image: none !important;   /* the photo moves to the band below */
    background-color: #f8f8fa !important;
  }

  .hero-section::before {
    content: "";
    position: absolute;
    top: var(--header-h);                /* starts under the header */
    left: 0;
    right: 0;
    height: var(--hero-band);
    background-image: url('../images/familyland.jpeg');
    background-size: contain;
    background-position: center top;     /* top centre */
    background-repeat: no-repeat;
    z-index: 0;
  }

  /* a soft fade into the page colour where the form begins */
  .hero-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--header-h) + var(--hero-band) - 70px);
    height: 70px;
    background: linear-gradient(to bottom, rgba(248, 248, 250, 0), #f8f8fa);
    z-index: 0;
    pointer-events: none;
  }

  .hero-section .hero-container {
    position: relative;
    z-index: 1;                          /* the form sits above the photo */
    width: 100%;
    height: auto !important;
    padding: 0 14px;
    align-items: stretch;
    box-sizing: border-box;
  }

  .hero-section .booking-form {
    box-shadow: 0 14px 34px rgba(8, 44, 43, 0.16) !important;
  }

  /* --- (a) the form fills the screen width and never exceeds it --- */
  .hero-section .booking-form {
    width: 100% !important;          /* beats style.css width: fit-content !important */
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;            /* replaces the -63px / 4rem / 6rem margins */
    padding: 18px 16px 20px !important;
    border-radius: 18px !important;
    box-sizing: border-box;
  }

  /* --- tabs and toggles ---------------------------------------------- */
  .hero-section .form-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 16px;
  }

  .hero-section .plan-tabs {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-section .toggle-options {
    display: flex;
    flex-wrap: wrap;                 /* the two toggles wrap instead of clipping */
    justify-content: center;
    gap: 12px 22px;
  }

  .hero-section .toggle-switch {
    font-size: 14px;
    white-space: nowrap;
  }

  /* --- (b) the grid can shrink below its content ---------------------- */
  .hero-section .form-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px;
    margin-bottom: 4px;
  }

  .hero-section .form-fields > *,
  .hero-section .custom-select,
  .hero-section .field-group {
    min-width: 0;                    /* lets a grid / flex child shrink */
    max-width: 100%;
    width: 100%;
  }

  .hero-section .field-label {
    display: block;
    font-size: 13px;
    color: #6b7c7b;
    margin-bottom: 7px;
    white-space: normal;
  }

  /* --- the branch dropdown: long names ellipsis instead of widening --- */
  .hero-section .branch-display {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid #d6dedd;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  /* --- date + time: stacked, full width, real inputs ----------------- */
  .hero-section .date-input-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;            /* style.css had flex-start, which shrink-wrapped them */
    gap: 0;
  }

  .hero-section .date-time-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 118px;   /* date | time side by side */
    gap: 8px;
    width: 100%;
    margin-top: 0;
  }

  .hero-section .date-time-field > * {
    float: none !important;
    width: 100% !important;          /* beats the inline style="width: 200px" */
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* target the date inputs by id too: they carry an inline width:200px, and
     if a date-picker plugin wraps them they are no longer direct children of
     .date-time-field, so the rule above would miss them */
  #from-date-picker,
  #to-date-picker,
  #from-time-picker,
  #to-time-picker {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
  }

  .hero-section .date-time-field > div {
    display: flex;
    width: 100% !important;
  }

  .hero-section .date-time-field input[type="text"],
  .hero-section .date-time-field input[type="time"],
  .hero-section .date-time-input {
    height: 48px !important;
    padding: 0 12px !important;
    border: 1px solid #d6dedd !important;
    border-radius: 10px !important;
    background: #fff;
    color: #082c2b;
  }

  /* --- the submit button -------------------------------------------- */
  .hero-section .form-footer {
    margin-top: 18px;
  }

  .hero-section .find-vehicle-btn {
    width: 100%;
    min-height: 50px;
    margin-top: 0;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
  }

  /* --- car grid and gallery ------------------------------------------ */
  .search-filters-section .filters {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .car-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery-section img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* SAFETY NET. The live page runs date-picker plugins and fills the branch
   list from the API after load; any of those can insert an element with its
   own fixed width. This caps every element inside the form at the form's
   width, so nothing a script adds can push it past the screen edge.
   The pop-up calendars are excluded: they are absolutely positioned and must
   keep their natural width or the calendar grid breaks. */
@media (max-width: 768px) {
  .hero-section .booking-form *:not(.bootstrap-datetimepicker-widget):not(.bootstrap-datetimepicker-widget *):not(.daterangepicker):not(.daterangepicker *):not(.dropdown-menu):not(.dropdown-menu *) {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* very narrow phones: put the time under the date instead of beside it */
@media (max-width: 360px) {
  .hero-section .date-time-field {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .car-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}