/* Super Ecom — نموذج الطلب وصفحات المتجر الإضافية (يأخذ ألوان القالب --se-*) */
.screen-reader-text, .sf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.sf-short { color: var(--se-muted); margin: 6px 0 0; }

.sf-form { background: var(--se-surface); border: 1.5px solid var(--se-accent); border-radius: var(--se-radius); padding: 18px; box-shadow: var(--se-shadow); display: grid; gap: 14px; }
.sf-head { display: flex; align-items: center; gap: 12px; }
.sf-head__icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--se-accent-soft); color: var(--se-accent); }
.sf-head__title { font-size: 18px; margin: 0; line-height: 1.4; }
.sf-head__sub { margin: 2px 0 0; font-size: 13.5px; color: var(--se-muted); }
.sf-grid { display: grid; gap: 10px; }
@media (min-width: 520px) { .sf-grid { grid-template-columns: 1fr 1fr; } }
.sf-field { position: relative; display: block; }
.sf-field > svg { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--se-muted); pointer-events: none; }
.sf-field input, .sf-field select { width: 100%; min-height: 50px; padding: 10px 42px 10px 14px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); color: var(--se-ink); font: inherit; font-size: 15.5px; outline: none; appearance: none; -webkit-appearance: none; }
.sf-field input[dir=ltr] { text-align: right; }
.sf-field input:focus, .sf-field select:focus { border-color: var(--se-accent); background: var(--se-surface); box-shadow: 0 0 0 4px var(--se-accent-soft); }
.sf-field--select::after { content: ''; position: absolute; inset-inline-end: 14px; top: 50%; width: 8px; height: 8px; border: solid var(--se-muted); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); pointer-events: none; }
.sf-field select:disabled { opacity: .6; }
.sf-field[hidden] { display: none; }
.sf-row { display: grid; gap: 8px; }
.sf-label { font-size: 14px; font-weight: 700; color: var(--se-head); }
.sf-label b { color: var(--se-accent); }
.sf-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-opt { min-width: 48px; min-height: 42px; padding: 6px 14px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); color: var(--se-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sf-opt:hover { border-color: var(--se-accent); }
.sf-opt.is-on { border-color: var(--se-accent); background: var(--se-accent); color: var(--se-on-accent); }
.sf-opt.is-out { opacity: .4; text-decoration: line-through; }
.sf-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-choice { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 10px 12px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); cursor: pointer; }
.sf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sf-choice svg { grid-row: span 2; color: var(--se-muted); }
.sf-choice span { font-weight: 700; font-size: 14px; }
.sf-choice b { font-size: 13px; color: var(--se-muted); font-weight: 600; }
.sf-choice.is-on { border-color: var(--se-accent); background: var(--se-accent-soft); }
.sf-choice.is-on svg, .sf-choice.is-on b { color: var(--se-accent); }
.sf-choice.is-off { opacity: .45; cursor: not-allowed; }
.sf-summary { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--se-radius-sm); background: var(--se-soft); }
.sf-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; color: var(--se-muted); }
.sf-summary b { color: var(--se-ink); }
.sf-total { border-top: 1.5px dashed var(--se-line); padding-top: 9px; font-size: 16px !important; font-weight: 800; color: var(--se-ink) !important; }
.sf-total b { font-size: 21px; color: var(--se-accent); }
.sf-qty span { font-weight: 700; color: var(--se-ink); }
.sf-stepper { display: flex; align-items: center; border: 1.5px solid var(--se-line); border-radius: 999px; overflow: hidden; background: var(--se-surface); }
.sf-stepper button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--se-ink); font-size: 20px; cursor: pointer; }
.sf-stepper input { width: 40px; border: 0; text-align: center; font: inherit; font-weight: 800; background: transparent; color: var(--se-ink); }
.sf-error { margin: 0; padding: 10px 12px; border-radius: var(--se-radius-sm); background: #FEF2F2; color: #B91C1C; font-size: 14px; font-weight: 600; }
.sf-submit { width: 100%; min-height: 56px; font-size: 18px; font-weight: 800; }
.sf-submit:disabled { opacity: .65; cursor: wait; }
.sf-note { margin: -4px 0 0; text-align: center; font-size: 12.5px; color: var(--se-muted); }

.se-sortbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; color: var(--se-muted); font-size: 14px; }
.se-sortbar select { min-height: 40px; padding: 4px 12px; border: 1px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-surface); color: var(--se-ink); font: inherit; }

.sf-box { max-width: 680px; margin: 32px auto; background: var(--se-surface); border: 1px solid var(--se-line); border-radius: var(--se-radius); padding: 28px 22px; }
.sf-box h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 8px; }
.sf-done { text-align: center; }
.sf-done__icon { width: 72px; height: 72px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: var(--se-accent-soft); color: var(--se-accent); }
.sf-lines { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--se-line); text-align: start; }
.sf-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--se-line); font-size: 15px; }
.sf-lines li span { color: var(--se-muted); }
.sf-lines li.sf-lines__total { font-weight: 800; font-size: 17px; }
.sf-track { display: flex; gap: 8px; margin-top: 16px; }
.sf-track input { flex: 1; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); font: inherit; background: var(--se-bg); color: var(--se-ink); }
.sf-order { margin-top: 16px; padding: 14px; border: 1px solid var(--se-line); border-radius: var(--se-radius-sm); }
.sf-order__head { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-weight: 800; }
.sf-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--se-accent-soft); color: var(--se-accent); }
.sf-steps { display: flex; gap: 4px; margin-top: 12px; }
.sf-steps span { flex: 1; height: 6px; border-radius: 4px; background: var(--se-line); }
.sf-steps span.on { background: var(--se-accent); }
.sf-steps__labels { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--se-muted); margin-top: 4px; }
.sf-page { white-space: pre-line; line-height: 2; }
.sf-lines li b { white-space: nowrap; }

/* ——— عروض الكمية ——— */
.sf-tiers { display: grid; gap: 8px; }
.sf-tier { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); cursor: pointer; }
.sf-tier input { accent-color: var(--se-accent); }
.sf-tier.is-on { border-color: var(--se-accent); background: var(--se-accent-soft); }
.sf-tier__q { font-weight: 600; }
.sf-tier__q em { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 99px; background: var(--se-accent); color: var(--se-on-accent); font-style: normal; font-size: .75em; font-weight: 700; }
.sf-tier__p { font-weight: 800; }
.sf-tier__save { grid-column: 2 / 4; text-decoration: none; color: #15803d; font-size: .82em; font-weight: 600; }
.sf-tier__save:empty { display: none; }
.sf-disc { color: #15803d; }
/* ——— الكوبون ——— */
.sf-coupon { margin: 12px 0 4px; font-size: .92em; }
.sf-coupon summary { cursor: pointer; color: var(--se-accent); font-weight: 600; }
.sf-coupon__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; }
.sf-coupon__row .se-btn { padding-inline: 18px; }
.sf-coupon__row input { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); font: inherit; text-transform: uppercase; }
.sf-coupon__msg { margin: 6px 0 0; color: #b91c1c; font-size: .9em; }
.sf-coupon__msg.is-ok { color: #15803d; }
/* ——— دليل المقاسات ——— */
.sf-guide-btn { margin-inline-start: 8px; padding: 0; border: 0; background: none; color: var(--se-accent); font: inherit; font-size: .85em; text-decoration: underline; cursor: pointer; }
.sf-dialog { width: min(92vw, 520px); padding: 20px; border: 0; border-radius: var(--se-radius); box-shadow: var(--se-shadow); }
.sf-dialog::backdrop { background: rgba(0,0,0,.45); }
.sf-dialog__x { float: left; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; }
.sf-dialog h3 { margin: 0 0 12px; }
/* ——— الفيديو ——— */
.se-video__box { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--se-radius-sm); background: #000; }
/* ——— صفحة الهبوط ——— */
.se-lp { display: grid; gap: 14px; margin-bottom: 18px; }
.se-lp__hero { padding: 18px; border-radius: var(--se-radius); background: var(--se-accent-soft); text-align: center; }
.se-lp__badge { display: inline-block; margin-bottom: 8px; padding: 3px 12px; border-radius: 99px; background: var(--se-accent); color: var(--se-on-accent); font-size: .8em; font-weight: 700; }
.se-lp__title { margin: 0 0 6px; font-size: clamp(1.25rem, 4.5vw, 1.7rem); line-height: 1.35; color: var(--se-ink); }
.se-lp__sub { margin: 0 0 10px; color: var(--se-muted); }
.se-lp__cd { margin: 0 0 12px; font-weight: 600; }
.se-lp__cd b { display: inline-block; padding: 2px 10px; border-radius: 8px; background: var(--se-ink); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.se-lp__cta { display: block; width: 100%; text-align: center; }
.se-lp__img { display: block; width: 100%; height: auto; border-radius: var(--se-radius-sm); }
.se-lp__benefits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.se-lp__benefits li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-surface); }
.se-lp__benefits i { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--se-accent); color: var(--se-on-accent); font-style: normal; font-size: 13px; }
.se-lp__benefits span { display: block; color: var(--se-muted); font-size: .9em; }
.se-lp__reviews h3, .se-lp__faq h3 { margin: 6px 0 10px; }
.se-lp__reviews blockquote { margin: 0 0 10px; padding: 12px; border-inline-start: 3px solid var(--se-accent); border-radius: var(--se-radius-sm); background: var(--se-surface); }
.se-lp__reviews p { margin: 4px 0; }
.se-lp__reviews footer { color: var(--se-muted); font-size: .85em; }
.se-lp__faq details { padding: 10px 12px; border: 1px solid var(--se-line); border-radius: var(--se-radius-sm); margin-bottom: 8px; }
.se-lp__faq summary { cursor: pointer; font-weight: 600; }
.se-lp__faq p { margin: 8px 0 0; color: var(--se-muted); }
.se-lp__guarantee { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; padding: 10px; border: 1px dashed var(--se-accent); border-radius: var(--se-radius-sm); font-weight: 600; }
.se-lp__html img { max-width: 100%; height: auto; }
.se-lp-full img { max-width: 100%; height: auto; }
.se-lp-full__form { max-width: 640px; margin-block: 24px; }
/* ——— التقييمات ——— */
.se-reviews h2 small { color: var(--se-muted); font-weight: 400; font-size: .7em; }
.se-reviews__avg { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.se-reviews__avg b { font-size: 1.6em; }
.se-review { padding: 12px 0; border-bottom: 1px solid var(--se-line); }
.se-review header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .92em; }
.se-review header span:not(.se-stars):not(.se-stars__off) { color: var(--se-muted); }
.se-review p { margin: 6px 0 0; }
.se-review__ok { padding: 1px 8px; border-radius: 99px; background: #dcfce7; color: #166534; font-style: normal; font-size: .8em; }
.se-review__reply { padding: 8px 10px; border-radius: var(--se-radius-sm); background: var(--se-surface); font-size: .92em; }
.se-review__new { margin-top: 14px; }
.se-review__new summary { cursor: pointer; display: inline-block; padding: 8px 16px; border: 1.5px solid var(--se-accent); border-radius: var(--se-radius-sm); color: var(--se-accent); font-weight: 600; }
.se-review__form { display: grid; gap: 10px; margin-top: 12px; }
.se-review__form textarea { width: 100%; border: 0; background: none; font: inherit; resize: vertical; }
.se-review__sent { padding: 10px 12px; border-radius: var(--se-radius-sm); background: #dcfce7; color: #166534; }
.se-rate { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; }
.se-rate legend { width: 100%; margin-bottom: 4px; font-weight: 600; }
.se-rate input { position: absolute; opacity: 0; pointer-events: none; }
.se-rate label { font-size: 30px; line-height: 1; color: #d1d5db; cursor: pointer; }
.se-rate input:checked ~ label, .se-rate label:hover, .se-rate label:hover ~ label { color: #f59e0b; }
.se-rate input:focus-visible + label { outline: 2px solid var(--se-accent); }
.se-rv-err { margin: 0; color: #b91c1c; font-size: .9em; }
/* ——— Toast ——— */
.se-toasts { position: fixed; inset-inline: 12px; bottom: 84px; z-index: 60; display: grid; justify-items: start; gap: 8px; pointer-events: none; }
.se-toast { position: relative; max-width: min(420px, 100%); padding: 12px 38px 12px 14px; border-radius: 12px; background: var(--se-ink); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.2); font-size: .92em; text-decoration: none; pointer-events: auto; opacity: 0; transform: translateY(12px); transition: .35s; }
.se-toast.is-in { opacity: 1; transform: none; }
.se-toast__x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
/* ——— OTP ——— */
.sf-otp { margin-top: 12px; padding: 16px; border: 1.5px solid var(--se-accent); border-radius: var(--se-radius); background: var(--se-accent-soft); text-align: center; }
.sf-otp__title { margin: 0; font-weight: 800; font-size: 1.1em; }
.sf-otp__sub { margin: 4px 0 12px; color: var(--se-muted); }
.sf-otp__code { box-sizing: border-box; width: 100%; max-width: 220px; padding: 12px; border: 1.5px solid var(--se-line); border-radius: var(--se-radius-sm); background: var(--se-bg); font: inherit; font-size: 28px; font-weight: 800; letter-spacing: .4em; text-align: center; }
.sf-otp .sf-submit { margin-top: 12px; }
.sf-otp__links { margin: 10px 0 0; font-size: .9em; color: var(--se-muted); }
.sf-otp__links button { padding: 0; border: 0; background: none; color: var(--se-accent); font: inherit; text-decoration: underline; cursor: pointer; }
.sf-otp__links button:disabled { color: var(--se-muted); text-decoration: none; cursor: default; }
.sf-form [hidden], .sf-form .se-btn[hidden] { display: none !important; }

/* وصف المنتج المنسّق (RichText) */
.se-content h3{font-size:1.05rem;font-weight:800;margin:1.1em 0 .45em}
.se-content p{margin:0 0 .8em}
.se-content ul{margin:0 0 .9em;padding-inline-start:1.2em;list-style:disc}
.se-content ul.se-check{list-style:none;padding:0}
.se-content ul.se-check li{position:relative;padding-inline-start:1.7em;margin:.35em 0}
.se-content ul.se-check li::before{content:"✓";position:absolute;inset-inline-start:0;top:.05em;width:1.25em;height:1.25em;border-radius:50%;background:var(--se-accent,#16a34a);color:#fff;font-size:.75em;display:grid;place-items:center;font-weight:800}
.se-content hr{border:0;border-top:1px solid rgba(0,0,0,.1);margin:1.1em 0}
.se-content .se-table{overflow-x:auto;margin:0 0 1em;border:1px solid rgba(0,0,0,.1);border-radius:10px}
.se-content table{width:100%;border-collapse:collapse;font-size:.92em}
.se-content th,.se-content td{padding:.55em .8em;border-bottom:1px solid rgba(0,0,0,.08);text-align:start;white-space:nowrap}
.se-content th{background:rgba(0,0,0,.04);font-weight:700}
.se-content tr:last-child td{border-bottom:0}