:root{
  --bg:#f6f8fb;
  --card:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;

  --primary:#1565d8;
  --primary-press:#0f4ea8;
  --primary-soft:#eaf2ff;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

/* Base & container */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container{max-width:1200px;margin:0 auto;padding:18px}

/* ---------- HEADER (stepper like screenshot) ---------- */
.hero{
  background: linear-gradient(180deg, #f5f9ff 0%, #eef4ff 100%);
  border-bottom: 1px solid #e6eefc;
}
.hero-inner{padding-block:18px}
/* Stepper container: allow real horizontal scroll from the very left */
.steps{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x: contain;
  scrollbar-width:none;              /* hide bar, keep scroll */
  padding-inline:12px;               /* breathing room so first chip isn't clipped */
  scroll-padding-left:12px;          /* where scrollIntoView aligns */
}
.steps::-webkit-scrollbar{ display:none }

/* Step list: never shrink to container; start at the left (not centered) */
.steps ol{
  list-style:none; margin:0; padding:0;
  display:flex; gap:40px; align-items:center;
  justify-content:flex-start;        /* was center */
  min-width:max-content;             /* allow content to be wider than the container */
  white-space:nowrap;
}

.steps li{
  display:flex;align-items:center;gap:10px;
  color:#6d7a90;font-weight:700;letter-spacing:.2px;
  position:relative;padding-right:44px;
}
.steps li::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:28px; height:3px; background:#cfd8ea; opacity:.9; border-radius:3px;
}
.steps li:last-child{padding-right:0}
.steps li:last-child::after{display:none}
.steps .dot{
  display:inline-grid; place-items:center;
  width:28px; aspect-ratio:1;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-weight:800;
  box-shadow: inset 0 0 0 2px #d7e4ff;
}
.steps .label{white-space:nowrap}
.steps li.active{color:#0b3f8f}
.steps li.active .dot{ background:var(--primary); color:#fff; box-shadow:none }
.steps li.completed{color:#4b5563}
.steps li.completed .dot{background:var(--primary);color:#fff;opacity:.7}
.steps li.completed::after{background:#7ea5f8;opacity:.4}

/* ---------- GRID ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:18px;position:relative;min-height:400px}
.main{min-width:0}

/* ---------- CARDS & FIELDS ---------- */
.card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;
}
.card-title{font-weight:800;margin:0 0 8px}
.muted{color:var(--muted)}
.small{font-size:12px}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.cols.align-start{align-items:start}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.row.compact{margin-top:6px}

.field label{display:block;font-weight:700;margin:4px 0 6px}
.field input,.field select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:14px;background:#fff;outline:none;
}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(21,101,216,.14)}
.country-select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background-color:#fff;
  background-image:none;
  padding-right:34px;
  font-size:15px;
}
.country-select::-ms-expand{display:none}
.country-select option{font-size:15px;color:var(--text)}
.field input[type=number]{-moz-appearance:textfield}
.field input[type=number]::-webkit-inner-spin-button,
.field input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.select-like{position:relative}
.select-like .chev{position:absolute;right:12px;bottom:12px;font-size:12px;color:#6d7a90;pointer-events:none}

/* inline mini inputs like screenshot */
.inline-inputs{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.inline-inputs .mini{width:164px;position:relative}
.inline-inputs .unit{
  position:absolute;right:10px;bottom:10px;color:var(--muted);font-size:12px;
}

/* tip card */
.tip{display:flex;gap:14px}
.tip-icon{font-size:28px;line-height:1}
.tip-body p{margin:6px 0}

/* actions & result */
.actions{display:flex;align-items:center;gap:12px;margin-top:10px}
.primary{
  background:var(--primary);color:#fff;border:0;border-radius:12px;padding:12px 20px;
  font-weight:800;cursor:pointer;
}
.primary:active{background:var(--primary-press)}
.primary .arrow{margin-left:8px}
.linklike{background:transparent;border:0;color:var(--primary);font-weight:700;cursor:pointer}
.step-pane{
  transition:opacity .45s ease, transform .45s ease;
  will-change:opacity, transform;
}
.step-pane[aria-hidden="true"]{
  opacity:0;
  transform:translateY(30px);
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
}
.step-pane.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
  position:relative;
  z-index:1;
}

.results-pane{display:flex;flex-direction:column;gap:16px}
.results-toolbar{display:flex;align-items:center;gap:16px}
.results-title{margin:0;font-size:26px;font-weight:800;color:var(--text)}
.results-subtitle{margin:0;color:var(--muted);font-size:14px}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:0;padding:8px 12px;margin:-8px 0;
  color:var(--primary);font-weight:700;cursor:pointer;border-radius:10px;
  transition:background .2s ease,color .2s ease;
}
.back-btn:hover{background:rgba(21,101,216,.08);color:var(--primary-press)}
.back-btn:active{background:rgba(21,101,216,.14)}

.results{
  margin-top:24px;
}
.results-message{
  padding:16px;border-radius:12px;background:#eef4ff;color:#0b3f8f;font-weight:700;box-shadow:var(--shadow);
}
.results-message.error{
  background:#fdeeee;color:#c62828;
}

.results-list{display:flex;flex-direction:column;gap:16px;}

.result-card{
  display:grid;grid-template-columns:minmax(96px,120px) 1fr minmax(140px,auto);
  gap:18px;align-items:center;padding:18px 20px;
  border-radius:var(--radius);
  background:var(--card);
  box-shadow:var(--shadow);
}

.result-time{display:flex;flex-direction:column;gap:2px;color:var(--primary);text-transform:uppercase}
.result-time .value{
  font-size:34px;font-weight:800;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:flex-end;gap:4px;
}
.result-time .unit{font-weight:700;font-size:13px;color:#1f4ba0;letter-spacing:.6px}
.result-time .hint{font-size:12px;color:var(--muted);text-transform:none}
.result-time .unit-inline{font-size:20px;color:#1f4ba0;font-weight:700;line-height:1}

.result-body{display:flex;flex-direction:column;gap:10px;color:var(--text)}
.result-provider{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px}
.result-badges{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;text-transform:uppercase;color:var(--muted)}
.result-badge{padding:4px 8px;border-radius:999px;background:#f5f7fb;border:1px solid #dce3f2;font-weight:700;font-size:11px;letter-spacing:.5px;color:#51638b}
.result-badge.highlight{background:#fff2d6;color:#a05a00;border-color:#ffd7a1}
.result-route{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;line-height:1.4}

.result-price{display:flex;flex-direction:column;gap:10px;align-items:flex-end;text-align:right}
.result-price .amount{font-size:26px;font-weight:800;color:var(--primary)}
.result-price .result-breakdown{font-size:12px;color:var(--muted);line-height:1.4;max-width:200px}
.result-price .amount small{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px}
.result-cta{background:var(--primary);color:#fff;border:0;border-radius:12px;padding:10px 18px;font-weight:800;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.result-cta:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(21,101,216,.25)}
.result-cta:active{transform:none;box-shadow:none;background:var(--primary-press)}

.results-empty{padding:30px;border-radius:var(--radius);text-align:center;background:var(--card);box-shadow:var(--shadow);color:var(--muted);font-weight:600}

@media (max-width: 900px){
  .result-card{grid-template-columns:minmax(90px,1fr) 1fr;gap:16px}
  .result-price{align-items:flex-start;text-align:left}
}

@media (max-width: 640px){
  .result-card{grid-template-columns:1fr;align-items:flex-start}
  .result-time{flex-direction:row;align-items:baseline;gap:10px}
  .result-time .value{font-size:28px}
  .result-time .unit{text-transform:none;color:var(--muted)}
}


/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
  .row{grid-template-columns:1fr 1fr}
  .inline-inputs .mini{width:calc(50% - 6px)}
  .hero-inner{padding-block:14px}
}
@media (max-width: 560px){
  .row{grid-template-columns:1fr}
  .inline-inputs .mini{width:100%}
}

/* For medium phones ~360–420px wide */
@media (max-width: 420px){
  .card{ padding:14px; }
  .card-title{ font-size:16px }
  .field label{ font-size:14px }
  .field input{ font-size:15px; padding:10px }
}
/* --- Mobile readability & tap sizes --- */
/* Ensure base text never shrinks below 16px on phones */
@media (max-width: 768px){
  html { font-size: 16px; }             /* base for medium phones */
}

@media (max-width: 480px){
  /* Bigger, comfy defaults for small phones */
  html { font-size: 17px; }             /* global bump */
  body { line-height: 1.5; }

  .container{ padding: 6px; }
  .card{ padding: 16px; border-radius: 14px; }

  /* Labels and inputs readable, avoid iOS zoom (<16px triggers zoom) */
  .field label{ font-size: 16px; }
  .field input, .field select{
    font-size: 16px;
    padding: 14px 14px;
    min-height: 44px;                    /* WCAG recommended target size */
    border-radius: 12px;
  }

  /* Stack tight groups vertically; no squished halves */
  .row{ display: flex; flex-direction: column; gap: 10px; }
  .inline-inputs{ flex-direction: column; gap: 10px; }
  .inline-inputs .mini{ width: 100%; }

  /* Stepper stays legible */
  .steps .dot{ width: 34px; aspect-ratio: 1; font-size: 15px; }
  .steps .label{ font-size: 15px; }

  /* Buttons easier to tap */
  .primary{ font-size: 16px; padding: 14px 20px; border-radius: 14px; }
  .addpkg{  font-size: 15px; padding: 12px 14px; }
  .linklike{ font-size: 15px; }

  /* Results block text not tiny */
  .results{ font-size: 15px; padding: 12px; }
}

/* Ultra-small screens (≤360px): one more bump */
@media (max-width: 360px){
  html { font-size: 18px; }
}