with the field key as an id. Both the theme's overrides and the plugin's own markup go through it, so one rule set covers all four surfaces. */ .jd-otp .form-row, .confirm-checkout-sms .form-row { margin: 0 0 var(--jd-space-5); padding: 0; } /* WooCommerce's own `.woocommerce form .form-row { padding: 3px; margin: 0 0 6px }` is (0,2,1) and beats the (0,2,0) above - measured live: every control sat 3px inside its own row and 3px down from it. `.confirm-checkout-sms` also carries the .woocommerce class, so pairing them reaches (0,3,0). This is the third time on this build that a WC selector quietly outranked a theme class that was present on the markup. */ .woocommerce.confirm-checkout-sms .form-row { margin: 0; padding: 0; } /* The span WooCommerce wraps every control in is inline, so its line box added a 3px baseline gap above each control. */ .confirm-checkout-sms .woocommerce-input-wrapper { display: block; } .jd-otp label, .confirm-checkout-sms label { display: block; font-size: 12.5px; font-weight: 600; color: var(--jd-ink); margin-block-end: var(--jd-space-3); } .jd-otp input[type="text"], .jd-otp select, .confirm-checkout-sms input[type="text"], .confirm-checkout-sms select, .confirm-checkout-sms .select2-container .select2-selection { inline-size: 100%; min-block-size: 48px; /* [el.51, el.52 h48] */ padding-inline: var(--jd-space-7); /* 14 [el.52 padding 0 14] */ border: var(--jd-border); /* [el.51, el.52 1px #DBCFB8] */ border-radius: var(--jd-radius-btn); /* 6 [el.51, el.52] */ background-color: var(--jd-surface); /* [el.51, el.52 #FCF9F1] */ color: var(--jd-ink); font-family: var(--jd-font-ui); font-size: var(--jd-fs-sm); outline: none; transition: border-color var(--jd-transition); } /* The rule above is (0,2,1) and LOSES to woocommerce-rtl.css's `.woocommerce form .form-row .input-text, .woocommerce form .form-row select` at (0,3,1), which declares `padding: .5em; background: var(--wc-form-color-background,#fff); border-radius: var(--wc-form-border-radius)`. Measured live before this was written: the number input rendered white, radius 4, padding-inline 8 - against el.52's #FCF9F1, 6 and 14 - while the theme class was on the element the whole time. (0,4,1) clears it. */ .woocommerce.confirm-checkout-sms .form-row .input-text, .woocommerce.confirm-checkout-sms .form-row select { padding-block: 0; /* [el.52 padding 0 14] */ padding-inline: var(--jd-space-7); background-color: var(--jd-surface); /* [el.52 #FCF9F1] */ color: var(--jd-ink); /* [el.52 #1C2433] - the same WC rule carries color: var(--wc-form-color-text,#000), so the field measured pure black */ border: var(--jd-border); /* [el.52 1px #DBCFB8] */ border-radius: var(--jd-radius-btn); /* [el.52 6px] */ } .jd-otp input[type="text"]:focus, .jd-otp select:focus, .confirm-checkout-sms input[type="text"]:focus, .confirm-checkout-sms select:focus { border-color: var(--jd-navy); /* [store.dc.html:856 style-focus] */ } /* The rule above is (0,3,1) and the border rule that precedes it is (0,4,0), so on the checkout controls the focus ring lost to a plain border - and the shared rule sets `outline: none`, which would have left a customer tabbing into the phone field on the money path with NO visible focus state at all. The same arithmetic killed WooCommerce's own validation classes, which the plugin's JS toggles on the wrapper (confirm-checkout-v1.js:155-166) - a failed send would have shown no red border. Neither is visible in a static capture; both are DoD states. */ .woocommerce.confirm-checkout-sms .form-row .input-text:focus, .woocommerce.confirm-checkout-sms .form-row select:focus { border-color: var(--jd-navy); } /* WooCommerce's own state rules are `.woocommerce form .form-row.woocommerce-invalid input.input-text` at (0,4,2) and paint --wc-red #a00 / --wc-green, neither of which is in tokens.css. The theme has declared its intent since the file was written (`.woocommerce-invalid input[type="text"]` below, 0,2,1) and has been losing silently. (0,5,2) is what it takes. Verified live: the field computed rgb(170,0,0) before this. */ .woocommerce.confirm-checkout-sms .form-row.woocommerce-invalid input.input-text, .woocommerce.confirm-checkout-sms .form-row.woocommerce-invalid select { border-color: var(--jd-danger); } .woocommerce.confirm-checkout-sms .form-row.woocommerce-validated input.input-text { border-color: var(--jd-emerald); } /* ---- The phone row ------------------------------------------------------ * * * The prototype is a plain flex row - a 120px country control beside a number input that * takes the rest, with no breakpoint at all [el.51 120x48, el.52 328x48 = 458 − 120 − 10]. * The plugin's form is the flex container, because its two bare
children (the lede and * the button row) are siblings of the fields; they are given a full-line basis so they stay * on their own rows. row-gap is 0 so the elements' own margins keep controlling the * vertical rhythm - the gap belongs to the row only. */ .jd-otp__phone, .confirm-checkout-sms .woocommerce-form-checkout { display: flex; flex-wrap: wrap; align-items: start; column-gap: var(--jd-space-5); /* 10 [store.dc.html:846] */ row-gap: 0; } .confirm-checkout-sms > form > p:first-of-type, .confirm-checkout-sms form > p:last-of-type { flex: 1 1 100%; } /* min-inline-size, because a flex item's `auto` minimum is its min-content width and the nowrap hint below is wider than 120: without this the country control measured 142.5. */ #country_iso_field, .jd-otp__country { flex: 0 0 120px; min-inline-size: 0; } /* [el.51 120 wide, identical at 390] */ /* The prototype draws no separate dial-code box: its country control carries the code in its own label, which inc/compat/sms-otp.php appends there. Keeping this third control would make el.52's 328px impossible. PENDING-DECISIONS #25. */ #phone_code_field { display: none; } .jd-otp__ccode { inline-size: 96px; flex-shrink: 0; } /* basis 0, not auto. A flex line breaks on the items' hypothetical main sizes, before any shrinking happens, and an 's intrinsic width is its default size=20 - about 208px here. At 390 that made 120 + 10 + 208 > 288 and the number input wrapped onto its own row, which measured perfectly at 1440 and was wrong at 390. [el.52 328 = 458 − 120 − 10; 390 el.41 158 = 288 − 120 − 10] */ #phonenumber_field, .jd-otp__number { flex: 1 1 0; min-inline-size: 0; } #phone_code { font-family: var(--jd-font-mono); text-align: center; color: var(--jd-navy); /* Readonly + disabled; the browser's default dimming would make a value the customer needs to read for confirmation illegible. */ opacity: 1; } #phonenumber { font-family: var(--jd-font-mono); /* [el.52 IBM Plex Mono 16 / .08em] */ font-size: var(--jd-fs-base); letter-spacing: var(--jd-track-biblio); direction: ltr; /* [el.52 direction ltr] */ text-align: start; /* never `left`: under ltr, start IS the left edge, and it mirrors correctly */ } /* ---- The country control ------------------------------------------------ * * * confirm-checkout-v1.js:274-288 calls .selectWoo() on the select and the whole dial-code * and placeholder population lives inside that `if ( $().selectWoo )` block, so the widget * stays and its shell is styled to el.51 instead. PENDING-DECISIONS #27. */ /* selectWoo writes an inline width on the container; only !important beats an inline style. The height is declared too: select2 lets its .select2-selection overflow the container, so the container's LAYOUT box was 44px while it painted 48. Nothing above it looked wrong — but the hint below it, and therefore the button, the foot rule and the card's bottom edge, were all 4px high. [el.51 120x48 @829,324; 390 el.40 @219,353] */ .confirm-checkout-sms .select2-container { inline-size: 120px !important; block-size: 48px; } .confirm-checkout-sms .select2-container .select2-selection { display: flex; align-items: center; padding-inline: var(--jd-space-5); /* 10 [el.51 padding 0 10] */ font-size: 12.5px; /* [el.51 12.5 / 500 / #18295E] */ font-weight: 500; color: var(--jd-navy); } .confirm-checkout-sms .select2-container .select2-selection__rendered { padding-inline: 0 var(--jd-space-9); /* clears select2's absolutely positioned chevron, which the prototype draws inside the same padding box */ line-height: normal; color: inherit; } /* select2 pins the chevron to a 26px box at the top of the control; the control is 48. */ .confirm-checkout-sms .select2-container .select2-selection__arrow { block-size: 46px; } /* ---- The format hint ---------------------------------------------------- * * * inc/compat/sms-otp.php passes this as `description` on country_iso, so WooCommerce renders * it inside #country_iso_field - which is exactly where the prototype puts it: at the card's * inline-start edge, under the country control, not under the number input * [el.53 115x15 @834,378, right edge 949 = the select's; 390 el.42 @224,407, right edge 339]. * It also makes the row 48 + 6 + 15 = 69px tall, which is what puts the button at y409. * nowrap because the box is 120px and the hint is 115: the prototype's own container is the * full 458, so the line must not be allowed to break. PENDING-DECISIONS #27. */ #country_iso_field .select2-container { display: block; } /* line-height 0 on the STRUT only: the hint is an inline-block on the baseline, so the wrapper's own strut left 2.2px of descender under it and pushed everything below the row down by the same amount. The hint's own line-height stays `normal`, which is what el.53 measures. */ #country_iso_field .woocommerce-input-wrapper { line-height: 0; } #country_iso_field .description, .jd-otp__hint { display: inline-block; margin-block-start: var(--jd-space-3); /* 6 [el.53 y378 − (el.52 y324 + h48)] */ font-size: 10.5px; /* [el.53 10.5 / #6E7689] */ line-height: normal; color: var(--jd-text-muted); text-align: start; white-space: nowrap; /* woocommerce-rtl.css paints `.description` as a blue #1e85be notice box with 1em of padding and `display: none` - (0,4,1), so only the id selector here clears it. The padding alone made the hint 36px tall instead of 15. */ padding: 0; background: none; border-radius: 0; } /* ...and the same WooCommerce rule set draws the notice box's pointer as a ::before triangle. It survived the reset above and rendered as a blue arrowhead over the hint — found by opening the PNG, not by any count. */ #country_iso_field .description::before { display: none; } /* ---- The code field ----------------------------------------------------- */ /* One input rather than the prototype's four boxes. The plugin's JS auto-submits when a single field's value reaches length 4, so four inputs would never verify. The field occupies the same 4 x 52px + 3 x 10px footprint and 60px height, preserving the measured composition while retaining the plugin contract. */ .jd-otp__code #code_verify, .confirm-checkout-sms #code_verify { position: relative; z-index: 1; font-family: var(--jd-font-mono); font-size: 22px; font-weight: 500; letter-spacing: calc(62px - 1ch); /* 52px box + 10px gap [store.dc.html:865] */ direction: ltr; text-align: start; min-block-size: 60px; padding-inline: calc(26px - .5ch) 0; /* first glyph centred in the first 52px box */ border: 0; border-radius: 0; background-color: transparent; text-indent: 0; } .jd-otp__code { inline-size: 238px; /* 4 x 52 + 3 x 10 [store.dc.html:865-867] */ max-inline-size: 100%; margin: var(--jd-space-3) auto var(--jd-space-8); } .jd-otp__code .woocommerce-input-wrapper { --jd-otp-frame-border: var(--jd-hairline); position: relative; display: block; inline-size: 238px; max-inline-size: 100%; block-size: 60px; direction: ltr; } .jd-otp__code .woocommerce-input-wrapper::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 52px; block-size: 60px; border: 1px solid var(--jd-otp-frame-border); border-radius: var(--jd-radius-btn); background-color: var(--jd-surface); box-shadow: 62px 0 0 -1px var(--jd-surface), 62px 0 0 0 var(--jd-otp-frame-border), 124px 0 0 -1px var(--jd-surface), 124px 0 0 0 var(--jd-otp-frame-border), 186px 0 0 -1px var(--jd-surface), 186px 0 0 0 var(--jd-otp-frame-border); pointer-events: none; } .jd-otp__code .woocommerce-input-wrapper:focus-within { --jd-otp-frame-border: var(--jd-navy); } /* The single field still needs an accessible name, while the prototype carries no visible label above its four digit boxes. */ .jd-otp__code label { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .phone-number { color: var(--jd-navy); font-size: var(--jd-fs-2xs); } /* ---- Actions ------------------------------------------------------------ */ .jd-otp__actions, .confirm-checkout-sms form > p:last-of-type { display: flex; align-items: center; gap: var(--jd-space-5); margin: var(--jd-space-8) 0 0; /* 16 [el.54 m:16 0 0 0] */ } .confirm-checkout-sms .jd-otp > .jd-otp__actions { justify-content: center; margin: 0; } /* The plugin ships these anchors with .button and, on the resend control, .disabled. It toggles .disabled from JS during the 60-second cooldown, so the disabled look has to come from that class rather than from :disabled - an is never :disabled. */ #send-confirm-checkout-ajax, #confirm-register-ajax { flex: 1; justify-content: center; min-block-size: 50px; /* [el.54 458x50] */ } #resend-confirm-checkout-ajax, #resend-confirm-register-ajax { min-block-size: 44px; } #resend-confirm-checkout-ajax.disabled, #resend-confirm-register-ajax.disabled { opacity: .45; pointer-events: none; } /* ---- The foot note and the back link ------------------------------------ */ .jd-otp__foot { border-block-start: var(--jd-border); /* [el.55 1px t #DBCFB8] */ margin: 0; /* the 16 lives on .jd-otp-trailer__card's padding-block-start - see above */ padding-block-start: 11px; /* [el.55 padding-top 11] */ font-size: 10.5px; /* [el.55 10.5/19.95 400 #6E7689] */ color: var(--jd-text-muted); line-height: 1.9; } /* The register templates stack two of these; only the first carries the rule. */ .jd-otp__foot + .jd-otp__foot { border-block-start: 0; margin-block-start: 0; padding-block-start: 0; } .jd-otp__foot a { color: var(--jd-navy); border-block-end: 1px solid currentColor; } .confirm-checkout-sms .jd-otp > .jd-otp__foot { margin-block-start: 18px; text-align: center; } .jd-otp__back { margin-block-start: 14px; /* [store.dc.html:875; el.56 y551 vs card bottom 534] */ margin-block-end: 0; text-align: center; } .jd-otp__back a { font-size: var(--jd-fs-2xs); /* 12 [el.56 12 / 400 / #566078] */ font-weight: 400; line-height: normal; /* [el.56 normal; it inherited --jd-lh-body 1.7 x 12 = 20.4] */ color: var(--jd-text-secondary); /* Transparent, not #566078: docs/design/10-otp.md prints el.56 as `1px b #566078` because the markdown formatter falls back to the text colour on a transparent border. The raw JSON says border-bottom-color rgba(0, 0, 0, 0), and store.dc.html:875 declares `border-bottom:1px solid transparent` with the colour appearing only on hover. The width is 1px in both, which is all the matcher compares. */ border-block-end: 1px solid transparent; } .jd-otp__back a:hover { color: var(--jd-navy); border-block-end-color: var(--jd-navy); } /* ---- Validation --------------------------------------------------------- */ /* WooCommerce's own state classes, which the plugin's JS adds and removes on the wrapper rather than the input. */ .woocommerce-invalid input[type="text"], .woocommerce-invalid select { border-color: var(--jd-danger); } .woocommerce-validated input[type="text"] { border-color: var(--jd-emerald); } /* ---- The plugin's own submit button -------------------------------------- * * sms-global-services renders the phone step's send control as `` * from its own markup, not from one of the three templates this theme overrides in * sms-global/ - so it is the one WooCommerce button on the site the theme cannot reach by * adding .jd-btn, and it rendered in #7f54b3 purple at the head of checkout. * * 0,4,1 to clear WooCommerce's own `.woocommerce a.button.alt` at 0,3,1. Verified against * the live CSSOM on 2026-08-24 (computed background rgb(24,41,94)) - the 2026-08-22 capture * that appeared to show this rule failing was reading a cached otp.css, whose URL never * changed because inc/compat/sms-otp.php passed the static ALJADAWEL2026_VERSION. That is * fixed there; do not re-derive a specificity problem from that capture. * * el.54's values live in THIS block rather than in a new selector, because a new selector * at lower specificity would lose to the same 0,3,1 rule. Scoped to the two OTP wrappers, * so it cannot reach a button on any other screen. */ .woocommerce .jd-otp button.button.alt, .woocommerce-page .jd-otp button.button.alt, .woocommerce .jd-otp a.button.alt, .woocommerce-page .jd-otp a.button.alt, .woocommerce.confirm-checkout-sms button.button.alt, .woocommerce.confirm-checkout-sms a.button.alt { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; /* [el.54 458 = the card's inner width] */ block-size: 50px; /* [el.54 h50] */ min-block-size: 50px; padding-block: 1px; /* [el.54 padding 1 6] */ padding-inline: var(--jd-space-3); border: 1px solid transparent; /* [el.54 1px transparent] */ border-radius: var(--jd-radius-btn); /* [el.54 6px] */ background-color: var(--jd-navy); /* [el.54 #18295E] */ color: var(--jd-on-navy); font-family: inherit; font-size: var(--jd-fs-sm); /* [el.54 14 / 600] */ font-weight: 600; line-height: normal; cursor: pointer; transition: background-color var(--jd-transition), border-color var(--jd-transition); } .woocommerce .jd-otp button.button.alt:hover, .woocommerce-page .jd-otp button.button.alt:hover, .woocommerce .jd-otp a.button.alt:hover, .woocommerce-page .jd-otp a.button.alt:hover, .woocommerce.confirm-checkout-sms button.button.alt:hover, .woocommerce.confirm-checkout-sms a.button.alt:hover { background-color: var(--jd-navy-700); /* [store.dc.html:858 style-hover #1F3370] */ border-color: var(--jd-navy-700); } /* Code-stage countdown/resend is text in the prototype, not the phone-stage primary button. The ID gives this reset precedence over the generic Woo `.button.alt` treatment above. */ .woocommerce.confirm-checkout-sms .jd-otp #resend-confirm-checkout-ajax { inline-size: auto; block-size: auto; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none; color: var(--jd-text-muted); font-size: 11.5px; font-weight: 400; line-height: normal; } .woocommerce.confirm-checkout-sms .jd-otp #resend-confirm-checkout-ajax.disabled { opacity: 1; pointer-events: none; } .woocommerce.confirm-checkout-sms .jd-otp #resend-confirm-checkout-ajax:not(.disabled) { border-block-end: 1px solid currentColor; color: var(--jd-navy); font-size: var(--jd-fs-2xs); font-weight: 500; }