/* ==========================================
   JUNCAR — Стиль под ИП
   Палитра: кедр #1A3028 · янтарь #C8792A · крем #F5F0E8 · тайга #2E5444
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&family=Inter:wght@300;400;500;600&display=swap');

/* ---- СВЕТЛАЯ ТЕМА (по умолчанию) ---- */
:root {
    --cedar:  #1A3028;
    --taiga:  #2E5444;
    --amber:  #C8792A;
    --amber2: #E8952F;
    --cream:  #F5F0E8;
    --bark:   #140F0A;
    --fog:    #8B9E95;
    --white:  #FFFFFF;

    /* Тематические токены */
    --bg:           #F5F0E8;
    --bg-card:      #FFFFFF;
    --bg-subtle:    #EAE4DB;
    --bg-section:   #FFFFFF;
    --text:         #1A3028;
    --text-muted:   #8B9E95;
    --text-light:   rgba(26,48,40,.55);
    --border:       #DDD8CF;
    --border-soft:  #EAE4DB;
    --hero-after:   #F5F0E8;
    --nav-bg:       #140F0A;
    --footer-bg:    #140F0A;
    --hero-bg:      #1A3028;
    --features-bg:  #1A3028;
    --ip-bg:        #140F0A;

    color-scheme: light;
}

/* ---- ТЁМНАЯ ТЕМА ---- */
[data-theme="dark"] {
    --bg:           #0D1A13;
    --bg-card:      #162210;
    --bg-subtle:    #1C2E1E;
    --bg-section:   #112018;
    --text:         rgba(245,240,232,.88);
    --text-muted:   #6B8878;
    --text-light:   rgba(245,240,232,.4);
    --border:       #2A4035;
    --border-soft:  #1E3228;
    --hero-after:   #0D1A13;
    --nav-bg:       #080E08;
    --footer-bg:    #080E08;
    --hero-bg:      #0D1A13;
    --features-bg:  #080E08;
    --ip-bg:        #080E08;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    transition: background .3s, color .3s;
}

h1, h2, h3, h4, .brand-font {
    font-family: 'Unbounded', sans-serif;
}

/* ========== NAVBAR ========== */
.juncar-navbar {
    background: var(--nav-bg);
    padding: 0;
    box-shadow: none;
    border-bottom: 2px solid var(--amber);
}
.juncar-navbar .container {
    padding-top: 10px;
    padding-bottom: 10px;
}
.navbar-brand {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.35rem !important;
    letter-spacing: -0.5px;
    line-height: 1;
}
.navbar-brand .brand-jun { color: var(--amber); }
.navbar-brand .brand-car { color: var(--white); }
.navbar-brand .brand-dot { color: var(--amber); font-size: 0.55rem; vertical-align: middle; }
.juncar-navbar .nav-link {
    color: rgba(255,255,255,.75) !important;
    font-weight: 500;
    font-size: .88rem;
    padding: 6px 12px !important;
    border-radius: 6px;
    transition: all .2s;
    letter-spacing: .3px;
}
.juncar-navbar .nav-link:hover {
    color: var(--amber) !important;
    background: rgba(200,121,42,.08);
}
.juncar-navbar .nav-link.active { color: var(--amber) !important; }
.navbar-toggler { border-color: var(--amber); }
.navbar-toggler-icon { filter: brightness(0) saturate(100%) invert(63%) sepia(78%) saturate(410%) hue-rotate(349deg) brightness(96%) contrast(89%); }

/* Кнопка регистрации в навбаре */
.btn-nav-register {
    background: var(--amber);
    color: var(--bark) !important;
    font-weight: 700;
    font-size: .82rem;
    padding: 7px 16px !important;
    border-radius: 7px;
    letter-spacing: .3px;
    transition: background .2s;
}
.btn-nav-register:hover { background: var(--amber2) !important; color: var(--bark) !important; }

/* ========== HERO ========== */
.hero-section {
    background: var(--hero-bg);
    position: relative;
    overflow: hidden;
    padding: 72px 0 100px;
    min-height: 580px;
    display: flex;
    align-items: center;
}

/* Декоративный диагональный срез снизу */
.hero-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--hero-after);
    clip-path: polygon(0 60%, 100% 0%, 100% 100%, 0 100%);
}

/* Тайговый паттерн-фон */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(200,121,42,.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(46,84,68,.6) 0%, transparent 50%);
    pointer-events: none;
}

.hero-tagline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(200,121,42,.15);
    border: 1px solid rgba(200,121,42,.4);
    color: var(--amber2);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.hero-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 900;
    line-height: 1.15;
    color: var(--white);
    margin-bottom: 16px;
}
.hero-title .accent { color: var(--amber); }

.hero-desc {
    color: rgba(255,255,255,.65);
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 28px;
}

.btn-hero-primary {
    background: var(--amber);
    color: var(--bark);
    font-weight: 700;
    font-size: .95rem;
    padding: 14px 30px;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s, transform .15s;
    font-family: 'Unbounded', sans-serif;
    font-size: .82rem;
    letter-spacing: .3px;
}
.btn-hero-primary:hover { background: var(--amber2); color: var(--bark); transform: translateY(-1px); }

.btn-hero-outline {
    background: transparent;
    color: rgba(255,255,255,.8);
    font-weight: 500;
    font-size: .88rem;
    padding: 13px 24px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,.25);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .2s, color .2s;
}
.btn-hero-outline:hover { border-color: var(--amber); color: var(--amber); }

/* ========== ПОИСК КАРТОЧКА ========== */
.search-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 32px 28px;
    box-shadow: 0 20px 60px rgba(26,48,40,.25);
    border: 1px solid var(--border-soft);
    position: relative;
    z-index: 2;
}
.search-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Unbounded', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.search-card-label i { color: var(--amber); font-size: 1.1rem; }
.search-card .form-label { font-size: .8rem; font-weight: 600; color: var(--fog); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 5px; }
.search-card .form-control,
.search-card .form-select {
    border: 1.5px solid var(--border);
    border-radius: 9px;
    padding: 10px 14px;
    font-size: .9rem;
    background: var(--bg-subtle);
    color: var(--text);
    transition: border-color .2s, background .2s;
}
.search-card .form-control:focus,
.search-card .form-select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(200,121,42,.12);
    background: var(--bg-card);
}
.swap-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    color: #C8BFB2;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.swap-divider::before, .swap-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.swap-icon-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--bg-subtle);
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--amber);
    font-size: .85rem;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.swap-icon-btn:hover { background: var(--amber); color: var(--white); border-color: var(--amber); }
.btn-search-big {
    background: var(--cedar);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-family: 'Unbounded', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    width: 100%;
    transition: background .2s;
}
.btn-search-big:hover { background: var(--taiga); color: var(--white); }

/* ========== POPULAR ROUTES ========== */
.section-label {
    font-family: 'Unbounded', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 8px;
}
.section-title {
    font-family: 'Unbounded', sans-serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.section-sub { color: var(--text-muted); font-size: .9rem; }

.route-preview-card {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1.5px solid var(--border-soft);
    transition: box-shadow .2s, transform .2s, border-color .2s;
    overflow: hidden;
}
.route-preview-card:hover {
    box-shadow: 0 8px 28px rgba(26,48,40,.12);
    transform: translateY(-3px);
    border-color: var(--amber);
}
.route-preview-card .card-top {
    background: var(--cedar);
    padding: 14px 16px 10px;
}
.route-preview-card .city-name { color: var(--white); font-weight: 700; font-size: .95rem; }
.route-preview-card .city-arrow { color: var(--amber); font-size: .75rem; margin: 4px 0; }
.route-preview-card .card-bottom { padding: 12px 16px; }
.price-badge {
    background: var(--amber);
    color: var(--white);
    font-weight: 800;
    font-family: 'Unbounded', sans-serif;
    font-size: .78rem;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.route-meta { color: var(--fog); font-size: .78rem; }

/* ========== КАК КУПИТЬ ========== */
.how-section { background: var(--bg-section); }
.step-item { position: relative; }
.step-number {
    width: 52px; height: 52px;
    background: var(--cedar);
    color: var(--amber);
    font-family: 'Unbounded', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 4px 20px rgba(26,48,40,.18);
}
.step-title { font-weight: 700; font-size: .92rem; color: var(--text); margin-bottom: 6px; }
.step-desc { color: var(--text-muted); font-size: .82rem; line-height: 1.6; }
.step-connector {
    position: absolute;
    top: 26px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--amber) 0, var(--amber) 6px, transparent 6px, transparent 12px);
}

/* ========== FEATURES ========== */
.features-section { background: var(--features-bg); }
.feature-item {
    flex: 1 1 200px;
    max-width: 260px;
    text-align: center;
    padding: 28px 20px;
    background: rgba(255,255,255,.05);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s, border-color .2s, transform .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature-item:hover {
    background: rgba(200,121,42,.1);
    border-color: rgba(200,121,42,.3);
    transform: translateY(-4px);
}
.features-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.feature-icon { font-size: 2rem; color: var(--amber); margin-bottom: 14px; display: block; }
.feature-title { font-weight: 700; font-size: .9rem; color: var(--white); margin-bottom: 6px; }
.feature-desc { font-size: .8rem; color: rgba(255,255,255,.5); line-height: 1.6; }

/* ========== ИП БЛОК ========== */
.ip-section {
    background: var(--ip-bg);
    padding: 48px 0;
}
.ip-card {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ip-badge {
    background: rgba(200,121,42,.15);
    border: 1.5px solid rgba(200,121,42,.35);
    border-radius: 12px;
    padding: 16px 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}
.ip-badge i { color: var(--amber); font-size: 1.5rem; }
.ip-badge-label { font-size: .72rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .8px; }
.ip-badge-value { font-weight: 700; color: var(--white); font-size: .9rem; }
.ip-text { color: rgba(255,255,255,.55); font-size: .85rem; line-height: 1.7; }

/* ========== FOOTER ========== */
.juncar-footer {
    background: var(--footer-bg);
    border-top: 3px solid var(--amber);
    color: var(--white);
    padding: 48px 0 24px;
}
.footer-brand {
    font-family: 'Unbounded', sans-serif;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: var(--white);
    margin-bottom: 10px;
}
.footer-brand span { color: var(--amber); }
.footer-tagline { font-size: .78rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.footer-heading { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--amber); margin-bottom: 14px; }
.footer-link {
    color: rgba(255,255,255,.55) !important;
    font-size: .88rem;
    text-decoration: none !important;
    display: block;
    margin-bottom: 8px;
    transition: color .2s;
}
.footer-link:hover { color: var(--amber) !important; }
.footer-contact { color: rgba(255,255,255,.55); font-size: .88rem; }
.footer-contact i { color: var(--amber); margin-right: 6px; }
.footer-divider { border-color: rgba(255,255,255,.08); margin: 24px 0 16px; }
.footer-copy { font-size: .78rem; color: rgba(255,255,255,.3); }

/* ========== КНОПКИ ОБЩИЕ ========== */
.btn-warning { background: var(--amber); border-color: var(--amber); color: var(--bark); font-weight: 700; }
.btn-warning:hover { background: var(--amber2); border-color: var(--amber2); color: var(--bark); }
.btn-outline-light:hover { background: var(--amber); border-color: var(--amber); color: var(--bark); }

/* ========== ПОИСК МАРШРУТОВ (search-bar-card) ========== */
.search-bar-card {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1.5px solid var(--border-soft);
    border-left: 4px solid var(--amber);
}

/* ========== AUTH CARD ========== */
.auth-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 40px 36px;
    border-top: 4px solid var(--amber);
    box-shadow: 0 8px 30px rgba(26,48,40,.08);
}

/* ========== TRIP CARD ========== */
.trip-card {
    background: var(--bg-card);
    border-radius: 14px;
    border: 1.5px solid var(--border-soft);
    transition: box-shadow .2s, border-color .2s;
}
.trip-card:hover { box-shadow: 0 6px 24px rgba(26,48,40,.1); border-color: var(--amber); }
.trip-line { border-top: 2px dashed var(--border); margin: 4px 0; position: relative; }
.price-big { font-size: 1.5rem; font-weight: 800; color: var(--amber); font-family: 'Unbounded', sans-serif; }

/* ========== PROFILE ========== */
.profile-sidebar {
    background: var(--bg-card);
    border-radius: 14px;
    border-top: 4px solid var(--amber);
    position: sticky;
    top: 76px;
}
.avatar-circle {
    width: 80px; height: 80px;
    background: var(--cedar);
    color: var(--amber);
    font-size: 1.8rem; font-weight: 700;
    font-family: 'Unbounded', sans-serif;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}

/* ========== TICKET ========== */
.ticket-card { background: var(--bg-card); border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border-soft); }
.ticket-header { background: var(--cedar); padding: 14px 16px; }
.ticket-footer { background: var(--bg-subtle); padding: 8px; border-top: 2px dashed var(--border); }

/* ========== PAYMENT ========== */
.payment-option {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .2s;
    margin-left: 0;
}
.payment-option:has(input:checked) { border-color: var(--amber); background: rgba(200,121,42,.06); }

/* ========== SUCCESS ========== */
.success-card { background: var(--bg-card); border-radius: 18px; border-top: 4px solid #2E7D5A; }

/* ========== ROUTE DISPLAY ========== */
.route-display { position: relative; }
.route-point { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.route-line { width: 2px; height: 18px; background: var(--border); margin-left: 7px; }
.route-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.route-vertical-line { width: 2px; height: 28px; background: var(--border); }
.detail-box { background: var(--bg-subtle); border-radius: 10px; padding: 14px; text-align: center; border: 1.5px solid var(--border-soft); }

/* ========== SEAT MAP ========== */
.bus-body {
    max-width: 320px;
    background: var(--bg-subtle);
    border-radius: 16px;
    border: 2px solid var(--cedar);
    padding: 16px;
}
.bus-front { border-bottom: 2px dashed var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.seat-btn {
    width: 42px; height: 42px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .85rem;
    border: none;
    cursor: pointer;
    transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.seat-free-btn   { background: #D8EDD8; color: #1B5C1B; }
.seat-free-btn:hover { background: var(--amber); color: var(--white); transform: scale(1.1); }
.seat-occupied-btn { background: #E0DAD0; color: #9E9488; cursor: not-allowed; }
.seat-selected-btn { background: var(--amber) !important; color: var(--white) !important; box-shadow: 0 0 0 3px rgba(200,121,42,.4); transform: scale(1.1); }
.seat-legend { width: 24px; height: 24px; border-radius: 6px; }
.seat-free    { background: #D8EDD8; }
.seat-occupied { background: #E0DAD0; }
.seat-selected { background: var(--amber); }

/* ========== VERIFY ========== */
.verify-header-ok   { background: #D8EDD8; border-radius: 16px; }
.verify-header-err  { background: #FADADD; border-radius: 16px; }

/* ========== EMPTY STATE ========== */
.empty-state { padding: 50px 20px; }

/* ========== ALERTS ========== */
.alert { border-radius: 10px; border: none; }
.alert-success { background: #EAF5EA; color: #1B5C1B; border-left: 4px solid #2E7D5A; }
.alert-danger  { background: #FBEAEA; color: #7A1515; border-left: 4px solid #C0392B; }
.alert-info    { background: #EAF0F5; color: #1A3028; border-left: 4px solid var(--amber); }
.alert-warning { background: #FDF7EF; color: #6B3D0A; border-left: 4px solid var(--amber); }

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--amber); border-radius: 3px; }

/* Секции с фоном как у body */
.section-bg-main { background: var(--bg); }

/* ========== ТЁМНАЯ ТЕМА: специфичные оверрайды ========== */
[data-theme="dark"] body { background: var(--bg); }

/* Секции с явным bg */
[data-theme="dark"] .bg-light,
[data-theme="dark"] section[style*="background:var(--cream)"] {
    background: var(--bg) !important;
}
[data-theme="dark"] .how-section { background: var(--bg-section); }

/* Bootstrap dropdown */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
}
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--bg-subtle); color: var(--text); }
[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

/* Bootstrap form controls вне .search-card */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--bg-subtle);
    color: var(--text);
    border-color: var(--border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--amber);
}
[data-theme="dark"] .form-label { color: var(--text-muted); }

/* Алёрты */
[data-theme="dark"] .alert-success { background: #0F2B15; color: #6FD68A; border-left-color: #2E7D5A; }
[data-theme="dark"] .alert-danger  { background: #2B0F0F; color: #F08080; border-left-color: #C0392B; }
[data-theme="dark"] .alert-info    { background: #0F1E18; color: rgba(245,240,232,.7); border-left-color: var(--amber); }
[data-theme="dark"] .alert-warning { background: #1E1508; color: #D4882E; border-left-color: var(--amber); }

/* Текст */
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-dark  { color: var(--text) !important; }

/* Маршруты карточка-нижняя часть */
[data-theme="dark"] .route-preview-card .card-bottom .route-meta { color: var(--text-muted); }

/* Иконки Bootstrap в light-context */
[data-theme="dark"] .btn-close { filter: invert(1); }

/* Места в автобусе */
[data-theme="dark"] .seat-free-btn   { background: #1A3B1F; color: #6FD68A; }
[data-theme="dark"] .seat-occupied-btn { background: #1E2A22; color: #5A7065; }

/* Verify */
[data-theme="dark"] .verify-header-ok  { background: #112B15; }
[data-theme="dark"] .verify-header-err { background: #2B1112; }

/* ========== КНОПКА ТЕМЫ ========== */
.btn-theme-toggle {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.65);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .95rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
    padding: 0;
}
.btn-theme-toggle:hover {
    background: rgba(200,121,42,.15);
    border-color: var(--amber);
    color: var(--amber);
}

/* ========== МОБАЙЛ ========== */
@media (max-width: 991px) {
    .hero-section { padding: 50px 0 80px; }
    .hero-section::after { height: 50px; }
}
@media (max-width: 576px) {
    .seat-btn { width: 36px; height: 36px; font-size: .75rem; }
    .price-big { font-size: 1.2rem; }
    .auth-card { padding: 24px 20px; }
    .hero-title { font-size: 1.6rem; }
    .step-connector { display: none; }
}