/*
 * ================================================================
 * Quantity Unit Selector Frontend Styles
 * ================================================================
 */

/*
 * ----------------------------------------------------------------
 * I. SHARED STYLES
 * Rules that apply to multiple pages (e.g., Single Product, Archive, Cart).
 * ----------------------------------------------------------------
 */

/**
 * Styles the "per m2" text that appears next to the main product price.
 */
.price-unit {
    display: inline-block;      /* Helps with alignment and spacing. */
    font-weight: normal;        /* Makes it less bold than the price. */
    color: #777 !important;     /* A light grey color, with high priority. */
    font-size: 0.6em !important;/* Sets size relative to the price. */
    margin-left: 0em !important; /* Removes space to its left. */
    vertical-align: baseline !important; /* Aligns its bottom with the price's bottom. */
    border: none !important;      /* Ensures no border. */
}


/*
 * ----------------------------------------------------------------
 * II. SINGLE PRODUCT PAGE STYLES
 * All rules for the custom quantity and total price section.
 * ----------------------------------------------------------------
 */

/* -- Main Containers -- */

/**
 * The main container for the entire custom quantity section.
 */
.qus-quantity-section {
    border: none; /* Ensures the outer container has no border. */
}

/**
 * The Flexbox container that holds the "Unit of Measure" box 
 * and the WooCommerce quantity input.
 */
.qus-input-area {
    display: flex;
    align-items: stretch; /* This makes all children stretch to the same height. */
}


/* -- Total Price Display -- */


/**
 * Styles the container for the "Total" price display.
 */
.qus-total-price-container {
    display: block;                  /* Aligns "Total" and the price horizontally. */
    justify-content: space-between; /* Pushes "Total" left and the price right. */
    align-items: center;            /* Vertically aligns them. */
    padding-bottom: 20px;           /* Adds space below the line. */
    margin-bottom: 20px;            /* Adds space between this and the next section. */
    border-bottom: 1px solid #e0e0e0; /* The horizontal line separator. */
}

/**
 * Styles the "Total" label.
 */
.qus-total-price-container .total-label {
    font-size: 16px;
    color: #555;
}

/**
 * Styles the calculated total price number.
 */
.qus-total-price-container .total-price {
    font-size: 24px;
    font-weight: bold;
    color: #c95d25; /* Your theme's orange color. */
}


/* -- Quantity Input Area -- */

/* Removed border from quantity number */
.woocommerce-js input[type=number].qty
{
    border: 0px;
}

/**
 * Styles the header text "SELECT QUANTITY".
 */
.qus-quantity-header label {
    font-weight: bold;
    font-size: 14px;
    color: #333;
    margin: 0;
}

/**
 * Styles our custom "Unit of Measure" box.
 */
.qus-unit-display-box {
    margin-right: -1px;     /* Overlaps its border with the next element. */
    display: flex;
    flex-direction: column; /* Stacks the label and the value vertically. */
    justify-content: center;/* Vertically centers the content. */
}

/**
 * Styles the small "UNIT OF MEASURE" label inside the box.
 */
.qus-unit-display-box .unit-label {
    font-size: 10px;
    color: #888;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/**
 * Styles the main unit value (e.g., "m2") inside the box.
 */
.qus-unit-display-box .unit-value {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/**
 * Styles the main WooCommerce quantity container (.quantity.buttons_added)
 * when it is on the single product page.
 */
.single-product .quantity.buttons_added {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #e0e0e0;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px !important;
    flex-basis: 20% !important; /* Suggests an initial width. */
}

/**
 * Styles the default WooCommerce +/- buttons on the single product page.
 */
.single-product .woocommerce-js .quantity .minus, 
.single-product .woocommerce-js .quantity .plus {
    border: none !important;
    font-size: 20px !important;
    font-weight: 500;
    background-color: white;
    align-self: stretch;
}

.woocommerce-js .quantity .plus
{
    border: 1px !important;
    font-size: 30px !important;
    font-weight: 300 !important;
}

.woocommerce-js .quantity .minus
{
    border: 1px !important;
    font-size: 30px !important;
    font-weight: 300 !important;
}

.single-product .woocommerce-js .quantity .button:hover {
    background-color: #f7f7f7;
}

/* Padding to the right of the unit */
.qus-unit-display-box {
    padding-right: 10px;
}


/**
 * Styles the number input field on the single product page.
 */
.single-product .woocommerce-js .quantity .qty {
    border: none !important;
    width: 3em !important;
}

/**
 * This rule hides the default price that appears for variations 
 * before a selection is made.
 */
.woocommerce-variation-price {
    display: none;
}


/*
 * ----------------------------------------------------------------
 * III. CART & CHECKOUT PAGE STYLES
 * ----------------------------------------------------------------
 */

/**
 * Styles the wrapper around the quantity and unit in the shopping cart.
 */
.qus-cart-quantity-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

/**
 * Makes the quantity block on the cart page a single flex container.
 */
.woocommerce-cart-form .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    width: -moz-fit-content;
    width: fit-content;
}

/**
 * Styles our injected unit text inside the cart quantity input.
 */
.qus-cart-unit {
    font-size: 14px;
    color: #555;
    padding: 0 0.8em;
    border-left: 1px solid #e0e0e0;
    white-space: nowrap;
}

/**
 * Makes the cart quantity input controls more compact.
 */
.woocommerce-cart-form .quantity .button {
    width: 30px;
    padding: 0;
    border: none;
    background: #f9f9f9;
}
.woocommerce-cart-form .quantity .button:hover {
    background-color: #f0f0f0;
}
.woocommerce-cart-form .quantity input.qty {
    width: 40px;
    border: none;
    border-left: none; /* Corrected from your version to avoid double border */
}

/**
 * Targets the .price-unit class ONLY on the cart page
 * and makes the font size larger, overriding the general rule.
 */
.woocommerce-cart-form .price-unit {
    font-size: 0.8em !important;
}

/**
 * Styles the attribute list (e.g., Colours, Size) on the cart page.
 */
.woocommerce-cart .cart_item .variation {
    margin-top: 0.75em;
    font-size: 14px;
}
.woocommerce-cart .cart_item .variation dt {
    font-weight: 700;
    display: inline;
    float: left;
    clear: left;
    margin-right: 0.5em;
}
.woocommerce-cart .cart_item .variation dd {
    margin: 0 !important; /* Combined from your `dd` rule */
    display: inline;
    float: left;
}
.woocommerce-cart .cart_item .variation dd p {
    margin: 0 !important;
}

/**
 * Hides the redundant "Unit: [unit]" meta data ONLY on the cart page.
 */
.woocommerce-cart-form .cart_item .variation-Unit {
    display: none !important;
}

/**
 * Styles the unit text next to the quantity on the checkout page's order summary.
 */
.woocommerce-checkout .product-quantity .qus-checkout-unit {
    font-weight: normal;
    font-size: 0.9em !important;
    color: #555;
}

/**
 * Hides the redundant "Unit: [unit]" meta data on the checkout page.
 */
.woocommerce-checkout-review-order-table .variation-Unit {
    display: none !important;
}