/* =========================================================
   Taxi Point – Norrköping (Desktop Embed Skin)
   File: /embed-app/styles/base.css
   Date: 2025-11-09 (consolidated, no duplicates)
========================================================= */

:root{
  --brand:#ff6b00; --brand-2:#e65c00;
  --ink:#0b132b; --muted:#334155; --line:#e5e7eb;
  --surface:#fff; --surface-2:#f9fafb;
  --radius:18px; --shadow:0 6px 22px rgba(0,0,0,.08);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --right-card-w: 442px;       /* Right card fixed; left fills */
  --panel-bg:#5f6571;          /* unified panel */
  --panel-fg:#ffffff;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:#f3f6fb}

/* host */
#taxi-embed{
  position:relative; overflow:visible; border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow);
  width:100%; max-width:none; margin:0;
}
#taxi-embed #map{
  width:100%;
  height:290px; /* was 340px – slightly less height */
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;
}

/* layout */
.hud{background:#fff}
.hud-inner{
  display:grid; gap:12px; padding:12px 16px 14px;
  grid-template-columns:1fr; width:100%; align-items:stretch;
}

/* ---------- LEFT (form) ---------- */
#sheet{ display:flex; width:100%; min-width:0; }
.sheet-inner{
  background:var(--panel-bg); color:var(--panel-fg);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  display:flex; flex-direction:column; width:100%; min-width:0; height:100%;
}

/* ✅ FIX: allow pickup/dropoff (and all 2-col rows) to shrink properly */
.row.two,.row.two.mini{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
}
/* critical: grid children must be allowed to shrink */
.row.two > *, .row.two.mini > *{ min-width:0; }

@media (max-width:760px){
  .row.two,.row.two.mini{grid-template-columns:1fr}
}

/* Customer + admin: vertical spacing between all rows */
.sheet-inner .row{
  margin-bottom:10px;
}

/* base pill */
.pill{
  display:flex; align-items:center; gap:10px; min-height:42px;
  border:1px solid var(--line); border-radius:12px; padding:8px 12px; background:#fff;
  position:relative; overflow:visible;

  /* ✅ FIX: pills must be allowed to shrink inside grid columns */
  min-width:0;
}

/* UPDATED: vertically centre all field text (placeholders + values) */
.pill input,
.pill select,
.pill textarea{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font:19px/1.6 var(--font);
  color:var(--ink);
  padding:0;
  margin:0;
  line-height:1.6;

  /* ✅ FIX: inputs must be allowed to shrink too */
  min-width:0;
}

.pill > .iti{ flex:1; display:flex; align-items:center; min-width:0; }

/* actions */
.actions-step1,.actions-step2{ margin-top:auto; padding-top:10px; }
.actions-step2{ justify-content:space-between; gap:12px; }
.btn{border:0;border-radius:999px;font-weight:700;cursor:pointer;padding:10px 20px;transition:background .2s ease,transform .06s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff;box-shadow:0 12px 26px rgba(255,107,0,.26)}
.btn.primary:hover{background:var(--brand-2)}
.btn.back{background:#0f172a;color:#fff}
.sheet-inner .actions-step1 .btn.primary,
.sheet-inner .actions-step2 .btn.primary{font-size:1.02rem;padding:14px 34px;border-radius:26px;min-width:240px}

/* inputs white on grey panel */
.sheet-inner .pill input,
.sheet-inner .pill select,
.sheet-inner .pill textarea{ background:#fff; color:#111; }

/* ---------- RIGHT COLUMN ---------- */
.side{ display:flex; flex-direction:column; gap:16px; max-width:var(--right-card-w); width:100%; height:100%; }
.side .panel{
  background:var(--panel-bg); color:var(--panel-fg);
  border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.45);
  display:grid; grid-template-rows:auto 1fr auto; row-gap:8px;
  width:100%; height:100%; overflow:hidden;
}
.side .panel:hover{box-shadow:0 0 0 1px rgba(255,107,0,.40),0 12px 40px rgba(0,0,0,.60);transition:box-shadow .25s ease}

/* header */
.panel-head.unified-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);padding:10px 12px 8px;
  border-bottom:1px dashed rgba(255,255,255,.12);min-height:36px
}
.head-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.panel-title{font-size:.95rem;font-weight:800;letter-spacing:.2px;text-transform:uppercase;color:#f8fafc;margin:0}
.panel-subtitle{margin:0;font-size:.84rem;color:#c3ccda;letter-spacing:.1px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#ffd166;box-shadow:0 0 0 2px rgba(255,209,102,.18) inset}
.brand-logo-unified{width:24px;height:24px;border-radius:6px;background:#fff;display:block;object-fit:contain}

/* hero + meta line */
.hero-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0}
.card-hero-img{width:26px;height:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4))}
.dq-capline{font-size:.86rem;color:#e9edf5;font-weight:600}

/* --- Right-card content rows (base) --- */
.dq-pre{padding-top:6px}
.dq-rows{padding:10px 12px;font-size:.98rem;color:#f1f5fb}
.dq-row{display:flex;align-items:center;gap:8px;margin:4px 0;line-height:1.35}
.dq-row .label{font-weight:700}
.dq-row strong{color:#fff}
.ico{font-size:.94rem;color:var(--brand)}

/* --- Schedule card (tripSummary): grid alignment & tight spacing --- */
#tripSummary .dq-rows{
  --dq-ico:22px; --dq-label:72px;
  padding:6px 12px;
}
#tripSummary .dq-rows .dq-row{
  display:grid; grid-template-columns:var(--dq-ico) var(--dq-label) 1fr;
  align-items:center; column-gap:6px; margin:2px 0; line-height:1.22;
}
#tripSummary .dq-rows .ico{width:var(--dq-ico);text-align:center;margin:0;padding:0}
#tripSummary .dq-rows .label{color:#fff}
#tripSummary .dq-rows .value{min-width:0;color:#fff}
#tripSummary .dq-rows .dq-row:nth-child(2){
  border-top:1px dashed rgba(255,255,255,.22);
  padding-top:3px; margin-top:6px;
}
/* ensure any nested spans/links are white */
#tripSummary .dq-rows .label *,
#tripSummary .dq-rows .value *,
#tripSummary .dq-rows a,
#tsWhen,#tsPickup,#tsDropoff{ color:#fff !important; text-decoration:none !important; }

/* --- Car-info card (carInfo): keep flex rows, force white metrics --- */
#carInfo .dq-rows .dq-row{ display:flex; }
#carInfo .dq-rows .ico{ width:auto; text-align:left; }
#carInfo .dq-rows .value,
#carInfo .dq-rows .value *,
#carInfo .dq-capline,
#carInfo .dq-capline *{ color:#fff !important; }

/* footer / price */
.dq-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  background:rgba(255,255,255,.04); padding:10px 12px;
  border-top:1px dashed rgba(255,255,255,.12); margin-bottom:0;
}
.dq-price{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-weight:800;
  font-size:1.22rem;
  color:#fff;
  flex:0 0 auto;
  min-width:max-content;
}
/* Pris label – same style as other text on the card */
.dq-price .ico.price{
  font-size:.95rem;
  margin-right:4px;
  color:#ffffff;
  font-weight:700;
}
.dq-price-unit{font-size:.95rem;opacity:.9; margin-left:2px;}
#dqPriceVal,#tsFare,.dq-price .value{
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.dq-price #dqPriceVal, .dq-price #tsFare{ min-width:0 !important; }

/* Payment text – compact "Kort / Swish / Kontant" row */
.pay-badges{
  display:flex;
  flex:0 0 auto;
  justify-content:flex-end;
  align-items:center;
  gap:4px;
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow-wrap:normal;
  max-width:100%;
}
.pay-badges li{
  padding:0;
  margin:0;
  border:0;
  background:none;
  font-size:.80rem;
  line-height:1.2;
  color:#f9fafb;
}

/* one card visible */
#tripSummary[hidden],#carInfo[hidden]{display:none!important}
#tripSummary:not([hidden]) + #carInfo{display:none!important}
#carInfo:not([hidden]) + #tripSummary{display:none!important}

/* desktop exact widths/heights */
@media (min-width:980px){
  #taxi-embed .hud-inner{
    grid-template-columns:minmax(0, calc(100% - var(--right-card-w) - 12px)) var(--right-card-w);
    align-items:stretch !important;
  }
  #taxi-embed .hud-inner > *{ height:100%; align-self:stretch !important; }
  #sheet,.sheet-inner,.side,.side .panel{ height:100%; }

  .side .dq-foot{ flex-wrap:nowrap; }
  .side .pay-badges{ flex:1 1 auto; min-width:0; justify-content:flex-end; }
  .side .dq-price{ font-size:1.12rem; gap:3px; }
  .side .dq-price .ico.price{ font-size:.92rem; }
  .side .dq-price-unit{ font-size:.90rem; }
  .hero-row .card-hero-img{ width:32px; height:32px; }
}

/* mobile */
@media (max-width:979px){
  #taxi-embed #map{height:300px}
  .hud-inner{grid-template-columns:1fr;padding:14px}
  .side{display:none!important}
  .sheet-inner{padding:10px}
}

/* PAC dropdown – style only; let Google handle positioning */
.pac-container{
  z-index:2147483647 !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.25) !important;
  max-height:60vh !important;
  overflow:auto !important;
}

/* Steps visibility */
body.step-1 #step1 { display:block !important; }
body.step-1 #step2 { display:none  !important; }
body.step-2 #step1 { display:none  !important; }
body.step-2 #step2 { display:block !important; }
#step1[hidden], #step2[hidden] { display:none !important; }

/* intl-tel-input skin + stacking */
.iti{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}
.iti__flag-container{
  position:absolute;
  left:8px;
  height:100%;
  display:flex;
  align-items:center;
  border-right:1px solid #e5e7eb;
  padding-right:8px;
  margin-right:8px;
}
.phone-pill{ position:relative; }

.iti--allow-dropdown input{
  background:rgba(255,255,255,.08)!important;
  color:#0b132b!important;
}
.sheet-inner .iti--allow-dropdown input{
  background:#ffffff!important;
  color:#0b132b!important;
  padding-left:100px !important;
}
.iti__country-list{ z-index:2147483647 !important }

/* Hide leading phone icon once intl-tel-input is active */
.phone-pill.iti-ready .i { display:none !important; }

/* Clear any light inner backgrounds in right cards */
.stage .hud #carInfo .card-body,
.stage .hud #tripSummary .card-body{ background:transparent !important; }

/* Step 2 buttons equal + alignment */
.sheet-inner .actions-step2{display:flex;justify-content:space-between;gap:12px}
.sheet-inner .actions-step2 .btn{flex:1;text-align:center}
.sheet-inner .actions-step2 .btn.primary,
.sheet-inner .actions-step2 .btn.back{min-width:auto;padding:14px 34px}

/* Step 1: right-align Fortsätt */
.sheet-inner .actions-step1{ display:flex; justify-content:flex-end; gap:12px; }
.sheet-inner .actions-step1 .btn{ flex:0 0 auto; }

/* intl-tel-input contrast + dropdown polish */
.sheet-inner .pill .iti__selected-flag{
  background:#ffffff !important; border:1px solid #e5e7eb !important;
  border-radius:8px !important; padding:0 8px !important;
}
.sheet-inner .pill .iti__selected-dial-code{ color:#0b132b !important; font-weight:700; margin-left:6px; }
.sheet-inner .pill .iti__selected-flag .iti__arrow{ border-top-color:#334155 !important; }
.sheet-inner .pill .iti{ gap:6px; }
.sheet-inner .iti--allow-dropdown input{ background:#ffffff !important; color:#0b132b !important; }
.sheet-inner .pill .iti__country-list{
  background:#ffffff !important; color:#0b132b !important; border:1px solid #e5e7eb !important;
  box-shadow:0 12px 28px rgba(0,0,0,.20) !important; border-radius:10px !important; overflow:auto !important;
}
.sheet-inner .pill .iti__country-list .iti__country{ display:flex; align-items:center; gap:8px; padding:8px 10px !important; }
.sheet-inner .pill .iti__country-list .iti__country .iti__country-name{ color:#0b132b !important; }
.sheet-inner .pill .iti__country-list .iti__country .iti__dial-code{ color:#334155 !important; font-weight:700 !important; margin-left:auto; }
.sheet-inner .pill .iti__country-list .iti__country:hover,
.sheet-inner .pill .iti__country-list .iti__country.iti__highlight{ background:#f1f5f9 !important; }

/* FIX: avoid lens + text overlap in country search box */
.sheet-inner .pill .iti__search-input{
  background:#ffffff !important; color:#0b132b !important;
  border:1px solid #e5e7eb !important; border-radius:8px !important;
  padding:6px 8px 6px 28px !important;
  margin:6px !important;
  background-position:8px center !important;
}
.sheet-inner .pill .iti__search-input::placeholder{ color:#64748b !important; }

/* Old price hidden by default; shown only when .has-discount is set */
.dq-price .old{ display:none; }
.dq-price.has-discount .old{
  display:inline-block !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px;
  opacity:.65;
  font-weight:700;
  font-size:.95rem;
  margin-right:4px;
  color:#f1f5fb !important;
}

/* ===== Desktop: ensure window scrolls, not inner containers ===== */
@media (min-width: 901px){
  html, body{
    height:auto !important;
    overflow-y:auto !important;
  }

  /* Common WP wrappers that might be creating their own scroll area */
  #page,
  .site,
  .site-main,
  .content-area,
  .entry-content,
  .wp-site-blocks,
  .wp-block-group,
  .theme-page-content,
  .embed-surface,
  .stage{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }
}

/* Make sure the dropdown can appear above WP containers */
.iti__country-list{ z-index:2147483647 !important; }

/* === Force flag sprite for WordPress embed (local bundle) === */
.iti__flag{
  background-image:url("/embed-app/vendor/intl-tel-input/local/img/flags.png") !important;
  background-repeat:no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .iti__flag{
    background-image:url("/embed-app/vendor/intl-tel-input/local/img/flags@2x.png") !important;
  }
}

/* Desktop frame around embedded taxi widget */
@media (min-width: 901px){
  .embed-surface{
    max-width: 1380px;
    margin: 0 auto 36px;
    padding: 12px 24px 16px;
    border-radius: 22px;
    background: #f3f4f6;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.16),
      0 0 0 1px rgba(255, 255, 255, 0.6);
  }

  .embed-surface #taxi-embed{
    border-radius: 18px;
    overflow: hidden;
  }
}

/* ===== Phone input: keep flag-only selector (desktop) ===== */
#taxi-embed .iti__selected-dial-code{ display:none !important; }

/* ===========================================================
   Desktop phone selector UX:
   Show flag + country name (truncated) and remove the "dead space".
=========================================================== */
@media (min-width: 901px){
  #taxi-embed .iti .iti__flag-container{ width:170px; }

  #taxi-embed .iti input[type="tel"],
  #taxi-embed .iti input.iti__tel-input{
    padding-left:190px !important;
  }

  #taxi-embed .iti__selected-flag{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding-left:10px;
    padding-right:10px;
  }

  #taxi-embed .iti__selected-dial-code{ display:none !important; }

  #taxi-embed .iti__selected-flag::after{
    content:attr(title);
    display:block;
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    opacity:.9;
    font-size:14px;
    line-height:1;
  }
}

/* ===========================================================
   Desktop phone field: remove excessive left gap WITHOUT changing layout.
=========================================================== */
@media (min-width: 901px){
  #taxi-embed .iti__selected-dial-code{ display:none !important; }
  #taxi-embed .iti .iti__flag-container{ width:auto !important; }

  #taxi-embed .iti input[type="tel"],
  #taxi-embed .iti input.iti__tel-input{
    padding-left:64px !important;
  }

  #taxi-embed .iti__selected-flag{
    padding-left:10px !important;
    padding-right:8px !important;
  }
}

/* =========================================================
   Tablet floating summary bar (mirrors desktop right cards)
========================================================= */
.tp-tablet-bar[hidden]{ display:none !important; }

.tp-tablet-bar{
  position:absolute;
  left:12px; right:12px;
  top:12px;
  z-index: 50;
  pointer-events: none;
}

.tp-tablet-bar__btn{
  pointer-events: auto;
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding:14px 14px;              /* taller */
  background: rgba(17,24,39,.74);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.tp-tablet-bar__left{ display:flex; flex-direction:column; gap:8px; min-width:0; }

.tp-tablet-bar__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.tp-tablet-bar__title{ font-weight:900; font-size:1.02rem; letter-spacing:.2px; }

.tp-tablet-bar__price{
  display:flex; align-items:baseline; gap:4px;
  font-weight:900; font-size:1.15rem; white-space:nowrap;
}
.tp-tablet-bar__kr{ opacity:.9; font-weight:800; font-size:.95rem; }

.tp-tablet-bar__rows{ display:grid; gap:6px; }
.tp-tb-row{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.25;
  font-size:.98rem;
  min-width:0;
}

.tp-tb-ico{ width:22px; text-align:center; }
.tp-tb-val{ color:#fff; }
.tp-tb-muted{ opacity:.88; color:#e5e7eb; }

.tp-tablet-bar__rows .ellipsis{
  display:inline-block;
  max-width: 56vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (min-width:901px) and (max-width:1200px){
  .tp-tablet-bar{ top:12px; }
}


/* Tablet bar: honor hidden attribute (desktop/tablet) */
#tpTabletBar [hidden]{ display:none !important; }