/**
 * ============================================================
 * GSUK Crate Calculator — Styling
 * ============================================================
 * Layout order/spacing matches the Figma reference confirmed 29 July:
 *   # of crates -> bulk-order note -> required area -> Product total /
 *   VAT -> Buy Now / Custom Order -> Specifications / Delivery Costs ->
 *   disclaimer note.
 *
 * Colour: #24346A matches the Figma design exactly (same value used
 * for the selected swatches/size boxes and the gallery arrows) —
 * applied here ONLY within .gsuk-crate-calculator, so it doesn't
 * change any other button elsewhere on the site.
 */

.gsuk-crate-calculator {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Stock-limit warning (Point 4, Hayley's feedback 4 Aug) — sits
   directly above the "# of crates" row, toggled by
   gsuk-crate-calculator.js whenever the calculated quantity exceeds
   the selected variation's available stock (only checked if "Manage
   stock" is actually turned on for that variation — see the plugin's
   Section 3 for the matching server-side check). Styled as a small
   pinned notice rather than the calculator's other inline error text,
   per Hayley's request for something more attention-grabbing here
   specifically. */
.gsuk-stock-warning {
    background: #FDECEF;
    border: 1px solid #DC002C;
    color: #DC002C;
    font-size: 13px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 3px;
}

.gsuk-stock-warning a {
    color: #DC002C;
    font-weight: 600;
    text-decoration: underline;
}

.gsuk-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.gsuk-field-row label {
    font-weight: 600;
}

.gsuk-field-row input[type="text"] {
    flex: 1 1 120px;
    min-width: 0;
}

/* "# of crates :" row — wraps WooCommerce's own quantity input,
   relocated here by JS (see relocateNativeElements() in
   gsuk-crate-calculator.js). Read-only (30 July, per manager's QA) —
   greyed out to visually signal it's a display, not an editable field;
   only "Your required area" actually drives the value. */
.gsuk-qty-row #gsuk_qty_slot input.qty {
    width: 90px;
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* Cart page: quantity is shown as plain read-only text (see
   gsuk_cart_item_quantity_readonly() in the plugin) rather than
   WooCommerce's default editable stepper. */
.gsuk-cart-qty-readonly {
    display: inline-block;
    padding: 4px 10px;
}

.gsuk-bulk-note,
.gsuk-disclaimer {
    font-style: italic;
    font-size: 13px;
    color: #555;
    margin: 2px 0 6px;
}

.gsuk-total-line {
    font-weight: 700;
    margin: 2px 0;
}

.gsuk-error {
    color: #c0392b;
    font-size: 13px;
}

/* Buy Now / Custom Order / Contact us for pricing / Specifications /
   Delivery Costs — stacked, full-width, all the SAME size, matching
   the Figma reference. Scoped to .gsuk-crate-calculator specifically
   so this doesn't affect buttons anywhere else on the site.
   !important is required on background/border/etc — Elementor
   generates its own per-widget CSS for the Buy Now button (confirmed
   29 July, file "post-598.css" in this template) which otherwise
   overrides these.
   IMPORTANT: "display" is deliberately NOT !important — the JS
   toggles Buy Now vs Custom Order via jQuery .show()/.hide(), which
   set an inline display style. An !important display rule here would
   (and briefly did, confirmed 30 July) permanently override that
   inline style and make both buttons show at once regardless of
   quantity. */
.gsuk-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

.gsuk-crate-calculator .gsuk-action-btn,
.gsuk-crate-calculator .single_add_to_cart_button {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px;
    background: #24346A !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: "Bitter", sans-serif !important;
    cursor: pointer;
}

/* Hover colour (Hayley's feedback, 4 Aug) — applies to all three
   buttons: Buy Now, Specifications, Delivery Costs. */
.gsuk-crate-calculator .gsuk-action-btn:hover,
.gsuk-crate-calculator .single_add_to_cart_button:hover {
    background: #DC002C !important;
    color: #fff !important;
}

/* WooCommerce's own native variation price ("£389.65", shown above
   "# of crates" as soon as a variation is selected) is hidden — our
   own "Product total" / "VAT" lines further down cover this, and the
   Figma reference doesn't show a separate price line here. */
.woocommerce-variation-price {
    display: none !important;
}

/* The price-range widget Elementor shows directly under the product
   title (e.g. "£237.48 – £422.28") isn't part of the Figma layout —
   hidden by its specific widget ID in this template. NOTE: if that
   widget is ever rebuilt in Elementor its ID may change; simplest
   permanent fix is deleting the widget in Elementor directly instead
   of relying on this ID match. */
.elementor-element-1e927923 {
    display: none !important;
}

@media (max-width: 480px) {
    .gsuk-crate-calculator .gsuk-action-btn,
    .gsuk-crate-calculator .single_add_to_cart_button {
        padding: 10px 14px;
        font-size: 14px;
    }

    .gsuk-field-row label {
        min-width: 100%;
    }
}