/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* Add your custom styles here */


/* =============================================================
   1. Select2 dropdowns look 100% identical to normal inputs
   ============================================================= */
.woocommerce .select2-container--default .select2-selection--single,
.elementor-widget-woocommerce-checkout-page .select2-container--default .select2-selection--single,
.woocommerce-account .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 100% !important;
    padding: 0 !important;
    border: none !important;
    border-radius: var(--forms-fields-border-radius, 0) !important;
}

.select2-container {
    margin-bottom: 3px !important;
}

.woocommerce .select2-selection__rendered,
.elementor-widget-woocommerce-checkout-page .select2-selection__rendered,
.woocommerce-account .select2-selection__rendered {
    padding: var(--forms-fields-padding, 16px) !important;   /* uses Elementor’s own padding */
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    line-height: normal !important;                          /* kills the bad 45px line-height */
}

/* Arrow perfectly centered – checkout + my-account everywhere */
.woocommerce .select2-selection__arrow,
.elementor-widget-woocommerce-checkout-page .select2-selection__arrow,
.woocommerce-account .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Remove tiny margin on arrow SVG */
.select2-selection__arrow b {
    margin: 0 !important;
}

/* =============================================================
   2. MY ACCOUNT → ACCOUNT DETAILS – Styling
   ============================================================= */
/* 1. ALL HEADERS – identical styling (size, weight, color) */
.woocommerce-edit-account fieldset legend,
.woocommerce-edit-account #shipping_fields_wrapper legend {
    font-size: 1.8em !important;
    font-weight: 800 !important;
    color: var(--forms-labels-color, #333) !important;
    margin: 0 0 50px 0 !important; /* ← only bottom margin */
    padding: 0 !important;
    line-height: 1.2 !important;
}
.woocommerce-edit-account fieldset, .woocommerce-edit-account #shipping_fields_wrapper {
    margin-top: 100px !important; /* ← Billing section top spacing */
    padding: 0 !important;
}
.custom-account-fieldset {
    border: 0;
}

/* 3. "Same as shipping address" text – smaller & clean */
.woocommerce-edit-account .woocommerce-form-row label[for="shipping_same_as_billing"] span,
.woocommerce-edit-account .woocommerce-form-row label:has(#shipping_same_as_billing) span {
    font-size: 1.05em !important;
    font-weight: 500 !important;
    color: var(--forms-labels-color, #333) !important;
    margin-left: 10px !important;
    line-height: 1.5 !important;
}
/* 4. Checkbox */
.woocommerce-edit-account #shipping_same_as_billing {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    transform: translateY(1px);
}

/* =============================================================
   3. Dashboard Layout Responsive
   ============================================================= */

/* 50% width on inline form fields */
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 48% !important;
}

/* Tablet: vertical menu */
@media (max-width: 1024px) {
    .e-wc-account-tabs-nav nav.woocommerce-MyAccount-navigation ul {
      	display: flex !important;
        flex-direction: column !important; /* vertical */
        gap: 5px !important;
    }
}

/* Tablet (and smaller): remove the inline padding added by horizontal layout */
@media (max-width: 1024px) {
  .e-my-account-tabs-horizontal .e-wc-account-tabs-nav .woocommerce-MyAccount-navigation ul li {
    padding: 0 !important;
  }
}

/* Tablet (and smaller): remove the wrapper padding */
@media (max-width: 1024px) {
  .elementor-widget-woocommerce-my-account .e-my-account-tab__edit-account .woocommerce-MyAccount-content-wrapper {
    padding: 0 !important;
  }
}

/* =============================================================
   4. Cart Page
   ============================================================= */
/* Tablet (and smaller): remove the product photo from summary and shipping text + calculation from totals */
@media (max-width: 1024px) {
  .product-thumbnail, .shipping_pickup_cart {
    display: none !important;
  }
}

/* Remove the sub total price from summary */
.product-subtotal {
    display: none !important;
  }

/* Right margin on remove button */
.product-remove {
  padding-right: 20px !important;
}

/* Larger remove button */
.woocommerce a.remove {
  font-size: 2em !important;
}

/* Rounded image */
.product-thumbnail a img {
  border-radius: 16px;
}

/* Text styling and link color */
.product-name a:hover, .shipping-calculator-button:hover {
  color: #FFFCCA !important;
}
.shipping-calculator-button {
  color: #F9EB1D !important;
}
.shipping_pickup_cart, .woocommerce-shipping-calculator label, .product-name a {
  color: #fff !important;
}
.shipping_pickup_cart, .woocommerce-shipping-calculator label {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 23px;
}


/* Shipping calculation text removal */
.woocommerce-shipping-destination {
  display: none;
}

/* Force WooCommerce responsive tables on tablet/mobile */
@media (max-width: 1024px) {
    .woocommerce-cart .e-shop-table table.shop_table_responsive thead {
        display: none;
    }
    .woocommerce-cart .e-shop-table table.shop_table_responsive tr {
        display: block;
    }
    .woocommerce-cart .e-shop-table table.shop_table_responsive td {
        display: flex;
        justify-content: space-between;
        width: 100%;
      	border: none !important;
    }
    .woocommerce-cart .e-shop-table table.shop_table_responsive td::before {
        content: attr(data-title) "";
    }
}

/* Center text inside WooCommerce quantity input */
.quantity .qty {
    text-align: center !important;
}

.xoo-wsc-ft-buttons-cont a {
    font-family: "Archivo", Sans-serif;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 0;
    word-spacing: 0;
}
/* =============================================================
   5. Product Page
   ============================================================= */
/* Small before price on product on sale */
.product.sale .price del span {
  font-size: 16px;
  text-decoration: line-through !important;
}
/* Remove standard underline */
.product.sale .price del {
  text-decoration: none;
  opacity: .5 !important;
}

/* Fix bottom margin on sales price */
.elementor-widget-woocommerce-product-price .price, .elementor-widget-woocommerce-product-price .price del {
    margin-block-end: 0;
    margin-bottom: 0 !important;
}
/* Style sale badge next to price */
.woocommerce div.product p.price .sale-pill {
    display: inline-block;
    margin-left: 6px;          /* space between del and pill */
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    background: var(--e-global-color-secondary);       /* pill color */
    color: #212121;
    border-radius: 999px;
    line-height: 1;
    vertical-align: middle;    /* align with del */
    white-space: nowrap;
}

/* Make del + sale-pill inline and aligned */
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .woocommerce-Price-amount,
.woocommerce div.product p.price del + .sale-pill {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Optional: ensure ins (current price) stays below */
.woocommerce div.product p.price ins {
    display: block;
}

/* Hide old add to cart button */
.single_add_to_cart_button, .elementor-widget-woocommerce-product-add-to-cart {
    display: none !important;
}
#my-add-to-cart-btn {
    cursor: pointer;
}

/* Custom swatches container */
.custom-swatch-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
    gap: 16px;
}

/* Individual swatch box */
.custom-swatch {
    display: flex;
    flex-direction: column;      /* stack text and price/checkmark */
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    aspect-ratio: 2 / 1;
    border: 2px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
}

/* Active swatch styling */
.custom-swatch.active {
    border-width: 2px;
    border-color: #0C4D2E !important;
    background-color: rgba(12, 77, 46, 0.25);
    outline: 1px solid #0C4D2E;
    outline-offset: -1px;
}

/* Hover effect */
.custom-swatch:hover {
    border-color: rgba(12, 77, 46, 0.5);
    outline: 1px solid rgba(12, 77, 46, 0.5);
    outline-offset: -1px;
}

/* Checkmark inside active swatch */
.custom-swatch.active::after {
    content: "✔";               /* checkmark symbol */
    display: block;
    font-size: 14px !important;             /* size adjustable */
    color: #0C4D2E;              /* color adjustable */
}

/* Price difference for inactive swatches for same styling instead of separate
.custom-swatch .price-diff {
    color: #000;
    font-weight: 700;
    font-size: 14px;
} */

/* Style the entire positive price */
.custom-swatch .price-diff .price-plus {
    color: green;      /* text color */
    font-weight: 300;  /* font weight */
    font-size: 14px !important;   /* font size */
}

/* Style the entire negative price */
.custom-swatch .price-diff .price-minus {
    color: red;
    font-weight: 300;
    font-size: 14px !important;
}

/* 1. Out of stock swatch box */
.custom-swatch.out-of-stock {
    opacity: 0.5;                  /* semi-transparent to indicate disabled */
    cursor: not-allowed;           /* pointer changes to not-allowed */
    border-color: #212121;            /* lighter border */
    background-color: #f8f8f8;    /* optional light background */
    pointer-events: none;          /* disable clicks */
}

/* 2. Out of stock attribute text (inside the swatch) */
.custom-swatch.out-of-stock .swatch-label {
    color: #212121;                   /* gray text for disabled label */
    text-decoration: line-through;
}

/* 3. Out of stock price/status text */
.custom-swatch.out-of-stock .price-diff {
    color: #212121;                /* red, matches your price difference style */
    font-weight: 300;
    font-size: 14px;               /* keep consistent with other swatches */
    content: 'Out of stock';       /* ensure "Out of stock" shows */
}

/* =============================================================
   Mobile fix – vertical full-width swatches
   ============================================================= */
@media (max-width: 1024px) {

    .custom-swatch-container {
        display: grid;
        grid-template-columns: 1fr; /* single column */
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .custom-swatch {
        width: 100%;
        aspect-ratio: auto;      /* disable forced ratio on mobile */
        min-height: 56px;        /* nice tap height */
    }

    /* Safety net: prevent page-wide horizontal scroll */
    body,
    .elementor-section,
    .elementor-column,
    .elementor-widget-wrap {
        max-width: 100%;
        overflow-x: hidden;
    }
}


/* 4. Stock element styling */
.custom-stock.in-stock .elementor-heading-title {
    color: #0C4D2E;
}
.custom-stock.low-stock .elementor-heading-title {
    color: red;
}
.custom-stock.out-of-stock .elementor-heading-title {
    color: #212121;
}

/* =============================================================
   Service point and Shipmondo styling
   ============================================================= */
.service_point {
    background-color: #FFFFFF !important;
    color: #212121 !important;
    border: none !important;
    border-radius: 8px !important;
}

.service_point:hover {
    background-color: #eeeeee !important;
}

.powered_by_shipmondo {
    display: none !important;
}

.shipmondo-modal_header {
    color: #212121 !important;
}

/* =============================================================
   Checkout edits
   ============================================================= */
@media (max-width: 1024px) {
    .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment .payment_methods li label img {
        width: 30px !important;
    }
}
/* Ensure proper display for colspan cells */
.woocommerce-checkout tr.woocommerce-shipping-totals th[colspan="2"],
.woocommerce-checkout tr.woocommerce-shipping-totals-content td[colspan="2"] {
    display: table-cell !important;
    width: auto !important;
}

.woocommerce-shipping-totals th, .order-total th{
    font-size: 24px !important;
}

.woocommerce-shipping-totals {
    padding: 0 !important;
    margin: 30px 0 !important;
}

th.product-total {
    display: none !important;
}

.order-total td, .woocommerce ul#shipping_method .amount, .cart-subtotal td, .cart_item .product-total{
    float: right !important;
}

.e-coupon-anchor-description, .e-login-wrap label {
    color: #ffffff !important;
}