/* ==========================================================
   RELIABLE TRAVELS — theme layer and the car-rental sections:
   shapes and type, preloader car, booking bar, fleet cards,
   enquiry form and the login / register dialog.
   Loaded last, after header-hero.css.
   ========================================================== */

/* ---------- Theme: type and shapes ---------- */
:root { --night: #070b15; --flame: #ff5a1f; --amber: #ffb703; }
em { font-style: normal; }
h1, h2, h3 { letter-spacing: -.035em; }
h1 em, h2 em { font-weight: 300; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cursor { z-index: 250; }

.desktop-nav { border-radius: 16px; }
.desktop-nav .nav-link, .nav-blob { border-radius: 11px; }
.nav-blob { background: linear-gradient(135deg, var(--accent), #ff7a3d); }
.login-btn, .nav-cta, .menu-btn { border-radius: 13px; }
.nav-cta i { border-radius: 10px; }
.dd { border-radius: 16px; }
.desktop-nav .dd-item > a { border-radius: 11px; }
.dd-ic { border-radius: 10px; }
.dd-ic .ic { font-size: 18px; }
.primary-btn { padding: 16px 22px; border-radius: 12px; }
.arrow { border-radius: 13px; }
.pill { border-radius: 8px; }

.dock { border-radius: 0 0 22px 22px; }

.features { border-radius: 20px; box-shadow: 0 30px 70px -40px #0c122280; }
.feature { border-radius: 14px; }
.f-icon { border-radius: 13px; }
.step { border-radius: 18px; }
.step-icon { border-radius: 14px; }
.dark-btn { border-radius: 14px; }
.auth-tabs, .auth-tabs button, .auth-ink { border-radius: 13px; }
.footer-brand b { color: var(--amber); }

/* ---------- Preloader: a car drives the progress line ---------- */
.pre-line { position: relative; overflow: visible; height: 3px; margin-top: 26px; }
.pre-line i { border-radius: 3px; }
.pre-car { position: absolute; left: calc(var(--p, 0) * 100%); bottom: 4px; width: 70px; margin-left: -52px; color: var(--amber); }
.pre-car svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Booking bar (in the dock, under the hero) ---------- */
.booking { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)) auto; gap: 10px; padding: 12px clamp(12px, 3vw, 48px); background: #fff; }
.bk-tabs { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 14px; background: #eef0f5; }
.bk-tabs label { position: relative; display: grid; cursor: pointer; }
.bk-tabs input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-tabs span { display: grid; place-items: center; min-height: 48px; padding: 0 15px; border-radius: 10px; font: 700 13.5px Outfit, sans-serif; color: #5a6276; white-space: nowrap; transition: background .3s, color .3s, box-shadow .3s; }
.bk-tabs input:checked + span { background: var(--ink); color: #fff; box-shadow: 0 8px 18px -10px var(--ink); }
.bk-tabs input:focus-visible + span { outline: 2px solid var(--flame); outline-offset: 2px; }
.bk-field { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 11px; align-items: center; min-width: 0; padding: 7px 14px; border: 1.5px solid #dde1ea; border-radius: 14px; background: #fff; cursor: text; transition: border-color .3s, box-shadow .3s; }
.bk-field .ic { grid-row: 1 / 3; font-size: 21px; color: var(--flame); }
.bk-field > span { font: 700 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7a8296; white-space: nowrap; }
.bk-field input, .bk-field select { grid-column: 2; width: 100%; min-width: 0; height: 24px; padding: 0; border: 0; outline: 0; background: none; font: 600 15px Outfit, sans-serif; color: var(--ink); }
.bk-field input::placeholder { color: #a3aabb; font-weight: 500; }
.bk-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.bk-field.invalid { border-color: #e0584f; animation: shake .4s; }
.bk-go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--accent), #ff5a1f); color: var(--ink); font: 800 15px Outfit, sans-serif; white-space: nowrap; cursor: pointer; box-shadow: 0 14px 30px -14px #ff5a1f; transition: transform .35s var(--ease-out), box-shadow .35s; }
.bk-go i { font-style: normal; transition: transform .3s; }
.bk-go:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px #ff5a1f; }
.bk-go:hover i { transform: translateX(5px); }
.bk-go:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Vehicle specs chips and Book button (fleet cards are in fleet.css) ---------- */
.car-specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.car-specs li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 9px; border: 1px solid #ffffff14; background: #ffffff0d; font: 600 12.5px Outfit, sans-serif; color: #dfe3ec; }
.car-specs .ic { font-size: 15px; color: var(--c1); }
.car-book { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: var(--ink); font: 800 13.5px Outfit, sans-serif; cursor: pointer; transition: background .35s; }
.car-book i { font-style: normal; transition: transform .3s; }
.car-book:hover { background: var(--c1); }
.car-book:hover i { transform: translate(3px, -3px); }
.car-book:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Tariff ---------- */

/* ---------- Enquiry form (in the closing section) ---------- */
.planner { min-height: 0; padding: 84px 24px 90px; }
.planner-inner { width: min(980px, 100%); }
.book-form { margin-top: 38px; padding: 26px; border-radius: 24px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 40px 90px -40px #000; }
.book-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.field select { width: 100%; height: 56px; padding: 22px 38px 8px 16px; border: 1.5px solid #dde1ea; border-radius: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230c1222' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; font: 500 15px "Plus Jakarta Sans", sans-serif; color: var(--ink); outline: none; appearance: none; -webkit-appearance: none; transition: border-color .3s, box-shadow .3s; }
.field select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }
.field.fixed > span { transform: translateY(-10px) scale(.78); color: var(--ink); font-weight: 600; }
.planner .book-form p.auth-note { margin: 12px 0 0; font-size: 13px; color: #1f7a4f; }
.planner .book-form p.auth-note.warn { color: #b0452c; }
.book-done { margin-top: 38px; padding: 40px 26px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -40px #000; }
.book-done[hidden], .book-form[hidden] { display: none; }
.book-done > i { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #1fa57a; color: #fff; font: 800 28px Outfit, sans-serif; box-shadow: 0 0 0 10px #1fa57a22; animation: pop .6s cubic-bezier(.5, 1.6, .4, 1); }
.book-done h3 { font-size: 30px; }
.planner .book-done p { max-width: 560px; margin: 12px auto 18px; font-size: 15.5px; line-height: 1.6; color: #4f586c; }

/* ---------- Login / register dialog: the photo wipes in, the form swings shut like a car door ---------- */
.auth-open { overflow: hidden; }
.auth-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; pointer-events: none; transition: visibility 0s .6s; }
.auth-open .auth-modal { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.am-backdrop { position: fixed; inset: 0; background: #050812d1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s; }
.auth-open .am-backdrop { opacity: 1; }
.am-dialog { position: relative; display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); width: min(900px, 100%); perspective: 1700px; }
.am-visual { position: relative; min-height: 580px; overflow: hidden; border-radius: 26px 0 0 26px; background: var(--night); color: #fff; clip-path: inset(0 100% 0 0 round 26px 0 0 26px); transition: clip-path .45s var(--ease-cine); }
.auth-open .am-visual { clip-path: inset(0 0 0 0 round 26px 0 0 26px); transition: clip-path .9s var(--ease-cine) .08s; }
.am-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); transition: transform .45s; }
.auth-open .am-visual img { transform: scale(1.02); transition: transform 1.8s var(--ease-out) .08s; }
.am-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #070b15f2 8%, #070b1566 48%, #070b1540), linear-gradient(140deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent 46%); }
.am-brand { position: absolute; z-index: 1; left: 28px; top: 26px; font: 800 17px Outfit, sans-serif; letter-spacing: .16em; }
.am-brand b { color: var(--accent); }
.am-copy { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 30px; }
.am-copy h3 { font: 700 38px/1.02 Outfit, sans-serif; }
.am-copy ul { display: grid; gap: 11px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: #e8ebf2; }
.am-copy li { display: flex; align-items: center; gap: 11px; }
.am-copy .ic { padding: 4px; border-radius: 7px; background: var(--accent); color: var(--ink); font-size: 22px; stroke-width: 2.6; }
.auth-modal .auth { display: flex; flex-direction: column; border-radius: 0 26px 26px 0; box-shadow: 0 50px 110px -40px #000; transform-origin: left center; transform: rotateY(-86deg); opacity: 0; transition: transform .45s var(--ease-cine), opacity .2s .2s; }
/* The active form sets visibility: visible itself, which would show through the closed (hidden) dialog */
body:not(.auth-open) .auth-modal .auth-form.active { visibility: hidden; transition: visibility 0s .5s; }
.auth-open .auth-modal .auth { transform: none; opacity: 1; transition: transform 1s cubic-bezier(.2, .9, .25, 1.06) .32s, opacity .25s .32s; }
.am-close { position: absolute; z-index: 3; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 11px; background: #eef0f5; color: var(--ink); font: 400 24px/1 Outfit, sans-serif; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease-out); }
.am-close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.am-close:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.auth-modal .auth-tabs { margin: 34px 0 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .booking { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-tabs, .bk-go { grid-column: 1 / -1; }
  .bk-tabs { grid-auto-columns: 1fr; }
}
@media (max-width: 900px) {
  .book-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
  .planner { padding: 64px 18px 70px; }
}
@media (max-width: 760px) {
  /* Phone: the account form rises as a bottom sheet instead */
  .auth-modal { place-items: end center; padding: 0; }
  .am-dialog { grid-template-columns: 1fr; perspective: none; }
  .am-visual { display: none; }
  .auth-modal .auth { max-height: 92svh; overflow-y: auto; border-radius: 26px 26px 0 0; transform: translateY(104%); opacity: 1; transition: transform .45s var(--ease-cine); }
  .auth-open .auth-modal .auth { transform: none; transition: transform .7s var(--ease-cine) .08s; }
  .auth-modal .auth:after { content: ""; position: absolute; top: 9px; left: 50%; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px; background: #d5d9e2; }
}
@media (max-width: 560px) {
  .booking { padding: 10px; gap: 8px; }
  .bk-tabs span { padding: 0 8px; font-size: 13px; }
  .bk-field:nth-of-type(1), .bk-field:nth-of-type(4) { grid-column: 1 / -1; }
  .book-form { padding: 18px 14px; }
  .book-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-modal, .am-backdrop, .am-visual, .am-visual img, .auth-modal .auth { transition: none !important; }
  .pre-car { display: none; }
}

/* ---------- Booking bar: Hotel tab swaps the ride fields for hotel fields ---------- */
.bk-tab-hotel span { gap: 7px; grid-auto-flow: column; }
.bk-tab-hotel .ic { font-size: 15px; color: var(--flame); }
.bk-tab-hotel input:checked + span { background: linear-gradient(135deg, #12204a, var(--ink)); }
.bk-tab-hotel input:checked + span .ic { color: var(--accent); }
.booking .bk-h, .booking.is-hotel .bk-r { display: none; }
.booking.is-hotel .bk-h, .booking:not(.is-hotel) .bk-r { display: grid; animation: bkSwap .45s var(--ease-out) backwards; }
.booking.is-hotel .bk-h:nth-of-type(6), .booking:not(.is-hotel) .bk-r:nth-of-type(2) { animation-delay: .05s; }
.booking.is-hotel .bk-h:nth-of-type(7), .booking:not(.is-hotel) .bk-r:nth-of-type(3) { animation-delay: .1s; }
.booking.is-hotel .bk-h:nth-of-type(8), .booking:not(.is-hotel) .bk-r:nth-of-type(4) { animation-delay: .15s; }
@keyframes bkSwap { from { opacity: 0; transform: translateY(10px); } }
.booking.is-hotel .bk-go { background: linear-gradient(135deg, #3d5afe, #6f3dfe); color: #fff; }
.booking.is-hotel .bk-go:hover { box-shadow: 0 18px 34px -14px #3d5afe; }
@media (max-width: 560px) {
  .booking.is-hotel .bk-h-wide { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .booking .bk-h, .booking .bk-r { animation: none !important; }
}

/* ---------- Bulk orders switched off: <html class="no-bulk"> hides every bulk entry point ---------- */
.no-bulk .bulk-ribbon, .no-bulk .bulk-band, .no-bulk .tf-bulk, .no-bulk .occ-cta2, .no-bulk .fp-bulk,
.no-bulk a[data-bulk], .no-bulk button[data-bulk], .no-bulk .bulk-opt,
.no-bulk .dd-item:has(> a[data-bulk]), .no-bulk .mo-item:has(> a[data-bulk]),
.no-bulk .bk-order, .no-bulk .bk-order-note, .no-bulk .bk-label:has(+ .bk-order), .no-bulk .bk-bulk, .no-bulk .fleet-page .fp-top { display: none !important; }
.no-bulk .fleet-more { margin-top: 56px; }