/* ===== TRANSFER PAGE ===== */
.page-hero-sub { font-size:15px; color:rgba(255,255,255,.5); margin-top:8px; }

.transfer-page { padding:0 0 80px; margin-top:-20px; position:relative; z-index:10; }

/* Search Box */
.tf-search-box {
    background:#fff; border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,.08);
    padding:24px; margin-bottom:32px;
}
.tf-trip-toggle { display:flex; gap:0; margin-bottom:16px; }
.tf-radio {
    padding:8px 20px; font-size:13px; font-weight:600; cursor:pointer;
    border:1px solid #e1e4e8; color:#6c7585; transition:all .15s;
}
.tf-radio:first-child { border-radius:4px 0 0 4px; }
.tf-radio:last-child { border-radius:0 4px 4px 0; border-left:0; }
.tf-radio.active { background:#1a2744; color:#fff; border-color:#1a2744; }
.tf-radio input { display:none; }

.tf-search-row { display:flex; gap:10px; align-items:end; }
.tf-field { flex:1; }
.tf-field-sm { max-width:140px; }
.tf-field-xs { max-width:90px; }
.tf-field-btn { max-width:160px; }
.tf-field label {
    display:block; font-size:11px; font-weight:600; color:#6c7585;
    text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;
}
.tf-field select, .tf-field input {
    width:100%; padding:9px 11px; border:1px solid #e1e4e8; border-radius:4px;
    font-size:14px; font-family:inherit; color:#2c3340;
}
.tf-field select:focus, .tf-field input:focus { outline:none; border-color:#b89848; }

.tf-swap {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid #e1e4e8; border-radius:50%; cursor:pointer;
    font-size:16px; color:#6c7585; flex-shrink:0; margin-bottom:1px;
    transition:all .15s;
}
.tf-swap:hover { border-color:#b89848; color:#b89848; }

/* Results Layout */
.tf-results-layout { display:grid; grid-template-columns:1fr 280px; gap:28px; }

.tf-route-header {
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.tf-route-header h2 { font-size:20px; font-weight:600; font-family:'DM Sans',sans-serif; }
.tf-badge-rt {
    padding:4px 12px; background:#f0f1f3; border-radius:100px;
    font-size:12px; font-weight:600; color:#4a5262;
}

/* Vehicle Card */
.tf-vehicle-card {
    border:1px solid #e1e4e8; border-radius:8px; margin-bottom:16px;
    overflow:hidden; position:relative; transition:border-color .2s;
}
.tf-vehicle-card:hover { border-color:#b89848; }

.tf-popular-badge {
    position:absolute; top:12px; left:12px; z-index:2;
    padding:4px 12px; background:#b89848; color:#fff;
    font-size:11px; font-weight:700; border-radius:4px;
    text-transform:uppercase; letter-spacing:.5px;
}

.tf-vehicle-inner { display:flex; }
.tf-vehicle-img { width:320px; height:180px; flex-shrink:0; background:#0d1117; position:relative; overflow:hidden; }
.tf-vehicle-img > img { width:100%; height:100%; object-fit:cover; }

/* Photo Slider */
.tf-slider { position:relative; width:100%; height:100%; overflow:hidden; }
.tf-slider-track { position:absolute; top:0; left:0; height:100%; display:flex; transition:transform .35s ease; }
.tf-slide { height:100%; flex-shrink:0; }
.tf-slide img { width:100%; height:100%; object-fit:cover; display:block; }
.tf-slider-btn {
    position:absolute; top:50%; transform:translateY(-50%);
    width:30px; height:30px; background:rgba(0,0,0,.5); color:#fff;
    border:none; border-radius:50%; font-size:18px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s; z-index:2;
}
.tf-slider:hover .tf-slider-btn { opacity:1; }
.tf-slider-prev { left:6px; }
.tf-slider-next { right:6px; }
.tf-slider-dots {
    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    display:flex; gap:5px; z-index:2;
}
.tf-dot {
    width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45);
    cursor:pointer; transition:background .2s;
}
.tf-dot.active { background:#fff; }

.tf-vehicle-info { flex:1; padding:20px 24px; display:flex; flex-direction:column; }
.tf-vehicle-top { margin-bottom:8px; }
.tf-vehicle-info h3 { font-size:17px; font-weight:600; margin-bottom:2px; }
.tf-vehicle-type { font-size:12px; color:#b89848; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }

.tf-vehicle-specs {
    display:flex; gap:16px; margin-bottom:8px;
}
.tf-vehicle-specs span {
    display:flex; align-items:center; gap:4px;
    font-size:13px; color:#6c7585;
}
.tf-vehicle-specs svg { stroke:#9ca3af; }

.tf-vehicle-features { font-size:13px; color:#9ca3af; margin-bottom:auto; }

.tf-vehicle-bottom {
    display:flex; justify-content:space-between; align-items:center;
    margin-top:16px; padding-top:14px; border-top:1px solid #f1f3f5;
}

.tf-price-amount { font-size:24px; font-weight:700; color:#1a2744; }
.tf-price-unit { display:block; font-size:11.5px; color:#9ca3af; margin-top:1px; }

.tf-actions { display:flex; gap:8px; }
.btn-book {
    padding:10px 22px; background:#b89848; color:#1a2744;
    border:none; border-radius:4px; font-size:13.5px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-book:hover { background:#caa850; }
.btn-wa {
    display:flex; align-items:center; gap:5px;
    padding:10px 16px; background:#25D366; color:#fff;
    border-radius:4px; font-size:13px; font-weight:600;
    transition:background .15s;
}
.btn-wa:hover { background:#20bd5a; }

/* Sidebar */
.tf-sidebar { position:sticky; top:80px; }

.tf-wa-promo {
    background:linear-gradient(135deg,#1a2744,#243558); border-radius:8px;
    padding:28px 24px; text-align:center; margin-bottom:16px;
}
.tf-wa-icon { margin-bottom:12px; }
.tf-wa-promo h4 { font-size:16px; font-weight:600; color:#fff; margin-bottom:8px; }
.tf-wa-promo p { font-size:13px; color:rgba(255,255,255,.55); margin-bottom:16px; line-height:1.5; }
.tf-wa-btn {
    display:inline-block; padding:10px 24px; background:#25D366; color:#fff;
    border-radius:4px; font-size:13.5px; font-weight:600; transition:background .15s;
}
.tf-wa-btn:hover { background:#20bd5a; }

.tf-sidebar-info {
    background:#fff; border:1px solid #e1e4e8; border-radius:8px; padding:20px;
}
.tf-sidebar-info h4 { font-size:14px; font-weight:600; margin-bottom:12px; }
.tf-sidebar-info ul { margin:0; }
.tf-sidebar-info li { font-size:13px; color:#4a5262; margin-bottom:6px; list-style:none; }

/* No results */
.tf-no-results { text-align:center; padding:48px 20px; }
.tf-no-results p { font-size:15px; color:#6c7585; margin-bottom:20px; }
.btn-wa-big {
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 28px; background:#25D366; color:#fff;
    border-radius:6px; font-size:15px; font-weight:600;
}

/* ===== BOOKING MODAL ===== */
.tf-modal-overlay {
    position:fixed; inset:0; z-index:1000;
    background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
}
.tf-modal {
    background:#fff; border-radius:10px; width:100%; max-width:580px;
    max-height:90vh; overflow-y:auto; padding:32px;
    position:relative;
}
.tf-modal-close {
    position:absolute; top:12px; right:16px;
    background:none; border:none; font-size:28px; color:#9ca3af;
    cursor:pointer; line-height:1;
}
.tf-modal h2 { font-size:20px; font-weight:600; margin-bottom:4px; }
.tf-modal-route {
    font-size:14px; color:#6c7585; margin-bottom:24px;
    padding-bottom:16px; border-bottom:1px solid #f1f3f5;
}
.tf-modal-route span { display:block; margin-top:4px; color:#b89848; font-weight:600; }

.tf-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px; }
.tf-form-full { grid-column:1/-1; }
.tf-form-field label {
    display:block; font-size:12px; font-weight:600; color:#6c7585;
    margin-bottom:4px;
}
.tf-form-field input, .tf-form-field textarea {
    width:100%; padding:9px 11px; border:1px solid #e1e4e8; border-radius:4px;
    font-size:14px; font-family:inherit;
}
.tf-form-field textarea { resize:vertical; }
.tf-form-field input:focus, .tf-form-field textarea:focus { outline:none; border-color:#b89848; }

/* Child seats */
.tf-child-seats {
    background:#f8f9fb; border-radius:6px; padding:16px 20px; margin-bottom:20px;
}
.tf-child-seats h4 { font-size:14px; font-weight:600; margin-bottom:4px; }
.tf-seat-note { font-size:12px; color:#9ca3af; margin-bottom:12px; }
.tf-seats-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.tf-seat-item label { display:block; font-size:12px; font-weight:500; color:#4a5262; margin-bottom:4px; }
.tf-seat-item select {
    width:100%; padding:7px 8px; border:1px solid #e1e4e8; border-radius:4px;
    font-size:13px; font-family:inherit;
}
.tf-seat-extra {
    margin-top:10px; padding:8px 12px; background:#fef3c7; border-radius:4px;
    font-size:13px; font-weight:600; color:#92400e;
}

/* Total */
.tf-modal-total {
    padding:16px 0; border-top:1px solid #e1e4e8; margin-bottom:20px;
}
.tf-total-row {
    display:flex; justify-content:space-between; align-items:center;
}
.tf-total-row span:first-child { font-size:15px; font-weight:500; }
.tf-total-price { font-size:26px; font-weight:700; color:#1a2744; }

/* Modal actions */
.tf-modal-actions { display:flex; gap:10px; }
.btn-book-confirm {
    flex:1; padding:12px; background:#b89848; color:#1a2744;
    border:none; border-radius:4px; font-size:14px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-book-confirm:hover { background:#caa850; }
.btn-wa-book {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:12px 20px; background:#25D366; color:#fff;
    border:none; border-radius:4px; font-size:14px; font-weight:600;
    cursor:pointer; font-family:inherit; transition:background .15s;
}
.btn-wa-book:hover { background:#20bd5a; }

/* ===== RESPONSIVE ===== */
@media (max-width:900px) {
    .tf-results-layout { grid-template-columns:1fr; }
    .tf-sidebar { position:static; }
}
@media (max-width:768px) {
    .tf-search-row { flex-direction:column; }
    .tf-field-sm, .tf-field-xs, .tf-field-btn { max-width:none; }
    .tf-swap { align-self:center; transform:rotate(90deg); }
    .tf-vehicle-inner { flex-direction:column; }
    .tf-vehicle-img { width:100%; height:220px; }
    .tf-vehicle-bottom { flex-direction:column; gap:12px; align-items:stretch; }
    .tf-actions { justify-content:stretch; }
    .btn-book, .btn-wa { flex:1; justify-content:center; }
    .tf-form-grid { grid-template-columns:1fr; }
    .tf-seats-grid { grid-template-columns:1fr; }
    .tf-modal-actions { flex-direction:column; }
    .tf-modal { padding:24px 20px; }
}