/* O Car Rent — /booking/ page styles (loaded after oc.css).
   Scope: the gateway around the /new/ booking widget only. The widget keeps its own stylesheet
   (pj.bootstrap + pjActionLoadCss); the rules under .oc-widget only undo oc.css element resets
   that would otherwise leak into it. Nothing here targets widget class names. */

/* Intro ------------------------------------------------------------------- */
.oc-booking-intro { padding-block: var(--oc-s4) var(--oc-s6); }
.oc-booking-intro h1 { margin-bottom: var(--oc-s3); }
.oc-booking-intro .oc-lead { max-width: 40rem; }

/* 5-step flow (mirrors the widget steps): stacked on phones, one row from 900px; each step carries one fact */
.oc-booking-intro__h2 { font-size: var(--oc-fs-2); margin: var(--oc-s6) 0 var(--oc-s3); }
.oc-booking-intro__cta { margin-top: var(--oc-s4); }
.oc-flow {
  counter-reset: flow; list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--oc-s2);
}
.oc-flow li {
  display: flex; align-items: flex-start; gap: var(--oc-s3);
  padding: var(--oc-s3) var(--oc-s4); background: var(--oc-surface);
  border: 1px solid var(--oc-line); border-radius: var(--oc-r2); color: var(--oc-navy);
}
.oc-flow li > div { display: grid; gap: 2px; min-width: 0; }
.oc-flow li strong { font-weight: 700; }
.oc-flow__text { font-size: var(--oc-fs-0); color: var(--oc-ink-2); font-weight: 400; }
.oc-flow__n {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--oc-green-700); color: #fff; font-size: var(--oc-fs-0); font-weight: 700; margin-top: 0.1em;
}
.oc-flow__n::before { counter-increment: flow; content: counter(flow); }
@media (min-width: 900px) {
  .oc-flow { grid-template-columns: repeat(5, 1fr); gap: var(--oc-s3); }
  .oc-flow li { position: relative; flex-direction: column; }
  .oc-flow li + li::before {
    content: "→"; position: absolute; left: calc(-1 * var(--oc-s3) / 2 - 0.45em); top: 1.1rem;
    color: var(--oc-ink-3); font-weight: 400;
  }
}

.oc-booking-facts { list-style: none; margin: var(--oc-s5) 0 0; padding: 0; display: grid; gap: var(--oc-s3); max-width: 46rem; }
.oc-booking-facts li { display: flex; gap: var(--oc-s3); align-items: flex-start; color: var(--oc-ink-2); }
.oc-booking-facts svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--oc-green-700); margin-top: 0.1em; }
.oc-booking-facts strong { color: var(--oc-navy); }

/* Form card --------------------------------------------------------------- */
.oc-booking-form { padding-block: 0 var(--oc-s7); scroll-margin-top: calc(var(--oc-header-h) + var(--oc-s4)); }
.oc-booking-card {
  background: var(--oc-surface); border: 1px solid var(--oc-line); border-radius: var(--oc-r3);
  box-shadow: var(--oc-shadow-2); padding: var(--oc-s4);
}
@media (min-width: 768px) { .oc-booking-card { padding: var(--oc-s6); } }
.oc-booking-card__head { margin-bottom: var(--oc-s4); }
.oc-booking-card__head h2 { margin-bottom: var(--oc-s1); }
.oc-booking-card__head p { margin: 0; }
.oc-booking-card__note { margin: var(--oc-s4) 0 0; }

/* Widget mount: never clip pop-ups, never overflow the page on narrow screens */
.oc-widget { position: relative; min-width: 0; max-width: 100%; overflow-x: clip; overflow-y: visible; }
.oc-widget img, .oc-widget svg { display: inline-block; max-width: 100%; height: auto; }
.oc-widget ul, .oc-widget ol { padding-left: revert; }
.oc-widget table { width: auto; }
.oc-widget h1, .oc-widget h2, .oc-widget h3, .oc-widget h4 { letter-spacing: normal; }
.oc-widget iframe { max-width: 100%; }

/* Fallback / help --------------------------------------------------------- */
.oc-booking-links { list-style: none; margin: var(--oc-s5) 0 0; padding: 0; display: grid; gap: var(--oc-s2); }
.oc-booking-links a { color: var(--oc-green-800); font-weight: 600; }
@media (min-width: 700px) { .oc-booking-links { grid-template-columns: 1fr 1fr; gap: var(--oc-s2) var(--oc-s5); } }

/* Mobile bar: hidden while the visitor works inside the widget, so it never covers controls,
   date pickers or messages. JS sets body.oc-widget-active; :has() covers focus without JS. */
@media (max-width: 899.98px) {
  body.oc-widget-active .oc-mobilebar,
  body:has([data-oc-widget]:focus-within) .oc-mobilebar { display: none; }
  body.oc-widget-active, body:has([data-oc-widget]:focus-within) { padding-bottom: var(--oc-s6); }
}

/* Skeleton while the widget loads (JS adds .is-ready when the first form renders; 8 s hard stop) ------------ */
.oc-widget__skeleton { display: none; }
.js .oc-widget:not(.is-ready) { min-height: 420px; }
.js .oc-widget:not(.is-ready) .oc-widget__skeleton { display: grid; gap: var(--oc-s3); padding: var(--oc-s4); border: 1px solid var(--oc-line); border-radius: var(--oc-r2); background: var(--oc-surface); }
.oc-widget__skeleton span { display: block; height: 48px; border-radius: var(--oc-r1); background: linear-gradient(90deg, var(--oc-surface-2) 25%, var(--oc-line-2) 50%, var(--oc-surface-2) 75%); background-size: 400% 100%; animation: oc-shimmer 1.4s ease-in-out infinite; }
.oc-widget__skeleton span:first-child { height: 64px; }
.oc-widget__skeleton span:last-child { width: 40%; margin-inline: auto; }
@keyframes oc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .oc-widget__skeleton span { animation: none; background: var(--oc-surface-2); } }

/* "Next step" panel shown after the widget prints its receipt -------------------------------------- */
.oc-booking-next { margin-top: var(--oc-s5); padding: var(--oc-s5); border-radius: var(--oc-r3); background: var(--oc-green-50); border: 1px solid var(--oc-green-100); }
.oc-booking-next h3 { margin-bottom: var(--oc-s2); }
.oc-booking-next .oc-btn-row { margin: var(--oc-s4) 0; }

/* Quick quote (no widget) ---------------------------------------------------------------------------- */
.oc-qq__form { padding: var(--oc-s5); max-width: 46rem; }
.oc-qq .oc-form-grid { gap: 0 var(--oc-s4); }