/**
 * Ma Literie Francaise - correctifs du tunnel de commande.
 *
 * Bloc "Creer un compte" (module thecheckout).
 *
 * Deux defauts corriges ici :
 *  1. Le bloc est insere dans la grille flexible des champs SANS largeur : son
 *     libelle s'ecrasait en colonne etroite et chevauchait le titre "Contact"
 *     et le champ e-mail.
 *  2. Le <span class="label"> herite du style des champs de saisie du theme
 *     (bordure, coin arrondi, hauteur figee a 16px) : le texte, sur 2 ou 3
 *     lignes, debordait de cette boite et le trait barrait la phrase.
 *
 * Le bloc n'apparait que depuis l'activation de la commande invite, qui rend
 * le mot de passe facultatif.
 */

body#checkout.thecheckout-module #tc-container #create_account.form-group.checkbox,
#create_account.form-group.checkbox {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: .35rem 0 1.1rem !important;
    padding: 0 !important;
}

#create_account.form-group.checkbox > label {
    display: block;
    width: 100%;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

#create_account.form-group.checkbox .custom-checkbox {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
}

#create_account.form-group.checkbox .custom-checkbox > input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: .2rem;
}

/*
 * Le libelle est du texte, pas un champ : on retire tout l'habillage de saisie.
 *
 * ATTENTION a la specificite. Le theme applique, en !important, un habillage de
 * faux carre de case a cocher a TOUS les enfants directs de .custom-checkbox :
 *   body#checkout.thecheckout-module #tc-container .custom-checkbox > span
 *   { height:16px !important; border:1px solid #c9ced8 !important; ... }
 * Or span.label est lui aussi un enfant direct : il heritait de la boite de
 * 16px de haut, dont le trait barrait la phrase. On ne vise QUE span.label,
 * pour laisser intact le vrai faux-carre (le span sans classe qui suit l'input).
 */
body#checkout.thecheckout-module #tc-container #create_account .custom-checkbox > span.label,
#create_account.form-group.checkbox .custom-checkbox .label,
#create_account.form-group.checkbox span.label {
    flex: 1 1 auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: left !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* Mobile : un peu d'air avant l'etape "2 Livraison". */
@media (max-width: 767px) {
    body#checkout.thecheckout-module #tc-container #create_account.form-group.checkbox,
    #create_account.form-group.checkbox {
        margin-bottom: 1.4rem !important;
    }
}