/* VERSION 1.1 */

/* General WooCommerce page styling */
article > .woocommerce{
    max-width: 940px;
    margin: 80px auto; /* Center the container */
    padding: 0 15px; /* Optional: Add some padding */
}

.product-thumbnail{display: none;}

/* General container styling */
.woocommerce-MyAccount-content {
    margin: 20px 0;
}

.attachment-woocommerce_thumbnail {
    border-radius: 5px 5px 0px 0px;
    margin: 0px !important;
}


/* Button styling */
.button, 
.product_type_simple, 
.add_to_cart_button, 
.ajax_add_to_cart {
    color: white;
    background-color: #31211C;
}

/* CSS for WooCommerce Dashboard */
.woo-container {
    height: 100%;
    margin-bottom: 80px;
    padding-left: 20px;
    background: #f9f9f9;
}

.woocontent {
    justify-content: flex-start;
    padding-left: 20px;
    display: flex;
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
}

.woonav {
    margin-top: 80px;
}

.woocommerce-MyAccount-navigation {
    background-color: #f8f8f8; /* Background color for the navigation menu */
    padding: 20px; /* Add some padding for better spacing */
}

.woocommerce-MyAccount-navigation ul {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-navigation li {
    margin-bottom: 20px; /* Add more space between each navigation element */
}

.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #31211C; /* Default link color */
    border-radius: 4px; /* Optional: Add some border radius */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover and active state */
}

.woocommerce-MyAccount-navigation a:hover {
    background-color: #e0e0e0; /* Hover background color */
}

.woocommerce-MyAccount-navigation .is-active a {
    background-color: #31211C; /* Active link background color */
    color: #fff; /* Active link text color */
}

/* General form styling */
.woocommerce-EditAccountForm {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.woocommerce-EditAccountForm label {
    font-size: 14px;
    color: #31211C;
    margin-bottom: 8px;
    display: block;
}

.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background: #f9f9f9;
    transition: background 0.3s, border-color 0.3s;
}

.woocommerce-EditAccountForm input[type="text"]:focus,
.woocommerce-EditAccountForm input[type="email"]:focus,
.woocommerce-EditAccountForm input[type="password"]:focus {
    background: #fff;
    border-color: #31211C;
}

.woocommerce-EditAccountForm fieldset {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

.woocommerce-EditAccountForm legend {
    font-size: 16px;
    color: #31211C;
    padding: 0 5px;
}

.woocommerce-EditAccountForm button.woocommerce-Button {
    background: #31211C;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.woocommerce-EditAccountForm button.woocommerce-Button:hover {
    background: #31211C;
    color: white;
}

/* Clearfix for floats */
.clear {
    clear: both;
}

/* Responsive adjustments for form */
@media (max-width: 600px) {
    .woocommerce-EditAccountForm {
        padding: 15px;
    }
}

/* CSS for Address Design */
.woocommerce-Addresses {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.woocommerce-Address {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    flex: 1;
    min-width: 280px;
    margin-bottom: 20px;
}

.woocommerce-Address address {
    font-style: normal;
    font-size: 14px;
    color: #31211C;
    margin: 0;
}

.woocommerce-Addresses + p {
    font-size: 14px;
    color: #31211C;
    margin-bottom: 20px;
}

/* Responsive adjustments for addresses */
@media (max-width: 600px) {
    .woocommerce-Addresses {
        flex-direction: column;
    }
}

/* CSS for WooCommerce Cart Page */
body.woocommerce-cart .woocommerce {
    max-width: 980px;
    margin: 80px auto;
    padding: 20px;
}

.woocommerce-cart table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.woocommerce-cart table.shop_table th, 
.woocommerce-cart table.shop_table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eaeaea;
}

.woocommerce-cart table.shop_table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Styles for product images in cart */


.woocommerce-cart table.cart img {
    height: auto;
    border-radius: 5px;
    width: 60px!important;
}

.woocommerce-cart .cart_totals {
    background: #fff;
    border: 1px solid #eaeaea;
    padding: 20px;
    margin-top: 20px;
}

.woocommerce-cart .cart_totals h2 {
    margin-top: 0;
    font-size: 24px;
}

.woocommerce-cart .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce-cart .cart_totals table th, 
.woocommerce-cart .cart_totals table td {
    padding: 10px 0;
    text-align: left;
}

.woocommerce-cart .cart_totals table th {
    font-weight: normal;
    color: #31211C;
}

.woocommerce-cart .cart_totals .order-total th, 
.woocommerce-cart .cart_totals .order-total td {
    font-size: 18px;
    font-weight: bold;
    color: #31211C;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
    text-align: right;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
    background-color: #31211C;
    color: #fff;
    padding: 15px 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button:hover {
    background-color: #3a2823;
}

/* Responsive adjustments for cart */
@media (max-width: 768px) {

    .woocommerce-cart .cart_totals h2 {
        font-size: 20px;
    }

    .woocommerce-cart .cart_totals table th, 
    .woocommerce-cart .cart_totals table td {
        padding: 8px 0;
    }

    .woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
        padding: 8px 16px;
        font-size: 14px;
    }

    .custom-product-wrapper {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 480px) {
    .woocommerce-cart .cart_totals h2 {
        font-size: 18px;
    }

    .woocommerce-cart .cart_totals table th, 
    .woocommerce-cart .cart_totals table td {
        padding: 6px 0;
    }

    .woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button {
        padding: 9px 15px;
        font-size: 14px;
    }
    


    /* Styles for product images on mobile */
}

/* Styles pour combiner la vignette du produit et le nom du produit */
.product-thumbnail-name {
    display: flex;
    align-items: center;
}

.product-thumbnail-name-wrapper {
    display: flex;
    align-items: center;
    text-align: left; /* Align text to the left */
    width: auto;
    gap: 20px;
    flex-wrap: wrap;
}

.paragraphe-thumbnail-product{
    text-decoration: none!important;
    color: #31211C;
    font-size: 16px
}

/* Assurez-vous que les autres cellules de la table sont également alignées à gauche */
.woocommerce-cart table.shop_table th,
.woocommerce-cart table.shop_table td {
    text-align: left;
}

.product-thumbnail-name::before{
    display: none;
}

/* CARD */
/* Container principal de la carte produit */
.custom-product-card {
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.3s ease;
    margin-bottom: 20px;
    height: 380px; /* Hauteur fixe pour toutes les cartes */
    display: flex;
    flex-direction: column;
}

/* Conteneur des informations du produit */
.custom-infos-product-card {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Image du produit */
.custom-product-image {
    flex-shrink: 0;
}

.custom-product-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    max-height: 200px; /* Limite la hauteur de l'image */
    object-fit: cover; /* Maintient l'aspect ratio de l'image */
}

/* Information du produit (titre) */
.custom-product-info .woocommerce-loop-product__title {
    color: #31211C!important; /* Couleur personnalisée */
    font-size: 16px;
    margin: 10px 0;
    height: 80px;
    letter-spacing: -0.5px;
}

/* Prix du produit */
.custom-product-price .price {
    color: #31211C!important; /* Couleur personnalisée */
    font-size: 16px;
    margin-bottom: 10px;
}

/* Bouton ajouter au panier */
.custom-product-cart {
    margin-top: auto;
}

.custom-product-cart .button {
    background-color: #31211C!important; /* Couleur personnalisée */
    border: none;
    border-radius: 5px;
    color: #fff!important;
    cursor: pointer;
    display: block;
    margin: 10px auto 0; /* Aligné en bas */
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

.custom-product-cart .button:hover {
    background-color: #514742!important; /* Couleur plus claire pour le hover */
}
/* CODE POUR LA PARTIE MY ACCOUNT */
.more-framboises{
    margin: 10px;
    padding: 9px 15px;
    background-color: #31211C;
    color: white;
    text-decoration: none;
    font-weight: 700;
}
.infos-myaccount-dboard{
    margin-top: 10px;
    margin-bottom: 20px;
    line-height: 22px;
}

/* Gestion des media queries pour responsivité */

@media (max-width: 768px) {
    .custom-product-card {
        width: calc(100% - 20px); /* Ajuster pour 1 colonne */
        margin: 0 10px 20px;
    }

    .woocommerce ul.products li.product .button{
        font-size: 13px;
        margin: 0;
    }

    .popup-container {
        width: 80%;
        height: 60%;
    }
    
}

.woocommerce-MyAccount-content p{
    margin-bottom: 20px;
}

/* CART POPUP */
.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(130, 180, 188);
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 400px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 120%;
}

.popup-message {
    margin-bottom: 24px;
}

.popup-button {
    padding: 12px 24px;
    cursor: pointer;
}

.popup-button-primary {
    background-color: #31211C;
    color: white;
    border: none;
    margin-right: 12px;
}

.popup-close {
    color: #31211C;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}