/* ==========================================================================
   TOP-TRIP — Bright theme for the public website (2026 redesign)
   Loaded on every customer page AFTER tt-core / tt-public / tt-booking.
   Warm ivory background, white cards, gold accents, dark footer.
   (Admin pages do not load this file.)
   ========================================================================== */
:root {
    --tt-bg: #fbf8f2;
    --tt-bg-2: #f4efe4;
    --tt-surface: #ffffff;
    --tt-surface-2: #ffffff;
    --tt-surface-3: #f6f2ea;
    --tt-input: #ffffff;

    --tt-gold: #c8921a;
    --tt-gold-light: #a97710;          /* gold used as TEXT on light backgrounds */
    --tt-gold-dark: #8a600b;
    --tt-gold-gradient: linear-gradient(135deg, #f7d47a 0%, #e0a93a 45%, #b98010 100%);
    --tt-gold-soft: #fbf1d9;
    --tt-gold-line: rgba(200, 146, 26, .38);

    --tt-text: #141821;
    --tt-text-2: #3d4452;
    --tt-muted: #6b7280;
    --tt-line: rgba(20, 24, 33, .09);
    --tt-line-2: rgba(20, 24, 33, .16);

    --tt-green: #16a36a; --tt-green-soft: #e3f6ec;
    --tt-orange: #d97f0b; --tt-orange-soft: #fdf0db;
    --tt-red: #dc4a4a;   --tt-red-soft: #fde8e8;
    --tt-blue: #2c5aa0;  --tt-blue-soft: #e6eefa;

    --tt-night: #0f1420;
    --tt-font-head: "Poppins", "Segoe UI", Arial, sans-serif;
    --tt-shadow: 0 24px 60px -24px rgba(20, 24, 33, .28);
    --tt-shadow-sm: 0 8px 22px -10px rgba(20, 24, 33, .20);
    --tt-radius: 14px;
    --tt-radius-lg: 20px;
    --tt-radius-xl: 28px;
}
body { background: var(--tt-bg); color: var(--tt-text); }
::selection { background: var(--tt-gold); color: #fff; }
:focus-visible { outline-color: var(--tt-gold); }
h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ---------- Buttons (rounded pills) ---------- */
.tt-btn { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 15px; }
.tt-btn-primary { color: #1a1405; box-shadow: 0 12px 26px -10px rgba(200, 146, 26, .8); }
.tt-btn-outline { color: var(--tt-text); background: #fff; border-color: var(--tt-line-2); backdrop-filter: none; }
.tt-btn-outline:hover:not(:disabled) { color: var(--tt-text); border-color: var(--tt-gold); }
.tt-btn-ghost { background: #fff; border-color: var(--tt-line-2); }
.tt-btn-dark { color: #fff; background: var(--tt-night); }
.tt-btn-dark:hover:not(:disabled) { box-shadow: 0 12px 26px -12px rgba(15, 20, 32, .7); }

/* ---------- Forms ---------- */
.tt-input, .tt-field input, .tt-field select, .tt-field textarea { color-scheme: light; background: #fff; }
.tt-input:focus, .tt-field input:focus, .tt-field select:focus, .tt-field textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(200, 146, 26, .14); }
.tt-input::placeholder, .tt-field input::placeholder, .tt-field textarea::placeholder { color: #9aa0aa; }
.tt-message.error { color: #9b2020; border-color: #f5c2c2; }
.tt-message.success { color: #0c6b45; border-color: #bfe8d3; }

/* ---------- Cards ---------- */
.tt-card { background: #fff; box-shadow: var(--tt-shadow-sm); }
.tt-icon-box { color: #1a1405; background: var(--tt-gold-gradient); border: 0; border-radius: 16px; }

/* ---------- Header ---------- */
.tt-header { background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--tt-line); }
.tt-header::after { display: none; }
.tt-header.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px -18px rgba(20, 24, 33, .35); }
.tt-brand img { filter: none; }
.tt-nav a { color: var(--tt-text-2); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; }
.tt-nav a i { display: none; }
.tt-nav a + a::before { display: none; }
.tt-nav a:hover, .tt-nav a[aria-current="page"] { color: var(--tt-text); }
.tt-nav a[aria-current="page"] { font-weight: 600; }
.tt-lang { background: #fff; border-color: var(--tt-line-2); }
.tt-lang button { color: var(--tt-muted); }
.tt-lang button.active { color: #fff; background: var(--tt-night); }
.tt-menu-btn { color: var(--tt-text); border-color: var(--tt-line-2); background: #fff; }
@media (max-width: 1080px) {
    .tt-nav { background: #fff; border-bottom: 1px solid var(--tt-line); box-shadow: 0 24px 40px -20px rgba(20, 24, 33, .3); }
    .tt-nav .tt-nav-cta { color: #1a1405; }
}

/* ---------- Page hero (about, contact, legal) ---------- */
.tt-page-hero {
    background:
        radial-gradient(900px 420px at 12% 0%, #fff3d2 0%, transparent 60%),
        linear-gradient(180deg, #fbf8f2, #f6f0e3);
    border-bottom: 1px solid var(--tt-line);
}
.tt-center-page { background: radial-gradient(900px 420px at 50% 0%, #fff3d2 0%, transparent 60%), var(--tt-bg); }
.tt-spinner { border-color: rgba(20, 24, 33, .1); border-top-color: var(--tt-gold); }

/* ---------- Footer (stays dark = strong contrast) ---------- */
.tt-footer { background: var(--tt-night); border-top: 0; }
.tt-footer p, .tt-footer-bottom, .tt-footer-bottom a { color: #9aa3b2; }
.tt-footer li, .tt-footer a { color: #cfd5df; }
.tt-footer h4 { color: #e8b64a; }
.tt-footer li i { color: #e8b64a; }
.tt-footer a:hover { color: #f7d47a; }
.tt-footer-bottom { border-top-color: rgba(255, 255, 255, .08); }
.tt-footer .tt-footer-logo { filter: none; }

/* ---------- Pages from tt-public.css ---------- */
.step-no { color: rgba(200, 146, 26, .28); }
.home-why { background: var(--tt-bg-2); }
.auth-card { background: #fff; box-shadow: var(--tt-shadow); }
.detail-list > div { background: #fff; }
.status-icon { color: #1a1405; }
.login-message.error, .reset-message.error { color: #9b2020; }
.login-message.success, .reset-message.success { color: #0c6b45; }
.receipt-paper { box-shadow: var(--tt-shadow); }
.legal .todo { color: #1a1405; background: #f7d47a; }

/* ---------- Booking page ---------- */
.bk-panel { background: rgba(255, 255, 255, .97); border-color: var(--tt-line); box-shadow: var(--tt-shadow); }
.route-input-wrapper input { color-scheme: light; background: #fff; }
.route-input-wrapper input:focus { box-shadow: 0 0 0 4px rgba(200, 146, 26, .14); }
.route-clear-button:hover { background: rgba(20, 24, 33, .05); }
.route-suggestions { background: #fff !important; border-color: var(--tt-line-2) !important; box-shadow: var(--tt-shadow) !important; }
.route-map-section { background: #e9eef3; }
.route-full-map { background: #e9eef3; }
.route-map-tip { color: var(--tt-text); background: rgba(255, 255, 255, .94); box-shadow: var(--tt-shadow-sm); }
.leaflet-control-zoom a { color: var(--tt-text) !important; background: #fff !important; border-color: var(--tt-line-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { color: var(--tt-text); background: #fff; }
.bk-summary { background: rgba(255, 255, 255, .97); border-color: var(--tt-line); box-shadow: var(--tt-shadow); }
.service-area-alert { color: var(--tt-text); background: #fff; border-color: #f2b8b8; box-shadow: var(--tt-shadow); }
.service-area-alert-ok { background: var(--tt-red); }
.booking-modal-backdrop, .payment-modal-backdrop { background: rgba(20, 24, 33, .45); }
.booking-modal-content, .booking-modal-dialog, .payment-modal-content { background: #fff; border-color: var(--tt-line); box-shadow: var(--tt-shadow); }
.booking-modal-header { background: radial-gradient(700px 240px at 100% 0%, #fff3d2, transparent 60%), #fbf8f2; border-bottom: 1px solid var(--tt-line); }
.booking-modal-close, .payment-modal-close { color: var(--tt-text); background: #fff; border-color: var(--tt-line-2); }
.booking-spinner { border-color: rgba(20, 24, 33, .1); border-top-color: var(--tt-gold); }
.booking-vehicle-card { background: #fff; }
.booking-vehicle-image-frame { background: radial-gradient(circle at 50% 40%, #fdfaf3, #efe8da); }
.booking-vehicle-price-button { color: #1a1405; box-shadow: 0 8px 20px -8px rgba(200, 146, 26, .7); }
.booking-vehicle-card.selected .booking-vehicle-price-button { color: #fff; background: var(--tt-night); }
.booking-form-group input { color-scheme: light; background: #fff; }
.booking-error-message { color: #9b2020; border-color: #f5c2c2; }
.booking-success-message { color: #0c6b45; border-color: #bfe8d3; }
.booking-payment-button { color: #1a1405; }
.booking-page-overlay { background: rgba(20, 24, 33, .45); }
.booking-page-overlay-card { background: #fff; }
.card-payment-panel { box-shadow: var(--tt-shadow-sm); border: 1px solid var(--tt-line); }
.payment-summary > div, .booking-trip-summary, .booking-vehicle-section, .booking-customer-section { background-color: #fff; }

/* Mobile: the map comes FIRST, so customers see it while entering the addresses */
@media (max-width: 860px) {
    .bk-main { display: flex; flex-direction: column; }
    .route-map-section { order: -1; height: 42svh; min-height: 300px; }
    .bk-panel { border-radius: 22px 22px 0 0; margin-top: -22px; position: relative; z-index: 1300; box-shadow: 0 -12px 30px -18px rgba(20, 24, 33, .35); }
}