/* 📄 /assets/css/register.css */

/*
   Ce fichier s'appuie sur et surcharge les styles définis dans
   /assets/css/style.css.
   Il NE DOIT PAS contenir de variables ni de styles généraux déjà définis ailleurs.
*/

/* ------------------------------------------------------------- */
/* 📝 STYLES SPÉCIFIQUES À LA PAGE INSCRIPTION (register.php) */
/* ------------------------------------------------------------- */

/* Conteneur principal de la page d'inscription */
.register-page.container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    max-width: 700px; /* Largeur optimale pour un formulaire d'inscription détaillé */
}

/* Carte principale du formulaire */
.register-page .register-card.card {
    background: var(--background-soft);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 25px;
}
.register-page .register-card .card-body {
    padding: 0 !important; /* Le padding est sur le .register-card */
}

/* Titre principal de la page */
.register-page .page-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--primary);
}
.register-page .page-title .fa-solid {
    margin-right: 0.6rem;
    color: var(--primary);
}

/* Boutons de connexion sociale */
.register-page .register-social .btn {
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}
.register-page .register-social .google-btn {
    color: var(--text-main);
    border-color: var(--border-color);
    background-color: transparent;
}
.register-page .register-social .google-btn:hover {
    background-color: var(--background);
    border-color: var(--primary);
    color: var(--primary);
}
.register-page .register-social .facebook-btn {
    color: white;
    background-color: #1877f2; /* Couleur Facebook */
    border-color: #1877f2;
}
.register-page .register-social .facebook-btn:hover {
    background-color: #166fe5;
    border-color: #166fe5;
}
.register-page .register-social .facebook-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #1877f2 !important;
    border-color: #1877f2 !important;
    color: white !important;
}


/* Séparateur "OU" */
.register-page .divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.register-page .divider::before,
.register-page .divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}
.register-page .divider:not(:empty)::before {
    margin-right: .5em;
}
.register-page .divider:not(:empty)::after {
    margin-left: .5em;
}


/* Formulaire d'inscription */
.register-page .register-form .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.register-page .register-form .form-label .fa-solid {
    color: var(--text-muted);
    font-size: 1.1em;
}
.register-page .register-form .form-control,
.register-page .register-form .form-select,
.register-page .register-form textarea.form-control {
    border-radius: 10px;
    border-color: var(--border-color);
    background-color: var(--background);
    color: var(--text-main);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    width: 100%; /* S'assure de la pleine largeur */
}
.register-page .register-form .form-control:focus,
.register-page .register-form .form-select:focus,
.register-page .register-form textarea.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3);
}

/* Texte d'aide (small.form-text) */
.register-page .register-form .form-text {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.register-page .register-form .form-text .fa-solid {
    color: var(--text-muted);
}

/* Validation Feedback */
.register-page .invalid-feedback {
    font-size: 0.85rem;
    color: var(--error);
    margin-top: 0.25rem;
    display: none; /* Affiché par JS/Bootstrap quand .is-invalid */
}
.register-page .form-control.is-invalid,
.register-page .form-select.is-invalid,
.register-page textarea.is-invalid {
    border-color: var(--error) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--error-rgb),.25) !important;
}
.register-page .form-control.is-valid,
.register-page .form-select.is-valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb),.25) !important;
}
.register-page .form-check-input.is-invalid ~ .form-check-label {
    color: var(--error);
}
.register-page .form-check-input.is-invalid {
    border-color: var(--error);
}


/* Champs spécifiques aux commerçants (#merchant-fields) */
.register-page #merchant-fields {
    background-color: var(--background); /* Fond différent pour cette section */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 1.5rem !important; /* Marge supérieure pour séparer du rôle */
}
.register-page #merchant-fields .section-subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 1rem;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.register-page #merchant-fields .section-subtitle .fa-solid {
    color: var(--primary);
}
.register-page #merchant-fields p.text-muted.small {
    font-size: 0.85rem;
    color: var(--text-muted) !important;
    margin-bottom: 1.5rem;
}

/* Input group pour le sous-domaine */
.register-page .input-group .form-control {
    border-radius: 0 10px 10px 0; /* Uniquement coin droit arrondi */
}
.register-page .input-group .input-group-text {
    background-color: var(--background);
    border-color: var(--border-color);
    color: var(--text-muted);
    border-radius: 10px 0 0 10px; /* Uniquement coin gauche arrondi */
    padding: 0.75rem 1rem;
    font-size: 1rem;
}
/* Prévisualisation du sous-domaine */
.register-page #subdomain-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.register-page #subdomain-preview span {
    font-weight: 600;
    color: var(--primary);
}
.register-page #subdomain-preview .fa-solid {
    color: var(--text-muted);
}


/* Checkbox d'acceptation des CGU */
.register-page .form-check-label {
    font-size: 0.95rem;
    color: var(--text-main);
}
.register-page .form-check-label .fa-solid {
    margin-right: 0.5rem;
    color: var(--primary);
}
.register-page .form-check-label a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}
.register-page .form-check-label a:hover {
    text-decoration: underline;
    color: var(--secondary);
}


/* Bouton S'inscrire */
.register-page .register-form .btn-primary.btn-lg {
    background-color: var(--primary);
    color: white;
    font-size: 1.2rem;
    padding: 0.9rem 2rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
}
.register-page .register-form .btn-primary.btn-lg:hover {
    background-color: var(--primary-hover);
}


/* ------------------------------------------------------------- */
/* 📱 RESPONSIVE (Ajustements pour les petits écrans - < 768px) */
/* ------------------------------------------------------------- */

@media (max-width: 768px) {
    .register-page.container {
        padding: 1.5rem;
        max-width: 100%;
    }

    .register-page .register-card.card {
        padding: 20px;
        border-radius: 12px;
    }

    .register-page .page-title {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }

    /* Boutons sociaux */
    .register-page .register-social .btn {
        font-size: 0.95rem;
        padding: 0.7rem 1.2rem;
    }

    /* Champs de formulaire */
    .register-page .register-form .form-label {
        font-size: 0.9rem;
    }
    .register-page .register-form .form-control,
    .register-page .register-form .form-select,
    .register-page .register-form textarea.form-control {
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
    }
    .register-page .register-form .form-text {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }

    /* Colonnes du formulaire s'empilent */
    .register-page .row.g-3 > div[class*="col-md-"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .register-page .row.g-3 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .register-page .row.g-3 > div[class*="col-md-"] {
        padding-left: var(--bs-gutter-x, 0.75rem) !important;
        padding-right: var(--bs-gutter-x, 0.75rem) !important;
    }


    /* Champs spécifiques aux marchands */
    .register-page #merchant-fields {
        padding: 15px;
        border-radius: 10px;
    }
    .register-page #merchant-fields .section-subtitle {
        font-size: 1.05rem;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
    .register-page #merchant-fields p.text-muted.small {
        font-size: 0.8rem;
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }

    /* Input group pour le sous-domaine sur mobile */
    .register-page .input-group {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .register-page .input-group .form-control {
        border-radius: 8px 8px 0 0 !important;
    }
    .register-page .input-group .input-group-text {
        border-radius: 0 0 8px 8px !important;
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        white-space: normal !important;
        height: auto !important;
        margin-top: 0 !important; /* Supprime l'espace entre l'input et le suffixe */
        border-top: none !important; /* Retire la bordure du haut du suffixe pour le joindre */
    }
    .register-page #subdomain-preview {
        font-size: 0.85rem;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    .register-page #subdomain-preview .fa-solid {
        flex-shrink: 0;
    }


    /* Checkbox d'acceptation des CGU */
    .register-page .form-check-label {
        font-size: 0.9rem;
        flex-wrap: wrap;
        text-align: left;
        justify-content: flex-start;
    }
    .register-page .form-check-input {
        flex-shrink: 0;
    }
    .register-page .form-check-label a {
        display: block;
        margin-top: 5px;
    }


    /* Bouton S'inscrire */
    .register-page .register-form .btn-primary.btn-lg {
        font-size: 1.1rem;
        padding: 0.8rem 1.5rem;
    }
}


/* ------------------------------------------------------------- */
/* 🌙 MODE SOMBRE (Adaptation des styles pour dark-theme) */
/* ------------------------------------------------------------- */

.dark-theme .register-page .register-card.card {
    background: var(--background-soft);
    border-color: var(--border-color);
    box-shadow: var(--shadow);
}

.dark-theme .register-page .page-title {
    color: var(--primary);
}
.dark-theme .register-page .page-title .fa-solid {
    color: var(--primary);
}


.dark-theme .register-page .register-social .google-btn {
    color: var(--text-main);
    border-color: var(--border-color);
    background-color: transparent;
}
.dark-theme .register-page .register-social .google-btn:hover {
    background-color: var(--background);
    border-color: var(--primary);
    color: var(--primary);
}
/* Facebook reste le même */


.dark-theme .register-page .divider {
    color: var(--text-muted);
}
.dark-theme .register-page .divider::before,
.dark-theme .register-page .divider::after {
    border-bottom-color: var(--border-color);
}


.dark-theme .register-page .register-form .form-label {
    color: var(--text-main);
}
.dark-theme .register-page .register-form .form-label .fa-solid {
    color: var(--text-muted);
}
.dark-theme .register-page .register-form .form-control,
.dark-theme .register-page .register-form .form-select,
.dark-theme .register-page .register-form textarea.form-control {
    border-color: var(--border-color);
    background-color: var(--background);
    color: var(--text-main);
}
.dark-theme .register-page .register-form .form-control:focus,
.dark-theme .register-page .register-form .form-select:focus,
.dark-theme .register-page .register-form textarea.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.3);
}

.dark-theme .register-page .register-form .form-text {
    color: var(--text-muted);
}
.dark-theme .register-page .register-form .form-text .fa-solid {
    color: var(--text-muted);
}

.dark-theme .register-page .invalid-feedback {
    color: var(--error);
}
.dark-theme .register-page .form-control.is-valid,
.dark-theme .register-page .form-select.is-valid {
    border-color: var(--success) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--success-rgb),.25) !important;
}


/* Champs spécifiques aux marchands en mode sombre */
.dark-theme .register-page #merchant-fields {
    background-color: var(--background);
    border-color: var(--border-color);
}
.dark-theme .register-page #merchant-fields .section-subtitle {
    color: var(--text-main);
}
.dark-theme .register-page #merchant-fields .section-subtitle .fa-solid {
    color: var(--primary);
}
.dark-theme .register-page #merchant-fields p.text-muted.small {
    color: var(--text-muted) !important;
}

.dark-theme .register-page .input-group .form-control {
    border-color: var(--border-color);
    background-color: var(--background);
    color: var(--text-main);
}
.dark-theme .register-page .input-group .input-group-text {
    background-color: var(--background);
    border-color: var(--border-color);
    color: var(--text-muted);
}
.dark-theme .register-page #subdomain-preview span {
    color: var(--primary);
}


/* Checkbox CGU en mode sombre */
.dark-theme .register-page .form-check-label {
    color: var(--text-main);
}
.dark-theme .register-page .form-check-label .fa-solid {
    color: var(--primary);
}
.dark-theme .register-page .form-check-label a {
    color: var(--primary);
}
.dark-theme .register-page .form-check-label a:hover {
    color: var(--secondary);
}


/* Bouton S'inscrire en mode sombre */
.dark-theme .register-page .register-form .btn-primary.btn-lg {
    background-color: var(--primary);
    color: white;
}
.dark-theme .register-page .register-form .btn-primary.btn-lg:hover {
    background-color: var(--primary-hover);
}