/**
 * BDT Fabric Quantity by Meter — Frontend styles
 *
 * Minimal, theme-agnostic styles for the quantity hint and input.
 * Override in your child theme's style.css if needed.
 *
 * @package BDT_Fabric_Quantity_By_Meter
 * @since   1.0.0
 */

/**
 * Informational hint rendered below the quantity input.
 */
.bdt-fabric-qty-hint {
    display: block;
    margin: 6px 0 12px;
    font-size: 0.85em;
    color: #6b7280;          /* neutral grey — works on light and white backgrounds */
    line-height: 1.4;
}

/**
 * Subtle highlight when the quantity input is focused on a fabric product.
 * Targets the standard WooCommerce quantity input class.
 */
.bdt-fabric-product .quantity input.qty {
    border-color: #a8a29e;
}

/**
 * Ensure quantity inputs display decimal values without scientific notation
 * on some older mobile browsers.
 */
.quantity input.qty[step="0.5"] {
    min-width: 90px;
    padding-right: 28px; /* extra room so the value clears the spinner arrows */
}

/**
 * Live price total shown below the quantity hint on single product pages.
 * Updates via JavaScript as the customer adjusts the quantity.
 */
.bdt-total-price {
    display: block;
    margin: 4px 0 14px;
    font-size: 1em;
    line-height: 1.4;
}

.bdt-total-price__label {
    color: #6b7280;      /* Same grey as the hint — keeps visual rhythm */
    font-weight: normal;
}

.bdt-total-price__amount {
    color: #111827;      /* Dark, clearly readable price value */
    font-weight: 700;
    font-size: 1.25em;   /* Prominent size so the total stands out clearly */
}