/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand img{height:42px;width:auto}
.brand strong{font-size:19px;letter-spacing:.16em;font-weight:900}
.main-nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-weight:650;font-size:14px}
.main-nav a:hover{color:var(--navy)}
.header-actions{display:flex;align-items:center;gap:10px}
.admin-icon{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);display:inline-grid;place-items:center;cursor:pointer;font-size:14px;box-shadow:var(--shadow-sm);padding:0}
.admin-icon svg,.comments-icon svg{display:block}
.admin-icon:hover{border-color:#cbdced;box-shadow:var(--shadow-md)}
.comments-icon{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);display:inline-grid;place-items:center;cursor:pointer;font-size:16px;box-shadow:var(--shadow-sm);padding:0}
.comments-icon:hover{border-color:#cbdced;box-shadow:var(--shadow-md)}
.customer-state{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fbfdff;padding:8px 13px;font-weight:850;color:var(--navy);font-size:12px}
.customer-state[hidden]{display:none}

/* Buttons */
.btn{border:1px solid transparent;border-radius:var(--radius-pill);min-height:44px;padding:0 22px;font:inherit;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.16s ease;white-space:nowrap;font-size:14px}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 14px 34px rgba(7,29,58,.14)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(7,29,58,.18)}
.btn-outline,.btn-light{background:#fff;border-color:var(--line);color:var(--navy)}
.btn-light{background:#f5f9fe}
.btn-compact{min-height:38px;padding:0 18px;font-size:13px}
.btn-success{background:var(--green) !important;color:#fff !important;cursor:default !important}
.btn-success:hover{transform:none !important}
.full{width:100%}

/* Cards */
.info-card,.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-lg)}
.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{min-height:235px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:space-between;transition:.16s ease}
.service-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0f3}
.service-no{display:none}
.service-card h2,.service-card h3{margin:0 0 8px;font-size:19px;line-height:1.4;font-weight:950}
.service-card p{margin:0;color:var(--muted);font-size:13.5px}
.service-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}
.category{display:inline-flex;background:#f6f9fd;border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px 10px;color:var(--muted);font-size:12px;font-weight:850}
.service-price{font-weight:950;color:var(--navy);font-size:14px}
/* سطر الباقة على البطاقة: التجربة والسعر قبل الضغط (2026-10-01) */
.service-trial{margin:10px 0 0;font-size:13px;font-weight:800;color:var(--green);line-height:1.6}

/* Category cards */
/* ستّة أقسام = صفّان من ثلاثة (كانت 4+2 فيبقى صفٌّ ناقص). */
.category-cards{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:18px}
.category-card{display:flex;flex-direction:column;min-height:210px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 16px;box-shadow:var(--shadow-sm);transition:.16s ease}
.category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0f3}
.category-card:focus-visible{outline:3px solid #b8d2ee;outline-offset:3px}
/* الاسم لا يُقصّ بثلاث نقاط (قاعدة الموقع): يلتفّ. */
.category-card h3{margin:0 0 10px;font-size:15px;font-weight:900;overflow-wrap:anywhere}
/* «من نفس القسم»: بطاقةٌ بوصفٍ قصير، لا صندوقٌ فارغ بعنوان. */
.category-card.is-related{min-height:0}
.category-card.is-related p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}
.category-preview{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7;text-wrap:pretty}

.text-accent-red{color:var(--red)}

/* Breadcrumb */
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:18px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--navy)}

/* Legal / policy pages */
.legal-content{max-width:760px;margin-inline:auto}
.legal-content h1{font-size:clamp(26px,4vw,38px);line-height:1.25;margin:0 0 20px;font-weight:950}
.legal-content p{margin:0 0 16px;color:var(--navy);font-size:15px}
.legal-updated{margin-top:28px !important;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}

/* Page intro (about / contact) */
.page-intro{max-width:760px;margin:0 auto 44px;text-align:center}
.page-intro h1{font-size:var(--font-h2);line-height:1.22;margin:0 0 12px;font-weight:950}
.page-intro p{color:var(--muted);margin:0;font-size:15px}
.page-note{max-width:760px;margin:36px auto 0;text-align:center;color:var(--muted);font-size:13.5px}
.page-cta{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:26px 0;background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;color:var(--muted);font-size:13px}
.footer-links{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.footer-links nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;color:var(--muted);font-size:12.5px}
.footer-links nav a:hover{color:var(--navy)}
.footer-inner p{margin:0}
.footer-inner nav{display:flex;gap:18px}
.brand-label{text-align:center;font-weight:900;letter-spacing:.18em;font-size:12px;color:var(--muted);margin:0 0 12px}

/* Social row */
.social-row{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:16px;margin:0 0 16px;overflow-x:auto}
.social-icon{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);transition:.16s ease}
.social-icon:hover{color:#fff;background:var(--navy)}
.social-icon:focus-visible{outline:3px solid #b8d2ee;outline-offset:3px}

/* Modals */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;z-index:100}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(7,29,58,.28);backdrop-filter:blur(4px)}
.modal-card{position:relative;z-index:1;width:min(680px,100%);max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;box-shadow:0 30px 90px rgba(7,29,58,.20)}
.modal-card.small{width:min(500px,100%)}
.modal-card h2{margin:0 0 8px;font-weight:950;line-height:1.2}
.auth-card h2{font-size:clamp(26px,4.6vw,34px);line-height:1.2;margin:0 0 8px;font-weight:950}
.icon-close{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;margin-bottom:8px}
.stack-form{display:grid;gap:14px}
/* An explicit `display` on a class beats the HTML `hidden` attribute, so anything JS toggles
   with `hidden` stays on screen unless this rule exists. That is why the email form kept
   showing underneath the WhatsApp pane even though `hidden` was being set correctly. */
[hidden]{display:none !important}
.verification-steps{display:grid;gap:14px}
/* ثلاث قنوات في صفٍّ واحد: كانت `1fr 1fr` من أيّام الزرّين، فنزل تيليجرام وحده سطرًا (2026-10-19). */
.channel-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:5px;background:#f4f8fc;border:1px solid var(--line);border-radius:15px}
.channel-option{padding:11px 10px;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--muted);font:inherit;font-weight:850;font-size:14px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.channel-option:hover{color:var(--navy)}
.channel-option.is-active{background:#fff;border-color:var(--line);color:var(--navy);box-shadow:0 1px 3px rgba(7,29,58,.07)}
.wa-code{margin:10px 0 0;text-align:center;font-weight:900;font-size:19px;letter-spacing:.18em;direction:ltr;color:var(--navy);background:#f4f8fc;border:1px solid var(--line);border-radius:13px;padding:10px}
/* التباعد للرمز وحده: «Your code:» كانت تأخذه فتُقرأ متقطّعة (العربية لا يباعدها المتصفّح). */
.wa-code-label{letter-spacing:normal}
.code-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.code-input{letter-spacing:.24em;text-align:center;font-weight:900;font-size:17px;direction:ltr}
.help-note{background:#fbfdff;border:1px solid var(--line);border-radius:15px;padding:11px 13px;color:var(--muted);font-size:13px;margin:0}
.form-message{margin:0;font-weight:850;color:var(--green);font-size:13px}
.form-message.error{color:var(--red)}

/* Comments panel */
.comments-card{width:min(560px,100%)}
.comments-list{display:grid;gap:12px;max-height:min(46vh,420px);overflow-y:auto;margin:16px 0;padding-inline-end:4px}
.comment-item{border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 14px;background:#fbfdff}
.comment-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.comment-identity{font-weight:850;font-size:13px;color:var(--navy)}
.comment-date{font-size:12px;color:var(--muted)}
.comment-text{margin:0;font-size:14px;line-height:1.7;color:var(--navy);white-space:pre-wrap;overflow-wrap:break-word}
.comments-compose{border-top:1px solid var(--line);padding-top:16px}
.comments-trust-note{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.7}
.admin-login-card{width:min(420px,100%);padding:26px}
.admin-inline-form{margin-top:6px}
.modal-open{overflow:hidden}

/* Order form */
.order-form{display:grid;gap:18px}
/* خانات الاختيار من حقول الخدمة (`service_fields` بنوع checkbox): صفٌّ يلتفّ، والتسمية بجانب الخانة. */
.check-group{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px}
.check-group .checkrow{display:flex;align-items:center;gap:8px;margin:0;font-weight:600;cursor:pointer;min-width:0}
.check-group .checkrow input{width:auto;min-height:auto;margin:0}
.session-line{border:1px solid var(--line);background:#fbfdff;border-radius:16px;padding:11px 13px;color:#526277;margin:12px 0 18px;font-size:13px}
.voice-box{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdff}
.voice-box strong{font-size:14px}
.voice-actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.fallback-audio{margin-top:12px}
.extra-notes{border:1px solid var(--line);border-radius:16px;padding:13px 15px;background:#fbfdff}
.extra-notes summary{font-weight:850;cursor:pointer}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.progress-wrap{display:grid;gap:8px}
.progress-bar{height:10px;background:#eef4fb;border-radius:var(--radius-pill);overflow:hidden}
.progress-bar span{height:100%;width:0;display:block;background:var(--navy);transition:width .2s}
.progress-wrap p{margin:0;color:var(--muted);font-weight:800;font-size:13px}
.order-action-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.order-success-note{width:100%;margin:10px 0 0;padding:12px 14px;border-radius:16px;background:var(--green-soft);color:#0b6b52;font-weight:800;font-size:13.5px;border:1px solid #cdeee1}
.package-picker{display:grid;gap:10px;margin-bottom:16px}
.package-option{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fbfdff;cursor:pointer;font-weight:800}
.package-option input{width:auto;min-height:auto}
.package-option .service-price{margin-inline-start:auto}

/* SPSS intake -- the customer confirms what his file says, step by step */
.spss-prep{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fbfdff;display:grid;gap:12px}
.spss-prep strong{font-size:14px}
.spss-prep h4{margin:0 0 4px;font-size:15px;font-weight:950}
.spss-prep>div:not([hidden]){display:grid;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.spss-cols{display:grid;gap:6px;max-height:340px;overflow-y:auto;padding-inline-end:4px}
.spss-col-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
/* min-width:0 على أبناء الشبكة: بدونه لا ينكمش العنصر تحت عرض محتواه، فيتمدد الصف أوسع من
   البطاقة ويجرّ الصفحة كلها أفقيًا — وهو سبب قصّ العناوين على الجوال. */
.spss-col-row>*{min-width:0}
/* الاسم يلتف ولا يُقصّ: الغرض من هذه الشاشة أن يتعرّف العميل على عموده، واسم مبتور يفقدها معناها. */
.spss-col-name{font-size:13px;font-weight:800;overflow-wrap:anywhere;line-height:1.5}
.spss-col-meta{font-size:12px;white-space:nowrap}
.spss-kind{min-height:36px;font-size:13px;width:auto;min-width:130px;max-width:100%}

/* الخطوة المنتهية: سطر واحد بدل شاشة كاملة */
.spss-step-done{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.spss-step-line{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.spss-step-line strong{font-size:14px}
.spss-step-line .muted{margin:2px 0 0;font-size:12.5px;overflow-wrap:anywhere}
/* علامة إنجاز لا رقم: الترقيم للمراحل الأربع في الشريط، ولا مقام ثانٍ داخلها. */
.spss-step-mark{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--green-soft);color:#0b6b52;font-weight:900;font-size:13px}
.spss-axis{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.spss-axis-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spss-axis-head input{min-height:38px;font-size:13px;flex:1;min-width:180px}
.spss-picker{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.spss-items{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:300px;overflow-y:auto}
.spss-items li{display:flex;align-items:center;gap:8px}
.spss-items label{display:flex;align-items:center;gap:8px;flex:1;margin:0;font-size:13px;font-weight:700;cursor:pointer;padding:5px 8px;border-radius:10px}
.spss-items label.picked{background:var(--green-soft);color:#0b6b52}
.spss-items input{width:auto;min-height:auto}
/* «هكذا سنقرأ إجاباتك»: أثر ما اعتمده العميل بالأرقام، قبل الإرسال لا بعد النتائج. */
.coding-preview{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.coding-preview h4{margin:0 0 8px}
.coding-block{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.coding-block strong{font-size:13px}
.coding-scale{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;font-size:13px}
.coding-scale b{display:inline-grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;
  background:var(--green-soft);color:#0b6b52;font-size:11.5px;margin-inline-end:6px}
.coding-rev{margin:4px 0 0;padding-inline-start:18px;font-size:12.5px;color:var(--muted)}

/* الفقرات العكسية: مرشَّحات النظام وحدها، ومعها أثر القرار بالأرقام. */
.rev-list{display:grid;gap:8px;margin:4px 0 12px}
.rev-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rev-text{font-size:13.5px;font-weight:600;line-height:1.5}
.rev-effect{font-size:12px;margin:4px 0 8px}
.rev-actions{display:flex;gap:8px}
.rev-btn{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--text,#1c2536);font:inherit;font-size:12.5px;cursor:pointer}
.rev-btn:hover{border-color:var(--brand,#12203c)}
.rev-btn.is-on{background:var(--brand,#12203c);color:#fff;border-color:var(--brand,#12203c)}
.rev-extra{display:grid;gap:4px;margin-top:6px}

/* أكثر من مقياس في ملفّ واحد: كلٌّ في بطاقته، وعليها أعمدتها فلا تلتبس. */
.scale-group.is-multi{border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 12px;background:#fbfcfe}
.scale-group-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.scale-group-head strong{font-size:13.5px}
.scale-group-head .muted{font-size:12px}
.scale-drop{margin-inline-start:auto;border:0;background:none;color:var(--muted,#6b7280);
  font:inherit;font-size:12px;cursor:pointer;text-decoration:underline}
.scale-items{margin:0 0 10px}
.scale-items summary{font-size:12.5px;color:var(--muted,#6b7280);cursor:pointer}
.scale-item{display:grid;grid-template-columns:1fr max-content;gap:10px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.scale-item:last-child{border-bottom:0}
.scale-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scale-item select{min-height:34px;font-size:12.5px}

/* المقياس: العميل يختار عدد الدرجات، والصفوف تُملأ بما عرفناه ويُعلَّم مصدر كل عبارة. */
.scale-chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.scale-chip{min-width:42px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--text,#1c2536);font:inherit;font-size:13px;cursor:pointer}
.scale-chip:hover{border-color:var(--brand,#12203c)}
.scale-chip.is-on{background:var(--brand,#12203c);color:#fff;border-color:var(--brand,#12203c)}
.scale-row{display:grid;grid-template-columns:28px 1fr auto max-content;gap:10px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px}
.scale-row input{min-height:36px}
.scale-grade{display:grid;place-items:center;inline-size:26px;block-size:26px;border-radius:50%;
  background:var(--green-soft);color:#0b6b52;font-weight:900;font-size:12px}
/* سهمان لترتيب الإجابات: أوضح من الكتابة على اللوحيّ، وأسرع من إعادة كتابة كل خانة. */
.scale-move{display:flex;flex-direction:column;gap:2px}
.scale-arrow{inline-size:28px;block-size:18px;display:grid;place-items:center;padding:0;flex:none;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--text,#1c2536);
  font-size:9px;line-height:1;cursor:pointer}
.scale-arrow:hover:not(:disabled){border-color:var(--brand,#12203c)}
.scale-arrow:disabled{opacity:.3;cursor:default}
/* سطرٌ واحد لا سطران: «من ملفك» كان يلتفّ فيطوّل كل صفّ. */
.scale-src{font-size:11.5px;text-align:center;white-space:nowrap}
@media(max-width:640px){
  .scale-row{grid-template-columns:28px minmax(0,1fr) auto;row-gap:4px}
  .scale-src{grid-column:2;text-align:start}
}
.spss-scale{display:grid;gap:6px}
.spss-scale-row{display:grid;grid-template-columns:1fr auto 90px;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px}
.spss-scale-row input{min-height:36px}
.spss-summary{margin:0;padding-inline-start:20px;color:var(--muted);display:grid;gap:6px;font-size:13px}
.spss-prep .checkrow{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;font-weight:700;cursor:pointer}
.spss-prep .checkrow input{width:auto;min-height:auto}
/* الخطّ تحت النازل من الحروف لا عنده: كان يُقطع حيث تنزل «ر» و«ج» و«ع» فبدت «إرجاع» بلا خطّ بجانب «استبعاد»
   (مقيس في المتصفّح: 3px يبقيه مقطوعًا، و5px يُتمّه في الكلمتين، وإلغاء القطع يشطب الحروف). */
.link-btn{background:none;border:none;padding:0;font:inherit;font-size:12px;font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:5px;cursor:pointer}
/* شريط الحفظ يلتصق بأسفل المنتقي: القائمة قد تبلغ 45 فقرة، وكان على العميل أن ينزل إلى آخرها
   ليجد زر الحفظ. الآن الزر أمامه دائمًا ومعه عدد ما اختاره. */
/* من الأعلى لا من الأسفل: الالتصاق بالأسفل ظهر عمليًا وكأنه «ينزل ولا يطلع» — الشريط يبقى
   عند نهاية القائمة عند العودة للأعلى. والأعلى هو الاتجاه الذي يرجع إليه القارئ بطبعه، فيبقى
   الزر وعدّاد الاختيار أمام العين في الاتجاهين. */
.spss-picker-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:6px;box-shadow:0 6px 12px -10px rgba(7,29,58,.35)}
.spss-picker-bar .muted{margin:0;font-size:12.5px}
.spss-help{font-size:12.5px;color:var(--muted);line-height:1.8}
.spss-help summary{cursor:pointer;font-weight:800;color:var(--navy);font-size:13px}
.spss-test{display:grid;gap:6px}
.spss-subpick{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 4px;margin-inline-start:26px;display:grid;gap:8px}
.spss-subpick p{margin:0;font-size:12.5px}
.spss-items-flat{display:grid;gap:2px;max-height:220px;overflow-y:auto}
.spss-pair-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spss-pair-row select{min-height:36px;font-size:13px;width:auto;min-width:140px;flex:1}
.spss-pairs{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px;font-weight:700}
.spss-pairs li{display:flex;align-items:center;gap:10px}

@media(max-width:600px){
  /* على الجوال: صندوق يمرّر داخل صفحة تمرّر = إحساس الازدحام نفسه. تُفتح القوائم على طولها
     ويبقى تمرير واحد للصفحة. */
  .spss-cols,.spss-items,.spss-items-flat{max-height:none;overflow:visible}
  .spss-col-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .spss-col-meta{justify-self:start}
  .spss-kind{width:100%;min-width:0}
  .spss-scale-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .spss-scale-row input{grid-column:1 / -1}
  .spss-subpick{margin-inline-start:0}
  .spss-pair-row select{min-width:0;width:100%;flex:1 1 100%}
}

/* Price-hidden contact fallback (service order page) */
.price-contact{position:relative;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:800}
.price-contact-toggle{border:1px solid var(--line);background:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;color:var(--navy);cursor:pointer;flex-shrink:0}
.price-contact-toggle:hover{background:#eef4fb}
.price-contact-icons{position:absolute;bottom:calc(100% + 8px);inset-inline-start:0;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow-md);z-index:5;min-width:170px}
.contact-icon-sm{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:var(--navy);font-size:13px;font-weight:800}
.contact-icon-sm:hover{background:#f6f9fd}

/* Simplified contact */
.contact-simple{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.contact-icons{display:flex;gap:22px;align-items:center;justify-content:center}
.contact-icon{width:58px;height:58px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);box-shadow:var(--shadow-sm);transition:.16s ease}
.contact-icon:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.contact-icon:focus-visible{outline:3px solid #b8d2ee;outline-offset:3px}

/* Accordion (FAQ) */
.accordion{display:grid;gap:12px;max-width:820px;margin-inline:auto}
.accordion-item{border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;overflow:hidden}
.accordion-item > summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:850;display:flex;align-items:center;justify-content:space-between;gap:12px}
.accordion-item > summary::-webkit-details-marker{display:none}
.accordion-item > summary::after{content:'+';font-size:20px;color:var(--muted);transition:transform .16s ease}
.accordion-item[open] > summary::after{transform:rotate(45deg)}
.accordion-item .accordion-body{padding:0 20px 18px;color:var(--muted);font-size:14px;line-height:1.8}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:.16s ease}
.blog-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--soft)}
.blog-card-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-card-body h3{margin:0;font-size:17px;font-weight:950;line-height:1.4}
.blog-card-body p{margin:0;color:var(--muted);font-size:13.5px}
.blog-meta{color:var(--muted);font-size:12.5px}
.blog-article{max-width:760px;margin-inline:auto}
.blog-article img{border-radius:var(--radius-lg);margin-bottom:20px;max-width:100%;height:auto}
/* الغلاف 16:9 دائمًا (يُقصّ عند الرفع) فلا تقفز الصفحة حين يصل. */
.blog-article .blog-cover{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--soft)}
.blog-related{margin:28px 0 8px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--soft)}
.blog-related-title{margin:0 0 10px;font-weight:900}
.blog-related-links{display:flex;flex-wrap:wrap;gap:8px}
.blog-article-body{font-size:15.5px;line-height:1.9}
.blog-article-body h2{font-size:22px;margin:28px 0 12px}
.blog-article-body h3{font-size:18px;margin:22px 0 10px}
.blog-article-body p{margin:0 0 16px}
.blog-article-body ul,.blog-article-body ol{margin:0 0 16px;padding-inline-start:26px}
.blog-article-body li{margin-bottom:6px}
.blog-article-body blockquote{margin:0 0 16px;padding:12px 18px;border-inline-start:4px solid var(--line);color:var(--muted);background:var(--soft)}
.blog-article-body table{border-collapse:collapse;width:100%;margin:0 0 16px}
/* الخلية تتبع اتجاه نصّها (start لا right)، والجدول الأعرض من الشاشة ينزلق داخل غلافه الذي يضيفه blog/[slug].js (2026-10-18). */
.blog-article-body table td,.blog-article-body table th{border:1px solid var(--line);padding:9px 12px;text-align:start}
.blog-article-body .table-scroll{overflow-x:auto;margin:0 0 16px}
.blog-article-body .table-scroll>table{margin:0}
.blog-article-body a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.blog-article-body img{max-width:100%;border-radius:var(--radius-lg)}
.blog-references{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.blog-references-title{font-weight:950;margin:0 0 10px;font-size:15.5px}
.blog-references p{margin:0 0 8px;font-size:14px}
.blog-references a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

/* Partners strip */
.partners-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px}
.partner-logo{max-height:44px;filter:grayscale(1);opacity:.75;transition:.16s ease}
.partner-logo:hover{filter:none;opacity:1}

/* Loading / error / empty states */
.skeleton-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.skeleton-card{height:235px;border-radius:24px;background:linear-gradient(90deg,#f3f7fb 25%,#eaf1f8 37%,#f3f7fb 63%);background-size:400% 100%;animation:skeleton-loading 1.4s ease infinite}
@keyframes skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}
.error-card{text-align:center;display:grid;gap:14px;justify-items:center}
.info-card a.btn{margin-top:6px}

/* 404 */
.not-found{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center}
.not-found h1{font-size:clamp(30px,5vw,52px);margin:0 0 12px;font-weight:950}

@media(max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr}
  .category-cards,#categoryCards{grid-template-columns:repeat(2,1fr)}
  .skeleton-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:720px){
  .header-inner{min-height:68px;gap:12px;flex-wrap:wrap}
  .brand strong{font-size:15px}
  .main-nav{order:3;width:100%;gap:20px;overflow:auto;font-size:13px;padding-bottom:10px}
  .header-actions{margin-inline-start:auto}
  .admin-icon{width:36px;height:36px;font-size:13px}
  .btn{min-height:40px;padding:0 16px;font-size:13px}
  .btn-compact{min-height:36px;padding:0 15px;font-size:12.5px}
  .search-box{min-width:0}
  .services-grid{grid-template-columns:1fr}
  .service-card{min-height:205px;padding:18px}
  .service-card h2,.service-card h3{font-size:17px}
  .service-card p{font-size:13px}
  .modal{padding:0;align-items:flex-end}
  .modal-card{border-radius:24px 24px 0 0;max-height:94vh;padding:24px}
  .auth-card h2{font-size:26px}
  .code-row{grid-template-columns:1fr}
  .contact-list a,.footer-inner{display:grid}
  .footer-inner nav{flex-wrap:wrap}
  .footer-links nav{justify-content:flex-start}
  /* ختم المركز السعودي للأعمال ثابتٌ أسفل اليسار (18 + 44 نقطة) في الصفحات التي تحمله: فراغٌ تحت الفوتر بقدره،
     وإلا غطّى سطرَ الحقوق آخرَ الصفحة على 360 و390 (قِيس في الصفحات الثمان). */
  body:has(.sbc-verify-seal) .site-footer{padding-bottom:72px}
  .customer-state{width:100%;justify-content:center}
  .icon-close{width:38px;height:38px}
  .category-cards,#categoryCards{grid-template-columns:1fr}
  /* على الجوّال لا ارتفاعَ أدنى: كانت كل بطاقة 210px وثلثاها فراغ. */
  .category-card{min-height:0}
  .skeleton-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .brand img{height:34px}
  .social-row{gap:12px}
  .social-icon{width:34px;height:34px}
  .order-action-group{width:100%;justify-content:space-between}
  .form-actions{flex-direction:column;align-items:stretch}
}

/* Service deliverable preview: an image or a short muted clip showing the finished output.
   max-height keeps a tall document preview from pushing the order form below the fold. */
.service-preview-media{display:block;width:100%;max-width:520px;max-height:340px;object-fit:contain;margin-inline:auto;border-radius:12px;background:#0d1b2e}

/* شريط الحقوق — آخر سطر في الفوتر، هادئ ولا يزاحم الروابط فوقه. */
.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 14px;
  padding-top: 14px;
}
.footer-legal p {
  margin: 0;
  font-size: 13px;
  opacity: .62;
  text-align: center;
}

/* زرّ «اشتراكاتي» — يُحقن في الترويسة عند الدخول (public/js/lib/session.js). */
.btn-subs{background:var(--green);color:#fff;border:1px solid var(--green);text-decoration:none;
  display:inline-flex;align-items:center;padding:6px 12px;font-size:.85rem;white-space:nowrap}
/* صفُّ الأزرار لا يلتفّ: تنكمش خانة الهوية وحدها.
   (التفافُه جُرّب أوّلًا فبدا زرّ الخروج في سطرٍ ثانٍ — شكلٌ مكسور لا حلّ. وما يلتفّ اليوم القائمةُ إلى صفٍّ
   تحت الشعار والأزرار، وخانةُ الهوية تحت الأزرار على الجوّال — انظر آخر هذا القسم.) */
.header-actions{min-width:0;flex-wrap:nowrap}
.customer-state{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
/* **وخانة الهوية وحدها هي التي تنكمش.** `min-width:0` على الحاوية لا يكفي: العنصر المرن
   لا ينزل تحت محتواه إلا بـ`min-width:0` على نفسه. فكان زرّ الخروج يخرج عن الشاشة على
   عرض اللوح (قِيس: `left=-41` في نافذة 795) — رُئي على آيباد صاحب العمل. والأزرار لا
   تنكمش، فهي المقصودة بالضغط. */
.customer-state{min-width:0}
.header-actions .btn,.header-actions .btn-subs,
.header-actions .admin-icon,.header-actions .comments-icon{flex:0 0 auto}
/* **وما ينكمش هو القائمة، لا الأزرار.** قِيس على عرض اللوح (795): الشعار 179 + القائمة
   278 + الأزرار تطلب 297 — فتتجاوز الحاوية بـ43 نقطة، ويخرج زرّ الدخول/الخروج عن الشاشة.
   والأزرار مقصودةٌ بالضغط فلا تنكمش، والقائمة تنزلق أفقيًّا فلا يضيع منها بند. */
@media (max-width: 960px){
  .customer-state{max-width:120px}
  .main-nav{min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .main-nav::-webkit-scrollbar{display:none}
  .header-inner{gap:10px}
  /* وستّ نقاطٍ بقيت بعد انكماش القائمة — تُستردّ من الفراغ بين الأزرار لا من حجمها،
     فمساحةُ الضغط تبقى كما هي. قِيس: scrollWidth 801 في نافذة 795. */
  .header-actions{gap:6px}
  .btn-compact{padding:0 13px}
  /* **والترويسة نفسها تُقصّ عند حدّها.** بقيت أربع نقاطٍ بعد كل انكماش، ومصدرُها تقريبُ
     المتصفّح لعروضٍ كسرية لا عنصرٌ بعينه — قِيس مرّتين. و`overflow-x:clip` يقصّ ما تجاوز
     بلا أن يجعل الترويسةَ منزلقةً هي نفسها، فلا تنزلق الصفحة كلُّها لأربع نقاط. */
  .site-header{overflow-x:clip}
  .header-inner{min-width:0}
}
/* **ومن 721 إلى 1000 القائمة في صفٍّ ثانٍ كما تحت 720** (2026-10-19). الانكماش أعلاه لا يكفي: على 834 يلزم الصفَّ
   869 والمتاح 794، فكانت القائمة تنكمش حتى يلتفّ «عن ابينان» و«تواصل معنا» سطرين وتُقصّ «Contact»، وحاويةُ الأزرار
   تنكمش تحت أزرارها فيُقصّ زرّ الدخول عند حدّ الترويسة (رُئي على الآيباد). والحدّ 1000: عدّادُ زوّارٍ من خمس خانات أو
   ست يحتاج الصفَّ الواحد حتى 978، وشريط التمرير في متصفّحات المكتب يأخذ 15 نقطة من العرض. والفراغ بين الصفّين 10 كما تحت 960.
   قِيس 33 عرضًا من 320 إلى 1440 في عشر صفحات، بدخولٍ وبدونه. */
@media (max-width: 1000px){
  .header-inner{flex-wrap:wrap;row-gap:10px}
  .main-nav{order:3;width:100%;padding-bottom:10px}
  .header-actions{margin-inline-start:auto}
}
/* وللمسجَّل حتى 1199: «ملفاتي» وخانة الهوية يطيلان الصفّ فيعود الالتفاف والقصّ نفسه (مقيس حتى 1112 في الصفحات، و1199 في الرئيسية). */
@media (min-width: 1001px) and (max-width: 1199px){
  .header-inner:has(.customer-state:not([hidden])){flex-wrap:wrap;row-gap:10px}
  .header-inner:has(.customer-state:not([hidden])) > .main-nav{order:3;width:100%;padding-bottom:10px}
}
/* **خانة الهوية:** هي flex فلا يعمل فيها ellipsis، فكانت تُقصّ قصًّا — وعلى الجوّال من طرفيها («تساب: 66512345678»)
   لأنها في الوسط. فالمعرّف يُختصر بنقاطٍ من آخره والتسمية كاملة. وعدّاد الزوّار لا يظهر للمسجَّل: مكانُه هو ما كان يُخرج
   زرّ الخروج عن الشاشة في الرئيسية. */
.customer-state bdi{min-width:0;overflow:hidden;text-overflow:ellipsis}
.header-actions:has(> .customer-state:not([hidden])) > .visit-counter{display:none}
/* وحين تكون القائمة في صفٍّ وحدها (721–1199) يفرغ أكثر الصفّ الأوّل: الأزرار تملؤه من طرفها وتأخذ الخانة ما بقي منه حتى
   300 نقطة، فيُقرأ الرقم كاملًا. كان سقفها 120 من أيّام الصفّ الواحد فلا يبقى منه إلا «9665…» على الآيباد. وأساسُ الحاوية
   صفر فلا تنزل وحدها صفًّا: الأزرار وحدها تسع بجانب الشعار حتى على 721 (353 من 492 نقطة). */
@media (min-width: 721px) and (max-width: 1199px){
  .header-inner:has(.customer-state:not([hidden])) > .header-actions{flex:1 1 0;min-width:0;justify-content:flex-end}
  .header-actions:has(> .customer-state:not([hidden])) > .customer-state{max-width:300px}
}
/* وعلى الجوّال تنزل الخانة سطرًا كاملًا تحت الأزرار، والأزرار في صفّها إلى طرفها. `contain:inline-size` يُخرج عرضَها من
   حساب عرض الأزرار: بدونه كانت الخانة العريضة تُنزل الأزرار كلّها صفًّا تحت الشعار (قيس على 560–720). ويبقى عرضُ حشوتها
   في الحساب، فالأزرار إلى الطرف (flex-end) وإلا وقفت قبله بـ34 نقطة. وكلّ قواعد الخانة الجديدة تحت `:has()` نفسه: المتصفّح
   الذي لا يعرفه (سفاري قبل 15.4، وفايرفوكس قبل 121) يبقى على سقفها القديم فتنكمش، ولا تخرج 300 نقطة عن الشاشة.
   والأزرار تلتفّ سطرًا ثانيًا حين لا يسعها سطر، للزائر أيضًا: عدّادٌ من ست خانات كان يُخرج زرّ الدخول عن الشاشة 10 نقاط
   على 341–360. ولا يتغيّر شيء حين تسع: قيس 10 صفحات × 17 عرضًا، بلا دخولٍ وبدخول، متطابقة بالنقطة. */
@media (max-width: 720px){
  .header-actions{flex-wrap:wrap;row-gap:8px;justify-content:flex-end}
  .header-actions:has(> .customer-state:not([hidden])) > .customer-state{order:1;flex:1 0 100%;contain:inline-size;width:auto;max-width:none}
}
/* أضيق الجوّالات (320): كلمة «زائر» وحدها كانت تُخرج زرّ الدخول خمس نقاط، و«ملفاتي» مع زرّ الخروج كانا يُنزلان الخروج
   سطرًا وحده. فتسقط الكلمة، ويضيق الفراغ بين الأزرار وحشوتها قليلًا. */
@media (max-width: 340px){
  .visit-counter-label{display:none}
  .header-actions{gap:4px}
  .header-actions .btn-compact{padding:0 10px}
}
.btn-subs:hover{background:#0a7a5c;border-color:#0a7a5c;color:#fff}

/* قائمة الخدمات المشمولة في صفحة الاشتراك. */
.bundle-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.bundle-list li{display:flex;flex-direction:column;gap:2px;background:var(--soft);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.bundle-list .bundle-name{color:var(--navy);font-weight:600}
.bundle-list .muted{font-size:.84rem}

/* مدخل الملفّ بمظهر الموقع لا بمظهر نظام التشغيل (زرّ النظام الأصلي لا يُنسَّق). */
input[type="file"]{padding:8px 10px;font-size:14px;color:var(--muted);line-height:1.6}
input[type="file"]::file-selector-button{font:inherit;font-size:13px;font-weight:800;color:var(--navy);background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 14px;margin-inline-end:12px;cursor:pointer;transition:.16s ease}
input[type="file"]::file-selector-button:hover{border-color:#cbdced;background:#fff}

/* زرّ اللغة في الترويسة (كوكب + EN/عربي). */
.lang-switch{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius-pill);background:#fff;color:var(--navy);font-weight:800;font-size:13px;text-decoration:none;box-shadow:var(--shadow-sm);flex:0 0 auto}
.lang-switch:hover{border-color:#cbdced;box-shadow:var(--shadow-md)}
.lang-switch svg{display:block}
/* للزرّ الذي في الشريط العلوي وحده (`a`): أزرار لغة العرض في صفحة المخرَج `div.lang-switch` بالاسم نفسه (study.css)، وكانت
   هذه القاعدة تضغطها في 38 نقطة على الجوّال فتخرج «عربي» عن الشاشة — منذ 2026-10-03، وكشفه layout-check في 2026-10-19. */
@media (max-width:640px){a.lang-switch span{display:none}a.lang-switch{padding:0;width:38px;justify-content:center}}

/* شريط اقتراح الإنجليزية لمن متصفّحه بغيرها (مرّة واحدة، يُغلق). */
.lang-suggest{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 16px;background:var(--soft);border-bottom:1px solid var(--line);font-size:14px;color:var(--navy)}
.lang-suggest-close{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--muted);padding:0 6px}

/* أسئلة شائعة في صفحة الخدمة (مطويّة). */
.service-faq .faq-item{border-top:1px solid var(--line);padding:10px 0}
.service-faq .faq-item:first-of-type{border-top:0;padding-top:0}
.service-faq summary{cursor:pointer;font-weight:800;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:12px}
.service-faq summary::-webkit-details-marker{display:none}
.service-faq summary::after{content:"+";color:var(--muted);font-weight:700}
.service-faq details[open] summary::after{content:"−"}
.service-faq p{margin:8px 0 0;color:var(--muted);line-height:1.75}