/* بريد يو اس — نظام التصميم
يُحمَّل بعد أنماط أسترا وإليمنتور فيعيد تنسيق كل الصفحات القائمة بلا حذفها.
لا تعدّل هنا مباشرة؛ ضع تعديلاتك في barid-custom.css. */
/* ============================================================
بريد يو اس — نظام الهوية والقوالب (معاينة ٣)
ملف مستقل تمامًا. لا يمسّ baridus.com إطلاقًا.
============================================================ */
/* الاتجاه النيلي هو الافتراضي — معلّق على :root فلا يحتاج سمة data-theme.
كتل [data-theme] تحته تبقى للتبديل السريع عند التجربة فقط. */
:root{
--ink:#0B1230; --ink2:#1B2A6B; --brand:#4B6BFF; --brand2:#93A7FF; --brand3:#8B5CF6;
--warm:#F3C77B; --onBrand:#fff; --surface:#F6F5F2; --card:#fff;
--line:#E7E3DC; --muted:#5D6785; --ok:#2E9E6B;
}
:root{
/* سلّم واحد للمسافات والحواف — لا مقاسات عشوائية */
--s1:8px; --s2:12px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:72px; --s8:96px;
--r-xs:8px; --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:28px; --r-full:999px;
--maxw:1180px;
/* ارتفاع شريط المعاينة — اجعله 0px عند النقل إلى ووردبريس */
--deck:0px; /* لا شريط معاينة في الإنتاج */
}
[data-theme="indigo"]{
--ink:#0B1230; --ink2:#1B2A6B; --brand:#4B6BFF; --brand2:#93A7FF; --brand3:#8B5CF6;
--warm:#F3C77B; --onBrand:#fff; --surface:#F6F5F2; --card:#fff;
--line:#E7E3DC; --muted:#5D6785; --ok:#2E9E6B;
}
[data-theme="ink"]{
--ink:#0A1F33; --ink2:#123A5A; --brand:#0E9A94; --brand2:#4FCFC4; --brand3:#2BB3D4;
--warm:#F0C27B; --onBrand:#fff; --surface:#F7F6F3; --card:#fff;
--line:#E8E4DC; --muted:#647686; --ok:#2E9E6B;
}
[data-theme="gold"]{
--ink:#0C2340; --ink2:#1A4271; --brand:#D9A521; --brand2:#F2CF6B; --brand3:#EFC65A;
--warm:#7FA8CF; --onBrand:#0C2340; --surface:#F8F6F1; --card:#fff;
--line:#E9E3D6; --muted:#5E7086; --ok:#2E9E6B;
}
[data-theme="emerald"]{
--ink:#0C231F; --ink2:#154239; --brand:#1E8F62; --brand2:#5DC496; --brand3:#3FB98A;
--warm:#EFC57E; --onBrand:#fff; --surface:#F5F7F3; --card:#fff;
--line:#E1E6DC; --muted:#5C6F67; --ok:#1E8F62;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* إزاحة واحدة فقط — الجمع بينها وبين scroll-padding يضاعف الفراغ فوق المرساة */
section[id]{scroll-margin-top:calc(var(--deck) + 88px)}
/* الهيدر اللاصق يحتاج أن يكون أبوه بامتداد الصفحة، لا غلافًا بارتفاعه هو */
#chromeTop{display:contents}
body{
margin:0; background:var(--surface); color:var(--ink);
font-family:"IBM Plex Sans Arabic","SF Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
font-size:16px; line-height:1.8; -webkit-font-smoothing:antialiased;
--grad:linear-gradient(135deg, var(--brand), var(--brand3));
--sh-1:0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent), 0 4px 14px color-mix(in srgb,var(--ink) 6%,transparent);
--sh-2:0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent), 0 18px 44px color-mix(in srgb,var(--ink) 13%,transparent);
--sh-3:0 30px 70px color-mix(in srgb,var(--ink) 22%,transparent);
}
h1,h2,h3,h4,.display{font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif; font-weight:800; line-height:1.25; margin:0; letter-spacing:-.01em}
p{margin:0} a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.num{font-variant-numeric:tabular-nums; direction:ltr; display:inline-block}
.lat{font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",sans-serif; direction:ltr}
.hide{display:none !important}
/* ---------- الشعارات ---------- */
.logo{display:flex; align-items:center; gap:12px}
.logo svg{display:block; flex:none}
.logo .markuse{width:auto}
.logo--rev svg, .logo--mono svg{fill:#fff}
.logo--brand svg{fill:var(--onBrand)}
.tape-in svg{fill:var(--onBrand)}
.lg-badge{fill:var(--ink)} .lg-fg{fill:#fff} .lg-fold{fill:#fff; opacity:.42}
.lg-stroke{stroke:#fff; fill:none; stroke-linecap:round; stroke-linejoin:round}
.lg-ring{stroke:var(--ink); fill:none; stroke-linecap:round}
.lg-dot{fill:var(--brand)}
.logo--rev .lg-badge{fill:#fff} .logo--rev .lg-fg,.logo--rev .lg-fold{fill:var(--ink)}
.logo--rev .lg-stroke{stroke:var(--ink)} .logo--rev .lg-ring{stroke:#fff}
.logo--brand .lg-badge{fill:var(--brand)} .logo--brand .lg-fg,.logo--brand .lg-fold{fill:var(--onBrand)}
.logo--brand .lg-stroke{stroke:var(--onBrand)} .logo--brand .lg-ring{stroke:var(--onBrand)}
.logo--brand .lg-dot{fill:var(--onBrand); opacity:.5}
.logo--mono .lg-badge{fill:#111} .logo--mono .lg-ring{stroke:#111} .logo--mono .lg-dot{fill:#fff}
.logo--mono .lg-fg,.logo--mono .lg-fold{fill:#fff} .logo--mono .lg-stroke{stroke:#fff}
.logo-txt{display:flex; flex-direction:column; line-height:1}
.logo-txt b{font-family:"Tajawal",sans-serif; font-weight:800; font-size:20px; letter-spacing:-.02em}
.logo-txt span{font-family:"Plus Jakarta Sans",sans-serif; font-size:10px; font-weight:700; letter-spacing:.24em;
color:var(--muted); direction:ltr; text-align:right; margin-top:4px}
.logo--rev .logo-txt b{color:#fff} .logo--rev .logo-txt span{color:rgba(255,255,255,.6)}
.logo--lat .logo-txt b{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-.01em; direction:ltr; text-align:left}
.logo--lat .logo-txt span{font-family:"Tajawal",sans-serif; letter-spacing:0; font-size:11.5px; direction:rtl; text-align:left}
/* ---------- أزرار ومشتركات ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 24px; border-radius:100px;
border:1px solid transparent; font-family:"Tajawal",sans-serif; font-weight:700; font-size:15.5px; cursor:pointer;
white-space:nowrap; transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s, color .18s}
.btn:hover{transform:translateY(-2px)}
.btn-brand{background:var(--brand); color:var(--onBrand); box-shadow:0 8px 22px -8px var(--brand)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25)}
.btn-light:hover{background:rgba(255,255,255,.18)}
.btn-sm{padding:9px 17px; font-size:14px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--brand);
background:color-mix(in srgb,var(--brand) 11%,transparent); padding:6px 14px; border-radius:100px; margin-bottom:18px}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brand)}
.sec{padding:92px 0}
.sec-head{max-width:660px; margin-bottom:50px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:14px}
.sec-head p{color:var(--muted); font-size:17px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1)}
.chip{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:100px; background:var(--card);
border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink2)}
.dim{color:var(--muted)}
html.barid-js [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1)}
html.barid-js [data-reveal].in{opacity:1; transform:none}
/* ---------- رسوم ---------- */
.il-bg{fill:color-mix(in srgb,var(--brand) 9%,var(--card))} .il-floor{fill:color-mix(in srgb,var(--ink) 9%,transparent)}
.il-ink{fill:var(--ink)} .il-ink2{fill:var(--ink2)} .il-brand{fill:var(--brand)} .il-brand2{fill:var(--brand2)}
.il-soft{fill:color-mix(in srgb,var(--ink) 16%,transparent)} .il-w{fill:#fff}
.il-s{stroke:var(--ink); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.il-sb{stroke:var(--brand); fill:none; stroke-width:2.4; stroke-linecap:round}
.frame{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--card); display:block; position:relative}
.frame svg{display:block; width:100%; height:auto}
.frame-cap{padding:14px 18px; font-size:13.5px; color:var(--muted); border-top:1px solid var(--line); display:flex; align-items:center; gap:8px}
.frame-cap b{color:var(--ink); font-family:"Tajawal",sans-serif; font-size:14.5px}
/* ---------- شريط التحكم ---------- */
.deck{position:fixed; inset-block-start:0; inset-inline:0; z-index:130; background:rgba(11,18,48,.95);
backdrop-filter:blur(14px); color:#fff; border-bottom:1px solid rgba(255,255,255,.1)}
/* ---------- الهيدر ---------- */
.topbar{background:var(--ink); color:rgba(255,255,255,.85); font-size:13.5px}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:9px; gap:14px; flex-wrap:wrap}
.topbar b{color:var(--brand2); font-weight:700}
header.nav{position:sticky; top:var(--deck); z-index:60; background:color-mix(in srgb,var(--surface) 84%,transparent);
backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:26px; padding-block:13px}
.nav-links{display:flex; gap:22px; font-size:14.5px; font-weight:600; color:var(--ink2)}
.nav-links a{position:relative; transition:color .2s; cursor:pointer}
.nav-links a::after{content:""; position:absolute; inset-inline:0; bottom:-5px; height:2px; background:var(--brand);
border-radius:2px; transform:scaleX(0); transition:transform .25s}
.nav-links a:hover{color:var(--brand)} .nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{margin-inline-start:auto; display:flex; gap:10px; align-items:center}
/* قائمة منسدلة كبيرة — تعطي إحساس شركة كبيرة لا موقع صفحة واحدة */
.has-mega{position:relative}
.has-mega>a::before{content:""; position:absolute; inset-inline:-10px; top:100%; height:18px}
.mega{position:absolute; top:calc(100% + 16px); inset-inline-start:50%; transform:translateX(50%) translateY(10px);
width:min(720px,88vw); background:var(--card); border:1px solid var(--line); border-radius:22px;
box-shadow:var(--sh-2); padding:20px; opacity:0; visibility:hidden; transition:.22s cubic-bezier(.2,.8,.3,1); z-index:80}
.has-mega:hover .mega, .has-mega.open .mega{opacity:1; visibility:visible; transform:translateX(50%) translateY(0)}
.mega h5{font-family:"Tajawal",sans-serif; font-size:12px; font-weight:800; color:var(--muted); margin:0 0 10px; letter-spacing:.02em}
.mega-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:3px}
.mega-grid a{padding:9px 11px; border-radius:11px; font-size:13.5px; font-weight:600; transition:.16s;
display:flex; align-items:center; gap:8px; color:var(--ink2); white-space:nowrap}
.mega-grid a:hover{background:var(--surface); color:var(--brand)}
.mega-grid a i{font-style:normal; font-size:15px; line-height:1}
.mega-foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--line); display:flex;
justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:var(--muted); flex-wrap:wrap}
/* ---------- الهيرو ---------- */
.hero{position:relative; overflow:hidden; padding:66px 0 30px}
.hero::before{content:""; position:absolute; top:-340px; inset-inline-start:-240px; width:860px; height:860px; border-radius:50%;
background:radial-gradient(circle, color-mix(in srgb,var(--brand) 16%,transparent), transparent 62%); pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; position:relative}
.hero h1{font-size:clamp(34px,5.2vw,58px); font-weight:900; letter-spacing:-.03em; line-height:1.16}
.hero h1 em{font-style:normal; position:relative; color:var(--brand); white-space:nowrap}
.hero h1 em::after{content:""; position:absolute; inset-inline:-.06em; bottom:-.12em; height:.12em;
background:color-mix(in srgb,var(--brand) 40%,transparent); border-radius:100px}
.hero-sub{font-size:18px; color:var(--muted); margin:22px 0 28px; max-width:520px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.hero-chips{display:flex; gap:9px; flex-wrap:wrap}
.hero-visual{position:relative}
.hero-visual .frame{box-shadow:var(--sh-2)}
.addr{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:24px 26px; box-shadow:var(--sh-3);
position:relative; overflow:hidden; margin:-54px 22px 0; z-index:2}
.addr::before{content:""; position:absolute; inset-block-start:-90px; inset-inline-end:-90px; width:250px; height:250px;
border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--brand) 40%,transparent), transparent 70%)}
.addr-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; position:relative}
.addr-top span{font-size:13px; color:rgba(255,255,255,.55); font-weight:600}
.addr-badge{background:color-mix(in srgb,var(--brand) 24%,transparent); color:var(--brand2); padding:5px 12px;
border-radius:100px; font-size:12px; font-weight:700; border:1px solid color-mix(in srgb,var(--brand) 40%,transparent); direction:ltr}
.addr-line{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
border-bottom:1px dashed rgba(255,255,255,.14); position:relative}
.addr-line:last-of-type{border-bottom:0}
.addr-line small{display:block; font-size:11.5px; color:rgba(255,255,255,.45); font-weight:600; margin-bottom:1px}
.addr-line div>span{font-size:15px; font-weight:600; direction:ltr; display:block; text-align:left}
.copy{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; width:31px; height:31px;
border-radius:9px; cursor:pointer; flex:none; display:grid; place-items:center; transition:.2s}
.copy:hover{background:var(--brand); border-color:var(--brand); color:var(--onBrand)}
.maskstar{letter-spacing:.1em; color:rgba(255,255,255,.88); user-select:none}
.addr-lock{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
margin-top:12px; padding-top:14px; border-top:1px dashed rgba(255,255,255,.16);
font-size:12.5px; color:rgba(255,255,255,.65); position:relative}
.float-badge{position:absolute; inset-block-start:18px; inset-inline-start:18px; background:var(--card); border:1px solid var(--line);
border-radius:18px; padding:12px 18px; box-shadow:var(--sh-2); display:flex; align-items:center; gap:12px; z-index:3}
.float-badge b{font-family:"Tajawal",sans-serif; font-size:25px; font-weight:900; color:var(--brand); line-height:1}
.float-badge span{font-size:12px; color:var(--muted); font-weight:600; line-height:1.4}
/* ---------- شريط شعارات لانهائي ---------- */
.mq{overflow:hidden; position:relative; padding:26px 0;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex; gap:52px; align-items:center; width:max-content; animation:mqslide 40s linear infinite}
.mq:hover .mq-row{animation-play-state:paused}
/* في RTL يبدأ الصفّ من الحافة اليمنى ويمتدّ يسارًا، فتحريكه سالبًا يفرّغ الشريط.
الاتجاه الصحيح موجب: النسخة الثانية تدخل من اليسار وتحلّ محل الأولى بلا قفزة. */
@keyframes mqslide{to{transform:translateX(50%)}}
.btile{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.025em;
white-space:nowrap; direction:ltr; transition:.25s; cursor:default; padding:13px 26px; border-radius:14px;
border:1px solid var(--line); background:var(--card); color:color-mix(in srgb,var(--ink) 46%, var(--surface));
display:inline-flex; align-items:center; justify-content:center; min-width:132px; height:56px}
.btile:hover{color:var(--brand); border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); transform:translateY(-2px)}
/* ===== خانة الشعار الحقيقي =====
ضع ملفات الشعارات في مجلد logos/ بجانب هذا الملف (amazon.svg ...)
وتظهر تلقائيًا مكان الاسم النصي. بلا ملف ⇒ يبقى الاسم النصي. */
.blogo{display:inline-flex; align-items:center; justify-content:center; gap:0; line-height:1}
.blogo img{max-height:26px; max-width:112px; width:auto; height:auto; display:block;
filter:grayscale(1) opacity(.55); transition:filter .25s}
.btile:hover .blogo img, .store-card:hover .blogo img{filter:grayscale(0) opacity(1)}
.blogo.has-img b{display:none}
.blogo b{font-weight:800; letter-spacing:-.025em}
.carriers .blogo img{max-height:30px; max-width:120px}
.store-card .blogo{height:34px; margin-bottom:8px}
.store-card .blogo img{max-height:30px; max-width:120px; filter:grayscale(1) opacity(.7)}
.lp-badge .blogo img{max-height:34px; max-width:150px; filter:none}
.lp-badge .blogo b{font-family:"Plus Jakarta Sans",sans-serif; font-size:25px; font-weight:800;
color:var(--ink); letter-spacing:-.02em}
.mq-row{gap:16px}
.mq-label{text-align:center; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.carriers{background:color-mix(in srgb,var(--ink) 4%, var(--surface)); border-block:1px solid var(--line)}
.carriers .btile{font-size:20px; background:var(--surface)}
/* ---------- المتاجر ---------- */
.stores-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.store-card{padding:20px 12px 16px; text-align:center; transition:transform .22s, box-shadow .22s, border-color .22s; cursor:pointer}
.store-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.store-name{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:16.5px; direction:ltr;
letter-spacing:-.02em; margin-bottom:5px; line-height:1.2}
.store-cat{font-size:11.5px; color:var(--muted); font-weight:600}
.store-flag{display:inline-block; margin-top:9px; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:100px;
background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok)}
.store-flag.no{background:color-mix(in srgb,var(--warm) 20%,transparent); color:#9A6B12}
/* ---------- الدول ---------- */
.countries{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.ccard{display:flex; align-items:center; gap:11px; padding:14px 16px; transition:.22s; cursor:pointer}
.ccard:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line)); transform:translateX(-3px)}
.ccard i{font-style:normal; font-size:22px; line-height:1}
.ccard b{font-family:"Tajawal",sans-serif; font-size:15px; display:block; line-height:1.3}
.ccard small{font-size:11.5px; color:var(--muted); font-weight:600}
/* ---------- المقارنة ---------- */
.cmp{overflow:hidden; border-radius:var(--r-xl)}
.cmp table{width:100%; border-collapse:collapse}
.cmp th,.cmp td{padding:16px 18px; text-align:right; border-bottom:1px solid var(--line); font-size:14.5px}
.cmp thead th{background:var(--surface); font-family:"Tajawal",sans-serif; font-size:15px; font-weight:800}
.cmp thead th.us{background:var(--ink); color:#fff; position:relative}
.cmp td.us{background:color-mix(in srgb,var(--brand) 6%,transparent); font-weight:700}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp .yes{color:var(--ok); font-weight:800} .cmp .no{color:#B03A2E; font-weight:700}
/* ---------- تتبّع ---------- */
.track{display:flex; gap:10px; padding:10px; border-radius:100px; background:var(--card); border:1px solid var(--line);
box-shadow:var(--sh-1); max-width:520px}
.track input{flex:1; border:0; background:transparent; padding:0 16px; font-family:inherit; font-size:15px;
color:var(--ink); direction:ltr; text-align:right; outline:0}
.track input::placeholder{color:var(--muted)}
/* ---------- الأرقام ---------- */
.counters{background:var(--ink); position:relative; overflow:hidden}
.counters::before{content:""; position:absolute; inset-block-start:-260px; inset-inline-start:50%; transform:translateX(50%);
width:900px; height:520px; border-radius:50%;
background:radial-gradient(circle, color-mix(in srgb,var(--brand) 20%,transparent), transparent 66%)}
.counters-grid{display:grid; grid-template-columns:repeat(4,1fr); position:relative}
.ct{padding:44px 22px; text-align:center; border-inline-start:1px solid rgba(255,255,255,.1)}
.ct:first-child{border-inline-start:0}
.ct b{display:block; font-family:"Tajawal",sans-serif; font-size:clamp(38px,4.6vw,56px); font-weight:900; line-height:1;
letter-spacing:-.035em; color:#fff; direction:ltr; margin-bottom:10px}
.ct b i{font-style:normal; color:var(--brand2); font-size:.48em; vertical-align:.42em; margin-inline-end:.06em}
/* > مباشر حتى لا تسري على رقم العدّاد داخل — كانت تصغّره إلى 14px */
.ct > span{font-size:14.5px; color:rgba(255,255,255,.62); font-weight:600}
.ct b span{font-size:inherit; color:inherit}
/* ---------- الخطوات ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{padding:28px 26px; position:relative; overflow:hidden; transition:transform .25s, box-shadow .25s}
.step:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.step-ic{width:56px; height:56px; border-radius:16px; background:color-mix(in srgb,var(--brand) 11%,transparent);
display:grid; place-items:center; margin-bottom:16px}
.step-n{position:absolute; inset-block-start:22px; inset-inline-start:24px; font-family:"Plus Jakarta Sans",sans-serif;
font-size:38px; font-weight:800; line-height:.8; color:transparent;
-webkit-text-stroke:1.4px color-mix(in srgb,var(--ink) 14%,transparent); direction:ltr}
.step h3{font-size:19px; margin-bottom:9px}
.step p{font-size:14.8px; color:var(--muted); line-height:1.75}
/* ---------- أوريغون / المسار ---------- */
.oregon{background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:56px; position:relative; overflow:hidden}
.oregon::before{content:""; position:absolute; inset-block-start:-160px; inset-inline-start:-120px; width:520px; height:520px;
border-radius:50%; background:radial-gradient(circle, color-mix(in srgb,var(--brand) 24%,transparent), transparent 68%)}
.oregon-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; position:relative}
.oregon h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:16px}
.oregon p{color:rgba(255,255,255,.72); font-size:16.5px}
.bars{display:flex; flex-direction:column; gap:15px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
border-radius:var(--r-lg); padding:26px}
.bar-row{display:grid; grid-template-columns:104px 1fr 82px; align-items:center; gap:14px; font-size:14px}
.bar-track{height:12px; background:rgba(255,255,255,.09); border-radius:100px; overflow:hidden}
.bar-fill{display:block; height:100%; width:100%; border-radius:100px; background:rgba(255,255,255,.3);
transform:scaleX(0); transform-origin:100% 50%; transition:transform .8s cubic-bezier(.22,1,.36,1)}
.bar-row.win .bar-fill{background:var(--brand)} .bar-row.win{color:var(--brand2); font-weight:700}
.bar-val{text-align:left; direction:ltr; font-weight:700}
.oregon-note{margin-top:18px; font-size:13px; color:rgba(255,255,255,.45)}
.route .frame{background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%,var(--card)), var(--card))}
.route-facts{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:22px}
.rf{padding:20px 22px; text-align:center}
.rf b{display:block; font-family:"Tajawal",sans-serif; font-size:26px; font-weight:900; color:var(--brand); line-height:1.1; direction:ltr}
.rf span{font-size:13.5px; color:var(--muted); font-weight:600}
/* ---------- الحاسبة ---------- */
.calc{display:grid; grid-template-columns:1fr .82fr; overflow:hidden; border-radius:var(--r-xl)}
.calc-in{padding:38px; background:var(--card)}
.field{margin-bottom:18px}
.field label{display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--ink2)}
.field input, .field select{width:100%; padding:12px 15px; border:1px solid var(--line); border-radius:12px;
background:var(--surface); font-family:inherit; font-size:15px; color:var(--ink); transition:.2s; direction:ltr; text-align:right}
.field input:focus, .field select:focus{outline:0; border-color:var(--brand); background:var(--card);
box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 12%,transparent)}
.dims{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.seg{display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:5px}
.seg button{flex:1; padding:9px; border:0; background:transparent; border-radius:9px; font-family:"Tajawal",sans-serif;
font-weight:700; font-size:14px; color:var(--muted); cursor:pointer; transition:.2s}
.seg button.on{background:var(--ink); color:#fff}
.calc-out{background:var(--ink); color:#fff; padding:38px; display:flex; flex-direction:column}
.calc-out h4{font-size:15px; color:rgba(255,255,255,.55); font-weight:600; margin-bottom:22px}
.price{font-family:"Tajawal",sans-serif; font-size:56px; font-weight:900; line-height:1; letter-spacing:-.03em; direction:ltr; text-align:right}
.price sup{font-size:24px; font-weight:700; vertical-align:super; color:var(--brand2)}
.price-sar{font-size:15px; color:rgba(255,255,255,.55); margin-top:8px; direction:ltr; text-align:right; font-weight:600}
.brk{margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:12px}
.brk-row{display:flex; justify-content:space-between; align-items:center; font-size:14px}
.brk-row span{color:rgba(255,255,255,.6)} .brk-row b{font-weight:700; direction:ltr}
.brk-row.hi b{color:var(--brand2)}
.calc-note{margin-top:auto; padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.42); line-height:1.7}
/* ---------- الخدمات ---------- */
.svcs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.svc{padding:28px; transition:transform .25s, box-shadow .25s, border-color .25s}
.svc:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.svc-ic{width:46px; height:46px; border-radius:14px; background:color-mix(in srgb,var(--brand) 12%,transparent);
color:var(--brand); display:grid; place-items:center; margin-bottom:16px}
.svc h3{font-size:17.5px; margin-bottom:7px}
.svc p{font-size:14.5px; color:var(--muted); line-height:1.72}
.svc.big{grid-column:span 2; grid-row:span 2; order:-1; display:flex; flex-direction:column; padding:0; overflow:hidden}
.svc.big:hover{transform:none}
.svc-big-art{background:linear-gradient(160deg, color-mix(in srgb,var(--brand) 12%,var(--card)), var(--card)); border-bottom:1px solid var(--line)}
.svc-big-art svg{display:block; width:100%; height:auto}
.svc-big-txt{padding:26px 28px 28px}
.svc-big-txt h3{font-size:22px; margin-bottom:8px}
.svc-big-txt p{font-size:15px; color:var(--muted); line-height:1.75}
.save-pill{display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 16px; border-radius:100px;
background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); font-weight:700; font-size:14px}
/* ---------- المعرض واللوحة ---------- */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.shot{margin-top:22px; font-size:14px; color:var(--muted); background:var(--card); border:1px dashed var(--line);
border-radius:14px; padding:16px 20px; line-height:1.8}
.shot b{color:var(--ink)}
.dash{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2); border:1px solid var(--line); background:var(--card)}
.dash-bar{background:var(--ink); padding:14px 20px; display:flex; align-items:center; gap:9px}
.dot3{display:flex; gap:6px} .dot3 i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2)}
.dash-url{margin-inline-start:14px; background:rgba(255,255,255,.08); border-radius:8px; padding:4px 14px;
font-size:12px; color:rgba(255,255,255,.55); direction:ltr}
.dash-body{padding:26px}
.dash-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px}
.dash-head h3{font-size:20px} .dash-head small{color:var(--muted); font-size:13.5px}
.code-pill{background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand);
border:1px dashed color-mix(in srgb,var(--brand) 45%,transparent); padding:6px 14px; border-radius:10px;
font-weight:700; font-size:13.5px; direction:ltr}
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:right; font-size:12.5px; color:var(--muted); font-weight:700; padding:10px 12px; border-bottom:1px solid var(--line)}
td{padding:13px 12px; border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .2s} tbody tr:hover{background:var(--surface)}
.thumb{width:44px; height:44px; border-radius:10px; overflow:hidden; border:1px solid var(--line); display:block}
.thumb svg{display:block; width:100%; height:100%}
.tag{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:100px; font-size:12.5px; font-weight:700}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.t-in{background:color-mix(in srgb,var(--ok) 13%,transparent); color:var(--ok)}
.t-prep{background:color-mix(in srgb,var(--brand) 14%,transparent); color:var(--brand)}
.t-out{background:color-mix(in srgb,var(--ink2) 10%,transparent); color:var(--ink2)}
.mono{direction:ltr; font-variant-numeric:tabular-nums; font-size:13.5px}
/* ---------- آراء وأسئلة ---------- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rev{padding:26px; position:relative}
.rev-stars{color:var(--brand); letter-spacing:2px; font-size:15px; margin-bottom:12px; direction:ltr}
.rev p{font-size:15px; color:var(--ink2); line-height:1.8; margin-bottom:18px}
.rev-who{display:flex; align-items:center; gap:11px}
.avi{width:38px; height:38px; border-radius:50%; background:color-mix(in srgb,var(--brand) 16%,transparent);
color:var(--brand); display:grid; place-items:center; font-weight:800; font-family:"Tajawal",sans-serif; flex:none}
.rev-who b{font-size:14.5px; display:block; line-height:1.3} .rev-who small{font-size:12.5px; color:var(--muted)}
.ph{position:absolute; inset-block-start:16px; inset-inline-start:16px; font-size:10.5px; font-weight:700; color:var(--muted);
background:var(--surface); border:1px solid var(--line); padding:3px 9px; border-radius:100px}
.disclaim{margin-top:22px; font-size:13.5px; color:var(--muted); background:var(--card); border:1px dashed var(--line);
border-radius:14px; padding:14px 18px}
.faq{max-width:820px; margin:0 auto}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%; background:0; border:0; padding:22px 0; display:flex; align-items:center; justify-content:space-between;
gap:16px; cursor:pointer; font-family:"Tajawal",sans-serif; font-weight:700; font-size:17.5px; color:var(--ink); text-align:right}
.q-ic{width:30px; height:30px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
flex:none; transition:.25s; color:var(--brand)}
.q.open .q-ic{background:var(--brand); color:var(--onBrand); border-color:var(--brand); transform:rotate(45deg)}
.q-a{max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.2,.8,.3,1)}
.q-a p{padding:0 0 22px; color:var(--muted); font-size:15.5px; line-height:1.85}
/* ---------- CTA / فوتر ---------- */
.cta{background:linear-gradient(135deg, var(--ink), var(--ink2)); color:#fff; border-radius:var(--r-xl); padding:62px;
text-align:center; position:relative; overflow:hidden}
.cta-bg{position:absolute; inset:0; opacity:.35}
.cta h2{font-size:clamp(28px,4vw,44px); margin-bottom:16px; position:relative}
.cta p{color:rgba(255,255,255,.72); font-size:17px; max-width:520px; margin:0 auto 30px; position:relative}
footer{background:var(--ink); color:rgba(255,255,255,.62); padding:64px 0 26px; margin-top:92px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.1fr; gap:34px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1)}
.foot-grid h4{color:#fff; font-size:15.5px; margin-bottom:16px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px}
.foot-grid a:hover{color:var(--brand2)}
.foot-about p{font-size:14.5px; margin:16px 0; max-width:300px; line-height:1.8}
.pay{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.pay span{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:6px 12px;
font-size:11.5px; font-weight:600; color:rgba(255,255,255,.75)}
.foot-bot{padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.4)}
/* ---------- صفحات فرعية (متجر / دولة) ---------- */
.crumb{font-size:13px; color:var(--muted); padding:20px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.crumb b{color:var(--ink); font-weight:700}
.lp-hero{padding:34px 0 56px; position:relative; overflow:hidden}
.lp-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.lp-hero h1{font-size:clamp(30px,4.4vw,50px); font-weight:900; letter-spacing:-.03em; line-height:1.18}
.lp-hero h1 em{font-style:normal; color:var(--brand)}
.lp-hero p{font-size:17.5px; color:var(--muted); margin:20px 0 26px; max-width:520px}
.lp-badge{display:inline-flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
border-radius:20px; padding:14px 22px; box-shadow:var(--sh-1); margin-bottom:20px}
.lp-badge .btile{opacity:1; font-size:26px; color:var(--ink)}
.lp-badge span{font-size:12.5px; color:var(--muted); font-weight:700; border-inline-start:1px solid var(--line); padding-inline-start:12px}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px}
.fact{padding:18px 20px}
.fact b{display:block; font-family:"Tajawal",sans-serif; font-size:22px; font-weight:900; color:var(--brand); line-height:1.2; direction:ltr}
.fact span{font-size:13px; color:var(--muted); font-weight:600}
.ptable{overflow:hidden; border-radius:var(--r-lg)}
.ptable th{background:var(--surface); font-family:"Tajawal",sans-serif; font-size:14px; color:var(--ink); font-weight:800; padding:14px 18px}
.ptable td{padding:14px 18px; font-size:14.5px}
.ptable td.p{font-weight:800; color:var(--brand); direction:ltr}
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.cat{padding:20px; display:flex; align-items:center; gap:12px; transition:.22s}
.cat:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.cat i{font-style:normal; font-size:26px} .cat b{font-family:"Tajawal",sans-serif; font-size:15.5px; display:block}
.cat small{font-size:12px; color:var(--muted)}
.other{display:flex; gap:10px; flex-wrap:wrap}
.other a{padding:10px 18px; border-radius:100px; background:var(--card); border:1px solid var(--line);
font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:14px; direction:ltr; transition:.2s; cursor:pointer}
.other a:hover{border-color:var(--brand); color:var(--brand)}
/* ---------- فهرس المتاجر ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:26px}
.search{flex:1; min-width:240px; display:flex; align-items:center; gap:10px; padding:12px 18px;
border:1px solid var(--line); border-radius:var(--r-full); background:var(--card); box-shadow:var(--sh-1)}
.search input{flex:1; border:0; background:transparent; font-family:inherit; font-size:15px; color:var(--ink); outline:0}
.chipbtn{padding:9px 16px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--card);
font-family:"Tajawal",sans-serif; font-weight:700; font-size:13.5px; color:var(--ink2); cursor:pointer; transition:.18s}
.chipbtn:hover{border-color:var(--brand); color:var(--brand)}
.chipbtn.on{background:var(--ink); border-color:var(--ink); color:#fff}
.empty{text-align:center; padding:60px 20px; color:var(--muted); font-size:16px}
.count{font-size:13.5px; color:var(--muted); font-weight:600; margin-bottom:16px}
/* ---------- صفحة الأسعار ---------- */
.zones{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px}
.zone{padding:18px 20px; cursor:pointer; transition:.2s; text-align:right}
.zone:hover{border-color:color-mix(in srgb,var(--brand) 45%,var(--line))}
.zone.on{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)}
.zone b{display:block; font-family:"Tajawal",sans-serif; font-size:16px; margin-bottom:3px}
.zone small{font-size:12.5px; color:var(--muted); display:block; line-height:1.6}
.zone i{font-style:normal; display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--brand)}
.fees{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.fee{padding:22px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:14px}
.fee b{font-family:"Tajawal",sans-serif; font-size:16px; display:block; margin-bottom:4px}
.fee small{font-size:13px; color:var(--muted); line-height:1.7}
.fee span{font-family:"Tajawal",sans-serif; font-weight:900; font-size:19px; color:var(--brand); white-space:nowrap; direction:ltr}
.fee span.free{color:var(--ok)}
/* ---------- الحاسبة البارزة ---------- */
.calcband{background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%,var(--surface)), var(--surface) 64%);
border-block:1px solid var(--line)}
.presets{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px}
.presets em{font-style:normal; font-size:12.5px; font-weight:700; color:var(--muted); margin-inline-end:2px}
.presets button{padding:8px 14px; border-radius:var(--r-full); border:1px solid var(--line); background:var(--card);
font-family:"Tajawal",sans-serif; font-weight:700; font-size:13px; color:var(--ink2); cursor:pointer; transition:.18s}
.presets button:hover{border-color:var(--brand); color:var(--brand)}
.presets button.on{background:var(--ink); border-color:var(--ink); color:#fff}
/* ---------- البوليصة الفورية ---------- */
.lblband{display:grid; grid-template-columns:1.02fr .98fr; overflow:hidden; align-items:center; border-radius:var(--r-xl)}
.lblband-txt{padding:46px 48px}
.lblband-txt h2{font-size:clamp(26px,3.4vw,38px); margin-bottom:14px}
.lblband-txt p{color:var(--muted); font-size:16.5px; max-inline-size:52ch}
.lblband-art{background:linear-gradient(160deg, color-mix(in srgb,var(--brand) 10%,var(--card)), var(--card));
border-inline-start:1px solid var(--line); align-self:stretch; display:grid; place-items:center}
.lblband-art svg{display:block; width:100%; height:auto}
.lblband-art.standalone{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2)}
.lbl-chips{display:flex; gap:9px; flex-wrap:wrap; margin:18px 0 22px}
/* نصوص البوليصة لاتينية — تُعزل عن اتجاه الصفحة RTL وإلا انسحبت فوق الشعار */
.printer text{direction:ltr; unicode-bidi:isolate}
/* البوليصة تطلع من الطابعة، تثبت، ثم تختفي وتعيد */
.lbl-out{animation:printout 4.6s cubic-bezier(.35,0,.2,1) infinite}
@keyframes printout{
0%{transform:translateY(-150px); opacity:1}
50%{transform:translateY(0); opacity:1}
84%{transform:translateY(0); opacity:1}
92%{transform:translateY(0); opacity:0}
92.01%{transform:translateY(-150px); opacity:0}
100%{transform:translateY(-150px); opacity:1}
}
@media (max-width:1000px){
.lblband{grid-template-columns:1fr}
.lblband-art{border-inline-start:0; border-top:1px solid var(--line)}
.lblband-txt{padding:34px 26px}
}
/* ---------- شريط تنقّل الصفحات السبع ---------- */
.pagenav{position:sticky; top:calc(var(--deck) + 68px); z-index:55; background:color-mix(in srgb,var(--surface) 92%,transparent);
backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:12px 0}
/* ---------- خريطة الصفحات ---------- */
.pm-head{padding:70px 0 40px}
.safe{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:10px}
.rule{padding:20px 24px; display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.75}
.rule i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; flex:none; font-style:normal;
font-weight:800; font-size:14px; margin-top:3px}
.rule.do i{background:color-mix(in srgb,var(--ok) 15%,transparent); color:var(--ok)}
.rule.no i{background:rgba(200,60,60,.12); color:#B03A2E}
.rule b{font-family:"Tajawal",sans-serif}
/* ============ لوحة الهوية ============ */
.bp-hero{padding:70px 0 46px}
/* قبل/بعد — علامتك الحالية مقابل نسختها المنظّفة */
.evo{display:grid; grid-template-columns:1fr 1fr; overflow:hidden; margin-bottom:26px}
@media (max-width:820px){ .evo,.evo-list{grid-template-columns:1fr} .evo-side.old{border-inline-end:0; border-bottom:1px solid var(--line)} }
.mark-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.mark-cap{position:absolute; inset-block-start:14px; inset-inline-start:16px; font-size:11.5px; font-weight:700; color:var(--muted)}
.tape{margin-top:24px; border-radius:16px; overflow:hidden; border:1px solid var(--line)}
.tape-in{background:var(--brand); color:var(--onBrand); padding:15px 0; display:flex; align-items:center; white-space:nowrap;
overflow:hidden; font-family:"Tajawal",sans-serif; font-weight:800; font-size:17px}
.tape-in>div{display:flex; gap:32px; align-items:center; animation:mqslide 24s linear infinite; padding-inline-end:32px}
.tape-in span{display:inline-flex; align-items:center; gap:11px}
.dont{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
/* ============================================================
الحركة — خطوط سير، كراتين تسبح، سير ناقل
كلها CSS/SVG خالص بلا مكتبات، وتتوقف كليًا مع prefers-reduced-motion
============================================================ */
.hero-paths{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:.55}
.hero-grid{position:relative; z-index:1}
.hero-paths path{fill:none; stroke:var(--brand); stroke-width:1.6; stroke-dasharray:5 10; opacity:.30}
.hero-paths .pk{fill:var(--brand)}
/* الخط يُرسم مرة واحدة والطائرة تسحبه — أهدأ وأغلى من حلقة لا تتوقف */
@keyframes draw{to{stroke-dashoffset:0}}
.trail{stroke:var(--brand); fill:none; stroke-width:2.6; stroke-linecap:round}
.frame.in .trail{animation:draw 2.6s cubic-bezier(.4,0,.25,1) forwards}
.plane{fill:var(--brand)}
.planeg{opacity:0} .frame.in .planeg{opacity:1; transition:opacity .25s .12s}
/* كراتين تسبح ببطء داخل الرسوم */
@keyframes floaty{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.il-float{animation:floaty 3.6s ease-in-out infinite}
.il-float.d1{animation-delay:-.5s} .il-float.d2{animation-delay:-1.1s}
.il-float.d3{animation-delay:-1.8s} .il-float.d4{animation-delay:-2.4s}
/* السير الناقل — فاصل بين الأقسام */
.belt{position:relative; overflow:hidden; padding:34px 0 0; background:var(--surface)}
.belt-row{display:flex; gap:64px; width:max-content; align-items:flex-end; animation:mqslide 26s linear infinite;
padding-inline-end:64px}
.belt-row svg{display:block}
.belt-line{position:relative; height:10px; margin-top:-2px; background:var(--ink); border-radius:6px}
.belt-line{overflow:hidden}
.belt-line::after{content:""; position:absolute; inset-block:3px auto; inset-inline-start:0; height:4px; width:300%;
background:repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb,#fff 22%,transparent) 14px 28px);
animation:beltstripe 1.1s linear infinite}
@keyframes beltstripe{to{transform:translateX(28px)}}
.belt-wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.belt-cap{text-align:center; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.06em;
text-transform:uppercase; padding:16px 0 34px}
/* نبض خفيف على نقاط الوجهة */
@keyframes ping{0%{transform:scale(1); opacity:.35} 70%{transform:scale(2.1); opacity:0} 100%{opacity:0}}
.ping{transform-origin:center; transform-box:fill-box; animation:ping 2.6s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
transition-duration:.01ms !important; scroll-behavior:auto !important}
}
/* ============ لمسة الفخامة ============ */
.lux .btn-brand{background:var(--grad); box-shadow:0 10px 30px -10px var(--brand)}
.lux .btn-brand:hover{box-shadow:0 18px 42px -12px var(--brand)}
.lux .card{border-color:color-mix(in srgb,var(--ink) 8%,var(--line))}
.dk{position:relative; overflow:hidden}
.lux .dk::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.15; mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.lux .counters::before{background:radial-gradient(circle at 32% 42%, color-mix(in srgb,var(--brand3) 32%,transparent), transparent 60%),
radial-gradient(circle at 70% 58%, color-mix(in srgb,var(--brand) 30%,transparent), transparent 62%)}
.lux .oregon::before{background:radial-gradient(circle at 40% 40%, color-mix(in srgb,var(--brand3) 30%,transparent), transparent 62%),
radial-gradient(circle at 65% 60%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 64%)}
.lux .ct b{background:linear-gradient(180deg,#fff 20%, color-mix(in srgb,var(--brand2) 92%,#fff));
-webkit-background-clip:text; background-clip:text; color:transparent}
.lux .ct b i{-webkit-text-fill-color:var(--warm); color:var(--warm)}
.lux .hero h1 em, .lux .lp-hero h1 em{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lux .hero h1 em::after{background:var(--grad); opacity:.5}
.lux .float-badge b, .lux .rf b, .lux .fact b, .lux .pm-stat b{background:var(--grad);
-webkit-background-clip:text; background-clip:text; color:transparent}
.lux .topbar b{color:var(--warm)}
.lux .addr-badge{color:var(--warm); background:color-mix(in srgb,var(--warm) 15%,transparent);
border-color:color-mix(in srgb,var(--warm) 38%,transparent)}
.lux .bar-row.win{color:var(--warm)} .lux .rev-stars{color:var(--warm)}
.lux .step-ic,.lux .svc-ic{background:linear-gradient(140deg, color-mix(in srgb,var(--brand) 15%,transparent), color-mix(in srgb,var(--brand3) 10%,transparent))}
.lat,.num,.mono,.price,.ct b,.blogo b,.step-n,.logo--lat .logo-txt b{letter-spacing:-.02em}
.mq-label,.belt-cap{text-transform:none; font-size:13px; word-spacing:.06em}
/* ٢ · تنفّس السطر وحدّ عرضه — العربية تحتاج مساحة أكثر من اللاتينية */
h1,h2,h3,h4,.display{line-height:1.34}
.hero h1{line-height:1.30} .lp-hero h1{line-height:1.32}
h1,h2{text-wrap:balance}
.hero-sub{max-inline-size:52ch} .sec-head{max-width:62ch} .sec-head p{max-inline-size:58ch}
.q-a p{max-inline-size:66ch} .shot,.disclaim{max-inline-size:74ch}
.q-a p,.shot,.svc p,.step p,.rev p,.rule,.oregon p{text-wrap:pretty}
p,li,.rule,.calc-note,.q-a p{line-height:1.8}
/* ٣ · نظام أرقام واحد: لاتينية + عرض ثابت حتى لا ترتجف العدّادات */
.num,.mono{font-variant-numeric:tabular-nums lining; direction:ltr; unicode-bidi:isolate}
/* ٤ · حالات التفاعل — كانت غائبة كليًا */
:where(a,button,input,select,[tabindex]):focus-visible{outline:2px solid var(--brand); outline-offset:3px}
:focus:not(:focus-visible){outline:0}
.btn:active{transform:translateY(0) scale(.985); transition-duration:80ms}
@media (hover:none){
.btn:hover,.step:hover,.svc:hover,.store-card:hover,.btile:hover,.ccard:hover,.cat:hover{transform:none}
}
/* ٦ · أرقام الخطوات كانت تختفي في فايرفوكس */
.step-n{color:color-mix(in srgb,var(--ink) 13%,transparent); -webkit-text-stroke:0}
@supports (-webkit-text-stroke: 1px black){
.step-n{color:transparent; -webkit-text-stroke:1.3px color-mix(in srgb,var(--ink) 17%,transparent)}
}
/* ١٤ · ظلال أهدأ — التوهّج الملوّن يرخّص الشكل */
.lux .btn-brand{box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 18%,transparent),
0 8px 18px -10px color-mix(in srgb,var(--brand) 55%,transparent)}
.lux .btn-brand:hover{box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 20%,transparent),
0 14px 26px -10px color-mix(in srgb,var(--brand) 55%,transparent)}
.lux .float-badge b,.lux .rf b,.lux .fact b,.lux .pm-stat b{
background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--brand)}
/* ١٥ · جدار الشعارات — أسماء بخطّ عادي لا تتظاهر بأنها شعارات */
.mq-row{gap:clamp(38px,5vw,64px)}
.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent)}
.blogo b{font-weight:600; letter-spacing:normal; font-size:16px;
color:color-mix(in srgb,var(--ink) 52%,var(--surface))}
.btile{min-width:126px; height:54px}
.slot-note{text-align:center; font-size:12.5px; color:var(--muted); padding:4px 22px 0}
/* ١٩ · سلامة الاتجاه — أرقام ولاتينية داخل نص عربي */
.addr-line div>span{unicode-bidi:isolate}
.price-sar{unicode-bidi:isolate}
.field select{direction:rtl; text-align:right}
.field input[type=number]{direction:ltr; text-align:left}
.track input{direction:rtl; text-align:right}
.track input:not(:placeholder-shown){direction:ltr; text-align:left; unicode-bidi:isolate}
th,.cmp th,.cmp td,.ptable th,.ptable td{text-align:start}
/* رمز الدولة بحرفين — الأعلام الإيموجي تنكسر على ويندوز */
.cflag{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:12px; direction:ltr;
width:34px; height:26px; border-radius:7px; display:grid; place-items:center; flex:none;
background:color-mix(in srgb,var(--brand) 12%,transparent); color:var(--brand); letter-spacing:.02em}
.lp-badge .cflag{width:46px; height:34px; font-size:15px}
/* ٢٠ · الجوال: شريط دعوة لاصق + زر قائمة */
.navtoggle{display:none; margin-inline-start:auto; width:42px; height:42px; border-radius:12px;
border:1px solid var(--line); background:var(--card); cursor:pointer; place-items:center; color:var(--ink)}
.mbar{position:fixed; inset-inline:0; bottom:0; z-index:118; display:none; gap:8px;
padding:10px 14px calc(10px + env(safe-area-inset-bottom));
background:color-mix(in srgb,var(--card) 94%,transparent); backdrop-filter:blur(14px);
border-top:1px solid var(--line)}
.mbar .btn{flex:1}
@media (max-width:1000px){
.navtoggle{display:grid} .nav-cta{display:none}
.mbar{display:flex} body{padding-bottom:80px}
.nav-links.open{display:flex; flex-direction:column; gap:2px; position:absolute; inset-inline:0;
top:100%; background:var(--card); border-bottom:1px solid var(--line); padding:14px 22px 20px;
box-shadow:var(--sh-2)}
.nav-links.open a{padding:11px 0; border-bottom:1px solid var(--line)}
.nav-links.open .has-mega{width:100%}
.nav-links.open .mega{display:none}
/* في قائمة الجوال تنفتح القائمة الكبيرة داخل التدفق لا عائمة */
.nav-links.open .has-mega.open .mega{display:block; position:static; width:100%; transform:none;
box-shadow:none; border:0; margin-top:8px; opacity:1; visibility:visible}
}
/* ١٧ · حركة أهدأ — الخطوط الخلفية كانت صاخبة */
.hero-paths{opacity:1}
.hero-paths path{opacity:.13; stroke-width:1.4; stroke-dasharray:4 12}
.hero-paths .pk{opacity:.30}
/* ١٦ · احترام تقليل الحركة على كل الحلقات */
@media (prefers-reduced-motion: reduce){
.mq-row,.belt-row,.tape-in>div,.belt-line::after,#routePath,#rp2,.il-float,.lbl-out{animation:none !important}
}
@media (max-width:1080px){
.stores-grid{grid-template-columns:repeat(4,1fr)} .countries{grid-template-columns:repeat(3,1fr)}
.cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
.hero-grid,.oregon-grid,.calc,.mark-grid,.apps,.lp-grid{grid-template-columns:1fr}
.steps,.svcs,.revs,.gal,.opts,.route-facts,.pm-stats,.safe,.dont,.fees,.zones{grid-template-columns:1fr 1fr}
.counters-grid{grid-template-columns:1fr 1fr}
.ct:nth-child(3){border-inline-start:0} .ct:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
.pal{grid-template-columns:repeat(3,1fr)} .ui-grid{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr 1fr} .nav-links{display:none}
.oregon,.cta{padding:38px 26px} .svc.big{grid-column:span 2; grid-row:auto}
}
@media (max-width:640px){
.steps,.svcs,.revs,.gal,.opts,.foot-grid,.route-facts,.pm-stats,.facts,.safe,.dont,
.fees,.zones,.cats,.pal{grid-template-columns:1fr}
/* بطاقة الرسوم: العنوان الطويل والسعر غير القابل للكسر كانا يمدّان الصفحة */
.fee{flex-wrap:wrap} .fee>div{min-width:0; flex:1 1 auto}
.stores-grid{grid-template-columns:repeat(2,1fr)} .countries{grid-template-columns:1fr}
.counters-grid{grid-template-columns:1fr} .ct{border-inline-start:0; border-top:1px solid rgba(255,255,255,.1)}
.ct:first-child{border-top:0} .sec{padding:60px 0} .calc-in,.calc-out{padding:26px}
.bcard-box{grid-template-columns:1fr} .addr{margin-inline:0} .svc.big{grid-column:auto}
.cmp{overflow-x:auto} .cmp table{min-width:620px}
.ptable{overflow-x:auto} .ptable table{min-width:560px}
}
/* ============================================================
طبقة التكامل مع أسترا — أسبقية أعلى بلا !important
============================================================ */
body.barid{background:var(--surface); color:var(--ink);
font-family:"IBM Plex Sans Arabic","SF Arabic","Geeza Pro","Segoe UI",Tahoma,sans-serif;
font-size:16px; line-height:1.8}
body.barid #page,
body.barid .site-content,
body.barid .ast-container{background:transparent}
body.barid h1,body.barid h2,body.barid h3,body.barid h4{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif; font-weight:800; letter-spacing:normal}
body.barid .entry-content > .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:22px}
/* إليمنتور يضبط عرض الحاوية بنفسه — لا نصادمه، فقط نمنع الفيض الأفقي */
body.barid{overflow-x:hidden}
body.barid .mq,body.barid .belt{max-width:100vw}
/* حاسبة barid-shipping داخل شريط الهوية */
.barid-calc-wrap .bs-card{border-radius:var(--r-lg); border:1px solid var(--line);
box-shadow:var(--sh-1); background:var(--card)}
.barid-calc-wrap .bs-btn{border-radius:var(--r-full); font-family:"Tajawal",sans-serif; font-weight:700}
/* ═══ صفحات التخطيط الكامل ═══
أسترا تحصر المحتوى في حاوية ضيّقة وتضيف حشوة وعنوانًا — والأقسام هنا
تمتد بعرض الشاشة وتدير حشوتها بنفسها، فتُلغى قيود الحاوية عليها وحدها. */
body.barid-full .site-content .ast-container,
body.barid-full .ast-container > .site-main,
body.barid-full .entry-content{max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
body.barid-full .entry-header,
body.barid-full .ast-single-post-order,
body.barid-full .post-navigation{display:none}
body.barid-full .site-content{padding-top:0}
body.barid-full .entry-content > .sec:first-child{margin-top:0}
/* ═══ رأس الموقع ═══
أسترا تعرض الشعار بمقاسه الطبيعي ما لم يُقيَّد، وتكرّر اسم الموقع نصًّا
بجانبه. الشعار وحده يكفي — وهو مصمَّم ليعمل بلا حروف في اللغتين. */
body.barid .site-header,
body.barid .ast-primary-header-bar{background:#fff;border-bottom:1px solid var(--line,#E4E6F0)}
body.barid .custom-logo-link img,
body.barid .astra-logo-svg{width:auto;max-width:none;height:46px}
body.barid .site-title,
body.barid .site-description,
body.barid .ast-site-identity .site-title{display:none}
body.barid .ast-builder-menu .main-header-menu > .menu-item > .menu-link,
body.barid .main-header-menu > .menu-item > .menu-link{
font-weight:700;font-size:15.5px;color:var(--ink,#0B1230);padding-inline:14px}
body.barid .main-header-menu > .menu-item > .menu-link:hover{color:var(--brand,#4B6BFF)}
body.barid .main-header-menu .sub-menu{
border:1px solid var(--line,#E4E6F0);border-radius:14px;overflow:hidden;
box-shadow:0 18px 44px rgba(11,18,48,.10);padding:6px 0}
body.barid .main-header-menu .sub-menu .menu-link{font-size:14.5px;padding:9px 18px}
body.barid .ast-header-break-point .main-header-bar{padding-block:8px}
body.barid .ast-header-break-point .custom-logo-link img{height:38px}
/* ═══ الفوتر ═══ */
body.barid .site-footer,
body.barid .ast-small-footer{background:var(--ink,#0B1230);color:#C7CEE4}
body.barid .site-footer a{color:#fff}
/* شعار الفوتر يأتي متجهًا بلا عرض ثابت، فيملأ عموده ما لم يُقيَّد. */
body.barid .barid-footer{background:var(--ink,#0B1230);padding:64px 0 26px;margin-top:0}
body.barid .foot-about svg{width:132px;height:auto;display:block;fill:#fff}
body.barid .barid-footer .foot-grid a{color:rgba(255,255,255,.62);text-decoration:none}
body.barid .barid-footer .foot-grid a:hover{color:#fff}
body.barid .barid-footer .foot-bot span:last-child{direction:ltr;opacity:.8}
@media (max-width:980px){
body.barid .foot-grid{grid-template-columns:1fr 1fr;gap:26px}
body.barid .foot-about{grid-column:1 / -1}
}
@media (max-width:520px){ body.barid .foot-grid{grid-template-columns:1fr} }
/* ═══ تصحيحات وجدتها المراجعة ═══
أسترا تسطّر كل رابط داخل `.entry-content` بأسبقية تغلب `a{text-decoration:none}`،
فظهرت الأزرار مسطّرة. الروابط النصّية داخل الفقرات تبقى مسطّرة عمدًا. */
body.barid .entry-content a{text-decoration:none}
/* .bw-btn أُضيف للاستثناء: أزرار إضافة المستودع («ادفع الآن»، «اذهب لشحناتي»)
تُطبع داخل فكانت تُسطَّر كأنها روابط نصّية. */
body.barid .entry-content p > a:not(.btn):not(.chip):not(.card):not(.bw-btn){text-decoration:underline;text-underline-offset:3px}
/* من يطلب تقليل الحركة يُوقَف عنه كل شيء — والقاعدة وحدها لا توقف SMIL،
فالسكربت أدناه يكمل ما تعجز عنه (انظر barid.js). */
@media (prefers-reduced-motion: reduce){
body.barid *,
body.barid *::before,
body.barid *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important;scroll-behavior:auto!important}
body.barid .mq-row,
body.barid .belt-row{animation:none!important;transform:none!important}
}
/* ═══════════════════════════════════════════════════════════════
طبقة الموقع الحيّ — رأس وفوتر إليمنتور/ElementsKit
───────────────────────────────────────────────────────────────
رأس baridus.com قالب ElementsKit داخل إليمنتور (رقم 81)، والقالب
لا يمسّه بنيةً. هذه الطبقة توحّد ألوانه مع الهوية بلا تعديل القالب،
فإزالتها تُرجع مظهره القديم كما كان.
═══════════════════════════════════════════════════════════════ */
/* الشريط العلوي: أصفر #FFCC00 → حبر */
body.barid .elementor-element-a44cb39{background-color:var(--ink,#0B1230)!important}
body.barid .elementor-element-a44cb39,
body.barid .elementor-element-a44cb39 *{color:rgba(255,255,255,.84)!important}
body.barid .elementor-element-a44cb39 svg{fill:#8FA6FF!important}
body.barid .elementor-element-a44cb39 a:hover,
body.barid .elementor-element-a44cb39 a:hover *{color:#fff!important}
/* صفّ الرأس */
body.barid .elementor-element-5946075{background:#fff!important;border-bottom:1px solid var(--line,#E4E6F0)}
/* الشعار: يُبدَّل بصريًا بعلامة الهوية بلا لمس ودجة الصورة.
المطابقة على اسم الملف لا على معرّف العنصر، فلا تنكسر لو أُعيد ترتيب الرأس. */
body.barid img[src*="/logo.webp"]{opacity:0!important;height:52px!important;width:186px!important}
body.barid .elementor-widget-image:has(img[src*="/logo.webp"]) .elementor-widget-container{
/* القفل الكامل (العلامة + الاسم) كما في المعاينة، لا العلامة وحدها */
background:url("../logo/barid-lockup-ink.svg") no-repeat center/contain}
/* الرابط النشط كان ذهبيًا */
body.barid .ekit-template-content-header .elementor-item.elementor-item-active,
body.barid .ekit-template-content-header .current-menu-item > a{color:var(--brand,#4B6BFF)!important}
/* زر الحساب من إضافة المستودع: أصفر → أزرق العلامة */
body.barid .bw-hdr-btn{background:var(--brand,#4B6BFF)!important;color:#fff!important;
border-radius:999px!important;padding:9px 22px!important;font-weight:700!important;
box-shadow:0 6px 18px rgba(75,107,255,.28)!important;border:0!important}
body.barid .bw-hdr-btn:hover{background:#3B5BEF!important}
/* الفوتر: الموقع الحيّ عنده فوتر ElementsKit — لا يُكدَّس فوقه فوتر ثانٍ.
الفحص البرمجي في functions.php هو الأساس، وهذه شبكة أمان للحالات التي
يبني فيها إليمنتور الفوتر بعد إقلاع القالب. */
body:has(.ekit-template-content-markup) .barid-footer{display:none!important}
body.barid footer.site-footer:empty{display:none!important}
body.barid footer.site-footer .ast-footer-copyright:empty{display:none!important}
/* ═══════════════════════════════════════════════════════════════
إكساء حاسبة الشحن — إضافة barid-shipping ([barid_shipping_calculator])
───────────────────────────────────────────────────────────────
ملف الإضافة bs-form.css يُطبع بعد هذا الملف (يُدرَج وقت تنفيذ
الشورتكود فيخرج في التذييل)، فالترتيب لصالحه. لذلك تُبنى كل قاعدة
هنا على المرساة `body.barid .bs-wrap` — أسبقيتها أعلى من أي محدِّد
في الإضافة، فتغلبه بلا !important.
العمود الفقري للطبقة هو إعادة تعريف متغيّرات الإضافة نفسها
(--bs-*) بمتغيّرات الهوية، فيتبدّل معظم المظهر من نقطة واحدة،
وتبقى قواعد الإضافة (ومنها .bs-invalid ذات !important) تعمل كما هي
لكن بألوان الهوية. ما بعدها تفاصيل لا تمرّ عبر متغيّر.
لا يُلمس ملف الإضافة إطلاقًا — حذف هذه الكتلة يعيد مظهرها الأصلي.
═══════════════════════════════════════════════════════════════ */
/* ---------- ١ · ربط متغيّرات الإضافة بمتغيّرات الهوية ---------- */
body.barid .bs-wrap{
--bs-brand:var(--brand);
--bs-brand-soft:color-mix(in srgb,var(--brand) 8%,var(--card));
--bs-accent:var(--warm);
--bs-ink:var(--ink);
--bs-mute:var(--muted);
--bs-line:var(--line);
--bs-bg:var(--card);
--bs-soft:var(--surface);
--bs-ok:var(--ok);
/* الهوية بلا لون خطر — يُعرَّف هنا مرة واحدة، تباينه على الأبيض ٥٫٥:١ */
--bs-err:#C0342F;
--bs-r:var(--r-lg);
--bs-shadow:var(--sh-1);
/* مشتقات محلية تُستعمل أدناه بدل تكرار color-mix */
--bs-tint:color-mix(in srgb,var(--brand) 7%,var(--card));
--bs-tint-line:color-mix(in srgb,var(--brand) 22%,var(--card));
--bs-ring:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent);
--bs-hover-line:color-mix(in srgb,var(--brand) 34%,var(--line));
/* أزرق العلامة على الأبيض يعطي ٤٫٣:١ — يكفي للأرقام الكبيرة لا للنصّ الصغير.
فيُستعمل هذا المشتقّ (أزرق مشدود نحو الحبر، ٦:١) في كل نصّ صغير أو غامق. */
--bs-brand-text:color-mix(in srgb,var(--brand) 76%,var(--ink));
/* تدرّج العلامة مشدودًا نحو الحبر. سببه قياس: الأبيض على var(--grad) الخام
يعطي ٤٫٢٣:١، وهو يكفي زرًّا كبيرًا لا رقمًا بحجم 14.5px داخل قرص الخطوة.
الشدّ ١٤٪ يرفعه فوق ٥:١ ويُبقي الشكل تدرّجًا للعلامة لا لونًا مصمتًا. */
--bs-grad-deep:linear-gradient(135deg,
color-mix(in srgb,var(--brand) 86%,var(--ink)),
color-mix(in srgb,var(--brand3) 86%,var(--ink)));
--bs-warm-bg:color-mix(in srgb,var(--warm) 26%,var(--card));
--bs-warm-line:color-mix(in srgb,var(--warm) 62%,var(--card));
--bs-err-bg:color-mix(in srgb,var(--bs-err) 7%,var(--card));
--bs-err-line:color-mix(in srgb,var(--bs-err) 26%,var(--card));
max-width:var(--maxw);
line-height:1.75;
}
/* ---------- ٢ · العناوين ---------- */
body.barid .bs-wrap .bs-title{font-size:clamp(22px,3vw,30px)}
body.barid .bs-wrap .bs-title-d{color:var(--muted); font-size:15.5px}
body.barid .bs-wrap .bs-h{font-size:19px; gap:12px; margin-bottom:20px}
/* رقم الخطوة: قرص بتدرّج العلامة بدل المربّع الكحلي.
التدرّج هنا هو المشدود لا الخام: مربّع الإضافة كان كحليًّا مصمتًا (#14375E)
والأبيض عليه ١٢٫١:١، فلو لبس القرصُ --grad كما هو لهبط الرقم إلى ٤٫٢٣:١
— تراجع تسبّبه هذه الطبقة نفسها. --bs-grad-deep يعيده فوق ٥:١. */
body.barid .bs-wrap .bs-step{
width:32px; height:32px; border-radius:11px;
background:var(--bs-grad-deep); color:var(--onBrand);
font-family:"Tajawal",sans-serif; font-weight:800; font-size:14.5px;
box-shadow:0 6px 14px -8px var(--brand);
}
/* ملاحظة العنوان: شارة على طراز .chip في الهوية */
body.barid .bs-wrap .bs-h-note{
font-size:12.5px; font-weight:600; color:var(--muted);
background-color:var(--surface); border:1px solid var(--line);
border-radius:var(--r-full); padding:5px 13px; line-height:1.4;
}
/* العنوان الفرعي: عين برّاقة بلون العلامة وخط فاصل يملأ ما تبقى */
body.barid .bs-wrap .bs-sub{
display:flex; align-items:center; gap:12px;
font-size:13px; color:var(--bs-brand-text); text-transform:none;
margin:26px 0 12px;
}
body.barid .bs-wrap .bs-sub::after{content:""; flex:1 1 auto; height:1px; background:var(--line)}
body.barid .bs-wrap .bs-sub span{color:var(--muted)}
/* ---------- ٣ · البطاقات ---------- */
body.barid .bs-wrap .bs-card{
background-color:var(--card);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
padding:24px 26px;
margin-bottom:16px;
}
/* ---------- ٤ · الحقول ---------- */
body.barid .bs-wrap .bs-field > span{font-size:13.5px; font-weight:700; color:var(--ink2)}
/* background-color لا background: الاختصار يمسح سهم القائمة المنسدلة (صورة خلفية data URI) */
body.barid .bs-wrap .bs-field input,
body.barid .bs-wrap .bs-field select,
body.barid .bs-wrap .bs-field textarea{
border:1px solid var(--line);
border-radius:var(--r-sm);
background-color:var(--surface);
color:var(--ink);
box-shadow:none;
min-height:48px;
}
body.barid .bs-wrap .bs-field input:hover,
body.barid .bs-wrap .bs-field select:hover,
body.barid .bs-wrap .bs-field textarea:hover{border-color:var(--bs-hover-line)}
/* بلا outline:0 هنا عمدًا — لو أُضيف لغلب قاعدة :focus-visible أدناه
(أسبقيته أعلى، و:focus-visible حالة من :focus) فاختفت حلقة لوحة المفاتيح.
إخفاء الحلقة عند النقر بالفأرة تتكفّل به قاعدة outline:none في الإضافة. */
body.barid .bs-wrap .bs-field input:focus,
body.barid .bs-wrap .bs-field select:focus,
body.barid .bs-wrap .bs-field textarea:focus{
border-color:var(--brand);
background-color:var(--card); box-shadow:var(--bs-ring);
}
/* القائمة المنسدلة: الإضافة ترسم السهم يسارًا (background-position:left .85rem)
لكنها تحجز فراغه بـpadding-inline-start:2.3rem — وفي RTL هذه هي جهة اليمين،
فالفراغ يُحجَز في جهة لا سهم فيها، ويبقى السهم داخل صندوق المحتوى بحشوة
13.6px فقط عن الحرف. قِسته: أطول خيار ("الإمارات العربية المتحدة" باسمها
اللاتيني) عرضه 304.8px في صندوق سعته 251px، فالنصّ وعلامة القصّ يُطبعان
فوق السهم. تُقلَب الجهتان هنا: نفس مجموع الحشوة، لكن الفراغ صار حيث السهم.
(.bs-wrap يفرض dir="rtl" في قالب الإضافة، فلا حالة LTR تنكسر.) */
body.barid .bs-wrap .bs-field select{
padding-inline-start:.85rem;
padding-inline-end:2.3rem;
}
/* حقل "من" معطّل لكنه يحمل معلومة تُقرأ — يبقى تباينه عاليًا */
body.barid .bs-wrap .bs-field input:disabled{
background-color:color-mix(in srgb,var(--ink) 5%,var(--surface));
color:var(--ink2); -webkit-text-fill-color:var(--ink2); opacity:1;
}
/* داخل صفوف الصناديق والأصناف تكون الخلفية سطحية، فتُقلب الحقول بيضاء لتبرز */
body.barid .bs-wrap .bs-row .bs-field input,
body.barid .bs-wrap .bs-row .bs-field select,
body.barid .bs-wrap .bs-row .bs-field textarea{background-color:var(--card)}
/* ---------- ٥ · الصفوف المكرّرة ---------- */
body.barid .bs-wrap .bs-row{
border:1px solid var(--line);
border-radius:var(--r-sm);
background-color:var(--surface);
}
body.barid .bs-wrap .bs-row:hover{border-color:var(--bs-hover-line)}
body.barid .bs-wrap .bs-row-n{
font-family:"Tajawal",sans-serif; font-weight:800; font-size:12.5px;
color:var(--bs-brand-text); background-color:color-mix(in srgb,var(--brand) 12%,transparent);
border-radius:var(--r-full); padding:5px 13px;
}
body.barid .bs-wrap .bs-row-calc{color:var(--muted); font-size:12.5px}
body.barid .bs-wrap .bs-remove{
width:32px; height:32px; padding:0; display:grid; place-items:center;
border-radius:var(--r-full); color:var(--muted); font-size:20px;
}
body.barid .bs-wrap .bs-remove:hover{background-color:var(--bs-err-bg); color:var(--bs-err)}
/* ---------- ٦ · الأزرار ---------- */
/* الإضافة ترفع أزرارها بـ `.bs-wrap .bs-form button.bs-*` لتغلب القالب،
فتُقابَل هنا بمرساة أعلى — لا !important. */
body.barid .bs-wrap .bs-form button.bs-add{
border:1.5px dashed color-mix(in srgb,var(--brand) 38%,var(--line));
background-color:var(--card); color:var(--bs-brand-text);
border-radius:var(--r-full);
font-family:"Tajawal",sans-serif; font-weight:700; font-size:14.5px;
padding:11px 22px;
}
body.barid .bs-wrap .bs-form button.bs-add:hover{
border-color:var(--brand);
background-color:color-mix(in srgb,var(--brand) 8%,var(--card));
color:var(--bs-brand-text);
}
body.barid .bs-wrap .bs-form button.bs-submit,
body.barid .bs-wrap .bs-form button.bs-bar-btn{
background:var(--grad); background-color:transparent;
color:var(--onBrand); border:0; border-radius:var(--r-full);
font-family:"Tajawal",sans-serif; font-weight:700;
padding:15px 22px;
box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 18%,transparent),
0 10px 22px -10px color-mix(in srgb,var(--brand) 60%,transparent);
}
body.barid .bs-wrap .bs-form button.bs-submit:hover:not(:disabled),
body.barid .bs-wrap .bs-form button.bs-bar-btn:hover:not(:disabled){
background:var(--grad); color:var(--onBrand); filter:none; transform:translateY(-2px);
box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 20%,transparent),
0 16px 30px -10px color-mix(in srgb,var(--brand) 60%,transparent);
}
body.barid .bs-wrap .bs-form button.bs-submit:disabled{opacity:.6; transform:none; box-shadow:none}
body.barid .bs-wrap .bs-submit-total{direction:ltr; unicode-bidi:isolate}
/* ---------- ٧ · لوحة الأسعار ---------- */
body.barid .bs-wrap .bs-price{
border:1px solid var(--line); border-radius:var(--r);
background-color:var(--card);
transition:border-color .18s, background-color .18s, box-shadow .18s;
}
body.barid .bs-wrap .bs-price:hover{border-color:var(--bs-hover-line); box-shadow:var(--sh-1)}
body.barid .bs-wrap .bs-price.is-on{
border-color:var(--brand);
background-color:var(--bs-tint);
box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent);
}
body.barid .bs-wrap .bs-price-label{
font-family:"Tajawal",sans-serif; font-weight:800; font-size:15px; color:var(--ink);
}
body.barid .bs-wrap .bs-price-eta{font-size:12.5px; color:var(--muted)}
/* السعر هو نتيجة الحاسبة — أكبر عنصر في اللوحة وبلون العلامة */
body.barid .bs-wrap .bs-price-amt{
font-family:"Tajawal",sans-serif; font-weight:900; font-size:26px;
color:var(--brand); line-height:1.15; direction:ltr; unicode-bidi:isolate;
}
body.barid .bs-wrap .bs-price-amt small{
font-size:12px; font-weight:600; color:var(--muted); margin-top:2px;
}
/* شارة "الأوفر" تجلس على حدّ البطاقة العلوي — line-height:1.15 يبقيها
بارتفاع يقلّ عن حشوة البطاقة فلا تركب على اسم الخدمة في الجوال. */
body.barid .bs-wrap .bs-badge{
border-radius:var(--r-full); padding:2px 10px; font-size:11px; line-height:1.15;
font-family:"Tajawal",sans-serif; font-weight:800; letter-spacing:normal;
background-color:color-mix(in srgb,var(--ok) 80%,var(--ink));
}
body.barid .bs-wrap .bs-x{
border-radius:var(--r-full); background-color:var(--surface);
border:1px solid var(--line); color:var(--muted); padding:2px 9px; font-size:11.5px;
}
body.barid .bs-wrap .bs-skeleton{
border-radius:var(--r);
background:linear-gradient(90deg, var(--surface) 25%,
color-mix(in srgb,var(--ink) 8%,var(--surface)) 37%, var(--surface) 63%);
background-size:400% 100%;
}
body.barid .bs-wrap .bs-hint{color:var(--muted); font-size:14px}
/* ---------- ٨ · الخيارات (مربّعات الاختيار) ---------- */
body.barid .bs-wrap .bs-check{
border:1px solid var(--line); border-radius:var(--r-sm);
background-color:var(--card); padding:14px 16px; gap:12px;
}
body.barid .bs-wrap .bs-check:hover{
border-color:var(--bs-hover-line);
background-color:color-mix(in srgb,var(--brand) 4%,var(--card));
}
body.barid .bs-wrap .bs-check:has(input:checked){border-color:var(--brand); background-color:var(--bs-tint)}
body.barid .bs-wrap .bs-check input{width:19px; height:19px; accent-color:var(--brand)}
body.barid .bs-wrap .bs-check-t b{font-family:"Tajawal",sans-serif; font-weight:700; color:var(--ink)}
body.barid .bs-wrap .bs-check-d{font-size:12.5px; color:var(--muted)}
/* السعر يُدفع إلى طرف السطر بتمدّد النص لا بهامش auto: الإضافة تستعمل
margin-inline-start:auto، وضبط direction:ltr على العنصر نفسه (اللازم لعرض
+$49.00 بترتيبه الصحيح) يقلب معنى inline-start فيرتدّ السعر إلى الجهة الخطأ. */
body.barid .bs-wrap .bs-check-t{flex:1 1 auto; min-width:0}
body.barid .bs-wrap .bs-check-p{
font-family:"Tajawal",sans-serif; font-weight:800; color:var(--bs-brand-text);
direction:ltr; unicode-bidi:isolate; margin-inline:0;
}
/* ---------- ٩ · الملاحظات والتنبيهات ---------- */
body.barid .bs-wrap .bs-note{color:var(--muted); font-size:13.5px}
body.barid .bs-wrap .bs-account{
border-radius:var(--r); padding:11px 16px; font-size:13.5px;
align-items:flex-start; color:var(--ink2);
background-color:color-mix(in srgb,var(--brand) 6%,var(--card));
border:1px solid var(--bs-tint-line);
}
body.barid .bs-wrap .bs-account a{color:var(--bs-brand-text)}
/* الوزن المحتسب — معلومة إيجابية، فتلبس لون العلامة */
body.barid .bs-wrap .bs-weight-note{
border-radius:var(--r-sm); padding:14px 16px; color:var(--ink);
background-color:var(--bs-tint); border:1px solid var(--bs-tint-line);
}
body.barid .bs-wrap .bs-weight-hint{color:var(--muted); font-size:12.5px}
/* تنبيهات لا تمنع المتابعة — أصفر الهوية الدافئ ونصّها بالحبر لا بالرمادي */
body.barid .bs-wrap .bs-estimated,
body.barid .bs-wrap .bs-warn-note,
body.barid .bs-wrap .bs-incomplete{
border-radius:var(--r-sm); padding:12px 16px; color:var(--ink);
background-color:var(--bs-warm-bg); border:1px solid var(--bs-warm-line);
}
/* حالات الخطأ — تبقى الأبرز في الصفحة */
body.barid .bs-wrap .bs-error,
body.barid .bs-wrap .bs-liquids-warn{
border-radius:var(--r-sm); padding:13px 16px; font-size:14px;
color:var(--bs-err);
background-color:var(--bs-err-bg);
border:1px solid var(--bs-err-line);
font-weight:600;
}
body.barid .bs-wrap .bs-req{color:var(--bs-err)}
/* ---------- ١٠ · رفع الصور ---------- */
body.barid .bs-wrap .bs-drop{
border:1.5px dashed color-mix(in srgb,var(--brand) 32%,var(--line));
border-radius:var(--r-sm); background-color:var(--surface);
}
body.barid .bs-wrap .bs-drop:hover,
body.barid .bs-wrap .bs-drop.is-over{border-color:var(--brand); background-color:var(--bs-tint)}
body.barid .bs-wrap .bs-drop-t{font-family:"Tajawal",sans-serif; font-weight:700; color:var(--ink)}
body.barid .bs-wrap .bs-drop-d{color:var(--muted); font-size:12.5px}
body.barid .bs-wrap .bs-thumb{border-radius:var(--r-sm); border-color:var(--line)}
body.barid .bs-wrap .bs-thumb button{background-color:var(--ink)}
/* ---------- ١١ · الإجمالي والذيول ---------- */
body.barid .bs-wrap .bs-total-row{
font-family:"Tajawal",sans-serif; font-weight:800;
border-top:1px dashed var(--line); padding-top:14px;
}
body.barid .bs-wrap .bs-items-total{color:var(--bs-brand-text); direction:ltr; unicode-bidi:isolate}
body.barid .bs-wrap .bs-terms,
body.barid .bs-wrap .bs-sla{color:var(--muted); font-size:12.5px}
body.barid .bs-wrap .bs-terms a{color:var(--bs-brand-text); text-decoration:underline; text-underline-offset:3px}
/* ---------- ١٢ · الشريط السفلي للجوال ---------- */
body.barid .bs-wrap .bs-bar{
background-color:color-mix(in srgb,var(--card) 92%,transparent);
backdrop-filter:blur(14px);
border-block-start:1px solid var(--line);
box-shadow:0 -6px 22px -12px color-mix(in srgb,var(--ink) 45%,transparent);
}
body.barid .bs-wrap .bs-bar-svc{color:var(--muted); font-size:12.5px}
/* align-self بدل text-align: العنصر بـ direction:ltr، فلو تُرك ممدّدًا
لالتصق رقمه بالطرف الخطأ داخل الشريط المقلوب. */
body.barid .bs-wrap .bs-bar-amt{
font-family:"Tajawal",sans-serif; font-weight:900; color:var(--bs-brand-text);
direction:ltr; unicode-bidi:isolate; align-self:flex-start;
}
/* ---------- ١٣ · الإتاحة: تركيز ظاهر على كل عنصر تفاعلي ---------- */
body.barid .bs-wrap :is(input,select,textarea,button,a,[tabindex]):focus-visible{
outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);
outline-offset:2px;
}
/* زرّ الاختيار داخل بطاقة السعر مخفي بصريًا — تُرسم حلقة التركيز على البطاقة */
body.barid .bs-wrap .bs-price:has(input:focus-visible){
outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);
outline-offset:2px; border-color:var(--brand);
}
/* ---------- ١٤ · الجوال: أنصاف أقطار أهدأ وصفر تجاوز أفقي ---------- */
@media (max-width:900px){
body.barid .bs-wrap .bs-card{border-radius:var(--r); padding:18px 16px}
body.barid .bs-wrap .bs-h{font-size:17px}
body.barid .bs-wrap .bs-price-amt{font-size:23px}
/* زرّ أسترا "إلى الأعلى" يقف عند 30px من الأسفل، والشريط السفلي للحاسبة
(z-index 9998 مقابل 99) يغطّيه فيصير غير قابل للنقر. يُرفع فوقه ما دام
الشريط ظاهرًا فقط — bs-has-bar تضعها الإضافة على body عند ظهوره. */
body.barid.bs-has-bar #ast-scroll-top{inset-block-end:96px}
}
@media (max-width:560px){
body.barid .bs-wrap .bs-account{border-radius:var(--r-sm); font-size:13px}
body.barid .bs-wrap .bs-sub{margin-top:20px}
body.barid .bs-wrap .bs-form button.bs-submit{padding:14px 16px; font-size:15px}
/* السعر ووصف الخدمة على سطر واحد ضيّق — يُمنع أي منهما من مدّ البطاقة */
body.barid .bs-wrap .bs-price-body{min-width:0}
body.barid .bs-wrap .bs-price-label,
body.barid .bs-wrap .bs-price-eta{overflow-wrap:anywhere}
}
/* ═══════════════════════════════════════════════════════════════
لوحة العملاء — إكساء مخرَج إضافة barid-warehouse
───────────────────────────────────────────────────────────────
طبقة مظهر فقط. لم يُلمس أي ملف من ملفات الإضافة، وحذف هذه الكتلة
يُرجع اللوحة إلى شكلها الأصلي كما تشحنه الإضافة بالضبط.
المدخل الأول ليس التغليب بل متغيّرا الإضافة نفسها: bw-front.css
يعرّف --bw-brand (كحلي داكن) و--bw-accent (أصفر) على كل حاوية عليا،
ويبني عليهما عشرات القواعد. إعادة تعريفهما هنا تُلوّن اللوحة كلها
دفعة واحدة بلا مصادمة أسبقية ولا !important.
barid.css يُحمَّل بعد bw-front.css (أولوية ٢٠ مقابل ١٠)، فالبادئة
body.barid وحدها تكفي للتغليب. !important لا تظهر إلا حيث تفرض
الإضافة الخاصية بـ!important بدورها — وكل موضع منها موثّق بسببه.
═══════════════════════════════════════════════════════════════ */
/* ── ١ · جسر المتغيّرات ───────────────────────────────────────── */
body.barid .bw-ship,
body.barid .bw-addr,
body.barid .bw-reqform,
body.barid .bw-home,
body.barid .bw-empty,
body.barid .bw-errors,
body.barid .bw-ok,
body.barid .bw-how{
--bw-brand:var(--ink);
--bw-accent:var(--warm);
/* الخطّان من القالب أصلًا: تجوال للعناوين وPlex للمتن. */
font-family:inherit;
}
/* ── ١·أ · تصحيح مراجعة: نبرة العلامة حين تحمل نصًّا ──────────────
--brand (#4B6BFF) يعطي ٤٫٣٣:١ مع الأبيض — تحت عتبة AA لنصّ عادي.
الإضافة كانت تستعمل نبرة أغمق (--bw-brand-d = #3B5BEF) في كل موضع
يحمل فيه اللونُ نصًّا، وإحلال --brand محلّها أنزل التباين تحت العتبة
(قِيس: «عرض الكل» في .bw-filter ٣٫٩٧:١، و.bw-btn ٤٫٣٣:١).
هذا الرمز يعيد النبرة الأغمق (≈٥٫٣:١ مع الأبيض) حيث يلامس اللونُ نصًّا،
ويترك --brand كما هو للحدود وحلقات التركيز والتظليل — فلا يتغيّر
إحساس اللوحة، ويتغيّر التباين وحده. */
body.barid{--bw-brand-aa:color-mix(in srgb,var(--brand) 86%,var(--ink))}
/* لاتينية الأكواد وأرقام التتبّع: صوت الموقع اللاتيني نفسه، بأرقام جدولية. */
body.barid .bw-item-code,
body.barid .bw-code,
body.barid .bw-addr-code,
body.barid .bw-home-code{
font-family:"Plus Jakarta Sans","IBM Plex Sans Arabic",ui-monospace,Menlo,monospace;
font-variant-numeric:tabular-nums lining;
letter-spacing:.01em;
unicode-bidi:isolate;
}
/* الرماديات في الإضافة (#6b7a90 وأخواته) تحت ٤٫٥:١ على الأبيض.
--muted يرفعها فوق العتبة ويوحّدها مع بقية الموقع. */
body.barid .bw-muted,
body.barid .bw-facts span,
body.barid .bw-pick-label,
body.barid .bw-f small,
body.barid .bw-opt small,
body.barid .bw-home-stat span,
body.barid .bw-tl-step,
body.barid .bw-review-where{color:var(--muted)}
/* .bw-help a يفرض لونه بـ!important في الإضافة، فلا سبيل لرفع تباينه إلا بمثله. */
body.barid .bw-help a{color:var(--muted)!important}
body.barid .bw-help a:hover{color:var(--bw-brand-aa)!important}
body.barid .bw-help{border-top-color:var(--line)}
/* ── ٢ · إطار اللوحة ─────────────────────────────────────────── */
body.barid .bw-ship,
body.barid .bw-addr,
body.barid .bw-reqform,
body.barid .bw-home{margin-inline:auto; max-width:960px}
/* ── ٣ · رأس اللوحة — شريط الهوية بدل السطر العاري ───────────── */
body.barid .bw-ship-top{
position:relative; overflow:hidden;
background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 70%,var(--brand3) 190%);
color:#fff;
border-radius:var(--r-xl);
padding:24px 26px;
margin-bottom:22px;
box-shadow:var(--sh-2);
}
/* وهج خافت يكسر مسطّح اللون — زخرفي بحت ولا يعترض النقر. */
body.barid .bw-ship-top::after{
content:""; position:absolute; inset-inline-end:-70px; top:-90px;
width:240px; height:240px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle,color-mix(in srgb,var(--brand) 60%,transparent),transparent 68%);
}
body.barid .bw-ship-top > *{position:relative; z-index:1}
body.barid .bw-ship-top h2{color:#fff; font-size:clamp(21px,2.4vw,27px); margin:0 0 6px}
body.barid .bw-ship-top .bw-muted{color:rgba(255,255,255,.76)}
/* كود العميل داخل الرأس — بطاقة دافئة كما في المعاينة (.code-pill). */
body.barid .bw-ship-top .bw-muted strong{
display:inline-block;
background:color-mix(in srgb,var(--warm) 20%,transparent);
border:1px dashed color-mix(in srgb,var(--warm) 46%,transparent);
color:var(--warm);
padding:2px 11px; border-radius:var(--r-xs);
font-family:"Plus Jakarta Sans",ui-monospace,monospace;
font-variant-numeric:tabular-nums lining;
margin-inline-start:4px;
}
body.barid .bw-ship-top .bw-total{
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.26);
color:#fff;
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700; font-size:13.5px;
padding:8px 18px; border-radius:var(--r-full);
white-space:nowrap;
}
/* ── ٤ · بطاقة الشحنة / الطلب ────────────────────────────────── */
body.barid .bw-item{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
padding:20px 22px;
margin-bottom:16px;
transition:border-color .2s, box-shadow .2s, transform .2s cubic-bezier(.2,.8,.3,1);
}
body.barid .bw-item:hover{
border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
box-shadow:var(--sh-2);
}
body.barid .bw-item.is-selected{
border-color:var(--brand);
background:color-mix(in srgb,var(--brand) 5%,var(--card));
box-shadow:0 0 0 1px var(--brand), var(--sh-1);
}
body.barid .bw-item-head{
border-bottom:1px solid var(--line);
padding-bottom:13px; margin-bottom:15px;
}
body.barid .bw-item-head > div{
display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; min-width:0;
}
body.barid .bw-item-code{color:var(--ink); font-weight:800; font-size:15.5px}
/* السطر المجاور للكود يحمل اسم المتجر في بطاقة الشحنة، والتاريخ في بطاقة
الطلب — كلاهما لاتيني بلا dir في مخرَج الإضافة. داخل الحاوية العربية
ينفصل الرقم المتصدّر عن بقيته فيُقلب: «12 Aug 2026» ظهر «Aug 2026 12».
plaintext يستمدّ الاتجاه من أول حرف قويّ، فيصحّ اللاتيني ويبقى العربي
عربيًّا لو كان اسم المتجر بالعربية. */
body.barid .bw-item-head .bw-muted{unicode-bidi:plaintext}
/* شارة الحالة: لونها يأتي inline من إعدادات الإضافة ويحمل معنى الحالة، فلا
يُستبدل — والألوان السبعة الافتراضية كلها فوق العتبة مع الأبيض (قِيست:
٥٫٠٢:١ أدناها «تم الشحن»، و٧٫٩:١ أعلاها). كانت هنا طبقة حبر ١٦٪ عبر
background-image: أزيلت لأنها لم تكن تعمل أصلًا — الإضافة تطبع
style="background:#…" بالاختصار، والاختصار يصفّر background-image
من داخل السطر فيغلب أي ورقة أنماط بلا !important. الحلقة البيضاء
الداخلية أدناه هي ما كان يفصل الشارة عن البطاقة فعلًا، وتبقى. */
body.barid .bw-badge{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700; font-size:13px;
padding:6px 15px; border-radius:var(--r-full);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
/* شبكة الحقائق */
body.barid .bw-facts > div{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-sm);
padding:11px 13px;
min-width:0;
}
body.barid .bw-facts span{font-size:12.5px; font-weight:600}
body.barid .bw-facts strong{
color:var(--ink); font-size:14.5px; font-weight:700;
font-variant-numeric:tabular-nums lining;
/* رقم تتبّع طويل داخل عمود ١٣٠ بكسل كان يمدّ الصفحة على الجوال. */
overflow-wrap:anywhere;
}
/* معرض الصور */
body.barid .bw-gallery a{
border:1px solid var(--line); border-radius:var(--r-sm);
transition:border-color .2s, box-shadow .2s;
}
body.barid .bw-gallery a:hover{border-color:var(--brand); box-shadow:var(--sh-1)}
/* ── ٥ · تأشير الشحنات وشريط الاختيار ────────────────────────── */
body.barid .bw-pick-lead,
body.barid .bw-filter{
background:color-mix(in srgb,var(--brand) 7%,var(--card));
border:1px solid color-mix(in srgb,var(--brand) 18%,var(--line));
border-radius:var(--r-sm);
color:var(--ink);
padding:12px 16px;
}
body.barid .bw-filter a{color:var(--bw-brand-aa); font-weight:700} /* مراجعة: كان ٣٫٩٧:١ */
body.barid .bw-pick-box{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
padding-block:5px; padding-inline:10px 13px; /* منطقي لا يمين/يسار — الموقع RTL */
}
body.barid .bw-item.is-selected .bw-pick-box{
background:color-mix(in srgb,var(--brand) 12%,transparent);
border-color:color-mix(in srgb,var(--brand) 40%,transparent);
}
body.barid .bw-pick-box input,
body.barid .bw-opt input{accent-color:var(--brand)}
body.barid .bw-pick-label{font-size:13px}
body.barid .bw-selbar{
background:linear-gradient(135deg,var(--ink),var(--ink2));
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-lg);
box-shadow:var(--sh-2);
padding:14px 20px;
/* زرّ «عُد للأعلى» في أسترا ثابت أسفل الحافة بـz-index:99، والشريط
اللاصق 5 — فكان يغطّي طرف «اطلب شحنها» على ٣٧٥ بكسل. الشريط لا يظهر
إلا وقد اختار العميل شحنة، وهو حينها أولى بالنقر من سهم الصعود. */
z-index:100;
}
body.barid .bw-selbar-txt b{color:var(--warm)}
/* ── ٦ · الأزرار ─────────────────────────────────────────────── */
body.barid .bw-btn{
background:var(--bw-brand-aa); /* مراجعة: كان var(--brand) — ٤٫٣٣:١ مع الأبيض */
border-radius:var(--r-full);
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700; font-size:15px;
padding:12px 26px;
box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 18%,transparent),
0 8px 18px -10px color-mix(in srgb,var(--brand) 55%,transparent);
transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s, box-shadow .18s;
}
body.barid .bw-btn:hover{
/* ٧٠٪ لا ٨٦٪: صار الأساس نفسه ٨٦٪، فالتحويم يحتاج فرقًا محسوسًا. */
background:color-mix(in srgb,var(--brand) 70%,var(--ink));
transform:translateY(-2px);
}
/* داخل الشريط الداكن الزرّ الأبيض أوضح من زرقاء فوق كحلي. */
body.barid .bw-selbar .bw-btn{
background:#fff; color:var(--ink)!important; /* الإضافة تفرض color:#fff!important على .bw-btn */
box-shadow:0 6px 18px -8px rgba(0,0,0,.5);
}
body.barid .bw-selbar .bw-btn:hover{background:var(--warm)}
/* .bw-btn-ghost تفرض لونها بـ!important في الإضافة.
وحدُّها كان يختفي أصلًا: .bw-btn{border:0} تأتي بعدها في bw-front.css
بالأسبقية نفسها فتغلبها، فيبدو زرّ «رجوع» نصًّا عاريًا. نعيده زرًّا. */
body.barid .bw-btn-ghost{
border:1px solid var(--line);
color:var(--ink)!important;
box-shadow:none;
}
body.barid .bw-btn-ghost:hover{
border-color:var(--brand);
background:color-mix(in srgb,var(--brand) 8%,transparent)!important; /* الإضافة: background:transparent!important */
color:var(--bw-brand-aa)!important; /* مراجعة: نصّ على تظليل فاتح */
}
/* زرّ «نسخ العنوان كاملًا» يحمل الصنفين bw-btn bw-copy معًا. الإضافة أفردت
له قاعدة .bw-btn.bw-copy تُعيده إلى مقاس زرّ كامل (تعليقها يقول ذلك
صراحة)، لكن body.barid .bw-copy أعلى أسبقية منها فألغتها، فعاد الزرّ
قرصًا ارتفاعه ٢٧ بكسل بخطّ ١٢ — دون حدّ اللمس ٤٤ بكسل. نُعيده زرًّا. */
body.barid .bw-btn.bw-copy{
font-size:14.5px;
padding:12px 26px;
border:0; /* الإضافة تفرض color:#fff!important، فالخلفية لازمة داكنة */
background:var(--bw-brand-aa);
box-shadow:none;
}
body.barid .bw-btn.bw-copy:hover{
background:color-mix(in srgb,var(--brand) 70%,var(--ink));
transform:none;
}
/* حالة «نُسخ»: أخضر --ok وحده يعطي ٣٫٤:١ مع الأبيض المفروض، فيُعتَم. */
body.barid .bw-btn.bw-copy.is-done{
background:color-mix(in srgb,var(--ok) 78%,var(--ink));
border:0;
}
body.barid .bw-copy{
border:1px solid var(--line);
border-radius:var(--r-full);
color:var(--ink);
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700; font-size:12px;
padding:4px 12px;
transition:border-color .18s, background .18s, color .18s;
}
body.barid .bw-copy:hover{
border-color:var(--brand); color:var(--bw-brand-aa); /* مراجعة: نصّ ١٢ بكسل */
background:color-mix(in srgb,var(--brand) 8%,transparent);
}
body.barid .bw-copy.is-done{
background:color-mix(in srgb,var(--ok) 12%,transparent);
border-color:color-mix(in srgb,var(--ok) 45%,transparent);
color:var(--ok);
}
body.barid .bw-pager a{
border:1px solid var(--line);
border-radius:var(--r-full);
color:var(--ink);
font-weight:700;
padding:8px 14px;
transition:border-color .18s, color .18s, background .18s;
}
body.barid .bw-pager a:hover{border-color:var(--brand); color:var(--bw-brand-aa)}
body.barid .bw-pager a.is-current{
background:var(--bw-brand-aa); border-color:var(--bw-brand-aa); color:var(--onBrand);
}
/* ── ٧ · الحالة الفارغة — ودودة لا كئيبة ─────────────────────── */
body.barid .bw-empty{
background:var(--card);
border:1px dashed color-mix(in srgb,var(--brand) 34%,var(--line));
border-radius:var(--r-xl);
color:var(--ink);
padding:38px 24px;
box-shadow:var(--sh-1);
}
body.barid .bw-empty::before{
content:""; display:block; width:60px; height:60px; margin:0 auto 16px;
border-radius:var(--r-lg);
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8a2 2 0 0 1-1 1.73l-7 4a2 2 0 0 1-2 0l-7-4A2 2 0 0 1 3 16V8a2 2 0 0 1 1-1.73l7-4a2 2 0 0 1 2 0l7 4A2 2 0 0 1 21 8z'/%3E%3Cpath d='m3.3 7 8.7 5 8.7-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")
no-repeat center/30px 30px,
linear-gradient(135deg,var(--brand),var(--brand3));
box-shadow:0 12px 26px -14px var(--brand);
}
body.barid .bw-empty p:first-of-type strong{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-size:18px; color:var(--ink);
}
body.barid .bw-empty p{color:var(--muted); max-width:46ch; margin-inline:auto}
body.barid .bw-empty p strong{color:var(--ink)}
/* ── ٨ · الرسائل: نجاح وخطأ وملاحظة ─────────────────────────── */
body.barid .bw-ok,
body.barid .bw-errors,
body.barid .bw-note{border-radius:var(--r-lg)}
body.barid .bw-ok{
background:color-mix(in srgb,var(--ok) 10%,var(--card));
border-color:color-mix(in srgb,var(--ok) 34%,transparent);
border-inline-start:4px solid var(--ok);
color:color-mix(in srgb,var(--ok) 55%,var(--ink));
}
body.barid .bw-ok strong{font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif}
/* الخطأ يبقى الأبرز على الشاشة — لا يُخفَّف لصالح الهوية. */
body.barid .bw-errors{
background:#FDECEA;
border-color:#F0B4AE;
border-inline-start:4px solid #C2410C;
color:#7A2620;
box-shadow:var(--sh-1);
}
body.barid .bw-note{
background:color-mix(in srgb,var(--warm) 16%,var(--card));
border-color:color-mix(in srgb,var(--warm) 52%,transparent);
border-inline-start:4px solid var(--warm);
}
body.barid .bw-note strong{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
color:var(--ink); font-size:13.5px;
}
body.barid .bw-note p{color:var(--ink)}
/* ── ٩ · السجلّ الزمني للطلب — نقاط على خطّ ──────────────────── */
body.barid .bw-timeline{gap:14px; margin-top:16px}
body.barid .bw-tl-step{position:relative; align-items:center}
body.barid .bw-tl-step i{
width:26px; height:26px;
background:var(--surface);
border:1px solid var(--line);
color:var(--muted);
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
z-index:1;
}
body.barid .bw-tl-step.is-done{color:var(--ink)}
body.barid .bw-tl-step.is-done i{
background:var(--bw-brand-aa); border-color:var(--bw-brand-aa); color:var(--onBrand);
box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%,transparent);
}
/* الخطّ الواصل: يبدأ أسفل النقطة وينتهي عند التي تليها.
inset-inline-start:12px = منتصف نقطة ٢٦ بكسل، فيصحّ في RTL وLTR معًا. */
body.barid .bw-tl-step:not(:last-child)::before{
content:""; position:absolute;
inset-inline-start:12px;
top:calc(50% + 13px); height:14px; width:2px;
background:var(--line);
}
body.barid .bw-tl-step.is-done:not(:last-child)::before{
background:color-mix(in srgb,var(--brand) 55%,var(--line));
}
/* ── ١٠ · نموذج طلب الشحن ────────────────────────────────────── */
body.barid .bw-fbox{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
padding:20px 22px;
}
body.barid .bw-fbox h3{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-size:17px; color:var(--ink);
}
body.barid .bw-f > span{color:var(--ink2); font-size:13.5px}
body.barid .bw-f .req{color:#C2410C}
/*
* حقول النموذج: الإضافة تفرض كل خصائصها بـ!important (تعليقها يشرح السبب:
* أنماط الموقع كانت تفرض ارتفاعات وهوامش على كل input). لا سبيل لتغليبها
* إلا بـ!important مقابل — ومحصورة في خصائص المظهر وحدها.
*/
body.barid .bw-f input,
body.barid .bw-fbox textarea{
border:1px solid var(--line)!important;
border-radius:var(--r-sm)!important;
background:var(--surface)!important;
color:var(--ink)!important;
font-family:inherit;
font-size:15px!important;
padding:12px 15px!important;
}
body.barid .bw-f input:hover,
body.barid .bw-fbox textarea:hover{border-color:color-mix(in srgb,var(--ink) 26%,var(--line))!important}
/* النصّ الإرشادي رمادي المتصفّح الافتراضي — باهت على خلفية --surface.
opacity:1 لازمة لأن فَيرفُكس يخفّف اللون افتراضيًا. */
body.barid .bw-f input::placeholder,
body.barid .bw-fbox textarea::placeholder,
body.barid .bw-review-form input::placeholder,
body.barid .bw-review-form textarea::placeholder{
color:var(--muted); /* ٥٫٢:١ على --surface؛ المُدخَل نفسه --ink فيبقى أوضح منه */
opacity:1;
}
body.barid .bw-f input:focus,
body.barid .bw-fbox textarea:focus{
border-color:var(--brand)!important;
background:var(--card)!important;
box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent)!important;
}
/* الحقل المميّز (العنوان الوطني) يبقى مميّزًا، بدفء الهوية بدل الأصفر الفاقع. */
body.barid .bw-f-hint input{
border-color:color-mix(in srgb,var(--warm) 70%,var(--ink))!important;
background:color-mix(in srgb,var(--warm) 13%,var(--card))!important;
}
body.barid .bw-f-hint input:focus{
border-color:var(--brand)!important;
background:var(--card)!important;
}
body.barid .bw-opt{
border:1px solid var(--line);
border-radius:var(--r-sm);
padding:12px 14px;
transition:border-color .18s, background .18s;
}
body.barid .bw-opt:hover{border-color:color-mix(in srgb,var(--brand) 35%,var(--line))}
body.barid .bw-opt:has(input:checked){
border-color:var(--brand);
background:color-mix(in srgb,var(--brand) 6%,transparent);
}
body.barid .bw-opt b{color:var(--ink); font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif}
body.barid .bw-chip{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
color:var(--ink);
padding:7px 14px;
}
body.barid .bw-chip b{color:var(--ink)}
body.barid .bw-chip.is-total{
background:var(--ink); border-color:var(--ink); color:#fff;
}
body.barid .bw-chip.is-total b{color:var(--warm)}
/* ── ١١ · بطاقة العنوان الأمريكي ─────────────────────────────── */
body.barid .bw-addr,
body.barid .bw-home-addr,
body.barid .bw-home-stat{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
}
body.barid .bw-addr{padding:24px}
body.barid .bw-addr-head h3,
body.barid .bw-home-addr h3{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
color:var(--ink); font-size:20px;
}
body.barid .bw-addr-code{
background:color-mix(in srgb,var(--warm) 28%,transparent);
border:1px solid color-mix(in srgb,var(--warm) 60%,transparent);
color:var(--ink);
border-radius:var(--r-xs);
padding:6px 15px;
}
body.barid .bw-addr-warn{
background:color-mix(in srgb,var(--warm) 15%,var(--card));
border:1px solid color-mix(in srgb,var(--warm) 48%,transparent);
border-inline-start:4px solid var(--warm);
border-radius:var(--r-sm);
color:var(--ink);
padding:12px 16px;
}
body.barid .bw-addr-warn strong{color:var(--ink)}
body.barid .bw-addr-table th,
body.barid .bw-addr-table td{
border-bottom:1px solid var(--line);
padding:11px 14px;
}
body.barid .bw-addr-table th{
background:var(--surface);
color:var(--muted);
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700;
}
body.barid .bw-addr-table td{
color:var(--ink);
/* عناوين أمريكية طويلة بلا مسافات كانت تدفع الجدول خارج البطاقة. */
overflow-wrap:anywhere;
}
body.barid .bw-addr-table tr:last-child th,
body.barid .bw-addr-table tr:last-child td{border-bottom:0}
/* ── ١٢ · رئيسية الحساب (قالب ووكومرس من الإضافة) ────────────── */
body.barid .bw-home-hero{
position:relative; overflow:hidden;
background:linear-gradient(135deg,var(--ink) 0%,var(--ink2) 70%,var(--brand3) 190%);
border-radius:var(--r-xl);
box-shadow:var(--sh-2);
padding:24px 26px;
}
body.barid .bw-home-hero::after{
content:""; position:absolute; inset-inline-end:-70px; top:-90px;
width:240px; height:240px; border-radius:50%; pointer-events:none;
background:radial-gradient(circle,color-mix(in srgb,var(--brand) 60%,transparent),transparent 68%);
}
body.barid .bw-home-hero > *{position:relative; z-index:1}
body.barid .bw-home-who strong{font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif; font-size:21px}
body.barid .bw-home-code{
background:color-mix(in srgb,var(--warm) 22%,transparent);
border:1px dashed color-mix(in srgb,var(--warm) 50%,transparent);
color:var(--warm);
border-radius:var(--r-sm);
font-size:19px;
}
body.barid .bw-home-stat{padding:16px 18px}
body.barid .bw-home-stat b{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
color:var(--brand); font-size:27px;
}
body.barid .bw-home-next{
background:color-mix(in srgb,var(--warm) 16%,var(--card));
border:1px solid color-mix(in srgb,var(--warm) 52%,transparent);
border-inline-start:4px solid var(--warm);
border-radius:var(--r-lg);
padding:18px 20px;
}
body.barid .bw-home-next strong{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
color:var(--ink); font-size:15.5px;
}
body.barid .bw-home-next p{color:var(--ink)}
body.barid .bw-home-addr{padding:22px}
/* ── ١٣ · الشريط الجانبي لحساب ووكومرس ──────────────────────────
القائمة الجانبية من ووكومرس لا من الإضافة، وتظهر على /my-account/
وحدها. الشبكة تحلّ محلّ التعويم الافتراضي فتصمد في RTL بلا قلب يدوي،
ولو غابت ووكومرس فلا محدِّد هنا يطابق شيئًا. */
body.barid .woocommerce-account .woocommerce{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:24px;
}
@media (min-width:1000px){
body.barid .woocommerce-account .woocommerce{grid-template-columns:264px minmax(0,1fr)}
}
body.barid .woocommerce-MyAccount-navigation,
body.barid .woocommerce-MyAccount-content{width:auto; float:none; margin:0; min-width:0}
body.barid .woocommerce-MyAccount-navigation{
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
padding:10px;
align-self:start;
}
body.barid .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0}
body.barid .woocommerce-MyAccount-navigation li{margin:0; border:0}
body.barid .woocommerce-MyAccount-navigation li a{
display:block;
padding:11px 16px;
border-radius:var(--r-sm);
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:700; font-size:15px;
color:var(--ink);
text-decoration:none;
transition:background .18s, color .18s;
}
body.barid .woocommerce-MyAccount-navigation li a:hover{
background:color-mix(in srgb,var(--brand) 10%,transparent);
color:var(--bw-brand-aa);
}
body.barid .woocommerce-MyAccount-navigation li.is-active > a{
background:var(--bw-brand-aa);
color:var(--onBrand);
box-shadow:0 6px 16px -10px var(--brand);
}
/* ── ١٤ · آراء العملاء ──────────────────────────────────────── */
body.barid .bw-reviews{max-width:var(--maxw)}
body.barid .bw-reviews-title{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
font-weight:800; color:var(--ink);
font-size:clamp(24px,3.2vw,34px);
}
body.barid .bw-review{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--sh-1);
transition:border-color .2s, box-shadow .2s;
}
body.barid .bw-review:hover{
border-color:color-mix(in srgb,var(--brand) 38%,var(--line));
box-shadow:var(--sh-2);
}
/* أسترا تزيّن كل blockquote بحدّ يساري فيزيائي وحشوة جانبية — في نصّ عربي
يقع الحدّ في نهاية السطر لا بدايته. تُلغى داخل بطاقة الرأي وحدها. */
body.barid .bw-review blockquote{
color:var(--ink); font-size:15.5px;
border:0; padding-inline:0;
}
body.barid .bw-review blockquote::before{color:color-mix(in srgb,var(--brand) 45%,transparent)}
body.barid .bw-review figcaption{border-top-color:var(--line)}
body.barid .bw-review-who{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif; color:var(--ink);
}
body.barid .bw-review-ok{
background:color-mix(in srgb,var(--ok) 12%,transparent);
color:color-mix(in srgb,var(--ok) 70%,var(--ink));
border-radius:var(--r-full);
}
body.barid .bw-review-form label{
font-family:"Tajawal","IBM Plex Sans Arabic",sans-serif;
color:var(--ink2); font-size:13.5px;
}
body.barid .bw-review-form input[type=text],
body.barid .bw-review-form select,
body.barid .bw-review-form textarea{
border:1px solid var(--line);
border-radius:var(--r-sm);
background:var(--surface);
color:var(--ink);
font-family:inherit; font-size:15px;
padding:12px 15px;
/* أسترا تفرض height:40px على كل حقل. مع حشوة ١٢ يبقى للمحتوى ١٤ بكسل،
فتُقصّ نجوم select من أسفلها (رُئي فعلًا). auto + min-height تعيد
الحقول إلى ٤٨ بكسل، وهو ارتفاع حقول نموذج الطلب نفسه. */
height:auto;
min-height:48px;
}
body.barid .bw-review-form textarea{min-height:110px}
body.barid .bw-review-form input[type=text]:focus,
body.barid .bw-review-form select:focus,
body.barid .bw-review-form textarea:focus{
border-color:var(--brand);
background:var(--card);
box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 13%,transparent);
}
body.barid .bw-review-note{
background:color-mix(in srgb,var(--brand) 8%,var(--card));
border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));
border-radius:var(--r-lg);
color:var(--ink);
}
body.barid .bw-review-ok-note{
background:color-mix(in srgb,var(--ok) 11%,var(--card));
border-color:color-mix(in srgb,var(--ok) 34%,transparent);
color:color-mix(in srgb,var(--ok) 55%,var(--ink));
}
/* ── ١٥ · إتاحة: حلقة تركيز ظاهرة على كل عنصر تفاعلي ─────────── */
/* قاعدة القالب العامة تستعمل :where() بأسبقية صفر، و.bw-f input:focus
تُطفئ الحدّ بـoutline:none!important — فتضيع الحلقة على حقول النموذج.
هذه تعيدها، ولا مفرّ من !important لأن ما تُلغيه مكتوب بها. */
body.barid .bw-f input:focus-visible,
body.barid .bw-fbox textarea:focus-visible{
outline:2px solid var(--brand)!important;
outline-offset:3px!important;
}
body.barid .bw-btn:focus-visible,
body.barid .bw-btn-ghost:focus-visible,
body.barid .bw-copy:focus-visible,
body.barid .bw-pager a:focus-visible,
body.barid .bw-help a:focus-visible,
body.barid .bw-gallery a:focus-visible,
body.barid .bw-pick-box input:focus-visible,
body.barid .bw-opt input:focus-visible,
body.barid .bw-review-form input:focus-visible,
body.barid .bw-review-form select:focus-visible,
body.barid .bw-review-form textarea:focus-visible,
body.barid .woocommerce-MyAccount-navigation li a:focus-visible,
body.barid .bw-hdr-link:focus-visible{
outline:2px solid var(--brand);
outline-offset:3px;
}
/* فوق الخلفيات الداكنة تختفي الحلقة الزرقاء، فتصير بيضاء. */
body.barid .bw-selbar .bw-btn:focus-visible,
body.barid .bw-ship-top a:focus-visible,
body.barid .bw-home-hero a:focus-visible,
body.barid .bw-hdr-btn:focus-visible,
body.barid .woocommerce-MyAccount-navigation li.is-active > a:focus-visible{
outline:2px solid #fff;
outline-offset:3px;
box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 55%,transparent);
}
/* المعرض يفتح صورة بالنقر — يبقى قابلًا للتركيز ويُغلق بـEsc (سكربت الإضافة). */
body.barid .bw-lightbox{background:color-mix(in srgb,var(--ink) 92%,transparent)}
/* ── ١٦ · الجوال: صفر تجاوز أفقي عند ٣٧٥ بكسل ───────────────── */
@media (max-width:600px){
body.barid .bw-ship-top{padding:20px; border-radius:var(--r-lg)}
body.barid .bw-ship-top .bw-total{align-self:flex-start}
body.barid .bw-item{padding:16px}
/* space-between مع الالتفاف كان يرمي الشارة يمينًا مرة ويسارًا أخرى
بحسب طول الكود. عمود واحد يجعل موضعها ثابتًا في كل البطاقات. */
body.barid .bw-item-head{flex-direction:column; align-items:flex-start; gap:11px}
body.barid .bw-addr,
body.barid .bw-fbox,
body.barid .bw-home-addr{padding:16px}
body.barid .bw-empty{padding:30px 18px}
body.barid .bw-btn{width:100%; text-align:center}
body.barid .bw-selbar .bw-btn{width:auto}
body.barid .bw-facts{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
}
/* جدول العنوان: ثلاثة أعمدة نصّية لاتينية داخل ٣٧٥ بكسل تفيض حتمًا.
يُفكّ إلى أسطر: الاسم اللاتيني عنوانًا فوق قيمته. لا شيء يُخفى. */
@media (max-width:560px){
body.barid .bw-addr-table,
body.barid .bw-addr-table tbody,
body.barid .bw-addr-table tr,
body.barid .bw-addr-table th,
body.barid .bw-addr-table td{display:block; width:auto}
body.barid .bw-addr-table tr{
border:1px solid var(--line);
border-radius:var(--r-sm);
margin-bottom:10px;
overflow:hidden;
}
body.barid .bw-addr-table th{
border-bottom:1px solid var(--line);
font-size:12.5px;
padding:8px 14px;
}
body.barid .bw-addr-table td{border-bottom:0; padding:12px 14px}
body.barid .bw-addr-table tr:last-child{margin-bottom:0}
/* زرّ «نسخ» يقف وحده على سطره هنا، وارتفاعه ٢٢ بكسل — دون ٢٤ التي
يشترطها WCAG 2.5.8 لهدف اللمس. حشوة رأسية أكبر ترفعه إلى ٣٠. */
body.barid .bw-copy{display:inline-block; margin-top:8px; margin-inline-start:0; padding-block:8px}
}
/* ═══════════════════════════════════════════════════════════════
عناوين الأقسام الداكنة — إصلاح حرِج
───────────────────────────────────────────────────────────────
أسترا تحقن على الموقع الحيّ:
h1..h6, .entry-content :where(h1..h6){color:var(--ast-global-color-2)} /* #1E293B */
والقاعدة الصريحة تهزم الوراثة، فسقط عنوانا «أوريغون» و«الدعوة» إلى
حبر داكن على خلفية داكنة — تباين 1.26:1 و1.11:1، أي غير مقروءين.
المعاينة خالية من أي قاعدة لون للعناوين فيرثان الأبيض فيها، فالعيب
حيّ فقط. العلاج تصريح مماثل لا وراثة.
═══════════════════════════════════════════════════════════════ */
body.barid .oregon h1, body.barid .oregon h2, body.barid .oregon h3,
body.barid .cta h1, body.barid .cta h2, body.barid .cta h3,
body.barid .counters h1, body.barid .counters h2, body.barid .counters h3,
body.barid .dk h1, body.barid .dk h2, body.barid .dk h3, body.barid .dk h4,
body.barid .belt h2, body.barid .lblband h2, body.barid .dash-head h3,
body.barid .entry-content .oregon h2, body.barid .entry-content .cta h2,
body.barid .entry-content .dk h2, body.barid .entry-content .dk h3{color:#fff}
/* والنصّ الثانوي داخلها يبقى فاتحًا لا رماديًا داكنًا */
body.barid .oregon p, body.barid .cta p, body.barid .dk p{color:rgba(255,255,255,.78)}
/* زرّ قائمة الجوال كان 28×28 — أقلّ من حدّ اللمس المريح */
@media (max-width:921px){
body.barid .ast-mobile-menu-trigger-minimal,
body.barid .menu-toggle,
body.barid .ekit_menu_responsive .ekit-menu-hamburger{
min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* ═══════════════════════════════════════════════════════════════
علامات المتاجر والناقلين — معالجة نصّية مقصودة
───────────────────────────────────────────────────────────────
ما دامت ملفات الشعارات غير مرفوعة، تُعرض الأسماء بمعالجة طباعية
متماسكة: خطّ لاتيني عريض بتقارب حروف مضبوط ولون حبر كامل التباين —
فتقرأ كعلامات مصمَّمة لا كنصّ بديل لصورة ناقصة.
وحين تُرفع الصور ويُفعَّل `barid_use_brand_images` تحلّ محلّها تلقائيًا.
═══════════════════════════════════════════════════════════════ */
body.barid .blogo b{
font-family:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
font-weight:800;
font-size:16.5px;
letter-spacing:-.035em;
/* كان #7C7F8D — تباين 3.98:1 دون المعيار. الحبر يرفعه فوق 12:1 */
color:var(--ink,#0B1230);
white-space:nowrap;
line-height:1;
display:block;
}
/* شريط الشعارات المتحرك: بطاقات متساوية تقرأ كصفّ علامات */
body.barid .mq .btile{
min-width:132px;
padding:14px 20px;
background:var(--card,#fff);
border:1px solid var(--line,#E4E6F0);
border-radius:14px;
box-shadow:0 1px 2px rgba(11,18,48,.04);
transition:border-color .2s, transform .2s, box-shadow .2s;
}
body.barid .mq .btile:hover{
border-color:color-mix(in srgb, var(--brand,#4B6BFF) 42%, var(--line,#E4E6F0));
box-shadow:0 8px 20px rgba(75,107,255,.12);
}
body.barid .mq .btile:hover .blogo b{color:var(--brand,#4B6BFF)}
/* الناقلون: أبرز قليلًا — هم دليل ثقة */
body.barid .carriers .blogo b{font-size:18px;letter-spacing:-.04em}
/* بطاقة المتجر في الشبكة */
body.barid .store-card .blogo{
height:auto;
margin-bottom:10px;
min-height:26px;
align-items:flex-start;
justify-content:flex-start;
}
body.barid .store-card .blogo b{font-size:19px;letter-spacing:-.04em}
body.barid .store-card:hover .blogo b{color:var(--brand,#4B6BFF)}
@media (max-width:600px){
body.barid .mq .btile{min-width:112px;padding:12px 16px}
body.barid .blogo b{font-size:15px}
}
/* ═══════════════════════════════════════════════════════════════
تناسق الجوال — أحجام نصّ ومساحات لمس
───────────────────────────────────────────────────────────────
على 375 بكسل قِيست نصوص عند 11.5–12.5px وأزرار بارتفاع 31–32px.
المريح للقراءة العربية ≥ 13px، ولمس مريح ≥ 40px. تُرفع على الجوال
وحده فلا يتغيّر تناسب الكمبيوتر.
═══════════════════════════════════════════════════════════════ */
@media (max-width:600px){
/* نصوص المساعدة والتنويهات — في القالب وفي حاسبة الإضافة معًا */
body.barid small,
body.barid .bs-h-note, body.barid .bs-weight-hint, body.barid .bs-check-d,
body.barid .bs-warn-note, body.barid .bs-drop-d, body.barid .bs-note,
body.barid .bw-hint, body.barid .bw-muted,
body.barid .bs-terms, body.barid .bs-sla, body.barid .dash-url,
body.barid .oregon-note, body.barid .frame-cap, body.barid .disclaim{
font-size:13.5px!important;line-height:1.75}
/* أهداف اللمس */
body.barid .copy,
body.barid .bs-remove,
body.barid .bs-add{min-width:40px;min-height:40px;
display:inline-flex;align-items:center;justify-content:center}
/* الشرائح والوسوم تتنفّس */
body.barid .chip, body.barid .tag, body.barid .code-pill{
font-size:13px;padding-block:7px}
/* الأرقام المتحركة: أربعة في عمودين لا صفّ مضغوط */
body.barid .counters-grid{grid-template-columns:1fr 1fr;gap:8px}
body.barid .ct b{font-size:34px}
body.barid .ct > span{font-size:13.5px}
}