/* Limme - booking steps page (extras). Dark + gold, matches /hatzmadot/. */
.limme-steps-wrap {
  --g: #e2b756;
  --line: rgba(255,255,255,.14);
  width: auto; max-width: none;
  margin-inline: calc(50% - 50vw);
  padding: 120px clamp(14px,3vw,48px) 90px;
  background:
    radial-gradient(110% 80% at 50% 0%, #2a2419 0%, rgba(42,36,25,0) 60%),
    linear-gradient(180deg,#14130f 0%,#0b0b09 100%);
  color: #f2f2f2;
  font-family: inherit;
  /* NO overflow:hidden here - it kills position:sticky on the aside.
     html,body already carry overflow-x:clip globally. */
}
.limme-steps-wrap > * { max-width: 1160px; margin-inline: auto; }

/* ---------- step indicator ---------- */
.limme-steps {
  list-style: none;
  display: flex;
  max-width: 760px;
  margin: 0 auto 34px;
  padding: 0;
}
.limme-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.limme-step-num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--line);
  color: rgba(255,255,255,.65);
  font-weight: 700; font-size: 16px;
  position: relative; z-index: 2;
  transition: .2s;
}
.limme-step-label { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }
/* connector line (RTL-safe: draw toward the next, i.e. to the left) */
.limme-step::after {
  content: ""; position: absolute; top: 20px; height: 2px;
  width: calc(100% - 40px);
  inset-inline-end: calc(-50% + 20px);
  background: var(--line); z-index: 1;
}
.limme-step:last-child::after { display: none; }
.limme-step.is-active .limme-step-num { background: var(--g); border-color: var(--g); color:#12100b; box-shadow: 0 0 0 5px rgba(226,183,86,.18); }
.limme-step.is-active .limme-step-label { color:#fff; font-weight:700; }
.limme-step.is-done .limme-step-num { background:transparent; border-color:rgba(226,183,86,.45); color:var(--g); }
.limme-step.is-done .limme-step-label { color: rgba(255,255,255,.85); }
.limme-step.is-done::after,
.limme-step.is-active::after { background: var(--g); }

/* ---------- titles ---------- */
.limme-steps-title { text-align:center; margin:0 0 4px; font-size: clamp(22px,2.6vw,30px); font-weight:700; color:#fff; }
.limme-steps-sub { text-align:center; margin:0 0 28px; color: rgba(255,255,255,.55); font-size:14px; }

/* ---------- layout: cards (right 66%) + summary (left 34%) ---------- */
.limme-extras-layout { display:flex; gap:26px; align-items:flex-start; }
.limme-extras-grid {
  flex: 1 1 auto;
  display:grid; grid-template-columns: repeat(2,1fr); gap:16px; min-width:0;
}
.limme-extra-card {
  border:1px solid var(--line); border-radius:12px;
  background: rgba(255,255,255,.035);
  padding:18px 18px 16px;
  display:flex; flex-direction:column; gap:14px;
}
.limme-extra-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.limme-extra-name { font-size:16px; font-weight:700; color:#fff; }
.limme-extra-price { font-size:14px; font-weight:700; color:var(--g); white-space:nowrap; }
.limme-extra-price small { color: rgba(255,255,255,.5); font-weight:400; }

.limme-stepper {
  display:inline-flex; align-items:center; align-self:flex-start;
  border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.limme-stepper button {
  width:40px; height:40px; border:0; background:transparent; color:#fff;
  font-size:20px; cursor:pointer; transition:.15s;
}
.limme-stepper button:hover { background: rgba(226,183,86,.18); color:var(--g); }
.limme-qty {
  width:48px; height:40px; text-align:center; border:0;
  border-inline:1px solid var(--line);
  background:transparent; color:#fff; font-size:15px; font-weight:700;
  -moz-appearance:textfield;
}
.limme-qty::-webkit-outer-spin-button,
.limme-qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

/* ---------- summary ---------- */
.limme-extras-summary {
  flex: 0 0 320px; max-width:320px;
  border:1px solid var(--line); border-radius:12px;
  background: rgba(10,9,6,.5);
  padding:22px;
  position: sticky; top: 100px;
}
.limme-summary-car { display:flex; align-items:center; gap:12px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.limme-summary-car img { width:64px; height:42px; object-fit:contain; }
.limme-summary-car span { font-weight:700; color:var(--g); text-transform:uppercase; font-size:14px; }
.limme-extras-summary h3 { margin:0 0 12px; font-size:16px; color:#fff; }
.limme-summary-row { display:flex; justify-content:space-between; font-size:14px; color:#ddd8ce; padding:7px 0; }
.limme-summary-total {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:18px; font-weight:700; color:#fff;
}
.limme-summary-total .limme-grand-total { color:var(--g); }
.limme-continue {
  display:block; width:100%; margin-top:18px;
  background:var(--g); color:#12100b; border:0; border-radius:6px;
  padding:15px; font-size:17px; font-weight:700; cursor:pointer;
  transition:.15s;
}
.limme-continue:hover { background:#efc76c; transform:translateY(-1px); }
.limme-summary-note { margin:12px 0 0; text-align:center; font-size:11px; color: rgba(255,255,255,.45); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .limme-extras-layout { flex-direction:column; }
  .limme-extras-summary { position:static; flex-basis:auto; max-width:none; width:100%; order:2; }
  .limme-extras-grid { width:100%; order:1; }
}
@media (max-width: 560px) {
  .limme-steps-wrap { padding-top: 130px; }
  .limme-extras-grid { grid-template-columns:1fr; }
  .limme-step-label { font-size:11px; }
}


/* ---------- step 3: details + schedule ---------- */
.limme-details-layout { display:flex; gap:26px; align-items:flex-start; }
.limme-details-main { flex:1 1 auto; min-width:0; }
.limme-details-main input { color-scheme: dark; }
.limme-details-aside {
  flex:0 0 300px; max-width:300px;
  border:1px solid var(--line); border-radius:12px;
  background: rgba(10,9,6,.5); padding:22px;
  position:sticky; top:100px;
}
.limme-aside-note { font-size:12.5px; color: rgba(255,255,255,.55); margin:14px 0 0; line-height:1.6; }

.limme-field { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:10px 0; }
.limme-field > label { flex:none; color:#fff; font-size:15px; font-weight:600; }
.limme-field input {
  flex:none; width:100%; min-width:0; box-sizing:border-box;
  background: rgba(255,255,255,.07); border:1px solid var(--line); border-radius:8px;
  color:#fff; font-size:16px; text-align:right; padding:12px 14px;
}
.limme-field input:focus { outline:none; }
.limme-field input::placeholder { color: rgba(255,255,255,.35); }
.limme-field-repeat { flex-direction:column; align-items:stretch; gap:8px; }
.limme-field-repeat > label { flex:none; }
.limme-repeat { display:flex; flex-direction:column; gap:8px; }
.limme-repeat input { background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:8px; color:#fff; font-size:16px; padding:12px 14px; text-align:right; }
.limme-add-input, .limme-add-sched {
  align-self:flex-start; background:none; border:0; color:var(--g);
  font-weight:600; font-size:13.5px; cursor:pointer; padding:6px 0; margin-top:2px;
}
.limme-add-input:hover, .limme-add-sched:hover { text-decoration:underline; }

.limme-sched-title { margin:26px 0 12px; font-size:18px; font-weight:700; color:#fff; }
.limme-sched-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
.limme-schedule { width:100%; border-collapse:collapse; }
.limme-schedule th { background: rgba(255,255,255,.06); color:#fff; font-size:13px; font-weight:600; padding:12px 10px; text-align:right; white-space:nowrap; }
.limme-schedule td { border-top:1px solid var(--line); padding:8px 10px; }
.limme-schedule input {
  width:100%; background:transparent; border:0; border-bottom:1px solid transparent;
  color:#fff; font-size:14px; padding:6px 2px; text-align:right; color-scheme:dark;
}
.limme-schedule input[type="time"] { text-align:left; }
.limme-schedule input:focus { border-bottom-color:var(--g); outline:none; }

.limme-continue-inline { max-width:280px; margin-top:26px; }

@media (max-width:900px){
  .limme-details-layout{ flex-direction:column; }
  .limme-details-aside{ position:static; flex-basis:auto; max-width:none; width:100%; order:-1; }
}
@media (max-width:560px){
  .limme-field{ flex-direction:column; align-items:stretch; gap:6px; }
  .limme-field > label{ flex:none; }
  .limme-field > input{ text-align:right; border-bottom:1px solid var(--line); }
}

/* center titles across the section (beat .limme-steps-wrap>* max-width) */
.limme-steps-wrap > .limme-steps-title,
.limme-steps-wrap > .limme-steps-sub {
  max-width: none;
  margin-inline: 0;
  text-align: center;
}

/* [hidden] beats the flex display */
.limme-summary-row[hidden] { display: none !important; }

.limme-aside-extras { margin-top:0; padding-top:0; border-top:0; }
.limme-aside-extras h4 { margin:0 0 8px; font-size:14px; color:#fff; }
.limme-aside-extras ul { list-style:none; margin:0; padding:0; }
.limme-aside-extras li { font-size:13px; color:#ddd8ce; padding:3px 0; display:flex; justify-content:space-between; }

/* time picker: hour + minute dropdowns */
/* direction:ltr so it reads HH:MM (in RTL the hour select would land on the right = "45:12") */
.limme-time { display:flex; gap:8px; align-items:center; direction:ltr; justify-content:flex-end; }
.limme-time select {
  background: rgba(255,255,255,.07); border:1px solid var(--line); border-radius:8px;
  color:#fff; font-size:16px; padding:12px 10px; color-scheme:dark; cursor:pointer;
  flex:0 0 auto; width:96px; text-align:center;
}
.limme-time select:focus { outline:none; border-color:var(--g); }
.limme-time-sep { color:rgba(255,255,255,.45); font-weight:700; }
/* compact inside the לו"ז table */
.limme-schedule .limme-time select { font-size:14px; padding:8px 6px; }


/* time selects: keep HH:MM order (container ltr) but render each select RTL
   so the dropdown arrow sits on the LEFT, like the rest of the RTL form */
.limme-time select { direction: rtl; }

/* כמות נוסעים: minus/plus stepper inside a stacked field.
   .limme-field input would otherwise stretch it into a full-width box. */
.limme-field .limme-stepper { align-self: flex-start; }
.limme-field .limme-stepper .limme-qty {
  flex: none;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-size: 16px;
}
.limme-field .limme-stepper button { width: 44px; height: 44px; }

/* location pin inside כתובת איסוף / כתובת סיום */
.limme-repeat input {
  background-color: rgba(255, 255, 255, .07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e2b756'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 38px;
}
/* two fields side by side (שעת התחלה / שעת סיום) */
/* fields hug each other instead of each taking 50% of the row */
.limme-field-row { display:flex; gap:22px; justify-content:flex-start; flex-wrap:wrap; }
.limme-field-row > .limme-field { flex:0 0 auto; min-width:0; }
@media (max-width:560px){ .limme-field-row { flex-direction:column; gap:0; } }
/* the לו"ז table needs tighter time boxes */
.limme-schedule .limme-time select { width:72px; font-size:14px; padding:8px 4px; }
/* whole date field is clickable (JS calls showPicker) */
.limme-field input[type="date"] { cursor:pointer; }


/* ===== LIMME-ROUND-V2: rounder fields (match the checkout) + המשך hover ===== */
.limme-field > input,
.limme-repeat input,
.limme-time select,
.limme-schedule input[type="text"] {
  border-radius: 10px !important;
}
.limme-field .limme-stepper { border-radius: 10px; overflow: hidden; }
.limme-sched-scroll { border-radius: 12px; }

/* white outline on hover */
.limme-continue {
  border: 2px solid transparent !important;
}
.limme-continue:hover {
  border-color: #fff !important;
}

/* ===================== LIMME-STEPS-MOBILE =====================
   Appended last so it beats the earlier 900/560px blocks. */
@media (max-width: 767px) {

  /* ---- step 2: the chosen-car header was tiny next to everything else ---- */
  .limme-summary-car img { width: 88px; height: 58px; }
  .limme-summary-car span { font-size: 18px; }

  /* ---- step 3 ---- */
  /* The price breakdown pushed תאריך איסוף far below the fold; it is shown
     again in full at step 4, so on a phone the fields come first. */
  .limme-details-aside { display: none; }

  /* Flex/grid items default to min-width:auto, so the לו"ז table's 425px
     min-content width stretched this column to 427px inside a 390px screen -
     and in RTL the overflow escaped LEFT, which is why every field looked
     "too long" and unbalanced against its 14px right inset. */
  .limme-details-layout,
  .limme-details-main { min-width: 0; }
  .limme-details-main { width: 100%; }

  /* לו"ז: three columns cannot fit a phone. Stack each stop as a card -
     address full width, the two times side by side under it. */
  .limme-sched-scroll { overflow: visible; }
  .limme-schedule,
  .limme-schedule tbody { display: block; width: 100%; }
  .limme-schedule thead { display: none; }
  .limme-schedule tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, .03);
  }
  .limme-schedule td { display: block; padding: 0; border: 0; }
  .limme-schedule td:nth-child(1) { grid-column: 1 / -1; }
  .limme-schedule td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, .7);
  }
  .limme-schedule td input[type="text"] { width: 100%; box-sizing: border-box; }
  .limme-schedule .limme-time { justify-content: stretch; gap: 6px; }
  .limme-schedule .limme-time select {
    width: 100%;
    flex: 1 1 0;
    min-width: 0;
    font-size: 15px;
    padding: 10px 4px;
  }
}

/* ===================== LIMME-STEP3-V2 ===================== */
@media (max-width: 767px) {
  /* iOS zooms the page when a focused control has font-size < 16px. The לו"ז
     address inputs (14px) and time selects (15px) were triggering it - bump
     every focusable control on this step to 16px so tapping never zooms. */
  .limme-details-main input,
  .limme-details-main select,
  .limme-details-main textarea,
  .limme-schedule input,
  .limme-schedule select,
  .limme-schedule .limme-time select { font-size: 16px !important; }

  /* date field: force it to the exact same box as the text fields so it never
     renders wider than כתובת איסוף (native date inputs can grow past their
     container on some mobile browsers). */
  .limme-details-main input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 50px;
    -webkit-appearance: none;
    appearance: none;
  }
}

/* required-field validation: red frame on the missing field's box */
.limme-field.limme-invalid > input,
.limme-field.limme-invalid .limme-time select,
.limme-field.limme-invalid .limme-stepper {
  border-color: #e5534b !important;
  box-shadow: 0 0 0 1px #e5534b;
}
.limme-field.limme-invalid > label { color: #e5877f; }

/* "שדות חובה" popup - a toast pinned to the top-centre */
.limme-req-popup {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -20px);
  z-index: 2147483000;
  background: #b3241c;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  max-width: calc(100vw - 32px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  direction: rtl;
}
.limme-req-popup.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* LIMME-STEPS-TOPGAP: 130px of desktop top padding is a canyon on a phone. */
@media (max-width: 767px) {
  .limme-steps-wrap { padding-top: 34px; }
}

/* ===================== LIMME-PLACES =====================
   The step-3 price-breakdown heading had no rule of its own, so it inherited the
   theme h3 at 28px - twice the size of the total under it. Match the total. */
.limme-details-aside h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

/* Google Places dropdown is appended to <body>, so it escapes our scoping and
   ships white / LTR by default. Repaint it to match the dark RTL form. */
.pac-container {
  z-index: 2147483001;
  direction: rtl;
  text-align: right;
  background: #1c1710;
  border: 1px solid rgba(226, 183, 86, .45);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  margin-top: 4px;
  padding: 4px;
  font-family: inherit;
  overflow: hidden;
}
.pac-container::after { display: none !important; }
.pac-item {
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 14px;
  color: #ddd8ce;
  cursor: pointer;
  line-height: 1.45;
}
.pac-item:hover,
.pac-item-selected { background: rgba(226, 183, 86, .16); }
.pac-item-query { color: #fff; font-size: 14px; }
.pac-matched { color: #e2b756; }
.pac-icon { display: none; }