/* ============================================================
   REGISTRATION
   ============================================================ */

.registration-wrapper {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 3rem 1rem;
}


.registration-container {
    width: 100%;
    max-width: 920px;
}


.registration-logo {
    height: 90px;
    width: auto;
}


/* ============================================================
   STEPS
   ============================================================ */

.registration-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}


.registration-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    opacity: 0.45;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.registration-step.active {
    opacity: 1;
}

.registration-step.completed {
    opacity: 1;
}


.registration-step.completed
.registration-step-icon {
    color:
        var(--bs-success);

    background:
        rgba(var(--bs-success-rgb), 0.16);
}


.registration-step-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.5rem;

    background:
        var(--bs-secondary-bg);
}


.registration-step.active
.registration-step-icon {
    color:
        var(--bs-primary);

    background:
        rgba(var(--bs-primary-rgb), 0.16);
}


.registration-step-content {
    display: flex;
    flex-direction: column;
}


.registration-step-content small {
    font-size: 0.7rem;

    color:
        var(--bs-secondary-color);
}


.registration-step-content span {
    font-size: 0.875rem;
    font-weight: 500;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 767.98px) {

    .registration-wrapper {
        align-items: flex-start;

        padding-top: 2rem;
        padding-bottom: 2rem;
    }


    .registration-logo {
        height: 70px;
    }


    .registration-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }


    .registration-step {
        justify-content: center;
    }


    .registration-step-content {
        display: none;
    }


    .registration-step-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

}

/* ==========================================================
   OPTIONS / SPÉCIALITÉS
   ========================================================== */

.registration-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}


.registration-option {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 0.9rem 1rem;

    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        box-shadow 0.15s ease;
}


.registration-option:hover {
    border-color:
        var(--bs-primary);
}


.registration-option.selected {
    border-color:
        var(--bs-primary);

    background:
        rgba(var(--bs-primary-rgb), 0.08);

    box-shadow:
        0 0 0 1px
        rgba(var(--bs-primary-rgb), 0.15);
}


.registration-option-name {
    font-weight: 500;
    line-height: 1.25;
}


.registration-option .form-check-input {
    flex: 0 0 auto;
    margin: 0;
}


.registration-option.disabled {
    opacity: 0.45;
    cursor: not-allowed;
}


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

@media (max-width: 767.98px) {

    .registration-options-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RENDEZ-VOUS
   ============================================================ */

.registration-appointment-loading {
    min-height: 160px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 1rem;

    color: var(--bs-secondary-color);
}


.registration-slot-day {
    margin-bottom: 2rem;
}


.registration-slot-day:last-child {
    margin-bottom: 0;
}


.registration-slot-day-header {
    display: flex;
    align-items: center;

    gap: 0.65rem;

    margin-bottom: 1rem;

    font-size: 1rem;
    font-weight: 600;
}


.registration-slot-day-header i {
    color: var(--bs-primary);
}


.registration-slots-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 0.75rem;
}


.registration-slot {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 0.3rem;

    min-height: 82px;

    padding: 0.85rem;

    border: 1px solid var(--bs-border-color);

    border-radius: 0.65rem;

    background:
        var(--bs-paper-bg);

    color:
        var(--bs-body-color);

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.registration-slot:hover:not(:disabled) {
    border-color:
        var(--bs-primary);

    transform:
        translateY(-1px);
}


.registration-slot.selected {
    border-color:
        var(--bs-primary);

    background:
        rgba(
            var(--bs-primary-rgb),
            0.12
        );

    box-shadow:
        0 0 0 1px
        var(--bs-primary);
}


.registration-slot.full {
    opacity: 0.45;

    cursor: not-allowed;
}


.registration-slot-time {
    font-size: 1rem;

    font-weight: 600;
}


.registration-slot-availability {
    font-size: 0.78rem;

    font-weight: 500;
}


.registration-appointment-selection {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}


.registration-appointment-selection i {
    font-size: 2rem;
}


.registration-appointment-confirmed {
    display: flex;

    align-items: center;

    gap: 1.25rem;

    padding: 1.25rem;

    border: 1px solid
        rgba(
            var(--bs-success-rgb),
            0.25
        );

    border-radius: 0.75rem;

    background:
        rgba(
            var(--bs-success-rgb),
            0.08
        );
}


.registration-confirmed-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            var(--bs-success-rgb),
            0.15
        );

    color:
        var(--bs-success);
}


.registration-confirmed-icon i {
    font-size: 1.7rem;
}


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

@media (
    max-width: 991.98px
) {

    .registration-slots-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 767.98px
) {

    .registration-slots-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (
    max-width: 420px
) {

    .registration-slots-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .registration-appointment-confirmed {
        align-items:
            flex-start;
    }

}

/* ============================================================
   CONFIRMATION FINALE
   ============================================================ */

.registration-complete-icon {
    width: 82px;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            var(--bs-success-rgb),
            0.14
        );

    color:
        var(--bs-success);
}


.registration-complete-icon i {
    font-size: 3rem;
}


.registration-complete-appointment {
    padding: 1.5rem;

    border: 1px solid
        var(--bs-border-color);

    border-radius: 0.75rem;

    background:
        rgba(
            var(--bs-primary-rgb),
            0.035
        );
}


.registration-complete-detail {
    display: flex;

    align-items: center;

    gap: 0.9rem;
}


.registration-complete-detail > i {
    font-size: 1.5rem;

    color:
        var(--bs-primary);
}

/* ============================================================
   RENDEZ-VOUS - SÉLECTEURS
   ============================================================ */

.registration-appointment-fields-loading {
    opacity: 0.55;
    pointer-events: none;
}


.registration-appointment-selection {
    min-height: 48px;
}


.registration-appointment-selection-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            var(--bs-success-rgb),
            0.14
        );

    color:
        var(--bs-success);
}


.registration-appointment-selection-icon i {
    font-size: 1.55rem;
}


#registrationAppointmentDate,
#registrationAppointmentTime,
#registrationAppointmentCampaign {
    min-height: 46px;
}