/* ===================================================
   Bath Heritage Planner
=================================================== */

:root{

    --primary:#091c3a;
    --accent:#3dd1d5;
    --background:#f3f9ff;
    --text:#5b6573;
    --shadow:0 18px 40px rgba(0,0,0,.12);

    --radius:18px;

}

/* ===================================================
   GENERAL
=================================================== */

.planner-section{
    background:var(--background);

    padding:18px 30px;

    height:calc(100vh - 76px);

    box-sizing:border-box;
}

.planner-section > .container-fluid{
    height:100%;
}

.planner-layout{
    display:flex;

    gap:18px;

    align-items:stretch;

    height:100%;

    min-height:0;

    max-width:1700px;

    margin:0 auto;
}

/* ===================================================
   MAP
=================================================== */

.planner-map-wrapper{
    height:100%;
    min-height:0;

    padding:3px;

    background:var(--accent);

    border-radius:var(--radius);

    position:relative;

    flex:1;

    overflow:hidden;

    transition:.45s ease;
}

#plannerMap{
    width:100%;
    height:100%;

    border-radius:var(--radius);

    border:none;

    overflow:hidden;
}

/* ===================================================
   SIDEBAR
=================================================== */

.planner-sidebar{
    width:400px;
    height:100%;
    min-height:0;

    display:flex;

    flex-direction:column;

    gap:12px;
}

/* ===================================================
   LANDMARK CARD
=================================================== */

.planner-popup{
    height:54%;
    min-height:0;
    max-height:390px;

    flex:none;

    background:white;

    border-radius:22px;

    padding:18px 20px;

    box-shadow:var(--shadow);

    display:flex;

    flex-direction:column;

    overflow:hidden;
}

#popupTitle{
    font-family:"Playfair Display",serif;

    line-height:1.05;

    color:var(--primary);

    margin-bottom:10px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

    font-size:26px;

    flex:none;
}

.planner-popup-photo{
    width:100%;

    height:165px;

    flex:none;

    border-radius:16px;

    background:#edf5ff;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    margin-bottom:10px;
}

#popupText{
    color:var(--text);

    line-height:1.45;

    font-size:14px;

    margin-bottom:1px;

    flex:none;
}

/* ===================================================
   LANDMARK DESCRIPTION
=================================================== */

#popupText{
    color:var(--text);

    line-height:1.45;

    font-size:14px;

    margin-bottom:1px;

    flex:none;

    padding-right:8px;
}


/* =========================
   COLLAPSED DESCRIPTION
========================= */

#popupText.description-collapsed{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    max-height:none;

    padding-right:0;
}


/* =========================
   EXPANDED DESCRIPTION
========================= */

#popupText.description-expanded{

    display:block;

    max-height:145px;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:12px;

    scrollbar-width:thin;

    scrollbar-color:
        var(--accent)
        #edf5ff;
}


/* Chrome / Safari */

#popupText.description-expanded::-webkit-scrollbar{

    width:7px;
}


#popupText.description-expanded::-webkit-scrollbar-track{

    background:#edf5ff;

    border-radius:20px;
}


#popupText.description-expanded::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:20px;
}


#popupText.description-expanded::-webkit-scrollbar-thumb:hover{

    background:var(--primary);
}

.popup-read-more{
    display:none;

    align-self:flex-start;

    margin:3px 0 6px;

    padding:0;

    border:none;

    background:transparent;

    color:var(--accent);

    font-size:13px;

    font-weight:600;

    cursor:pointer;
}

.popup-read-more.visible{
    display:block;
}

.popup-read-more:hover{
    color:var(--primary);
}

.popup-actions{
    display:flex;

    align-items:center;

    gap:12px;

    margin-top:auto;
}

.planner-add-btn{
    border:none;

    border-radius:14px;

    background:var(--accent);

    color:white;

    font-size:16px;

    font-weight:600;

    padding:9px 4px;

    cursor:pointer;

    transition:.25s;
}

.planner-add-btn:hover{

    background:var(--primary);

}

#popupMoreInfo{
    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-top:0;

    padding:10px 4px;

    color:var(--accent);

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    white-space:nowrap;
}

/* ===================================================
   ITINERARY
=================================================== */

#itineraryPanel{
    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    overflow:hidden;

    background:white;

    border-radius:22px;

    padding:20px;

    box-shadow:var(--shadow);
}

#itineraryPanel h3{

    font-family:"Playfair Display",serif;

    font-size:26px;

    color:var(--primary);

    margin-bottom:5px;

}

#itineraryList{

    flex:1;

    min-height:0;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:8px;

}

.itinerary-footer{
    flex:none;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:14px;

    padding-top:12px;
}

.itinerary-pin{
    width:30px;
    height:30px;

    flex:none;

    position:relative;

    border-radius:50% 50% 50% 0;

    transform:rotate(-45deg);

    border:3px solid white;

    box-shadow:0 3px 8px rgba(0,0,0,.18);

    display:flex;

    align-items:center;

    justify-content:center;
}

.itinerary-pin-landmark{
    background:#ed7622;
}

.itinerary-pin-parking{
    background:#23406d;
}

.itinerary-pin-custom{
    background:#fcca35;
}

.itinerary-pin-content{
    transform:rotate(45deg);

    color:white;

    font-size:13px;

    font-weight:700;
}

.add-custom-stop{
    flex:1;

    width:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:8px;

    padding:10px 4px;

    border:none;

    background:transparent;

    color:var(--accent);

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    white-space:nowrap;

    transition:.2s;
}

.add-custom-stop:hover{
    color:var(--primary);
}

.add-custom-stop-icon{
    width:23px;

    height:23px;

    flex:none;

    border:2px solid currentColor;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:17px;

    font-weight:500;

    line-height:1;
}

/* ==========================================
   LIVE ITINERARY PROGRESS
========================================== */

.itinerary-name{
    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:2px;
}


.itinerary-live-status{
    color:var(--accent);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;
}


/* CURRENT DESTINATION */

.itinerary-item.live-current{
    background:#f2fcfc;

    border-radius:12px;

    padding-left:6px;

    padding-right:6px;
}


.itinerary-item.live-current
.itinerary-pin{
    box-shadow:
        0 0 0 4px rgba(61,209,213,.18),
        0 3px 8px rgba(0,0,0,.18);
}


/* ARRIVED BUT USER HAS NOT
   PRESSED CONTINUE YET */

.itinerary-item.live-arrived{
    background:#f3f8ef;

    border-radius:12px;

    padding-left:6px;

    padding-right:6px;
}


.itinerary-live-status.arrived{
    color:#638f46;
}


/* COMPLETED */

.itinerary-item.live-completed{
    opacity:.55;
}


.itinerary-item.live-completed
.itinerary-pin{
    background:#7f9b72;
}


.itinerary-live-status.completed{
    color:#7f9b72;
}


/* FUTURE STOPS */

.itinerary-item.live-future{
    opacity:1;
}

/* ===================================================
   EXIT LIVE TOUR
=================================================== */

.add-custom-stop.exit-live-mode{
    flex: none;

    width: auto;

    padding: 9px 14px;

    border-radius: 12px;

    background: #db1919;

    color: #ffffff;

    justify-content: center;

    gap: 7px;

    font-weight: 700;
}

.add-custom-stop.exit-live-mode:hover{
    background: #e25555;

    color: white;
}

.add-custom-stop.exit-live-mode
.add-custom-stop-icon{
    width: 22px;
    height: 22px;

    border-color: currentColor;

    font-size: 15px;
}

.itinerary-item{
    display:flex;

    align-items:center;

    gap:9px;

    padding:10px 0;

    border-bottom:1px solid #ececec;
}

.itinerary-name{

    flex:1;

    color:var(--primary);

    font-size:17px;

}

.remove-stop{
    width:30px;

    height:30px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:2px solid #b6bec8;

    border-radius:50%;

    background:transparent;

    color:#aab3bf;

    font-size:17px;

    line-height:1;

    cursor:pointer;

    transition:.2s;
}

.remove-stop:hover{
    border-color:var(--accent);

    color:var(--accent);

    background:#f1fcfc;

    transform:scale(1.05);
}

/* ===================================================
   ITINERARY SCROLLBAR
=================================================== */

#itineraryList::-webkit-scrollbar{

    width:8px;

}

#itineraryList::-webkit-scrollbar-track{

    background:#edf5ff;

    border-radius:20px;

}

#itineraryList::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:20px;

}

#itineraryList::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}

/* ===================================================
   WELCOME
=================================================== */

/* Overlay */

#welcomeOverlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:500;

    background:rgba(255,255,255,.20);

    backdrop-filter:blur(7px);

    transition:

        opacity .45s ease,

        visibility .45s ease;

}

#welcomeOverlay.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* Card */

.welcome-card{

    width:700px;

    height:250px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(12px);

    border-radius:24px;

    padding:30px;

    text-align:center;

    box-shadow:

        0 35px 80px rgba(0,0,0,.20);

}

.welcome-card h1{

    font-family:"Playfair Display",serif;

    font-size:47px;

    line-height:1.05;

    color:var(--primary);

    margin-bottom:22px;

}

.welcome-card p{

    color:#677385;

    font-size:19px;

    line-height:1.8;

    margin-bottom:23px;

}

#startPlanner{

    border:none;

    background:var(--accent);

    color:white;

    padding:18px 46px;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

#startPlanner:hover{

    background:var(--primary);

    transform:translateY(-2px);

}

/* ===================================================
   APP STATES
=================================================== */

/* Estado inicial */

.planner-layout.intro{

    display:block;
}


.planner-layout.intro .planner-map-wrapper{

    width:100%;

}

.planner-layout.intro .planner-sidebar{

    width:0;

    opacity:0;

    overflow:hidden;

    transform:translateX(120px);

    pointer-events:none;

}

/* Aplicación iniciada */

.planner-layout.started{

    display:flex;

}

.planner-layout.started .planner-sidebar{

    width:400px;

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

    transition:

        opacity .45s ease,

        transform .45s ease;

}

.planner-message{

    position:absolute;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    background:rgba(9,28,58,.9);

    color:white;

    padding:14px 28px;

    border-radius:30px;

    font-size:16px;

    font-weight:600;

    opacity:0;

    transition:.35s;

    z-index:1000;

}

.planner-message.visible{

    opacity:1;

}

/* ===================================================
   LEAFLET MARKERS
=================================================== */

.planner-marker{

    background:none !important;

    border:none !important;

}

.marker-circle{

    width:32px;

    height:32px;

    border-radius:50%;

    background:var(--accent);

    border:3px solid white;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:14px;

    font-weight:700;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    transition:.25s;

}

.marker-circle:hover{

    transform:scale(1.1);

}

.marker-circle.active{

    background:#ed7622;

    transform:scale(1.18);

}

/* ===================================================
   HEADER
=================================================== */

.planner-logo{

    color:white;

    font-size:28px;

    font-weight:700;

    letter-spacing:.5px;

}

/* ===================================================
   CONTINUE BUTTON
=================================================== */

#continuePlanner{
    flex:none;

    width:155px;

    margin-top:0;

    border:none;

    border-radius:14px;

    padding:12px 10px;

    font-size:16px;

    font-weight:600;

    transition:.25s;
}

#continuePlanner:disabled{

    background:#d8dde5;

    color:#8c97a8;

    cursor:not-allowed;

}

#continuePlanner:not(:disabled){

    background:var(--accent);

    color:white;

    cursor:pointer;

}

#continuePlanner:not(:disabled):hover{

    background:var(--primary);

}

#popupToggleBtn{
    flex:1;

    width:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;
}

.popup-add-icon{
    width:20px;

    height:20px;

    border:2px solid currentColor;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:none;

    font-size:15px;

    font-weight:600;

    line-height:1;
}

.popup-added-icon{
    width:20px;

    height:20px;

    border:2px solid currentColor;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:none;

    font-size:12px;

    font-weight:700;

    line-height:1;
}

.planner-live-btn{
    flex:none;

    width:155px;

    border:none;

    border-radius:14px;

    padding:12px 10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    background:#459510;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;
}

.planner-live-btn:hover{
    background:var(--primary);
}

.planner-live-btn.active{
    background:#459510;
    width: 164px;
}

/* ===================================================
   PARKING MARKERS
=================================================== */
.parking-marker{

    background:none !important;

    border:none !important;

}

.parking-circle{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#23406d;

    border:3px solid white;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:16px;

    font-weight:700;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    transition:.25s;

}

.parking-circle:hover{

    transform:scale(1.1);

}

.parking-pin-content{
    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
    z-index:2;

    color:white;

    font-size:13px;
    font-weight:700;

    transform:none;
}

/* Counter-rotate the content only when the parking becomes a pin */
.parking-circle.selected-pin
.parking-pin-content{
    transform:rotate(45deg);
}

.parking-info{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:10px;

    margin-bottom:4px;
}

.parking-info strong{
    display:block;

    margin-bottom:4px;

    color:var(--primary);
}

.parking-info span{
    display:block;

    color:var(--text);
}

/* ===================================================
   QUESTIONNAIRE
=================================================== */

.questionnaire-card{

    display:none;

    width:500px;

    min-height:650px;

    position:relative;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

}

#questionnaireCard{

    text-align:center;

}

.question-progress{

    width:100%;

    height:6px;

    background:#e7edf5;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:28px;

}

.question-progress-fill{

    width:50%;

    height:100%;

    background:var(--accent);

    transition:.35s;

}

#questionStep{

    font-size:18px;

    color:#6b7482;

    margin-bottom:10px;

}

#questionTitle{

    font-family:"Playfair Display",serif;

    font-size:30px;

    color:var(--primary);

    margin-bottom:30px;

}

#questionContent{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.question-buttons{

    width:100%;

    align-items:flex-end;

    display:flex;

    justify-content:space-between;

    padding-top:10px;

}

.question-buttons button{

    width:140px;

    padding:14px 22px;

    border-radius:12px;

    background:white;

    color:var(--accent);

    border:2px solid var(--accent);
    

}

#questionNext:not(:disabled):hover{

    background:var(--accent);

    color:white;

    border:2px solid var(--accent);

}

#questionNext:disabled{

    background:#d8dde5;

    color:#8c97a8;

    border:2px solid #d8dde5;

    cursor:not-allowed;

}

#questionBack:hover{

    background:var(--accent);

    color:white;

}

.questionnaire-close{

    position:absolute;

    top:40px;

    right:22px;

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#9aa5b5;

    font-size:24px;

    cursor:pointer;

    transition:.2s;

}

.questionnaire-close:hover{

    background:#edf8ff;

    color:var(--accent);

}

.calendar-card{

    width:520px;

    height:410px;

    padding:20px;

    margin:auto;

    border:2px solid #e7edf5;

    border-radius:20px;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    cursor:pointer;

    transition:.25s;

}

.calendar-card:hover{

    border-color:var(--accent);

    transform:translateY(-2px);

}

.calendar-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.calendar-header h3{

    font-size:28px;

    font-weight:700;

    color:var(--primary);

}

.calendar-header button{

    border:none;

    background:none;

    cursor:pointer;

    font-size:34px;

    color:var(--primary);

}

.calendar-header button:disabled{

    opacity:.25;

    cursor:not-allowed;

}

.calendar-weekdays{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    margin-bottom:16px;

    text-align:center;

    color:#7a8595;

    font-weight:600;

}

.calendar-days{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    grid-template-rows:repeat(6,1fr);

    gap:4px;

}

.calendar-day{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    margin:auto;

}

.calendar-day.disabled{

    color:#c4ccd8;

    cursor:not-allowed;

}

.calendar-day.today{

    background:#edf8ff;

    color:var(--accent);

    font-weight:700;

}

.calendar-day.other-month{

    color:#cfd7e2;

}

.calendar-day:not(.disabled):not(.selected):not(.other-month):hover{

    background:#edf8ff;

    cursor:pointer;

}

.calendar-day.selected{

    background:var(--accent);

    color:white;

    font-weight:700;

}

/* ===================================================
   TIME PICKER
=================================================== */

.time-picker{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    border:2px solid #e7edf5;

    border-radius:22px;

    padding:45px 35px;

    background:white;

    cursor:pointer;

    transition:.25s;

}

.time-picker:hover{

    border-color:var(--accent);

    transform:translateY(-2px);

}

.time-column{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.time-column button{

    width:42px;

    height:42px;

    border:none;

    background:none;

    color:var(--primary);

    font-size:24px;

    cursor:pointer;

    transition:.2s;

}

.time-column button:hover{

    color:var(--accent);

}

.time-column div{

    width:90px;

    height:90px;

    border-radius:18px;

    border:2px solid #e7edf5;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:700;

    color:var(--primary);

    background:white;

}

.time-separator{

    font-size:46px;

    font-weight:700;

    color:var(--primary);

}

/* ===================================================
CUSTOM STOP MODAL
=================================================== */

.custom-stop-overlay{
    position:fixed;

    inset:0;

    z-index:5000;

    display:flex;

    align-items:center;

    justify-content:center;

    background:transparent;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.custom-stop-overlay.open{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}

.custom-stop-modal{
    width:min(620px, calc(100vw - 140px));

    max-height:70vh;

    padding:30px;

    position:relative;

    z-index:1;

    display:flex;

    flex-direction:column;

    background:white;

    border-radius:26px;

    box-shadow:0 25px 70px rgba(9,28,58,.18);

    transform:translateY(16px) scale(.98);

    transition:transform .25s ease;
}

.custom-stop-overlay.open .custom-stop-modal{
    transform:translateY(0) scale(1);
}

.custom-stop-modal h2{
    font-family:"Playfair Display",serif;

    font-size:34px;

    color:var(--primary);

    margin:0 45px 6px 0;
}

.custom-stop-subtitle{
    margin-bottom:20px;

    color:var(--text);

    font-size:15px;
}

.custom-stop-overlay::before{
    content:"";

    position:fixed;

    inset:0;

    background:rgba(9,28,58,.30);

    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);

    pointer-events:none;
}

.custom-stop-close{
    position:absolute;

    top:22px;

    right:22px;

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid #d6dde6;

    border-radius:50%;

    background:white;

    color:#9aa5b5;

    font-size:18px;

    cursor:pointer;

    transition:.2s;
}

.custom-stop-close:hover{
    border-color:var(--accent);

    color:var(--accent);

    background:#f3fcfc;
}

/* Search */

.custom-stop-search{
    height:54px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 16px;

    border:2px solid #e3e9f0;

    border-radius:15px;

    background:white;

    transition:.2s;
}

.custom-stop-search:focus-within{
    border-color:var(--accent);

    box-shadow:0 0 0 4px rgba(61,209,213,.10);
}

.custom-stop-search-icon{
    color:var(--accent);

    font-size:17px;
}

.custom-stop-search-message{
    padding:16px;

    color:#8a95a4;

    text-align:center;

    font-size:14px;
}

#customStopSearchInput{
    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:var(--primary);

    font-size:16px;
}

#customStopSearchInput::placeholder{
    color:#a2adbb;
}

/* Results */

.custom-stop-results{
    margin-top:10px;

    max-height:215px;

    overflow-y:auto;

    border-radius:14px;
}

.custom-stop-result{
    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 14px;

    border:none;

    border-bottom:1px solid #edf0f4;

    background:white;

    text-align:left;

    cursor:pointer;

    transition:.2s;
}

.custom-stop-result:hover{
    background:#f2fbfc;
}

.custom-stop-result-icon{
    width:34px;

    height:34px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#edfafa;

    color:var(--accent);
}

.custom-stop-result-text{
    flex:1;
}

.custom-stop-result-name{
    display:block;

    color:var(--primary);

    font-size:15px;

    font-weight:600;
}

.custom-stop-result-address{
    display:block;

    margin-top:2px;

    color:#8a95a4;

    font-size:13px;
}

/* Added stops */

.custom-stop-selected-section{
    display:none;

    margin-top:20px;

    padding-top:17px;

    border-top:1px solid #edf0f4;
}

.custom-stop-selected-section.visible{
    display:block;
}

.custom-stop-selected-section h3{
    margin-bottom:8px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;
}

.custom-stop-selected-item{
    display:flex;

    align-items:center;

    gap:10px;

    padding:9px 0;
}

.custom-stop-selected-number{
    width:27px;

    height:27px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:12px;

    font-weight:700;
}

.custom-stop-selected-name{
    flex:1;

    color:var(--primary);

    font-size:15px;
}

.custom-stop-selected-remove{
    width:27px;

    height:27px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:0;

    border:2px solid #c4ccd6;

    border-radius:50%;

    background:white;

    color:#aab3bf;

    cursor:pointer;

    transition:.2s;
}

.custom-stop-selected-remove:hover{
    border-color:var(--accent);

    color:var(--accent);
}

/* Footer */

.custom-stop-footer{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:22px;
}

.custom-stop-another{
    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 2px;

    border:none;

    background:transparent;

    color:var(--accent);

    font-size:15px;

    font-weight:600;

    cursor:pointer;
}

.custom-stop-another span{
    width:23px;

    height:23px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:2px solid currentColor;

    border-radius:50%;

    line-height:1;
}

.custom-stop-another:hover{
    color:var(--primary);
}

.custom-stop-done{
    min-width:130px;

    padding:12px 24px;

    border:none;

    border-radius:14px;

    background:var(--accent);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.custom-stop-done:hover{
    background:var(--primary);
}

.custom-stop-done:disabled{
    background:#d8dde5;

    color:#929dad;

    cursor:not-allowed;
}

.custom-stop-marker{
    background:none !important;
    border:none !important;
}

.custom-stop-circle{
    width:32px;

    height:32px;

    border-radius:50%;

    background:#fcca35;

    border:3px solid white;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:14px;

    font-weight:700;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    transition:.25s;
}

.custom-stop-circle:hover{
    transform:scale(1.1);
}

.marker-number,
.custom-stop-number{
    user-select:none;
    font-size:15px;
    font-weight:700;
}

.marker-circle.selected-pin
.marker-number{

    transform:rotate(45deg);

    position:relative;

    z-index:2;

    color:white;

    font-size:12px;

    font-weight:700;
}

.marker-circle.selected-pin.has-route-number::after{
    display:none;
}
/* ===================================================
START LOCATION PICKER
=================================================== */

.start-location-picker{
    width:100%;

    max-height:360px;

    overflow-y:auto;

    padding-right:6px;

    display:flex;

    flex-direction:column;

    gap:10px;
}

.start-location-option{
    width:100%;

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border:2px solid #e7edf5;

    border-radius:16px;

    background:white;

    text-align:left;

    cursor:pointer;

    transition:.2s;
}

.start-location-option:hover{
    border-color:var(--accent);

    background:#f5fcfc;
}

.start-location-option.selected{
    border-color:var(--accent);

    background:#edfafa;

    box-shadow:
        0 0 0 3px rgba(61,209,213,.12);
}

.start-location-option.selected
.start-location-pin{
    box-shadow:
        0 3px 8px rgba(0,0,0,.16),
        0 0 0 4px rgba(61,209,213,.18);
}

.start-location-text{
    display:flex;

    flex-direction:column;

    gap:2px;

    color:var(--primary);
}

.start-location-text strong{
    font-size:15px;

    font-weight:600;
}

.start-location-text small{
    color:#8a95a4;

    font-size:12px;
}

.start-location-pin{
    width:36px;
    height:36px;

    flex:none;

    position:relative;

    border-radius:50% 50% 50% 0;

    transform:rotate(-45deg);

    border:3px solid white;

    box-shadow:0 3px 8px rgba(0,0,0,.16);

    display:flex;

    align-items:center;

    justify-content:center;
}

.start-location-pin-landmark{
    background:#ed7622;
}

.start-location-pin-parking{
    background:#23406d;
}

.start-location-pin-custom{
    background:#fcca35;
}

.start-location-pin-content{
    transform:rotate(45deg);

    color:white;

    font-size:13px;

    font-weight:700;
}

.start-location-pin-auto{
    background:var(--accent);
}

/* ===================================================
SELECTED LOCATION PINS
=================================================== */

/* LANDMARK SELECTED */
.marker-circle.selected-pin{
    width:30px;
    height:30px;

    border-radius:50% 50% 50% 0;

    background:#ed7622;

    border:3px solid white;

    transform:rotate(-45deg);

    box-shadow:0 5px 12px rgba(0,0,0,.28);
}

.marker-circle.selected-pin::after{
    content:"";

    width:8px;
    height:8px;

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:white;
}


/* PARKING SELECTED */
.parking-circle.selected-pin{
    width:30px;
    height:30px;

    border-radius:50% 50% 50% 0;

    background:#23406d;

    border:3px solid white;

    transform:rotate(-45deg);

    box-shadow:0 5px 12px rgba(0,0,0,.28);
}

/* CUSTOM STOP */
.custom-stop-circle.selected-pin{
    width:30px;
    height:30px;

    border-radius:50% 50% 50% 0;

    background:#fcca35;

    border:3px solid white;

    transform:rotate(-45deg);

    box-shadow:0 5px 12px rgba(0,0,0,.28);
}

.custom-stop-circle.selected-pin::after{
    content:"";

    width:8px;
    height:8px;

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:white;
}

.custom-stop-circle.selected-pin
.custom-stop-number{

    transform:rotate(45deg);

    position:relative;

    z-index:2;

    color:white;

    font-size:12px;

    font-weight:700;
}

.custom-stop-circle.selected-pin.has-route-number::after{
    display:none;
}

/* White centre dot for landmark/custom pins */

.itinerary-pin-landmark::after,
.itinerary-pin-custom::after,
.start-location-pin-landmark::after,
.start-location-pin-custom::after{
    content:"";

    width:7px;
    height:7px;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:white;
}

.itinerary-pin-landmark.has-route-number::after,
.itinerary-pin-custom.has-route-number::after{
    display:none;
}


/* ===================================================
   MOBILE VERSION
=================================================== */

.mobile-planner-tabs{
    display:none;
}

@media (max-width:768px){

    .marker-circle.active{
        transform:none;
    }



    /* ==========================================
       PAGE
    ========================================== */

    html,
    body{
        width:100%;

        overflow-x:hidden;
    }

    .planner-section{
        height:calc(100dvh - 76px);

        padding:10px;

        box-sizing:border-box;

        position:relative;

        background:var(--background);
    }

    .planner-section > .container-fluid{
        width:100%;

        height:100%;

        padding:0;
    }

    .planner-layout,
    .planner-layout.started,
    .planner-layout.intro{
        width:100%;

        height:100%;

        max-width:none;

        min-height:0;

        display:block;

        margin:0;

        position:relative;
    }


    /* ==========================================
       MAP

       White spacing + turquoise border
    ========================================== */

    .planner-map-wrapper,
    .planner-layout.intro .planner-map-wrapper{
        width:100%;

        height:100%;

        min-height:0;

        padding:3px;

        box-sizing:border-box;

        position:relative;

        border-radius:24px;

        background:var(--accent);

        overflow:hidden;
    }

    #plannerMap{
        width:100%;

        height:100%;

        border-radius:21px;

        overflow:hidden;
    }


    /* ==========================================
       SIDEBAR → MOBILE BOTTOM AREA
    ========================================== */

    .planner-sidebar,
    .planner-layout.started .planner-sidebar{
        width:calc(100% - 20px);

        height:auto;

        position:absolute;

        left:10px;

        right:10px;

        bottom:10px;

        z-index:1200;

        display:flex;

        flex-direction:column;

        gap:0;

        opacity:1;

        overflow:visible;

        transform:none;

        pointer-events:auto;
    }


    /*
       IMPORTANT:
       During intro, sidebar stays hidden.
    */

    .planner-layout.intro
    .planner-sidebar{
        opacity:0;

        visibility:hidden;

        pointer-events:none;
    }


    /* ==========================================
       MOBILE PANELS
    ========================================== */

    .planner-sidebar .planner-popup,
    .planner-sidebar #itineraryPanel{
        display:none !important;
    }

    .planner-sidebar .planner-popup.mobile-panel-active,
    .planner-sidebar #itineraryPanel.mobile-panel-active{
        display:flex !important;
    }


    /* ==========================================
       LANDMARK BOTTOM SHEET
    ========================================== */

    .planner-popup{
        width:100%;

        height:auto;

        min-height:0;

        max-height:42vh;

        padding:18px;

        position:relative;

        border-radius:
            24px 24px 0 0;

        background:white;

        box-shadow:
            0 -10px 35px rgba(9,28,58,.16);

        overflow:hidden;
    }


    /*
       Small drag handle
    */


    #popupTitle{
        margin-top:8px;

        margin-bottom:8px;

        font-size:21px;

        line-height:1.05;
    }


    .planner-popup-photo{
        width:100%;

        height:125px;

        margin-bottom:10px;

        flex:none;

        border-radius:16px;
    }


    #popupText{
        margin-bottom:10px;

        font-size:13px;

        line-height:1.45;
    }


    .popup-actions{
        width:100%;

        display:flex;

        align-items:center;

        gap:10px;

        margin-top:auto;
    }


    #popupToggleBtn{
        flex:1;

        min-width:0;

        padding:11px 8px;

        font-size:14px;
    }


    #popupMoreInfo{
        flex:none;

        padding:8px 2px;

        font-size:12px;

        white-space:nowrap;
    }


    /* ==========================================
       ITINERARY BOTTOM SHEET
    ========================================== */

    #itineraryPanel{
        width:100%;

        height:auto;

        max-height:46vh;

        min-height:190px;

        flex:none;

        padding:18px;

        border-radius:
            24px 24px 0 0;

        position:relative;

        background:white;

        box-shadow:
            0 -10px 35px rgba(9,28,58,.16);

        overflow:hidden;
    }


    #itineraryPanel h3{
        margin-top:8px;

        font-size:23px;
    }

    .planner-sidebar .planner-popup,
    .planner-sidebar #itineraryPanel{
        width:100%;

        left:auto;
        right:auto;
        top:auto;
        bottom:auto;

        margin:0;

        box-sizing:border-box;

        border-radius:24px 24px 0 0;
    }


    #itineraryList{
        flex:1;

        max-height:225px;

        padding-right:5px;

        overflow-y:auto;
    }


    .itinerary-item{
        padding:9px 0;

        gap:8px;
    }


    .itinerary-name{
        font-size:15px;
    }


    .itinerary-pin{
        width:27px;

        height:27px;
    }


    .remove-stop{
        width:27px;

        height:27px;

        font-size:15px;
    }


    /* ==========================================
       ITINERARY FOOTER
    ========================================== */

    .itinerary-footer{
        flex:none;

        gap:8px;

        padding-top:10px;
    }


    .add-custom-stop{
        min-width:0;

        padding:8px 2px;

        font-size:13px;
    }


    .add-custom-stop-icon{
        width:21px;

        height:21px;

        font-size:15px;
    }


    #continuePlanner{
        width:135px;

        padding:11px 8px;

        font-size:14px;
    }


    /* ==========================================
       MOBILE TAB BAR
    ========================================== */

    .mobile-planner-tabs{
        width:100%;

        height:64px;

        display:flex;

        align-items:stretch;

        order:3;

        position:relative;

        background:white;

        border-radius:
            0 0 24px 24px;

        overflow:hidden;

        box-shadow:
            0 12px 30px rgba(9,28,58,.16);
    }


    .mobile-planner-tab{
        flex:1;

        position:relative;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        border:none;

        background:white;

        color:#7d8898;

        font-size:14px;

        font-weight:600;

        cursor:pointer;
    }


    .mobile-planner-tab i{
        font-size:18px;
    }


    .mobile-planner-tab.active{
        color:var(--accent);
    }


    .mobile-planner-tab.active::after{
        content:"";

        height:3px;

        position:absolute;

        left:18px;

        right:18px;

        bottom:0;

        border-radius:
            3px 3px 0 0;

        background:var(--accent);
    }


    .mobile-itinerary-count{
        min-width:20px;

        height:20px;

        display:flex;

        align-items:center;

        justify-content:center;

        padding:0 5px;

        border-radius:10px;

        background:var(--primary);

        color:white;

        font-size:11px;
    }


    /* ==========================================
       MAP MESSAGE
    ========================================== */

    .planner-message{
        top:16px;

        width:max-content;

        max-width:calc(100% - 55px);

        padding:10px 16px;

        font-size:12px;

        text-align:center;
    }


    /* ==========================================
       WELCOME OVERLAY
    ========================================== */

    #welcomeOverlay{
        position:absolute;

        inset:0;

        z-index:2000;

        display:flex;

        align-items:center;

        justify-content:center;

        padding:22px;

        background:rgba(255,255,255,.18);

        backdrop-filter:blur(7px);
    }


    .welcome-card{
        width:100%;

        max-width:360px;

        height:auto;

        padding:24px 20px;

        border-radius:26px;

        background:rgba(255,255,255,.96);

        box-shadow:
            0 20px 55px rgba(9,28,58,.22);
    }


    .welcome-card h1{
        margin-bottom:14px;

        font-size:29px;

        line-height:1.08;
    }


    .welcome-card p{
        margin-bottom:20px;

        font-size:14px;

        line-height:1.55;
    }


    #startPlanner{
        width:100%;

        padding:14px;

        font-size:15px;
    }


    /* ==========================================
       HEADER
    ========================================== */

    .planner-logo{
        font-size:23px;
    }

    /* ==========================================
      MOBILE QUESTIONNAIRE
    ========================================== */

    .questionnaire-card{
        width:100%;

        max-width:360px;

        min-height:0;

        max-height:82vh;

        padding:20px 16px 16px;

        box-sizing:border-box;

        border-radius:24px;

        overflow:hidden;
    }


    #questionnaireCard{
        text-align:center;
    }


    .question-progress{
        height:5px;

        margin-bottom:18px;
    }


    #questionStep{
        margin-bottom:6px;

        font-size:13px;
    }


    #questionTitle{
        margin-bottom:16px;

        padding:0 22px;

        font-size:22px;

        line-height:1.08;
    }


    #questionContent{
        width:100%;

        min-width:0;

        min-height:0;

        display:block;

        box-sizing:border-box;
    }


    .questionnaire-close{
        top:18px;

        right:14px;

        width:32px;

        height:32px;

        font-size:20px;
    }


    .question-buttons{
        width:100%;

        gap:10px;

        padding-top:12px;

        box-sizing:border-box;

        background:white;
    }


    .question-buttons button{
        flex:1;

        width:auto;

        padding:11px 10px;

        font-size:14px;
    }

    .calendar-card{
      width:100%;

      height:auto;

      min-height:0;

      padding:12px;

      margin:0;

      box-sizing:border-box;

      border-radius:16px;
  }


  .calendar-header{
      margin-bottom:8px;
  }


  .calendar-header h3{
      margin:0;

      font-size:19px;
  }


  .calendar-header button{
      font-size:26px;
  }


  .calendar-weekdays{
      margin-bottom:8px;

      font-size:12px;
  }


  .calendar-days{
      gap:2px;
  }


  .calendar-day{
      width:30px;

      height:30px;

      font-size:12px;
  }

  .time-picker{
      width:100%;

      gap:14px;

      padding:20px 14px;

      box-sizing:border-box;

      border-radius:16px;
  }


  .time-column{
      gap:8px;
  }


  .time-column button{
      width:34px;

      height:30px;

      font-size:18px;
  }


  .time-column div{
      width:62px;

      height:62px;

      border-radius:14px;

      font-size:29px;
  }


  .time-separator{
      font-size:30px;
  }

  .start-location-picker{
    max-height:42vh;

    gap:7px;
    }


    .start-location-option{
        padding:9px 10px;

        gap:10px;

        border-radius:13px;
    }


    .start-location-pin{
        width:29px;

        height:29px;
    }


    .start-location-text strong{
        font-size:13px;
    }


    .start-location-text small{
        font-size:10px;
    }

    .planner-live-btn{
        width:135px;

        padding:11px 8px;

        font-size:13px;
    }

    .live-navigation-card{
            width:calc(100% - 32px);

            top:78px;
            left:16px;
        }

        /* ==========================================
    MOBILE BOTTOM SHEETS
    ========================================== */

    .planner-popup,
    #itineraryPanel{
        transition:
            max-height .32s ease,
            height .32s ease,
            transform .32s ease;

        will-change:
            transform,
            height;
    }


    /* =========================
    HANDLE
    ========================= */

    .mobile-sheet-handle{
        width:52px;
        height:22px;

        flex:none;

        position:relative;

        margin:-7px auto 4px;

        cursor:grab;

        touch-action:none;
    }

    .mobile-sheet-handle::after{
        content:"";

        width:42px;
        height:5px;

        position:absolute;

        top:7px;
        left:50%;

        transform:translateX(-50%);

        border-radius:20px;

        background:#c7ccd3;
    }

    .mobile-sheet-handle:active{
        cursor:grabbing;
    }


    /* =========================
    NORMAL
    This is the default
    ========================= */

    .planner-popup.sheet-normal{
        max-height:42vh;
    }

    #itineraryPanel.sheet-normal{
        max-height:46vh;
    }


    /* =========================
    EXPANDED
    ========================= */

    .planner-popup.sheet-expanded,
    #itineraryPanel.sheet-expanded{
        height:calc(100dvh - 115px);

        max-height:calc(100dvh - 115px);
    }


    /* Give lists room when expanded */

    #itineraryPanel.sheet-expanded
    #itineraryList{
        max-height:none;
    }


    /* Landmark card can scroll
    when fully expanded */

    .planner-popup.sheet-expanded{
        overflow-y:auto;
    }


    /* =========================
    COLLAPSED
    ========================= */

    .planner-popup.sheet-collapsed{
        height:52px;

        min-height:52px;

        max-height:52px;

        padding-top:14px;

        overflow:hidden;
    }


    #itineraryPanel.sheet-collapsed{
        height:52px;

        min-height:52px;

        max-height:52px;

        padding-top:14px;

        overflow:hidden;
    }


    /* Hide panel contents while collapsed */

    .planner-popup.sheet-collapsed
    > *:not(.mobile-sheet-handle),

    #itineraryPanel.sheet-collapsed
    > *:not(.mobile-sheet-handle){

        visibility:hidden;
    }


    /* Keep handle visible */

    .planner-popup.sheet-collapsed
    .mobile-sheet-handle,

    #itineraryPanel.sheet-collapsed
    .mobile-sheet-handle{

        visibility:visible;
    }

    /* ==========================================
    CUSTOM STOP MODAL - MOBILE
    ========================================== */

    .custom-stop-overlay{
        position: fixed;

        inset: 0;

        z-index: 5000;

        padding: 16px;

        box-sizing: border-box;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* Remove the desktop decorative background */
    .custom-stop-overlay::before{
        display: none;
    }


    .custom-stop-modal{
        width: 100%;

        max-width: 390px;

        max-height: calc(100dvh - 100px);

        padding: 24px 18px 20px;

        box-sizing: border-box;

        border-radius: 22px;

        overflow-y: auto;
    }

    .custom-stop-overlay.open{
        background: rgba(9,28,58,.18);

        backdrop-filter: blur(3px);

        -webkit-backdrop-filter: blur(3px);
    }



    /* TITLE */

    .custom-stop-modal h2{
        margin: 0 40px 5px 0;

        font-size: 27px;

        line-height: 1.1;
    }


    .custom-stop-subtitle{
        margin-bottom: 16px;

        font-size: 14px;

        line-height: 1.45;
    }


    /* CLOSE BUTTON */

    .custom-stop-close{
        top: 17px;

        right: 16px;

        width: 32px;

        height: 32px;

        font-size: 16px;
    }


    /* SEARCH */

    .custom-stop-search{
        width: 100%;

        height: 50px;

        padding: 0 13px;

        box-sizing: border-box;

        border-radius: 14px;
    }


    #customStopSearchInput{
        min-width: 0;

        font-size: 14px;
    }


    #customStopSearchInput::placeholder{
        font-size: 14px;
    }


    /* SEARCH RESULTS */

    .custom-stop-results{
        width: 100%;

        max-height: 180px;

        margin-top: 8px;
    }


    .custom-stop-result{
        padding: 10px;
    }


    .custom-stop-result-icon{
        width: 30px;

        height: 30px;
    }


    .custom-stop-result-name{
        font-size: 14px;
    }


    .custom-stop-result-address{
        font-size: 11px;
    }


    /* ADDED STOPS */

    .custom-stop-selected-section{
        margin-top: 14px;

        padding-top: 12px;
    }


    .custom-stop-selected-item{
        padding: 7px 0;
    }


    .custom-stop-selected-name{
        font-size: 13px;
    }


    /* FOOTER */

    .custom-stop-footer{
        gap: 10px;

        margin-top: 16px;
    }


    .custom-stop-another{
        min-width: 0;

        font-size: 13px;
    }


    .custom-stop-done{
        min-width: 100px;

        padding: 11px 18px;

        font-size: 14px;
    }

    #itineraryPanel.sheet-live{
        min-height:0;

        height:auto;

        max-height:none;

        padding:12px 18px;

        overflow:hidden;
    }

    #itineraryPanel.sheet-live h3,
    #itineraryPanel.sheet-live #itineraryList{
        display:none;
    }

    #itineraryPanel.sheet-live .itinerary-footer{
        padding-top:0;

        display:flex;

        align-items:center;

        justify-content:space-between;
    }

        .live-arrival-card{
        width:calc(100% - 32px);

        position:absolute;

        top:78px;
        left:16px;

        z-index:1100;

        padding:16px;

        box-sizing:border-box;

        align-items:center;

        gap:14px;

        background:rgba(255,255,255,.97);

        border-radius:18px;

        box-shadow:
            0 8px 25px rgba(9,28,58,.18);

        backdrop-filter:blur(10px);
    }


    .live-arrival-card.active{
        display:flex;
    }


    .live-arrival-icon{
        width:42px;
        height:42px;

        flex:none;

        display:flex;

        align-items:center;

        justify-content:center;

        border-radius:50%;

        background:#638f46;

        color:white;

        font-size:20px;

        font-weight:700;
    }


    .live-arrival-content{
        flex:1;

        min-width:0;

        display:flex;

        flex-direction:column;
    }


    .live-arrival-label{
        margin-bottom:2px;

        color:#638f46;

        font-size:12px;

        font-weight:700;

        text-transform:uppercase;

        letter-spacing:.5px;
    }


    .live-arrival-name{
        color:var(--primary);

        font-size:19px;

        line-height:1.2;
    }


    .live-continue-button{
        margin-top:11px;

        padding:10px 14px;

        border:none;

        border-radius:12px;

        background:var(--accent);

        color:white;

        font-size:13px;

        font-weight:700;

        cursor:pointer;
    }


    .live-continue-button:hover{
        background:var(--primary);
    }
    
    .planner-popup,
    #itineraryPanel{
        transition:
            height .22s ease,
            max-height .22s ease;
    }


    .planner-popup.sheet-dragging,
    #itineraryPanel.sheet-dragging{
        transition:none;
    }

    .popup-read-more{
        font-size:12px;

        margin-top:2px;
    }

    /* ==========================================
    LANDMARK CARD SCROLLBAR - MOBILE
    ========================================== */

    #popupText.description-expanded{

        max-height:135px;

        overflow-y:auto;

        overflow-x:hidden;

        padding-right:9px;

        scrollbar-width:thin;

        scrollbar-color:
            #b9c0c9
            transparent;
    }


    #popupText.description-expanded::-webkit-scrollbar{

        width:4px;
    }


    #popupText.description-expanded::-webkit-scrollbar-track{

        background:transparent;
    }


    #popupText.description-expanded::-webkit-scrollbar-thumb{

        background:#b9c0c9;

        border-radius:20px;
    }

    .live-recenter-button{
    width:46px;
    height:46px;

    position:absolute;

    right:16px;
    bottom:95px;

    z-index:1150;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:50%;

    background:white;

    color:var(--primary);

    box-shadow:
        0 6px 18px rgba(9,28,58,.20);

    font-size:18px;

    cursor:pointer;
}


.live-recenter-button:hover{
    color:var(--accent);
}


.live-recenter-button[hidden]{
    display:none;
}
    


}

/* ===================================================
   LIVE NAVIGATION
=================================================== */

.live-navigation-card{
    display:none;

    width:340px;
    max-width:calc(100% - 32px);

    position:absolute;

    top:16px;
    left:16px;

    z-index:1100;

    padding:14px 16px;

    box-sizing:border-box;

    background:rgba(255,255,255,.96);

    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(9,28,58,.18);

    backdrop-filter:blur(10px);
}

.live-navigation-card.active{
    display:block;
}


.live-navigation-top{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:3px;
}


.live-navigation-label{
    color:#8b96a5;

    font-size:12px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.5px;
}


.live-navigation-number{
    width:25px;
    height:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:12px;

    font-weight:700;
}


.live-navigation-name{
    color:var(--primary);

    font-size:20px;

    font-weight:700;

    line-height:1.2;
}


.live-navigation-details{
    display:flex;

    align-items:center;

    gap:6px;

    margin-top:6px;

    color:var(--text);

    font-size:13px;
}


.live-navigation-separator{
    color:#aab3bf;
}

.live-arrival-card{
    display:none;
}