/*
Theme Name: BLACKPIXEL Child
Theme URI: https://blackpixel.in/
Description: Custom child theme for BLACKPIXEL Products storefront.
Author: BLACKPIXEL Team
Template: blocksy
Version: 1.0.0
*/

/* ═══════════════════════════════════════════════════════════════
   Single Product Page Layout Overrides (Main Photo Size Fix)
   ═══════════════════════════════════════════════════════════════ */

/* Increase single product gallery column width in Blocksy */
.single-product div.product {
    --gallery-width: 55% !important;
}

/* Ensure the gallery wrappers take up full column width and use natural height */
.single-product .woocommerce-product-gallery,
.single-product .ct-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Force the main product image to scale to 100% width and maintain natural aspect ratio */
.single-product .woocommerce-product-gallery img,
.single-product .ct-product-gallery img,
.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .single-product div.product {
        --gallery-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BLACKPIXEL Dealer Program Mobile Layout Fix
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* Center the flex content on mobile/tablet */
    .dealer-section .dealer-content {
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Make the dealer section fit on mobile screens */
    .dealer-section {
        padding: 40px 20px !important;
        border-radius: 20px !important;
        gap: 30px !important;
        margin: 0 16px !important; /* Provide side margins on mobile */
    }
    
    /* Center the heading alignment */
    .dealer-section h1 {
        font-size: 36px !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Center description text and adjust line height */
    .dealer-section .description {
        font-size: 16px !important;
        line-height: 1.6 !important;
        text-align: center !important;
    }
    
    /* Adjust buttons on mobile to stack vertically and take full width */
    .dealer-section .button-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: stretch !important;
    }
    
    .dealer-section .btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
    
    /* Adjust tag alignment */
    .dealer-section .tag {
        margin-bottom: 20px !important;
        justify-content: center !important;
    }
    
    /* Adjust image layout */
    .dealer-section .image-box img {
        max-width: 100% !important;
        height: auto !important;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BLACKPIXEL Dark Background Theme Overrides
   ═══════════════════════════════════════════════════════════════ */

/* Force main site page background, content wrappers, and entry areas to black */
body, 
#main, 
.site-container, 
#content, 
.entry-content, 
.post-inner, 
.page-template-default #main,
.elementor-template-full-width #main,
.elementor-page #main {
    background-color: #050505 !important;
    background: #050505 !important;
}

/* == SHOP PAGE TITLE FIX == */
/* Hide the Blocksy theme default "Shop" page title which duplicates the widget header */
.page-id-1551 .hero-section .entry-header,
.page-id-1551 .hero-section,
body.page-id-1551 .hero-section {
  display: none !important;
}

/* Also fix for WooCommerce shop archive (non-page) */
.is-shop .hero-section .entry-header {
  display: none !important;
}
.is-shop .hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: unset !important;
}


/* ═══════════════════════════════════════════════════════════════
   BLACKPIXEL WooCommerce Checkout, Cart, and Account Pages Fix
   Applied: v1.0 - Full cinematic editorial dark theme style
   ═══════════════════════════════════════════════════════════════ */

/* ── WOOCOMMERCE DARK CONTAINER CARDS ── */
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields,
.woocommerce-checkout-review-order,
#payment,
.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content,
.woocommerce-order {
    background: #0d0d0d !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    padding: 35px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

/* ── HEADINGS ── */
.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-cart h3,
.woocommerce-MyAccount-content h2,
.woocommerce-order h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    padding-bottom: 12px !important;
}

/* ── FORM LABELS & FIELD TYPOGRAPHY ── */
.woocommerce label,
.woocommerce-checkout label,
.woocommerce-cart label,
.woocommerce-MyAccount-content label {
    color: #a6a6a6 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
}
.woocommerce label .required {
    color: #E10600 !important;
    text-decoration: none !important;
}

/* ── FIELD INPUTS & TACTICAL STYLING ── */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-cart input,
.woocommerce-cart select,
.select2-container--default .select2-selection--single {
    background-color: #050505 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #E10600 !important;
    outline: none !important;
    box-shadow: 0 0 15px rgba(225, 6, 0, 0.25) !important;
    background-color: #080808 !important;
}

/* ── SELECT2 INNER OVERRIDES ── */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #a6a6a6 transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #a6a6a6 transparent !important;
}
.select2-dropdown {
    background-color: #0d0d0d !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    z-index: 99999 !important;
    overflow: hidden !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #050505 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(225, 6, 0, 0.15) !important;
    color: #ffffff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #E10600 !important;
    color: #ffffff !important;
}

/* ── REVIEW ORDER TABLE ── */
.shop_table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    margin-bottom: 0 !important;
}
.shop_table th, 
.shop_table td {
    padding: 18px 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    background: transparent !important;
    text-align: left !important;
}
.shop_table thead th {
    border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-size: 11px !important;
    color: #a6a6a6 !important;
}
.shop_table .cart_item:hover td {
    background: rgba(255, 255, 255, 0.01) !important;
}
.order-total th, 
.order-total td {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: none !important;
    padding: 24px 12px !important;
}
.order-total th {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
}
.order-total td {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #E10600 !important;
}

/* ── PAYMENT METHODS ── */
.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}
.wc_payment_methods li {
    padding: 20px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    margin-bottom: 15px !important;
    transition: border-color 0.3s ease !important;
}
.wc_payment_methods li:hover {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.wc_payment_methods li input[type="radio"] {
    margin-right: 12px !important;
    accent-color: #E10600 !important;
    transform: scale(1.1) !important;
    vertical-align: middle !important;
}
.wc_payment_methods li label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 0 !important;
}
.payment_box {
    font-size: 13px !important;
    color: #a6a6a6 !important;
    margin-top: 15px !important;
    padding: 15px 0 0 28px !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
    line-height: 1.6 !important;
}
.payment_box p {
    margin: 0 !important;
}

/* ── BUTTONS (BRAND RED EDITORIAL STYLE) ── */
#place_order,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: #E10600 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    padding: 18px 36px !important;
    border-radius: 12px !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(225, 6, 0, 0.35) !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}
#place_order:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: #ff2a24 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(225, 6, 0, 0.55) !important;
    color: #ffffff !important;
}
#place_order:active,
.woocommerce button.button:active {
    transform: translateY(0) !important;
}
#place_order:disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled] {
    background: #222222 !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Secondary Button (Coupon, Update Cart, Return to Shop) */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce-cart-form__contents .coupon button.button,
.woocommerce-cart-form__contents button[name="update_cart"] {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-cart-form__contents .coupon button.button:hover,
.woocommerce-cart-form__contents button[name="update_cart"]:hover {
    background: #ffffff !important;
    color: #050505 !important;
    border-color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* ── NOTICES & NOTIFICATION BLOCKS ── */
.woocommerce-info,
.woocommerce-error,
.woocommerce-message,
.woocommerce-NoticeGroup {
    background: #0d0d0d !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-left: 4px solid #E10600 !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    font-size: 14px !important;
    margin-bottom: 30px !important;
    list-style: none !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4) !important;
}
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::before {
    color: #E10600 !important;
    font-size: 16px !important;
    margin-right: 12px !important;
}
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-message a {
    color: #E10600 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    display: inline-block !important;
    margin-left: 5px !important;
}
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-message a:hover {
    color: #ff2a24 !important;
    text-decoration: underline !important;
}

/* ── CART PAGE SPECIFIC STYLING ── */
.woocommerce-cart-form__contents img {
    max-width: 70px !important;
    border-radius: 10px !important;
    background: #050505 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.product-remove a {
    color: #666666 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}
.product-remove a:hover {
    color: #E10600 !important;
}
.woocommerce-cart-form__contents .coupon {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 20px !important;
}
.woocommerce-cart-form__contents .coupon input {
    max-width: 250px !important;
}
.woocommerce-cart-form__contents button[name="update_cart"] {
    margin-top: 20px !important;
    float: right !important;
    width: auto !important;
}
.cart-collaterals .cart_totals {
    width: 100% !important;
}

/* ── CHECKOUT PAGE LAYOUT DESIGN (GRID ON DESKTOP) ── */
@media (min-width: 992px) {
    .woocommerce-checkout {
        display: grid !important;
        grid-template-columns: 1.25fr 0.75fr !important;
        gap: 50px !important;
        align-items: start !important;
    }
    #customer_details {
        grid-column: 1 !important;
        margin-bottom: 0 !important;
    }
    #order_review_heading {
        grid-column: 2 !important;
        margin-top: 0 !important;
    }
    #order_review {
        grid-column: 2 !important;
    }
    #customer_details .col-1,
    #customer_details .col-2 {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }
    .woocommerce-checkout-review-order {
        margin-bottom: 0 !important;
    }
}

/* ── MOBILE / TABLET OPTIMIZATIONS ── */
@media (max-width: 991px) {
    .woocommerce-billing-fields,
    .woocommerce-shipping-fields,
    .woocommerce-additional-fields,
    .woocommerce-checkout-review-order,
    #payment,
    .woocommerce-cart-form,
    .cart-collaterals,
    .woocommerce-MyAccount-navigation,
    .woocommerce-MyAccount-content {
        padding: 24px !important;
    }
    .woocommerce-cart-form__contents button[name="update_cart"] {
        float: none !important;
        width: 100% !important;
        margin-top: 15px !important;
    }
    .woocommerce-cart-form__contents .coupon {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .woocommerce-cart-form__contents .coupon input {
        max-width: 100% !important;
    }
}

/* ── MY ACCOUNT PAGE SPECIFIC ── */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.woocommerce-MyAccount-navigation li {
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    transition: all 0.2s ease !important;
}
.woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #a6a6a6 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.01) !important;
    transition: all 0.3s ease !important;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li:hover a {
    background: #E10600 !important;
    color: #ffffff !important;
}

/* ── THANK YOU / ORDER RECEIVED PAGE ── */
.woocommerce-order-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 35px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
}
@media (min-width: 768px) {
    .woocommerce-order-overview {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.woocommerce-order-overview li {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    padding: 15px !important;
    text-align: center !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #a6a6a6 !important;
}
.woocommerce-order-overview li strong {
    display: block !important;
    font-size: 15px !important;
    color: #ffffff !important;
    margin-top: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Adjustments for WooCommerce columns set */
.woocommerce .col2-set {
    display: block !important;
    width: 100% !important;
}