/*
Theme Name: AuthorWeb
Theme URI: http://localhost/author-book
Author: Ahmed Ayoub
Author URI: http://localhost/author-book
Description: A fully custom WordPress theme designed from scratch.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: authorweb
*/

body {
    margin: 0;
    padding: 0;
}

html {
    margin-top: 0 !important;
}

body.logged-in {
    margin-top: 0 !important;
}
#wpadminbar {
    position: fixed !important;
}

body {
    margin-top: 0 !important;
}
html {
  scroll-behavior: smooth;
}

html, body {
    height: auto;
    min-height: 100%;
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.woocommerce {
    min-height: auto !important;
}

footer {
    margin-bottom: 0;
    padding-bottom: 40px;
}

.site-main {
    min-height: auto;
}

/* .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.woocommerce ul.products li.product {
    background: #0a0a0a;
    border: 1px solid #1f1f1f;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.3s ease;
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    border-color: #ffffff30;
}

.woocommerce ul.products li.product img {
    border-radius: 10px;
    margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: white;
    font-size: 16px;
    margin-top: 10px;
}

.woocommerce ul.products li.product .price {
    color: #d1d1d1;
    margin-top: 6px;
    font-weight: 500;
}

.woocommerce ul.products li.product .button {
    background: white !important;
    color: black !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-top: 12px !important;
    display: inline-block;
    transition: 0.3s ease;
}

.woocommerce ul.products li.product .button:hover {
    opacity: 0.8;
} */

/* --- WooCommerce Shop Grid Reset --- */
.woocommerce .products.columns-4 { /* Adjust class if using different column count */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
    margin: 40px 0 !important;
    padding: 0;
    /* margin-top: 12px !important; */
}

.woocommerce ul.products::before, 
.woocommerce ul.products::after {
    display: none !important; /* Kill the float clears */
}

/* --- Product Card Design --- */
.woocommerce ul.products li.product {
    background: #0a0a0a; /* Slightly lighter than pure black for depth */
    border: 1px solid #1a1a1a;
    border-radius: 12px;
    padding: 20px !important;
    margin: 0 !important; /* Removes default WC margins */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
    width: 100% !important;
    float: none !important;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-8px);
    border-color: #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* --- Image Handling --- */
.woocommerce ul.products li.product img {
    border-radius: 8px;
    margin-bottom: 20px !important;
    object-fit: cover;
    aspect-ratio: 3/4; /* Keeps book covers or products uniform */
    width: 100%;
}

/* --- Typography --- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
}

.woocommerce ul.products li.product .price {
    color: #a0a0a0 !important; /* Dimmer price for modern look */
    font-weight: 400 !important;
    margin-bottom: 20px !important;
    display: block;
}

.woocommerce ul.products li.product .price ins {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

/* --- The Button (Modernized) --- */
.woocommerce ul.products li.product .button {
    margin-top: auto !important; /* Pushes button to bottom if titles vary in length */
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem !important;
    text-align: center;
    transition: background 0.2s ease;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #e0e0e0 !important;
}

/* --- Sorting & Results Info --- */
.woocommerce-ordering select {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    padding: 8px !important;
    border-radius: 4px;
}

.woocommerce-result-count {
    color: #666 !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .woocommerce .products.columns-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* 1. Force Background & Remove Wrapper Spacing */
/* This targets the outer structural divs that are likely holding the white color */
#page, 
#content, 
.site-content, 
.ast-container, /* Common for Astra */
#primary {
    background-color: #0c0c0c !important; /* Your light-black bg */
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Apply the max-w-7xl mx-auto px-4 Grid logic */
.woocommerce .content-area, 
.woocommerce .site-main,
ul.products.columns-4 {
    max-width: 1280px !important; /* max-w-7xl */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;  /* px-4 */
    padding-right: 1rem !important; /* px-4 */
}

/* 3. The "Gap Killer" (Targeting the Title & Results) */
.woocommerce-products-header, 
.woocommerce-archive-description,
.woocommerce-notices-wrapper {
    margin: 0 auto !important;
    max-width: 1280px !important;
    background: transparent !important;
}

/* 4. Fix top/bottom "Leakage" */
/* If the white gap is between header and content, or content and footer */
.site-main {
    margin-top: 0 !important;
    padding-top: 50px !important; /* breathable space inside the dark bg */
    padding-bottom: 50px !important;
}

/* 5. Ensure the body doesn't have a white background hiding behind */
body.archive.woocommerce {
    background-color: #000 !important;
}

/* --- View Cart Link Styling --- */
.woocommerce ul.products li.product a.added_to_cart {
    display: block !important;
    text-align: center;
    color: #ffffff !important; /* Make it white */
    font-size: 0.75rem !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px !important;
    text-decoration: underline !important;
    transition: opacity 0.2s ease;
}

.woocommerce ul.products li.product a.added_to_cart:hover {
    opacity: 0.7;
    color: #ffffff !important;
}

/* --- Optional: Adjust the Checkmark --- */
/* If the checkmark next to 'Add to Cart' is hard to see */
.woocommerce ul.products li.product .button.added::after {
    margin-left: 8px;
    content: "\e017"; /* WooCommerce default checkmark icon */
    font-family: WooCommerce;
    display: inline-block;
}

body {
    background: #000;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
}

/* --- 1. Main Layout Structure --- */
.woocommerce-single div.product {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 60px;
    align-items: start;
    margin-top: 40px !important;
}

/* --- 2. Left Column: Image Gallery --- */
.woocommerce-single .woocommerce-product-gallery {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-single .woocommerce-product-gallery img {
    border-radius: 16px;
    border: 1px solid #1a1a1a;
    transition: transform 0.3s ease;
}

/* --- 3. Right Column: Content Flow --- */
.woocommerce-single .summary {
    width: 100% !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

/* 3.1 Title */
.woocommerce-single .product_title {
    font-size: 3rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 10px !important;
    line-height: 1.1;
}

/* 3.2 Price */
.woocommerce-single .price {
    font-size: 1.75rem !important;
    color: #a0a0a0 !important;
    font-weight: 500 !important;
    margin-bottom: 25px !important;
}

.woocommerce-single .price ins {
    color: #fff;
    text-decoration: none;
}

/* 3.3 Description */
.woocommerce-product-details__short-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #ccc;
    margin-bottom: 35px !important;
}

/* 3.4 Quantity + Add to Cart (Flexbox) */
.woocommerce-single form.cart {
    display: flex !important;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px !important;
    padding: 25px 0;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}

.woocommerce-single .quantity input {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 8px;
    padding: 15px !important;
    width: 80px !important;
    height: 56px;
}

.woocommerce-single .single_add_to_cart_button {
    flex-grow: 1;
    background: #fff !important;
    color: #000 !important;
    height: 56px;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.woocommerce-single .single_add_to_cart_button:hover {
    background: #e0e0e0 !important;
    transform: translateY(-2px);
}

/* 3.5 Category */
.product_meta {
    font-size: 0.9rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product_meta a {
    color: #888;
}

/* --- 4. Tabs Section (Full Width) --- */
.woocommerce-tabs {
    grid-column: span 2;
    margin-top: 80px !important;
    border-top: 1px solid #1a1a1a;
}

.woocommerce-tabs ul.tabs {
    display: flex;
    justify-content: flex-start;
    gap: 40px;
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.woocommerce-tabs ul.tabs li a {
    color: #555 !important;
    font-weight: 700 !important;
    font-size: 1rem;
    padding-bottom: 10px;
    border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #fff !important;
    border-bottom-color: #fff;
}

.woocommerce-Tabs-panel {
    padding: 40px 0 !important;
    color: #aaa;
    line-height: 1.8;
}

/* --- 5. Related Products --- */
.related.products {
    grid-column: span 2;
    border-top: 1px solid #1a1a1a;
    padding-top: 60px;
}

.related.products h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #fff;
}

.related.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 25px;
}

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 1024px) {
    .woocommerce-single div.product {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .woocommerce-single .product_title {
        font-size: 2.2rem !important;
    }
}
/* --- FORCE 2-COLUMN GRID --- */
.woocommerce-page.single-product div.product {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Forces 50/50 split */
    gap: 60px !important;
    align-items: start !important;
    max-width: 1280px !important;
    margin: 40px auto !important;
    float: none !important;
}

/* --- RESET COLUMNS (Kill Floats) --- */
.woocommerce-page.single-product div.product .woocommerce-product-gallery,
.woocommerce-page.single-product div.product .summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- STYLE QUANTITY + BUTTON --- */
.woocommerce-page.single-product .summary form.cart {
    display: flex !important;
    flex-direction: row !important; /* Ensures side-by-side */
    align-items: center !important;
    gap: 15px !important;
    margin: 30px 0 !important;
}

.woocommerce-page.single-product .summary .quantity input.qty {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    height: 50px !important;
    border-radius: 8px !important;
    width: 70px !important;
}

.woocommerce-page.single-product .summary .single_add_to_cart_button {
    background: #fff !important;
    color: #000 !important;
    height: 50px !important;
    border-radius: 8px !important;
    flex: 1 !important; /* Makes button fill remaining space */
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* --- TABS (Below the Grid) --- */
.woocommerce-page.single-product .woocommerce-tabs {
    grid-column: 1 / span 2 !important; /* Forces tabs to full width below columns */
    margin-top: 60px !important;
    border-top: 1px solid #1a1a1a !important;
}

/* --- MOBILE STACKING --- */
@media (max-width: 768px) {
    .woocommerce-page.single-product div.product {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* --- 1. GLOBAL CART RESET --- */
.woocommerce-cart .woocommerce {
    background: #000 !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 40px 20px !important;
    color: #fff !important;
}

/* --- 2. THE CART TABLE (MODERN ROW CARDS) --- */
.woocommerce-cart table.cart {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 40px !important;
}

.woocommerce-cart table.cart thead {
    display: none; /* Hide header for modern minimal look */
}

.woocommerce-cart table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 50px 100px 1.5fr 1fr 1fr 1fr;
    align-items: center;
    background: #0c0c0c !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 16px;
    padding: 20px !important;
    margin-bottom: 15px !important;
    gap: 20px;
}

/* --- 3. PRODUCT ROW ELEMENTS --- */
.woocommerce-cart table.cart td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Remove Button */
.woocommerce-cart table.cart td.product-remove a {
    color: #ff4d4d !important;
    font-size: 1.5rem !important;
    font-weight: 300;
}

/* Image */
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 80px !important;
    height: auto;
    border-radius: 8px;
    border: 1px solid #222;
}

/* Name & Price */
.woocommerce-cart table.cart td.product-name a {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1.1rem;
    text-decoration: none;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
    color: #a0a0a0 !important;
    font-size: 1rem;
}

.woocommerce-cart table.cart td.product-subtotal {
    color: #fff !important;
    font-weight: 700;
    text-align: right;
}

/* Quantity Box */
.woocommerce-cart table.cart td.product-quantity .quantity input {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 8px;
    padding: 10px !important;
    width: 60px !important;
}

/* --- 4. COUPON & UPDATE SECTION --- */
.woocommerce-cart table.cart td.actions {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0 !important;
    gap: 20px;
}

.woocommerce-cart .coupon {
    display: flex !important;
    gap: 10px;
}

.woocommerce-cart .coupon input#coupon_code {
    background: #111 !important;
    border: 1px solid #222 !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 12px 20px !important;
    width: 250px !important;
}

.woocommerce-cart .coupon button.button,
.woocommerce-cart button[name="update_cart"] {
    background: #222 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    font-weight: 600 !important;
    border: none !important;
    text-transform: uppercase;
}

.woocommerce-cart button[name="update_cart"]:hover {
    background: #333 !important;
}

/* --- 5. CART TOTALS SUMMARY CARD --- */
.cart-collaterals {
    display: flex;
    justify-content: flex-end;
}

.cart_totals {
    width: 100% !important;
    max-width: 450px !important;
    background: #0c0c0c !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 20px;
    padding: 30px !important;
    float: none !important;
}

.cart_totals h2 {
    font-size: 1.5rem !important;
    color: #fff !important;
    margin-bottom: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cart_totals table.shop_table {
    border: none !important;
    width: 100% !important;
}

.cart_totals tr th, 
.cart_totals tr td {
    padding: 15px 0 !important;
    border-top: 1px solid #1a1a1a !important;
    background: transparent !important;
}

.cart_totals tr.order-total th, 
.cart_totals tr.order-total td {
    border-top: 2px solid #fff !important;
    font-size: 1.3rem !important;
    color: #fff !important;
}

/* --- 6. PRIMARY CTA (CHECKOUT BUTTON) --- */
.wc-proceed-to-checkout a.checkout-button {
    background: #fff !important;
    color: #000 !important;
    display: block !important;
    text-align: center !important;
    padding: 20px !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
    text-transform: uppercase;
    margin-top: 20px !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background: #e0e0e0 !important;
    transform: translateY(-2px);
}

/* --- 7. MOBILE RESPONSIVE --- */
@media (max-width: 992px) {
    .woocommerce-cart table.cart tr.cart_item {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
    
    .woocommerce-cart table.cart td.product-remove { grid-column: span 2; text-align: right; }
    .woocommerce-cart table.cart td.product-thumbnail { grid-column: span 1; }
    .woocommerce-cart table.cart td.product-name { grid-column: span 1; }
    .woocommerce-cart table.cart td.product-quantity,
    .woocommerce-cart table.cart td.product-subtotal { grid-column: span 1; }
    
    .woocommerce-cart table.cart td.actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .woocommerce-cart .coupon { flex-direction: column; }
    .woocommerce-cart .coupon input#coupon_code { width: 100% !important; }
}

/* Add spacing from top for the Cart Page */
.woocommerce-cart .woocommerce {
    padding-top: 80px !important; /* Adjust this value (e.g., 60px to 120px) for more/less gap */
}

/* Ensure the table doesn't hug the very top of the dark container */
.woocommerce-cart table.cart {
    margin-top: 20px !important;
}

/* Optional: If your page title is showing, add space below it too */
.woocommerce-cart .entry-title {
    margin-bottom: 40px !important;
    padding-top: 20px;
    color: #fff;
}

/* --- 1. RE-ENABLE & STYLE THEAD --- */
.woocommerce-cart table.cart thead {
    display: table-header-group !important; /* Forces the header back */
}

.woocommerce-cart table.cart thead tr {
    display: grid !important;
    grid-template-columns: 50px 100px 1.5fr 1fr 1fr 1fr; /* Must match your row grid */
    gap: 20px;
    padding: 10px 20px !important;
    background: transparent !important;
    border: none !important;
}

.woocommerce-cart table.cart thead th {
    color: #666 !important; /* Muted label color */
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 0 !important;
}

/* --- 2. ALIGN TITLES --- */
/* Match alignment with the content below */
.woocommerce-cart table.cart thead th.product-name {
    text-align: left;
}

.woocommerce-cart table.cart thead th.product-subtotal {
    text-align: right;
}

/* Hide the 'remove' and 'thumbnail' titles for a cleaner look */
.woocommerce-cart table.cart thead th.product-remove,
.woocommerce-cart table.cart thead th.product-thumbnail {
    font-size: 0 !important;
}

/* --- 3. ADJUST SPACING --- */
/* Add a bit of space between the header labels and the first product card */
.woocommerce-cart table.cart {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

/* --- 4. MOBILE: HIDE THEAD --- */
/* Titles usually look cluttered on mobile card stacks */
@media (max-width: 992px) {
    .woocommerce-cart table.cart thead {
        display: none !important;
    }
}

/* --- 1. GLOBAL WRAPPER & TOP SPACING --- */
.woocommerce-checkout {
    background: radial-gradient(circle at top, #111 0%, #000 100%) !important;
    padding-top: 140px !important;
    padding-bottom: 100px !important;
}

.woocommerce-checkout .woocommerce {
    max-width: 1350px !important;
    margin: 0 auto !important;
}

/* --- 2. INTEGRATED COUPON BAR --- */
.woocommerce-form-coupon-toggle {
    margin-bottom: 20px !important;
}

.woocommerce-info {
    background: #0c0c0c !important;
    border: 1px dashed #333 !important;
    color: #fff !important;
    border-radius: 12px;
    padding: 20px !important;
}

form.checkout_coupon {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 15px;
    padding: 30px !important;
    margin-bottom: 40px !important;
    display: flex;
    gap: 15px;
}

/* --- 3. THE MAIN TWO-COLUMN DASHBOARD --- */
form.checkout {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px !important;
}

/* Left Section: 65% Width */
#customer_details {
    flex: 1 1 65% !important;
    background: #0a0a0a;
    border: 1px solid #1a1a1a;
    padding: 40px !important;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Right Section: 30% Width (Sticky) */
#order_review_heading { display: none; } /* Hide redundant heading */

#order_review {
    flex: 1 1 30% !important;
    position: sticky;
    top: 120px;
    background: #111 !important;
    border: 1px solid #333 !important;
    padding: 35px !important;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* --- 4. ENHANCED FORM FIELDS --- */
.woocommerce-checkout .form-row {
    margin-bottom: 25px !important;
}

.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
    background: #161616 !important;
    border: 2px solid #222 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 18px !important;
    font-size: 1rem !important;
    transition: all 0.3s ease;
}

.woocommerce-checkout input.input-text:focus {
    border-color: #444 !important;
    background: #1c1c1c !important;
}

.woocommerce-checkout label {
    font-weight: 600 !important;
    color: #eee !important;
    margin-bottom: 10px !important;
    display: block;
}

/* --- 5. RE-DESIGNED ORDER SUMMARY TABLE --- */
.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
}

.shop_table.woocommerce-checkout-review-order-table tr th,
.shop_table.woocommerce-checkout-review-order-table tr td {
    border-bottom: 1px solid #222 !important;
    padding: 20px 0 !important;
    background: transparent !important;
    color: #fff !important;
}

.shop_table tr.order-total {
    border-top: 2px solid #fff;
}

.shop_table tr.order-total th, 
.shop_table tr.order-total td {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
}

/* --- 6. PREMIUM "PLACE ORDER" BUTTON --- */
#place_order {
    background: linear-gradient(135deg, #fff 0%, #e0e0e0 100%) !important;
    color: #000 !important;
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    padding: 25px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 20px rgba(255,255,255,0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#place_order:hover {
    transform: scale(1.03);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

/* --- 7. MOBILE STACKING --- */
@media (max-width: 1024px) {
    #customer_details, #order_review {
        flex: 1 1 100% !important;
        position: static !important;
    }
}
/* --- 1. REMOVE YELLOW AREA (Top Gap) --- */
.woocommerce-checkout form.checkout_coupon {
    margin-bottom: 20px !important; /* Reduces gap below coupon */
}

#customer_details {
    margin-top: 0 !important; /* Removes gap above billing form */
    padding-top: 30px !important;
}

/* --- 2. REMOVE PURPLE AREAS (Sidebar Gaps) --- */
#order_review {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; /* Forces content to the top */
    min-height: auto !important; /* Prevents artificial stretching */
    padding-bottom: 30px !important;
}

/* Remove extra space between summary and payment */
.woocommerce-checkout-review-order-table {
    margin-bottom: 10px !important;
}

#payment {
    margin-top: 0 !important;
}

/* --- 3. STYLE APPLY COUPON BUTTON --- */
.woocommerce-checkout button[name="apply_coupon"] {
    background-color: #fff !important;
    color: #000 !important;
    border-radius: 8px !important;
    padding: 12px 25px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: none !important;
    height: 100%; /* Matches input height */
    transition: all 0.3s ease;
}

.woocommerce-checkout button[name="apply_coupon"]:hover {
    background-color: #e0e0e0 !important;
    transform: translateY(-1px);
}

/* --- 4. PRIVACY TEXT & SPACING --- */
.woocommerce-privacy-policy-text {
    color: #ffffff !important; /* Force pure white */
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    display: block !important;
    opacity: 0.9;
}

.woocommerce-privacy-policy-text a {
    color: #fff !important;
    text-decoration: underline;
}

/* Add breathing room around the Place Order button */
#place_order {
    margin-top: 15px !important;
}
/* --- 1. REMOVE REMAINING BG GAPS (Red Areas) --- */
.woocommerce-checkout {
    background: #000 !important; /* Forces solid black background across the section */
}

/* Remove spacing between coupon and billing */
.woocommerce-checkout form.checkout_coupon {
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
}

#customer_details {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

/* --- 2. PROMINENT WHITE HEADINGS --- */
.woocommerce-billing-fields h3, 
.woocommerce-shipping-fields h3,
#order_review_heading {
    display: block !important; /* Ensures the summary heading shows up */
    color: #ffffff !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px !important;
    border-bottom: 1px solid #222;
    padding-bottom: 10px;
}

/* Specific heading for Order Summary */
#order_review_heading {
    margin-top: 0 !important;
}

/* --- 3. PROFESSIONAL PLACE ORDER BUTTON --- */
#place_order {
    background: #ffffff !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 18px !important;
    font-size: 1rem !important;
    font-weight: 600 !important; /* Reduced from 800/900 for a cleaner look */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100% !important;
    cursor: pointer;
    /* Disable hover effects */
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

#place_order:hover {
    background: #ffffff !important; /* Keeps it static */
    transform: none !important;
    box-shadow: none !important;
}

/* --- 4. TEXT COLORS & SPACING --- */
/* Fix for Privacy Policy Text */
.woocommerce-privacy-policy-text {
    color: #ffffff !important;
    margin: 20px 0 !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Ensure payment methods are visible */
.wc_payment_method label {
    color: #fff !important;
    font-weight: 500 !important;
}
/* --- 1. CORE CONTAINER & TOP SPACING --- */
.woocommerce-checkout {
    background: #000 !important;
    padding-top: 120px !important;
    padding-bottom: 100px !important;
}

/* --- 2. THE ULTIMATE GRID FIX --- */
form.checkout {
    display: grid !important;
    grid-template-columns: 1.2fr 0.8fr !important; /* Forces strict side-by-side */
    grid-template-areas: "details review";
    gap: 40px !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    align-items: start;
}

/* Explicitly placing the columns to prevent jumping */
#customer_details {
    grid-area: details;
    background: #0c0c0c;
    border: 1px solid #1a1a1a;
    padding: 40px !important;
    border-radius: 20px;
}

.woocommerce-checkout-review-order {
    grid-area: review;
    background: #111 !important;
    border: 1px solid #222 !important;
    padding: 30px !important;
    border-radius: 20px;
}

/* --- 3. FIXING "YOUR ORDER" HEADING --- */
#order_review_heading {
    grid-area: review; /* Pins it to the right column */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    color: #fff !important;
    font-size: 1.4rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 15px;
    border-bottom: 1px solid #333;
}

/* --- 4. PROFESSIONAL INPUT STYLING --- */
.woocommerce-checkout input.input-text, 
.woocommerce-checkout select, 
.woocommerce-checkout textarea {
    background: #161616 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 15px !important;
    font-size: 0.95rem !important;
}

.woocommerce-checkout label {
    color: #bbb !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
}

/* --- 5. CLEAN ORDER SUMMARY & BUTTON --- */
.shop_table.woocommerce-checkout-review-order-table {
    border: none !important;
    background: transparent !important;
}

.shop_table tr th, .shop_table tr td {
    border-bottom: 1px solid #222 !important;
    padding: 15px 0 !important;
    color: #eee !important;
}

#place_order {
    background: #fff !important;
    color: #000 !important;
    font-weight: 600 !important;
    padding: 20px !important;
    border-radius: 10px !important;
    text-transform: uppercase;
    width: 100% !important;
    margin-top: 20px !important;
}

/* --- 6. FULLY RESPONSIVE FIX --- */
@media (max-width: 1024px) {
    form.checkout {
        grid-template-columns: 1fr !important;
        grid-template-areas: 
            "details"
            "review";
    }

    #order_review_heading {
        grid-area: auto;
    }
}

/* --- 1. CLEAN RESET & RESPONSIVE GRID --- */
.woocommerce-checkout {
    background: #000 !important;
    padding-top: 100px !important;
}

form.checkout {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* --- 2. BILLING COLUMN (60%) --- */
#customer_details {
    flex: 1 1 60% !important;
    min-width: 350px;
}

.woocommerce-billing-fields h3, 
.woocommerce-shipping-fields h3 {
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin-bottom: 25px !important;
}

/* --- 3. SUMMARY COLUMN (35%) --- */
/* Hide the problematic floating heading */
#order_review_heading { 
    display: none !important; 
}

#order_review {
    flex: 1 1 35% !important;
    min-width: 320px;
    background: #0c0c0c !important;
    border: 1px solid #1a1a1a !important;
    padding: 30px !important;
    border-radius: 15px;
}

/* Manually inject the title inside the container via CSS */
#order_review::before {
    content: "YOUR ORDER";
    display: block;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222;
}

/* --- 4. TABLE & BUTTON POLISH --- */
.shop_table.woocommerce-checkout-review-order-table tr th, 
.shop_table.woocommerce-checkout-review-order-table tr td {
    border-bottom: 1px solid #222 !important;
    padding: 15px 0 !important;
    color: #ccc !important;
    background: transparent !important;
}

#place_order {
    background: #fff !important;
    color: #000 !important;
    font-weight: 600 !important;
    padding: 18px !important;
    border-radius: 8px !important;
    text-transform: uppercase;
    width: 100% !important;
    margin-top: 20px !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- 5. MOBILE VIEW --- */
@media (max-width: 992px) {
    #customer_details, #order_review {
        flex: 1 1 100% !important;
    }
}

/* --- 1. GLOBAL WRAPPER RESET --- */
.woocommerce-order-received .woocommerce {
    background-color: #000 !important;
    padding-top: 120px !important;
    padding-bottom: 100px !important;
    max-width: 900px !important; /* Constrained width prevents odd horizontal gaps */
    margin: 0 auto !important;
}

/* --- 2. HERO CONFIRMATION CARD --- */
.woocommerce-thankyou-order-received {
    text-align: center !important;
    background: #0c0c0c !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 24px !important;
    padding: 60px 40px !important;
    margin-bottom: 30px !important;
}

.woocommerce-thankyou-order-received::before {
    content: '✓';
    display: block;
    width: 60px;
    height: 60px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    line-height: 60px;
    font-size: 30px;
    margin: 0 auto 20px;
    font-weight: bold;
}

/* --- 3. COMPACT ORDER META GRID --- */
ul.woocommerce-thankyou-order-details {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    list-style: none !important;
}

ul.woocommerce-thankyou-order-details li {
    border: none !important;
    text-align: center;
    font-size: 0.75rem !important;
    color: #666 !important;
    text-transform: uppercase;
}

ul.woocommerce-thankyou-order-details li strong {
    display: block !important;
    color: #fff !important;
    font-size: 0.95rem !important;
    margin-top: 8px;
}

/* --- 4. INTEGRATED ORDER DETAILS --- */
.woocommerce-order-details {
    background: #0c0c0c !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 24px !important;
    padding: 40px !important;
    margin-bottom: 30px !important;
}

.shop_table.order_details {
    border: none !important;
}

.shop_table.order_details td, 
.shop_table.order_details th {
    border-bottom: 1px solid #1a1a1a !important;
    padding: 15px 0 !important;
    background: transparent !important;
    color: #eee !important;
}

.shop_table.order_details tfoot tr:last-child th,
.shop_table.order_details tfoot tr:last-child td {
    border-top: 2px solid #fff !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* --- 5. CLEAN ADDRESS ROW --- */
.woocommerce-customer-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

.woocommerce-customer-details section {
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 20px !important;
    padding: 25px !important;
}

.woocommerce-column__title {
    color: #fff !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    margin-bottom: 15px !important;
}

address {
    color: #888 !important;
    font-style: normal !important;
    line-height: 1.6;
}

/* --- 6. RESPONSIVE FIX --- */
@media (max-width: 768px) {
    ul.woocommerce-thankyou-order-details {
        grid-template-columns: 1fr 1fr !important;
    }
    .woocommerce-customer-details {
        grid-template-columns: 1fr !important;
    }
}
/* --- 1. FORCE WHITE TEXT FOR HEADINGS --- */
.woocommerce-thankyou-order-received,
.woocommerce-order-details__title {
    color: #ffffff !important; /* Forces pure white for confirmation and details titles */
}

/* --- 2. SINGLE ROW META DATA GRID --- */
ul.woocommerce-thankyou-order-details {
    display: flex !important; /* Switches from grid to flex for better single-row control */
    flex-wrap: nowrap !important; /* Prevents items from breaking into a second line */
    justify-content: space-between !important;
    gap: 10px !important;
    background: #111 !important;
    border: 1px solid #222 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
    list-style: none !important;
    overflow-x: auto; /* Adds a scrollbar on very small screens to keep the row intact */
}

ul.woocommerce-thankyou-order-details li {
    flex: 1 !important; /* Ensures all 5 items share the width equally */
    border-right: 1px solid #222 !important; /* Adds a professional divider between items */
    text-align: center;
    font-size: 0.7rem !important;
    color: #666 !important;
    text-transform: uppercase;
    padding: 0 5px !important;
}

ul.woocommerce-thankyou-order-details li:last-child {
    border-right: none !important; /* Removes divider for the last item (Payment Method) */
}

ul.woocommerce-thankyou-order-details li strong {
    display: block !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    margin-top: 8px;
    word-break: break-word; /* Prevents long emails from breaking the row layout */
}

/* --- 3. RESPONSIVE ADJUSTMENT --- */
@media (max-width: 768px) {
    ul.woocommerce-thankyou-order-details {
        padding: 15px !important;
    }
    ul.woocommerce-thankyou-order-details li strong {
        font-size: 0.75rem !important; /* Shrinks text slightly on mobile to stay in one row */
    }
}