/**
 * La Mota — block checkout theming.
 *
 * Targets the WooCommerce Checkout block (wc-block-checkout) and Cart block
 * (wc-block-cart). The block checkout is React-based, so selectors are very
 * specific to WC Blocks classnames. Goal: dark theme, teal accents, white
 * inputs that match the rest of the storefront.
 */

/* ============================================================
 * Form inputs — text, email, phone, tel, date, select
 * ============================================================ */

.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="date"],
.wc-block-checkout input[type="password"],
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-components-text-input input,
.wc-block-components-textarea {
    background-color: var(--lmgf-bg-soft, #232323) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border: 1px solid var(--lmgf-border, #2e2e2e) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 0.15s ease;
}

.wc-block-checkout input:focus,
.wc-block-checkout textarea:focus,
.wc-block-checkout select:focus,
.wc-block-components-text-input input:focus {
    border-color: var(--lmgf-teal, #1abcba) !important;
    box-shadow: 0 0 0 1px var(--lmgf-teal, #1abcba) !important;
}

.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder {
    color: var(--lmgf-text-mute, #888888) !important;
}

/* WC Blocks uses "floating labels" by default — the label text starts inside
   the input as if it were a placeholder, then floats UP to the top border
   when the input is focused or has a value.
 *
 * The default WC implementation doesn't translate the label out of the way
 * cleanly on dark themes — it ends up sitting ON TOP of the user's typed
 * text. We use a placeholder-style approach: label is shown when empty
 * (vertically centered), hidden when focused or filled.
 *
 * WC adds the `is-active` class to the wrapper when the input has focus
 * OR has a value, so we use that as the single source of truth — much
 * more reliable than trying to detect placeholder state with :has(). */

.wc-block-components-text-input {
    position: relative !important;
}

/* Idle/empty: label sits VERTICALLY CENTERED inside the input like a real
   placeholder. WC's default puts the label at top:0 ready to float; we
   override to center it so an empty field looks like a normal placeholder. */
.wc-block-components-text-input label {
    color: var(--lmgf-text-mute, #888888) !important;
    background-color: transparent !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease, visibility 0.12s ease !important;
    /* Position label using flex-style centering — both axes */
    position: absolute !important;
    top: 50% !important;
    left: 14px !important; /* matches input's left padding */
    transform: translateY(-50%) !important;
    margin: 0 !important;
    line-height: 1 !important;
    font-size: 15px !important;
    /* Don't let WC's default scaling/translation kick in */
    transform-origin: left center !important;
}

/* When the input is active (focused OR has a value), hide the label so it
   doesn't overlap the typed text. WC's `.is-active` toggles correctly for
   both states. */
.wc-block-components-text-input.is-active label {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Belt-and-suspenders: when the input itself has focus, also hide the label
   — covers cases where WC's is-active class hasn't been added yet on first
   focus. */
.wc-block-components-text-input:focus-within label {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ============================================================
 * Checkboxes
 * ============================================================ */

.wc-block-checkout input[type="checkbox"],
.wc-block-components-checkbox input[type="checkbox"] {
    accent-color: var(--lmgf-teal, #1abcba) !important;
}

.wc-block-components-checkbox__label,
.wc-block-checkout label {
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* ============================================================
 * Place Order button — teal, prominent, branded
 * ============================================================ */

.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button {
    background-color: var(--lmgf-teal, #1abcba) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, transform 0.15s ease;
    box-shadow: none !important;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button:hover {
    background-color: #18a8a6 !important;
    transform: translateY(-1px);
}

.wc-block-components-checkout-place-order-button:disabled {
    background-color: var(--lmgf-bg-soft, #232323) !important;
    color: var(--lmgf-text-mute, #888888) !important;
    cursor: not-allowed !important;
}

/* ============================================================
 * Section headings & step labels
 * ============================================================ */

.wc-block-components-checkout-step__heading,
.wc-block-components-title,
.wp-block-woocommerce-checkout-contact-information-block h2,
.wp-block-woocommerce-checkout-shipping-address-block h2,
.wp-block-woocommerce-checkout-billing-address-block h2,
.wp-block-woocommerce-checkout-payment-block h2,
.wp-block-woocommerce-checkout-order-note-block h2,
.wp-block-woocommerce-checkout-shipping-method-block h2,
.wp-block-woocommerce-checkout-pickup-options-block h2 {
    color: var(--lmgf-text, #f5f5f5) !important;
    font-weight: 600 !important;
}

.wc-block-components-checkout-step__description,
.wc-block-components-text-input + .wc-block-components-validation-error {
    color: var(--lmgf-text-soft, #bbbbbb) !important;
}

/* ============================================================
 * Order summary card
 * ============================================================ */

.wc-block-components-sidebar-layout .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-order-summary {
    background-color: var(--lmgf-bg-card, #1f1f1f) !important;
    border: 1px solid var(--lmgf-border, #2e2e2e) !important;
    border-radius: 10px !important;
    padding: 20px !important;
}

.wc-block-components-totals-item,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-name,
.wc-block-components-product-metadata {
    color: var(--lmgf-text, #f5f5f5) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
    color: var(--lmgf-text, #f5f5f5) !important;
}

.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description {
    color: var(--lmgf-text-soft, #bbbbbb) !important;
}

/* A third-party plugin (likely myCred or another loyalty/points integration)
   crashes on the cart/checkout block's React tree and renders the literal
   string "Cannot read properties of undefined (reading 'notices')" into the
   per-item order meta slot. We can't fix the third party's code, but we can
   hide the error output. The `wc-block-components-order-meta` div is where
   third parties inject extra item meta — if you DO want a working integration
   here later, remove this rule.

   Targeting the specific error-text paragraph by CSS without a text-content
   selector isn't possible, so we hide the whole order-meta wrapper that
   exclusively contains that broken extension output. WC core's product
   metadata (Weight, etc.) lives in a different class — wc-block-components-
   product-metadata — which is unaffected. */
.wc-block-components-order-summary-item .wc-block-components-order-meta {
    display: none !important;
}

/* Quantity badge (the circle that overlays each line item thumbnail in
   the order summary). Defaults to white-on-white which is invisible —
   make it teal-on-white. */
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item .wc-block-components-product-badge {
    background-color: var(--lmgf-teal, #1abcba) !important;
    color: #ffffff !important;
    border: 2px solid var(--lmgf-bg-card, #1f1f1f) !important;
    font-weight: 600 !important;
}

/* Order summary item images — give them a subtle dark border so they pop
   on the dark card background */
.wc-block-components-order-summary-item__image > * {
    border: 1px solid var(--lmgf-border, #2e2e2e) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Free shipping badge / coupon */
.wc-block-components-totals-coupon-link,
.wc-block-components-totals-coupon button {
    color: var(--lmgf-teal, #1abcba) !important;
}

/* ============================================================
 * Notices (error, info, success banners)
 * ============================================================ */

.wc-block-components-notice-banner {
    background-color: var(--lmgf-bg-soft, #232323) !important;
    border-color: var(--lmgf-border, #2e2e2e) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border-radius: 8px !important;
}

.wc-block-components-notice-banner.is-error {
    background-color: rgba(204, 51, 51, 0.10) !important;
    border-color: #cc3333 !important;
    color: #ffaaaa !important;
}

.wc-block-components-notice-banner.is-warning {
    background-color: rgba(204, 153, 0, 0.10) !important;
    border-color: #cc9900 !important;
    color: #ffd070 !important;
}

.wc-block-components-notice-banner.is-success {
    background-color: rgba(26, 188, 186, 0.10) !important;
    border-color: var(--lmgf-teal, #1abcba) !important;
    color: var(--lmgf-teal, #1abcba) !important;
}

/* Inline validation errors */
.wc-block-components-validation-error {
    color: #ff7878 !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* ============================================================
 * Shipping / payment options (radio rows)
 * ============================================================ */

.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package label {
    background-color: var(--lmgf-bg-soft, #232323) !important;
    border: 1px solid var(--lmgf-border, #2e2e2e) !important;
    border-radius: 8px !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    padding: 14px 16px 14px 48px !important; /* extra left for radio circle */
    margin-bottom: 8px !important;
    position: relative !important;
}

.wc-block-components-radio-control__option--checked,
.wc-block-components-radio-control__option:has(input:checked) {
    border-color: var(--lmgf-teal, #1abcba) !important;
    background-color: rgba(26, 188, 186, 0.08) !important;
}

/* The radio circle itself — position it inside the left padding gutter */
.wc-block-components-radio-control__input,
.wc-block-components-radio-control__option input[type="radio"] {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    accent-color: var(--lmgf-teal, #1abcba) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
}

/* Make sure the option's text content doesn't get squeezed under the radio */
.wc-block-components-radio-control__label,
.wc-block-components-radio-control__option-layout {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Description text under each option (e.g. "Pay in-store with cash...") */
.wc-block-components-radio-control__description,
.wc-block-components-radio-control__secondary-label {
    color: var(--lmgf-text-soft, #bbbbbb) !important;
    margin-top: 4px !important;
    display: block !important;
}

/* ============================================================
 * Cart page (quantity buttons, remove links, summary)
 * ============================================================ */

.wc-block-cart,
.wc-block-cart-items,
.wp-block-woocommerce-cart {
    color: var(--lmgf-text, #f5f5f5) !important;
}

.wc-block-cart-item__product-name,
.wc-block-cart-item__product-name a {
    color: var(--lmgf-text, #f5f5f5) !important;
    text-decoration: none !important;
}

.wc-block-cart-item__product-name a:hover {
    color: var(--lmgf-teal, #1abcba) !important;
}

.wc-block-cart-item__remove-link {
    color: var(--lmgf-text-mute, #888888) !important;
}
.wc-block-cart-item__remove-link:hover {
    color: #ff7878 !important;
}

.wc-block-components-quantity-selector button,
.wc-block-components-quantity-selector input {
    background-color: var(--lmgf-bg-soft, #232323) !important;
    color: var(--lmgf-text, #f5f5f5) !important;
    border-color: var(--lmgf-border, #2e2e2e) !important;
}

/* ============================================================
 * Order confirmation page (post-checkout)
 * ============================================================ */

.wp-block-woocommerce-order-confirmation-status,
.wc-block-order-confirmation,
.wp-block-woocommerce-order-confirmation-summary {
    color: var(--lmgf-text, #f5f5f5) !important;
}

/* ============================================================
 * Misc — borders, dividers
 * ============================================================ */

.wc-block-components-checkout-step,
.wc-block-components-panel,
.wc-block-components-totals-wrapper {
    border-color: var(--lmgf-border, #2e2e2e) !important;
}

.wc-block-components-button--text {
    color: var(--lmgf-teal, #1abcba) !important;
}