/* ── Tabs ──────────────────────────────────── */
.mb-tabs {
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--clr-border, #e2e8f0);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.mb-tab-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all .2s;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.mb-tab-btn.active {
    background: #f97316;
    color: #fff;
    box-shadow: 0 4px 14px rgba(249,115,22,.35);
}
.mb-tab-btn:not(.active):hover { background: #f8fafc; color: #334155; }

/* ── Booking card ──────────────────────────── */
.bk-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: box-shadow .25s, transform .2s;
    position: relative;
    overflow: hidden;
}
.bk-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.1); transform: translateY(-2px); }
.bk-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #f97316;
    border-radius: 4px 0 0 4px;
}
.bk-card.status-approved::before { background: #22c55e; }
.bk-card.status-cancelled::before { background: #ef4444; }
.bk-card.status-completed::before { background: #6366f1; }

.bk-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bk-vehicle-name {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bk-status-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
}
.bk-badge-pending   { background: #fffbeb; color: #d97706; }
.bk-badge-approved  { background: #f0fdf4; color: #16a34a; }
.bk-badge-cancelled { background: #fef2f2; color: #dc2626; }
.bk-badge-completed { background: #eef2ff; color: #4f46e5; }
.bk-badge-paid      { background: #f0fdf4; color: #16a34a; }

.bk-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
}
.bk-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
}
.bk-meta-item i { color: #f97316; font-size: 12px; width: 14px; text-align: center; }
.bk-meta-item .bk-no { font-size: 12px; font-weight: 700; color: #0f172a; font-family: monospace; }

/* Trip row */
.bk-trip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 14px;
}
.bk-trip-point { flex: 1; }
.bk-trip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: #94a3b8; font-weight: 700; }
.bk-trip-time { font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1; margin-top: 2px; }
.bk-trip-date { font-size: 11px; color: #64748b; margin-top: 2px; }
.bk-trip-right { text-align: right; }
.bk-trip-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
    flex-shrink: 0;
}
.bk-trip-line {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, #f97316, #fbbf24);
    border-radius: 2px;
    position: relative;
}
.bk-trip-line::after {
    content: '';
    position: absolute;
    right: -5px; top: -4px;
    border-left: 7px solid #fbbf24;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* Amounts */
.bk-amounts {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bk-amt-item { text-align: right; }
.bk-amt-label { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.bk-amt-value { font-size: 18px; font-weight: 900; color: #f97316; line-height: 1; }
.bk-amt-value.secondary { font-size: 15px; color: #0f172a; }

.bk-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 10px;
}
.bk-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background .2s, border-color .2s;
}
.bk-cancel-btn:hover { background: #fee2e2; border-color: #fca5a5; }

/* Empty state */
.bk-empty {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 72px 20px;
    text-align: center;
}
.bk-empty i { font-size: 52px; color: #cbd5e1; display: block; margin-bottom: 16px; }
.bk-empty h5 { font-size: 17px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.bk-empty p { font-size: 13px; color: #64748b; margin-bottom: 20px; }
.bk-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f97316;
    color: #fff;
    padding: 10px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background .2s;
}
.bk-empty-btn:hover { background: #ea6c0a; color: #fff; }

/* Pagination */
.bk-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0 4px;
}
.bk-page-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #334155;
    font-size: 13px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.bk-page-btn:hover:not(:disabled) { border-color: #f97316; color: #f97316; }
.bk-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.bk-page-info { font-size: 13px; color: #64748b; padding: 0 8px; }

/* Cancel modal */
.bk-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.bk-modal-box {
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 24px 64px rgba(0,0,0,.2);
}
.bk-modal-title {
    font-size: 18px; font-weight: 800; color: #0f172a;
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
}
.bk-modal-close-x {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
    transition: color .15s;
}
.bk-modal-close-x:hover { color: #0f172a; }
.bk-modal-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: #fef2f2; color: #dc2626;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.bk-modal-desc { font-size: 13px; color: #64748b; margin-bottom: 18px; }
.bk-modal-textarea {
    width: 100%; border: 1.5px solid #e2e8f0;
    border-radius: 10px; padding: 12px;
    font-size: 13px; resize: none;
    font-family: 'Outfit', sans-serif;
    outline: none; transition: border-color .2s;
}
.bk-modal-textarea:focus { border-color: #f97316; }
.bk-modal-actions {
    display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end;
}
.bk-modal-keep {
    padding: 10px 20px; border-radius: 9px;
    border: 1.5px solid #e2e8f0; background: #fff;
    cursor: pointer; font-size: 13px; font-weight: 600;
    font-family: 'Outfit', sans-serif;
    transition: border-color .2s;
}
.bk-modal-keep:hover { border-color: #0f172a; }
.bk-modal-confirm {
    padding: 10px 20px; border-radius: 9px;
    border: none; background: #dc2626; color: #fff;
    cursor: pointer; font-size: 13px; font-weight: 700;
    font-family: 'Outfit', sans-serif;
    transition: background .2s;
}
.bk-modal-confirm:hover { background: #b91c1c; }

/* ── Refund Preview in Cancel Modal ─────────────────────────────────── */
.bk-refund-loading {
    text-align: center;
    padding: 16px 0 8px;
    font-size: 13px;
    color: #64748b;
}
.bk-refund-loading i { color: #f97316; margin-right: 6px; }

.bk-refund-box {
    background: #fff8f1;
    border: 1.5px solid #fed7aa;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 4px;
}
.bk-refund-title {
    font-size: 13px;
    font-weight: 700;
    color: #c2410c;
    margin-bottom: 10px;
}
.bk-refund-title i { margin-right: 6px; }

.bk-refund-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 4px 0;
}
.bk-refund-label { color: #475569; }
.bk-refund-value { font-weight: 600; color: #0f172a; }
.bk-refund-value.deduct { color: #dc2626; }
.bk-refund-value.green  { color: #16a34a; }

.bk-refund-deduct .bk-refund-label { color: #dc2626; }

.bk-refund-divider {
    border-top: 1.5px dashed #fed7aa;
    margin: 8px 0;
}
.bk-refund-total {
    font-weight: 700;
    font-size: 14px;
}
.bk-refund-total .bk-refund-label { color: #0f172a; }

.bk-refund-note {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}
.bk-refund-note i { color: #f97316; margin-right: 4px; }

.bk-modal-confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Booking Action Buttons ── */
.bk-action-btn { padding:6px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:5px;transition:all .2s; }
.bk-btn-invoice { background:#fff;color:#f97316;border:1.5px solid #f97316; }
.bk-btn-invoice:hover { background:#fff7ed; }
.bk-btn-extend  { background:#fff;color:#16a34a;border:1.5px solid #86efac; }
.bk-btn-extend:hover  { background:#f0fdf4; }