/*
 * SA Commerce Pro — storefront pieces (short address field, lookup status, ZATCA QR block, OTP, COD check).
 * Deliberately neutral: inherits the theme's fonts and colours so it fits any store, light or dark.
 * Lines come from currentColor (color-mix), with a plain fallback first for older browsers.
 * Success / error text sits on its own light chip, so it keeps >= 4.5:1 on light and dark themes.
 * Logical properties only, so it works in RTL without a separate file.
 * Themes can override: --sacp-line, --sacp-tint, --sacp-ok-fg/-bg, --sacp-error-fg/-bg.
 */

.sacp-otp, .sacp-cod, .sacp-sa-wrap, .sacp-sa-status, .sacp-zatca, .sacp-account-phone, .sacp-prompt {
	--sacp-line: rgba(128, 128, 128, .4);
	--sacp-tint: rgba(128, 128, 128, .16);
	--sacp-ok-fg: #14532d;
	--sacp-ok-bg: #e7f6ed;
	--sacp-error-fg: #8f1d14;
	--sacp-error-bg: #fdecea;
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.sacp-otp, .sacp-cod, .sacp-sa-wrap, .sacp-sa-status, .sacp-zatca, .sacp-account-phone, .sacp-prompt {
		--sacp-line: color-mix(in srgb, currentColor 22%, transparent);
		--sacp-tint: color-mix(in srgb, currentColor 12%, transparent);
	}
}

/* Short address */
.sacp-sa-wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.sacp-sa-wrap input.sacp-short-address { flex: 1 1 160px; min-inline-size: 0; inline-size: auto; }
.sacp-sa-wrap > .description { flex: 1 1 100%; order: 3; margin: 0; }
input.sacp-short-address { text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
/* The input is LTR (codes are Latin); in RTL pages it still lines up with the other fields. */
[dir="rtl"] input.sacp-short-address { text-align: end; }
.sacp-sa-find { flex: 0 0 auto; white-space: nowrap; min-block-size: 48px; }
/* Narrow phones: the button takes its own full-width row under the input (no clipped edge). */
@media (max-width: 400px) {
	.sacp-sa-wrap .sacp-sa-find { flex: 1 1 100%; }
}
/* Find button placed right after the input (no WooCommerce wrapper). */
input.sacp-short-address + .sacp-sa-find { margin-block-start: 8px; }
.sacp-sa-status { margin-block: 6px 0; margin-inline: 0; font-size: .875em; line-height: 1.5; }
/* Empty live regions stay in the accessibility tree (display:none would stop announcements). */
.sacp-sa-status:empty { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sacp-sa-status.sacp-is-ok, .sacp-sa-status.sacp-is-error { padding-block: .4em; padding-inline: .65em; border-radius: 6px; }
.sacp-sa-status.sacp-is-ok { color: var(--sacp-ok-fg); background: var(--sacp-ok-bg); }
.sacp-sa-status.sacp-is-error { color: var(--sacp-error-fg); background: var(--sacp-error-bg); }
.sacp-sa-status.sacp-is-busy { opacity: .8; }
.sacp-sa-status.sacp-is-warn { padding-block: .4em; padding-inline: .65em; border-radius: 6px; background: var(--sacp-tint, rgba(128, 128, 128, .12)); }
.sacp-short-address-field .description { font-size: .85em; }
/* Short address with an error (format, Arabic letters, not found): same red frame as the code inputs. */
input.sacp-short-address[aria-invalid="true"], input[data-sacp-short-address][aria-invalid="true"] { border-color: var(--sacp-error-fg, #8f1d14) !important; box-shadow: 0 0 0 1px var(--sacp-error-fg, #8f1d14) !important; }

/* ZATCA QR */
.sacp-zatca { margin-block: 2em; margin-inline: 0; padding: 1.25em; border: 1px solid rgba(128, 128, 128, .4); border-color: var(--sacp-line); border-radius: 12px; }
.sacp-zatca__title { margin-block: 0 .75em; margin-inline: 0; font-size: 1.15em; }
.sacp-zatca__body { display: flex; flex-wrap: wrap; gap: 1.25em; align-items: flex-start; }
/* QR codes need dark modules on a light ground to scan, also on dark themes. */
.sacp-zatca__qr { flex: 0 0 auto; background: #fff; padding: 6px; border-radius: 8px; line-height: 0; }
.sacp-zatca__qr svg, .sacp-zatca__qr img { display: block; inline-size: 150px; block-size: 150px; }
.sacp-zatca__facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35em 1em; flex: 1 1 220px; }
.sacp-zatca__facts dt { font-weight: 600; margin: 0; }
.sacp-zatca__facts dd { margin: 0; }

/* OTP sign-in, sign-up, account mobile number, cash on delivery check. */
.sacp-otp { margin-block: 0 1.25em; margin-inline: 0; }
/* Tabs: an underline row that takes the store's look (font, text colour, accent), no box or grey fill.
   The accent is the theme's own colour when it exposes one (WoodMart, Flatsome, Astra, block themes),
   else the store's main button colour (set by otp.js), else the text colour. */
.sacp-otp { --sacp-accent: var(--wd-primary-color, var(--fs-color-primary, var(--ast-global-color-0, var(--wp--preset--color--primary, currentColor)))); }
.sacp-otp__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-block: 0 1em; margin-inline: 0; padding: 0; border: 0; border-block-end: 1px solid var(--sacp-line); }
.sacp-otp__tab { flex: 1 1 auto; min-inline-size: 0; min-block-size: 48px; margin-block-end: -1px; padding-block: .5em; padding-inline: .75em; border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: transparent; color: inherit; font: inherit; line-height: 1.3; text-align: center; cursor: pointer; transition: border-color .15s; }
.sacp-otp__tab:hover { border-block-end-color: var(--sacp-line); }
.sacp-otp__tab[aria-selected="true"] { font-weight: 600; border-block-end-color: var(--sacp-accent); color: inherit; }
/* Themes style every <button> (fills, shadows, uppercase, radius): undo that for the tabs only. */
.sacp-otp .sacp-otp__tabs button.sacp-otp__tab,
.sacp-otp .sacp-otp__tabs button.sacp-otp__tab:hover,
.sacp-otp .sacp-otp__tabs button.sacp-otp__tab:focus { background: transparent; color: inherit; border: 0; border-block-end: 2px solid transparent; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: normal; font: inherit; min-block-size: 48px; min-width: 0; width: auto; height: auto; }
.sacp-otp .sacp-otp__tabs button.sacp-otp__tab[aria-selected="true"] { border-block-end-color: var(--sacp-accent); font-weight: 600; }
/* Theme :focus rules can be stronger than ours: keep a visible ring on keyboard focus. */
.sacp-otp .sacp-otp__tabs button.sacp-otp__tab:focus-visible { outline: 2px solid var(--sacp-accent); outline-offset: -2px; box-shadow: none; }
.sacp-gate__privacy { margin-block: .8em 0; font-size: .85em; text-align: center; }
.sacp-otp__panel[hidden], .sacp-cod[hidden], .sacp-otp__tabs[hidden] { display: none !important; }
.sacp-otp__step > :first-child { margin-block-start: 0; }
.sacp-otp__field label { display: block; }
.sacp-otp__field input { inline-size: 100%; }
.sacp-otp input[type="tel"], .sacp-otp__code { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
[dir="rtl"] .sacp-otp input[type="tel"], [dir="rtl"] .sacp-otp__code { text-align: end; }
.sacp-otp__code { letter-spacing: .4em; font-size: 1.25em; max-inline-size: 12ch; }
.sacp-otp__remember { margin-block: .25em 0; margin-inline: 0; }
.sacp-otp__remember label { display: inline-flex; align-items: center; gap: .5em; min-block-size: 48px; cursor: pointer; }
.sacp-otp__remember input[type="checkbox"] { inline-size: 1.15em; block-size: 1.15em; margin: 0; flex: 0 0 auto; }
.sacp-otp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin-block: .5em 0; margin-inline: 0; }
.sacp-otp__btn { min-block-size: 48px; }
.sacp-otp__link { min-block-size: 48px; padding-block: 0; padding-inline: .25em; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.sacp-otp__link:disabled { text-decoration: none; cursor: default; }
/* Link-buttons (Resend, Change number/email, Cancel, Confirm email) are <button>s too: same reset as the tabs,
   so theme button rules (Woodmart, ".woocommerce form button", block-theme presets) can't paint them
   dark-on-dark. Main actions (.sacp-otp__btn, with the theme's button class) keep the theme look on purpose. */
.sacp-otp .sacp-otp__actions button.sacp-otp__link,
.sacp-otp .sacp-otp__actions button.sacp-otp__link:hover,
.sacp-otp .sacp-otp__actions button.sacp-otp__link:focus,
.sacp-otp .sacp-otp__actions button.sacp-otp__link:active,
.sacp-cod .sacp-otp__actions button.sacp-otp__link,
.sacp-cod .sacp-otp__actions button.sacp-otp__link:hover,
.sacp-cod .sacp-otp__actions button.sacp-otp__link:focus,
.sacp-cod .sacp-otp__actions button.sacp-otp__link:active {
	inline-size: auto; min-inline-size: 0; min-block-size: 48px; margin: 0; padding-block: 0; padding-inline: .25em;
	border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: inherit; line-height: 1.4;
	text-transform: none; letter-spacing: normal; text-decoration: underline; text-underline-offset: .15em; opacity: 1; cursor: pointer;
}
.sacp-otp .sacp-otp__actions button.sacp-otp__link:disabled,
.sacp-cod .sacp-otp__actions button.sacp-otp__link:disabled { text-decoration: none; opacity: 1 !important; cursor: default; font-variant-numeric: tabular-nums; }
/* Themes fade disabled buttons (Woodmart: 60 %); the countdown must stay readable (contrast). */
/* COD box buttons: theme checkout rules (full-width "Place order" style, caps) shouldn't stretch them. */
.sacp-cod .sacp-otp__actions button.sacp-otp__btn { inline-size: auto; min-block-size: 48px; }
.sacp-otp__confirm-email { margin-block: 1em 0; padding-block-start: .75em; border-block-start: 1px solid rgba(128, 128, 128, .4); border-block-start-color: var(--sacp-line); }
.sacp-otp__confirm-email .sacp-otp__hint { margin-block-end: .25em; }
.sacp-otp__confirm-email .sacp-otp__actions { margin-block-start: 0; }
.sacp-otp__lead { margin-block: 0 .75em; margin-inline: 0; }
.sacp-otp__hint { margin-block: 0 .75em; margin-inline: 0; font-size: .9em; }
.sacp-otp__current { margin-block: 0 .5em; margin-inline: 0; }
.sacp-otp__note { margin-block: .75em 0; }
/* Invalid input: error-coloured border (plus the message in the alert region, linked by aria-describedby). */
.sacp-otp input[aria-invalid="true"] { border-color: var(--sacp-error-fg) !important; box-shadow: 0 0 0 1px var(--sacp-error-fg); }
/* Masked numbers / emails inside sentences keep their LTR order in Arabic. */
.sacp-otp__current strong, .sacp-otp bdi { unicode-bidi: isolate; direction: ltr; }
.sacp-otp__ok { display: inline-block; margin: 0; padding-block: .35em; padding-inline: .65em; border-radius: 6px; color: var(--sacp-ok-fg); background: var(--sacp-ok-bg); font-weight: 600; }
.sacp-otp__msg { margin-block: .75em 0; margin-inline: 0; font-size: .9em; line-height: 1.5; }
.sacp-otp__msg:empty { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sacp-otp__msg.sacp-is-ok, .sacp-otp__msg.sacp-is-error, .sacp-otp__msg.sacp-is-info { padding-block: .45em; padding-inline: .75em; border-radius: 6px; }
.sacp-otp__msg.sacp-is-ok { color: var(--sacp-ok-fg); background: var(--sacp-ok-bg); }
.sacp-otp__msg.sacp-is-error { color: var(--sacp-error-fg); background: var(--sacp-error-bg); }
.sacp-otp__msg.sacp-is-info { background: var(--sacp-tint); }
.sacp-account-phone { margin-block: 1.5em; margin-inline: 0; padding-block: 1em; padding-inline: 1.25em; border: 1px solid rgba(128, 128, 128, .4); border-color: var(--sacp-line); border-radius: 12px; }
.sacp-account-phone legend { font-size: 1.05em; line-height: 1.4; margin: 0; padding-inline: .25em; }
.sacp-account-phone legend { padding-block: 0; padding-inline: .4em; font-weight: 600; }
.sacp-cod { margin-block: 0 1em; margin-inline: 0; padding-block: 1em; padding-inline: 1.25em; border: 1px solid rgba(128, 128, 128, .4); border-color: var(--sacp-line); border-radius: 12px; }
/* "Place order" pressed while the number is unverified (block checkout): error-coloured frame (not colour alone:
   the reason is also announced and shown in the box). */
.sacp-cod.has-error { border-color: var(--sacp-error-fg); box-shadow: 0 0 0 1px var(--sacp-error-fg); }
.sacp-cod:focus { outline: none; }
.sacp-cod:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sacp-prompt { padding-block: .75em; padding-inline: 1em; border-inline-start: 3px solid currentColor; background: rgba(128, 128, 128, .08); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.sacp-prompt { background: color-mix(in srgb, currentColor 5%, transparent); }
}
/* Host form fields hidden while an OTP tab is active (class, not [hidden]: themes override that). */
.sacp-host-off { display: none !important; }
/* Read by screen readers only (busy states: "Sending…", "Checking…"). */
.sacp-sr { position: absolute !important; 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; }

/* Visible keyboard focus in the text colour (works on light and dark themes). */
.sacp-otp__tab:focus-visible,
.sacp-otp__link:focus-visible,
.sacp-otp__btn:focus-visible,
.sacp-otp input:focus-visible,
.sacp-sa-find:focus-visible,
input.sacp-short-address:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sacp-otp__tab:focus-visible { outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
	.sacp-otp, .sacp-otp *, .sacp-cod, .sacp-cod *, .sacp-sa-wrap *, .sacp-sa-status, .sacp-zatca * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Phone-first checkout: the mobile step shown before the checkout form. */
.sacp-gate { max-width: 480px; margin-block: 1em 2em; margin-inline: auto; }
.sacp-gate__title { margin-block: 0 .35em; }
.sacp-gate__lead { margin-block: 0 1.1em; }
.sacp-gate__summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5em; margin-block: 0 .8em; padding: .6em .8em; border: 1px solid rgba(128, 128, 128, .3); border-radius: 8px; }
.sacp-gate .woocommerce-form-login { margin: 0; padding: 0; border: 0; }
.sacp-gate__guest { margin-block-start: 1.1em; text-align: center; }
.sacp-gate__guest a { display: inline-flex; align-items: center; justify-content: center; min-block-size: 48px; padding-inline: 1em; border: 1px solid rgba(128, 128, 128, .4); border-radius: 8px; font-size: .95em; text-decoration: underline; }
.sacp-phone-hint { margin-block: .4em 0; font-size: .9em; }
.sacp-phone-hint a { display: inline-flex; align-items: center; min-block-size: 48px; font-weight: 600; }
@media (max-width: 480px) { .sacp-gate__guest a { display: flex; } }
.sacp-gate__summary a { display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: .5em; }
.sacp-email-reminder a { font-weight: 600; }