body { background: var(--light-bg); color: var(--dark-text); padding-top: 80px; }

.search-engine { background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%); padding: 40px 0; margin-bottom: 40px; }
.search-card { background: white; border-radius: 15px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.search-card label { font-size: 0.85rem; font-weight: 600; color: #7f8c8d; text-transform: uppercase; letter-spacing: 0.5px; }
.search-card .form-control, .search-card .form-select { border: none; border-bottom: 2px solid #eee; border-radius: 0; padding-left: 0; font-weight: 600; font-size: 1.1rem; color: #333; box-shadow: none; }
.search-card .form-control:focus, .search-card .form-select:focus { border-bottom-color: var(--primary-color); }
.trip-type-selector { margin-bottom: 20px; font-weight: 600; color: #555; }

.bus-card { background: white; border-radius: 12px; border: 1px solid #e1e8ed; margin-bottom: 20px; transition: 0.3s; overflow: hidden; }
.bus-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--secondary-color); }
.bus-header { border-bottom: 1px dashed #ddd; padding: 20px; }
.time-box { text-align: center; }
.time-box h4 { font-weight: 700; margin: 0; color: var(--dark-text); }
.time-box p { font-size: 0.85rem; color: #7f8c8d; margin: 0; }
.journey-line { display: flex; align-items: center; justify-content: center; color: #bdc3c7; }
.journey-line hr { width: 50px; border-top: 2px solid #bdc3c7; margin: 0 10px; opacity: 1; }
.price-tag { font-size: 1.5rem; font-weight: 700; color: var(--primary-color); }
.amenity-badge { font-size: 0.75rem; font-weight: 600; padding: 5px 10px; border-radius: 20px; }

.seat-map-container { background: #f8f9fa; padding: 30px; border-top: 1px solid #eee; display: none; }
.bus-layout { background: white; border: 2px solid #e0e0e0; border-radius: 40px; padding: 40px 30px; width: 340px; margin: 0 auto; position: relative; box-shadow: inset 0 0 20px rgba(0,0,0,0.02); }

.steering-wheel { text-align: right; margin-bottom: 30px; color: #bdc3c7; font-size: 30px; padding-right: 20px; }

.seat-row { display: flex; justify-content: space-between; margin-bottom: 15px; }
.seat-pair { display: flex; gap: 12px; }

.seat {
    width: 38px; height: 38px; border: 2px solid; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: 0.2s; position: relative; background: white; margin-top: 8px; 
}
.seat::before {
    content: ''; position: absolute; top: -10px; left: 6px; right: 6px; height: 10px;
    border: 2px solid; border-bottom: none; border-radius: 5px 5px 0 0; transition: 0.2s;
}

.seat.available { border-color: #0d6efd; color: #0d6efd; }
.seat.available::before { border-color: #0d6efd; background: white; }
.seat.available:hover { background: rgba(13, 110, 253, 0.1); }
.seat.available:hover::before { background: rgba(13, 110, 253, 0.1); }

.seat.selected { border-color: #ffb142; background: rgba(255, 177, 66, 0.2); color: #ffb142; }
.seat.selected::before { border-color: #ffb142; background: rgba(255, 177, 66, 0.2); }

.seat.booked-male { border-color: #7f8c8d; color: #7f8c8d; cursor: not-allowed; opacity: 0.8;}
.seat.booked-male::before { border-color: #7f8c8d; background: white; }
.seat.booked-male::after { content: '\f007'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 14px; position: absolute; }

.seat.booked-female { border-color: #e84393; color: #e84393; cursor: not-allowed; opacity: 0.8;}
.seat.booked-female::before { border-color: #e84393; background: white; }
.seat.booked-female::after { content: '\f182'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 16px; position: absolute; }

.seat.booked-male, .seat.booked-female { text-indent: -9999px; } 

.seat-legend { display: flex; justify-content: center; gap: 25px; margin-top: 30px; padding-top: 20px; border-top: 1px dashed #ddd; }
.legend-item { text-align: center; font-size: 0.8rem; font-weight: 600; color: #555; }
.legend-seat { width: 30px; height: 30px; margin: 0 auto 8px; font-size: 0px;}

.checkout-bar { background: white; padding: 25px; border-radius: 15px; border: 1px solid #eee; display: flex; flex-direction: column; height: 100%; justify-content: space-between; box-shadow: 0 10px 30px rgba(0,0,0,0.05);}
.guide-section { background: white; padding: 50px 0; border-top: 1px solid #eee; margin-top: 40px;}