/* Tour Bookings – Public Styles */
.tb-tours { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.tb-tour {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
    width: 280px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.tb-tour h3 { margin-top: 0; }
.tb-tour-distance { font-size: 0.88em; color: #555; margin: 4px 0 8px; }
.tb-book-now {
    display: inline-block;
    padding: 8px 16px;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.tb-book-now:hover { background: #005177; color: #fff; }

/* ── Tour list – inline route map ──────────────────────────────────────── */
.tb-tour-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #0073aa;
    color: #0073aa;
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background 0.15s, color 0.15s;
}
.tb-tour-map-toggle:hover,
.tb-tour-map-toggle.is-open { background: #0073aa; color: #fff; }
.tb-tour-inline-map-wrap {
    display: none;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #cdd1d8;
}
.tb-tour-inline-map-wrap.is-open { display: block; }
.tb-tour-inline-map {
    height: 220px;
    width: 100%;
}
.tb-tour-inline-map .leaflet-container { height: 100%; }
.tb-tour-inline-waypoints {
    list-style: none;
    margin: 0;
    padding: 6px 10px 8px;
    background: #f8f9fb;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid #e0e3e8;
}
.tb-tour-inline-waypoints li {
    font-size: 0.82em;
    color: #444;
    display: flex;
    gap: 5px;
}
.tb-tour-inline-waypoints li:first-child,
.tb-tour-inline-waypoints li:last-child { font-weight: 700; color: #111; }

/* ── Tour booking form – route preview ─────────────────────────────────── */
.tb-booking-wrap { max-width: 700px; }
.tb-booking-wrap form p { margin: 0 0 14px; }
.tb-booking-wrap label { display: block; font-size: 0.9em; font-weight: 600; color: #333; margin-bottom: 4px; }
.tb-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #ccd0d4;
    border-radius: 6px;
    font-size: 1em;
    box-sizing: border-box;
    transition: border-color 0.15s;
}
.tb-input:focus { border-color: #0073aa; outline: none; box-shadow: 0 0 0 2px rgba(0,115,170,0.15); }
.tb-input-sm { width: 100px; }
.tb-btn-full { width: 100%; }
.tb-required { color: #c00; font-weight: 700; }
.tb-optional  { color: #888; font-weight: 400; font-size: 0.85em; }
.tb-booking-tour-info {
    background: #f0f6ff;
    border: 1px solid #b8d0ee;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.95em;
    color: #1a3a5c;
}
.tb-payment-block {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 8px 0 16px;
}
.tb-payment-block h4 { margin: 0 0 6px; font-size: 1em; }
.tb-payment-block .description { font-size: 0.83em; color: #666; margin: 0 0 10px; }
.tb-tour-route-preview {
    background: #f8f9fb;
    border: 1px solid #dde1e7;
    border-radius: 8px;
    padding: 16px 18px 14px;
    margin-bottom: 24px;
}
.tb-route-heading {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.tb-route-badge {
    background: #3b82f6;
    color: #fff;
    font-size: 0.78em;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.tb-booking-route-map {
    height: 280px;
    border-radius: 6px;
    border: 1px solid #cdd1d8;
    margin-bottom: 12px;
}
.tb-booking-route-map .leaflet-container { height: 100%; border-radius: 6px; }
.tb-waypoint-list {
    margin: 0;
    padding: 0 0 0 4px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tb-waypoint-list li {
    font-size: 0.88em;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}
.tb-waypoint-list li.tb-wp-start { font-weight: 700; color: #111; }
.tb-waypoint-list li.tb-wp-end   { font-weight: 700; color: #111; }

/* ── Shared form styles ─────────────────────────────────────────────────── */
#tb-booking-form label { display: block; margin-bottom: 4px; font-weight: 600; }
#tb-booking-form input, #tb-booking-form select, #tb-booking-form textarea {
    width: 100%; max-width: 420px; margin-bottom: 4px;
    padding: 7px 9px; border: 1px solid #ccc; border-radius: 4px;
    font-size: 0.95em; box-sizing: border-box;
}
.required { color: #c62828; }
.tb-btn-primary,
#tb-booking-form button[type="submit"] {
    padding: 10px 24px; background: #0073aa; color: #fff;
    border: none; border-radius: 4px; cursor: pointer;
    font-size: 1em; font-weight: 600;
}
.tb-btn-primary:hover,
#tb-booking-form button[type="submit"]:hover { background: #005177; }
.tb-btn-secondary {
    padding: 8px 18px; background: #f0f0f0; color: #333;
    border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 0.95em;
}
.tb-btn-secondary:hover { background: #e0e0e0; }
.tb-quote-box {
    display: inline-block; margin: 8px 0 12px; padding: 10px 16px;
    background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 4px;
    font-size: 0.97em; max-width: 480px;
}
.tb-success { color: #2e7d32; font-weight: 600; margin-top: 12px; }
.tb-error   { color: #c62828; font-weight: 600; margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════════════
   Uber-style Ride & Delivery booking UI
   ════════════════════════════════════════════════════════════════════════ */
.tb-uber-wrap {
    max-width: 480px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: #1a1a1a;
}

/* Step heading */
.tb-uber-heading {
    font-size: 1.3em;
    font-weight: 700;
    margin: 0 0 18px;
    letter-spacing: -0.3px;
}

/* Back link */
.tb-uber-back {
    color: #666;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 12px;
    display: inline-block;
}
.tb-uber-back:hover { color: #000; }

/* Input group with icon */
.tb-input-group {
    display: flex;
    align-items: center;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
    background: #fafafa;
    transition: border-color .2s;
}
.tb-input-group:focus-within { border-color: #000; background: #fff; }
.tb-input-icon {
    padding: 0 10px;
    font-size: 1.1em;
    color: #888;
    flex-shrink: 0;
}
.tb-input-group input,
.tb-input-group textarea {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 12px 12px 0;
    font-size: 0.95em;
    outline: none;
    color: #1a1a1a;
    width: 100%;
    box-sizing: border-box;
}
.tb-input-group textarea { padding: 10px 12px 10px 0; resize: vertical; }

/* Plain input group (no icon) */
.tb-input-plain { padding-left: 14px; }
.tb-input-plain input,
.tb-input-plain textarea { padding-left: 0; }

/* Primary button – Uber black */
.tb-uber-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: opacity .2s;
}
.tb-uber-btn:disabled { opacity: .45; cursor: not-allowed; }
.tb-uber-btn-dark     { background: #000; color: #fff; }
.tb-uber-btn-dark:hover:not(:disabled) { background: #222; }
.tb-uber-btn-outline  { background: #fff; color: #000; border: 2px solid #000; }
.tb-uber-btn-outline:hover { background: #f5f5f5; }

/* Service option cards */
.tb-service-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.tb-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    background: #fff;
}
.tb-service-card:hover   { border-color: #aaa; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tb-service-card.tb-selected { border-color: #000; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.tb-svc-icon   { font-size: 1.8em; flex-shrink: 0; }
.tb-svc-info   { flex: 1; }
.tb-svc-info strong { display: block; font-weight: 700; }
.tb-svc-info small  { color: #777; font-size: 0.82em; }
.tb-svc-fare   { font-weight: 700; font-size: 1.05em; white-space: nowrap; }

/* Surge badge */
.tb-surge-badge {
    display: inline-block;
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffc107;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82em;
    font-weight: 700;
    margin-bottom: 10px;
}
.tb-surge-tag {
    background: #fff3cd;
    color: #856404;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.8em;
    font-weight: 700;
}

/* Fare summary */
.tb-fare-summary {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 12px 14px;
    margin: 10px 0 14px;
    line-height: 1.6;
}

/* Confirmed step */
.tb-confirmed-icon {
    font-size: 3em;
    text-align: center;
    margin-bottom: 8px;
}
.tb-confirmed-detail {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
    line-height: 1.7;
}

/* Driver card */
.tb-driver-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: #fff;
}
.tb-driver-avatar { font-size: 2.4em; flex-shrink: 0; }
.tb-driver-card small { color: #555; font-size: 0.85em; }
.tb-stars-small { color: #f59e0b; font-size: 0.9em; }

/* Star rating */
.tb-rating-wrap { text-align: center; padding: 12px 0 4px; }
.tb-stars { font-size: 2em; cursor: pointer; display: flex; justify-content: center; gap: 6px; }
.tb-star       { color: #ddd; transition: color .1s; }
.tb-star:hover,
.tb-star.tb-star-on { color: #f59e0b; }

/* Admin badge colours (used in class-ride-admin.php) */
.tb-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; font-size: 0.8em; font-weight: 600; }
.tb-badge-offline   { background: #eee;   color: #555; }
.tb-badge-available { background: #d4edda; color: #155724; }
.tb-badge-busy      { background: #fff3cd; color: #856404; }
.tb-tours { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.tb-tour {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
    width: 280px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.06);
}
.tb-tour h3 { margin-top: 0; }
.tb-book-now {
    display: inline-block;
    padding: 8px 16px;
    background: #0073aa;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
}
.tb-book-now:hover { background: #005177; color: #fff; }

/* =============================================================================
   ADDRESS AUTOCOMPLETE DROPDOWN
   ============================================================================= */

.tb-ac-wrap {
    position: relative;
    width: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Pickup text input fills the wrap, leaving room for geo button */
.tb-ac-wrap input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* Geolocation button next to pickup field */
.tb-geo-btn {
    flex-shrink: 0;
    background: #f0f4ff;
    border: 1px solid #c5d3f0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: inherit;
}
.tb-geo-btn:hover  { background: #dde8ff; border-color: #a0b8e8; }
.tb-geo-btn:active { background: #c8d8ff; }
.tb-geo-btn:disabled { opacity: 0.5; cursor: wait; }

.tb-ac-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    max-height: 220px;
    overflow-y: auto;
}

.tb-ac-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.tb-ac-item {
    padding: 9px 14px;
    font-size: 0.88em;
    color: #222;
    cursor: pointer;
    line-height: 1.35;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.12s;
}
.tb-ac-item:last-child { border-bottom: none; }
.tb-ac-item:hover      { background: #f5f5f5; }
.tb-ac-item:first-child { font-weight: 500; }

/* Input group: keep icon visible when ac-wrap is inside */
.tb-input-group .tb-ac-wrap input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 1em;
    background: transparent;
    padding: 0;
}

/* =============================================================================
   ROUTE PREVIEW MAP
   ============================================================================= */

.tb-preview-map {
    width: 100%;
    height: 240px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ddd;
    margin-top: 14px;
    background: #e8eaf0;
    display: none;
}

/* Smaller single-address pin-drop map (food delivery) */
.tb-preview-map-sm {
    height: 160px;
    border-radius: 8px;
    margin-top: 8px;
}

/* Make sure Leaflet fills the container */
.tb-preview-map .leaflet-container,
.tb-preview-map-sm .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit;
}

/* Custom emoji pins */
.tb-map-pin {
    font-size: 22px;
    line-height: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35));
    -webkit-user-select: none;
    user-select: none;
}

/* ── Food search filters ────────────────────────────────────────────────── */
#tb-food-cuisine {
    width: 100%;
    max-width: 100%;
    padding: 7px 9px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    box-sizing: border-box;
    background: #fff;
    cursor: pointer;
}
#tb-food-cuisine:focus { outline: 2px solid #0073aa; border-color: #0073aa; }

/* Food provider card — website link */
.tb-food-provider-website {
    margin: 4px 0 2px;
    font-size: 0.82em;
}
.tb-food-provider-website a {
    color: #0073aa;
    text-decoration: none;
    font-weight: 500;
}
.tb-food-provider-website a:hover {
    text-decoration: underline;
}