/* ── Limo Booking CRM — Public Stylesheet ────────────────────────────────── */

:root {
    --lbp-primary:   #1a1a2e;
    --lbp-accent:    #6366f1;
    --lbp-green:     #16a34a;
    --lbp-red:       #dc2626;
    --lbp-amber:     #d97706;
    --lbp-gray:      #6b7280;
    --lbp-border:    #e5e7eb;
    --lbp-bg:        #f9fafb;
    --lbp-radius:    8px;
    --lbp-shadow:    0 1px 3px rgba(0,0,0,.1);
    --lbp-font:      inherit;
}

.lbp-booking-wizard,
.lbp-quote-form,
.lbp-portal,
.lbp-thankyou,
.lbp-fleet { font-family: var(--lbp-font); box-sizing: border-box; }

*, *::before, *::after { box-sizing: inherit; }

/* ── Step indicator ── */
.lbp-steps { display: flex; gap: 0; margin-bottom: 28px; }
.lbp-step  { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
             font-size: 13px; font-weight: 600; color: var(--lbp-gray);
             border-bottom: 3px solid var(--lbp-border); transition: all .2s; }
.lbp-step span { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
                 justify-content: center; font-size: 12px; background: var(--lbp-border); color: #fff; }
.lbp-step.active { color: var(--lbp-primary); border-color: var(--lbp-accent); }
.lbp-step.active span { background: var(--lbp-accent); }
.lbp-step.done  { color: var(--lbp-green); border-color: var(--lbp-green); }
.lbp-step.done span { background: var(--lbp-green); }
.lbp-step.done span::after { content: '✓'; }

/* ── Panels ── */
.lbp-panel { display: none; }
.lbp-panel.active { display: block; }
.lbp-panel h3 { margin: 0 0 20px; font-size: 20px; color: var(--lbp-primary); }

/* ── Fields ── */
.lbp-field { margin-bottom: 16px; }
.lbp-field label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; color: #374151; }
.lbp-req { color: var(--lbp-red); }
.lbp-field input,
.lbp-field select,
.lbp-field textarea {
    width: 100%; padding: 10px 12px; border: 1px solid var(--lbp-border); border-radius: var(--lbp-radius);
    font-size: 15px; font-family: inherit; transition: border-color .15s, box-shadow .15s;
    background: #fff;
}
.lbp-field input:focus,
.lbp-field select:focus,
.lbp-field textarea:focus {
    border-color: var(--lbp-accent); outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.lbp-field input.lbp-invalid,
.lbp-field select.lbp-invalid { border-color: var(--lbp-red); }
.lbp-error { display: none; color: var(--lbp-red); font-size: 12px; margin-top: 3px; }
.lbp-help  { font-size: 12px; color: var(--lbp-gray); margin: 4px 0 0; }
.lbp-row   { display: flex; gap: 16px; }
.lbp-row .lbp-field { flex: 1; }

/* ── Booking type cards ── */
.lbp-type-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.lbp-type-card { flex: 1 1 120px; display: flex; flex-direction: column; align-items: center;
                 padding: 14px 10px; border: 2px solid var(--lbp-border); border-radius: var(--lbp-radius);
                 cursor: pointer; transition: all .15s; text-align: center; font-size: 14px; font-weight: 600; }
.lbp-type-card input { display: none; }
.lbp-type-icon { font-size: 24px; margin-bottom: 6px; }
.lbp-type-card:hover { border-color: var(--lbp-accent); }
.lbp-type-card.active { border-color: var(--lbp-accent); background: #eef2ff; color: var(--lbp-accent); }

/* ── Stop rows ── */
.lbp-stop-row { display: flex; gap: 8px; margin-bottom: 8px; }
.lbp-stop-row input { flex: 1; }
.lbp-remove-stop { background: none; border: 1px solid var(--lbp-border); border-radius: 4px;
                   padding: 4px 10px; cursor: pointer; color: var(--lbp-gray); }

/* ── Vehicle grid ── */
.lbp-vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; margin-bottom: 20px; }
.lbp-vehicle-card { position: relative; cursor: pointer; }
.lbp-vehicle-card input { position: absolute; opacity: 0; }
.lbp-vc-inner { border: 2px solid var(--lbp-border); border-radius: var(--lbp-radius);
                overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lbp-vehicle-card:hover .lbp-vc-inner { border-color: var(--lbp-accent); }
.lbp-vehicle-card input:checked + .lbp-vc-inner { border-color: var(--lbp-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.2); }
.lbp-vehicle-card img { width: 100%; height: 140px; object-fit: cover; }
.lbp-vc-icon { font-size: 48px; text-align: center; padding: 20px; background: var(--lbp-bg); }
.lbp-vc-info { padding: 12px 14px; }
.lbp-vc-name { font-weight: 700; font-size: 16px; margin-bottom: 2px; }
.lbp-vc-type { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--lbp-gray); margin-bottom: 6px; }
.lbp-vc-cap  { font-size: 13px; color: var(--lbp-gray); }
.lbp-vc-price{ font-weight: 600; color: var(--lbp-accent); margin-top: 4px; }
.lbp-vc-avail{ padding: 0 14px 10px; font-size: 12px; }
.lbp-avail-dot { display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.lbp-avail-yes { background: #dcfce7; color: #166534; }
.lbp-avail-no  { background: #fee2e2; color: #991b1b; }

/* ── Price box ── */
.lbp-price-box { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: var(--lbp-radius);
                 padding: 16px 20px; margin: 16px 0; }
.lbp-price-total { font-size: 28px; font-weight: 800; color: var(--lbp-primary); margin-bottom: 10px; }
.lbp-breakdown { list-style: none; margin: 0; padding: 0; }
.lbp-breakdown li { display: flex; justify-content: space-between; font-size: 13px;
                    padding: 4px 0; border-bottom: 1px solid #e0e7ff; color: #4338ca; }
.lbp-distance { font-size: 12px; color: var(--lbp-gray); margin-top: 8px; }

/* ── Confirm panel ── */
.lbp-confirm-summary { background: var(--lbp-bg); border: 1px solid var(--lbp-border);
                       border-radius: var(--lbp-radius); padding: 16px 20px; margin-bottom: 20px; }
.lbp-confirm-summary table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lbp-confirm-summary th { width: 140px; font-weight: 600; color: var(--lbp-gray); padding: 6px 0; text-align: left; }
.lbp-confirm-summary td { padding: 6px 0; }

/* ── Buttons ── */
.lbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
           padding: 11px 22px; border: none; border-radius: var(--lbp-radius);
           font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; }
.lbp-btn-primary  { background: var(--lbp-primary); color: #fff; width: 100%; margin-top: 12px; }
.lbp-btn-primary:hover  { background: #2d2d50; }
.lbp-btn-secondary{ background: #f3f4f6; color: #374151; }
.lbp-btn-secondary:hover { background: #e5e7eb; }
.lbp-btn-ghost    { background: transparent; border: 1px solid var(--lbp-border); color: #374151; }
.lbp-btn:disabled { opacity: .6; cursor: not-allowed; }
.lbp-wizard-nav   { display: flex; gap: 12px; margin-top: 20px; }
.lbp-wizard-nav .lbp-btn { flex: 1; }

/* ── Notices ── */
.lbp-notice { padding: 10px 14px; border-radius: var(--lbp-radius); font-size: 14px; margin-bottom: 12px; }
.lbp-notice-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.lbp-notice-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.lbp-notice-info    { background: #eff6ff; border: 1px solid #93c5fd; color: #1e40af; }
.lbp-warn { color: #b45309; font-style: italic; }

/* ── Badges (status) ── */
.lbp-badge { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 12px; font-weight: 700; }
.lbp-badge-pending    { background: #fef9c3; color: #854d0e; }
.lbp-badge-quoted     { background: #e0f2fe; color: #075985; }
.lbp-badge-confirmed  { background: #dbeafe; color: #1e40af; }
.lbp-badge-assigned, .lbp-badge-dispatched { background: #ede9fe; color: #5b21b6; }
.lbp-badge-en_route, .lbp-badge-in_progress { background: #ccfbf1; color: #115e59; }
.lbp-badge-completed  { background: #dcfce7; color: #166534; }
.lbp-badge-cancelled  { background: #f3f4f6; color: #374151; }
.lbp-badge-no_show    { background: #fee2e2; color: #991b1b; }
.lbp-pay-unpaid  { background: #fef3c7; color: #92400e; }
.lbp-pay-deposit { background: #dbeafe; color: #1e40af; }
.lbp-pay-paid    { background: #dcfce7; color: #166534; }
.lbp-pay-refunded{ background: #f3f4f6; color: #374151; }

/* ── Fleet ── */
.lbp-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: 20px; }
.lbp-fleet-card { border: 1px solid var(--lbp-border); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--lbp-shadow); }
.lbp-fleet-img  { width: 100%; height: 160px; object-fit: cover; }
.lbp-fleet-placeholder { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 56px; background: var(--lbp-bg); }
.lbp-fleet-body { padding: 16px; }
.lbp-fleet-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lbp-gray); margin-bottom: 4px; }
.lbp-fleet-name { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--lbp-primary); }
.lbp-fleet-specs { list-style: none; margin: 0; padding: 0; font-size: 14px; color: #4b5563; }
.lbp-fleet-specs li { padding: 2px 0; }
.lbp-fleet-features { font-size: 13px; color: var(--lbp-gray); margin: 8px 0 0; }

/* ── Thank-you ── */
.lbp-thankyou { max-width: 560px; margin: 0 auto; padding: 24px; }
.lbp-ty-header { text-align: center; margin-bottom: 24px; }
.lbp-ty-check { width: 64px; height: 64px; background: var(--lbp-green); border-radius: 50%;
                display: inline-flex; align-items: center; justify-content: center;
                font-size: 30px; color: #fff; margin-bottom: 12px; }
.lbp-ty-ref { font-size: 16px; color: var(--lbp-gray); }
.lbp-ty-note { background: #fffbea; border: 1px solid #fde68a; border-radius: var(--lbp-radius); padding: 12px 16px; font-size: 14px; }

/* ── Summary table ── */
.lbp-summary { width: 100%; border-collapse: collapse; margin: 16px 0; }
.lbp-summary th, .lbp-summary td { padding: 9px 12px; border: 1px solid var(--lbp-border); text-align: left; font-size: 14px; }
.lbp-summary th { background: var(--lbp-bg); font-weight: 600; width: 130px; color: #374151; }

/* ── Portal ── */
.lbp-portal { max-width: 560px; margin: 0 auto; }
.lbp-portal h3 { margin-bottom: 16px; }
.lbp-lookup-form .lbp-row { margin-bottom: 12px; }
.lbp-portal-result { margin-top: 20px; padding: 20px; border: 1px solid var(--lbp-border); border-radius: var(--lbp-radius); background: #fff; }
.lbp-portal-order { font-size: 18px; font-weight: 600; margin-bottom: 12px; }

/* ── Quote form ── */
.lbp-quote-form { background: var(--lbp-bg); padding: 24px; border-radius: 10px; }
.lbp-quote-price { font-size: 22px; font-weight: 700; color: var(--lbp-primary); margin: 12px 0 4px; }
.lbp-quote-note  { font-size: 13px; color: var(--lbp-gray); }

/* ── Responsive ── */
@media (max-width: 600px) {
    .lbp-row { flex-direction: column; gap: 0; }
    .lbp-steps { overflow-x: auto; }
    .lbp-step { min-width: 80px; font-size: 11px; }
    .lbp-vehicle-grid { grid-template-columns: 1fr 1fr; }
    .lbp-type-grid { flex-wrap: wrap; }
    .lbp-fleet { grid-template-columns: 1fr; }
}