/* Platform-only additions to the Lux Travely public site.
   The design hand-off stylesheets (styles.css / v3.css / booking.css /
   checkout.css / datetime.css) are copied verbatim and must stay that way —
   anything the platform needs on top of them lives here, under its own
   `lux-` prefix so it can never collide with a designer class. */

/* Django messages strip — floats over the header, auto-dismisses. */
.lux-flash {
  position: fixed;
  z-index: 400;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.lux-flash__item {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  border-radius: 14px;
  border: 1px solid var(--line, #e8e4db);
  background: #fff;
  box-shadow: 0 18px 44px -16px rgba(27, 26, 24, .38);
  font-family: var(--text, "Inter", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--black, #1b1a18);
  animation: lux-flash-in .32s cubic-bezier(.22, .61, .36, 1) both;
}

.lux-flash__item::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  align-self: stretch;
  margin: -13px 2px -13px -16px;
  border-radius: 14px 0 0 14px;
  background: var(--gold, #b4a886);
}

.lux-flash__item--error::before,
.lux-flash__item--danger::before { background: #c2553e; }
.lux-flash__item--success::before { background: #4b7a52; }
.lux-flash__item--warning::before { background: #c9922f; }

.lux-flash__tx { flex: 1; min-width: 0; }

.lux-flash__x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: -2px -4px 0 0;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: var(--muted, #706d65);
  transition: background .15s, color .15s;
}

.lux-flash__x:hover { background: var(--paper-2, #f3f1ec); color: var(--black, #1b1a18); }

.lux-flash__item--out { animation: lux-flash-out .26s ease both; }

@keyframes lux-flash-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes lux-flash-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .lux-flash__item, .lux-flash__item--out { animation: none; }
}

/* The hero bar renders both trip layouts and hides one; `hidden` has to win
   over the flex/grid display the design gives these elements. */
[hidden] { display: none !important; }

/* The coverage map is authored at a fixed 677x435, which is wider than the
   column it sits in once `.wrap` caps at 1240px — between roughly 1240px and
   1330px that pushed a horizontal scrollbar onto the whole page. Capping it
   to its column keeps `background-size: contain`, so the artwork only scales,
   it never crops. */
.v3 .cov__mapimg { max-width: 100%; max-height: 100%; }

/* A class that cannot seat the party is shown, but not choosable — the
   hand-off has no passenger count, so it has no state for this. */
.card.is-unavailable {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.5);
}

.card.is-unavailable:hover { transform: none; box-shadow: none; }

.card__unavail {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(27, 26, 24, .82);
  color: #fff;
  font-family: var(--text, "Inter", system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* The trip editor is taller and wider than the journey summary it replaces.
   Its grid track sizes to min-content by default, so on the stacked layout the
   editor widened the whole page; these let the column shrink to fit instead. */
.side, .jsum, .jsum__sec, .tedit, .tedit .af, .tedit .af__field { min-width: 0; }
.tedit .af__in { max-width: 100%; }

/* Ordinary public pages (legal, policies) — the hand-off only styles the hero
   pages, whose near-black body colour would otherwise show through here. */
body.lux-page { background: var(--cream, #f4f2ea); }

.lux-page__main {
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 40px 32px 72px;
  color: var(--ink, #3b3b3b);
}

.lux-page__main h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.lux-page__main h2 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 36px; }
.lux-page__main h3 { font-size: 18px; margin-top: 26px; }
.lux-page__main p,
.lux-page__main li { font-size: 15.5px; line-height: 1.72; }
.lux-page__main ul,
.lux-page__main ol { padding-left: 22px; }
.lux-page__main li { margin: 6px 0; }
.lux-page__main a { color: var(--gold-700, #847953); text-decoration: underline; }
.lux-page__main a:hover { color: var(--gold-600, #9b8e69); }

@media (max-width: 680px) {
  .lux-page__main { padding: 28px 20px 56px; }
}

/* intl-tel-input inside the design's field shapes. The widget wraps the input
   in its own `.iti` container, which breaks the flex/grid sizing the hand-off
   assumes — these hand the layout back to it. */
.iti { display: block; width: 100%; }
.iti input[type="tel"] { width: 100%; }
.iti__flag-container { z-index: 3; }

/* Guest form: the input keeps its own outline, the widget just sits in it. */
.gf__phone .iti { flex: 1; min-width: 0; }

/* Checkout: `.au__phone` is the bordered shell, so the input inside is bare. */
.au__phone .iti { flex: 1; min-width: 0; }
.au__phone .iti input.au__in {
  height: 100%;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.au__phone .iti input.au__in:focus { box-shadow: none; }

/* The country dropdown has to clear the card it sits in. */
.iti__country-list {
  z-index: 50;
  max-height: 220px;
  font-family: var(--text, "Inter", system-ui, sans-serif);
  font-size: 13.5px;
}

/* Fare breakdown extras — the hand-off's mock had no fee lines and no
   "total only" mode, so these two have no class in its stylesheet. */
.bd__hint {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted2, #b6b1a6);
}

.bd__allin {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #706d65);
}

/* Payment step. The hand-off mocked plain card inputs; the real page uses
   Stripe Elements (an iframe) and offers cards already on file, so these two
   are built from the same tokens rather than invented. */
.au__stripe {
  width: 100%;
  min-height: 52px;
  padding: 16px 14px;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-sm, 12px);
  background: var(--white, #fff);
  transition: border-color .16s, box-shadow .16s;
}

.au__stripe.StripeElement--focus {
  border-color: var(--gold, #b4a886);
  box-shadow: 0 0 0 3px var(--gold-tint, #f5f2ea);
}

.au__stripe.StripeElement--invalid { border-color: #c0473c; }

.pay__cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.pay__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-sm, 12px);
  background: var(--white, #fff);
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}

.pay__card:hover { border-color: var(--gold-300, #cfc6ac); }

.pay__card.on {
  border-color: var(--gold, #b4a886);
  background: var(--gold-tint, #f5f2ea);
  box-shadow: 0 0 0 3px rgba(180, 168, 134, .14);
}

.pay__card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pay__card-ic { flex: 0 0 auto; color: var(--gold-700, #847953); display: grid; place-items: center; }
.pay__card-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pay__card-tx b { font-size: 14.5px; font-weight: 600; color: var(--black, #1b1a18); }
.pay__card-tx small { font-size: 12.5px; color: var(--muted, #706d65); }

.pay__card-tick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold, #b4a886);
  color: #2a2618;
  opacity: 0;
  transition: opacity .16s;
}

.pay__card.on .pay__card-tick { opacity: 1; }

.au__submit.is-busy { opacity: .65; cursor: progress; }

/* Account-type picker on sign-up. The hand-off's mock signs everyone up as a
   traveler; the platform has more than one self-serve role, so these tiles are
   built from its tokens to sit inside the same card. */
.au__roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.au__role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 14px 13px;
  border: 1px solid var(--line-2, #ddd8cc);
  border-radius: var(--r-sm, 12px);
  background: var(--white, #fff);
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s;
}

.au__role svg { color: var(--gold-700, #847953); margin-bottom: 5px; }
.au__role b { font-size: 13.5px; font-weight: 700; color: var(--black, #1b1a18); }
.au__role small { font-size: 11.5px; line-height: 1.4; color: var(--muted, #706d65); }
.au__role:hover { border-color: var(--gold-300, #cfc6ac); }

.au__role.on {
  border-color: var(--gold, #b4a886);
  background: var(--gold-tint, #f5f2ea);
  box-shadow: 0 0 0 3px rgba(180, 168, 134, .14);
}

@media (max-width: 560px) {
  .au__roles { grid-template-columns: 1fr; }
  .au__role { flex-direction: row; align-items: center; gap: 12px; }
  .au__role svg { margin-bottom: 0; flex: 0 0 auto; }
  .au__role b { display: block; }
}

/* Stands in for the design's "Track your trip live" button before a chauffeur
   is assigned, when there is no link for it to open yet. */
.cf__tracknote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 13px 14px;
  border: 1px dashed var(--line-2, #ddd8cc);
  border-radius: var(--r-sm, 12px);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #706d65);
  text-align: center;
}

.cf__tracknote svg { flex: 0 0 auto; color: var(--gold-700, #847953); }

/* Signed-in header. The hand-off only ever draws the logged-out bar, so the
   account state is built from its own tokens: the same control, wearing an
   initial instead of a person icon. */
.signin__avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold, #b4a886);
  color: #2a2618;
  font-family: var(--text, "Inter", system-ui, sans-serif);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

/* A name can be an email address; the bar must not stretch for it. */
.signin__btn .signin-label {
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header:not(.scrolled) .signin__avatar { background: var(--gold-300, #cfc6ac); }

/* Django 5 accepts logout only over POST, so these menu items are forms rather
   than links. The design styles its menu rows as `a`, so the buttons repeat
   those exact rules — same padding, radius, weight and hover. */
.signin__signout,
.hamb-menu__signout,
.menupop__signout { display: block; margin: 0; }

.signin__menu .signin__signout button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: 9px;
  background: none;
  font-family: var(--text, "Inter", system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--black, #1b1a18);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.signin__menu .signin__signout button:hover { background: var(--gold-tint, #f5f2ea); }

body.logo-center .hamb-menu .hamb-menu__signout button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #3b3b3b);
  transition: background .15s;
}

body.logo-center .hamb-menu .hamb-menu__signout button:hover {
  background: rgba(0, 0, 0, .05);
  color: var(--black, #1b1a18);
}

.menupop .menupop__signout button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-radius: var(--radius-sm, 10px);
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #20222a);
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.menupop .menupop__signout button:hover { background: var(--gold-tint, #f5f2ea); }

/* Screen-reader-only helper (the hand-off never needed one). */
.lux-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Chauffeur application — the sign-up card's extras: invitation note, profile
   photo, referral code, application steps. These rules only ever render inside
   .cf-wrap, which is where checkout.css scopes the tokens they read. */
.au__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid var(--gold-300, #cfc6ac);
  border-radius: 14px;
  background: var(--gold-tint, #f1ede2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #6c7079);
}

.au__note-ic { flex: 0 0 auto; color: var(--gold-ink, #6f6535); margin-top: 1px; }
.au__note b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--ink, #20222a); }

.au__lbl {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #6c7079);
}

.au__in--date { font-family: inherit; }
.au__in--date::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.au__in--date:focus::-webkit-calendar-picker-indicator { opacity: .8; }

.au__opt {
  margin-left: 6px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2, #9a9ea7);
}

.au__avrow { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }

.au__av {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-2, #dedcd6);
  background: var(--gold-tint, #f1ede2);
  color: var(--gold-ink, #6f6535);
}

.au__av img { width: 100%; height: 100%; object-fit: cover; }
.au__av-ph { display: grid; }

.au__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.au__upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line-2, #dedcd6);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #20222a);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.au__upload:hover { border-color: var(--muted-2, #9a9ea7); background: var(--paper-2, #f6f6f4); }
.au__file:focus-visible + .au__upload,
.au__upload:focus-visible { border-color: var(--gold, #b4a886); box-shadow: 0 0 0 3px var(--gold-tint, #f1ede2); }

.au__hint--flush { margin: 7px 0 0; }
.au__field--flush { margin-bottom: 0; }

.au__disc { margin-bottom: 22px; }

.au__disc-t {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gold-ink, #6f6535);
  cursor: pointer;
}

.au__disc-t:hover { color: var(--gold-600, #9b8e69); }
.au__disc-t svg:last-child { transition: transform .16s; }
.au__disc-t.on svg:last-child { transform: rotate(180deg); }
.au__disc-b { margin-top: 12px; }

.au__in--code { text-transform: uppercase; letter-spacing: .16em; padding-right: 44px; }

.au__field-st {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
}

.au__field-st--wait { color: var(--muted-2, #9a9ea7); }
.au__field-st--ok { color: #4b7a52; }
.au__field-st--bad { color: #b4514e; }

.au--after { margin-top: 16px; }

.au__steps { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.au__step { display: flex; align-items: flex-start; gap: 14px; }

.au__stepn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gold, #b4a886);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.au__step b { display: block; font-size: 14px; font-weight: 600; color: var(--ink, #20222a); }
.au__step small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted, #6c7079); }

@media (max-width: 560px) {
  .au__avrow { align-items: flex-start; }
}