/* RideForge Booking — standalone form styles (scoped, theme-agnostic). */
.rfb {
  --rfb-accent: #f7b500;
  --rfb-accent2: #ff8a00;
  --rfb-btn-text: #1a1407;
  --rfb-ink: #1a2233;
  --rfb-ink2: #5b6678;
  --rfb-line: #e3e7ef;
  --rfb-bg: #fff;
  --rfb-bg2: #f6f8fc;
  --rfb-secondary: #141414;
  --rfb-radius: 14px;
  max-width: 1040px; margin: 0 auto; box-sizing: border-box;
  background: var(--rfb-bg); color: var(--rfb-ink);
  border: 1px solid var(--rfb-line); border-radius: max(12px, var(--rfb-radius));
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 24px 60px -34px rgba(20,33,61,.32);
  font-family: inherit; line-height: 1.45;
}
.rfb[data-shadow="0"] { box-shadow: none; }
.rfb *, .rfb *::before, .rfb *::after { box-sizing: border-box; }
/* CRITICAL: author display rules below would otherwise beat the UA [hidden] rule,
   which kept the round-trip return fields visible in one-way mode. */
.rfb [hidden] { display: none !important; }
/* Dark mode */
.rfb[data-theme="dark"] {
  --rfb-ink: #eef3ff; --rfb-ink2: #9fb0d0; --rfb-line: rgba(255,255,255,.14);
  --rfb-bg: #0c1426; --rfb-bg2: #131d33;
}
.rfb__head { margin-bottom: 16px; }
.rfb__title { margin: 0 0 4px; font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; }
.rfb__sub { margin: 0; color: var(--rfb-ink2); font-size: 15px; }

.rfb__triptype { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--rfb-bg2); border: 1px solid var(--rfb-line); border-radius: 999px; }
.rfb__trip { border: 0; background: none; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--rfb-ink2); }
.rfb__trip.is-active { background: var(--rfb-accent); color: #fff; }

.rfb__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.rfb__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 720px) { .rfb__row, .rfb__grid { grid-template-columns: 1fr; } }

.rfb__field { display: grid; gap: 6px; min-width: 0; }
.rfb__field > span { font-size: 12.5px; font-weight: 600; color: var(--rfb-ink2); }
.rfb__field input, .rfb__field textarea, .rfb__field select {
  width: 100%; padding: 12px 13px; font-size: 15px; color: var(--rfb-ink);
  background: var(--rfb-bg); border: 1.5px solid var(--rfb-line); border-radius: 11px;
  font-family: inherit; transition: border-color .15s, box-shadow .15s;
}
.rfb__field input:focus, .rfb__field textarea:focus, .rfb__field select:focus {
  outline: none; border-color: var(--rfb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfb-accent) 22%, transparent);
}
.rfb__field.has-error input, .rfb__field.has-error textarea { border-color: #e23; box-shadow: 0 0 0 3px rgba(238,34,51,.16); }

.rfb__veh-label { font-size: 13px; font-weight: 700; color: var(--rfb-ink2); margin-bottom: 10px; }
.rfb__vehicles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.rfb__veh {
  display: grid; gap: 3px; justify-items: start; text-align: left; cursor: pointer;
  padding: 13px 14px; background: var(--rfb-bg); border: 1.5px solid var(--rfb-line); border-radius: 13px;
  transition: border-color .15s, box-shadow .15s, transform .1s; color: var(--rfb-ink);
}
.rfb__veh:hover { border-color: var(--rfb-accent); }
.rfb__veh.is-active { border-color: var(--rfb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfb-accent) 18%, transparent); background: color-mix(in srgb, var(--rfb-accent) 6%, #fff); }
.rfb__veh.is-disabled { opacity: .4; cursor: not-allowed; filter: grayscale(1); border-style: dashed; }
.rfb__veh-ico { color: var(--rfb-accent); }
.rfb__veh-name { font-weight: 700; font-size: 15px; }
.rfb__veh-meta { font-size: 12px; color: var(--rfb-ink2); }
.rfb__veh-note { min-height: 1em; font-size: 12.5px; font-weight: 600; color: var(--rfb-ink2); margin: 6px 0 14px; }
.rfb__veh-note.is-warn { color: #d22; }

.rfb__fare {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; margin: 6px 0 18px; border-radius: 13px;
  background: var(--rfb-bg2); border: 1px solid var(--rfb-line);
}
.rfb__fare-label { font-size: 13px; font-weight: 600; color: var(--rfb-ink2); }
.rfb__fare-val { font-size: 20px; font-weight: 800; color: var(--rfb-ink); }
.rfb__fare.is-empty .rfb__fare-val { font-size: 14px; font-weight: 600; color: var(--rfb-ink2); }
.rfb__fare.is-loading .rfb__fare-val { opacity: .6; }

.rfb__pay { display: grid; gap: 8px; margin-bottom: 16px; }
.rfb__pay-label { font-size: 13px; font-weight: 700; color: var(--rfb-ink2); }
.rfb__pay label { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1.5px solid var(--rfb-line); border-radius: 11px; font-size: 14px; cursor: pointer; }
.rfb__pay label:has(input:checked) { border-color: var(--rfb-accent); background: color-mix(in srgb, var(--rfb-accent) 6%, #fff); }

.rfb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.rfb__alert { background: #fef2f2; color: #b3261e; border: 1px solid #fecaca; border-radius: 11px; padding: 11px 14px; font-size: 14px; margin-bottom: 14px; }

.rfb__submit {
  width: 100%; border: 0; cursor: pointer; border-radius: 13px; padding: 15px 20px;
  font-size: 16px; font-weight: 800; color: var(--rfb-btn-text); background: var(--rfb-accent);
  box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--rfb-accent) 80%, #000);
  transition: transform .12s, filter .15s; font-family: inherit;
}
.rfb__submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rfb__submit.is-busy { opacity: .75; cursor: progress; }

.rfb__success { text-align: center; padding: 18px 10px; }
.rfb__success-ico { width: 60px; height: 60px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--rfb-accent) 12%, #fff); color: var(--rfb-accent); }
.rfb__success-title { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.rfb__success-msg { margin: 0 0 8px; color: var(--rfb-ink2); }
.rfb__success-ref { font-weight: 800; letter-spacing: .04em; color: var(--rfb-accent); }

/* Google Places dropdown above everything */
.pac-container { z-index: 100001 !important; }

/* ============ Two-step flow, vehicle cards w/ photos, phone, WhatsApp ============ */
.rfb__quote, .rfb__book {
  width: 100%; border: 0; cursor: pointer; border-radius: 13px; padding: 14px 20px;
  font-size: 15px; font-weight: 800; color: var(--rfb-btn-text);
  background: linear-gradient(120deg, var(--rfb-accent), var(--rfb-accent2));
  box-shadow: 0 14px 28px -14px var(--rfb-accent); transition: transform .12s, filter .15s, opacity .15s;
  font-family: inherit; margin-top: 4px;
}
.rfb__quote:hover, .rfb__book:hover { filter: brightness(1.05); transform: translateY(-1px); }
.rfb__quote.is-busy, .rfb__book.is-busy { opacity: .7; cursor: progress; }
.rfb__book { margin-top: 14px; }
.rfb__book:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; filter: grayscale(.3); }

.rfb__vehicles-wrap { margin-top: 22px; }
.rfb__vehicles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.rfb__veh {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  text-align: left; cursor: pointer; padding: 12px 14px; background: var(--rfb-bg);
  border: 1.5px solid var(--rfb-line); border-radius: 14px; color: var(--rfb-ink);
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.rfb__veh:hover { border-color: var(--rfb-accent); transform: translateY(-1px); }
.rfb__veh.is-active { border-color: var(--rfb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rfb-accent) 20%, transparent); background: color-mix(in srgb, var(--rfb-accent) 6%, var(--rfb-bg)); }
.rfb__veh-photo { width: 60px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--rfb-bg2); flex: none; display: grid; place-items: center; }
.rfb__veh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rfb__veh-photo--ph::after { content: "🚗"; font-size: 22px; opacity: .5; }
.rfb__veh-body { min-width: 0; display: grid; gap: 2px; }
.rfb__veh-name { font-weight: 700; font-size: 15px; }
.rfb__veh-meta { font-size: 12px; color: var(--rfb-ink2); }
.rfb__veh-price { font-weight: 800; font-size: 17px; color: var(--rfb-ink); white-space: nowrap; }
.rfb__veh-price--soft { font-size: 11px; font-weight: 600; color: var(--rfb-ink2); max-width: 90px; white-space: normal; text-align: right; }
.rfb__veh-label { font-size: 13px; font-weight: 700; color: var(--rfb-ink2); margin-bottom: 10px; }
.rfb__veh-note { min-height: 1em; font-size: 12.5px; font-weight: 600; color: var(--rfb-ink2); margin: 8px 0 0; }
.rfb__veh-note.is-warn { color: #d22; }

.rfb__step--details { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rfb-line); }

/* Phone selector with flags */
.rfb__tel { display: flex; align-items: stretch; gap: 8px; position: relative; }
.rfb__tel-btn {
  display: flex; align-items: center; gap: 6px; cursor: pointer; flex: none;
  padding: 0 11px; background: var(--rfb-bg2); border: 1.5px solid var(--rfb-line);
  border-radius: 11px; font-size: 14px; color: var(--rfb-ink); font-family: inherit;
}
.rfb__tel-flag { font-size: 18px; line-height: 1; }
.rfb__tel-num { flex: 1; min-width: 0; }
.rfb__tel-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 300px; max-width: 84vw;
  background: var(--rfb-bg); border: 1px solid var(--rfb-line); border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(20,33,61,.4); padding: 8px; max-height: 320px; display: flex; flex-direction: column;
}
.rfb__tel-search { width: 100%; margin-bottom: 6px; }
.rfb__tel-list { overflow-y: auto; }
.rfb__tel-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: none; padding: 9px 10px; border-radius: 8px; font-size: 14px; color: var(--rfb-ink); font-family: inherit;
}
.rfb__tel-item:hover { background: var(--rfb-bg2); }
.rfb__tel-cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rfb__tel-cdial { color: var(--rfb-ink2); font-variant-numeric: tabular-nums; }

/* WhatsApp continuation */
.rfb__wa {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 14px; text-decoration: none;
  background: #25d366; color: #04210f; font-weight: 800; padding: 13px 22px; border-radius: 12px;
  box-shadow: 0 14px 28px -14px #25d366;
}
.rfb__wa:hover { filter: brightness(1.04); }

/* Glass / flat style variants */
.rfb--glass { backdrop-filter: blur(10px); background: color-mix(in srgb, var(--rfb-bg) 82%, transparent); }
.rfb--flat { box-shadow: none; }
.rfb--flat .rfb__veh, .rfb--flat .rfb__field input, .rfb--flat .rfb__field textarea { box-shadow: none; }

/* Google Places dropdown — clean, theme-agnostic (avoids broken sprite icons) */
.pac-container { z-index: 100001 !important; border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(20,33,61,.45); border: 1px solid var(--rfb-line); font-family: inherit; margin-top: 4px; }
.pac-icon, .pac-icon-marker { display: none !important; }
.pac-item { padding: 9px 12px; font-size: 14px; cursor: pointer; border-top: 1px solid var(--rfb-line); }
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--rfb-bg2); }
.pac-item-query { font-size: 14px; }

/* Server-side address autocomplete dropdown */
.rfb__ac-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--rfb-bg); border: 1px solid var(--rfb-line); border-radius: 12px;
  box-shadow: 0 24px 50px -20px rgba(20,33,61,.4); overflow: hidden; max-height: 280px; overflow-y: auto;
}
.rfb__ac-item {
  display: block; width: 100%; text-align: left; cursor: pointer; border: 0; background: none;
  padding: 11px 14px; font-size: 14px; color: var(--rfb-ink); font-family: inherit; line-height: 1.3;
  border-top: 1px solid var(--rfb-line);
}
.rfb__ac-item:first-child { border-top: 0; }
.rfb__ac-item:hover { background: var(--rfb-bg2); }

/* Trip summary (distance + time) + interactive route map */
.rfb__summary { margin: 4px 0 14px; }
.rfb__summary-row {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px;
  background: color-mix(in srgb, var(--rfb-accent) 14%, var(--rfb-bg));
  border: 1px solid color-mix(in srgb, var(--rfb-accent) 35%, transparent);
  border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--rfb-ink);
}
.rfb__summary-ico { display: inline-flex; color: var(--rfb-accent); }
.rfb__map {
  margin: 0 0 18px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--rfb-line); box-shadow: 0 16px 36px -22px rgba(20,33,61,.4);
  background: var(--rfb-bg2);
}
.rfb__map iframe, .rfb__map-canvas { display: block; width: 100%; height: 300px; border: 0; }
@media (max-width: 600px) { .rfb__map iframe, .rfb__map-canvas { height: 220px; } }

/* Two booking choices (WhatsApp / Online) */
.rfb__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.rfb__act, .rfb__submit { flex: 1 1 220px; }
.rfb__act {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; cursor: pointer; border-radius: 13px; padding: 15px 22px;
  font-size: 16px; font-weight: 800; font-family: inherit; transition: transform .12s, filter .15s, opacity .15s;
}
.rfb__act:hover { transform: translateY(-1px); filter: brightness(1.05); }
.rfb__act.is-busy { opacity: .7; cursor: progress; }
.rfb__act--wa { background: #25d366; color: #04210f; box-shadow: 0 14px 28px -14px #25d366; }
.rfb__act--online { color: var(--rfb-btn-text); background: linear-gradient(120deg, var(--rfb-accent), var(--rfb-accent2)); box-shadow: 0 14px 28px -14px var(--rfb-accent); }

/* Ride-hailing map: floating "use my location" control */
.rfb__map-geo {
  width: 40px; height: 40px; margin: 0 10px 26px 0; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #fff; color: var(--rfb-accent, #1a73e8); border: none; border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0,0,0,.32); transition: transform .12s, box-shadow .15s;
}
.rfb__map-geo:hover { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,0,0,.38); }
.rfb__map-geo:active { transform: scale(.96); }
.rfb__map iframe, .rfb__map-canvas { height: 340px; }
@media (max-width: 600px) { .rfb__map iframe, .rfb__map-canvas { height: 260px; } }

/* Passenger / luggage steppers — bounded by configured capacity */
.rfb__qty { display: flex; align-items: stretch; border: 1.5px solid var(--rfb-line); border-radius: 11px; overflow: hidden; background: var(--rfb-bg); }
.rfb__qty-btn {
  flex: 0 0 46px; width: 46px; border: 0; background: transparent;
  color: var(--rfb-accent, #1a73e8); font-size: 22px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: background .12s; -webkit-tap-highlight-color: transparent;
}
.rfb__qty-btn:hover:not(:disabled) { background: rgba(0,0,0,.05); }
.rfb__qty-btn:active:not(:disabled) { background: rgba(0,0,0,.09); }
.rfb__qty-btn:disabled { opacity: .35; cursor: default; }
.rfb__field .rfb__qty-input {
  flex: 1 1 auto; width: auto; min-width: 0; padding: 12px 4px; border: 0; border-radius: 0;
  text-align: center; font-size: 16px; font-weight: 700; color: var(--rfb-ink);
  background: transparent; box-shadow: none; -moz-appearance: textfield;
}
.rfb__field .rfb__qty-input:focus { box-shadow: none; outline: none; }
.rfb__qty-input::-webkit-outer-spin-button, .rfb__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Round-trip promotion badge (under the subtitle, only when configured) */
.rfb__promo { margin: 10px 0 0; }
.rfb__promo-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1.2;
  color: #1c7a36; background: rgba(34,170,68,.13); border: 1px solid rgba(34,170,68,.30);
}
