/* === AZ Shuttle Pro — Booking Form Skin (frontend) ===
   Scope: only affects plugin wrappers (#azsp-figma-v4, #azsp-search-pill).
   Safe to load globally. Edit variables below to tweak brand values.
--------------------------------------------------------------------- */
:root{
  --az-red:#D30410;
  --az-border:#EEEFF3;
  --az-muted:#6b7280;
  --az-bg:#FFFFFF;
  --az-input:#F9F7F7;
  --az-radius:16px;
}
/* --- Shared wrappers --- */
#azsp-figma-v4.azsp-container{ width:100%; max-width:100%; margin:0 auto; padding:0 14px; box-sizing:border-box; }
#azsp-figma-v4 .layout{display:grid; gap:24px; }
@media (max-width:1100px){ #azsp-figma-v4 .layout{ grid-template-columns:1fr; width:100%; } }

/* --- Cards (form / trip / summary) --- */
#azsp-figma-v4 .form, #azsp-figma-v4 .trip, #azsp-figma-v4 .sum-card{
  background:var(--az-bg); border:1px solid var(--az-border); border-radius:var(--az-radius); padding:18px;
}
#azsp-figma-v4 .trip{ padding:20px; }
#azsp-figma-v4 .sum-card{ padding:18px 18px 20px; }

/* --- Labels + fields --- */
#azsp-figma-v4 label{ display:block; font-size:12px; color:var(--az-muted); margin:0 0 6px; }
#azsp-figma-v4 .field{ margin-bottom:12px; }
#azsp-figma-v4 input, #azsp-figma-v4 select, #azsp-figma-v4 textarea{
  width:100%; height:46px; border-radius:12px; border:1px solid var(--az-border); background:var(--az-input); padding:10px 12px; outline:none;
}
#azsp-figma-v4 textarea{ min-height:120px; height:auto; resize:vertical; }
#azsp-figma-v4 .grid-2, #azsp-figma-v4 .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ #azsp-figma-v4 .grid-2, #azsp-figma-v4 .row{ grid-template-columns:1fr; } }

/* --- Payments row (inline) --- */
#azsp-figma-v4 .payments-field{ display:grid; grid-template-columns:160px 1fr; align-items:center; gap:12px; margin-top:6px; }
#azsp-figma-v4 .payments-field > label{ margin:0; }
#azsp-figma-v4 .pay-group{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
#azsp-figma-v4 .pay{ display:flex; align-items:center; gap:8px; padding:0; background:transparent; border:0; }
#azsp-figma-v4 .pay .icon{ width:18px; height:18px; display:inline-block; opacity:.9; }
#azsp-figma-v4 .pay input[type="radio"]{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border:2px solid #cbd1da; border-radius:50%; background:#fff;
  display:inline-grid; place-content:center; margin:0 6px 0 0; flex:0 0 18px; cursor:pointer;
}
#azsp-figma-v4 .pay input[type="radio"]::before{ content:""; width:10px; height:10px; border-radius:50%; transform:scale(0); transition:transform .12s ease-in-out; background:var(--az-red); }
#azsp-figma-v4 .pay input[type="radio"]:checked{ border-color:var(--az-red); }
#azsp-figma-v4 .pay input[type="radio"]:checked::before{ transform:scale(1); }

/* --- Trip header (date underline) + times --- */
#azsp-figma-v4 .trip .h1{ font-weight:800; text-align:center; margin:0 0 6px; }
#azsp-figma-v4 .trip .h1:after{ content:""; display:block; height:3px; width:64px; margin:8px auto 0; background:var(--az-red); border-radius:999px; }
#azsp-figma-v4 .trip .time{ color:var(--az-red); font-weight:700; }

/* --- Timeline center line with bus icon --- */
#azsp-figma-v4 .trip .timeline{ display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:10px; margin-top:10px; }
#azsp-figma-v4 .trip .timeline .line{ height:2px; background:#F0EAEA; position:relative; }
#azsp-figma-v4 .trip .timeline .line:before{
  content:""; position:absolute; left:50%; top:-6px; width:16px; height:16px;
  background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22><path d=%22M3 13l1-5a5 5 0 015-4h6a5 5 0 015 4l1 5v5a1 1 0 01-1 1h-1a1 1 0 01-1-1h-8a1 1 0 01-1 1H9a1 1 0 01-1-1v-1H4a1 1 0 01-1-1v-3z%22 fill=%22%23D30410%22/></svg>') center/contain no-repeat;
  transform:translateX(-50%); opacity:.9;
}

/* --- Summary rows + button --- */
#azsp-figma-v4 .sum-card .row{ display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--az-border); }
#azsp-figma-v4 .sum-card .row:last-of-type{ border-bottom:0; }
#azsp-figma-v4 .sum-card .left{ color:var(--az-muted); }
#azsp-figma-v4 .sum-card .right{ font-weight:700; color:#111827; }
#azsp-figma-v4 .btn, #azsp-figma-v4 button[type=submit]{ display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; min-height:52px; border-radius:14px; font-weight:700; width:100%; }
#azsp-figma-v4 .btn-primary{ background:var(--az-red); color:#fff; border:1px solid var(--az-red); }
#azsp-figma-v4 .btn-primary:hover{ filter:brightness(.96); }

/* --- Search pill passengers pop: center +/- --- */
#azsp-search-pill .azsp-pax-pop .azsp-step{ width:40px; height:40px; border-radius:10px; border:1px solid #d1d5db; background:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--az-red); cursor:pointer; }


/* === Strong overrides to guarantee Figma look === */
#azsp-figma-v4 .layout{display:grid !important;gap:24px !important}
@media(max-width:1100px){#azsp-figma-v4 .layout{grid-template-columns:1fr !important;width:100% !important}}

#azsp-figma-v4 .card.sum-card{background:#fff !important;border:1px solid var(--az-border) !important;border-radius:var(--az-radius) !important;padding:18px !important}
#azsp-figma-v4 .sum-card .h1{font-size:18px !important;font-weight:800 !important;margin:0 0 6px !important}
#azsp-figma-v4 .sum-card .row{display:flex !important;justify-content:space-between !important;align-items:center !important;padding:6px 0 !important;border-bottom:1px solid var(--az-border) !important}
#azsp-figma-v4 .sum-card .row:last-of-type{border-bottom:0 !important}
#azsp-figma-v4 .sum-card .left{color:var(--az-muted) !important}
#azsp-figma-v4 .sum-card .right{font-weight:700 !important;color:#111827 !important}
#azsp-figma-v4 .sum-card .totalbox{margin-top:10px !important}
#azsp-figma-v4 .sum-card .totalbox > div:first-child{font-weight:700 !important}
#azsp-figma-v4 .sum-card .totalbox .box{display:flex !important;justify-content:space-between !important;align-items:center !important;background:#F7F8FA !important;border-radius:12px !important;padding:12px 16px !important}

#azsp-figma-v4 .payments-field{display:grid !important;grid-template-columns:160px 1fr !important;align-items:center !important;gap:12px !important;margin-top:6px !important}
#azsp-figma-v4 .payments-field > label{margin:0 !important;font-size:12px !important;color:var(--az-muted) !important}
#azsp-figma-v4 .pay-group{display:flex !important;gap:18px !important;flex-wrap:wrap !important;align-items:center !important}
#azsp-figma-v4 .pay{display:flex !important;align-items:center !important;gap:8px !important;background:transparent !important;border:0 !important;padding:0 !important}
#azsp-figma-v4 .pay input[type=radio]{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #cbd1da;border-radius:50%;background:#fff;display:inline-grid;place-content:center;margin:0 6px 0 0;flex:0 0 18px;cursor:pointer}
#azsp-figma-v4 .pay input[type=radio]::before{content:"";width:10px;height:10px;border-radius:50%;transform:scale(0);transition:transform .12s;background:var(--az-red)}
#azsp-figma-v4 .pay input[type=radio]:checked{border-color:var(--az-red)}
#azsp-figma-v4 .pay input[type=radio]:checked::before{transform:scale(1)}