/**
 * Lili UI radius .
 * One radius for Woodmart/WooCommerce UI surfaces, based on the header search field.
 * Intentionally circular controls (avatars, color swatches, loaders) are left alone.
 */
:root {
    --lili-ui-radius: 9px;
    --wd-brd-radius: var(--lili-ui-radius) !important;
}

/* Woodmart elements that expose their own radius variable. */
body :where(
    .wd-search-form,
    .searchform,
    .wd-dropdown,
    .wd-popup,
    .wd-side-hidden,
    .wd-widget,
    .widget,
    .wd-product,
    .wd-product-card,
    .wd-product-card-bg,
    .wd-info-box,
    .wd-accordion-item,
    .wd-tabs,
    .wd-nav-tabs-wrapper,
    .wd-wishlist-group,
    .wd-compare-table,
    .wd-empty-page,
    .wd-checkout-prod,
    .cart-widget-side,
    .mobile-nav
) {
    --wd-brd-radius: var(--lili-ui-radius) !important;
}

/* Form controls: search, selects, text fields, coupon/login/checkout fields, etc. */
body :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .select2-selection,
    .select2-dropdown,
    .woocommerce-input-wrapper,
    .wc-block-components-text-input input,
    .wc-block-components-combobox .wc-block-components-combobox-control input
) {
    border-radius: var(--lili-ui-radius) !important;
}

/* Buttons. */
body :where(
    .btn,
    .button,
    .elementor-button,
    .wp-element-button,
    a.added_to_cart,
    button:not(.mfp-close):not(.wd-close-side):not(.wd-action-btn),
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
) {
    border-radius: var(--lili-ui-radius) !important;
}

/* Main box/card surfaces used by Woodmart, WooCommerce and builders. */
body :where(
    .product-image-summary,
    .product-image-summary-inner,
    .woocommerce-message,
    .woocommerce-info,
    .woocommerce-error,
    .woocommerce-notice,
    .woocommerce-form,
    .checkout-order-review,
    .woocommerce-order-pay .entry-content > .woocommerce,
    .cart-totals-inner,
    .cart_totals,
    .shop_table,
    .wd-popup,
    .mfp-content,
    .wd-dropdown,
    .wd-side-hidden,
    .widget,
    .wd-widget,
    .wp-block-group,
    .wp-block-column,
    .elementor-widget-container,
    .elementor-element-populated,
    .wd-product-card-bg,
    .product-element-top,
    .product-image-link,
    .wd-carousel-item img,
    .woocommerce-product-gallery__image,
    .woocommerce-product-gallery__image img,
    .wd-gallery-thumb img,
    .product-image-thumbnail img
) {
    border-radius: var(--lili-ui-radius) !important;
}

/* Product gallery/card clipping so image corners follow the same radius cleanly. */
body :where(
    .product-element-top,
    .product-image-link,
    .woocommerce-product-gallery__image,
    .wd-gallery-thumb,
    .product-image-thumbnail
) {
    overflow: hidden;
}

/* Quantity: render as ONE clean segmented control.
 * The border belongs to the wrapper, so there are no white/square corner artifacts.
 */
body div.quantity {
    box-sizing: border-box;
    overflow: hidden;
    border: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, #e9e9e9) !important;
    border-radius: var(--lili-ui-radius) !important;
    background: var(--wd-form-bg, #fff) !important;
    background-clip: padding-box;
}

body div.quantity :where(input[type="number"], input[type="text"], button, .btn, .minus, .plus) {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Keep just the two inner separators around the numeric field. */
body div.quantity :where(input[type="number"], input[type="text"]) {
    border-inline: var(--wd-form-brd-width, 1px) solid var(--wd-form-brd-color, #e9e9e9) !important;
    background: var(--wd-form-bg, #fff) !important;
}

/* Prevent a theme/plugin rule from painting square outer corners back over the wrapper. */
body div.quantity .minus,
body div.quantity .plus {
    background-clip: padding-box !important;
}

/* Common product selectors/swatches containers. Individual round color swatches stay round. */
body :where(
    .variations_form .variations select,
    .wd-swatches-filter,
    .wd-swatches-product,
    .wd-swatch-text,
    .wd-reset-var
) {
    border-radius: var(--lili-ui-radius) !important;
}

/* Labels/badges should use the same corner language instead of unrelated pill radii. */
body :where(
    .product-label,
    .onsale,
    .new,
    .featured,
    .out-of-stock
) {
    border-radius: var(--lili-ui-radius) !important;
}


/* Variable products: keep the side label (e.g. "رنگ:") vertically centered
 * with its select instead of sitting lower than the control.
 */
@media (min-width: 1025px) {
    body.single-product form.variations_form.wd-label-side-lg table.variations tr {
        display: flex !important;
        align-items: center !important;
        gap: 14px;
    }

    body.single-product form.variations_form.wd-label-side-lg table.variations .cell {
        padding-top: 0 !important;
        vertical-align: middle !important;
    }

    body.single-product form.variations_form.wd-label-side-lg table.variations .label {
        display: flex !important;
        align-items: center !important;
        align-self: stretch;
        flex: 0 0 auto;
    }

    body.single-product form.variations_form.wd-label-side-lg table.variations .label > * {
        display: inline-flex !important;
        align-items: center !important;
        margin-block: 0 !important;
    }

    body.single-product form.variations_form.wd-label-side-lg table.variations .value {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.single-product form.variations_form.wd-label-side-lg table.variations select {
        margin-block: 0 !important;
    }
}

@media (max-width: 1024px) {
    body.single-product form.variations_form.wd-label-side-md table.variations tr {
        display: flex !important;
        align-items: center !important;
        gap: 12px;
    }

    body.single-product form.variations_form.wd-label-side-md table.variations .label {
        display: flex !important;
        align-items: center !important;
        align-self: stretch;
        flex: 0 0 auto;
    }

    body.single-product form.variations_form.wd-label-side-md table.variations .label > * {
        display: inline-flex !important;
        align-items: center !important;
        margin-block: 0 !important;
    }

    body.single-product form.variations_form.wd-label-side-md table.variations .value {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* v1.1.4: Buy Now is intentionally disabled. Add to cart remains the single purchase action.
 * This is a CSS fallback too, in case Woodmart renders it from a sticky/template context.
 */
body.single-product .wd-buy-now-btn {
    display: none !important;
}

/* Do not destroy controls whose meaning depends on being circular. */
body :where(
    .avatar,
    .wd-swatch-bg,
    .wd-swatch.wd-bg,
    .wd-loader,
    .wd-spinner,
    .loading:after
) {
    border-radius: 50% !important;
}

@media (max-width: 767px) {
    :root {
        --lili-ui-radius: 9px;
    }
}