body, html {
    background-image: url('/img/salle.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    margin: 0;
    position: relative;
    font-family: 'Proxima N W01 Reg', sans-serif;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
}

/* --- SBP Brand colors for buttons --- */
.btn.btn-primary {
    background-color: var(--sbp-orange) !important;
    border-color: var(--sbp-orange) !important;
    color: #fff !important;
}

.btn.btn-primary:hover, 
.btn.btn-primary:active, 
.btn.btn-primary:focus {
    background-color: var(--sbp-orange-dark) !important;
    border-color: var(--sbp-orange-dark) !important;
}

.btn.btn-light-primary {
    color: var(--sbp-orange) !important;
    border-color: var(--sbp-orange) !important;
    background-color: transparent !important;
}

.btn.btn-light-primary:hover, 
.btn.btn-light-primary:active, 
.btn.btn-light-primary:focus {
    color: #fff !important;
    background-color: var(--sbp-orange) !important;
    border-color: var(--sbp-orange) !important;
}

/* --- Fix for required field indicator position --- */
/* This hides the default, misplaced star from CakePHP's FormHelper */
.form-label:after {
    display: none;
}
/* This adds the star correctly after the label text for required fields */
.fv-row label.required:after {
    content: ' *';
    color: var(--bs-danger);
}

/* --- Styles pour le Wizard --- */
.wizard-container {
    max-width: 800px;
    margin: 40px auto;
    background-color: white;
    padding: 40px;
    border-radius: 8px;
}
.wizard-header {
    text-align: center;
    margin-bottom: 40px;
}
.wizard-header img {
    max-width: 150px;
}

/* =================================== */
/* === MOBILE-SPECIFIC STYLES  === */
/* =================================== */
@media (max-width: 767.98px) {
    .wizard-header {
        margin-bottom: 0 !important;
    }

    .wizard-container {
        margin: 1rem !important;
        padding: 1.5rem !important;
        width: calc(100% - 2rem) !important;
    }

    .wizard-container .card{
        margin-top: 0 !important;
        
    }
    .wizard-container .card-body{
        padding-top: 0 !important;
        
    }

    .wizard-container h1 {
        font-size: 1.5rem !important;
        text-align: center !important;
        margin-bottom: 0 !important;
    }

    /* Mobile-Friendly Stepper Transformation */
    .stepper .stepper-nav {
        counter-reset: stepper;
        display: flex;
        justify-content: space-around !important;
        padding: 0;
    }

    .stepper .stepper-nav .stepper-item .stepper-title {
        display: none !important;
    }

    .stepper.stepper-links .stepper-nav .stepper-item:after {
        display: none !important;
    }

    .stepper .stepper-nav .stepper-item {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background-color: #f3f6f9;
        position: relative;
        margin: 0;
        font-size: 0 !important; /* Hide unwanted text nodes inserted by JS */
    }

    .stepper .stepper-nav .stepper-item:before {
        content: counter(stepper);
        counter-increment: stepper;
        color: #a1a5b7;
        font-weight: 600;
        font-size: 1rem; /* Restore font-size for the number */
    }

    .stepper .stepper-nav .stepper-item.current {
        background-color: var(--sbp-orange);
    }
    .stepper .stepper-nav .stepper-item.current:before {
        color: #fff;
    }
    
    .stepper .stepper-nav .stepper-item.completed {
        background-color: var(--sbp-teal);
    }
    .stepper .stepper-nav .stepper-item.completed:before {
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        color: #fff;
        font-weight: 900;
        font-size: 1rem; /* Restore font-size for the checkmark */
    }

    /* --- Stepper layout fix for mobile --- */
    .stepper.stepper-links .stepper-nav {
        justify-content: center;
        padding-left: 5px;
        padding-right: 5px;
    }

    .stepper.stepper-links .stepper-nav .stepper-item {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin-left: 2px;
        margin-right: 2px;
    }

    .stepper.stepper-links .stepper-nav .stepper-item .stepper-title {
        font-size: 11px;
    }
    
    .stepper.stepper-links .stepper-nav .stepper-item:after {
        width: 10px;
    }

    #camera-container video{
        width: 100% !important;
    }
}



/*
 * Fix for required asterisk position (Override from plugin.bundle.js)
*/
/* First, hide the misplaced asterisk that Metronic/CakePHP applies to the container div */
#registration_form .required::after {
    display: none !important;
    content: "" !important;
}

/* Then, add the asterisk correctly to the label itself */
#registration_form .required > label::after {
    content: "*";
    font-weight: 700;
    color: #f1416c;
    padding-left: 0.25rem;
}