/* SPECTER storefront pieces (customer fields, digital content). Plain, RTL-first, logical properties only.
   The storefront theme (prompt 07) restyles these; keep selectors flat. */

.sp-customer-fields { display: grid; gap: 0.75rem; margin-block: 1rem; }
.sp-customer-field { display: grid; gap: 0.25rem; margin: 0; }
.sp-customer-field label { font-weight: 600; }
.sp-customer-field input,
.sp-customer-field select { inline-size: 100%; max-inline-size: 24rem; padding: 0.5rem 0.75rem; }
.sp-customer-field__help { opacity: 0.75; }

.sp-digital { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 20%, transparent); border-radius: 12px; padding: 1rem 1.25rem; margin-block: 1.5rem; }
.sp-digital__title { font-size: 1.15rem; margin: 0 0 0.75rem; }
.sp-digital__items,
.sp-digital__units,
.sp-digital__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.sp-digital__item-head,
.sp-digital__unit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-digital__state { margin-inline-start: auto; font-size: 0.85rem; opacity: 0.8; }
.sp-digital__item--ready .sp-digital__state { color: #0f7b4a; opacity: 1; }
.sp-digital__item--delayed .sp-digital__state { color: #b4231a; opacity: 1; }
.sp-digital__units { margin-block-start: 0.5rem; }
.sp-digital__unit { border-radius: 8px; padding: 0.5rem 0.75rem; background: color-mix(in srgb, currentColor 5%, transparent); }
.sp-digital__masked,
.sp-digital__secret-value { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.sp-digital__meta { font-size: 0.8rem; opacity: 0.7; }
.sp-digital__reveal { margin-block-start: 0.5rem; display: grid; gap: 0.4rem; }
.sp-digital__reveal-button,
.sp-digital__copy { cursor: pointer; justify-self: start; }
.sp-digital__secret { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-digital__secret-label { font-size: 0.85rem; opacity: 0.8; min-inline-size: 7rem; }
.sp-digital__secret-value { font-weight: 700; user-select: all; }
.sp-digital__note,
.sp-digital__instructions,
.sp-digital__message { margin: 0.25rem 0 0; font-size: 0.9rem; }
.sp-digital__error { color: #b4231a; margin: 0; }
.sp-digital__consent { margin: 0; font-size: 0.8rem; opacity: 0.8; }
.sp-digital__scam { margin: 0 0 0.25rem; font-size: 0.85rem; font-weight: 700; color: #b4231a; }
.sp-digital__warning { margin: 0 0 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: #fdecea; color: #b4231a; font-size: 0.85rem; font-weight: 700; }
/* Player ID confirm step (04b): rendered with its full height from the start, so opening it shifts nothing. */
.sp-confirm { min-height: 6.5rem; margin: 0.5rem 0 0.75rem; padding: 0.6rem 0.75rem; border: 1px solid #e0a54b; border-radius: 8px; background: #fdf1dd; visibility: hidden; }
.sp-confirm--open { visibility: visible; }
.sp-confirm__text { margin: 0 0 0.25rem; font-weight: 700; }
.sp-confirm__id { font-size: 1.15rem; letter-spacing: 0.04em; }
.sp-confirm__name { margin: 0 0 0.4rem; font-size: 0.9rem; min-height: 1.2rem; }
.sp-confirm__actions { margin: 0; display: flex; gap: 0.5rem; }
.sp-digital__safety { margin: 1rem 0 0; font-size: 0.8rem; opacity: 0.75; }

/* «الإبلاغ عن مشكلة» (P03c) */
.sp-digital__claim { margin-block-start: 0.5rem; }
.sp-digital__claim-button,
.sp-digital__claim-cancel { cursor: pointer; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font-size: 0.85rem; }
.sp-digital__claim-form { display: grid; gap: 0.35rem; margin-block-start: 0.5rem; padding: 0.75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); }
.sp-digital__claim-label { font-size: 0.85rem; font-weight: 600; }
.sp-digital__claim-input { inline-size: 100%; max-inline-size: 28rem; }
.sp-digital__claim-actions { display: flex; gap: 1rem; align-items: center; margin: 0.25rem 0 0; }
.sp-digital__claim-submit { cursor: pointer; }
.sp-digital__claim-state { margin: 0; font-size: 0.85rem; font-weight: 600; color: #8a5a00; }
.sp-digital__claims { margin-block-start: 1rem; }
.sp-digital__claims-title { font-size: 1rem; margin: 0 0 0.5rem; }
.sp-digital__claims-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.sp-digital__claims-status { font-size: 0.85rem; }
.sp-digital__claims-status--open { color: #8a5a00; }
.sp-digital__received { margin-block-start: 0.5rem; display: grid; gap: 0.35rem; }
.sp-digital__received-button { cursor: pointer; justify-self: start; }
.sp-digital__received-state { margin: 0; font-size: 0.85rem; font-weight: 600; color: #0f7b4a; }

/* «تقييم الطلب» page (P03): 1–5 stars (RTL: the inputs are rendered 5→1 so the flex row reads 1→5), a comment. */
.sp-rate { max-width: 520px; display: grid; gap: 0.75rem; }
.sp-rate__stars { border: 0; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 0.25rem; }
.sp-rate__stars legend { font-size: 0.9rem; margin-block-end: 0.25rem; }
.sp-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sp-rate__stars label { font-size: 2rem; line-height: 1; cursor: pointer; color: #c9c9c9; }
.sp-rate__stars input:checked ~ label,
.sp-rate__stars label:hover,
.sp-rate__stars label:hover ~ label { color: #e0a54b; }
.sp-rate__stars input:focus-visible + label { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
.sp-rate textarea { width: 100%; }
.sp-rate__error { color: #b4231a; margin: 0; }
.sp-rate--done .sp-rate__stars { font-size: 2rem; color: #e0a54b; margin: 0; }

/* «صفحة تأكيد الطلب» (P04): the merchant's headline + the message for the order's state. */
.sp-confirmation { text-align: center; margin-block: 1rem 1.5rem; }
.sp-confirmation__title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }
.sp-confirmation__message { line-height: 1.8; }
.sp-confirmation__message > :first-child { margin-block-start: 0; }
.sp-confirmation__message > :last-child { margin-block-end: 0; }
.sp-intake-closed { margin-block: 0 1rem; }

/* «إلغاء الطلب» on the customer's order page (P04). */
.sp-cancel { margin-block: 1.5rem; }
.sp-cancel__open { cursor: pointer; display: inline-block; list-style: none; }
.sp-cancel__open::-webkit-details-marker { display: none; }
.sp-cancel__form { margin-block-start: 1rem; padding: 1rem 1.25rem; border: 1px solid color-mix(in srgb, currentColor 20%, transparent); border-radius: 12px; }
.sp-cancel__title { font-weight: 600; margin: 0 0 0.5rem; }
.sp-cancel__reason { margin: 0.35rem 0; }
.sp-cancel__other input { inline-size: 100%; max-inline-size: 24rem; }
.sp-cancel-reason { margin-block: 1rem; }

/* «تعطيل مهلة الدفع عند التحويل البنكي» (P04): the receipt upload box. */
.sp-bank-receipt { margin-block: 1rem; padding: 0.75rem 1rem; border: 1px dashed color-mix(in srgb, currentColor 35%, transparent); border-radius: 10px; }
.sp-bank-receipt.is-done { border-style: solid; border-color: #0f7b4a; }
.sp-bank-receipt__label { display: block; font-weight: 600; }
.sp-bank-receipt__hint,
.sp-bank-receipt__status { margin: 0.25rem 0; font-size: 0.85rem; opacity: 0.8; }

/* ------------------------------------------------------------------ prompt 07 §1: storefront shell (light only, UI1 tokens) */
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --sps-page: #fafaf9;
  --sps-card: #ffffff;
  --sps-border: #e5e5e5;
  --sps-input: #d4d4d4;
  --sps-text: #111111;
  --sps-text-2: #525252;
  --sps-gold: #c9a227;
  --sps-danger: #b42318;
  --sps-success: #15704c;
  --sps-radius: 10px;
  --sps-radius-lg: 16px;
}
body { background: var(--sps-page); color: var(--sps-text); font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; }
a { color: var(--sps-text); }
.sps-wrap { box-sizing: border-box; max-inline-size: 1200px; margin-inline: auto; padding-inline: 16px; }

.sps-strip { background: var(--sps-text); color: #fff; font-size: 13px; }
.sps-strip .sps-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-end; padding-block: 6px; }
.sps-strip a { color: #fff; text-decoration: none; }
.sps-bar { background: var(--sps-card); border-block-end: 1px solid var(--sps-border); }
.sps-bar > .sps-wrap:first-child { display: flex; align-items: center; gap: 16px; padding-block: 12px; }
.sps-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; text-decoration: none; }
.sps-logo img { border-radius: 8px; object-fit: contain; }
.sps-search { flex: 1; min-inline-size: 0; }
.sps-search input { box-sizing: border-box; inline-size: 100%; block-size: 42px; border: 1px solid var(--sps-input); border-radius: 999px; padding-inline: 16px; font: inherit; background: var(--sps-page); }
.sps-search input:focus { outline: none; border-color: var(--sps-gold); box-shadow: 0 0 0 3px rgb(201 162 39 / 0.35); }
.sps-icons { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.sps-icons a { text-decoration: none; font-weight: 600; font-size: 14px; }
.sps-badge { display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border-radius: 999px; background: var(--sps-danger); color: #fff; font-size: 11px; }
.sps-cats { display: flex; gap: 20px; overflow-x: auto; padding-block: 8px 12px; scrollbar-width: none; }
.sps-cats a { text-decoration: none; font-size: 14px; color: var(--sps-text-2); white-space: nowrap; }
.sps-cats a:hover { color: var(--sps-text); }

.sps-footer { background: var(--sps-card); border-block-start: 1px solid var(--sps-border); margin-block-start: 48px; font-size: 14px; }
.sps-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 32px; }
.sps-cols h2 { font-size: 15px; margin: 0 0 12px; }
.sps-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sps-cols a { color: var(--sps-text-2); text-decoration: none; }
.sps-cols a:hover { color: var(--sps-text); text-decoration: underline; }
.sps-desc { color: var(--sps-text-2); margin-block-end: 12px; }
.sps-social { display: flex !important; flex-wrap: wrap; gap: 12px !important; }
.sps-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 16px; border-block-start: 1px solid var(--sps-border); color: var(--sps-text-2); font-size: 13px; }

.sps-wa { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; z-index: 50; display: grid; justify-items: center; gap: 2px; padding: 10px 16px; border-radius: 999px; background: var(--sps-text); color: #fff !important; text-decoration: none; font-weight: 600; font-size: 14px; }
.sps-wa small { font-weight: 400; font-size: 11px; opacity: 0.8; }

@media (max-width: 640px) {
  .sps-bar > .sps-wrap:first-child { flex-wrap: wrap; }
  .sps-search { order: 3; flex-basis: 100%; }
  .sps-icons { margin-inline-start: auto; }
}

/* ------------------------------------------------------------------ prompt 07 §2: home, cards, consent, maintenance */
.sps-home { padding-block: 24px; display: grid; gap: 32px; }
.sps-section h2 { font-size: 20px; margin: 0 0 16px; }
.sps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sps-card { display: grid; gap: 8px; align-content: start; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); padding: 12px; }
.sps-card-link { display: grid; gap: 8px; text-decoration: none; }
.sps-card-link img { inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: contain; border-radius: var(--sps-radius); background: var(--sps-page); }
.sps-card-name { font-weight: 600; font-size: 14px; }
.sps-card-price { font-size: 14px; }
.sps-card.is-out .sps-card-link img { opacity: 0.6; }
.sps-add, .sps-pill { display: inline-flex; justify-content: center; align-items: center; block-size: 40px; padding-inline: 16px; border-radius: var(--sps-radius); text-decoration: none; font-weight: 600; font-size: 14px; }
.sps-add { border: 1px solid var(--sps-text); color: var(--sps-text); }
.sps-pill { background: var(--sps-text); color: #fff !important; border-radius: 999px; }
.sps-more { text-align: center; margin-block-start: 16px; }
.sps-out { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #f5f5f5; color: var(--sps-text-2); font-size: 13px; font-weight: 600; }
.sps-note { margin-block: 8px 0; color: var(--sps-success); font-size: 14px; }
.sps-empty { color: var(--sps-text-2); }
.sps-cat-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sps-cat-grid a { display: inline-block; padding: 8px 16px; border: 1px solid var(--sps-border); border-radius: 999px; background: var(--sps-card); text-decoration: none; }
.sps-consent { position: fixed; inset-inline: 16px; inset-block-end: 16px; z-index: 60; max-inline-size: 640px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); font-size: 14px; }
.sps-consent p { flex: 1 1 260px; margin: 0; }
.sps-consent button { block-size: 40px; padding-inline: 16px; border: 0; border-radius: var(--sps-radius); background: var(--sps-text); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.sps-consent button.is-ghost { background: #fff; color: var(--sps-text); border: 1px solid var(--sps-input); margin-inline-start: 8px; }
.sps-maint { min-block-size: 100vh; display: grid; place-items: center; }
.sps-maint main { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 32px 16px; }
@media (max-width: 900px) { .sps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ------------------------------------------------------------------ prompt 07 §3–§5: sign-in, checkout lines, «حسابي» */
.sps-login { max-inline-size: 420px; margin: 40px auto; padding: 24px; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); display: grid; gap: 16px; }
.sps-login h1 { margin: 0; font-size: 20px; font-weight: 600; }
.sps-login p { margin: 0; color: var(--sps-text-2); font-size: 14px; }
.sps-form { display: grid; gap: 12px; margin-block-end: 24px; }
.sps-field { display: grid; gap: 6px; margin: 0; }
.sps-field label, .sps-form > label { font-size: 13px; color: var(--sps-text); }
.sps-form input[type='email'], .sps-form input[type='text'], .sps-form input[type='tel'], .sps-form input:not([type]), .sps-wa-line input { block-size: 44px; padding-inline: 12px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); background: #fff; font: inherit; color: var(--sps-text); }
.sps-form input:focus, .sps-wa-line input:focus { outline: 2px solid var(--sps-gold); outline-offset: 1px; }
.sps-btn, .sps-wa-line button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: 44px; padding-inline: 18px; border: 0; border-radius: var(--sps-radius); background: var(--sps-text); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.sps-btn.is-ghost, .sps-wa-line button.sps-link-btn { background: #fff; color: var(--sps-text); border: 1px solid var(--sps-input); }
.sps-btn.is-danger { background: var(--sps-danger); }
.sps-link-btn { border: 0; background: none; padding: 0; color: var(--sps-text); text-decoration: underline; font: inherit; cursor: pointer; }
.sps-inline { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.sps-alert { padding: 10px 12px; border: 1px solid var(--sps-danger); border-radius: var(--sps-radius); color: var(--sps-danger); background: #fff; }
.sps-or { display: flex; align-items: center; gap: 8px; color: var(--sps-text-2); font-size: 12px; }
.sps-or::before, .sps-or::after { content: ''; flex: 1; border-block-start: 1px solid var(--sps-border); }
.sps-h3 { margin: 24px 0 8px; font-size: 16px; font-weight: 600; }
.sps-danger { color: var(--sps-danger); }
.sps-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.sps-soon { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--sps-page); border: 1px solid var(--sps-border); font-size: 11px; color: var(--sps-text-2); }
.sps-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sps-orders li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--sps-border); border-radius: var(--sps-radius); background: var(--sps-card); }
.sps-wa-line { margin-block: 24px; padding: 14px; border: 1px dashed var(--sps-input); border-radius: var(--sps-radius); display: grid; gap: 8px; font-size: 14px; }
.sps-wa-line__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sps-email { margin: 0 0 8px; color: var(--sps-text-2); }
.sp-digital__step-up { display: inline-block; margin-block-start: 8px; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 10px 12px; border-radius: var(--sps-radius); color: var(--sps-text); text-decoration: none; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--sps-card); border-inline-start: 3px solid var(--sps-gold); font-weight: 600; }
.sps-paused { margin-block: 12px; padding: 10px 12px; border: 1px solid var(--sps-gold); border-radius: var(--sps-radius); background: var(--sps-card); font-weight: 600; }
/* ------------------------------------------------------------------ prompt 13 §1: protected guide (speed bumps + watermark) */
.sps-guide { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 16px; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sps-guide__step { position: relative; padding: 16px; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); background-clip: padding-box; }
.sps-guide__step h2 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.sps-guide__body { line-height: 1.9; }
.sps-guide__img { display: block; max-inline-size: 100%; block-size: auto; margin-block: 12px; border-radius: var(--sps-radius); pointer-events: none; }
.sps-guide__video { inline-size: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--sps-radius); margin-block: 12px; }
.sps-guide__mark { margin: 8px 0 0; font-size: 11px; color: var(--sps-text-2); direction: ltr; text-align: end; }
.sps-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sps-guides li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--sps-border); border-radius: var(--sps-radius); background: var(--sps-card); }
.sps-req { margin-block: 12px; padding: 14px; border: 1px solid var(--sps-border); border-inline-start: 3px solid var(--sps-gold); border-radius: var(--sps-radius); background: var(--sps-card); display: grid; gap: 8px; }
.sps-req h3 { margin: 0; font-size: 15px; font-weight: 600; }
@media print { .sps-guide { display: none !important; } body::after { content: 'الطباعة غير متاحة لهذا الشرح.'; } }

/* 07c: sign-in popup (Salla's modal over the current page). */
.sps-signin { width: min(420px, calc(100vw - 32px)); border: 0; border-radius: 16px; padding: 28px 24px 24px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.18); }
.sps-signin::backdrop { background: rgb(0 0 0 / 0.45); }
.sps-signin h2 { margin: 0 0 16px; font-size: 20px; font-weight: 700; text-align: center; }
.sps-signin__close { position: absolute; inset-inline-end: 12px; inset-block-start: 10px; }
.sps-signin__close button { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--sps-muted, #666); }
.sps-signin .sps-form { display: grid; gap: 10px; }
.sps-signin .sps-link { border: 0; background: none; color: inherit; text-decoration: underline; cursor: pointer; justify-self: center; }
.sps-signin__google { display: block; margin-top: 12px; text-align: center; }
.sps-customer-field__check { display: flex; align-items: center; gap: 8px; font-weight: 400; }

/* ===================================================================== 07c: Salla's storefront structure (our colours / font) */
/* Header: light top strip (search + contact) · white main bar (logo · categories · account · cart). */
.sps-strip { background: var(--sps-page); color: var(--sps-text-2); border-block-end: 1px solid var(--sps-border); }
.sps-strip .sps-wrap { justify-content: space-between; align-items: center; }
.sps-strip a { color: var(--sps-text-2); }
.sps-strip .sps-search { flex: 0 1 560px; position: relative; display: flex; align-items: center; }
.sps-strip .sps-search svg { position: absolute; inset-inline-start: 12px; color: var(--sps-text-2); pointer-events: none; }
.sps-strip .sps-search input { block-size: 36px; padding-inline-start: 38px; background: var(--sps-card); }
.sps-contact { display: flex; gap: 16px; font-size: 13px; }
.sps-bar > .sps-wrap:first-child { gap: 28px; padding-block: 14px; }
.sps-bar .sps-cats { flex: 1; padding: 0; gap: 24px; }
.sps-cats a.sps-sale, .sps-burger-menu a.sps-sale { color: var(--sps-danger); font-weight: 600; }
.sps-icons { gap: 18px; }
.sps-icons .sps-account { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--sps-page); color: var(--sps-text); }
.sps-cart { display: inline-flex; align-items: center; gap: 8px; color: var(--sps-text); }
.sps-cart-icon { position: relative; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--sps-border); border-radius: 50%; }
.sps-cart-icon .sps-badge { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; }
.sps-total { font-size: 14px; font-weight: 600; }
.sps-burger { display: none; }
.sps-burger summary { list-style: none; cursor: pointer; display: grid; place-items: center; inline-size: 40px; block-size: 40px; }
.sps-burger summary::-webkit-details-marker { display: none; }
.sps-burger-menu { position: absolute; inset-inline: 0; z-index: 30; display: grid; background: var(--sps-card); border-block: 1px solid var(--sps-border); padding: 8px 16px; }
.sps-burger-menu a { padding-block: 12px; text-decoration: none; border-block-end: 1px solid var(--sps-border); }

/* Product cards: image with the heart, name, price (sale red + struck), outline add-to-cart. */
.sps-card { padding: 0; overflow: hidden; gap: 0; }
.sps-card-media { position: relative; }
.sps-card-media img { display: block; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--sps-page); }
.sps-card-body { display: grid; gap: 8px; padding: 12px; }
.sps-card-name { color: var(--sps-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.sps-card-price del, .summary .price del, .wc-block-components-product-price del { color: var(--sps-text-2); font-weight: 400; }
.sps-card-price ins, .summary .price ins, .wc-block-components-product-price ins { color: var(--sps-danger); text-decoration: none; font-weight: 700; }
.sps-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: 38px; border: 1px solid var(--sps-text); border-radius: var(--sps-radius); color: var(--sps-text); text-decoration: none; font-weight: 600; font-size: 14px; }
.sps-add:hover { background: var(--sps-text); color: #fff; }
.sps-wish { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 0; border-radius: 50%; background: var(--sps-card); color: #c8c8c8; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / 0.08); }
.sps-wish.is-on { color: var(--sps-danger); }
.sps-product-actions .sps-wish { position: static; }
.sps-more { text-align: center; margin-block-start: 20px; }
.sps-pill { display: inline-block; padding: 10px 28px; border-radius: 999px; background: var(--sps-text); color: #fff; text-decoration: none; font-weight: 600; }

/* Product page: tax caption, share + heart, add-to-cart filled + buy-now outline. */
.sps-product-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 4px 12px; }
.sps-tax-note { font-size: 13px; color: var(--sps-text-2); }
.sps-product-actions { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.sps-share { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border: 1px solid var(--sps-border); border-radius: 50%; background: var(--sps-card); cursor: pointer; }
.sps-share.is-copied { border-color: var(--sps-gold); }
form.cart { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); background: var(--sps-card); }
form.cart .single_add_to_cart_button { flex: 1; background: var(--sps-text) !important; color: #fff !important; border-radius: var(--sps-radius) !important; }
form.cart .sps-buy-now { flex: 1; background: transparent !important; color: var(--sps-text) !important; border: 1px solid var(--sps-text) !important; border-radius: var(--sps-radius) !important; }

/* Added-to-cart corner card. */
.sps-toast { position: fixed; z-index: 60; inset-block-start: 16px; inset-inline-end: 16px; inline-size: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; background: var(--sps-card); box-shadow: 0 16px 48px rgb(0 0 0 / 0.16); display: grid; gap: 12px; transition: opacity 0.3s, transform 0.3s; }
.sps-toast.is-gone { opacity: 0; transform: translateY(-8px); }
.sps-toast-title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--sps-success, #12804a); }
.sps-toast-bar { display: block; block-size: 3px; border-radius: 3px; background: var(--sps-success, #12804a); animation: sps-toast 6s linear forwards; transform-origin: right; }
@keyframes sps-toast { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.sps-toast-line { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sps-toast-line img { inline-size: 48px; block-size: 48px; object-fit: contain; border-radius: 8px; }
.sps-toast-line span { flex: 1; }
.sps-toast-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sps-toast-actions .sps-btn { text-align: center; }
.sps-toast-close { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; border: 0; background: none; cursor: pointer; color: var(--sps-text-2); }
.sps-btn--outline { background: transparent !important; color: var(--sps-text) !important; border: 1px solid var(--sps-text) !important; }

/* My account: black band with the breadcrumb; sign-out in red. */
.sps-band { margin-inline: calc(50% - 50vw); margin-block-end: 24px; padding: 28px max(16px, calc(50vw - 600px)); background: var(--sps-text); color: #fff; }
.sps-band nav, .sps-band nav a { color: rgb(255 255 255 / 0.75); font-size: 13px; text-decoration: none; }
.sps-band h1 { margin: 8px 0 0; font-size: 22px; color: #fff; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--sps-danger) !important; }
.sps-account-hello { margin: 0; font-size: 18px; font-weight: 700; }
.sps-account-lead { margin: 4px 0 16px; color: var(--sps-text-2); font-size: 14px; }

/* Phone: menu, logo, search, cart. */
@media (max-width: 768px) {
  .sps-contact, .sps-bar .sps-cats, .sps-total { display: none; }
  .sps-burger { display: block; }
  .sps-bar > .sps-wrap:first-child { gap: 10px; }
  .sps-logo { margin-inline-end: auto; }
  .sps-strip .sps-search { flex: 1; }
  .sps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sps-card-body { padding: 10px; }
  .sps-toast { inset-block-start: auto; inset-block-end: 12px; inset-inline: 12px; inline-size: auto; }
}

/* 07c: WooCommerce's Product Collection (shop / category / search) as Salla's cards. */
.wc-block-product-template { gap: 16px !important; }
.wc-block-product { position: relative; display: grid !important; align-content: start; gap: 8px; padding: 0 0 12px !important; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); overflow: hidden; text-align: start !important; }
.wc-block-product .wc-block-components-product-image { position: relative; margin: 0 !important; }
.wc-block-product .wc-block-components-product-image img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--sps-page); }
.wc-block-product .wp-block-post-title, .wc-block-product .wc-block-components-product-name { margin: 0 !important; padding-inline: 12px; font-size: 14px !important; font-weight: 600; text-align: start !important; }
.wc-block-product .wp-block-post-title a { color: var(--sps-text); text-decoration: none; }
.wc-block-product .wc-block-components-product-price { padding-inline: 12px; font-size: 14px !important; text-align: start !important; }
.wc-block-product .wc-block-components-product-sale-badge, .wp-block-woocommerce-product-sale-badge { display: none !important; }
.wc-block-product .wp-block-woocommerce-product-button { margin: 0 !important; padding-inline: 12px; }
.wc-block-product .wp-block-button__link, .wc-block-product .wc-block-components-product-button__button { inline-size: 100%; min-block-size: 38px; border: 1px solid var(--sps-text) !important; border-radius: var(--sps-radius) !important; background: transparent !important; color: var(--sps-text) !important; font-weight: 600; font-size: 14px !important; }
.wc-block-product .wp-block-button__link:hover, .wc-block-product .wc-block-components-product-button__button:hover { background: var(--sps-text) !important; color: #fff !important; }
.wc-block-product:has(.out-of-stock, .outofstock) .wc-block-components-product-button__button, .wc-block-product.outofstock .wc-block-components-product-button__button { opacity: 0.55; pointer-events: none; }
@media (max-width: 768px) { .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } }

/* 07c: Salla's purchase card — quantity, then «أضف إلى السلة» (filled) and «اشترِ الآن» (outline) side by side. */
form.cart { display: grid !important; grid-template-columns: 1fr 1fr; align-items: stretch; }
form.cart .quantity, form.cart .sp-customer-field, form.cart .sp-customer-fields { grid-column: 1 / -1; }
form.cart .single_add_to_cart_button, form.cart .sps-buy-now { min-block-size: 48px; padding: 10px 16px !important; font-size: 15px !important; font-weight: 600; margin: 0 !important; }

@media (max-width: 768px) { .wc-block-product-template { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .wc-block-product-template > li { inline-size: auto !important; max-inline-size: none !important; margin: 0 !important; } }

/* ---------------------------------------------------------------- 07b: design sections (Design\Render) */
:root { --sps-on-gold: #111; --sps-gold-text: #8a6d12; }
.sps-sections { display: grid; gap: 28px; padding-block: 20px; }
.sps-sections .sps-section h2 { margin: 0 0 14px; font-size: 1.15rem; }
.sps-only-mobile { display: none; }
@media (max-width: 767px) { .sps-only-desktop { display: none; } .sps-only-mobile { display: block; } .sps-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .sps-hide-desktop { display: none !important; } }
.sps-announce { position: relative; padding: 8px 40px; font-size: .9rem; text-align: center; }
.sps-announce[hidden] { display: none; }
.sps-announce-x { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: inherit; font-size: 1.2rem; cursor: pointer; }
.sps-slider { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0; border-radius: var(--sps-radius-lg); scrollbar-width: none; }
.sps-slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.sps-slide img { display: block; width: 100%; height: auto; }
.sps-slide-title { position: absolute; inset-inline-start: 20px; bottom: 20px; padding: 6px 14px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; }
.sps-hero { position: relative; overflow: hidden; border-radius: var(--sps-radius-lg); background: var(--sps-gold); color: var(--sps-on-gold); min-height: 240px; display: flex; align-items: center; }
.sps-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.sps-hero-body { position: relative; padding: 32px; max-width: 640px; }
.sps-hero-body h2 { font-size: 1.6rem; margin: 0 0 8px; color: inherit; }
.sps-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.sps-chip { padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.9); color: #111; font-weight: 600; font-size: .85rem; }
.sps-pill.sps-pill-primary { background: var(--sps-gold); color: var(--sps-on-gold) !important; border-color: transparent; }
.sps-hero .sps-pill.sps-pill-primary { background: #fff; color: #111 !important; }
.sps-banner img { display: block; width: 100%; height: auto; border-radius: var(--sps-radius); }
.sps-cat-banner { margin-block-end: 16px; }
.sps-cat-banner img { display: block; width: 100%; height: auto; border-radius: var(--sps-radius); }
.sps-image-grid, .sps-brands, .sps-features, .sps-reviews, .sps-quick, .sps-cat-circles { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sps-image-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sps-image-grid a, .sps-image-grid li > span { color: inherit; text-decoration: none; }
.sps-image-grid img { display: block; width: 100%; height: auto; border-radius: var(--sps-radius); }
.sps-brands { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sps-brands li { background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius); text-align: center; padding: 14px; }
.sps-brands img { width: 64px; height: 64px; object-fit: contain; display: block; margin: 0 auto 8px; }
.sps-brands a { color: inherit; text-decoration: none; }
.sps-cat-circles { grid-auto-flow: column; grid-auto-columns: 96px; overflow-x: auto; text-align: center; }
.sps-cat-circles a { color: inherit; text-decoration: none; font-size: .85rem; }
.sps-cat-icon { display: block; width: 72px; height: 72px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; background: var(--sps-card); border: 1px solid var(--sps-border); }
.sps-cat-icon img { width: 100%; height: 100%; object-fit: cover; }
.sps-row { grid-auto-flow: column; grid-auto-columns: minmax(200px, 23%); grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x proximity; }
.sps-row > li { scroll-snap-align: start; }
.sps-features { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sps-features li { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 18px; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius); }
.sps-features svg { color: var(--sps-gold-text); }
.sps-features span { color: var(--sps-text-2); font-size: .85rem; }
.sps-reviews { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sps-reviews li { padding: 16px; background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius); }
.sps-stars { color: #b7791f; letter-spacing: 2px; }
.sps-review-by { color: var(--sps-text-2); font-size: .85rem; }
.sps-rich { line-height: 1.8; }
.sps-faq details { background: var(--sps-card); border: 1px solid var(--sps-border); border-radius: var(--sps-radius); padding: 12px 16px; margin-bottom: 8px; }
.sps-faq summary { cursor: pointer; font-weight: 600; }
.sps-video { position: relative; aspect-ratio: 16 / 9; }
.sps-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--sps-radius); }
.sps-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 22px; border-radius: var(--sps-radius-lg); background: var(--sps-card); border: 1px solid var(--sps-border); }
.sps-offer h2 { margin: 0 !important; flex: 1; }
.sps-countdown { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sps-danger); }
.sps-quick { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
.sps-no-share .sps-share, .sps-no-buy-now .sps-buy-now, .sps-no-tags .product_meta .tagged_as, .sps-no-tags .wc-block-components-product-meta__tags { display: none !important; }
@media (max-width: 767px) { .sps-sticky-buy.single-product form.cart { position: sticky; bottom: 0; z-index: 40; background: var(--sps-page); padding-block: 8px; } }
@media (prefers-reduced-motion: reduce) { .sps-slider, .sps-row { scroll-behavior: auto; } }
.sps-powered { margin: 0; padding: 10px; text-align: center; font-size: .8rem; color: var(--sps-text-2); }

/* Prompt 14 §2 «محفظة العميل»: the card above the cart / checkout block and «محفظتي». */
.sps-wallet-use { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 16px; padding: 14px 16px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); background: #fff; }
.sps-wallet-use p { margin: 0; }
.sps-wallet .sps-note { color: var(--sps-text-2); }
.sps-wallet-balance { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; color: var(--sps-text-2); }
.sps-wallet-balance strong { color: var(--sps-text); font-size: 26px; }
.sps-table { inline-size: 100%; border-collapse: collapse; margin-block-start: 16px; font-size: 14px; }
.sps-table th, .sps-table td { padding: 10px 8px; border-block-end: 1px solid var(--sps-input); text-align: start; }
.sps-table th { color: var(--sps-text-2); font-weight: 500; }
.sps-table .is-in { color: var(--sps-success); font-weight: 600; }
.sps-table .is-out { color: var(--sps-danger); font-weight: 600; }
@media (max-width: 560px) { .sps-table th:nth-child(4), .sps-table td:nth-child(4) { display: none; } }

/* Prompt 14 §3 «نظام الإهداء»: the form above the cart block and the friend's page. */
.sps-gift { margin-block-end: 16px; padding: 14px 16px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); background: #fff; }
.sps-gift summary { cursor: pointer; font-weight: 600; }
.sps-gift .sps-note { color: var(--sps-text-2); }
.sps-gift-form { display: grid; gap: 12px; margin-block-start: 12px; }
.sps-gift-form label { display: grid; gap: 6px; font-size: 14px; }
.sps-gift-form input[type=text], .sps-gift-form input[type=email], .sps-gift-form textarea { block-size: 44px; padding-inline: 12px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); font: inherit; }
.sps-gift-form textarea { block-size: auto; padding-block: 10px; }
.sps-gift-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.sps-gift-form .sps-radio { display: flex; align-items: center; gap: 8px; }
.sps-gift-cards { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.sps-gift-cards label { position: relative; display: block; }
.sps-gift-cards img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sps-radius); border: 2px solid transparent; }
.sps-gift-cards input:checked + img { border-color: var(--sps-gold); }
.sps-gift-cards input { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }
.sps-gift-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sps-gift-card { max-inline-size: 640px; margin: 0 auto 20px; text-align: center; }
.sps-gift-card img { inline-size: 100%; block-size: auto; border-radius: var(--sps-radius-lg); }
.sps-gift-card blockquote { margin: 12px 0; padding: 8px 14px; border-inline-start: 3px solid var(--sps-gold); text-align: start; color: var(--sps-text-2); }

/* Prompt 14 §6: «اكسب +x ﷼ كاش باك» under the product price. */
.sps-cashback { display: inline-flex; align-items: center; gap: 6px; margin-block: 6px 0; padding: 4px 10px; border-radius: 999px; background: #fdf6e3; color: #7a5d0b; font-size: 13px; font-weight: 600; }

/* Prompt 16 §1: «أو قسّمها على 4 دفعات بقيمة …» under the product price (neutral, no company name) and the instalment
   amount next to a BNPL method's name at checkout. */
.sps-bnpl-line { margin-block: 6px 0; color: var(--sps-text-2); font-size: 13px; }
.sps-bnpl-line .woocommerce-Price-amount { color: var(--sps-text); font-weight: 600; }
.sps-instalment { margin-inline-start: 8px; color: var(--sps-text-2); font-size: 13px; font-weight: 400; }

/* Prompt 16 §2 «خدمة تواصل»: the product page fields + notes, and the panel progress on the order's digital page. */
.sps-smm { display: grid; gap: 12px; margin-block-end: 12px; }
.sps-smm .sps-field { display: grid; gap: 6px; margin: 0; }
.sps-smm label { font-weight: 600; font-size: 14px; }
.sps-smm input, .sps-smm select { box-sizing: border-box; inline-size: 100%; block-size: 44px; padding-inline: 12px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); font: inherit; background: var(--sps-card); }
.sps-smm small { color: var(--sps-text-2); font-size: 12px; }
.sps-smm-notes { margin: 0; padding-inline-start: 18px; color: var(--sps-text-2); font-size: 13px; line-height: 1.8; }
.sp-digital__smm { display: grid; gap: 8px; margin-block-start: 8px; }
.sp-digital__smm-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 0.9rem; }
.sp-digital__smm-facts dt { opacity: 0.7; }
.sp-digital__smm-facts dd { margin: 0; font-weight: 600; }
.sp-digital__refill { justify-self: start; }
/* Round 8a «جيب كود Steam Guard»: rounds left, the code big with its countdown, «المشكلة ما انحلت؟». */
.sp-digital__offline { display: grid; gap: 8px; margin-block-start: 12px; padding: 12px; border: 1px solid var(--sps-input); border-radius: var(--sps-radius); }
.sp-digital__offline-title { margin: 0; font-size: 15px; }
.sp-digital__offline-button { justify-self: start; }
.sp-digital__offline-code { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sp-digital__offline-value { font-size: 30px; font-weight: 800; letter-spacing: 0.18em; }
.sp-digital__offline-contact { font-weight: 700; text-decoration: underline; }

/* Prompt 16b «كوبون للطلب القادم»: the buyer's own code on the thank-you / order page. */
.sp-next-coupon { margin: 1.5em 0; padding: 1em; border: 1px dashed currentColor; border-radius: 10px; }
.sp-next-coupon p { margin: 0 0 6px; }
.sp-next-coupon__code { font-size: 1.25em; font-weight: 700; letter-spacing: .05em; direction: ltr; text-align: start; }
.sp-next-coupon__ends { font-size: 13px; opacity: .75; }

/* Prompt 16c «الدول المدعومة»: the short text + «عرض كل الدول» (popover list), and the notice + tick for a visitor
   whose country is not in the list (inside the add-to-cart form, above the quantity and «أضف للسلة»). */
form.cart .sp-region { grid-column: 1 / -1; }
.sp-region { display: grid; gap: 10px; margin-block-end: 12px; font-size: 14px; }
.sp-region__text { margin: 0; color: var(--sps-text-2); }
.sp-region__all { padding: 0; border: 0; background: none; color: var(--sps-gold-text); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sp-region__modal { inline-size: min(420px, calc(100vw - 32px)); max-block-size: 70vh; overflow-y: auto; padding: 20px; border: 1px solid var(--sps-border); border-radius: var(--sps-radius-lg); background: var(--sps-card); color: var(--sps-text); }
.sp-region__modal::backdrop { background: rgb(0 0 0 / 0.45); }
.sp-region__modal h3 { margin: 0 0 12px; font-size: 16px; }
.sp-region__modal ul { margin: 0 0 16px; padding-inline-start: 18px; columns: 2; line-height: 1.9; }
.sp-region__close { block-size: 40px; padding-inline: 18px; border: 1px solid var(--sps-border); border-radius: var(--sps-radius); background: var(--sps-page); color: var(--sps-text); font: inherit; cursor: pointer; }
.sp-region__warn { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--sps-danger); border-radius: var(--sps-radius); }
.sp-region__warn p { margin: 0; color: var(--sps-danger); font-weight: 600; }
.sp-region__alt { justify-self: start; display: inline-flex; align-items: center; min-block-size: 40px; padding: 6px 16px; border-radius: var(--sps-radius); background: var(--sps-gold); color: var(--sps-on-gold); font-weight: 600; text-decoration: none; }
.sp-region__ack { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: pointer; }
.sp-region__ack input { margin-block-start: 3px; }

/* Prompt 16d §1: «وصلت للحد الأقصى للكمية المتوفرة» under the quantity input. */
.sp-qty-max { grid-column: 1 / -1; margin: 4px 0 0; color: var(--sps-text-2); font-size: 13px; }