/*
 * ESUN Advanced OTP & My Account Plugin
 * Style Version: 5.0 (Final Composite)
 * Description: Complete UI overhaul for a modern, icon-driven, glassmorphic experience.
 */

/* =================================================================
   1. GLOBAL BACKGROUND FIXES & DEFAULTS
   ================================================================= */
/* This forces the page to be full-height and helps prevent theme wrappers
   from clipping the fixed-position video background. */
html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden; /* Prevents horizontal scrollbars caused by some themes */
}
h2, h1, h3, h4, p {
    color: #fff !important;
}

button.esun-button {
    margin-top: 15px;
}

div#esun-otp-inputs {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.woocommerce-js form .form-row textarea, .woocommerce-js input[type=email], .woocommerce-js input[type=number], .woocommerce-js input[type=password], .woocommerce-js input[type=reset], .woocommerce-js input[type=search], .woocommerce-js input[type=tel], .woocommerce-js input[type=text], .woocommerce-js input[type=url], .woocommerce-js textarea, .woocommerce-page form .form-row textarea, .woocommerce-page input[type=email], .woocommerce-page input[type=number], .woocommerce-page input[type=password], .woocommerce-page input[type=reset], .woocommerce-page input[type=search], .woocommerce-page input[type=tel], .woocommerce-page input[type=text], .woocommerce-page input[type=url], .woocommerce-page textarea {
    border-color: var(--ast-border-color);
    background-color: #4949494f !important;
    box-shadow: none;
    border-radius: 5px !important;
}

/* =================================================================
   2. VIDEO BACKGROUND STYLES
   ================================================================= */
.esun-video-bg-wrapper {
    position: relative;
    z-index: 1;
}

.esun-video-bg,
.esun-video-bg-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    transform: translateZ(0); /* Promotes hardware acceleration */
}

.esun-video-bg {
    object-fit: cover; /* This is crucial for the video to cover the screen without distortion */
    z-index: -2; /* Place it behind everything */
}

.esun-video-bg-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 50% dark overlay. Adjust the last number (0.5) to make it darker or lighter */
    z-index: -1; /* Place it on top of the video but behind the content */
}

/* Ensure our main content container sits correctly on top */
.esun-otp-container {
    position: relative;
    z-index: 2;
}


/* =================================================================
   3. ROOT VARIABLES & GLOBAL STYLES
   ================================================================= */
:root {
    --esun-primary-color: #007aff; /* Apple's signature blue for accents */
    --esun-primary-hover: #0056b3;
    --esun-error-color: #ff3b30;
    --esun-success-color: #34c759;
    --esun-logout-color: #ff3b30;
    --esun-logout-hover: #c9302c;

    /* --- Glassmorphism & Typography System --- */
    --esun-glass-bg: rgba(255, 255, 255, 0.1);
    --esun-glass-border: rgba(255, 255, 255, 0.2);
    --esun-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    --esun-glass-blur: 20px;

    --esun-text-primary: #ffffff; /* Primary text for dark/gradient backgrounds */
    --esun-text-secondary: #e0e0e0;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }


/* =================================================================
   4. MAIN CONTAINER & LOGIN FORM
   ================================================================= */
.esun-otp-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    max-width: 700px;
    margin: 3em auto;
    border-radius: 24px;
    overflow: hidden;

    /* --- The Core Glass Effect --- */
    background: var(--esun-glass-bg);
    box-shadow: var(--esun-glass-shadow);
    backdrop-filter: blur(var(--esun-glass-blur));
    -webkit-backdrop-filter: blur(var(--esun-glass-blur));
    border: 1px solid var(--esun-glass-border);
}

.esun-form-content { padding: 2.5em; }

.esun-login-form h3 { color: var(--esun-text-primary); text-align: center; font-size: 1.8em; margin-top: 0; }
.esun-login-form p { color: var(--esun-text-secondary); text-align: center; margin-bottom: 2em; }

#esun-otp-inputs .otp-input {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--esun-glass-border);
    color: var(--esun-text-primary);
    width: 50px; height: 55px; font-size: 1.2em; text-align: center; border-radius: 8px; padding: 5px !important;
}


/* =================================================================
   5. "MY ACCOUNT" PAGE - APPLE GLASS STYLE
   ================================================================= */

.esun-my-account.glass-ui {
    padding: 0; /* Remove padding from main container for full-width nav */
}

/* --- Glassmorphic Icon Navigation Bar --- */
.esun-account-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    background: rgba(0, 0, 0, 0.15); /* Darker glass for nav */
    border-bottom: 1px solid var(--esun-glass-border);
}
.esun-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s ease;
    border: 1px solid transparent;
}
.esun-nav-item svg {
    width: 26px;
    height: 26px;
    stroke: var(--esun-text-secondary);
    transition: all 0.3s ease;
}
.esun-nav-item span {
    font-size: 12px;
    font-weight: 500;
    color: var(--esun-text-secondary);
    transition: color 0.3s ease;
}
.esun-nav-item:hover { background: rgba(255, 255, 255, 0.1); }
.esun-nav-item.active { background: rgba(255, 255, 255, 0.15); }
.esun-nav-item.active svg { stroke: var(--esun-primary-color); }
.esun-nav-item.active span { color: var(--esun-primary-color); font-weight: 600; }

/* --- Main Content Area --- */
.esun-account-content { padding: 2.5em; }
.tab-content { display: none; animation: fadeIn 0.5s; }
.tab-content.active { display: block; }

.content-header { text-align: center; margin-bottom: 2.5em; }
.content-header h1 { font-size: 2.2em; margin-bottom: 0.2em; color: var(--esun-text-primary); }
.content-header p { color: var(--esun-text-secondary); font-size: 1.1em; margin: 0; max-width: 450px; margin-left: auto; margin-right: auto; }

/* --- Glassmorphic Cards & Forms --- */
.account-card, .glass-form {
    background: rgba(0, 0, 0, 0.1);
    padding: 1em !important;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.account-card h3 { margin-top: 0; color: var(--esun-text-primary); }
.account-card p { color: var(--esun-text-secondary); }

.glass-form label { font-weight: 600; margin-bottom: .5em; display: block; color: var(--esun-text-secondary); }
.glass-form input[type="text"], .glass-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--esun-text-primary);
    font-size: 1em;
    transition: all 0.2s ease;
}
.glass-form input[type="text"]:focus, .glass-form input[type="email"]:focus {
    outline: none;
    border-color: var(--esun-primary-color);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.5);
    background: rgba(0, 0, 0, 0.3);
}

/* --- Payment Methods --- */
.esun-saved-methods { list-style: none; padding: 0; }
.saved-method-card {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5em;
    margin-bottom: 1em;
}
.method-brand, .method-details strong { color: var(--esun-text-primary); }
.method-expiry, .default-badge { color: var(--esun-text-secondary); }
.button-link { color: var(--esun-primary-color); text-decoration: none; font-weight: 600; }
.button-link.delete { color: var(--esun-error-color); }


/* =================================================================
   6. MODERN APP-STYLE ORDERS PAGE
   ================================================================= */

.esun-orders-list { display: grid; gap: 1.5em; margin-top: 2em; }
.esun-order-card {
    display: block; text-decoration: none; padding: 1.5em; border-radius: 16px;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.esun-order-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.3);
}
.order-card-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.order-id { font-size: 1.1em; font-weight: 600; color: var(--esun-text-primary); }
.order-details-list { list-style: none; padding: 0; margin: 1.5em 0; display: flex; flex-wrap: wrap; gap: 1.5em; color: var(--esun-text-secondary); }
.order-details-list li { display: flex; align-items: center; gap: 0.75em; font-size: 0.9em; }
.order-details-list svg { width: 20px; height: 20px; stroke-width: 1.5; opacity: 0.7; }
.order-card-action { display: flex; justify-content: flex-end; align-items: center; gap: 0.5em; font-weight: 600; color: var(--esun-primary-color); transition: color 0.3s ease; }
.order-card-action svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.esun-order-card:hover .order-card-action { color: #fff; }
.esun-order-card:hover .order-card-action svg { transform: translateX(5px); }


/* =================================================================
   7. WOOCOMMERCE DEFAULT PAGE STYLES
   ================================================================= */
body.woocommerce-account .woocommerce { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; }
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
    
    border-radius: 16px;
    padding: 1.5em;
    color: var(--esun-text-primary);
}
body.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 280px; }
body.woocommerce-account .woocommerce-MyAccount-content { flex: 1; min-width: 0; }
body.woocommerce-account .woocommerce-MyAccount-content p { color: var(--esun-text-secondary); }
body.woocommerce-account .woocommerce-MyAccount-navigation-link a { color: var(--esun-text-secondary); }
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active > a { background-color: var(--esun-primary-color) !important; color: white !important; }

.sce-delivery-estimator{background: none !important;}
/* =================================================================
   8. SHARED & UTILITY COMPONENTS
   ================================================================= */

/* --- Buttons --- */
.esun-button {
    display: inline-block; width: 100%; padding: 14px; border: none; border-radius: 8px;
    font-size: 1em; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none;
    transition: all 0.3s ease;
    background-color: var(--esun-primary-color);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
}
.esun-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.3);
}
.esun-button.logout-button { background-color: var(--esun-logout-color); box-shadow: 0 4px 15px rgba(255, 59, 48, 0.2); }
.esun-button.logout-button:hover { background-color: var(--esun-logout-hover); box-shadow: 0 6px 20px rgba(255, 59, 48, 0.3); }



.esun-button-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--esun-text-primary);
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.esun-button-secondary:hover { background: rgba(255, 255, 255, 0.3); }

/* --- Accessibility & UX Enhancements --- */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; margin: -1px; overflow: hidden; padding: 0;
    position: absolute; width: 1px; word-wrap: normal !important;
}

.order-status {
    display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 600;
    line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline;
    border-radius: 9999px; text-transform: capitalize; color: #fff;
}
.order-status.status-completed { background-color: var(--esun-success-color); }
.order-status.status-processing { background-color: var(--esun-primary-color); }
.order-status.status-on-hold, .order-status.status-pending { background-color: #f0ad4e; }
.order-status.status-cancelled, .order-status.status-failed { background-color: #777; }
.order-status.status-refunded { background-color: var(--esun-text-secondary); color: #333; }


/* =================================================================
   9. RESPONSIVE DESIGN
   ================================================================= */
@media (max-width: 768px) {
    .esun-account-nav { padding: 5px 0; }
    .esun-nav-item svg { width: 22px; height: 22px; }
    .esun-nav-item span { font-size: 10px; }
    .esun-account-content, .esun-form-content { padding: 1.5em; }
    .account-grid { grid-template-columns: 1fr; }
    .glass-form .form-row { flex-direction: column; gap: 1em; }
    #esun-otp-inputs .otp-input{
        width: 45px;
    height: 50px;
    font-size: 1em;
    }
    .account-card, .glass-form{
        background:none !important;
        border:none !important;
    }
}



/* =================================================================
   WOOCOMMERCE - MY ACCOUNT ADDRESS BLOCKS (FLEXBOX FIX)
   ================================================================= */

/* --- Main container for the two address columns --- */
.woocommerce-account .woocommerce-Addresses.addresses {
    display: flex !important;
    flex-wrap: wrap !important; /* Allows stacking on mobile */
    gap: 2em !important;
    width: 100% !important;
}

/* --- Individual Address Card Styling --- */
.woocommerce-account .woocommerce-Address {
    flex: 1 !important; /* Allows both cards to grow and share the space */
    min-width: 300px !important; /* Prevents cards from getting too squished */
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 1.5em !important;
    box-sizing: border-box !important; /* Ensures padding is included in the width calculation */
}

/* --- Header section of the card --- */
.woocommerce-account .woocommerce-Address-title {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 1em !important;
    margin-bottom: 1em !important;
    border-bottom: 1px solid var(--esun-glass-border) !important;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    color: var(--esun-text-primary) !important;
    font-size: 1.5em !important;
    margin: 0 !important;
}

/* --- Styling the "Add" or "Edit" link --- */
.woocommerce-account .woocommerce-Address-title .edit {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--esun-text-secondary) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.9em !important;
    transition: all 0.2s ease-in-out !important;
    white-space: nowrap !important; /* Prevents the link text from wrapping */
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

/* --- Styling the address content area --- */
.woocommerce-account .woocommerce-Address address {
    color: var(--esun-text-secondary) !important;
    font-style: normal !important;
    line-height: 1.7 !important;
}

/* --- Responsive styles for mobile --- */
/* No media query is needed here, as flex-wrap will handle stacking automatically */

header.woocommerce-Address-title.title {
    background: none !important;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 5px !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation{
    display: none;
}


/* =================================================================
   WOOCOMMERCE - DEFAULT FORM FIELD STYLING (GLASS UI)
   ================================================================= */

/* --- General Form Layout --- */
.woocommerce-address-fields__field-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 20px !important; /* 0 vertical gap, 20px horizontal gap */
}

/* --- Form Rows --- */
.woocommerce-address-fields .form-row {
    margin-bottom: 1.5em !important;
    padding: 0 !important;
}
.woocommerce-address-fields .form-row-first,
.woocommerce-address-fields .form-row-last {
    width: calc(50% - 10px) !important; /* 50% width minus half the gap */
}
.woocommerce-address-fields .form-row-wide {
    width: 100% !important;
}
.woocommerce-address-fields .form-row-first {
    clear: both !important;
}

/* --- Field Labels & Text --- */
.woocommerce-address-fields label {
    font-weight: 600 !important;
    margin-bottom: .75em !important;
    display: block !important;
    color: var(--esun-text-secondary) !important;
}
.woocommerce-address-fields label .required {
    color: var(--esun-primary-color) !important;
}
.woocommerce-address-fields .optional {
    color: rgba(224, 224, 224, 0.5) !important;
}

/* --- Input & Select Fields --- */
.woocommerce-address-fields .input-text,
.woocommerce-address-fields .select,
.woocommerce-address-fields select {
    width: 100% !important;
    padding: 14px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: var(--esun-text-primary) !important;
    font-size: 1em !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.woocommerce-address-fields .input-text:focus,
.woocommerce-address-fields .select:focus,
.woocommerce-address-fields select:focus {
    outline: none !important;
    border-color: var(--esun-primary-color) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.5) !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Custom Select Dropdown Arrow --- */
.woocommerce-address-fields select,
.woocommerce-address-fields .select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e0e0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

/* --- Static Country Display --- */
.woocommerce-address-fields #billing_country_field strong,
.woocommerce-address-fields #shipping_country_field strong {
    color: var(--esun-text-secondary) !important;
    font-weight: normal !important;
}


/* --- Responsive for Mobile --- */
@media (max-width: 768px) {
    .woocommerce-address-fields .form-row-first,
    .woocommerce-address-fields .form-row-last {
        width: 100% !important;
    }
}

select#billing_city, .woocommerce-js form .form-row select {
    padding: 5px 10px !important;
}

/* =================================================================
   WOOCOMMERCE - NOTIFICATION MESSAGE STYLING (GLASS UI)
   ================================================================= */

.woocommerce-message {
    background: rgba(52, 199, 89, 0.15) !important; /* Translucent green background */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(52, 199, 89, 0.3) !important;
    border-radius: 16px !important;
    color: var(--esun-success-color) !important;
    padding: 1em 1.5em !important;
    margin: 0 0 2em 0 !important;
    font-weight: 600 !important;
    list-style: none !important; /* Removes default list-style bullets */
}

/* Adds a checkmark icon before the message text */
.woocommerce-message::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
    transform: translateY(-2px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.woocommerce-message {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* =================================================================
   WOOCOMMERCE - VIEW ORDER DETAILS PAGE STYLES (GLASS UI)
   ================================================================= */

/* --- Main "View Order" Content Area --- */
.woocommerce-MyAccount-content {
    color: var(--esun-text-secondary) !important;
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    color: var(--esun-text-primary) !important;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--esun-glass-border);
    margin: 2em 0 1em;
}

/* --- Top Summary Text Styling --- */
.woocommerce-MyAccount-content p:first-of-type {
    font-size: 1.1em;
    line-height: 1.7;
}
.woocommerce-MyAccount-content mark.order-number,
.woocommerce-MyAccount-content mark.order-date,
.woocommerce-MyAccount-content mark.order-status {
    background: rgba(0, 0, 0, 0.2);
    color: var(--esun-text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
}
.woocommerce-MyAccount-content mark.order-status {
    background-color: var(--esun-primary-color);
}


/* --- Order & Customer Details Sections as Glass Cards --- */
.woocommerce-order-details,
.woocommerce-customer-details {
    background: rgba(0, 0, 0, 0.15);
    padding: 2em;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.5em;
}

/* --- Order Details Table Styling --- */
.shop_table.order_details {
    width: 100% !important;
    background: transparent !important;
    border-radius: 12px !important;
    border: none !important;
}
.shop_table.order_details th,
.shop_table.order_details td {
    color: var(--esun-text-secondary) !important;
    border-color: var(--esun-glass-border) !important;
    padding: 1em !important;
}
.shop_table.order_details thead th {
    color: var(--esun-text-primary) !important;
    font-weight: 600 !important;
}
.shop_table.order_details .product-name a {
    color: var(--esun-text-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.shop_table.order_details .product-name a:hover {
    color: var(--esun-primary-color) !important;
}
.shop_table.order_details tfoot th {
    font-weight: 600 !important;
    color: var(--esun-text-primary) !important;
    border-top: 1px solid var(--esun-glass-border) !important;
}
.shop_table.order_details tfoot td {
    font-weight: 600 !important;
    color: var(--esun-text-primary) !important;
    border-top: 1px solid var(--esun-glass-border) !important;
}

/* --- Customer Details Address Block --- */
.woocommerce-customer-details address {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5em;
    font-style: normal;
    line-height: 1.8;
}


/* --- Responsive styles for mobile --- */
@media (max-width: 768px) {
    /* ... other responsive rules ... */

    /* --- View Order Page Table on Mobile (CSS-Only Card View) --- */
    .woocommerce-order-details .shop_table.order_details thead {
        display: none !important; /* Hide table headers on mobile */
    }

    /* Style the main body rows (each product) as a card */
    .woocommerce-order-details .shop_table.order_details tbody tr {
        display: block !important;
        border: 1px solid var(--esun-glass-border) !important;
        border-radius: 12px !important;
        margin-bottom: 1.5em !important;
        padding: 1em !important;
        background: rgba(0,0,0,0.1) !important;
    }

    .woocommerce-order-details .shop_table.order_details tbody td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        border: none !important;
        padding: 0 !important;
    }

    .woocommerce-order-details .shop_table.order_details tbody td.product-name {
        font-size: 1.1em !important;
        margin-bottom: 0.75em !important;
    }

    .woocommerce-order-details .shop_table.order_details tbody td.product-total {
        font-size: 1.2em !important;
        font-weight: bold !important;
        color: var(--esun-text-primary) !important;
    }
    
    /* Add a "Total:" label before the price for clarity */
    .woocommerce-order-details .shop_table.order_details tbody td.product-total::before {
        content: 'Total: ' !important;
        font-weight: normal !important;
        font-size: 0.8em !important;
        color: var(--esun-text-secondary) !important;
        margin-right: 0.5em;
    }

    /* Style the footer rows (Subtotal, Shipping, etc.) as a list */
    .woocommerce-order-details .shop_table.order_details tfoot {
        margin-top: 1.5em;
    }
    
    .woocommerce-order-details .shop_table.order_details tfoot tr {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 12px 0 !important;
    }

    .woocommerce-order-details .shop_table.order_details tfoot th,
    .woocommerce-order-details .shop_table.order_details tfoot td {
        display: inline !important;
        border: none !important;
        padding: 0 !important;
    }
}

.woocommerce-js table.shop_table thead, .woocommerce-page table.shop_table thead{ background: none !important;}
h2.woocommerce-column__title {background: none !important;}