/* Route Booking Pro v3 — Orange theme */
:root {
    --rbp-primary:   #f97316;
    --rbp-primary-h: #ea580c;
    --rbp-primary-rgb: 249, 115, 22;
    --rbp-dark:      #1d3557;
    --rbp-mid:       #457b9d;
    --rbp-light:     #fff7ed;
    --rbp-border:    #dce3ec;
    --rbp-text:      #2b2d42;
    --rbp-muted:     #6c757d;
    --rbp-radius:    10px;
    --rbp-shadow:    0 4px 24px rgba(29,53,87,.10);
}
.rbp-wrap {
    font-family:'Segoe UI',system-ui,sans-serif;
    max-width:900px;
    margin:0 auto;
    color:var(--rbp-text);
    width:100%;
    box-sizing:border-box;
    padding:0 4px;
}
.rbp-wrap *, .rbp-wrap *::before, .rbp-wrap *::after { box-sizing:border-box; }

/* ── Steps ── */
.rbp-steps { display:flex; align-items:center; margin-bottom:28px; padding:18px 0; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0; }
.rbp-step { display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; min-width:72px; }
.rbp-step-circle { width:36px; height:36px; border-radius:50%; background:#dce3ec; color:#6c757d; font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; border:3px solid #dce3ec; transition:all .3s; flex-shrink:0; }
.rbp-step span { font-size:12px; color:var(--rbp-muted); font-weight:500; text-align:center; line-height:1.25; transition:color .3s; max-width:100px; }
.rbp-step.active .rbp-step-circle { background:var(--rbp-primary); border-color:var(--rbp-primary); color:#fff; box-shadow:0 0 0 4px rgba(var(--rbp-primary-rgb),.22); }
.rbp-step.active span { color:var(--rbp-primary); font-weight:700; }
.rbp-step.done .rbp-step-circle { background:var(--rbp-dark); border-color:var(--rbp-dark); color:#fff; }
.rbp-step.done span { color:var(--rbp-dark); }
.rbp-step-line { flex:1; height:2px; background:#dce3ec; align-self:flex-start; margin-top:18px; transition:background .3s; }
.rbp-step-line.done { background:var(--rbp-dark); }

/* ── Panels ── */
.rbp-panel { display:none; background:#fff; border-radius:var(--rbp-radius); box-shadow:var(--rbp-shadow); padding:32px 36px; animation:rbpIn .35s ease; }
.rbp-panel.active { display:block; }
@keyframes rbpIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.rbp-panel h2 { font-size:22px; font-weight:700; margin:0 0 24px; color:var(--rbp-dark); }
.rbp-section-title { font-size:16px; font-weight:700; color:var(--rbp-dark); margin:24px 0 12px; padding-bottom:8px; border-bottom:2px solid var(--rbp-border); }

/* ── Fields ── */
.rbp-field-group { margin-bottom:16px; }
.rbp-hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
.rbp-label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--rbp-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.rbp-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.rbp-dot.pickup { background:var(--rbp-primary); }
.rbp-dot.drop   { background:var(--rbp-dark); }
.rbp-dot.stop   { background:var(--rbp-mid); }

.rbp-input, .rbp-select {
    width:100%;
    border:2px solid var(--rbp-border);
    border-radius:var(--rbp-radius);
    font-size:15px;
    color:var(--rbp-text);
    background:#fafbfc;
    transition:border-color .2s,box-shadow .2s;
    box-sizing:border-box;
    font-family:inherit;
    max-width:100%;
}
.rbp-input {
    padding:12px 14px;
    line-height:1.45;
    min-height:48px;
    font-size:16px;
    overflow:hidden;
    text-overflow:ellipsis;
}
.rbp-wrap select.rbp-select {
    display:block;
    width:100% !important;
    min-height:52px !important;
    height:auto !important;
    max-height:none !important;
    padding:15px 42px 15px 16px !important;
    line-height:1.4 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    text-indent:0;
    cursor:pointer;
    vertical-align:middle;
    -webkit-appearance:menulist;
    -moz-appearance:menulist;
    appearance:menulist;
    background-color:#fafbfc !important;
    background-image:none !important;
    box-shadow:none;
    font-size:16px;
}
.rbp-wrap select.rbp-select option {
    line-height:1.5;
    padding:8px 12px;
    white-space:normal;
    font-size:15px;
}
.rbp-input:focus, .rbp-select:focus {
    outline:none;
    border-color:var(--rbp-primary);
    box-shadow:0 0 0 3px rgba(var(--rbp-primary-rgb),.14);
    background:#fff;
}

/* ── Autocomplete ── */
.rbp-ac-wrap { position:relative; }
.rbp-suggestions { position:absolute; top:100%; left:0; right:0; background:#fff; border:2px solid var(--rbp-border); border-top:none; border-radius:0 0 var(--rbp-radius) var(--rbp-radius); z-index:99999; max-height:220px; overflow-y:auto; display:none; box-shadow:0 8px 24px rgba(0,0,0,.12); }
.rbp-suggestions.open { display:block; }
.rbp-sugg-item { padding:10px 14px; cursor:pointer; font-size:14px; border-bottom:1px solid #f0f0f0; transition:background .15s; }
.rbp-sugg-item:hover { background:var(--rbp-light); color:var(--rbp-dark); }
.rbp-sugg-item:last-child { border-bottom:none; }
.rbp-sugg-loading { padding:10px 14px; font-size:13px; color:var(--rbp-muted); font-style:italic; }
.pac-container { z-index:99999 !important; }

/* ── Row/Col ── */
.rbp-row { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.rbp-col { flex:1 1 200px; min-width:min(100%,180px); overflow:visible; }
.rbp-row-pax .rbp-col { flex:1 1 calc(50% - 8px); }

/* ── Stops ── */
.rbp-stop-row { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.rbp-stop-row .rbp-ac-wrap { flex:1; min-width:0; }
.rbp-remove-stop { width:34px; height:34px; min-width:34px; border:none; background:#ffedd5; color:var(--rbp-primary); border-radius:50%; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; line-height:1; padding:0; }
.rbp-remove-stop:hover { background:#fed7aa; }
.rbp-btn-add-stop { width:100%; padding:10px 14px; background:transparent; border:2px dashed var(--rbp-border); border-radius:var(--rbp-radius); color:var(--rbp-mid); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; margin-bottom:4px; font-family:inherit; }
.rbp-btn-add-stop:hover { border-color:var(--rbp-mid); background:var(--rbp-light); }

/* ── Map ── */
#rbp-map { width:100%; height:280px; min-height:220px; border-radius:var(--rbp-radius); border:2px solid var(--rbp-border); margin:18px 0 12px; overflow:hidden; background:#e9eff5; position:relative; z-index:0; touch-action:pan-x pan-y pinch-zoom; }
.leaflet-routing-container { display:none !important; }

/* ── Distance info ── */
#rbp-distance-info { display:flex; gap:20px; background:var(--rbp-light); border-radius:8px; padding:10px 16px; font-size:14px; margin-bottom:16px; color:var(--rbp-dark); font-weight:600; flex-wrap:wrap; }
#rbp-distance-info { align-items:center; }
#rbp-distance-text, #rbp-duration-text { display:inline-flex; align-items:center; gap:6px; }

/* ── Buttons ── */
.rbp-btn-primary { width:100%; padding:14px; background:var(--rbp-primary); color:#fff; border:none; border-radius:var(--rbp-radius); font-size:16px; font-weight:700; cursor:pointer; margin-top:8px; transition:background .2s,transform .1s,box-shadow .2s; font-family:inherit; }
.rbp-btn-primary:hover:not(:disabled) { background:var(--rbp-primary-h); box-shadow:0 6px 20px rgba(var(--rbp-primary-rgb),.32); transform:translateY(-1px); }
.rbp-btn-primary:disabled { background:#d1d5db; cursor:not-allowed; transform:none; box-shadow:none; }
.rbp-btn-outline { width:100%; padding:13px; background:transparent; color:var(--rbp-dark); border:2px solid var(--rbp-border); border-radius:var(--rbp-radius); font-size:15px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; margin-top:8px; }
.rbp-btn-outline:hover { border-color:var(--rbp-dark); background:var(--rbp-light); }
.rbp-nav-btns { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.rbp-nav-btns .rbp-btn-outline, .rbp-nav-btns .rbp-btn-primary { margin-top:0; flex:1 1 140px; min-width:min(100%,140px); }

/* ══════════════════════════════════════ */
/*  STEP 2 — Two-column layout           */
/* ══════════════════════════════════════ */
.rbp-step2-layout { display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start; }
.rbp-step2-main h2 { margin-bottom:12px; }
.rbp-vehicle-hint { font-size:13px; color:var(--rbp-muted); margin:0 0 16px; line-height:1.5; }
.rbp-v-divider { font-size:12px; font-weight:700; color:var(--rbp-muted); text-transform:uppercase; letter-spacing:.04em; padding:8px 0 4px; margin-top:6px; border-top:1px dashed var(--rbp-border); }
.rbp-v-empty { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; padding:14px 16px; border-radius:8px; margin-bottom:14px; font-size:14px; }

/* ── Vehicle cards ── */
.rbp-vehicles { display:flex; flex-direction:column; gap:14px; }

.rbp-vehicle-card {
    border:2px solid var(--rbp-border);
    border-radius:var(--rbp-radius);
    padding:16px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    transition:all .2s;
    display:grid;
    grid-template-columns:100px 1fr auto;
    gap:16px;
    align-items:center;
    position:relative;
    background:#fff;
}
.rbp-vehicle-card:hover { border-color:var(--rbp-mid); box-shadow:0 4px 14px rgba(69,123,157,.15); transform:translateY(-2px); }
.rbp-vehicle-card.selected { border-color:var(--rbp-primary); box-shadow:0 0 0 3px rgba(var(--rbp-primary-rgb),.15); background:#fff7ed; }
.rbp-vehicle-card.rbp-v-unavail { opacity:.4; cursor:not-allowed; }
.rbp-vehicle-card.rbp-v-unavail:hover { transform:none; box-shadow:none; border-color:var(--rbp-border); }

.rbp-v-img-wrap { width:100px; height:70px; display:flex; align-items:center; justify-content:center; background:#f8fafc; border-radius:8px; overflow:hidden; flex-shrink:0; }
.rbp-v-img-wrap img { max-width:90px; max-height:65px; object-fit:contain; }
.rbp-v-icon-slot { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--rbp-mid); }
.rbp-v-icon-slot .rbp-icon--vehicle { width:52px; height:52px; }
.rbp-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; vertical-align:middle; }
.rbp-icon svg { width:1.15em; height:1.15em; display:block; }
.rbp-icon--label svg { width:18px; height:18px; color:var(--rbp-muted); }
.rbp-label .rbp-icon { margin-right:4px; }
.rbp-icon--inline svg { width:16px; height:16px; }
.rbp-icon--btn svg { width:18px; height:18px; margin-right:6px; }
.rbp-icon--vehicle svg { width:100%; height:100%; }

.rbp-v-name { font-size:16px; font-weight:700; color:var(--rbp-dark); margin-bottom:3px; }
.rbp-v-desc { font-size:12px; color:var(--rbp-muted); margin-bottom:8px; }
.rbp-v-meta { display:flex; gap:12px; font-size:12px; color:var(--rbp-mid); flex-wrap:wrap; }
.rbp-v-meta span { display:flex; align-items:center; gap:3px; }

.rbp-v-price-wrap { text-align:right; white-space:nowrap; }
.rbp-v-price { font-size:20px; font-weight:800; color:var(--rbp-primary); display:block; }
.rbp-v-price-lkr { font-size:12px; color:var(--rbp-muted); margin-top:4px; display:block; font-weight:500; }
.rbp-price-primary { display:block; font-weight:700; color:var(--rbp-primary); }
.rbp-v-perkm { font-size:11px; color:var(--rbp-muted); margin-top:4px; }

.rbp-v-badge { position:absolute; top:10px; right:10px; left:10px; text-align:right; background:#ffedd5; color:var(--rbp-primary-h); font-size:10px; font-weight:700; padding:4px 8px; border-radius:20px; line-height:1.3; max-width:calc(100% - 20px); }
.rbp-v-selected-check { position:absolute; top:10px; right:10px; background:var(--rbp-primary); color:#fff; width:22px; height:22px; border-radius:50%; display:none; align-items:center; justify-content:center; font-size:13px; }
.rbp-vehicle-card.selected .rbp-v-selected-check { display:flex; }

/* ── Journey Card ── */
.rbp-journey-card {
    background:#fff;
    border:1px solid var(--rbp-border);
    border-radius:var(--rbp-radius);
    padding:22px;
    box-shadow:var(--rbp-shadow);
    position:sticky;
    top:20px;
}
.rbp-jc-title { font-size:18px; font-weight:800; color:var(--rbp-dark); margin-bottom:18px; }
.rbp-jc-route { margin-bottom:16px; }
.rbp-jc-location { display:flex; flex-direction:column; gap:3px; }
.rbp-jc-tag { font-size:10px; font-weight:700; color:var(--rbp-muted); text-transform:uppercase; letter-spacing:.6px; }
.rbp-jc-addr { font-size:15px; font-weight:700; color:var(--rbp-dark); line-height:1.3; word-break:break-word; }
.rbp-jc-divider { height:1px; background:var(--rbp-border); margin:16px 0; }
.rbp-jc-details { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.rbp-jc-row { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; gap:8px; }
.rbp-jc-row span { color:var(--rbp-muted); flex-shrink:0; }
.rbp-jc-row strong { color:var(--rbp-dark); font-weight:600; text-align:right; }
.rbp-btn-edit-journey { width:100%; padding:11px; background:transparent; border:2px solid var(--rbp-border); border-radius:var(--rbp-radius); font-size:14px; font-weight:600; color:var(--rbp-dark); cursor:pointer; transition:all .2s; font-family:inherit; margin-top:0; }
.rbp-btn-edit-journey:hover { border-color:var(--rbp-dark); background:var(--rbp-light); }

/* ── Booking Summary ── */
.rbp-booking-summary { background:var(--rbp-light); border:1px solid var(--rbp-border); border-radius:var(--rbp-radius); padding:18px 22px; margin-bottom:22px; }
.rbp-booking-summary table { width:100%; border-collapse:collapse; font-size:14px; }
.rbp-booking-summary td { padding:6px 0; vertical-align:top; }
.rbp-booking-summary td:first-child { color:var(--rbp-muted); font-weight:600; width:130px; white-space:nowrap; }
.rbp-price-row td { font-size:18px; font-weight:800; color:var(--rbp-primary); padding-top:12px; border-top:2px solid var(--rbp-border); }
.rbp-price-secondary { font-size:13px; color:var(--rbp-muted); font-weight:500; display:block; margin-top:4px; }

.rbp-terms { display:flex; align-items:center; gap:10px; margin:16px 0 4px; font-size:14px; }
.rbp-terms input[type=checkbox] { width:18px; height:18px; accent-color:var(--rbp-primary); cursor:pointer; flex-shrink:0; }
.rbp-message { margin-top:16px; padding:12px 16px; border-radius:8px; font-size:14px; }
.rbp-message.success { background:#d1fae5; color:#065f46; }
.rbp-message.error   { background:#ffedd5; color:#9a3412; }

#rbp-step-success { text-align:center; padding:60px 36px; }
.rbp-success-icon-wrap { margin:0 auto 20px; width:88px; height:88px; animation:rbp-success-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.rbp-checkmark { display:block; width:88px; height:88px; }
.rbp-checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: rbp-check-stroke .55s cubic-bezier(.65,0,.45,1) forwards;
}
.rbp-checkmark__check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: rbp-check-stroke .35s .45s cubic-bezier(.65,0,.45,1) forwards;
}
@keyframes rbp-check-stroke { to { stroke-dashoffset: 0; } }
@keyframes rbp-success-pop {
    0% { transform: scale(.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
#rbp-step-success h2 { font-size:28px; color:var(--rbp-dark); margin-bottom:12px; }
#rbp-step-success p  { color:var(--rbp-muted); font-size:15px; margin-bottom:28px; line-height:1.6; }
.rbp-success-actions {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    max-width:320px; margin:0 auto;
}
.rbp-success-actions .rbp-btn-primary,
.rbp-success-actions .rbp-btn-link { width:100%; margin-top:0; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.rbp-btn-link { box-sizing:border-box; }

@media (max-width:720px) {
    .rbp-step2-layout { grid-template-columns:1fr; }
    .rbp-journey-card { position:static; order:-1; }
    .rbp-vehicle-card { grid-template-columns:70px 1fr; padding-top:36px; }
    .rbp-v-price-wrap { grid-column:1/-1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; white-space:normal; }
    .rbp-v-img-wrap { width:70px; height:50px; }
    .rbp-v-icon-slot .rbp-icon--vehicle { width:40px; height:40px; }
    #rbp-map { height:min(50vh, 320px); }
    .rbp-booking-summary td:first-child { white-space:normal; width:auto; display:block; padding-bottom:0; }
    .rbp-booking-summary td:last-child { display:block; padding-bottom:10px; }
}
@media (max-width:500px) {
    .rbp-wrap { padding:0 2px; }
    .rbp-panel { padding:20px 14px; }
    .rbp-panel h2 { font-size:19px; margin-bottom:18px; }
    .rbp-row { flex-direction:column; }
    .rbp-row-pax .rbp-col { flex:1 1 100%; min-width:100%; }
    .rbp-steps { margin-bottom:20px; padding:12px 0; }
    .rbp-step { min-width:64px; }
    .rbp-step span { font-size:10px; max-width:72px; }
    .rbp-step-circle { width:28px; height:28px; font-size:13px; }
    .rbp-step-line { margin-top:14px; min-width:12px; }
    .rbp-nav-btns { flex-direction:column; }
    .rbp-nav-btns .rbp-btn-outline, .rbp-nav-btns .rbp-btn-primary { flex:1 1 auto; width:100%; }
    .rbp-vehicle-card { grid-template-columns:1fr; padding:14px; }
    .rbp-v-img-wrap { width:100%; height:72px; }
    .rbp-v-badge { position:static; margin-bottom:8px; text-align:left; max-width:100%; }
    .rbp-v-selected-check { top:8px; right:8px; }
    #rbp-step-success { padding:40px 16px; }
    .rbp-sugg-item { padding:12px 14px; min-height:44px; }
    .rbp-remove-stop { width:44px; height:44px; min-width:44px; }
}