/* =============================================
   NFF Event Registration — Product Page
   ============================================= */

/* Apply a filled-state background and text color to select and date inputs
   when their parent form-row has woocommerce-validated (i.e. has a value).
   This mirrors the light-blue browser autofill appearance on text/email fields. */
.woocommerce form .nff-registration-fields .form-row.woocommerce-validated select,
.woocommerce form .nff-registration-fields .form-row.woocommerce-validated input[type="date"] {
    background-color: #e8f0fe;
    color: #1a1a2e;
}

/* =============================================
   NFF Event Registration — Order Item Meta
   ============================================= */

/* On mobile, stack each meta label above its value so key: value pairs
   remain readable in the narrow product column of the order details table. */
@media (max-width: 480px) {
    .woocommerce-order-details .wc-item-meta li,
    .woocommerce-column--product .wc-item-meta li {
        display: block;
        margin-bottom: 0.3em;
    }

    .woocommerce-order-details .wc-item-meta .wc-item-meta-label,
    .woocommerce-column--product .wc-item-meta .wc-item-meta-label {
        display: block;
    }
}

/* =============================================
   NFF Event Registration — Checkout Review
   ============================================= */

/* Show the Division / Class label inline with its value in the checkout
   order review so the pair reads as a single line rather than the label
   blocking to a full row before the value begins. A pseudo-element creates
   a clean gap between multiple Division / Class entries. */
.woocommerce-checkout-review-order-table .product-name dl.variation {
    margin: 0.2em 0;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dt {
    display: inline;
    font-weight: 600;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd {
    display: inline;
    margin-left: 0.25em;
}

.woocommerce-checkout-review-order-table .product-name dl.variation dd::after {
    content: '';
    display: block;
    margin-bottom: 0.15em;
}

/* =============================================
   NFF Event Registration — Cart / Checkout Item Name
   ============================================= */

/* Event name sits on its own line above the dashed divider.
   Vertical padding centres the text within the space between the dashes. */
.nff-cart-event-name {
    display: block;
    font-weight: 600;
    padding: 0.35em 0;
}

/* Dashed rule between sections. Spacing is handled by the text span padding
   above and below, so no margin is needed here. */
.nff-cart-name-divider {
    display: block;
    border-top: 1px dashed #bbb;
    margin: 0;
}

/* Division and class lines sit below their dividers, slightly de-emphasised.
   Equal padding top/bottom centres each within its dashed-line section. */
.nff-cart-division,
.nff-cart-class {
    display: block;
    font-size: 0.9em;
    color: #555;
    padding: 0.35em 0;
}