/* ══════════════════════════════════════════════════════════════
   Arabic Booking Form — Design A
   File: public/css/ar-booking-design-a.css
   Loaded: AR locale only (hero-booking.blade.php)
   Scope: .ar-bk-card  —  all rules here are scoped inside it.
   Mockup: _cline_tmp/ar_booking_design_a.html  (birebir)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Reset the outer content_tabs card — ar-bk-card takes over ── */
html[dir="rtl"] .cab-hero-home-layout .hero-form-col .content_tabs {
  background:   transparent !important;
  box-shadow:   none !important;
  border:       none !important;
  padding:      0    !important;
  overflow:     visible !important;
  border-radius:0    !important;
  backdrop-filter: none !important;
}

/* ── 2. Color tokens (CSS vars scoped to card) ── */
.ar-bk-card {
  --ar-gold:      #f0b429;
  --ar-gold-d:    #c8920a;
  --ar-gold-x:    #ffc846;
  --ar-gold-glow: rgba(240,180,41,.18);
  --ar-ink:       #0d0d0d;
  --ar-dark:      #1a1714;
  --ar-mid:       #5c5752;
  --ar-dim:       #9a9590;
  --ar-stone:     #ddd8d0;
  --ar-sand:      #ece6da;
  --ar-cream:     #f5f0e8;
  --ar-ivory:     #faf8f3;
  --ar-r:         12px;
}

/* ── 3. Card shell ── */
.ar-bk-card {
  width:         100%;
  background:    #fff;
  border-radius: 18px;
  box-shadow:
    0 3px 0 0 #f0b429 inset,
    0 28px 64px rgba(0,0,0,.20),
    0 6px 16px rgba(0,0,0,.07);
  overflow:      hidden;
  direction:     rtl;
}

/* ── 4. Tab bar ── */
.ar-bk-card .ar-tabs {
  display:         flex;
  flex-direction:  row-reverse;
  padding:         0 22px;
  border-bottom:   1px solid #ece6da;
  background:      #fff;
  gap:             4px;
  margin:          0;
  list-style:      none;
}

.ar-bk-card .ar-tab {
  display:        inline-block;
  padding:        13px 18px;
  font-size:      12px;
  font-weight:    700;
  color:          #aaa;
  cursor:         pointer;
  border:         none;
  background:     transparent;
  border-bottom:  2.5px solid transparent;
  margin-bottom: -1px;
  letter-spacing: 0;
  transition:     color .2s;
  text-decoration:none;
  white-space:    nowrap;
}

.ar-bk-card .ar-tab.ar-tab--active,
.ar-bk-card .ar-tab.active {
  color:               #0d0d0d;
  border-bottom-color: #f0b429;
}

/* ── 5. Form body padding ── */
.ar-bk-card .ar-form-body {
  padding: 14px 22px 0;
}
/* Reset Bootstrap default margins for block elements inside the card */
.ar-bk-card .ar-form-body ul,
.ar-bk-card .ar-form-body ol,
.ar-bk-card .ar-form-body p,
.ar-bk-card .ar-form-body h1,
.ar-bk-card .ar-form-body h2,
.ar-bk-card .ar-form-body h3 {
  margin-bottom: 0;
}

/* ── 6. Primary 4-column RTL grid ─────────────────────────────
   DOM order → visual (RTL) order:
   [من أين 1.7fr] [إلى أين 1.3fr] [تاريخ 1.1fr] [أشخاص .85fr]
   With direction:rtl on the grid, col-1 is RIGHTMOST.
   ───────────────────────────────────────────────────────────── */
.ar-bk-card .ar-row-primary {
  display: grid;
  grid-template-columns:
    minmax(0,1.7fr)
    minmax(0,1.3fr)
    minmax(0,1.1fr)
    minmax(0,.85fr);
  direction: rtl;
  gap:       10px;
  margin-bottom: 8px;
}

/* ── 7. Field wrapper ── */
.ar-bk-card .ar-f {
  display:        flex;
  flex-direction: column;
  gap:            5px;
}
.ar-bk-card .ar-f.ar-mt8 { margin-top: 8px; }

/* ── 8. Labels ── */
.ar-bk-card .ar-lbl {
  font-size:      10.5px;
  font-weight:    600;
  letter-spacing: .02em;
  color:          #9a9590;
  text-align:     right;
  direction:      rtl;
  display:        block;
}

/* ── 9. Pickup row (input + add-stop btn side-by-side) ── */
.ar-bk-card .ar-pickup-row {
  display:     flex;
  gap:         7px;
  align-items: center;
}
.ar-bk-card .ar-pickup-row input {
  flex: 1 1 auto;
  min-width: 0;
}

/* ── 10. Text inputs ── */
.ar-bk-card .ar-input {
  width:       100%;
  min-height:  48px;
  padding:     10px 14px;
  font-size:   13.5px;
  font-weight: 500;
  color:       #0d0d0d;
  background:  #faf8f3;
  border:      1.5px solid #ddd8d0;
  border-radius: 10px;
  direction:   rtl;
  text-align:  right;
  outline:     none;
  transition:  border-color .2s, background .2s, box-shadow .2s;
  box-sizing:  border-box;
  display:     block;
}
.ar-bk-card .ar-input:focus {
  background:  #fff;
  border-color:#f0b429;
  box-shadow:  0 0 0 3px rgba(240,180,41,.14);
}
.ar-bk-card .ar-input::placeholder {
  color:       #c0b8ae;
  font-size:   13px;
  font-weight: 400;
}
.ar-bk-card .ar-input:disabled {
  background:  #f0ede8;
  color:       #9a9590;
  cursor:      not-allowed;
}
/* Keep datetime inputs LTR */
.ar-bk-card .ar-input.dinamicGo,
.ar-bk-card .ar-input.dinamicElem {
  direction:   ltr !important;
  text-align:  left !important;
}

/* ── 11. Select / pax ── */
.ar-bk-card .ar-sel-w {
  position: relative;
}
.ar-bk-card .ar-sel {
  width:        100%;
  min-height:   48px;
  padding:      0 14px 0 28px;
  font-size:    13.5px;
  font-weight:  500;
  color:        #0d0d0d;
  background:   #faf8f3;
  border:       1.5px solid #ddd8d0;
  border-radius:10px;
  direction:    rtl;
  text-align:   right;
  outline:      none;
  appearance:   none;
  -webkit-appearance: none;
  cursor:       pointer;
  transition:   border-color .2s;
  box-sizing:   border-box;
}
.ar-bk-card .ar-sel:focus {
  background:   #fff;
  border-color: #f0b429;
}
.ar-bk-card .ar-sel-w::after {
  content:        '▾';
  position:       absolute;
  left:           10px;
  top:            50%;
  transform:      translateY(-50%);
  color:          #f0b429;
  pointer-events: none;
  font-size:      14px;
}

/* ── 12. Add-stop button ── */
.ar-bk-card .ar-stop-btn {
  flex:         0 0 auto;
  min-height:   48px;
  padding:      0 14px;
  font-size:    12.5px;
  font-weight:  600;
  color:        #7a7268;
  background:   #faf8f3;
  border:       1.5px solid #ddd8d0;
  border-radius:10px;
  cursor:       pointer;
  white-space:  nowrap;
  transition:   border-color .2s, color .2s, background .2s;
  line-height:  1;
}
.ar-bk-card .ar-stop-btn:hover {
  border-color: #f0b429;
  color:        #b87910;
  background:   #fffaf0;
}

/* ── 13. Stops chain (injected by app.js) ── */
.ar-bk-card .ar-stops-chain {
  margin-bottom: 6px;
  direction:     rtl;
  /* clearfix — floated stop blocks must be cleared */
  overflow:      hidden;
}
/* No space when chain is empty (no stops added yet) */
.ar-bk-card .ar-stops-chain:empty {
  margin-bottom: 0;
  display:       none;
}

/* ── Root cause fix ──────────────────────────────────────────────
   app.js injects:
     <div class="x_slider_form_input_wrapper float_left transfer-stop-block">
   global style.css gives .float_left:  float:left; width:100%
   This float breaks the AR flex card layout and pushes the
   return-row behind the floated block.
   Fix: override float inside .ar-bk-card.
   ──────────────────────────────────────────────────────────────── */
.ar-bk-card .ar-stops-chain .transfer-stop-block,
.ar-bk-card .ar-stops-chain .x_slider_form_input_wrapper {
  float:     none !important;
  width:     100% !important;
  max-width: 100% !important;
  box-sizing:border-box !important;
  direction: rtl;
  text-align:right;
  margin-top:8px;
}

/* Stop header row: RTL order */
.ar-bk-card .ar-stops-chain .stop-toggle-row {
  display:         flex;
  flex-direction:  row-reverse;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   4px;
}
.ar-bk-card .ar-stops-chain .stop-title {
  font-size:      10.5px;
  font-weight:    600;
  color:          #9a9590;
  direction:      rtl;
  text-align:     right;
}

/* Stop input row */
.ar-bk-card .ar-stops-chain .transfer-stop-row {
  direction: rtl;
}

/* ── stop-input-wrap: flex row ──────────────────────────────────
   Replace the old "location input with padding + abs duration box"
   approach with a clean flex row:
     [location input — flex 1]  [duration card — 128px fixed]
   ──────────────────────────────────────────────────────────────── */
.ar-bk-card .ar-stops-chain .stop-input-wrap {
  display:  flex;
  gap:      8px;
  align-items: stretch;
  position: static !important;  /* cancel global position:relative */
  width:    100%;
}

/* Location input: fills remaining space, normal AR padding */
.ar-bk-card .ar-stops-chain .stop-input-wrap input[type="text"],
.ar-bk-card .ar-stops-chain .stop-location-input {
  flex:          1 1 auto !important;
  min-width:     0;
  width:         auto !important;
  min-height:    48px;
  padding:       10px 14px !important;   /* reset the 110px hack */
  direction:     rtl !important;
  text-align:    right !important;
  background:    #faf8f3;
  border:        1.5px solid #ddd8d0;
  border-radius: 10px;
  font-size:     13.5px;
  font-weight:   500;
  color:         #0d0d0d;
  box-sizing:    border-box !important;
  outline:       none;
  transition:    border-color .2s, box-shadow .2s;
}
.ar-bk-card .ar-stops-chain .stop-location-input:focus {
  background:   #fff;
  border-color: #f0b429;
  box-shadow:   0 0 0 3px rgba(240,180,41,.14);
}

/* ── Duration card ───────────────────────────────────────────────
   Sits NEXT TO the location input (flex sibling).
   No more position:absolute — layout is predictable.
   ──────────────────────────────────────────────────────────────── */
.ar-bk-card .ar-stops-chain .stop-duration-box {
  position:        static !important;   /* cancel global position:absolute */
  transform:       none   !important;
  left:            auto   !important;
  right:           auto   !important;
  top:             auto   !important;
  flex:            0 0 128px;
  width:           128px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  background:      #faf8f3;
  border:          1.5px solid #ddd8d0;
  border-radius:   10px;
  padding:         8px 6px;
  text-align:      center;
  box-sizing:      border-box;
  transition:      border-color .2s, box-shadow .2s;
}
.ar-bk-card .ar-stops-chain .stop-duration-box:focus-within {
  border-color: #f0b429;
  box-shadow:   0 0 0 3px rgba(240,180,41,.14);
  background:   #fff;
}

/* Real label injected by JS MutationObserver */
.ar-bk-card .ar-stops-chain .stop-dur-label {
  display:        block;
  font-size:      9px;
  font-weight:    700;
  color:          #9a9590;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space:    nowrap;
  line-height:    1;
}

/* Time input inside duration card */
.ar-bk-card .ar-stops-chain .stop-duration-box input[type="time"],
.ar-bk-card .ar-stops-chain .stop-duration-input {
  width:         100% !important;
  max-width:     100px;
  padding:       6px 8px;
  font-size:     16px;
  font-weight:   700;
  color:         #0d0d0d;
  background:    #fff;
  border:        1.5px solid #ddd8d0;
  border-radius: 8px;
  direction:     ltr;
  text-align:    center;
  outline:       none;
  box-shadow:    none;
  transition:    border-color .2s;
  box-sizing:    border-box;
  -webkit-appearance: none;
}
.ar-bk-card .ar-stops-chain .stop-duration-box input[type="time"]:focus {
  border-color: #f0b429;
  box-shadow:   0 0 0 2px rgba(240,180,41,.18);
}

/* Free-waiting note — green, shown below time input */
.ar-bk-card .ar-stops-chain .stop-waiting-note {
  display:     block;
  font-size:   8.5px;
  color:       #27a060;
  font-weight: 600;
  white-space: nowrap;
  text-align:  center;
  direction:   rtl;
  line-height: 1.2;
}

/* Remove btn */
.ar-bk-card .ar-stops-chain .js-stop-remove {
  font-size: 11.5px;
  color:     #dc2626;
  padding:   2px 6px;
}

/* Remove btn inside stop block */
.ar-bk-card .ar-stops-chain .js-stop-remove {
  font-size: 11.5px;
  color:     #dc2626;
  padding:   2px 6px;
}

/* ── 14. Return options row ── */
.ar-bk-card .ar-return-row {
  display:         flex;
  flex-direction:  row-reverse;
  align-items:     center;
  gap:             16px;
  flex-wrap:       wrap;
  padding:         6px 0 2px;
  direction:       rtl;
  clear:           both; /* clear floated stop blocks */
}

/* Custom RTL checkbox label */
.ar-bk-card .ar-chk-label {
  display:         flex;
  flex-direction:  row-reverse;
  align-items:     center;
  gap:             8px;
  font-size:       13px;
  font-weight:     500;
  color:           #1a1714;
  cursor:          pointer;
  white-space:     nowrap;
}
.ar-bk-card .ar-chk {
  width:       17px;
  height:      17px;
  accent-color:#f0b429;
  cursor:      pointer;
  flex-shrink: 0;
}

/* Discount hint beside checkboxes */
.ar-bk-card .ar-return-hint {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   12px;
  font-weight: 500;
  color:       #7a6a4a;
  direction:   rtl;
  white-space: nowrap;
}
.ar-bk-card .ar-return-hint__ico {
  color: #f0b429;
}

/* ── 15. Return datetime block (JS adds .is-visible) ── */
.ar-bk-card .hrh-d9-return-datetime {
  display: none;
}
.ar-bk-card .hrh-d9-return-datetime.is-visible {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 8px;
}

/* Return diff block */
.ar-bk-card .return-diff-block {
  direction: rtl;
}
.ar-bk-card .return-diff-block .ar-f {
  margin-top: 8px;
}

/* ── 16. Footer: trust list + CTA ── */
.ar-bk-card .ar-footer {
  display:          flex;
  flex-direction:   row-reverse;
  align-items:      center;
  justify-content:  space-between;
  flex-wrap:        wrap;
  gap:              10px;
  padding:          10px 22px 14px;
  border-top:       1px solid #ece6da;
  margin-top:       4px;
}

/* Trust bullets */
.ar-bk-card .ar-trust-list {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  direction:      rtl;
  text-align:     right;
  padding:        0 !important;
  margin:         0 !important;
  list-style:     none;
}
.ar-bk-card .ar-trust-list li {
  display:          flex;
  flex-direction:   row-reverse;
  align-items:      center;
  justify-content:  flex-end;
  gap:              6px;
  font-size:        11px;
  font-weight:      500;
  color:            #6a6460;
  line-height:      1.3;
  margin:           0;
  padding:          0;
}
.ar-bk-card .ar-trust-list li .ico {
  color:       #f0b429;
  font-size:   12px;
  flex-shrink: 0;
}

/* CTA / Submit */
.ar-bk-card .ar-cta {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              9px;
  background:       #f0b429;
  color:            #0d0d0d;
  font-size:        14px;
  font-weight:      800;
  min-height:       50px;
  padding:          0 32px;
  border:           none;
  border-radius:    10px;
  cursor:           pointer;
  box-shadow:       0 5px 18px rgba(240,180,41,.38);
  transition:       background .2s, transform .15s, box-shadow .15s;
  direction:        rtl;
  white-space:      nowrap;
  text-decoration:  none;
}
.ar-bk-card .ar-cta:hover {
  background:  #c8920a;
  transform:   translateY(-1px);
  box-shadow:  0 8px 26px rgba(200,146,10,.48);
}
.ar-bk-card .ar-cta:focus {
  outline: 3px solid rgba(240,180,41,.5);
  outline-offset: 2px;
}
.ar-bk-card .ar-cta-arrow {
  display:   inline-block;
  font-size: 14px;
}

/* ── 17. Inline error / validation messages ── */
.ar-bk-card .errorWrapText {
  display:       none;
  padding:       8px 12px;
  background:    #fff3f3;
  border:        1px solid #fca5a5;
  border-radius: 8px;
  margin-bottom: 12px;
  color:         #dc2626;
  font-size:     13px;
  text-align:    right;
  direction:     rtl;
}
.ar-bk-card .pickup-istanbul-only-error,
.ar-bk-card .text-danger,
.ar-bk-card .js-select-from-list-error,
.ar-bk-card .persons-error,
.ar-bk-card .js-persons-error,
.ar-bk-card .js-pickup-notice,
.ar-bk-card .js-return-notice {
  font-size:   11.5px;
  color:       #dc2626;
  text-align:  right;
  direction:   rtl;
  margin-top:  2px;
}

/* ── 18. Google Places autocomplete RTL ── */
.pac-container {
  direction: rtl;
  text-align: right;
}

/* ══ Responsive breakpoints ══ */

/* Tablet 2-column */
@media (max-width: 900px) {
  .ar-bk-card .ar-row-primary {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile single-column */
@media (max-width: 560px) {
  .ar-bk-card .ar-row-primary {
    grid-template-columns: 1fr;
  }
  .ar-bk-card .ar-form-body {
    padding: 14px 14px 0;
  }
  .ar-bk-card .ar-footer {
    padding:         12px 14px 16px;
    flex-direction:  column-reverse;
    align-items:     stretch;
  }
  .ar-bk-card .ar-cta {
    width:            100%;
    justify-content:  center;
  }
  .ar-bk-card .ar-return-row {
    gap: 12px;
  }
  .ar-bk-card .ar-tabs {
    padding: 0 14px;
  }
  .ar-bk-card .ar-tab {
    padding: 11px 12px;
    font-size: 11px;
  }
}

/* ── Mobile card below hero (ar-bk-card--mobile variant) ── */
.ar-bk-card.ar-bk-card--mobile {
  border-radius: 14px;
  margin-bottom: 16px;
}