/* =========================================================
   BusBooking — Aplikasi Booking Bus Online
   Bootstrap 5 + custom styles
   ========================================================= */

:root {
    --brand: #0d6efd;
    --brand-dark: #084298;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background: #f4f6fb;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content { flex: 1 0 auto; }

/* ---------- HERO (Cari Bus) ---------- */
.hero-section {
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(255, 193, 7, .25), transparent 60%),
        radial-gradient(1000px 600px at 110% 20%, rgba(13, 110, 253, .35), transparent 55%),
        linear-gradient(135deg, #0a3d91 0%, #0d6efd 100%);
}

.bg-dark-subtle-stepper { background: rgba(255, 255, 255, .96); }

/* ---------- STEPPER ---------- */
.step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex: 0 0 auto;
}
.step-dot.active { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px rgba(13, 110, 253, .2); }
.step-dot.done { background: #198754; color: #fff; }

/* ---------- PAGINATION KOMPAK (semua halaman, panah kecil) ---------- */
.pagination {
    --bs-pagination-font-size: 0.7rem;
    --bs-pagination-border-radius: 0.45rem;
    --bs-pagination-padding-y: 0.15rem;
    --bs-pagination-padding-x: 0.4rem;
    margin-bottom: 0;
}
.pagination .page-link {
    padding: 0.15rem 0.42rem;
    line-height: 1.25;
    font-size: 0.7rem;
}
.pagination .page-item.active .page-link {
    background: var(--brand);
    border-color: var(--brand);
}
.pagination svg { display: none; } /* sembunyikan panah SVG bawaan Tailwind paginator */
.pagination .page-item:first-child .page-link::before,
.pagination .page-item:last-child .page-link::before {
    content: '»';
    font-size: 0.68rem;   /* panah kecil */
    line-height: 1;
    font-weight: 700;
}
.pagination .page-item:first-child .page-link::before { content: '«'; }
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link { font-weight: 700; }

/* ---------- FITUR HOME ---------- */
.feature-icon {
    width: 64px;
    height: 64px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- HASIL PENCARIAN ---------- */
.schedule-card { transition: transform .15s ease; }
.schedule-card:hover { transform: translateY(-2px); }
.bus-icon {
    width: 58px;
    height: 58px;
    font-size: 26px;
    flex: 0 0 auto;
}

/* =========================================================
   LAYOUT KURSI (sesuai dokumen workflow)
   ========================================================= */
.bus-layout {
    max-width: 520px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 28px;
    padding: 25px;
}

.front-label,
.rear-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #adb5bd;
    letter-spacing: 2px;
}

.driver-section {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.driver-seat {
    width: 90px;
    padding: 10px;
    text-align: center;
    background: #343a40;
    color: white;
    border-radius: 10px;
}

.driver-seat span {
    display: block;
    font-size: 11px;
}

.seat-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.seat-row {
    display: grid;
    grid-template-columns: 55px 55px 50px 55px 55px;
    justify-content: center;
    gap: 8px;
}

.aisle {
    width: 50px;
}

.seat {
    height: 48px;
    border-radius: 10px;
    border: 1px solid #198754;
    background: #198754; /* HIJAU = tersedia */
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: .2s;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

.seat:hover:not(.booked):not(.blocked) {
    transform: translateY(-2px);
    filter: brightness(1.15);
    border-color: #146c43;
}

.seat.selected {
    background: #0d6efd; /* BIRU = dipilih */
    color: white;
    border-color: #0d6efd;
}

.seat.booked {
    background: #dc3545; /* MERAH = sudah dipesan / dikunci */
    color: white;
    border-color: #dc3545;
    cursor: not-allowed;
    opacity: .9;
}

.seat.blocked {
    background: repeating-linear-gradient(45deg, #b02a37, #b02a37 5px, #7a1c26 5px, #7a1c26 10px);
    color: #fff;
    border-color: #7a1c26;
    cursor: not-allowed;
}

.last-row {
    grid-template-columns: repeat(5, 55px);
}

.seat-legend {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #dee2e6;
}

.seat-legend.available { background: #198754; border-color: #198754; }
.seat-legend.selected { background: #0d6efd; border-color: #0d6efd; }
.seat-legend.booked { background: #dc3545; border-color: #dc3545; }
.seat-legend.blocked {
    background: repeating-linear-gradient(45deg, #b02a37, #b02a37 3px, #7a1c26 3px, #7a1c26 6px);
    border-color: #7a1c26;
}

/* Baris 2-1 (3 kolom: 2 kiri, lorong, 1 kanan) */
.seat-row.cols-3 {
    grid-template-columns: 55px 55px 50px 55px;
}

@media (max-width: 576px) {
    .bus-layout { padding: 15px 8px; }
    .seat-row {
        grid-template-columns: 43px 43px 25px 43px 43px;
        gap: 5px;
    }
    .seat { height: 43px; font-size: 11px; }
    .aisle { width: 25px; }
    .last-row { grid-template-columns: repeat(5, 43px); }
    .seat-row.cols-3 { grid-template-columns: 43px 43px 25px 43px; }
}

/* ---------- TIMER HOLD ---------- */
.hold-timer.expired { background: #f8d7da !important; border-color: #f1aeb5 !important; }
.hold-timer .timer-text { font-variant-numeric: tabular-nums; }

/* ---------- METODE PEMBAYARAN ---------- */
.payment-option { cursor: pointer; transition: .15s; background: #fff; }
.payment-option:hover { border-color: var(--brand); background: #f8faff; }
.payment-option:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 110, 253, .15); }
.payment-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
    color: var(--brand);
    flex: 0 0 auto;
}

/* ---------- E-TICKET ---------- */
.success-banner { background: linear-gradient(135deg, #198754, #20c997); }
.success-check { width: 64px; height: 64px; font-size: 34px; }
.ticket { border: 2px solid #e9ecef !important; }
hr.dashed { border-top: 2px dashed #dee2e6; opacity: 1; }
.route-line {
    border-top: 2px dashed #adb5bd;
    position: relative;
}
.route-line i {
    position: relative;
    top: -13px;
    background: #f4f6fb;
    padding: 0 4px;
    font-size: 18px;
}

/* ---------- TOGGLE PASSWORD (register) ---------- */
.toggle-pass { border-left: 0; }

/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */
html, body { overflow-x: clip; } /* cegah geser horizontal, sticky tetap jalan */

/* Menu navbar saat terbuka di layar kecil: bisa di-scroll, tidak melebihi layar */
@media (max-width: 991.98px) {
    .navbar-collapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        padding-bottom: .5rem;
    }
}

@media (max-width: 575.98px) {
    .hero-section .py-5 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
    .hero-section .display-6 { font-size: 1.55rem; }
    .display-6 { font-size: 1.6rem; }

    /* Stepper 7 langkah: rapatkan agar muat di layar kecil */
    .stepper { justify-content: flex-start !important; }
    .stepper .step { padding-right: 8px; }
    .stepper .step .small { font-size: .7rem; line-height: 1.15; }
    .step-dot { width: 26px; height: 26px; font-size: 12px; }

    .feature-icon { width: 54px; height: 54px; font-size: 24px; }
}

@media print {
    nav, footer, .btn, .alert { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}