/*********************************************** 
 * 🔷 CONFIG GLOBALE - PAGE COMPTE CLIENT
 ***********************************************/

/* Adapter la taille de la fenêtre du compte client */
body.woocommerce-account main .woocommerce {
    max-width: unset !important;
}

/* Cacher le lien de déconnexion dans la navigation */
.woocommerce-account.woocommerce-page li.woocommerce-MyAccount-navigation-link--customer-logout {
    display: none;
}

/* Cacher le bloc d'intro (.hero-intro) sur toutes les pages sauf Dashboard */
.woocommerce-account.woocommerce-page:not(.woocommerce-dashboard) .hero-intro {
    display: none;
}


/*********************************************** 
 * 🧭 NAVIGATION - STRUCTURE & AFFICHAGE
 ***********************************************/

/* Conteneur <ul> vertical par défaut */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Affichage responsive */
@media screen and (max-width:768px) {
    .woocommerce-account:not(.woocommerce-dashboard) .woocommerce-MyAccount-navigation ul {
        display: flex;
        width: auto;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        text-wrap: nowrap;
    }
}

/* Réinitialiser le padding des <li> */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li {
    padding: 0;
}

/* Liens du menu - bloc de navigation */
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-weight: 600;
    color: var(--wp--preset--color--liens-texte);
    background-color: var(--wp--preset--color--fond-alternatif);
    border: 1px solid var(--wp--preset--color--fond-alternatif);
    border-radius: 8px;
    text-align: left;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Hover & Active sur les liens du menu */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li.is-active a {
    color: var(--wp--preset--color--liens-hypertextes);
    border-color: var(--wp--preset--color--liens-hypertextes);
    text-decoration: none;
}


/*********************************************** 
 * 🎨 NAVIGATION - ICÔNES FONT AWESOME
 ***********************************************/

/* Style générique des icônes Font Awesome */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    /* style solid */
    font-size: 1rem;
    width: 1.2em;
    text-align: center;
    display: inline-block;
    color: var(--wp--preset--color--texte);
    transition: color 0.3s ease;
}

/* Couleur des icônes au survol ou si actif */
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li a:hover::before,
.woocommerce-account.woocommerce-page .woocommerce-MyAccount-navigation li.is-active a::before {
    color: var(--wp--preset--color--liens-hypertextes);
}

/* Icônes spécifiques par endpoint */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
    content: "\f015";
    /* fa-house */
}

.woocommerce-MyAccount-navigation-link--service-client a::before {
    content: "\f590";
    /* fa-headset */
}

.woocommerce-MyAccount-navigation-link--orders a::before {
    content: "\f07a";
    /* fa-box */
}

.woocommerce-MyAccount-navigation-link--listes a::before {
    content: "\f0ae";
    /* fa-list-check */
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: "\f019";
    /* fa-download */
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
    content: "\f3c5";
    /* fa-address-book */
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    content: "\f09d";
    /* fa-credit-card */
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
    content: "\f4ff";
    /* fa-user-cog */
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    content: "\f2f5";
    /* fa-sign-out-alt */
}


/*********************************************** 
 * 📊 TABLEAUX (commandes, téléchargements, etc.)
 ***********************************************/
.woocommerce-account table,
.woocommerce-account table *,
.woocommerce .woocommerce-customer-details address {
    border-color: var(--wp--preset--color--gris) !important;
}


/*********************************************** 
 * 🏠 DASHBOARD - STYLE DE LA PAGE D'ACCUEIL
 ***********************************************/

/* Cacher le contenu de l'onglet Dashboard */
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content {
    display: none !important;
}

/* Cacher l'onglet Dashboard du menu si sur la page dashboard */
.woocommerce-account.woocommerce-dashboard li.woocommerce-MyAccount-navigation-link--dashboard {
    display: none;
}

/* Adapter le layout du menu sur la page Dashboard */
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-navigation {
    float: unset;
    width: 100%;
}

/* Menu en ligne centré et responsive sur Dashboard */
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

/* Liens formatés comme des blocs égaux et centrés */
.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-navigation li a {
    height: 45px;
    width: 350px;
    display: block;
    text-align: center;
    align-content: center;
}


/*********************************************** 
 * 📨 ADRESSES > Affichage
 ***********************************************/
.woocommerce-edit-address header.woocommerce-Address-title.title {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--wp--preset--spacing--20);
}

.woocommerce-edit-address header.woocommerce-Address-title.title h2 {
    margin-block-start: 0px;
    margin-block-end: 0px;
}

.woocommerce-edit-address.woocommerce-account .addresses .title .edit {
    margin-bottom: 0px;
    background-color: var(--wp--preset--color--cta-principal-fond);
    color: var(--wp--preset--color--cta-principal-texte);
    padding: 5px 10px;
    border-radius: 8px;
    text-decoration: none;
    width: auto;
    text-wrap: wrap;
    font-size: var(--wp--preset--font-size--small);
    width: fit-content;
    transition: background-color 0.3s ease;
}

.woocommerce-edit-address.woocommerce-account .addresses .title .edit:hover {
    background-color: var(--wp--preset--color--cta-principal-fond-hover);
}

.woocommerce-edit-address.woocommerce .col2-set,
.woocommerce-edit-address.woocommerce-page .col2-set {
    display: flex;
    gap: var(--wp--preset--spacing--20);
}

.woocommerce-edit-address.woocommerce .woocommerce-Address {
    margin-top: var(--wp--preset--spacing--20);
}

/*********************************************** 
 * 📨 SERVICE CLIENT > Formulaire
 ***********************************************/


.swebetech-service-form {
    max-width: 700px;
    margin: 0rem auto;
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    color: var(--wc-form-color-text);
}

/* Div conteneur des champs */
.swebetech-service-form div.field {}

/* Label */
.swebetech-service-form label {
    font-weight: 600;
    color: var(--wc-form-color-text);
    display: block;
    margin-bottom: 5px;
}

/* Champs (input, select, textarea) */
.swebetech-service-form input,
.swebetech-service-form textarea,
.swebetech-service-form select {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--wc-form-color-background);
    color: var(--wc-form-color-text);
    border: var(--wc-form-border-width) solid var(--wc-form-border-color);
    border-radius: var(--wc-form-border-radius);
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.4;
}

/* Textarea spécifique */
.swebetech-service-form textarea {
    resize: vertical;
    min-height: 150px;
}

/* Bouton */
.swebetech-service-form button {
    padding: 0.75rem 1.5rem;
    background-color: var(--wp--preset--color--cta-principal-fond);
    color: var(--wp--preset--color--cta-principal-texte);
    border: none;
    border-radius: var(--wc-form-border-radius);
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Hover bouton */
.swebetech-service-form button:hover {
    background-color: var(--wp--preset--color--cta-principal-fond-hover);
}


/*********************************************** 
 * 💰 COMMANDES - STYLE DE L'ONGLET COMMANDES
 ***********************************************/
.woocommerce .woocommerce-MyAccount-content table.shop_table .button {
    padding: 5px 10px;
    font-size: var(--wp--preset--font-size--small);
    margin: 5px;
    max-width: 70px;
    white-space: nowrap;
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: var(--wp--preset--font-size--small);
    width: auto;
    padding-right: 5px;
    text-align: center;
    display: inline-block;
    color: var(--wp--preset--color--cta-principal-texte);
    transition: color 0.3s ease;
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.view::before {
    content: "\f06e";
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.pay::before {
    content: "\f058";
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.cancel::before {
    content: "\f05e";
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.track::before {
    content: "\f48b";
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.wt_pklist_invoice_download::before {
    content: "\f019";
}

.woocommerce .woocommerce-MyAccount-content table.shop_table .button.wt_pklist_invoice_print {
    display: none;
}

/* Désaativer le bouton "Annuler" en cas de status Pending */
tr.woocommerce-orders-table__row--status-pending .button.cancel {
    display: none!important;
}


/*********************************************** 
 * 💰 COMMANDE - STYLE DU STEPPER
 ***********************************************/
.etapes-commande {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 750px;
    padding: 20px 0;
    list-style: none;
    margin: auto;
}

.etape {
    display: flex;
    align-items: center;
    flex: 1;
    position: relative;
}

.etape-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--fond-alternatif);
    border: 2px solid var(--wp--preset--color--gris);
    z-index: 2;
    position: relative;
}

.etape-icone .etape-details {
    position: absolute;
    top: 50px;
    transform: translateX(-50%);
    left: 50%;
    text-wrap: nowrap;
    text-align: center;
    color: var(--wp--preset--color--gris);
}

.etape.active .etape-icone {
    background-color: var(--wp--preset--color--cta-principal-fond);
    border-color: var(--wp--preset--color--cta-principal-fond);
}

.etape.active .etape-icone .etape-details {
    color: var(--wp--preset--color--texte);
}

.etape-svg {
    width: 20px;
    height: 20px;
    color: var(--wp--preset--color--gris);
}

.etape.active .etape-svg {
    color: var(--wp--preset--color--cta-principal-texte);
}

.etape-barre {
    content: '';
    flex-grow: 1;
    height: 4px;
    background: repeating-linear-gradient(90deg,
            var(--wp--preset--color--gris) 0%,
            var(--wp--preset--color--gris) 2%,
            transparent 2%,
            transparent 5%);
    margin-left: 12px;
    margin-right: 12px;
    z-index: 1;
}

.etape.active .etape-barre {
    background-color: var(--wp--preset--color--gris);
}

.etape.active:has(+ .etape:not(.active)) .etape-barre {
    background: repeating-linear-gradient(90deg,
            var(--wp--preset--color--gris) 0%,
            var(--wp--preset--color--gris) 2%,
            transparent 2%,
            transparent 5%);
}

.etape:last-child .etape-barre {
    display: none;
}

.etape:last-child {
    flex-grow: 0;
}