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

:root {
    --concerto-primary-color: #f4cb41;
    --concerto-primary-rgb: 244, 203, 65;
    --concerto-primary-text-color: #333333;
    --concerto-secondary-text-color: #505050;

    /* Bootstrap 5 : utilitaires, liens et couleurs de texte. */
    --bs-primary: var(--concerto-primary-color);
    --bs-primary-rgb: var(--concerto-primary-rgb);
    --bs-body-color: var(--concerto-primary-text-color);
    --bs-body-color-rgb: 51, 51, 51;
    --bs-secondary-color: var(--concerto-secondary-text-color);
    --bs-secondary-color-rgb: 80, 80, 80;
    --bs-link-color: var(--concerto-primary-text-color);
    --bs-link-color-rgb: 51, 51, 51;
    --bs-link-hover-color: var(--concerto-secondary-text-color);
    --bs-link-hover-color-rgb: 80, 80, 80;
    --bs-box-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.08);
    --bs-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

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-navbar {
    border-bottom-color: white !important;
}

#sp-header-direction .input-group-text .text-primary {
    opacity: 0%;
}


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

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

#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;
}

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

/* ---- Boutons d'action ---- */
.btn-primary,
.btn-secondary {
    color: var(--concerto-primary-text-color) !important;
    min-height: 40px;
    padding: 8px 28px !important;
    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);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active{
    opacity: 0.8;
    background-color: var(--concerto-primary-color);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    opacity: 0.8;
    background-color: white;
    border: 1px solid 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;
}

.mode-simulation .card-control {
    background-color: var(--concerto-primary-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
}

a {
   color: var(--concerto-primary-color);
}

a:hover {
   color: var(--concerto-primary-color);
}

/* ---- Compatibilité avec les composants Bootstrap 5 du viewer ---- */
.btn-primary,
.btn-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--concerto-primary-text-color);
    --bs-btn-hover-color: var(--concerto-primary-text-color);
    --bs-btn-active-color: var(--concerto-primary-text-color);
    --bs-btn-disabled-color: var(--concerto-secondary-text-color);
    --bs-btn-border-color: var(--concerto-primary-color);
    --bs-btn-hover-border-color: var(--concerto-primary-color);
    --bs-btn-active-border-color: var(--concerto-primary-color);
    --bs-btn-disabled-border-color: var(--concerto-primary-color);
    --bs-btn-focus-shadow-rgb: var(--concerto-primary-rgb);
}

.btn-primary,
.btn-outline-primary {
    --bs-btn-hover-bg: var(--concerto-primary-color);
    --bs-btn-active-bg: var(--concerto-primary-color);
}

.btn-primary {
    --bs-btn-bg: var(--concerto-primary-color);
    --bs-btn-disabled-bg: var(--concerto-primary-color);
}

.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-disabled-bg: #fff;
}

/* Neutraliser les dégradés bleus ajoutés par le viewer. */
.bg-primary.bg-gradient,
#sp .btn-primary:not(.btn-warning),
.modal .btn-primary {
    background-image: none !important;
}

#sp .btn-primary:not(.btn-warning),
.modal .btn-primary {
    box-shadow: var(--bs-box-shadow-sm);
}

.viewer-icon {
    color: var(--concerto-primary-text-color);
    background: #fff8df;
}

.viewer-icon-hero,
.viewer-promo {
    background: linear-gradient(145deg, #fff, #fff8df);
    box-shadow: var(--bs-box-shadow-sm);
}

/* Les profils sont maintenant sélectionnés par .btn-check:checked + label. */
#outdoor_profile .profile-btn {
    --bs-btn-color: var(--concerto-primary-text-color);
    --bs-btn-border-color: var(--concerto-primary-text-color);
    --bs-btn-hover-color: var(--concerto-primary-text-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--concerto-primary-text-color);
    --bs-btn-active-color: var(--concerto-primary-text-color);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: var(--concerto-primary-text-color);
    --bs-btn-focus-shadow-rgb: 51, 51, 51;
}

#routing-settings .form-check-input:checked {
    background-color: var(--concerto-primary-color);
    border-color: var(--concerto-secondary-text-color);
}

#routing-settings .form-check-input:focus {
    border-color: var(--concerto-secondary-text-color);
    box-shadow: 0 0 0 0.25rem rgba(var(--concerto-primary-rgb), 0.35);
}

#routing-settings .form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23505050'/%3e%3c/svg%3e");
}

#steps-container .leg-step.active {
    background-color: var(--concerto-primary-color);
}

/* Préserver la lisibilité sur les fonds sombres de la simulation. */
.mode-simulation .simulation-instructions .bg-dark,
.mode-simulation .simulation-help-text.text-white {
    color: #fff !important;
}