/* ==========================================================================
   2026-10-31 (new-demo, owner): phone layout of booking step 1, design v2. Design only, active only with html.fsm1 (see php/fs-m1.php).
   Every phone gets its own measure: all heights and gaps grow with the visible screen height (--t = height above 640px), from the compact minimum to a roomy maximum,
   and the card fills the screen down to the chat button. Fonts are fixed sizes; inputs stay 16px (iOS zoom); addresses wrap and are never cut.
   ========================================================================== */
@media (max-width:767px){
  html.fsm1{
    --fsH:100vh; --t:calc(var(--fsH) - 640px);
    --f-tab:clamp(44px, calc(44px + var(--t) * .08), 62px);
    --f-field:clamp(46px, calc(46px + var(--t) * .07), 62px);
    --f-gap:clamp(6px, calc(6px + var(--t) * .05), 18px);
    --f-pad:clamp(8px, calc(8px + var(--t) * .04), 16px);
    --f-panel:clamp(8px, calc(8px + var(--t) * .06), 22px);
    --f-btn:clamp(46px, calc(46px + var(--t) * .07), 60px);
    --f-price:clamp(26px, calc(26px + var(--t) * .04), 36px);
  }
  @supports (height:100svh){ html.fsm1{ --fsH:100svh; } }

  /* header */
  html.fsm1 body .fsh{ --fsh-h:54px !important; }
  html.fsm1 body #preisrechner, html.fsm1 body .co-calculator-home-page{ padding-top:58px !important; }
  html.fsm1 body .calc{ padding-bottom:62px !important; }   /* room for the chat button below the card */

  /* trip type */
  html.fsm1 body .custom-search-container .custom-search-tabs{ padding:4px !important; gap:3px !important; margin:0 0 6px !important; border-radius:14px !important; }
  html.fsm1 body .custom-search-container .custom-search-tab{
    flex-direction:row !important; gap:6px !important; min-height:var(--f-tab) !important; padding:3px 6px !important;
    font-size:13px !important; font-weight:600 !important; line-height:1.15 !important; border-radius:11px !important; align-items:center !important; justify-content:center !important; text-align:left !important;
  }
  html.fsm1 body .custom-search-container .custom-search-tab .icon-tab{ font-size:15px !important; margin:0 !important; flex:0 0 auto; }

  /* form card: fills the screen down to the chat button */
  html.fsm1 body .custom-search-container .custom-form-body{
    display:flex !important; flex-direction:column; box-sizing:border-box; padding:var(--f-pad) 12px !important; border-radius:18px !important; box-shadow:0 6px 20px rgba(10,22,40,.14) !important;
    min-height:min(calc(var(--fsH) - 58px - var(--f-tab) - 14px - 62px), 760px);
  }
  html.fsm1 body .custom-search-container .custom-form-body > form{ flex:1 1 auto; display:flex; flex-direction:column; }
  html.fsm1 body .custom-search-container .custom-form-grid{ flex:1 1 auto; display:flex !important; flex-direction:column; gap:var(--f-gap) !important; }

  /* field names and the location link */
  html.fsm1 body .custom-search-container #group_pickup > label,
  html.fsm1 body .custom-search-container #group_dropoff > label{
    min-height:26px !important; margin:0 0 3px !important; font-size:11.5px !important; font-weight:600 !important; letter-spacing:.06em !important; line-height:1.2 !important; color:#5B6B80 !important;
    row-gap:2px !important; align-items:center !important; justify-content:space-between !important;
  }
  html.fsm1 body .custom-search-container .label-link{
    position:relative; display:inline-flex !important; align-items:center; gap:5px; min-height:26px !important; padding:0 2px 0 8px !important;
    font-size:12.5px !important; font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important; text-decoration:none !important; color:#1F6FA8 !important; background:transparent !important; border:0 !important; box-shadow:none !important;
  }
  html.fsm1 body .custom-search-container .label-link i{ font-size:13px !important; margin:0 !important; color:#2E9BDA !important; }
  html.fsm1 body .custom-search-container .label-link::after{ content:""; position:absolute; inset:-9px 0; }   /* 44px touch height */

  /* fields */
  html.fsm1 body .custom-search-container .custom-input-wrapper{ min-height:var(--f-field) !important; border-radius:13px !important; }
  html.fsm1 body .custom-search-container .custom-input-wrapper input,
  html.fsm1 body .custom-search-container .custom-input-wrapper .custom-display-trigger{ border-radius:13px !important; }
  html.fsm1 body .custom-search-container .custom-input-wrapper input{ height:var(--f-field) !important; min-height:var(--f-field) !important; font-weight:400 !important; }
  html.fsm1 body .custom-search-container #wrapper_dropoff_select .custom-display-trigger,
  html.fsm1 body .custom-search-container #wrapper_pickup_select .custom-display-trigger{ min-height:var(--f-field) !important; padding-top:5px !important; padding-bottom:5px !important; font-size:15.5px !important; font-weight:500 !important; line-height:1.25 !important; }
  html.fsm1 body .custom-search-container .custom-stop-row{ margin-top:var(--f-gap) !important; }
  html.fsm1 body .custom-search-container .location-dropdown-panel{ top:calc(100% + 4px) !important; }

  /* chosen address: pin, text lines, pencil and + in one row; long addresses simply wrap */
  html.fsm1 body .custom-search-container .fs-addr{ padding:6px 8px 6px 46px !important; min-height:var(--f-field) !important; border-radius:13px !important; row-gap:1px !important; align-content:center; }
  html.fsm1 body .custom-search-container #wrapper_pickup_text .fs-addr,
  html.fsm1 body .custom-search-container .custom-stop-row .fs-addr{ padding-right:86px !important; }
  html.fsm1 body .custom-search-container #wrapper_dropoff_text .fs-addr{ padding-right:46px !important; }
  html.fsm1 body .custom-search-container .fs-addr::after{ display:none !important; }
  html.fsm1 body .custom-search-container .fs-addr-l1{ font-size:.96875rem !important; font-weight:600 !important; line-height:1.25 !important; }
  html.fsm1 body .custom-search-container .fs-addr-l2{ font-size:.84375rem !important; line-height:1.3 !important; }
  html.fsm1 body .custom-search-container .custom-input-wrapper.fs-addr-on > .icon{ top:50% !important; bottom:auto !important; left:9px !important; transform:translateY(-50%) !important; }
  html.fsm1 body .custom-search-container .fs-addr .fs-addr-edit{ top:50% !important; bottom:auto !important; right:3px !important; width:40px !important; height:44px !important; transform:translateY(-50%) !important; }
  html.fsm1 body .custom-search-container .fs-addr-edit::before{ inset:6px 3px !important; }
  html.fsm1 body .custom-search-container #wrapper_pickup_text .fs-addr .fs-addr-edit,
  html.fsm1 body .custom-search-container .custom-stop-row .fs-addr .fs-addr-edit{ right:43px !important; }
  html.fsm1 body .custom-search-container #wrapper_pickup_text.fs-addr-on > .add-stop-inline-btn{ top:50% !important; bottom:auto !important; right:6px !important; transform:translateY(-50%) !important; }
  html.fsm1 body .custom-search-container .custom-stop-row .custom-input-wrapper.fs-addr-on ~ .remove-stop-btn{ top:50% !important; bottom:auto !important; right:4px !important; transform:translateY(-50%) !important; width:38px !important; height:38px !important; }

  /* route + price card: grows with the screen, route on top, price and button at the bottom */
  html.fsm1 body .custom-search-container .step1-price-panel{ flex:1 1 auto; display:flex !important; flex-direction:column; justify-content:space-between; border-radius:16px !important; margin-top:2px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-route{ flex:1 1 auto; display:flex !important; flex-direction:column; justify-content:flex-start; padding:var(--f-panel) 14px clamp(6px, calc(var(--f-panel) - 2px), 12px) !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-row{ display:flex !important; margin:0 0 clamp(3px, calc(var(--f-panel) * .5), 8px) !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-row:first-child::after{ top:18px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-chips{ display:flex !important; flex-wrap:wrap; gap:6px !important; margin:0 0 auto !important; padding-top:clamp(5px, calc(var(--f-panel) * .7), 14px); }
  html.fsm1 body .custom-search-container .step1-price-panel-row:first-child{ margin-top:auto !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-chip{ padding:3px 10px !important; font-size:12.5px !important; font-weight:500 !important; line-height:1.4 !important; white-space:nowrap; }
  html.fsm1 body .custom-search-container .step1-price-panel-label{ font-size:10.5px !important; font-weight:600 !important; letter-spacing:.08em !important; line-height:1.25 !important; margin:0 0 1px !important; color:rgba(255,255,255,.62) !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-value{ font-size:14px !important; font-weight:500 !important; line-height:1.3 !important; overflow-wrap:anywhere; white-space:normal !important; display:block !important; overflow:visible !important; text-overflow:clip !important; -webkit-line-clamp:unset !important; max-height:none !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-price{ display:flex !important; flex-direction:row !important; flex-wrap:wrap !important; align-items:flex-end !important; column-gap:10px !important; row-gap:0 !important; margin:0 14px !important; padding:clamp(6px, calc(var(--f-panel) - 2px), 12px) 0 clamp(10px, var(--f-panel), 14px) !important; width:auto !important; border-top:1px solid rgba(255,255,255,.14) !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-price-label{ flex:0 0 100% !important; width:100% !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.1em !important; line-height:1.25 !important; margin:0 0 2px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-price-value{ flex:0 0 auto !important; width:auto !important; font-size:var(--f-price) !important; font-weight:700 !important; line-height:1.1 !important; margin:0 !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-price-note{ flex:0 0 100% !important; width:100% !important; min-width:0 !important; text-align:left !important; font-size:12px !important; line-height:1.3 !important; margin:3px 0 0 !important; color:#C8D3E2 !important; }
  html.fsm1 body .custom-search-container .step1-price-panel:not(.fs-ready) .fs-price-ok{ display:none !important; }
  html.fsm1 body .custom-search-container .step1-price-panel.fs-ready .fs-price-ok{ display:inline !important; margin:0 6px 0 0 !important; font-size:12px !important; font-weight:500 !important; }
  html.fsm1 body .custom-search-container .fs-calc-state{ flex:0 0 100% !important; order:3 !important; margin:6px 0 0 !important; }
  html.fsm1 body .custom-search-container .wizard-btn-next{ flex:0 0 100% !important; order:4 !important; width:100% !important; height:var(--f-btn) !important; min-height:var(--f-btn) !important; margin-top:clamp(8px, var(--f-panel), 14px) !important; font-size:16px !important; font-weight:600 !important; border-radius:13px !important; }

  /* the "price is being calculated" line sits beside the price, so the card does not jump */
  html.fsm1 body .custom-search-container .fs-calc-state[data-state=busy]{ flex:1 1 110px !important; order:0 !important; width:auto !important; min-width:0 !important; margin:0 !important; align-self:center; gap:4px !important; font-size:12px !important; }

  /* round trip: swap button between the two fields, clear of the label text, chevron and + */
  html.fsm1 body .custom-search-container .fs-swap-btn{ width:30px !important; height:30px !important; bottom:calc(-27px - var(--f-gap)) !important; right:4px !important; }
  html.fsm1 body .custom-search-container .fs-swap-btn::after{ content:""; position:absolute; inset:-7px; }

  /* chat button: slimmer, waits below the card (js/fs-m1.js) */
  html.fsm1 body #fsca{ bottom:8px !important; left:max(10px,env(safe-area-inset-left)) !important; }
  html.fsm1 body #fsca .fsca-btn{ height:46px !important; padding:0 16px 0 6px !important; font-size:14px !important; translate:0 var(--fsm1y,0px); }
  html.fsm1 body #fsca .fsca-ic{ width:34px !important; height:34px !important; }
  html.fsm1.fsm1-card body #fsca .fsca-hint{ display:none !important; }
}
/* narrow phones: same layout, slightly smaller lines so the labels stay in one row */
@media (max-width:345px){
  html.fsm1 body .custom-search-container .custom-search-tab{ font-size:12.5px !important; gap:4px !important; }
  html.fsm1 body .custom-search-container .label-link{ font-size:11.5px !important; padding:0 2px 0 4px !important; gap:3px; }
  html.fsm1 body .custom-search-container #group_pickup > label,
  html.fsm1 body .custom-search-container #group_dropoff > label{ column-gap:4px !important; font-size:11px !important; letter-spacing:.04em !important; }
  html.fsm1 body .custom-search-container #wrapper_dropoff_select .custom-display-trigger,
  html.fsm1 body .custom-search-container #wrapper_pickup_select .custom-display-trigger{ font-size:14px !important; padding-right:32px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-value{ font-size:13px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-chip{ padding:3px 7px !important; font-size:12px !important; }
  html.fsm1 body .custom-search-container .step1-price-panel-chips{ gap:4px !important; }
}