/*
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.4
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
*/

/* =============================================================
   1. Select2 dropdowns look 100% identical to normal inputs
   ============================================================= */

/* SELECT2 OVERVIEW: Select2 is a jQuery plugin that WooCommerce uses for
   country/state dropdown menus. These styles make the dropdowns match your
   regular input field styling instead of having their own separate appearance.
   UNIVERSAL - good for consistent form styling across your site. */

/* SELECT2 CONTAINER: The outer wrapper of the dropdown.
   Targets WooCommerce checkout pages, Elementor checkout widget, and My Account pages.
   Removes default Select2 styling to match your input fields. */
   .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;              /* Let height be determined by content/padding */
       min-height: 100% !important;          /* Fill parent container height */
       padding: 0 !important;                /* Remove default padding (controlled by inner element) */
       border: none !important;              /* Remove border (should come from parent or Elementor styling) */
       border-radius: var(--forms-fields-border-radius, 0) !important; /* Uses Elementor's form field border radius variable, fallback to 0 (square corners) */
   }
   
   /* SELECT2 BOTTOM MARGIN: Adds small spacing below dropdown containers */
   .select2-container {
       margin-bottom: 3px !important;
   }
   
   /* SELECT2 RENDERED TEXT: The currently selected value display area.
      Makes the text area match normal input field padding and alignment. */
   .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 form padding CSS variable, fallback to 16px */
       height: 100% !important;                                  /* Fill full height of container */
       display: flex !important;                                 /* Flexbox enables vertical centering */
       align-items: center !important;                           /* Vertically center the selected text */
       line-height: normal !important;                           /* Removes the ugly default 45px line-height that Select2 adds */
   }
   
   /* SELECT2 DROPDOWN ARROW: The arrow indicator on the right side of the dropdown.
      Centers the arrow vertically within the dropdown regardless of 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;      /* Full height of container */
       top: 0 !important;            /* Start from top edge */
       right: 12px !important;       /* Position 12px from right edge */
       display: flex !important;     /* Flexbox for centering */
       align-items: center !important; /* Vertically center the arrow icon */
   }
   
   /* SELECT2 ARROW ICON: Removes any margin on the arrow character/SVG icon. */
   /* Remove tiny margin on arrow SVG */
   .select2-selection__arrow b {
       margin: 0 !important;
   }

/* =============================================================
   2. MY ACCOUNT → ACCOUNT DETAILS – Styling
   ============================================================= */

/* ACCOUNT DETAILS STYLING: These styles customize the appearance of the
   My Account → Account Details page where users edit their profile.
   Works with the billing/shipping address fields added in functions.php (Section 4.1).
   UNIVERSAL - improves My Account page appearance. */

/* FIELDSET HEADERS: Styling for "Billing address" and "Shipping address" section headings.
   Makes them look like proper section headings rather than default legend text. */
/* 1. ALL HEADERS – identical styling (size, weight, color) */
.woocommerce-edit-account fieldset legend,
.woocommerce-edit-account #shipping_fields_wrapper legend {
    font-size: 1em !important;          /* Large heading size (1.8x base font) */
    font-weight: 800 !important;          /* Extra bold weight */
    color: var(--e-global-color-710061e) !important; /* Uses Elementor's label color variable, fallback to dark gray */
    margin: 0 0 50px 0 !important; /* ← only bottom margin - creates space below the heading */
    padding: 0 !important;                /* Remove any default fieldset legend padding */
    line-height: 1.2 !important;          /* Tight line height for headings */
}

/* FIELDSET CONTAINERS: Outer spacing for the billing/shipping address sections. */
.woocommerce-edit-account fieldset, .woocommerce-edit-account #shipping_fields_wrapper {
    margin-top: 100px !important; /* ← Billing section top spacing - creates separation from account details above */
    padding: 0 !important;                /* Remove default fieldset padding */
}

/* CUSTOM FIELDSET CLASS: Removes border from custom address fieldset container. */
.custom-account-fieldset {
    border: 0;
}

/* "SAME AS SHIPPING ADDRESS" CHECKBOX LABEL: Styles the text next to the toggle checkbox.
   Uses :has() selector (modern CSS) as a fallback targeting method for browsers that support it. */
/* 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;         /* Slightly larger than body text */
    font-weight: 500 !important;          /* Medium weight - not too bold */
    color: var(--e-global-color-text) !important; /* Match other label colors */
    margin-left: 10px !important;         /* Space between checkbox and label text */
    line-height: 1.5 !important;          /* Comfortable reading line height */
}

/* CHECKBOX INPUT: Sizes and positions the actual checkbox input element. */
/* 4. Checkbox */
.woocommerce-edit-account #shipping_same_as_billing {
    width: 18px !important;               /* Checkbox width */
    height: 18px !important;              /* Checkbox height (makes it square) */
    margin: 0 !important;                 /* Remove default margins */
    transform: translateY(1px);           /* Tiny 1px adjustment to align checkbox with text baseline */
}

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

/* TABLET BREAKPOINT (1024px and below): Account menu becomes vertical.
   The My Account navigation tabs (Dashboard, Orders, Account details, etc.)
   stack vertically on smaller screens instead of horizontal tabs. */
/* Tablet: vertical menu */
@media (max-width: 1024px) {
    .e-wc-account-tabs-nav nav.woocommerce-MyAccount-navigation ul {
      	display: flex !important;
        flex-direction: column !important; /* Stack menu items vertically */
        gap: 5px !important;               /* Small gap between menu items */
    }
}

/* TABLET: Remove horizontal padding from menu items.
   Cleans up spacing when menu switches to vertical layout. */
/* 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: Remove padding from account content wrapper.
   Gives more horizontal space to content on smaller screens. */
/* 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
   ============================================================= */

/* CART PAGE STYLING: Customizes the WooCommerce shopping cart appearance.
   Some of these are design preferences, some are mobile optimizations.
   CLIENT-SPECIFIC colors noted below. */

/* TABLET: Hide product thumbnails and shipping pickup text in cart.
   Saves space on mobile by removing product images from the cart summary.
   shipping_pickup_cart is likely from a shipping plugin. */
/* 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;
  }
}

/* HIDE SUBTOTAL COLUMN: Removes the per-product subtotal from cart table.
   CLIENT-SPECIFIC DESIGN: Some designs prefer to only show totals at the bottom.
   REMOVE THIS if you want to show individual product subtotals. */
/* Remove the sub total price from summary
.product-subtotal {
    display: none !important;
  }*/

/* REMOVE BUTTON SPACING: Adds right padding to the remove (X) button column.
   Creates space between the remove button and product name. */
/* Right margin on remove button */
.product-remove {
  padding-right: 20px !important;
}

/* LARGER REMOVE BUTTON: Makes the X button bigger and easier to tap on mobile.
   2em = 2x the normal font size. */
/* Larger remove button */
.woocommerce a.remove {
  font-size: 2em !important;
}

/* PRODUCT IMAGE STYLING: Rounds the corners of cart product thumbnail images.
   CLIENT-SPECIFIC: 16px border radius matches a specific design aesthetic.
   Change value to adjust roundness (0 = square, 50% = circle). */
/* Rounded image */
.product-thumbnail a img {
  border-radius: 6px;
}

/* CART LINK HOVER COLORS: Defines hover states for cart page links.
   CLIENT-SPECIFIC: Yellow colors (#FFFCCA light, #F9EB1D bright) are brand-specific.
   Change these hex values to match your brand colors. */
/* Text styling and link color
.product-name a:hover, .shipping-calculator-button:hover {
  color: #FFFCCA !important;
}
.shipping-calculator-button {
  color: #F9EB1D !important;
}*/

/* CART TEXT COLORS: White text for various cart elements.
   CLIENT-SPECIFIC: Based on dark background design.
   Change #fff to another color if your cart has a light background. 
.shipping_pickup_cart, .woocommerce-shipping-calculator label, .product-name a {
  color: #fff !important;
}
*/

/* SHIPPING TEXT TYPOGRAPHY: Consistent text formatting for shipping-related labels. */
.shipping_pickup_cart, .woocommerce-shipping-calculator label {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 23px;
}


/* HIDE SHIPPING DESTINATION TEXT: Removes "Shipping to [City, Country]" text.
   CLIENT-SPECIFIC DESIGN: Simplifies cart appearance.
   REMOVE THIS if you want to show the shipping destination. */
/* Shipping calculation text removal */
.woocommerce-shipping-destination {
  display: none;
}

/* RESPONSIVE CART TABLE: Forces WooCommerce table to stack vertically on tablet/mobile.
   Makes cart much easier to read on small screens.
   UNIVERSAL - good mobile UX improvement. */
/* Force WooCommerce responsive tables on tablet/mobile */
@media (max-width: 1024px) {
    /* Hide table header row on mobile - column names shown via data-title instead */
    .woocommerce-cart .e-shop-table table.shop_table_responsive thead {
        display: none;
    }
    /* Make each table row a block element (stacks vertically) */
    .woocommerce-cart .e-shop-table table.shop_table_responsive tr {
        display: block;
    }
    /* Make each cell display as flex with space-between for label:value layout */
    .woocommerce-cart .e-shop-table table.shop_table_responsive td {
        display: flex;
        justify-content: space-between;   /* Label on left, value on right */
        width: 100%;
      	border: none !important;          /* Remove cell borders on mobile */
    }
    /* Use data-title attribute as pseudo-label before each cell value.
       WooCommerce adds data-title="Product", data-title="Price", etc. to td elements. */
    .woocommerce-cart .e-shop-table table.shop_table_responsive td::before {
        content: attr(data-title) "";     /* Displays the column name */
    }
}

/* QUANTITY INPUT: Centers the number inside the quantity input field.
   UNIVERSAL - improves appearance of +/- quantity selectors. */
/* Center text inside WooCommerce quantity input */
.quantity .qty {
    text-align: center !important;
}

/* =============================================================
   5. Product Page
   ============================================================= */

/* PRODUCT PAGE STYLING: Customizes single product page appearance.
   Includes sale badge styling, custom variation swatches, and stock display.
   Mix of UNIVERSAL improvements and CLIENT-SPECIFIC design choices. */

/* SALE PRICE STYLING: Makes the original (regular) price smaller with strikethrough.
   Applied to products that are marked "on sale" in WooCommerce. */
/* Small before price on product on sale */
.product.sale .price del span {
  font-size: 16px;                        /* Smaller than the current/sale price */
  text-decoration: line-through !important; /* Strikethrough effect to show old price */
}

/* REMOVE DEFAULT STRIKETHROUGH: Removes browser's default <del> styling.
   We apply custom strikethrough to the inner span instead for more control. */
/* Remove standard underline */
.product.sale .price del {
  text-decoration: none;                  /* Remove default browser strikethrough */
  opacity: .5 !important;                 /* Dim the old price to 50% opacity */
}

/* PRICE BOTTOM MARGIN FIX: Removes unwanted space below price elements.
   Fixes layout issues when using Elementor's product price widget. */
/* Fix bottom margin on sales price */
.elementor-widget-woocommerce-product-price .price, .elementor-widget-woocommerce-product-price .price del {
    margin-block-end: 0;                  /* CSS logical property for bottom margin */
    margin-bottom: 0 !important;          /* Fallback for older browsers */
}

/* SALE PILL BADGE: Styled pill/badge showing "SALE -X%" next to the price.
   Inserted via JavaScript in functions.php (Section 6).
   CLIENT-SPECIFIC: Uses Elementor's secondary color variable for background.
   Change --e-global-color-secondary in Elementor Site Settings to change pill color. */
/* Style sale badge next to price */
.woocommerce div.product p.price .sale-pill {
    display: inline-block;
    margin-left: 6px;          /* Space between strikethrough price and pill */
    padding: 6px 10px;                    /* Internal padding */
    font-size: 11px;                      /* Small text size */
    font-weight: 700;                     /* Bold text */
    background: var(--e-global-color-167baba);       /* Uses global color */
    color: var(--e-global-color-710061e);                       /* Dark text color on the pill */
    border-radius: 999px;                 /* Very large radius = fully rounded pill shape */
    line-height: 1;                       /* Tight line height */
    vertical-align: middle;    /* Vertically align with adjacent price text */
    white-space: nowrap;                  /* Prevent "SALE -25%" from wrapping */
}

/* SALE PRICE ALIGNMENT: Ensures del (old price), pill, and ins (new price) align horizontally. */
/* 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;
}

/* CURRENT PRICE DISPLAY: Makes the sale price (in <ins> tag) display as block.
   This puts the current price on its own line below the strikethrough + pill. */
/* Optional: ensure ins (current price) stays below */
.woocommerce div.product p.price ins {
    display: block;
}

/* CUSTOM STOCK STATUS COLORS: Styles for the dynamic stock display element.
   Works with the JavaScript in functions.php that adds classes to .custom-stock element.
   Requires an Elementor Heading widget with class "custom-stock" on your product template.
   CLIENT-SPECIFIC: Colors match the swatch color scheme. */
/* 4. Stock element styling */
.custom-stock.in-stock .elementor-heading-title {
    color: #9DFF8D;                       /* Green for "X in stock" */
}
.custom-stock.low-stock .elementor-heading-title {
    color: #9F4A54;                       /* Red/maroon for "Only X left" warning */
}
.custom-stock.out-of-stock .elementor-heading-title {
    color: #212121;                       /* Dark gray for "Out of stock" */
}