/*!
 * the platform — Ask. The platform's own dialog, in place of the browser's.
 *
 * Deliberately the same object in every room: admin console, night skin and
 * the driver app all get one shape, one weight of type and one pair of
 * buttons. A question that looks the same everywhere is a question people stop
 * having to read twice.
 */
.blx-ask{
  --ask-panel:#fff; --ask-line:#e5e7eb; --ask-line2:#cbd2da;
  --ask-head:#111827; --ask-text:#4b5261; --ask-muted:#6b7280;
  --ask-gold:var(--blx-acc-mid, #b58a1a); --ask-gold2:var(--blx-acc-deep, #8a6a12); --ask-bad:#a52a1a;
  position:fixed; inset:0; z-index:200000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  font-family:var(--blx-sans, 'Manrope'),-apple-system,'Segoe UI',Roboto,sans-serif;
}
.blx-ask *{ box-sizing:border-box; }
.blx-ask .ask-scrim{
  position:absolute; inset:0; background:rgba(10,10,10,.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .18s ease;
}
.blx-ask.in .ask-scrim{ opacity:1; }
.blx-ask .ask-box{
  position:relative; width:min(460px,100%);
  background:var(--ask-panel); border:1px solid var(--ask-line);
  border-radius:18px; padding:26px 28px 20px;
  box-shadow:0 40px 90px -30px rgba(10,10,10,.55), 0 2px 6px rgba(16,24,40,.08);
  opacity:0; transform:translateY(10px) scale(.985);
  transition:opacity .2s ease, transform .22s cubic-bezier(.22,.8,.25,1);
}
.blx-ask.in .ask-box{ opacity:1; transform:none; }
/* A thread of gold along the top edge — the one mark that says whose dialog
   this is without spending a line of type on it. */
.blx-ask .ask-box::before{
  content:''; position:absolute; top:0; left:26px; right:26px; height:2px;
  background:linear-gradient(90deg,transparent,var(--ask-gold),transparent);
  border-radius:2px;
}
.blx-ask.danger .ask-box::before{
  background:linear-gradient(90deg,transparent,var(--ask-bad),transparent);
}
.blx-ask .ask-eyebrow{
  display:block; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ask-gold); font-weight:700; margin-bottom:8px;
}
/*
 * The question is set in the working face, not the display serif.
 *
 * The display face is drawn for a headline of three or four
 * words at a large size, with a high stroke contrast and a small x-height that
 * make it elegant on a title and hard work in a paragraph. These titles are not
 * headlines — they are sentences, often long ones carrying a unit number, an
 * address and a booking reference, and they are the thing a dispatcher has to
 * read correctly under time pressure before pressing a button that double-books
 * a car. That is the wrong place to be pretty.
 *
 * So: the same var(--blx-sans, Manrope) the rest of the dialog uses, a size up from the body,
 * and a line height that lets a three-line sentence breathe. The eyebrow above
 * still carries the tone; nothing about the dialog's character is lost by
 * making its most important line legible.
 */
.blx-ask .ask-title{
  font-family:inherit; font-size:17.5px; font-weight:700; letter-spacing:-.005em;
  line-height:1.45; color:var(--ask-head); margin:0; padding:0;
}
.blx-ask .ask-body{
  margin:12px 0 0; font-size:14px; line-height:1.62; color:var(--ask-text);
}
.blx-ask .ask-input{
  display:block; width:100%; margin-top:16px; min-height:46px;
  padding:11px 14px; font:inherit; font-size:15px; color:var(--ask-head);
  background:#fff; border:1px solid var(--ask-line2); border-radius:11px;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.blx-ask .ask-input:focus{
  border-color:var(--ask-gold); box-shadow:0 0 0 3px rgba(var(--blx-acc-mid-rgb, 181,138,26),.16);
}
.blx-ask .ask-acts{
  display:flex; justify-content:flex-end; gap:9px; margin-top:22px;
}
.blx-ask .ask-btn{
  appearance:none; font:inherit; font-size:13.5px; font-weight:600;
  min-height:44px; padding:0 20px; border-radius:11px; cursor:pointer;
  border:1px solid var(--ask-line2); background:#fff; color:var(--ask-text);
  transition:all .15s;
}
.blx-ask .ask-btn:hover{ border-color:var(--ask-gold); color:var(--ask-gold2); }
.blx-ask .ask-btn.ghost{ border-color:transparent; color:var(--ask-muted); font-weight:500; }
.blx-ask .ask-btn.ghost:hover{ border-color:var(--ask-line2); color:var(--ask-text); }
.blx-ask .ask-btn.go{
  background:var(--ask-gold); border-color:var(--ask-gold); color:#fff;
}
.blx-ask .ask-btn.go:hover{ background:var(--ask-gold2); border-color:var(--ask-gold2); color:#fff; }
.blx-ask.danger .ask-btn.go{ background:var(--ask-bad); border-color:var(--ask-bad); }
.blx-ask.danger .ask-btn.go:hover{ background:#8d2416; border-color:#8d2416; }
.blx-ask .ask-btn:focus-visible{ outline:2px solid var(--ask-gold); outline-offset:2px; }

body.blx-ask-open{ overflow:hidden; }

/* ---- night: the admin skin, and the driver app's own dark ---- */
body.blx-skin-noir .blx-ask,
body:not(.blxb-dvl) .blxb-driver-page .blx-ask,
.blx-ask.dark{
  --ask-panel:#151412; --ask-line:#2a2823; --ask-line2:#37342c;
  --ask-head:#f3f1ec; --ask-text:#c9c5ba; --ask-muted:#8d8a82;
  --ask-gold:var(--blx-acc, #c9a227); --ask-gold2:var(--blx-acc-hi, #e3c25a); --ask-bad:#d9614a;
}
body.blx-skin-noir .blx-ask .ask-scrim{ background:rgba(0,0,0,.68); }
body.blx-skin-noir .blx-ask .ask-box{ box-shadow:0 40px 100px -30px rgba(0,0,0,.9); }
body.blx-skin-noir .blx-ask .ask-input{ background:#1b1916; }
/* The quiet button takes the panel's own dark; the loud one must not, and it
   was — this rule used to outrank `.ask-btn.go` on specificity and painted the
   primary action #1b1916 with #14120c ink on it, which is a black button with
   black writing. The affirmative keeps its gold in every skin; only the ink on
   it changes, because gold at night wants dark type rather than white. */
body.blx-skin-noir .blx-ask .ask-btn{ background:#1b1916; color:var(--ask-text); }
body.blx-skin-noir .blx-ask .ask-btn:hover{ border-color:var(--ask-gold); color:var(--ask-gold2); }
body.blx-skin-noir .blx-ask .ask-btn.ghost{ background:none; color:var(--ask-muted); }
body.blx-skin-noir .blx-ask .ask-btn.ghost:hover{ background:#1b1916; color:var(--ask-text); border-color:var(--ask-line2); }
body.blx-skin-noir .blx-ask .ask-btn.go{
  background:var(--ask-gold); border-color:var(--ask-gold); color:#14120c; font-weight:700;
}
body.blx-skin-noir .blx-ask .ask-btn.go:hover{
  background:var(--ask-gold2); border-color:var(--ask-gold2); color:#14120c;
}
body.blx-skin-noir .blx-ask.danger .ask-btn.go{
  background:var(--ask-bad); border-color:var(--ask-bad); color:#fff;
}
body.blx-skin-noir .blx-ask.danger .ask-btn.go:hover{ background:#c14a35; border-color:#c14a35; color:#fff; }

/* The driver app's own dark, and any dialog opened with the dark flag, get the
   same treatment — the tokens above already switch, so only the two buttons
   that carry a fill need saying. */
body:not(.blxb-dvl) .blxb-driver-page .blx-ask .ask-btn,
.blx-ask.dark .ask-btn{ background:#1b1916; color:var(--ask-text); }
body:not(.blxb-dvl) .blxb-driver-page .blx-ask .ask-btn.ghost,
.blx-ask.dark .ask-btn.ghost{ background:none; }
body:not(.blxb-dvl) .blxb-driver-page .blx-ask .ask-btn.go,
.blx-ask.dark .ask-btn.go{
  background:var(--ask-gold); border-color:var(--ask-gold); color:#14120c; font-weight:700;
}
body:not(.blxb-dvl) .blxb-driver-page .blx-ask.danger .ask-btn.go,
.blx-ask.dark.danger .ask-btn.go{ background:var(--ask-bad); border-color:var(--ask-bad); color:#fff; }

@media(max-width:600px){
  .blx-ask{ align-items:flex-end; padding:0; }
  .blx-ask .ask-box{
    width:100%; border-radius:20px 20px 0 0; border-bottom:0;
    padding:24px 20px max(20px,env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .28s cubic-bezier(.22,.8,.25,1), opacity .2s;
  }
  .blx-ask.in .ask-box{ transform:none; }
  .blx-ask .ask-acts{ flex-direction:column-reverse; gap:8px; }
  .blx-ask .ask-btn{ width:100%; min-height:50px; }
}

/* One optional qualifier under a prompt's field — "and without the rate",
   "and its stops too". Anything needing two of these needs a screen. */
.blx-ask .ask-check{ display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:13px; color:#6b6b6b; cursor:pointer; }
.blx-ask .ask-check input{ width:15px; height:15px; margin:0; accent-color:var(--blx-acc-mid, #b58a1a); }
.blx-ask .ask-check:hover{ color:#2c2c2c; }

/* A short named list of fields — a name and a number asked together. Each
   wears a small label in the console's eyebrow voice; the first field takes
   the room, a number sits beside it. */
.blx-ask .ask-fields{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px 12px; margin-top:16px; }
.blx-ask .ask-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.blx-ask .ask-field span{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ask-muted, #6b6b6b); }
.blx-ask .ask-fields .ask-input{ margin-top:0; }
.blx-ask .ask-fields:has(input[type=number]){ grid-template-columns:minmax(0,1fr) 128px; }