/* صفحة الدخول: الدخول بقوقل، وفاصل «أو» */
.g-wrap { margin-top: 4px; }
.login .or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 13px; margin: 6px 0 12px; }
.login .or::before, .login .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.g-btn { display: flex; justify-content: center; min-height: 44px; }
/* شريط الجولة التجريبية */
#ss-tour { position: fixed; inset-inline: 0; bottom: 0; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 10px 16px; background: #B42318; color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 -6px 20px -10px rgb(0 0 0 / .4); }
#ss-tour .btn { background: #F0D48A; color: #14286A; border: 0; }
html.has-tour body { padding-bottom: var(--tour-h, 60px); }
html.has-tour .savebar { bottom: calc(16px + var(--tour-h, 60px)); }
html.has-tour .toasts { bottom: calc(22px + var(--tour-h, 60px)); }
html.has-tour .seal-float, html.has-tour .seal-stack { bottom: calc(18px + var(--tour-h, 60px)); }
html.has-tour .it-card { bottom: calc(24px + var(--tour-h, 60px)); }
html.has-tour .fb-fab { bottom: calc(86px + var(--tour-h, 60px)); }
html.has-tour .fb-tools { bottom: calc(12px + var(--tour-h, 60px)); }

/* خطوات تجهيز المدرسة الجديدة (لوحة المدير) */
.su-card { margin-bottom: 18px; border-top: 3px solid #1F6FA0; }
.su-bar { height: 8px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 2px 0 12px; } .su-bar i { display: block; height: 100%; background: linear-gradient(90deg, #1F6FA0, #F0D48A); border-radius: 6px; }
.su-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.su-list li { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.su-list li.now { background: var(--ink-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 35%, transparent); }
.su-list li.ok { opacity: .72; }
.su-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface); color: var(--ink); flex: none; }
.su-list li.ok .su-n { background: var(--green, #16a34a); color: #fff; }
.su-t { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; } .su-t small { color: var(--muted); font-size: 12.5px; }
.su-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.g-btn:empty { display: none; }

/* صفحة الاشتراك: بطاقات الباقات */
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.bp { text-align: start; font: inherit; color: inherit; background: var(--surface); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.bp:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--border)); }
.bp.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ink-soft); }
.bp.top { border-top: 4px solid #C9A24B; }
.bp-n { font-weight: 800; font-size: 15px; } .bp-p { font-family: var(--display); font-size: 24px; color: var(--ink); } .bp-p small, .bp-t small { font-size: 12px; color: var(--muted); font-family: inherit; }
.bp-s { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.bp ul { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.75; color: var(--text); flex: 1; }
.bp-t { border-top: 1px dashed var(--border); padding-top: 8px; font-weight: 800; }
/* القائمة: صفحة ضمن باقة أعلى */
.nav a.plan-lock { opacity: .62; }
.nav a .lk { margin-inline-start: auto; font-size: 11px; }

/* الواتس الذكي: خيار الاشتراك، ورمز الربط */
.ws-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1.5px dashed var(--border); border-radius: 12px; margin-bottom: 12px; cursor: pointer; }
.ws-opt input { margin-top: 4px; } .ws-opt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.7; }
.ws-qr { background: #fff; padding: 10px; border-radius: 14px; display: inline-block; box-shadow: 0 6px 20px -10px rgba(0,0,0,.3); } .ws-qr svg { display: block; width: 240px; height: 240px; }

/* نهاري دائمًا مهما كان وضع الجوال، والليلي فقط باختيار المستخدم */
:root { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* تذييل ثابت في كل صفحات الموقع: اسم المنصة والمؤسسة */
.site-foot{text-align:center;font-weight:700;color:var(--text);font-size:14px;padding:18px 16px;margin-top:auto}
.site-foot:has(.seal-foot:not(:empty)){display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
/* ختما التوثيق جنب بعض في التذييل: «متجر موثّق» ثم TrustedSite، بلا طفو ولا بطاقة منبثقة */
.seal-foot{display:inline-flex;align-items:center;gap:10px;height:42px}
.sbc-foot-frame{border:0;width:126px;height:42px;background:transparent;color-scheme:normal;border-radius:999px;pointer-events:none}
.seal-sbc,.seal-ts{display:block;line-height:0}
.seal-sbc{border-radius:999px}
.seal-ts img{display:block;width:92px;height:38px;border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.14)}
/* الختم الأجنبي العائم في الزاوية يُخفى حيث يظهر الختمان في التذييل */
body[data-seal="foot"] #trustedsite-tm-image,body[data-seal="foot"] #trustedsite-tm-frame{display:none!important}
.seal-foot:empty{display:none}
/* ختم TrustedSite يجلس في الزاوية اليمنى أسفل الصفحة، فيرتفع فوقه ختم «متجر موثّق» */
body:has(#trustedsite-tm-image) .sbc-seal-frame{bottom:44px!important}
.login .site-foot{padding:24px 0 0;margin-top:18px;border-top:1px solid var(--border)}
/* صفحة الدخول: عبارة المنصة ووصفها تحت الشعار (نسخة من الصفحة التعريفية) */
.login-pitch{text-align:center;margin:14px 0 22px;padding:14px 16px;border-radius:14px;background:var(--ink-soft)}
.login-pitch b{display:block;font-family:var(--display,inherit);font-size:21px;color:var(--ink-deep)}
[data-theme="dark"] .login-pitch b{color:var(--text)}
.login-pitch p{margin:6px 0 0;font-size:14.5px;font-weight:600;line-height:1.8;color:var(--text)}
/* صفحة الدخول (1448/05/16هـ – 2026-10-27م): الشعار في أعلى الصفحة داخل لوحة فاتحة بلوني الشعار، ونموذج الدخول بطاقة مستقلة تحتها */
.login-form{align-items:flex-start;padding:14px 32px 28px}
.login-form .inner{width:min(440px,100%)}
.lg-head{position:relative;overflow:hidden;text-align:center;color:var(--ink-deep);border-radius:22px;padding:20px 24px 22px;border:1px solid #DCE7F0;background:radial-gradient(60% 90% at 100% 0,rgba(240,212,138,.5),transparent 64%),radial-gradient(60% 90% at 0 0,rgba(240,212,138,.5),transparent 64%),linear-gradient(170deg,#EAF3FA 0%,#F6F9FC 100%)}
[data-theme="dark"] .lg-head{color:var(--text);border-color:var(--border);background:var(--surface-2)}
.lg-head .brand-hero span{color:var(--text)}
.lg-head .brand-logo{box-shadow:0 14px 28px -14px rgba(31,111,160,.7)}
.lg-head .login-pitch{background:none;padding:0;margin:14px 0 0;border-radius:0}
.lg-head .login-pitch b{color:var(--ink-deep);font-size:24px;line-height:1.4}
.lg-head .login-pitch b::after{content:"";display:block;width:110px;height:3px;border-radius:3px;background:#C9A24B;margin:10px auto 0}
.lg-head .login-pitch p{color:var(--text);font-weight:600}
.lg-head h1{margin:14px 0 14px}
.lg-head h1 em{color:#1F6FA0}
.lg-head .lead-list{margin:0;text-align:start}
.lg-head .lead-list li{font-size:14.5px}
.lg-head .lead-list li span{background:#fff}
.lg-card{position:relative;margin:18px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px 22px 20px;box-shadow:0 30px 54px -32px rgba(20,39,102,.55)}
.lg-head+.lg-card{margin:20px 0 0}
.login .lg-card h1{font-size:26px;line-height:1.35;margin:0 0 4px}
.login .lg-card .lead{font-size:14.5px;font-weight:600;margin:0 0 18px}
.lg-card .note:last-child{margin-bottom:0}
.login .ifld .if-ic{color:var(--ink)}
.if-eye{position:absolute;left:7px;width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.if-eye:hover,.if-eye[aria-pressed="true"]{color:var(--ink);background:var(--ink-soft)}
.ifld:has(.if-eye) .input{padding-left:50px}
.lg-card .role-grid{margin-bottom:16px}
@media (max-width:960px){.login-form{padding:12px 16px 24px}.lg-head{padding:18px 18px 20px}}
/* الاشتراك والفواتير: وسم «الأوفر» على مدة العام الدراسي، كما في صفحة الأسعار */
.per-best{font-size:11px;font-weight:800;color:#7A5A12;background:#F6E7BD;border-radius:999px;padding:1px 8px;margin-inline-start:4px}
/* الاشتراك والفواتير: بطاقات الباقات بتصميم صفحة الأسعار (1448/05/16هـ – 2026-10-27م) */
.bp-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding-top:12px}
.bp{position:relative;gap:0;padding:22px 20px 20px;border-radius:22px;border:1px solid #DCE7F0;background:radial-gradient(circle at 100% 0,rgba(240,212,138,.4),transparent 130px),radial-gradient(circle at 0 0,rgba(240,212,138,.4),transparent 130px),linear-gradient(170deg,#EAF3FA,#F6F9FC)}
[data-theme="dark"] .bp{background:var(--surface);border-color:var(--border)}
.bp.top{border:1.5px solid #D9B45A;background:radial-gradient(circle at 100% 0,rgba(240,212,138,.38),transparent 150px),radial-gradient(circle at 0 0,rgba(240,212,138,.3),transparent 150px),linear-gradient(160deg,#3556B4 0%,#2643A0 50%,#1C3486 100%);color:#fff;box-shadow:inset 0 0 0 1px rgba(240,212,138,.25)}
.bp.on{border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 35%,transparent)}
.bp.top.on{box-shadow:0 0 0 3px #F0D48A}
.bp-tag{position:absolute;top:-12px;inset-inline-start:20px;background:#F0D48A;color:#14286A;font-weight:800;font-size:12px;padding:2px 12px;border-radius:999px}
.bp-hd{display:flex;align-items:center;gap:10px}
.bp-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:var(--ink-soft)}
.bp.top .bp-ic{background:rgba(255,255,255,.14)}
.bp-n{display:block;font-size:17px}
.bp-s{display:block;font-weight:600}
.bp.top .bp-s{color:rgba(255,255,255,.78)}
.bp-pr{display:flex;align-items:flex-end;gap:8px;margin:18px 0 2px}
.bp-p{font-size:46px;line-height:.95;color:var(--ink-deep)}
.bp.top .bp-p{color:#fff}
.bp-u{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.5;padding-bottom:3px}
.bp.top .bp-u{color:rgba(255,255,255,.78)}
.bp-eq{font-size:12.5px;font-weight:700;color:#1E8E5A;min-height:19px}
.bp.top .bp-eq{color:#9FE3BD}
.bp-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:12px 0 14px;padding:10px 12px;border:0;border-radius:12px;background:rgba(20,39,102,.06);font-size:13px;font-weight:700}
.bp-t b{font-size:17px;color:var(--ink-deep)}
.bp.top .bp-t{background:rgba(255,255,255,.1)}.bp.top .bp-t b{color:#F0D48A}
.bp ul{list-style:none;padding:0;font-size:13.5px;display:flex;flex-direction:column;gap:5px}
.bp li{position:relative;padding-inline-start:20px}
.bp li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--ink);font-weight:800}
.bp.top ul{color:#fff}.bp.top li::before{color:#F0D48A}