@import url('https://fonts.cdnfonts.com/css/br-sonoma');

:root {

    /* -- Palette -- */

    --invalid-error-dark: #FF3344;
    --gray-light: #E7E7E7;
    --gray-border-light: #B0B0B0;
    --link-color-light: #0d6efd;
    --link-color-dark: #99c3ff;
    /* Palette Tema Rosso Principale Chiaro */
    /* Palette di default */
    --main-red: #A7393B;
    --main-red-rgb: 167, 57, 59;
    --main-white: #FEF8EC;
    --main-white-rgb: 254, 248, 236;
    --main-bg-light: var(--main-white);
    --main-text-light: #141414;

    /* Palette Tema Rosso Principale Scuro */ 
    --main-bg-dark: var(--main-text-light);
    --main-text-dark: var(--main-bg-light);

    /* Palette Tema Verde Secondario Chiaro */
    --secondary-green: #34642E;
    --secondary-green-rgb: 52, 100, 46;
    --secondary-white: #ECF9D8;
    --secondary-white-rgb: 236, 249, 216;
    --secondary-bg-light: var(--secondary-white);
    --secondary-text-light: #201D1D;

    /* Palette Tema Verde Secondario Scuro */
    --secondary-bg-dark: var(--secondary-text-light);
    --secondary-text-dark: var(--secondary-bg-light);

    /* -- Dichiarazione variabili del tema -- */

    /* Tema Corrente impostato al default */
    --current-theme-bg: var(--main-red);
    --current-theme-bg-rgb: var(--main-red-rgb);
    --current-theme-text: var(--main-white);
    --current-theme-text-rgb: var(--main-white-rgb);
    --current-mode-theme-bg-light: var(--main-bg-light);
    --current-mode-theme-text-light: var(--main-text-light);
    --current-mode-theme-bg-dark: var(--main-bg-dark);
    --current-mode-theme-text-dark: var(--main-text-dark);

    /* Colori del tema principale / Secondario immutabili */
    --theme-bg: var(--current-theme-bg);
    --theme-bg-rgb: var(--current-theme-bg-rgb);
    --theme-text: var(--current-theme-text);
    --theme-text-rgb: var(--current-theme-text-rgb);
    
    /* Colori del tema principale / Secondario mutabili chiaro e scuro */
    --mode-theme-bg: var(--current-mode-theme-bg-light);
    --mode-theme-text: var(--current-mode-theme-text-light);
    --mode-invalid-error: var(--main-red);
    --mode-theme-gray: var(--gray-light);
    --mode-border-gray: var(--gray-border-light);
    --mode-theme-link-color: var(--link-color-light);
    --mode-alert-bg: var(--bs-dark-bg-subtle);
    --mode-alert-border: var(--bs-dark-border-subtle);

    transition: background-color 0.3s;
}

/* Selezionato il tema secondario */
:root[data-theme="secondary"] {
    --current-theme-bg: var(--secondary-green);
    --current-theme-bg-rgb: var(--secondary-green-rgb);
    --current-theme-text: var(--secondary-white);
    --current-theme-text-rgb: var(--secondary-white-rgb);
    --current-mode-theme-bg-light: var(--secondary-bg-light);
    --current-mode-theme-text-light: var(--secondary-text-light);
    --current-mode-theme-container-border-light: var(--secondary-container-border-light);
    --current-mode-theme-container-fill-light: var(--secondary-container-fill-light);
    --current-mode-theme-bg-dark: var(--secondary-bg-dark);
    --current-mode-theme-text-dark: var(--secondary-text-dark);
    --current-mode-theme-container-border-dark: var(--secondary-container-border-dark);
    --current-mode-theme-container-fill-dark: var(--secondary-container-fill-dark);
    --current-mode-theme-link-color-light: var(--secondary-link-color);
    --current-mode-theme-link-color-dark: var(--secondary-link-color-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --mode-theme-bg: var(--current-mode-theme-bg-dark);
    --mode-theme-text: var(--current-mode-theme-text-dark);
    --mode-invalid-error: var(--invalid-error-dark);
    --mode-theme-gray: var(--current-mode-theme-bg-dark);
    --mode-border-gray: var(--current-mode-theme-text-dark);
    --mode-theme-link-color: var(--link-color-dark);
    --mode-alert-bg: var(--bs-light-bg-subtle);
    --mode-alert-border: var(--bs-light-border-subtle);
  }
}

/* Colori del background e del contenuto che non variano tra chiaro e scuro */
.theme-bg-text {
    color: var(--theme-text) !important;
    background-color: var(--theme-bg) !important;
}

.theme-text {
    color: var(--theme-text);
}

/* Colori del background e del contenuto che variano tra chiaro e scuro */
.mode-bg-text {
    color: var(--mode-theme-text);
    background-color: var(--mode-theme-bg);
}

.mode-text {
    color: var(--mode-theme-text);
}

.mode-danger {
    color: var(--mode-theme-text);
    border: solid 2px var(--mode-theme-text);
    background-color: var(--mode-theme-bg);
}

.mode-gray {
    background-color: var(--mode-theme-gray);
}
.mode-container {
    border-color: var(--mode-border-gray) !important; /* "!important" is needed in order to override bootstrap's default border color */
    background-color: var(--mode-theme-gray);
}

.mode-input-border-color {
    border-color: var(--mode-theme-text);
}

.mode-link-color {
    color: var(--mode-theme-link-color);
}

.mode-alert {
    background-color: var(--mode-alert-bg);
    border-color: var(--mode-alert-border);
}

/* Classi simil-bootstrap custom */

.border-mode-text {
    border-color: var(--mode-theme-text);
}

.border-mode-gray {
    border-color: var(--mode-border-gray) !important;
}

.border-solid {
    border-style: solid;
}

.border-b-2 {
    border-bottom: 2px solid;
}

.check-btn {
    position: absolute;
    opacity: 0;
    width: 0;
}

.close-btn {
    background-color: transparent;
    margin-left: auto;
    border: 0;
}

.invalid-feedback, .form-error {
    color: var(--mode-invalid-error);
}

.preview-theme {
    height: 80px;
    border-radius: 15px;
    margin-bottom: 5px;
}

.preview-theme-primary {
    background: linear-gradient(to right, var(--main-red) 50%, var(--main-white) 50%);
}

.preview-theme-secondary {
    background: linear-gradient(to right, var(--secondary-green) 50%, var(--secondary-white) 50%);
}

.preview-theme-card {
    text-align: center;
    border: 2px var(--mode-theme-text) solid;
    border-radius: 15px;
    padding: 5px;
    cursor: pointer;
}
.check-btn:checked + .preview-theme-card {
    border-color: var(--theme-bg);
}
.icon-success {
    color: #1f751e;
}

.icon-danger {
    color: #9e3030;
}

/* Comportamenti custom */

a.nav-link.theme-text:hover {
    color: rgba(var(--theme-text-rgb), 0.9);
}

.btn.theme-bg-text:hover, .btn.theme-bg-text:focus-visible {
    color: var(--theme-text);
    background-color: rgba(var(--theme-bg-rgb), 0.9);
}

.btn.mode-danger:hover, .form-control:focus, .form-select:focus, .nav-link:focus {
    border-color: var(--mode-theme-text);
}

.btn:focus-visible, .nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem var(--mode-theme-text);
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--theme-bg-rgb), 0.8);
}

nav .nav-link:focus-visible, header .nav-link:focus-visible {
    box-shadow: 0 0 0 .25rem var(--theme-text);
}
nav .nav-link:focus, header .nav-link:focus {
    color: var(--theme-text);
}

#booking-message {
    color: var(--main-text-light);
}

/* Css Custom */

body {
    font-family: 'BR Sonoma', sans-serif;
}

/* Classi custom per implementare il comportamento con i BreakPoint di Bootstrap
    non presenti di default */
@media (min-width: 768px) {

    .static-md {
        position: static;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: auto;
    }

    .lesson-card-md {
        background-color: transparent;
        border-color: var(--mode-theme-text) !important;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid;
        border-radius: 0 !important;
    }

    .border-md-0 {
        border: 0;
    }

    #booking-params {
        min-height: 150px;
    }

}