/* =============================================
Personnalisation Sweepin – HUG
============================================= */

:root {
    --concerto-primary-color: #f4cb41;
    --concerto-primary-text-color: #333333;
    --concerto-secondary-text-color: #505050;
}

h3 {
    font-size: 20px;
}

.text-primary {
    color: var(--concerto-primary-text-color) !important;
}

.text-secondary {
    color: var(--concerto-secondary-text-color) !important;
}

.text-muted {
    color: var(--concerto-secondary-text-color) !important;
}

.text-white {
    color: var(--concerto-primary-text-color) !important;
}

/* ---- Placeholder des inputs de recherche d'itinéraire ---- */
input::placeholder {
    color: var(--concerto-secondary-text-color) !important;
}

/* ---- En-tête principal ---- */
#sp-header-default, #sp-navbar {
    background-color:transparent !important;
}

#sp-header {
    box-shadow: none;
}

.sp-header-container.border-bottom{
    border: none !important;
}

/* ---- Barre de recherche ---- */
#search {
    border: none;
}

#search .fa-search,
#search .fa-directions {
    color: var(--concerto-secondary-text-color) !important;

}

/* ---- Contrôles Mapbox (-/+) ---- */
.mapboxgl-ctrl-group {
    border-color: var(--concerto-primary-color) !important;
}

/* ---- Boutons d'action ---- */
.btn-primary,
.btn-secondary {
    color: var(--concerto-primary-text-color) !important;
    height: 40px;
    padding: 0px 28px;
    border-radius: 25px !important;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.btn-primary {
    background-color: var(--concerto-primary-color);
    border: none;
}

.btn-secondary {
    background-color: white;
    border: 1px solid var(--concerto-primary-color);
    color: var(--concerto-primary-color);
}

/* ---- Vue détails ---- */
#sp-container-content #search {
    background-color: var(--concerto-primary-color) !important;
}

#sp-header-details .return .text-primary,
#sp-header-details .search .text-primary,
#sp-header-search .fas,
#sp-header-direction .input-group-text .text-primary {
    color: var(--concerto-secondary-text-color) !important;
}

/* ---- Résultats de recherche ---- */
#search-results .card-header {
    background-color: var(--concerto-primary-color) !important;
}

#search-results .card-body .title {
    font-size: 16px;
    font-weight: 500;
}

#search-results .card-body .text {
    font-size: 14px;
    font-weight: 400;
}

/* ---- Mode itinéraire ---- */
#sp.mode-direction #sp-header-direction,
#sp.mode-direction #sp-header-direction .input-group-text {
    background-color: var(--concerto-primary-color) !important;
}

#sp.mode-direction #sp-header-direction .active {
    color: var(--concerto-primary-color) !important;
}

/* ---- Étapes de navigation ---- */
#steps-container .leg-step {
    color: var(--concerto-secondary-text-color) !important;
}

#steps-container .leg-steps-progress-line {
    background-color: var(--concerto-primary-color) !important;
}

/* ---- Instructions d'itinéraire ---- */
#route-instructions a {
    color: var(--concerto-primary-color);
}

/* ---- Mode simulation ---- */
.mode-simulation #sp-container-content .controls {
    background-color: var(--concerto-primary-color) !important;
}

.mode-simulation #sp-container-content .controls .simulation-next,
.mode-simulation #sp-container-content .controls .simulation-previous {
    color: var(--concerto-secondary-text-color) !important;
}

/* ---- Cacher le logo Sweepin ---- */
.sweepin-watermark {
    display: none;
}

/* ---- Spinner ---- */
.spinner-border {
    border-color: var(--concerto-primary-color);
    border-right-color: white;
}

/* ---- Dioalog ---- */
.modal-content {
    border-radius: 25px;
}

.modal-footer {
    border: none
}