/* ==========================================================================
   WOOCOMMERCE PREMIUM DARK MODE (BLOCKS & CLASSIC)
   ========================================================================== */

.woocommerce, .woocommerce-page, body.woocommerce-page, .wc-block-cart, .wc-block-checkout {
    --wc-bg: #05080f;
    --wc-card: rgba(15, 23, 42, 0.6);
    --wc-border: rgba(255, 255, 255, 0.15);
    --wc-accent: #00e5ff;
    --wc-text: #f8fafc;
    --wc-text-dim: #94a3b8;
    color: var(--wc-text) !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Base Body Override */
body {
    background-color: var(--wc-bg) !important;
    color: var(--wc-text) !important;
}

body.woocommerce-page, body.woocommerce-cart, body.woocommerce-checkout {
    background-image: radial-gradient(circle at 50% 0%, #111827 0%, var(--wc-bg) 70%) !important;
}

/* Layout Container */
div.woocommerce,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
body.woocommerce-page .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
    max-width: 1200px !important;
    margin: 80px auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Title */
.wp-block-post-title, .wc-block-cart__title {
    color: var(--wc-accent) !important;
    font-weight: 800 !important;
}

/* --------------------------------------
   BLOCK THEME (GUTENBERG) OVERRIDES
   -------------------------------------- */
.wc-block-cart-items, .wc-block-components-order-summary, .wc-block-checkout__payment-interfaces {
    background: var(--wc-card) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--wc-border) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

/* Text colors in blocks */
.wc-block-components-product-name, .wc-block-components-product-price, .wc-block-components-totals-item__value, .wc-block-components-totals-item__label {
    color: var(--wc-text) !important;
}

/* Product Metadata (Custom Fields) */
.wc-block-components-product-metadata {
    color: var(--wc-text-dim) !important;
    line-height: 1.8 !important;
    font-size: 0.85rem !important;
    margin-top: 15px !important;
    padding: 15px !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px dashed rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    display: block !important;
}

.wc-block-components-product-metadata__separator {
    display: inline-block !important;
    margin: 0 5px !important;
    color: var(--wc-accent) !important;
}

/* Cart Item Image / Thumbnail */
.wc-block-components-product-image,
.wc-block-cart-item__image {
    max-width: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin-right: 20px !important;
}

.wc-block-components-product-image img,
.wc-block-cart-item__image img {
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
}

/* Buttons in blocks */
.wc-block-components-button:not(.is-link), .wc-block-cart__submit-button, .wc-block-components-checkout-button {
    background: linear-gradient(135deg, #00e5ff 0%, #00bfff 100%) !important;
    color: #05080f !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 15px 30px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 20px rgba(0, 229, 255, 0.3) !important;
}

.wc-block-components-button:not(.is-link):hover, .wc-block-components-checkout-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(0, 229, 255, 0.5) !important;
    background: linear-gradient(135deg, #00f5ff 0%, #0088ff 100%) !important;
    color: #000 !important;
}

/* Inputs & Quantity in blocks */
.wc-block-components-text-input {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 8px !important;
}

.wc-block-components-text-input input {
    color: #fff !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 24px 16px 8px !important;
    line-height: 1.2 !important;
    min-height: 54px !important;
}

.wc-block-components-text-input label {
    color: var(--wc-text-dim) !important;
}

.wc-block-components-text-input:focus-within {
    border-color: var(--wc-accent) !important;
    box-shadow: 0 0 0 1px var(--wc-accent) !important;
    outline: none !important;
}

.wc-block-components-quantity-selector {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid var(--wc-border) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 40px !important;
    width: 120px !important; /* Force width to contain all 3 items */
    padding: 0 !important;
}

.wc-block-components-quantity-selector input {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    border-left: 1px solid var(--wc-border) !important;
    border-right: 1px solid var(--wc-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex: 1 !important;
    height: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc-block-components-quantity-selector button {
    color: var(--wc-accent) !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.3s ease !important;
    width: 35px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wc-block-components-quantity-selector button:hover {
    background: rgba(0, 229, 255, 0.1) !important;
}

/* Remove / Trash Button */
.wc-block-cart-item__remove-link,
button.wc-block-cart-item__remove-link {
    color: #ef4444 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translateX(-10px) !important;
    cursor: pointer !important;
    width: 35px !important;
    height: 35px !important;
    font-size: 20px !important; /* In case it's a font icon */
}

.wc-block-cart-item__remove-link svg,
button.wc-block-cart-item__remove-link svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    fill: currentColor !important;
}

.wc-block-cart-item__remove-link:hover,
button.wc-block-cart-item__remove-link:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    transform: scale(1.1) !important;
}

/* Remove Focus Rings */
*:focus {
    outline: none !important;
}

/* --------------------------------------
   CLASSIC THEME OVERRIDES (Fallback)
   -------------------------------------- */
.woocommerce table.shop_table {
    border: none;
    border-radius: 16px;
    background: var(--wc-card);
    backdrop-filter: blur(24px);
    border: 1px solid var(--wc-border);
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}
.woocommerce table.shop_table th { background: rgba(0,0,0,0.3); color: var(--wc-text); border-bottom: 1px solid var(--wc-border); }
.woocommerce table.shop_table td { border-top: 1px solid var(--wc-border); }
.woocommerce .cart-item-data { color: var(--wc-text-dim); }
.woocommerce .cart-item-data dt { color: var(--wc-accent); }
.woocommerce .button { background: var(--wc-accent) !important; color: #000 !important; border-radius: 30px !important; }

/* --------------------------------------
   EMPTY CART STATE
   -------------------------------------- */
.wc-block-cart__empty-page,
.cart-empty,
.wc-empty-cart-message {
    background: rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 32px !important;
    padding: 60px 40px !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 60px auto !important;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.wc-block-cart__empty-page svg,
.cart-empty::before {
    color: var(--wc-accent) !important;
    fill: var(--wc-accent) !important;
    width: 90px !important;
    height: 90px !important;
    margin: 0 auto 30px !important;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5)) !important;
    display: block !important;
}

.wc-block-cart__empty-cart__title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    background: linear-gradient(135deg, #fff, #94a3b8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Hide default divider dots if they exist */
.wp-block-separator {
    display: none !important;
}

.wp-block-heading {
    color: var(--wc-accent) !important;
    font-weight: 700 !important;
    margin-top: 40px !important;
}

/* --------------------------------------
   MY ACCOUNT & LOGIN FORMS
   -------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce form.login, 
.woocommerce form.register {
    background: var(--wc-card) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--wc-border) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
}

.woocommerce-account .u-columns {
    display: flex !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    flex: 1 !important;
    min-width: 300px !important;
    width: 100% !important;
}

/* My Account Form Inputs */
.woocommerce form.login input[type="text"],
.woocommerce form.login input[type="password"],
.woocommerce form.login input[type="email"],
.woocommerce form.register input[type="text"],
.woocommerce form.register input[type="password"],
.woocommerce form.register input[type="email"],
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    background: rgba(0,0,0,0.4) !important;
    border: 1px solid var(--wc-border) !important;
    color: var(--wc-text) !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    width: 100% !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
}

.woocommerce form.login label,
.woocommerce form.register label,
.woocommerce-MyAccount-content label {
    color: var(--wc-text-dim) !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* Buttons */
.woocommerce form.login .woocommerce-Button,
.woocommerce form.register .woocommerce-Button,
.woocommerce-MyAccount-content .button,
.woocommerce-ResetPassword .button {
    background: linear-gradient(135deg, #00e5ff 0%, #00bfff 100%) !important;
    color: #05080f !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 12px 25px !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 20px rgba(0, 229, 255, 0.3) !important;
    cursor: pointer !important;
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    margin-top: 15px !important;
}

.woocommerce form.login .woocommerce-Button:hover,
.woocommerce form.register .woocommerce-Button:hover,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-ResetPassword .button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 30px rgba(0, 229, 255, 0.5) !important;
    background: linear-gradient(135deg, #00f5ff 0%, #0088ff 100%) !important;
    color: #000 !important;
}

/* Lost Password Link */
.woocommerce-LostPassword a {
    color: var(--wc-accent) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.3s !important;
}
.woocommerce-LostPassword a:hover {
    color: #fff !important;
    text-shadow: 0 0 10px var(--wc-accent) !important;
}

/* Checkbox Remember Me */
.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
    accent-color: var(--wc-accent) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}

/* Navigation List inside My Account */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 10px !important;
}
.woocommerce-MyAccount-navigation ul li a {
    color: var(--wc-text) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: block !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    transition: all 0.3s !important;
    background: rgba(255,255,255,0.05) !important;
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(0, 229, 255, 0.15) !important;
    color: var(--wc-accent) !important;
}

/* Fix for Password Visibility Toggle (Eye Icon) */
.woocommerce form .password-input {
    position: relative !important;
    display: block !important;
}

.woocommerce form .show-password-input,
.woocommerce-MyAccount-content .button.show-password-input {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Eye with slash (default/hidden) */
.woocommerce form .show-password-input::before,
.woocommerce-MyAccount-content .button.show-password-input::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%230088ff"/></svg>') !important;
    content: "";
    display: block;
    width: 22px;
    height: 22px;
}

/* Eye normal (visible) */
.woocommerce form .show-password-input.display-password::before,
.woocommerce-MyAccount-content .button.show-password-input.display-password::before {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%230088ff"/></svg>') !important;
}

/* Hover effect */
.woocommerce form .show-password-input:hover::before,
.woocommerce-MyAccount-content .button.show-password-input:hover::before {
    filter: brightness(1.3);
}

.woocommerce form .show-password-input::after {
    display: none !important; /* Hide font icon if any theme tries to use it */
}

/* Fix for Logged-In My Account Layout */
.woocommerce-account.logged-in .woocommerce {
    display: flex !important;
    gap: 30px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

.woocommerce-account.logged-in .woocommerce-MyAccount-navigation {
    flex: 0 0 250px !important;
    width: 250px !important;
    float: none !important; /* Override standard WC float */
}

.woocommerce-account.logged-in .woocommerce-MyAccount-content {
    flex: 1 !important;
    min-width: 300px !important;
    width: auto !important;
    float: none !important; /* Override standard WC float */
}

/* Fix default blue links in My Account */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: var(--wc-accent) !important;
    text-decoration: none !important;
}

.woocommerce-account .woocommerce-MyAccount-content a:hover {
    text-decoration: underline !important;
    color: #00bfff !important;
}