/* ==========================================================================
   /reservations/ — dark wrapper around the ORES website widget (STAGING,
   owner-approved 2026-10-04). Loaded only on that page by
   cll-core/inc/booking-step1.php; every rule is scoped to .cll-res--dark, a
   class only the rebuilt page carries. Nothing inside the ORES frame is
   styled (it is cross-origin); ORES's own colours are set in Limo Anywhere:
   Background #090F1A, Accent #4A7CF0.
   Tokens follow the approved booking bar (step1-bar.css).
   ========================================================================== */

.cll-res--dark {
  --res-bg: #090f1a;
  --res-text: #f2eee7;
  --res-text-2: #a9b0ba;
  --res-text-3: #7b838e;
  --res-line: rgba(255, 255, 255, .085);
  --res-link: #5b8cff;
}

/* 1. Dark page: the section continues the header and meets the frame
      without an edge. */
.elementor .cll-res.cll-res--dark.e-con {
  background-color: var(--res-bg);
  /* Wider column (960 → 1100px): less "widget in a box". */
  --padding-left: max(var(--cll-gutter), calc((100% - 1100px) / 2 + var(--cll-gutter)));
  --padding-right: max(var(--cll-gutter), calc((100% - 1100px) / 2 + var(--cll-gutter)));
}
body .cll-res--dark .cll-eyebrow .elementor-heading-title { color: var(--res-text-3); }
body .cll-res--dark .cll-res-title h1.elementor-heading-title { color: var(--res-text); }
.cll-res--dark .cll-res-lede p { color: var(--res-text-2); }
.cll-res--dark .cll-res-steps { color: var(--res-text-3); }
.cll-res--dark .cll-res-steps li + li::before { color: var(--res-text-3); opacity: .6; }
.cll-res--dark .cll-res-reassure p { color: var(--res-text-3); }
.cll-res--dark .cll-res-reassure a { color: var(--res-link); }
.cll-res--dark .cll-res-reassure a:hover { color: #8aaae6; }

/* 2. No container box: no rule, white panel or top gap around the frame. */
.cll-res.cll-res--dark .cll-res-frame {
  position: relative;
  padding-top: 0;
  border-top: 0;
  background: none;
}
.cll-res.cll-res--dark .cll-res-frame iframe.ores4iframe {
  position: relative;
  z-index: 1; /* paints over the loading line below once ORES has drawn */
  background: transparent;
}

/* 3. Loading: a quiet line where ORES will appear. The frame is transparent
      until ORES paints its own #090F1A background over it, so the line
      simply disappears; no script, no timer. */
.cll-res.cll-res--dark .cll-res-frame::before {
  content: "Loading secure reservation\2026";
  position: absolute;
  z-index: 0;
  left: 0; right: 0; top: 2.5rem;
  text-align: center;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--res-text-3);
}
html.cll-res-continue .cll-res.cll-res--dark .cll-res-frame::before { content: "Finding live rates\2026"; }
.cll-res.cll-res--dark .cll-res-frame::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%; top: 4.25rem;
  width: 120px; height: 1.5px; margin-left: -60px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #8aaae6, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: cll-res-sweep 1.4s cubic-bezier(.2, .75, .2, 1) infinite;
  opacity: .7;
}
@keyframes cll-res-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .cll-res.cll-res--dark .cll-res-frame::after { animation: none; background-position: 50% 0; }
}

/* 4. Continuation from our Step 1: a slim context line instead of the
      title, so the customer sees their own trip carried into ORES. */
.cll-res--dark .cll-res-context-wrap { width: 100%; }
.cll-res--dark .cll-res-context {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow edit" "trip edit";
  align-items: center;
  gap: 6px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--res-line);
}
.cll-res--dark .cll-res-context[hidden] { display: none; }
.cll-res--dark .cll-res-context__eyebrow {
  grid-area: eyebrow;
  margin: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--res-text-3);
}
.cll-res--dark .cll-res-context__trip {
  grid-area: trip;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: 0;
  font-size: 16px; line-height: 1.45; color: var(--res-text);
}
.cll-res--dark .cll-res-context__route { font-family: var(--cll-font-display, Georgia, serif); font-size: 21px; line-height: 1.25; }
.cll-res--dark .cll-res-context__when { color: var(--res-text-2); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cll-res--dark .cll-res-context__edit {
  grid-area: edit;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  border-radius: 11px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--res-text-2);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  transition: color .2s, box-shadow .2s, background-color .2s;
}
.cll-res--dark .cll-res-context__edit:hover { color: var(--res-text); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(138, 170, 230, .5); }
.cll-res--dark .cll-res-context__edit:focus-visible { outline: 2px solid #8aaae6; outline-offset: 2px; }

/* With context shown, the title gives way to it. */
html.cll-res-has-context .cll-res--dark .cll-res-title { display: none; }

/* Tighter top in the continuation state: ORES's Step 2 starts higher. */
html.cll-res-continue .elementor .cll-res.cll-res--dark .cll-res-head.e-con {
  --padding-top: 1.5rem;
  --padding-bottom: .75rem;
}

@media (max-width: 767px) {
  .cll-res--dark .cll-res-context {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "trip" "edit";
    gap: 6px;
    padding-bottom: 14px;
  }
  .cll-res--dark .cll-res-context__trip { flex-direction: column; gap: 2px; }
  .cll-res--dark .cll-res-context__route { font-size: 19px; }
  .cll-res--dark .cll-res-context__edit { justify-self: start; margin-top: 6px; }
  html.cll-res-continue .elementor .cll-res.cll-res--dark .cll-res-head.e-con {
    --padding-top: 1.25rem;
    --padding-bottom: .5rem;
  }
}