/**
 * WooForm — Woodmart skin
 * =====================================================================
 * A skin built for the Woodmart/XTS theme. Unlike the other skins, which paint
 * a fixed palette in literal hex, every colour, radius, height and font here
 * resolves from a CSS variable — either one of Woodmart's own tokens or the
 * plugin's --codwo-* tokens from Theme Studio. Change the theme's primary
 * colour, or a value in Theme Studio, and the form follows without a rebuild.
 *
 * Resolution order for every value:
 *   1. the theme token   (--wd-*)          — so the form matches the storefront
 *   2. the plugin token  (--codwo-*)       — Theme Studio, when the theme has none
 *   3. a literal fallback                  — so a non-Woodmart theme still renders
 *
 * Tokens consumed (Woodmart/XTS):
 *   --wd-primary-color      brand colour            --wd-form-brd-color   input border
 *   --wd-alternative-color  secondary/accent        --wd-form-brd-width   input border width
 *   --wd-title-color        heading text            --wd-form-brd-radius  input radius
 *   --wd-text-color         body/muted text         --wd-form-height      control height
 *   --wd-form-bg            input background        --wd-brd-radius       card/button radius
 *   --wd-text-font          base font stack         --wd-title-font       heading font
 *
 * The doubled `.codwo-skin-woodmart.codwo-skin-woodmart` is deliberate: it
 * lifts specificity to match the per-skin rules in skins.css, and this file is
 * enqueued after them so it wins the tie.
 */

/* ------------------------------------------------------------------ *
 * 1. Token bridge
 * ------------------------------------------------------------------ */

.codwo-product-form-wrapper.codwo-skin-woodmart.codwo-skin-woodmart {
    /* Colour ------------------------------------------------------- */
    --codwo-primary:      var(--wd-primary-color, var(--codwo-studio-primary, #0073aa));
    --codwo-secondary:    var(--wd-alternative-color, var(--codwo-studio-secondary, #667eea));
    --codwo-button-bg:    var(--wd-primary-color, var(--codwo-studio-button-bg, #0073aa));
    --codwo-button-text:  var(--codwo-studio-button-text, #fff);
    --codwo-accent:       var(--wd-alternative-color, var(--codwo-studio-accent, #ef6c00));

    /* Woodmart splits text colour in two: --wd-title-color for headings and
       --wd-text-color for body copy, which is already the muted tone. */
    --codwo-text:         var(--wd-title-color, var(--codwo-studio-text, #2c3e50));
    --codwo-text-muted:   var(--wd-text-color, var(--codwo-studio-text-muted, #7a8a99));

    --codwo-bg:           var(--codwo-studio-bg, #fff);
    --codwo-surface:      var(--wd-form-bg, var(--codwo-studio-surface, #f8fafc));
    --codwo-surface-muted: var(--wd-form-bg, var(--codwo-studio-surface, #f8fafc));
    --codwo-border:       var(--wd-form-brd-color, var(--codwo-studio-border, #e2e6ec));
    --codwo-border-strong: var(--wd-form-brd-color, var(--codwo-studio-border, #c5d0dd));
    --codwo-success:      var(--codwo-studio-success, #16a34a);
    --codwo-danger:       var(--codwo-studio-danger, #dc2626);

    /* Metrics ------------------------------------------------------ */
    --codwo-radius-input:  var(--wd-form-brd-radius, var(--codwo-studio-radius-input, 10px));
    --codwo-radius-button: var(--wd-brd-radius, var(--codwo-studio-radius-button, 12px));
    --codwo-radius-card:   var(--wd-brd-radius, var(--codwo-studio-radius-card, 16px));
    --codwo-input-height:  var(--wd-form-height, var(--codwo-studio-input-height, 46px));

    /* Local helpers (not part of the public token set) -------------- */
    --codwo-form-brd-w: var(--wd-form-brd-width, 1px);
    --codwo-field-gap: 18px;

    /* Typography --------------------------------------------------- */
    --codwo-font: var(--wd-text-font, inherit);

    color: var(--codwo-text-muted);
    font-family: var(--codwo-font);
}

/* ------------------------------------------------------------------ *
 * 2. Card — sit inside the product column, not on top of it
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart {
    background: var(--codwo-bg);
    border: 1px solid var(--codwo-border);
    border-radius: var(--codwo-radius-card);
    box-shadow: none;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-title,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-product-title {
    color: var(--codwo-text);
    font-family: var(--wd-title-font, var(--codwo-font));
}

/* Price: match the theme's own product price colour rather than the
   plugin's blue. Woodmart prints the active price in the primary colour. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-product-price-value,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-btn-price {
    color: inherit;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-product-price .codwo-product-price-value {
    color: var(--codwo-primary);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-product-price-regular {
    color: var(--codwo-text-muted);
    opacity: .7;
}

/* The header thumbnail was floating unanchored above the fields. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-product-media img {
    border-radius: var(--codwo-radius-input);
    border: 1px solid var(--codwo-border);
}

/* ------------------------------------------------------------------ *
 * 3. Fields — adopt the theme's input shape
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="text"],
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="tel"],
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="email"],
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="number"],
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group textarea,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-captcha-input,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-input {
    min-height: var(--codwo-input-height);
    padding: 10px 16px;
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-radius: var(--codwo-radius-input);
    background: var(--codwo-surface);
    color: var(--wd-form-color, var(--codwo-text));
    font-family: var(--codwo-font);
    font-size: var(--codwo-font-size, 15px);
    box-shadow: none;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group textarea {
    min-height: calc(var(--codwo-input-height) * 2.4);
    padding-block: 12px;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input:focus,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group textarea:focus,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-input:focus {
    border-color: var(--wd-form-brd-color-focus, var(--codwo-primary));
    box-shadow: none;
    outline: none;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group > label {
    color: var(--codwo-text);
    font-family: var(--codwo-font);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* The asterisk trailed the label on the wrong side in RTL because it was
   inside the label with a plain left margin. Logical margin fixes both. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group label .required {
    color: var(--codwo-danger, #dc2626);
    margin-inline-start: 4px;
    margin-inline-end: 0;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group {
    margin-bottom: var(--codwo-field-gap);
}

/* ------------------------------------------------------------------ *
 * 4. Quantity — mirror the theme's stepper
 * ------------------------------------------------------------------ *
 * Woodmart draws div.quantity as one bordered group: square inner edges, the
 * outer corners rounded by --wd-form-brd-radius, and the buttons filling with
 * the primary colour on hover. The plugin markup keeps its own class names so
 * the theme's quantity JS never double-binds to these buttons, but the visual
 * result matches. Logical radii keep minus on the inline-start in both
 * directions, exactly as the theme does.
 */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-quantity-controls {
    display: inline-flex;
    align-items: stretch;
    max-width: none;
    width: auto;
    gap: 0;
    border: 0;
    border-radius: var(--codwo-radius-input);
    overflow: hidden;
    background: none;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-minus,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-plus {
    width: auto;
    min-width: 38px;
    height: var(--codwo-input-height);
    padding: 0 8px;
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    background: var(--codwo-surface);
    color: var(--wd-form-color, var(--codwo-text));
    font-size: 18px;
    font-weight: 400;
    border-radius: 0;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-minus {
    border-start-start-radius: var(--codwo-radius-input);
    border-end-start-radius: var(--codwo-radius-input);
    border-inline-end: 0;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-plus {
    border-start-end-radius: var(--codwo-radius-input);
    border-end-end-radius: var(--codwo-radius-input);
    border-inline-start: 0;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-minus:hover,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-qty-plus:hover {
    background: var(--codwo-primary);
    border-color: var(--codwo-primary);
    color: #fff;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-quantity-controls input {
    width: 56px;
    height: var(--codwo-input-height);
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-inline: 0;
    border-radius: 0;
    background: var(--codwo-surface);
    color: var(--wd-form-color, var(--codwo-text));
    font-family: var(--codwo-font);
    font-weight: 600;
    font-size: var(--codwo-font-size, 15px);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-quantity-controls input:focus {
    box-shadow: none;
    border-color: var(--codwo-border);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-quantity-section > label {
    color: var(--codwo-text);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

/* ------------------------------------------------------------------ *
 * 5. Buttons — theme shape, brand colour
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-submit-btn {
    background: var(--codwo-button-bg);
    color: var(--codwo-button-text);
    border: none;
    border-radius: var(--codwo-radius-button);
    min-height: calc(var(--codwo-input-height) + 8px);
    font-family: var(--codwo-font);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transition: opacity .2s ease, background-color .2s ease;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-submit-btn:hover:not(:disabled) {
    background: var(--codwo-button-bg);
    opacity: .88;
    box-shadow: none;
}

/* Secondary "add to cart" — outlined, so it reads below the primary action. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-add-to-cart-btn,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-btn-secondary {
    background: transparent;
    color: var(--codwo-text);
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-radius: var(--codwo-radius-button);
    min-height: var(--codwo-input-height);
    font-family: var(--codwo-font);
    font-weight: 600;
    /* The demo skin uppercased this, which mangles Arabic spacing. */
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-add-to-cart-btn:hover,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-btn-secondary:hover {
    background: var(--codwo-primary);
    border-color: var(--codwo-primary);
    color: #fff;
}

/* OTP "send code" sat in a grey slab that looked like a disabled input. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-section {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: var(--codwo-field-gap);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-buttons button,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-btn-link {
    border-radius: var(--codwo-radius-button);
    font-family: var(--codwo-font);
    text-transform: none;
}

/* ------------------------------------------------------------------ *
 * 6. Summary, divider, badges
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-order-summary {
    background: var(--codwo-surface);
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-radius: var(--codwo-radius-input);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-total-row,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-total-price {
    color: var(--codwo-text);
    font-family: var(--codwo-font);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-total-price {
    color: var(--codwo-primary);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-woo-cart-divider {
    color: var(--codwo-text-muted);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-trust-badges {
    border-top: 1px solid var(--codwo-border);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-badge {
    background: var(--codwo-surface);
    border: 1px solid var(--codwo-border);
    border-radius: var(--codwo-radius-input);
    color: var(--codwo-text-muted);
    font-family: var(--codwo-font);
}

/* ------------------------------------------------------------------ *
 * 7. RTL corrections
 * ------------------------------------------------------------------ */

/* Inputs inherited `dir=auto` from the wrapper, so a field whose placeholder
   began with Latin text flipped to LTR and drifted to the far edge. Anchoring
   to the logical start keeps every field aligned with its label. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group textarea {
    text-align: start;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input::placeholder,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group textarea::placeholder {
    text-align: start;
    opacity: .65;
}

/* Phone and other numeric entry stay LTR — a leading +212 must not reorder —
   but the box itself still starts on the RTL side. */
.codwo-rtl.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="tel"],
.codwo-rtl.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="number"],
.codwo-rtl.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-input {
    direction: ltr;
    text-align: right;
}

.codwo-rtl.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group input[type="tel"]::placeholder,
.codwo-rtl.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-input::placeholder {
    direction: rtl;
    text-align: right;
}

/* Quantity digits are always LTR regardless of page direction. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-quantity-controls input {
    direction: ltr;
    text-align: center;
}

/* Summary rows are label/value pairs; keep the value on the logical end. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-summary-row,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-total-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Prices are LTR runs ("249.00 د.م.") and must not be reordered by the RTL
   context around them. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-product-price-value,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-product-price-regular,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-total-price,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-subtotal-price,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-btn-price {
    unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ *
 * 8. Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 480px) {
    .codwo-skin-woodmart.codwo-skin-woodmart {
        border-inline: 0;
        border-radius: 0;
    }

    .codwo-skin-woodmart.codwo-skin-woodmart .codwo-submit-btn {
        position: sticky;
        bottom: 8px;
    }
}

/* ------------------------------------------------------------------ *
 * 9. Product header
 * ------------------------------------------------------------------ *
 * The stock skins paint this strip with a hardcoded gradient, which is why
 * changing the Theme Studio colours left it blue. Here it is a quiet surface
 * panel so the product title and price carry the emphasis, not the block.
 */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-header-stacked,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-product-header {
    background: var(--codwo-surface);
    background-image: none;
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-radius: var(--codwo-radius-input);
    color: var(--codwo-text);
    box-shadow: none;
    padding: 14px 16px;
    gap: 14px;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-header-stacked *,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-product-header * {
    color: inherit;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-product-media img {
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-title {
    font-family: var(--wd-title-font, var(--codwo-font));
    font-weight: 600;
    color: var(--codwo-text);
}

/* Stock badge — pill in the theme's own status colours. */
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-stock-badge {
    display: inline-block;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    /* Latin-uppercase tracking mangles Arabic; leave the text as authored. */
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    unicode-bidi: isolate;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-stock--in    { color: var(--codwo-success); }
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-stock--low   { color: var(--codwo-accent); }
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-stock--out   { color: var(--codwo-danger); }

/* ------------------------------------------------------------------ *
 * 10. Promotions, swatches and coupon rows
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-promo-option,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-fbt-item,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-extras-item {
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    border-radius: var(--codwo-radius-input);
    background: var(--codwo-bg);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-promo-option.selected,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-swatch-item.selected .codwo-color-swatch {
    border-color: var(--codwo-primary);
    box-shadow: 0 0 0 2px var(--codwo-primary);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-coupon-row input,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-coupon-input {
    border-radius: var(--codwo-radius-input);
    border: var(--codwo-form-brd-w) solid var(--codwo-border);
    background: var(--codwo-surface);
    min-height: var(--codwo-input-height);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-discount-amount,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-coupon-discount-amount {
    color: var(--codwo-success);
    unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ *
 * 11. Error + status messaging
 * ------------------------------------------------------------------ */

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-error {
    color: var(--codwo-danger);
    font-size: 13px;
    margin-top: 6px;
    text-align: start;
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group.has-error input,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-field-group.has-error textarea {
    border-color: var(--codwo-danger);
}

.codwo-skin-woodmart.codwo-skin-woodmart .codwo-form-messages,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-otp-status,
.codwo-skin-woodmart.codwo-skin-woodmart .codwo-add-to-cart-status {
    border-radius: var(--codwo-radius-input);
    font-family: var(--codwo-font);
    text-align: start;
}