/**
 * bcPRISME SMS Login – frontend
 * v2.6.0
 */

/* ------------------------------------------------------------
   BLOC
------------------------------------------------------------ */

.bcpl-box {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background: #fafafa;
}

.bcpl-box h3 {
    margin-top: 0;
}

/* ------------------------------------------------------------
   MESSAGES
------------------------------------------------------------ */

#bcpl_message,
#bcpl_ma_message {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 3px;
    border-left: 3px solid transparent;
}

#bcpl_message.bcpl-error,
#bcpl_ma_message.bcpl-error {
    color: #b30000;
    background: #fdf2f2;
    border-left-color: #b30000;
}

#bcpl_message.bcpl-success,
#bcpl_ma_message.bcpl-success {
    color: #1a6b1a;
    background: #f2faf2;
    border-left-color: #1a6b1a;
}

/* ------------------------------------------------------------
   CHAMPS
------------------------------------------------------------ */

#bcpl-gate input[type="text"],
#bcpl-ma-gate input[type="text"],
#bcpl-ma-gate input[type="email"],
#bcpl-ma-gate input[type="tel"] {
    display: block;
    margin-bottom: 8px;
    max-width: 320px;
}

#bcpl_code,
#bcpl_ma_code {
    max-width: 120px;
    letter-spacing: 0.4em;
    font-size: 1.2em;
    text-align: center;
}

#bcpl-gate .button,
#bcpl-ma-gate .button {
    margin-top: 5px;
}

/* Bouton en cours de requête */
.button.bcpl-busy,
.button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ------------------------------------------------------------
   LIENS
------------------------------------------------------------ */

.bcpl-skip {
    margin-top: 10px;
    font-size: 0.9em;
}

.bcpl-skip a {
    text-decoration: underline;
    cursor: pointer;
}

.bcpl-resend {
    margin-top: 10px;
    font-size: 0.9em;
}

.bcpl-resend a {
    text-decoration: underline;
    cursor: pointer;
}

.bcpl-resend a.bcpl-disabled {
    color: #888;
    text-decoration: none;
    cursor: default;
}

/* ------------------------------------------------------------
   TUNNEL MASQUÉ

   #customer_details et sa colonne de gauche restent visibles :
   c'est là que le JS déplace le bloc d'identification. On masque
   uniquement les groupes de champs et le paiement, pour que le
   récapitulatif « Votre commande » garde sa place à droite.
------------------------------------------------------------ */

form.checkout.bcpl-hidden-until-verified .woocommerce-billing-fields,
form.checkout.bcpl-hidden-until-verified .woocommerce-shipping-fields,
form.checkout.bcpl-hidden-until-verified .woocommerce-additional-fields,
form.checkout.bcpl-hidden-until-verified .woocommerce-account-fields,
form.checkout.bcpl-hidden-until-verified #payment,
form.checkout.bcpl-hidden-until-verified .woocommerce-checkout-payment {
    display: none !important;
}

/* Conservée pour compatibilité : une seule déclaration, la règle
   était dupliquée avec deux opacités différentes. */
.bcpl-disabled-until-verified {
    opacity: 0.5;
    pointer-events: none;
}

/* ------------------------------------------------------------
   BLOC D'IDENTIFICATION
------------------------------------------------------------ */

/* Position par défaut, avant déplacement par le JS (ou si le
   balisage du thème ne permet pas le déplacement). */
#bcpl-gate {
    max-width: 560px;
    margin: 30px auto;
    padding: 25px;
}

/* Espace client : bloc autonome, même présentation que le checkout. */
#bcpl-ma-gate {
    max-width: 560px;
    margin: 30px auto;
    padding: 25px;
}

#bcpl-ma-gate #bcpl_create_form_ma {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Invisible le temps que le JS le déplace et calcule son décalage.
   visibility plutôt que display : le bloc doit rester mesurable. */
#bcpl-gate.bcpl-pending {
    visibility: hidden;
}

/* Une fois placé dans la colonne de gauche, il en prend la largeur.
   La marge haute est posée par le JS pour le centrage vertical. */
#bcpl-gate.bcpl-in-column {
    max-width: none;
    margin: 0 0 30px 0;
}

/* Transition activée seulement après le placement initial : sinon
   le premier positionnement serait animé sous les yeux du client. */
#bcpl-gate.bcpl-in-column.bcpl-ready {
    transition: margin-top 0.25s ease;
}

/* ------------------------------------------------------------
   FORMULAIRE DE CRÉATION
------------------------------------------------------------ */

.bcpl-row {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.bcpl-field {
    flex: 1;
}

.bcpl-field label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.bcpl-field input {
    width: 100% !important;
    margin-bottom: 0 !important;
}

@media (max-width: 600px) {
    .bcpl-row {
        flex-direction: column;
    }
}

/* ------------------------------------------------------------
   MENTION DE VALIDITÉ
------------------------------------------------------------ */

.bcpl-hint {
    margin-top: 8px;
    font-size: 0.85em;
    color: #666;
}

/* Champ déjà vérifié par code : lecture seule */
.bcpl-locked {
    background: #f0f0f0;
    color: #555;
    cursor: not-allowed;
}