:root {
            --sea-blue: #0077B6;
            --sea-blue-dark: #005f8a;
            --sea-blue-light: #e8f4fa;
            --sea-blue-pale: #f0f8fd;
            --grey-occupied: #c5c5c5;
            --grey-text: #6c757d;
        }
     
        /* Hero */
        .hero-section {
            background: linear-gradient(135deg, var(--sea-blue) 0%, #023e8a 100%);
            padding: 2.5rem 0 2rem;
            color: #fff;
        }
        .hero-section .breadcrumb-item a { color: rgba(255,255,255,.7); text-decoration: none; }
        .hero-section .breadcrumb-item.active { color: #fff; }
        .hero-section .breadcrumb-divider { color: rgba(255,255,255,.5); }
        /* Cards */
        .section-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e9ecef;
            padding: 1.75rem;
            margin-bottom: 1.25rem;
            box-shadow: 0 2px 12px rgba(0,0,0,.04);
        }
        .section-card h5 {
            font-weight: 700;
            color: var(--sea-blue);
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        .section-card h5 i { font-size: 1.1rem; }
        /* Form */
        .form-label { font-weight: 600; font-size: .875rem; color: #333; }
        .input-group-text {
            background: var(--sea-blue-pale);
            border-color: #dee2e6;
            color: var(--sea-blue);
        }
        .form-control:focus, .form-select:focus {
            border-color: var(--sea-blue);
            box-shadow: 0 0 0 .2rem rgba(0,119,182,.15);
        }
        /* Seat Map */
        .seat-map-wrapper { max-width: 320px; margin: 0 auto; }
        .seat-map-header {
            background: var(--sea-blue);
            color: #fff;
            border-radius: 40px 40px 8px 8px;
            text-align: center;
            padding: .5rem;
            font-weight: 600;
            font-size: .85rem;
            margin-bottom: 1rem;
        }
        .seat-row {
            display: flex;
            justify-content: center;
            gap: .5rem;
            margin-bottom: .5rem;
        }
        .seat-row .aisle { width: 2rem; }
        .seat {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            border: 2px solid #dee2e6;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: .8rem;
            color: #555;
            cursor: pointer;
            transition: all .2s;
            position: relative;
        }
        .seat:hover:not(.occupied) {
            border-color: var(--sea-blue);
            background: var(--sea-blue-light);
        }
        .seat.selected {
            background: var(--sea-blue);
            border-color: var(--sea-blue);
            color: #fff;
            box-shadow: 0 4px 12px rgba(0,119,182,.3);
        }
        .seat.occupied {
            background: var(--grey-occupied);
            border-color: var(--grey-occupied);
            color: #fff;
            cursor: not-allowed;
        }
        .seat-legend {
            display: flex;
            justify-content: center;
            gap: 1.25rem;
            margin-top: 1rem;
            font-size: .78rem;
            color: var(--grey-text);
        }
        .seat-legend span {
            display: flex;
            align-items: center;
            gap: .35rem;
        }
        .seat-legend .dot {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            display: inline-block;
        }
        .dot-available { border: 2px solid #dee2e6; background: #fff; }
        .dot-selected { background: var(--sea-blue); }
        .dot-occupied { background: var(--grey-occupied); }
        /* Payment Method */
        .payment-option {
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 1rem 1.25rem;
            cursor: pointer;
            transition: all .2s;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .payment-option:hover { border-color: var(--sea-blue); }
        .payment-option.active {
            border-color: var(--sea-blue);
            background: var(--sea-blue-pale);
        }
        .payment-option .form-check-input:checked {
            background-color: var(--sea-blue);
            border-color: var(--sea-blue);
        }
        .payment-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }
        .payment-icon.cash { background: #e8f5e9; color: #2e7d32; }
        .payment-icon.digital { background: #e3f2fd; color: #1565c0; }
        /* Summary Card */
        .summary-card {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e9ecef;
            padding: 1.75rem;
            box-shadow: 0 4px 20px rgba(0,0,0,.06);
        }
        .summary-card h5 {
            font-weight: 700;
            color: var(--sea-blue);
            margin-bottom: 1.25rem;
        }
        .summary-route {
            background: var(--sea-blue-pale);
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.25rem;
        }
        .summary-route .route-label { font-size: .75rem; color: var(--grey-text); font-weight: 500; }
        .summary-route .route-value { font-weight: 700; color: #222; font-size: .95rem; }
        .summary-route .route-arrow {
            color: var(--sea-blue);
            font-size: 1.2rem;
            margin: 0 .5rem;
        }
        .price-row {
            display: flex;
            justify-content: space-between;
            padding: .5rem 0;
            font-size: .9rem;
            color: #555;
        }
        .price-row.total {
            border-top: 2px solid var(--sea-blue-light);
            margin-top: .5rem;
            padding-top: .75rem;
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--sea-blue);
        }
        .btn-confirm {
            background: var(--sea-blue);
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: .85rem;
            font-weight: 700;
            font-size: 1rem;
            width: 100%;
            transition: all .2s;
        }
        .btn-confirm:hover {
            background: var(--sea-blue-dark);
            color: #fff;
            box-shadow: 0 6px 20px rgba(0,119,182,.3);
            transform: translateY(-1px);
        }
        .secure-badge {
            text-align: center;
            margin-top: .75rem;
            font-size: .78rem;
            color: var(--grey-text);
        }
        .secure-badge i { color: #2e7d32; }
        @media (min-width: 992px) {
            .summary-sticky { position: sticky; top: 1.5rem; }
        }
        @media (max-width: 991.98px) {
            .hero-section { padding: 1.5rem 0 1.25rem; }
            .section-card { padding: 1.25rem; }
            .seat { width: 46px; height: 46px; font-size: .75rem; }
        }