/* ============================================================================
   POLAR SPA - STYLES PAGE PANIER
   À ajouter dans _Layout.cshtml ou comme fichier CSS séparé
   ============================================================================ */

/* Banner du panier */
.cart-page-header,
.page-header,
body[class*="cart"] .breadcrumb-area {
    background: linear-gradient(135deg, #122936 0%, #1a3d4f 100%) !important;
    padding: 40px 0 !important;
    text-align: center;
    margin-bottom: 40px;
}

.cart-page-header h1,
.page-header h1,
body[class*="cart"] .breadcrumb-area h1 {
    color: white !important;
    font-size: 36px !important;
    font-weight: 700 !important;
}

/* Container principal du panier */
.cart-wrapper,
.shopping-cart,
.cart-area,
[class*="cart"] .container {
    margin-bottom: 60px;
}

/* Tableau du panier */
.cart-table,
.table-shopping-cart,
table.shop_table,
.cart-table-area table {
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    border: none !important;
}

.cart-table thead,
.table-shopping-cart thead,
table.shop_table thead,
.cart-table-area table thead {
    background: linear-gradient(135deg, #f8fbfd 0%, #eef4f8 100%) !important;
}

.cart-table thead th,
.table-shopping-cart thead th,
table.shop_table thead th,
.cart-table-area table thead th {
    color: #2C5F7C !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 15px 20px !important;
    border-bottom: 2px solid #e0e8ef !important;
}

.cart-table tbody tr,
.table-shopping-cart tbody tr,
table.shop_table tbody tr,
.cart-table-area table tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
    transition: all 0.3s ease;
}

.cart-table tbody tr:hover,
.table-shopping-cart tbody tr:hover,
table.shop_table tbody tr:hover,
.cart-table-area table tbody tr:hover {
    background: #fafcfd !important;
}

.cart-table tbody td,
.table-shopping-cart tbody td,
table.shop_table tbody td,
.cart-table-area table tbody td {
    padding: 20px !important;
    vertical-align: middle !important;
    border: none !important;
}

/* Images produits */
.cart-table img,
.table-shopping-cart img,
table.shop_table td img,
.cart-table-area img {
    border-radius: 10px !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1) !important;
    max-width: 80px !important;
    height: auto !important;
}

/* Nom du produit */
.cart-table .product-name a,
.table-shopping-cart .product-name a,
table.shop_table .product-name a,
.cart-table-area .product-name a {
    color: #333 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

.cart-table .product-name a:hover,
.table-shopping-cart .product-name a:hover,
table.shop_table .product-name a:hover {
    color: #2C5F7C !important;
}

/* Prix */
.cart-table .product-price,
.cart-table .product-subtotal,
.table-shopping-cart .amount,
table.shop_table .amount {
    font-weight: 600 !important;
    color: #2C5F7C !important;
    font-size: 16px !important;
}

/* Input quantité */
.cart-table input[type="number"],
.table-shopping-cart input[type="number"],
table.shop_table input.qty,
.quantity input,
input.cart-qty {
    width: 60px !important;
    height: 40px !important;
    border: 2px solid #e0e8ef !important;
    border-radius: 8px !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

.cart-table input[type="number"]:focus,
.quantity input:focus {
    border-color: #2C5F7C !important;
    outline: none !important;
}

/* Bouton supprimer */
.cart-table .remove,
.table-shopping-cart .remove,
table.shop_table .remove,
.btn-remove,
a.remove {
    width: 30px !important;
    height: 30px !important;
    background: #e74c3c !important;
    color: white !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.cart-table .remove:hover,
a.remove:hover {
    background: #c0392b !important;
    transform: scale(1.1) !important;
}

/* Coupon */
.coupon,
.coupon-form,
.discount-code,
[class*="coupon"] {
    background: white !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 15px rgba(0,0,0,0.05) !important;
    margin-bottom: 20px !important;
}

.coupon input[type="text"],
.coupon-form input,
.discount-code input {
    border: 2px solid #e0e8ef !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
}

.coupon button,
.coupon-form button,
.discount-code button {
    background: #2C5F7C !important;
    color: white !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.coupon button:hover {
    background: #1a3d4f !important;
}

/* Totaux du panier */
.cart-totals,
.cart_totals,
.cart-total-area,
.order-summary,
[class*="cart-total"] {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
    padding: 30px !important;
}

.cart-totals h2,
.cart_totals h2,
.cart-total-area h3,
.order-summary h3 {
    color: #2C5F7C !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    border-bottom: 2px solid #e0e8ef !important;
}

.cart-totals table,
.cart_totals table {
    width: 100% !important;
}

.cart-totals table tr,
.cart_totals table tr {
    border-bottom: 1px solid #f0f0f0 !important;
}

.cart-totals table td,
.cart_totals table td,
.cart-totals table th,
.cart_totals table th {
    padding: 12px 0 !important;
    border: none !important;
}

.cart-totals .order-total td,
.cart_totals .order-total td,
.cart-totals tr:last-child td {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #2C5F7C !important;
    padding-top: 20px !important;
    border-top: 2px solid #e0e8ef !important;
}

/* Bouton Checkout */
.checkout-button,
.wc-proceed-to-checkout a,
a.checkout-button,
.btn-checkout,
a[href*="checkout"],
button[class*="checkout"] {
    display: block !important;
    background: linear-gradient(135deg, #2E7D52 0%, #4A9B9B 100%) !important;
    color: white !important;
    text-align: center !important;
    padding: 18px 30px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(46,125,82,0.3) !important;
    transition: all 0.3s ease !important;
    margin-top: 20px !important;
}

.checkout-button:hover,
.wc-proceed-to-checkout a:hover,
a.checkout-button:hover,
a[href*="checkout"]:hover {
    background: linear-gradient(135deg, #256644 0%, #3d8282 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(46,125,82,0.4) !important;
}

/* Bouton Continuer achats */
.btn-continue-shopping,
a[href="/"],
.return-to-shop a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2C5F7C !important;
    border: 2px solid #2C5F7C !important;
    background: transparent !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.btn-continue-shopping:hover,
.return-to-shop a:hover {
    background: #2C5F7C !important;
    color: white !important;
}

/* Bouton Update Cart */
button[name="update_cart"],
.btn-update-cart,
button[class*="update"] {
    background: #2C5F7C !important;
    color: white !important;
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* Panier vide */
.cart-empty,
.empty-cart,
.woocommerce-info,
p.cart-empty {
    text-align: center !important;
    padding: 60px 20px !important;
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important;
}

.cart-empty::before,
.empty-cart::before {
    content: "🛒" !important;
    font-size: 60px !important;
    display: block !important;
    margin-bottom: 20px !important;
}

/* Message envío gratis */
.free-shipping-notice,
.shipping-notice {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
    padding: 15px 20px !important;
    border-radius: 10px !important;
    border-left: 4px solid #2E7D52 !important;
    margin-bottom: 20px !important;
}

.free-shipping-notice p,
.shipping-notice p {
    margin: 0 !important;
    color: #2E7D52 !important;
    font-weight: 500 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .cart-table,
    .table-shopping-cart,
    table.shop_table {
        display: block !important;
    }
    
    .cart-table thead {
        display: none !important;
    }
    
    .cart-table tbody tr {
        display: block !important;
        padding: 20px !important;
        margin-bottom: 15px !important;
        border-radius: 10px !important;
    }
    
    .cart-table tbody td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .cart-table tbody td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #2C5F7C;
    }
    
    .cart-totals,
    .cart_totals {
        margin-top: 30px !important;
    }
}