/* ==========================================================================
   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
   Carried over from responsive-fixes.css.
   ========================================================================== */

@media (max-width: 768px) {
  .booking-form,
  .search-filters-section .filters {
    max-width: fit-content;
  }

  .form-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  

  /* the date inputs carry an inline style="width: 200px", which only an
     !important rule can override */
  .date-time-field > * {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
  }

  .car-grid {
    grid-template-columns: 1fr;
  }

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

@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;
  }
}
@media (max-width: 600px) {
.date-time-field {
        display: flex;
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
  }
  input#to-time-picker {
    margin: inherit;
}

}