/* ==========================================================================
   Booking step 2 "Abholdaten" v5 – compact (2026-11-10, owner) – new-demo, design only.
   Loaded after fs-p2-v4.css; everything is scoped to html.fsp2v5 (needs v4 on). Same colours and icons as v4,
   smaller spacing, one details box under the flight number (airline / terminal) that opens with the flight.
   ========================================================================== */

/* ---------- card, heading, form rhythm ---------- */
html.fsp2v5 body .fs-flight-card{ padding:22px 24px 24px !important; }
html.fsp2v5 body .fs-flight-card h3{ font-size:22px !important; margin-bottom:4px !important; }
html.fsp2v5 body .fs-flight-card > p{ font-size:14px !important; margin-bottom:14px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm{ gap:16px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm label[data-fsp4-n]{ font-size:14.5px !important; gap:9px; margin-bottom:6px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm label[data-fsp4-n]::before{ width:24px; height:24px; font-size:12px; line-height:24px; background:linear-gradient(135deg,var(--p4-azure),var(--p4-navy2)); box-shadow:0 2px 6px rgba(46,155,218,.35); }
html.fsp2v5 body #pjTbsFlightDetailsForm label[data-fsp4-n]{ color:var(--p4-navy) !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-p2-hint{ margin:-2px 0 8px 32px !important; font-size:13px !important; line-height:1.4 !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-input-wrap input,
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-input-wrap select,
html.fsp2v5 body #pjTbsFlightDetailsForm .custom-input-wrapper .custom-display-trigger{ height:50px !important; min-height:50px !important; padding-left:52px !important; border-radius:12px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-input-wrap .fs-icon,
html.fsp2v5 body #pjTbsFlightDetailsForm .custom-input-wrapper > .icon,
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-ic{ width:30px !important; height:30px !important; font-size:13px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-ic{ flex-basis:30px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-ic svg{ width:16px !important; height:16px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-trg{ min-height:50px !important; border-radius:12px !important; padding:6px 12px 6px 10px !important; gap:10px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-l{ font-size:11.5px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsdp-v{ font-size:15px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm button[type="submit"],
html.fsp2v5 body #pjTbsFlightDetailsForm .pjTbsBtnBackToHome{ min-height:52px !important; border-radius:12px !important; font-size:15.5px !important; }

/* ---------- "In 3 Schritten" strip: off (it repeated the numbered headings) ---------- */
html.fsp2v5 .fsp4-how{ display:none !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-p2-arrival-wrap > .fs-p2-hint{ display:none !important; }   /* "Ihre Wahl bestimmt die folgenden Felder." */
/* date / time field shows the result of the flight lookup */
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-time-ok .fsdp-trg{ border-color:#16804F !important; background:#ECF8F1 !important; box-shadow:0 0 0 3px rgba(22,128,79,.12) !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-time-ok .fsdp-ic{ background:#16804F !important; color:#fff !important; }
html.fsp2v5 .fsp5-time-badge{ display:flex; align-items:center; gap:7px; margin-top:7px; padding:7px 11px; border-radius:10px; background:#FBF3DC; color:#6B4F0A; font-size:12.5px; font-weight:600; line-height:1.4; }
html.fsp2v5 .fsp5-time-badge[hidden]{ display:none !important; }
html.fsp2v5 .fsp5-time-badge::before{ content:"\2022"; flex:none; width:8px; height:8px; border-radius:50%; background:#B8860B; color:transparent; }
html.fsp2v5 .fsp5-time-badge.is-ok{ background:#ECF8F1; color:#0E5C38; }
html.fsp2v5 .fsp5-time-badge.is-ok::before{ content:"\2713"; width:auto; height:auto; border-radius:0; background:none; color:#16804F; font-weight:800; }
/* "try again" in the red box */
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-flight-not-found[style*="block"]{ display:flex !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-flight-not-found{ flex-wrap:wrap !important; align-items:center !important; background:#FFF7ED !important; border-color:#FED7AA !important; color:#7C2D12 !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-flight-not-found i{ color:#EA580C !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-flight-not-found > span{ flex:1 1 240px; }
html.fsp2v5 .fsp5-retry{ flex:none; margin-left:auto; min-height:34px; padding:5px 14px; border:1.5px solid #EA580C; border-radius:999px; background:#fff; color:#9A3412; font:inherit; font-size:12.5px; font-weight:800; cursor:pointer; touch-action:manipulation; }
html.fsp2v5 .fsp5-retry:hover{ background:#EA580C; color:#fff; }
html.fsp2v5 .fsp5-retry:focus-visible{ outline:3px solid var(--p4-azure); outline-offset:2px; }

/* ---------- (old) slim strip rules, unused while the strip is off ---------- */
html.fsp2v5 .fsp4-how{ margin:0 0 16px; padding:10px 12px; border-radius:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
html.fsp2v5 .fsp4-how-title{ margin:0; font-size:11px; flex:none; }
html.fsp2v5 .fsp4-how ol{ flex:1 1 420px; gap:6px; }
html.fsp2v5 .fsp4-how li{ padding:6px 8px; border-radius:10px; gap:8px; align-items:center; }
html.fsp2v5 .fsp4-how-ic{ width:26px; height:26px; }
html.fsp2v5 .fsp4-how-ic svg{ width:14px; height:14px; }
html.fsp2v5 .fsp4-how b{ font-size:13px; font-weight:700; }
html.fsp2v5 .fsp4-how small{ display:none; }

/* ---------- flight / train box ---------- */
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode{ border-radius:16px; }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card{ min-height:60px !important; padding:8px 30px 8px 10px !important; grid-template-columns:44px minmax(0,1fr) !important; column-gap:10px !important; border-radius:12px !important; }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-icon{ width:44px !important; height:44px !important; min-width:44px !important; border-radius:12px !important; }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-icon svg{ width:38px !important; height:38px !important; }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-title{ font-size:14.5px !important; }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-desc{ font-size:12px !important; }
html.fsp2v5 .fsp4-pflight{ padding:10px 12px 12px; }
/* the time rule: two small chips side by side + one line */
html.fsp2v5 .fsp4-rule{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
html.fsp2v5 .fsp4-rule-t{ flex:0 0 100%; margin:0 0 2px; font-size:11px; }
html.fsp2v5 .fsp4-rule-row{ flex:1 1 200px; margin:0 !important; padding:6px 8px; gap:8px; border-radius:10px; }
html.fsp2v5 .fsp4-rule-row{ background:#fff; border:1.5px solid var(--p4-line); }
html.fsp2v5 .fsp4-rule-ic{ width:34px; height:34px; }
html.fsp2v5 .fsp4-rule-ic svg{ width:17px; height:17px; }
html.fsp2v5 .fsp4-rule-t + .fsp4-rule-row .fsp4-rule-ic{ background:#E3F2FC; color:#1C7ED6; }
html.fsp2v5 .fsp4-rule-row + .fsp4-rule-row .fsp4-rule-ic{ background:#FBF3DC; color:#9C7A1E; }
html.fsp2v5 .fsp4-rule-t + .fsp4-rule-row{ border-color:#CFE6F8; }
html.fsp2v5 .fsp4-rule-row + .fsp4-rule-row{ border-color:#EFE0B8; }
html.fsp2v5 .fsp4-rule-k{ font-size:13.5px; font-weight:700; color:var(--p4-ink); }
html.fsp2v5 .fsp4-rule-v{ font-size:15px; padding:4px 10px; border-radius:10px; background:var(--p4-soft2); color:var(--p4-navy); }
html.fsp2v5 .fsp4-rule-v small{ font-size:10.5px; color:var(--p4-muted); }
html.fsp2v5 .fsp4-rule-row.fsp4-on{ border-color:#16804F !important; background:#ECF8F1; }
html.fsp2v5 .fsp4-rule-row.fsp4-on .fsp4-rule-ic{ background:#16804F !important; color:#fff !important; }
html.fsp2v5 .fsp4-rule-row.fsp4-on .fsp4-rule-v{ background:#16804F; color:#fff; }
html.fsp2v5 .fsp4-rule-row.fsp4-on .fsp4-rule-v small{ color:#D4F0DF; }
html.fsp2v5 .fsp4-rule-t{ color:var(--p4-azure); }
html.fsp2v5 .fsp4-rule-foot{ flex:0 0 100%; margin-top:4px; padding:7px 10px; border-radius:9px; background:var(--p4-soft); font-size:12.5px; color:var(--p4-text); }
html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode #fs_train_fields_container{ padding:12px 12px 14px !important; gap:10px !important; }

/* ---------- flight number: input, then the green box with the details inside ---------- */
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-flight-recognized{ margin-top:10px !important; padding:12px 14px !important; gap:10px !important; border-radius:14px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-flight-recognized-icon{ width:36px !important; height:36px !important; min-width:36px !important; font-size:15px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-flight-recognized-title{ font-size:14.5px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-flight-recognized-desc{ font-size:13px !important; margin-top:2px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco{ margin-top:8px !important; padding-top:8px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco-label{ font-size:12px !important; margin-bottom:6px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco-btn{ min-height:44px !important; padding:8px 12px !important; font-size:14px !important; border-radius:11px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco-time{ font-size:15px !important; }
/* suggestion already in the time field: calm, green, with a tick */
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco.is-applied .fs-p2-reco-btn{ background:#fff !important; color:#0E5C38 !important; border:1.5px solid #BFE6D0 !important; box-shadow:none !important; cursor:default; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco.is-applied .fs-p2-reco-btn i{ color:#16804F !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-p2-reco.is-applied .fs-p2-reco-time{ background:#ECF8F1 !important; color:#0E5C38 !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly .fs-flight-not-found{ margin-top:10px !important; padding:10px 12px !important; }

/* the details box (airline / terminal): closed until the flight is known or the customer opens it */
html.fsp2v5 .fsp5-details{ display:none; }
html.fsp2v5 .fsp5-fly.fsp5-show .fsp5-details{ display:block; margin-top:10px; padding:12px 14px 14px; border:1.5px solid var(--p4-line); border-radius:14px; background:var(--p4-soft); animation:fsp5in .22s ease; }
/* with a recognised flight the details continue the green box: one box, no gap */
html.fsp2v5 .fsp5-fly.fsp5-found .fsp5-details{ margin-top:-1.5px; border-color:#BFE6D0; border-top:1px dashed #BFE6D0; border-radius:0 0 14px 14px; background:var(--p4-okbg); }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly.fsp5-found .fs-flight-recognized{ border-radius:14px 14px 0 0 !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly.fsp5-found .fs-flight-not-found{ display:none !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details .fs-flight-disclaimer{ display:none !important; }   /* its text is now the line under the box */
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details .fs-p2-note-auto{ display:none !important; margin:0 0 8px !important; padding:0 !important; background:transparent !important; font-size:12.5px !important; color:#24563D !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly.fsp5-found .fsp5-details .fs-p2-note-auto{ display:flex !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-fly.fsp5-found .fsp5-details .fs-p2-note-auto i{ color:#16804F !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details .fs-flight-fields-row{ margin-top:0 !important; gap:10px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details .fs-flight-fields-row label{ font-size:12px !important; margin-bottom:4px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details .fs-input-wrap input{ height:46px !important; min-height:46px !important; background:#fff !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-details #fs_terminal_notice{ border-radius:10px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fsp5-emptied{ display:none !important; }
/* the two-way switch above the flight number */
html.fsp2v5 .fsp5-way{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 10px; padding:5px; border-radius:14px; background:var(--p4-soft2); }
html.fsp2v5 .fsp5-way-btn{ display:flex; align-items:center; gap:10px; min-height:52px; padding:7px 12px; border:1.5px solid transparent; border-radius:11px; background:transparent; color:var(--p4-text); font:inherit; text-align:left; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .15s, border-color .15s, box-shadow .15s; }
html.fsp2v5 .fsp5-way-btn:hover{ background:rgba(255,255,255,.6); }
html.fsp2v5 .fsp5-way-btn.is-on{ background:#fff; border-color:var(--p4-navy); color:var(--p4-ink); box-shadow:0 3px 10px rgba(10,22,40,.10); }
html.fsp2v5 .fsp5-way-btn:focus-visible{ outline:3px solid var(--p4-azure); outline-offset:2px; }
html.fsp2v5 .fsp5-way-ic{ flex:none; width:32px; height:32px; border-radius:50%; background:#fff; color:var(--p4-muted); display:flex; align-items:center; justify-content:center; }
html.fsp2v5 .fsp5-way-btn.is-on .fsp5-way-ic{ background:var(--p4-navy); color:#fff; }
html.fsp2v5 .fsp5-way-btn[data-way="manual"].is-on .fsp5-way-ic{ background:#B8860B; }
html.fsp2v5 .fsp5-way-ic svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html.fsp2v5 .fsp5-way-btn b{ display:block; font-size:13.5px; font-weight:800; line-height:1.25; }
html.fsp2v5 .fsp5-way-btn small{ display:block; font-size:11.5px; font-weight:500; line-height:1.3; color:var(--p4-muted); }
html.fsp2v5 .fsp5-manual-hint{ display:none; align-items:flex-start; gap:8px; margin:0 0 10px; padding:9px 11px; border-radius:10px; background:#FBF3DC; color:#6B4F0A; font-size:12.5px; line-height:1.45; font-weight:500; }
html.fsp2v5 .fsp5-fly.fsp5-manual .fsp5-manual-hint{ display:flex; }
html.fsp2v5 .fsp5-manual-hint svg{ flex:none; width:16px; height:16px; margin-top:1px; fill:none; stroke:#B8860B; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes fsp5in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* round-trip block heads */
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-p2-block-head{ font-size:14.5px !important; padding:10px 14px !important; }
html.fsp2v5 body #pjTbsFlightDetailsForm .fs-p2-block-head i{ width:30px; height:30px; font-size:14px !important; }

/* ---------- desktop: the trip card follows the form height (grid stretch) ---------- */
@media (min-width:992px){
  html.fsp2v5 body .fs-flight-layout{ grid-template-columns:330px minmax(0,1fr) !important; align-items:stretch !important; gap:22px !important; }
  html.fsp2v5 body .fs-flight-layout .fs-tripcard{ padding:20px !important; }
  html.fsp2v5 body .fs-tripcard-route{ margin:4px 0 16px !important; }
  html.fsp2v5 body .fs-tripcard-benefits{ margin-bottom:16px !important; }
  html.fsp2v5 body .fs-tripcard-price-box{ padding:14px 16px !important; }
  html.fsp2v5 body .fs-tripcard-price{ font-size:28px !important; }
}

/* ---------- phones ---------- */
@media (max-width:767px){
  html.fsp2v5 body .fs-flight-card h3{ font-size:20px !important; }
  html.fsp2v5 .fsp4-how{ padding:10px 12px; gap:6px; }
  html.fsp2v5 .fsp4-how ol{ flex-basis:100%; }
  html.fsp2v5 .fsp4-how li{ padding:6px 2px; }
  html.fsp2v5 body #pjTbsFlightDetailsForm{ gap:14px !important; }
  html.fsp2v5 body #pjTbsFlightDetailsForm .fs-p2-hint{ margin-left:0 !important; }
  html.fsp2v5 .fsp4-rule-row{ flex-basis:100%; }
  /* flight / train: two full-width rows, icon left, text right (the two-column grid was too narrow for phones) */
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-cards{ grid-template-columns:minmax(0,1fr) !important; }
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card{
    grid-template-columns:44px minmax(0,1fr) !important; grid-template-areas:"ic t" "ic d" !important; column-gap:10px !important; row-gap:2px !important;
    align-items:center !important; align-content:center !important; min-height:60px !important; padding:8px 34px 8px 10px !important; }
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-icon{ width:44px !important; height:44px !important; min-width:44px !important; }
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-icon svg{ width:38px !important; height:38px !important; }
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-title{ font-size:14.5px !important; align-self:end; }
  html.fsp2v5:not(#q1):not(#q2):not(#q3) body #pjTbsFlightDetailsForm .fsp4-mode .fs-arrival-card-desc{ font-size:12px !important; }
  html.fsp2v5 .fsp5-fly.fsp5-show .fsp5-details{ padding:10px 12px 12px; }
  html.fsp2v5 .fsp5-way{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ html.fsp2v5 .fsp5-fly.fsp5-show .fsp5-details{ animation:none; } }
/* small phones: the rule labels may break inside a word instead of being cut off */
@media (max-width:767px){
  html.fsp2v5 .fsp4-rule-k{ overflow-wrap:anywhere; hyphens:auto; }
  html.fsp2v5 .fsp4-rule-v{ padding:3px 8px; font-size:13.5px; }
}
@media (max-width:360px){
  html.fsp2v5 .fsp4-rule-row{ padding:6px; gap:6px; }
  html.fsp2v5 .fsp4-rule-ic{ width:30px; height:30px; }
  html.fsp2v5 .fsp4-rule-k{ font-size:12.5px; }
  html.fsp2v5 .fsp4-rule-v{ font-size:12.5px; }
}