:root {
        --brand:#f7b731;
        --dark:#002147;
        --bg:#f2f4f7;
        --card:#fff;
        --ok:#28a745;
        --bad:#dc3545;
        --fb:#1877F2;
        --google:#DB4437;
        --apple:#000000;
    }
    * { box-sizing:border-box; font-family:Inter,system-ui,sans-serif; }
    body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; }

    /* TOP NAV */
    .wb-top-nav {
        position: fixed; top: 0; left: 0; width: 100%; height: 60px;
        background: var(--dark); color: #fff; display: flex;
        align-items: center; justify-content: space-between; padding: 0 20px; z-index: 100;
    }
    .wb-top-nav .logo { font-size: 18px; font-weight: 900; color: var(--brand); text-transform: uppercase; }
    .wb-top-nav .menu-trigger { font-size: 22px; cursor: pointer; }

    /* SIDE DRAWER (HAMBURGER MENU) */
    .wb-drawer {
        position: fixed; top: 0; right: -100%; width: 100%; max-width: 350px; height: 100%;
        background: #fff; z-index: 200; transition: 0.4s; padding: 30px;
        box-shadow: -5px 0 20px rgba(0,0,0,0.2);
    }
    .wb-drawer.open { right: 0; }
    .wb-drawer-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.5); z-index: 190; display: none;
    }
    .wb-drawer-overlay.active { display: block; }

    .wb-drawer-close { position: absolute; top: 20px; right: 20px; font-size: 24px; color: var(--dark); cursor: pointer; }

    /* USER AUTH UI */
    .user-info { margin-bottom: 30px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
    .user-info span { display: block; color: #888; font-size: 12px; }
    .user-info strong { font-size: 18px; color: var(--dark); }

    .drawer-links { list-style: none; padding: 0; }
    .drawer-links li { padding: 15px 0; border-bottom: 1px solid #f9f9f9; }
    .drawer-links a { text-decoration: none; color: var(--dark); font-weight: 600; display: flex; align-items: center; gap: 10px; }

    .social-login { margin-top: 30px; }
    .social-btn {
        width: 100%; padding: 12px; border-radius: 10px; border: none; color: #fff;
        margin-bottom: 10px; font-weight: 700; cursor: pointer; display: flex;
        align-items: center; justify-content: center; gap: 10px; font-size: 14px;
        text-decoration: none;
    }
    .btn-fb { background: var(--fb); }
    .btn-google { background: var(--google); }
    .btn-apple { background: var(--apple); }

    .login-form input {
        width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; outline: none;
    }
    .auth-tabs { display:flex; gap:8px; margin-bottom:15px; }
    .auth-tab { flex:1; padding:10px; border:1px solid #ddd; border-radius:9px; background:#fff; color:var(--dark); font-weight:800; cursor:pointer; }
    .auth-tab.active { background:var(--dark); border-color:var(--dark); color:#fff; }
    .auth-name-row { display:flex; gap:8px; }
    .auth-remember { display:flex; align-items:center; gap:7px; margin:2px 0 12px; color:#666; font-size:12px; }
    .auth-remember input { width:auto; margin:0; }
    .auth-submit { padding:12px; font-size:14px; }
    .auth-divider { text-align:center; margin-bottom:15px; font-size:11px; color:#888; text-transform:uppercase; }
    .auth-message { padding:10px 12px; margin-bottom:12px; border-radius:9px; font-size:12px; line-height:1.4; }
    .auth-error { color:#842029; background:#f8d7da; border:1px solid #f5c2c7; }
    .auth-notice { color:#664d03; background:#fff3cd; border:1px solid #ffecb5; }

    /* Zmieniony styl mapy */
    #wb-map {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100% - 60px); /* Domyślnie pełny ekran */
        z-index: 1;
        transition: height 0.4s ease-out; /* Płynna animacja */
    }

    /* Klasa gdy panel jest rozwinięty - mapa zajmuje górne 35% */
    .map-mini { height: 65vh !important; }
    .map-mini {
        height: 60vh !important;
    }.wb-app:not(.collapsed) ~ #wb-map { height: 60vh; }

    /* BOTTOM PANEL */
    .wb-app {
        position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
        width: 100%; max-width: 480px; background: var(--card);
        border-radius: 25px 25px 0 0; z-index: 10; transition: 0.4s;
        display: flex; flex-direction: column; box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    }
    .wb-app.collapsed { height: 80px; cursor: pointer; overflow: hidden; }

    .wb-collapsed-trigger { display: none; padding: 15px; height: 80px; align-items: center; }
    .wb-app.collapsed .wb-collapsed-trigger { display: flex; }
    .wb-app.collapsed .wb-brand-header, .wb-app.collapsed .wb-steps, .wb-app.collapsed .wb-content { display: none; }

    .search-pill { background: #f1f1f1; width: 100%; padding: 12px 20px; border-radius: 30px; display: flex; align-items: center; gap: 12px; font-weight: 700; color: #666; }
    .wb-brand-header { padding: 15px; text-align: center; border-bottom: 1px solid #eee; position: relative; }
    .wb-steps { display:flex; background:#fafafa; font-size:10px; border-bottom: 1px solid #eee; text-transform: uppercase; }
    .wb-step { flex:1; text-align:center; padding:12px; color:#adb5bd; font-weight:700; }
    .wb-step.active { color:var(--dark); border-bottom: 3px solid var(--brand); }

    .wb-content { padding: 20px; overflow-y: auto; flex-grow: 1; }
    .wb-input { display:flex; align-items:center; background:#f8f9fa; border:1px solid #eee; border-radius:12px; padding:12px; margin-bottom:10px; }
    .wb-input input { border:none; outline:none; width:100%; font-size:16px; background: transparent; }
    .wb-primary { width:100%; padding:18px; border-radius:15px; border:none; background:var(--brand); color:var(--dark); font-weight:900; cursor:pointer; text-transform: uppercase; }

    .hidden { display: none !important; }

    .wb-toggle button {
        flex: 1;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid #eee;
        font-weight: 700;
        cursor: pointer;
        background: #fff; /* Tło dla nieaktywnego */
        transition: 0.3s;
    }

    .wb-toggle button.active {
        background: var(--dark); /* Ciemne tło dla wybranego */
        color: #fff;             /* Biały tekst */
        border-color: var(--dark);
    }

    .logo {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: 1px;
        cursor: pointer;
    }

    .logo i {
        font-size: 1.6rem;
        color: var(--accent-color);
        margin-right: 12px;
    }

    #top-driver-status {
        position: fixed;
        top: 70px; /* Dopasuj do dołu swojego navbara */
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        z-index: 999;
        min-width: 310px;
        height: 48px;
        display: none; /* JS przełączy na flex */
        justify-content: space-between;
        align-items: center;
        padding: 0 6px 0 20px !important;
        border-radius: 50px;
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.3px;
        text-transform: uppercase;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-sizing: border-box;
    }

    /* Kiedy pasek jest aktywny */
    #top-driver-status.active {
        display: flex !important;
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    /* Wariant: DOSTĘPNY (Zielony Gradient) */
    .status-available {
        background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 25px -5px rgba(46, 204, 113, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Wariant: BRAK (Czerwony Gradient) */
    .status-unavailable {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 25px -5px rgba(231, 76, 60, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.2);
        text-align: center;
    }

    /* Kontener tekstu i ikony */
    .status-content {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .status-content i {
        font-size: 16px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }

    /* Wariant: WYSOKI POPYT (Żółty Gradient) */
    .status-warning {
        background: linear-gradient(135deg, #f7b731 0%, #fa8231 100%) !important;
        color: #002147 !important; /* Ciemny tekst dla lepszego kontrastu na żółtym */
        box-shadow: 0 10px 25px -5px rgba(247, 183, 49, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    /* Opcjonalnie: zmiana koloru ikony dla wariantu ostrzegawczego */
    .status-warning .status-content i {
        color: #002147;
    }

    /* Badge z czasem (Ciemniejsza pigułka wewnątrz) */
    #eta-badge {
        background: rgba(0, 0, 0, 0.25) !important;
        backdrop-filter: blur(4px);
        color: #ffffff !important;
        padding: 8px 15px !important;
        border-radius: 40px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 36px;
        box-sizing: border-box;
    }

    #eta-time {
        font-size: 14px;
        font-weight: 900;
    }

    /* Opcjonalny efekt pulsowania dla statusu UNAVAILABLE */
    .status-unavailable.active {
        animation: pulse-red 2s infinite;
    }

    @keyframes pulse-red {
        0% { box-shadow: 0 10px 25px -5px rgba(231, 76, 60, 0.4); }
        50% { box-shadow: 0 10px 35px 2px rgba(231, 76, 60, 0.6); }
        100% { box-shadow: 0 10px 25px -5px rgba(231, 76, 60, 0.4); }
    }

    #top-driver-status {
        position: fixed; /* Zmienione z relative */
        top: 70px; /* Dopasuj do wysokości swojego navbara! */
        left: 50%;
        transform: translateX(-50%) translateY(-100%);
        /* reszta bez zmian... */
    }

    /* Wtedy zmiana klas w JS powinna wyglądać tak: */
    .status-available, .status-unavailable {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1;
    }
    .wb-input {
        display: flex;
        align-items: center;
        border: 1px solid var(--light-gray);
        border-radius: 8px;
        padding: 8px 12px;
        width: 100%;
        max-width: 400px;
        background: white;
    }

    .wb-input input {
        flex-grow: 1; /* Sprawia, że input zajmuje całą wolną przestrzeń */
        border: none;
        outline: none;
        padding: 0 10px;
        font-size: 16px;
    }

    #locate {
        transition: transform 0.2s ease;
    }

    #locate:hover {
        transform: scale(1.1);
        color: #007bff; /* Opcjonalna zmiana koloru przy najechaniu */
    }

    #external-browser-overlay {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #0f172a, #1e293b);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 999999;
        padding: 20px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .external-card {
        width: 100%;
        max-width: 420px;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(20px);
        border-radius: 24px;
        padding: 30px;
        text-align: center;
        color: white;
        box-shadow: 0 20px 60px rgba(0,0,0,0.4);
        animation: slideUp 0.5s ease;
    }

    .external-icon {
        font-size: 48px;
        margin-bottom: 15px;
    }

    .external-title {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .external-text {
        font-size: 14px;
        opacity: 0.85;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .open-browser-btn {
        display: block;
        width: 100%;
        padding: 15px;
        border-radius: 16px;
        background: linear-gradient(90deg,#22c55e,#16a34a);
        color: white;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: 0.3s;
        box-shadow: 0 10px 25px rgba(34,197,94,0.4);
    }

    .open-browser-btn:hover {
        transform: translateY(-2px);
    }

    .manual-instruction {
        margin-top: 18px;
        font-size: 12px;
        opacity: 0.6;
    }

    @keyframes slideUp {
        from { transform: translateY(30px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }