/* =========================================================
   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%;
}
.row.two,.row.two.mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@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;
}

/* 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; /* helps centre text within the 42px pill */
}

.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;          /* white instead of orange */
  font-weight:700;
}
.dq-price-unit{font-size:.95rem;opacity:.9; margin-left:2px;}
/* price nowrap & tight unit */
#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;                 /* don't stretch across the row */
  justify-content:flex-end;
  align-items:center;
  gap:4px;                       /* small horizontal spacing */
  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%; }

  /* price/labels a bit smaller to avoid wrapping */
  .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; } /* car icon +10% */
}

/* 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;
  /* NEW: separator + spacing between code and digits */
  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;
  /* NEW: move digits a bit to the right so they don't "touch" the code */
  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;  /* extra left padding for lens */
  margin:6px !important;
  background-position:8px center !important; /* keep the lens aligned */
}
.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;
}
/* --- Restore discount (old) price strike-through --- */
.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 */
.embed-surface {
  max-width: 1380px;           /* a bit wider */
  margin: 0 auto 36px;         /* slightly less bottom space */
  padding: 12px 24px 16px;     /* a little less vertical padding */
  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);
}

/* Inner app fits nicely inside the frame */
.embed-surface #taxi-embed {
  border-radius: 18px;
  overflow: hidden;
}