/* =========================================================================
   Express-Reservierung — Ausloeser-Zeile + modales Fenster
   -------------------------------------------------------------------------
   Gilt fuer beide Orte (Warenkorb und Kasse), deshalb eine eigene Datei statt
   je ein Block in relaunch-cart.css und relaunch-checkout.css. Das Layout laedt
   sie zusammen mit dem Partial, also genau dort, wo es das Fenster auch gibt.

   Die Werte des Fensters (Verdunkelung, Unschaerfe, Radien, Rand-Verhalten auf
   dem Telefon) sind bewusst dieselben wie beim Hardware-Overlay
   (hardware-konfigurator.css): der Shop hat dieses Fenster-Bild dreimal erprobt
   (Tarif, Hardware, Lizenzen), ein viertes eigenes Bild waere nur Unruhe.
   Die Regeln dort haengen alle an #hwOvBackdrop, es gibt also kein gemeinsames
   Klassen-Muster zum Wiederverwenden — die Werte stehen hier neu, isoliert
   unter .xo-*. Wer eines von beiden aendert, sollte das andere ansehen.

   Globale Regeln aus relaunch.css, die hier NICHT wiederholt werden muessen:
   :focus-visible (2.5px --cta) und touch-action:manipulation auf button/a/.btn.
   ========================================================================= */

/* =========================================================================
   Ausloeser-Zeile
   -------------------------------------------------------------------------
   Steht im Warenkorb unter dem Gutscheinfeld und in der Kasse unter der
   Knopfzeile des Schritts. Sie traegt links die Frage und rechts den Weg —
   eingeklappt stand vorher genau dasselbe da, nur mit einem Plus-Zeichen davor.
   Keine Farbflaeche und kein .btn-primary: auf der Seite bleibt genau ein
   farbiger Knopf, und das ist der Hauptweg (DESIGN.md K3, CTA-Intent-Dupes).
   ========================================================================= */
.xo-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 56px; padding: 14px 18px; margin: 22px 0 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  font: inherit; text-align: left; color: var(--ink); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* Randfarbe wie bei .cart-btn (relaunch-cart.css): der Ausloeser steht im
   Warenkorb direkt neben diesen Knoepfen, zwei fast gleiche Graustufen
   nebeneinander sieht man als Unsauberkeit, nicht als Absicht. */
.xo-trigger:hover { border-color: #cfd4dd; background: var(--paper-3); }
/* :active als Ersatz fuer den abgeschalteten tap-highlight: ohne ihn passiert
   auf dem Telefon zwischen Fingerdruck und Fenster sichtbar nichts. */
.xo-trigger:active { transform: translateY(1px); }
.xo-trigger[hidden] { display: none; }

.xo-frage { min-width: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.xo-weg {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 600; color: var(--cta);
}
.xo-weg svg { width: 16px; height: 16px; flex: none; }

/* Unter 520px stehen Frage und Weg untereinander: nebeneinander bliebe fuer die
   Frage zu wenig, sie ist der laengere von beiden. */
@media (max-width: 520px) {
  .xo-trigger { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================================================
   Das Fenster
   ========================================================================= */
/* z-index 9000 tanzt bewusst aus der Reihe (Tarif 50, Hardware 60, Lizenzen
   9999). Der Grund liegt dazwischen: das schwebende Vertrauens-Abzeichen sitzt
   auf 60 und lag bei Tarif- und Hardware-Fenster schon einmal sichtbar auf dem
   verdunkelten Hintergrund. Nach oben ist bei 9999 Schluss — dort liegt das
   Sende-Overlay der Kasse (relaunch-checkout.css), das auch ueber einem offenen
   Fenster liegen MUSS, wenn die Bestellung gerade rausgeht. 9000 ist der Platz
   dazwischen, mit Luft nach beiden Seiten. */
.xo-back {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(12, 20, 30, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.xo-back.open { display: flex; }

.xo {
  /* dvh mit vh davor als Rueckfall: auf dem iPhone meint vh die Hoehe OHNE
     eingeblendete Werkzeugleiste, das Fenster ragte dann oben aus dem Bild. */
  width: 100%; max-width: 520px; max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border-radius: var(--r-2xl);
  box-shadow: 0 24px 70px rgba(12, 20, 30, .28);
}

.xo-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 26px 0; }
.xo-h { flex: 1; min-width: 0; margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.xo-close {
  flex: none; width: 34px; height: 34px; border: none; border-radius: 50%;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.xo-close:hover { background: #ececf0; }
.xo-close:active { transform: scale(.94); }

/* overscroll-behavior: sonst scrollt die Seite hinter dem Fenster weiter, sobald
   der Inhalt hier am Ende ist (Scroll-Kette). */
.xo-body { padding: 14px 26px 24px; overflow-y: auto; overscroll-behavior: contain; }

.xo-view[hidden] { display: none; }
.xo-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.xo-label { display: block; margin: 0 0 7px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.xo-input {
  width: 100%; min-height: 48px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  /* 16px: verhindert iOS-Auto-Zoom beim Fokus (Inputs < 16px zoomen auf iPhone). */
  font-family: inherit; font-size: 16px; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.xo-input::placeholder { color: var(--ink-3); }
.xo-input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px rgba(255, 104, 0, .12); }
.xo-input[aria-invalid="true"] { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .1); }

/* Von der Adressverwaltung gefuellte Felder faerbt Chrome hellblau ein und
   ueberschreibt dabei jede Hintergrundfarbe. Der Hintergrund laesst sich nur
   ueber einen fetten inset-Schatten zurueckholen, die Schriftfarbe nur ueber
   -webkit-text-fill-color; die absurd lange transition ist der uebliche Kniff,
   damit das Blau nach dem Ausfuellen gar nicht erst durchblitzt. Die
   Fokus-Regel muss den inset-Schatten mitfuehren, sonst faellt beim
   Hineinklicken alles wieder auf Blau zurueck. */
.xo-input:-webkit-autofill, .xo-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.xo-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--paper) inset, 0 0 0 3px rgba(255, 104, 0, .12);
}

/* Der Knopf traegt hier .btn-primary, obwohl die Seite darunter schon einen
   farbigen Knopf hat: das Fenster verdeckt sie, und in ihm ist er die einzige
   Handlung. Zwei gleich starke Knoepfe sieht der Kunde nie zugleich. */
.xo-send { width: 100%; margin-top: 14px; }
.xo-send:active { transform: translateY(1px); }
.xo-send[disabled] { opacity: .62; cursor: default; transform: none; box-shadow: none; }

/* Dieselben drei Werte wie .co .note.error (relaunch-checkout.css). Sie standen
   hier zuerst um je ein, zwei Stellen daneben — im Ergebnis zwei Rot-Familien
   fuer dieselbe Aussage, an zwei Stellen desselben Weges. */
.xo-note {
  margin: 12px 0 0; padding: 11px 13px; border-radius: var(--r-md);
  background: #fdeceb; border: 1px solid #f3c9c6; color: #7a1f1a;
  font-size: 14px; line-height: 1.45;
}
.xo-note[hidden] { display: none; }

.xo-consent { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.xo-consent a { color: var(--cta); text-underline-offset: 2px; }

/* --- Warte- und Erfolgs-Ansicht ------------------------------------------
   Zwei Ansichten, nicht eine: nach dem Absenden steht die Mail noch aus
   ("Schauen Sie in Ihr Postfach"), nach dem Klick auf den Link ist der Vorgang
   erledigt. Ein gruener Haken schon beim Absenden waere die halbe Wahrheit —
   deshalb traegt das Warten den warmen Grundton der Seite und erst der
   Abschluss das Gruen. Ohne diesen Unterschied saehen beide Ansichten gleich
   aus und die Umschaltung ginge unbemerkt vorbei.
   ------------------------------------------------------------------------- */
.xo-done { text-align: center; padding: 8px 0 4px; }
.xo-done__icon {
  width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center;
  border-radius: 50%; background: var(--paper-warm); color: var(--cta);
}
/* --green-soft lebt nur in relaunch-checkout.css (der Warenkorb laedt sie
   nicht) -> Fallback mitgeben, damit der Kreis auch dort gefuellt ist. */
.xo-ok .xo-done__icon { background: var(--green-soft, #eaf8ef); color: var(--green-strong, #1e7a3a); }
.xo-done__icon svg { width: 28px; height: 28px; }
.xo-done__h { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.xo-done__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
/* Der Spam-Hinweis steht unter dem Servertext und soll leiser sein als er:
   er gilt nur fuer den Ausnahmefall. Kleiner und in der ruhigeren Tinte,
   aber ueber der 12px-Grenze und damit noch bequem lesbar. */
.xo-done__hint { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.xo-done__btn { margin-top: 22px; }
.xo-done__btn:active { transform: translateY(1px); }

/* --- Telefon ------------------------------------------------------------ */
/* Das Fenster faehrt von unten hoch statt mittig zu schweben: auf 390px Breite
   bleibt fuer seitliche Raender nichts uebrig, und der Daumen erreicht die
   untere Haelfte. safe-area, damit der Knopf nicht unter der Home-Leiste liegt. */
@media (max-width: 560px) {
  .xo-back { padding: 0; align-items: flex-end; }
  .xo { max-width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: 20px 20px 0 0; }
  .xo-head { padding: 16px 20px 0; }
  .xo-body { padding: 12px 20px calc(22px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .xo-trigger, .xo-input { transition: none; }
  .xo-trigger:active, .xo-send:active, .xo-done__btn:active { transform: none; }
  .xo-close:active { transform: none; }
}