/* ============================================================
   فون الأردن — نظام التصميم v11 «الهوية الحية + حركة موقّرة»
   ورق دافئ + هوية زرقاء جريئة + عنبري للأزرار الرئيسية
   عناوين وأرقام Alexandria فوق نص Tajawal
   مسطّح بالكامل: بدون تدرجات. الحركة تفاعلية فقط (hover /
   ضغط / فتح / تعبئة أشرطة البيانات) وسريعة ≤350ms — بدون
   حركات دخول للمحتوى ولا عدّادات ولا زخارف متحركة.
   الأخضر للسعر، الأحمر لشارة «جديد»، الكهرماني للمستعمل
   وأزرار CTA — كل لون له وظيفة.
   ============================================================ */

:root{
  /* الأسطح — أبيض دافئ بدل الرمادي البارد */
  --bg:#f6f5f2; --card:#ffffff; --card-2:#f4f2ec; --photo:#ffffff;
  --border:#e2ded4; --border-soft:#edeae1;
  /* الحبر */
  --text:#182234; --muted:#5c6a7e; --muted-2:#8a929d;
  /* الأزرق الملكي — اللون الأساسي */
  --accent:#1252c9; --accent-hover:#0d43ab; --accent-ink:#ffffff; --accent-soft:#eaf1fd;
  /* ألوان الحالة (وظيفية) */
  --price:#0f7c3d;
  --green:#0f7c3d; --green-soft:#eaf5ee; --green-border:#cde7d8;
  --red:#c92a2a; --red-soft:#fdefee; --red-border:#f2d8d5;
  --amber:#8a6a00; --amber-soft:#faf3de; --amber-border:#eadfb8;
  /* الهوية الثابتة (نفسها بالوضعين) */
  --brand:#1252c9; --brand-dark:#0c3f9d;
  --sun:#f0a614; --sun-hover:#dd970c; --sun-ink:#241a05;
  --navy:#101c33; --jo-red:#ce1126;
  /* الظلال (للعناصر العائمة والبارزة فقط) والزوايا */
  --shadow:0 1px 2px rgba(23,32,60,.05);
  --shadow-md:0 4px 14px rgba(23,32,60,.09);
  --shadow-lg:0 8px 28px rgba(23,32,60,.16);
  --radius:8px; --radius-s:6px;
  --row:#faf9f5;
  --font-head:'Alexandria','Tajawal',system-ui,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#131417; --card:#1b1d21; --card-2:#24262b; --photo:#ffffff;
  --border:#33363d; --border-soft:#282a30;
  --text:#e9eaec; --muted:#9aa4b1; --muted-2:#6d7683;
  --accent:#7aa5f2; --accent-hover:#93b6f5; --accent-ink:#10141d; --accent-soft:rgba(122,165,242,.12);
  --price:#4fc07d;
  --green:#4fc07d; --green-soft:rgba(79,192,125,.1); --green-border:rgba(79,192,125,.3);
  --red:#e0605c; --red-soft:rgba(224,96,92,.1); --red-border:rgba(224,96,92,.3);
  --amber:#d9ab3d; --amber-soft:rgba(217,171,61,.1); --amber-border:rgba(217,171,61,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 8px 28px rgba(0,0,0,.5);
  --row:#1f2126;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --bg:#131417; --card:#1b1d21; --card-2:#24262b; --photo:#ffffff;
    --border:#33363d; --border-soft:#282a30;
    --text:#e9eaec; --muted:#9aa4b1; --muted-2:#6d7683;
    --accent:#7aa5f2; --accent-hover:#93b6f5; --accent-ink:#10141d; --accent-soft:rgba(122,165,242,.12);
    --price:#4fc07d;
    --green:#4fc07d; --green-soft:rgba(79,192,125,.1); --green-border:rgba(79,192,125,.3);
    --red:#e0605c; --red-soft:rgba(224,96,92,.1); --red-border:rgba(224,96,92,.3);
    --amber:#d9ab3d; --amber-soft:rgba(217,171,61,.1); --amber-border:rgba(217,171,61,.3);
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 4px 14px rgba(0,0,0,.4);
    --shadow-lg:0 8px 28px rgba(0,0,0,.5);
    --row:#1f2126;
  }
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none!important}
body{
  font-family:'Tajawal',system-ui,sans-serif; background:var(--bg); color:var(--text);
  min-height:100vh; line-height:1.8; font-size:15px;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{flex:1 0 auto}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
button,input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent); color:var(--accent-ink)}

.container{max-width:1150px; margin:0 auto; padding:0 18px}
.skip-link{position:absolute; top:-60px; right:16px; background:var(--accent); color:var(--accent-ink); padding:8px 16px; border-radius:6px; z-index:200}
.skip-link:focus{top:12px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ============================================================
   نظام الأيقونات — SVG بقناع currentColor (بدون أي ملفات خارجية)
   ============================================================ */
.ic{
  display:inline-block; width:15px; height:15px; flex:0 0 auto;
  background:currentColor; vertical-align:-2.5px; margin-inline-end:6px;
  -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat;
}
.ic-chip{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Crect x='9' y='9' width='6' height='6'/%3E%3Cpath d='M9 1v3M15 1v3M9 20v3M15 20v3M1 9h3M1 15h3M20 9h3M20 15h3'/%3E%3C/svg%3E")}
.ic-battery{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M23 10v4'/%3E%3Cpath d='M6 10v4M10 10v4'/%3E%3C/svg%3E")}
.ic-camera{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E")}
.ic-screen{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
.ic-bolt{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E")}
.ic-info{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E")}
.ic-search{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")}
.ic-grid{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E")}
.ic-list{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13'/%3E%3Cpath d='M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E")}
.ic-game{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4'/%3E%3Cpath d='M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E")}
.ic-wallet{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12V7H5a2 2 0 0 1 0-4h14v4'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h16v-5'/%3E%3Cpath d='M18 12a2 2 0 0 0 0 4h4v-4Z'/%3E%3C/svg%3E")}
.ic-home{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E")}

/* ============================================================
   الهيدر — الشريط الأزرق الوحيد بالموقع
   ============================================================ */
header.site{background:var(--brand)}
.nav{display:flex; align-items:center; gap:14px; padding:10px 0}
.logo{font-family:var(--font-head); font-size:20px; font-weight:800; color:#fff; white-space:nowrap; display:flex; align-items:center; gap:9px}
.logo:hover{text-decoration:none}
.logo b{color:#fff; font-weight:800}
.logo-mark{width:30px; height:30px; border-radius:7px; background:#fff; color:var(--brand); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.badge-jo{background:var(--jo-red); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:.4px; margin-inline-start:2px; font-family:var(--font-head)}
.nav-links{display:flex; gap:1px; margin-inline-start:8px}
.nav-links a{color:rgba(255,255,255,.85); font-size:13.5px; font-weight:500; padding:7px 12px; border-radius:var(--radius-s)}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.12); text-decoration:none}
.nav-spacer{flex:1}
.nav-search{flex:0 1 240px; min-width:130px; position:relative}
.nav-search input{width:100%; padding:8px 12px; border-radius:var(--radius-s); border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.13); color:#fff; font-size:13px; outline:none; transition:background .12s, border-color .12s}
.nav-search input::placeholder{color:rgba(255,255,255,.6)}
.nav-search input:focus{background:#fff; color:#1c2330; border-color:#fff}
.nav-search input:focus::placeholder{color:#8a929d}
.nav-note{color:rgba(255,255,255,.6); font-size:12px; white-space:nowrap}
.theme-btn{
  width:36px; height:36px; border-radius:var(--radius-s); border:1px solid rgba(255,255,255,.38);
  background:transparent; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  transition:background .12s;
}
.theme-btn:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7)}
.theme-btn svg{width:17px; height:17px}
.theme-btn .icon-sun{display:none}
:root[data-theme="dark"] .theme-btn .icon-moon{display:none}
:root[data-theme="dark"] .theme-btn .icon-sun{display:block}
@media(max-width:640px){
  .nav-links,.nav-note{display:none}
  .logo{font-size:17px}
  .nav{gap:10px}
  .nav-search{flex:1 1 auto; min-width:0}
  input[type="search"], select.chip, .cmp-select{font-size:16px}
}

/* نتائج البحث الفورية (منسدلة الهيدر) */
.nav-ac{
  position:absolute; top:calc(100% + 6px); inset-inline-end:0; width:100%; min-width:290px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-s);
  box-shadow:var(--shadow-md); z-index:120; max-height:340px; overflow-y:auto; text-align:right;
}
.nav-ac a{display:flex; align-items:center; gap:10px; padding:8px 12px; color:var(--text); font-size:13px; line-height:1.6; border-bottom:1px solid var(--border-soft)}
.nav-ac a:last-child{border-bottom:0}
.nav-ac a:hover, .nav-ac a.sel{background:var(--accent-soft); text-decoration:none}
.nav-ac .ac-nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.nav-ac .ac-pr{color:var(--price); font-weight:700; font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.nav-ac .ac-all{color:var(--accent); font-weight:600; justify-content:center; font-size:12.5px}
@media(max-width:640px){ .nav-ac{min-width:0} }

/* شريط الماركات — الطبقة الثانية من الهوية الزرقاء */
.brandsbar{background:var(--brand-dark)}
.brandsbar .container{display:flex; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.brandsbar .container::-webkit-scrollbar{display:none}
.brandsbar a{color:rgba(255,255,255,.78); font-size:13px; font-weight:500; padding:9px 12px; white-space:nowrap; border-bottom:2px solid transparent; transition:color .12s, border-color .12s; display:inline-flex; align-items:center}
.brandsbar a:hover{color:#fff; text-decoration:none; border-bottom-color:var(--sun)}

/* ============================================================
   رأس الرئيسية — لافتة الهوية الزرقاء مع بحث بارز
   ============================================================ */
.page-head{background:var(--brand); padding:32px 0 28px; position:relative}
/* أجهزة حقيقية واقفة على حافة اللافتة — بلاطات بيضاء (روابط لصفحاتها) */
.hero-devices{position:absolute; bottom:0; inset-inline-end:max(calc((100% - 1150px)/2 + 18px), 18px); display:flex; align-items:flex-end; gap:12px; z-index:1}
.hero-devices a{
  display:flex; align-items:flex-end; justify-content:center;
  width:102px; height:126px; padding:9px 10px 10px; background:#fff; border-radius:8px 8px 0 0;
  box-shadow:0 8px 24px rgba(6,20,56,.28); transition:transform .2s, box-shadow .2s;
}
.hero-devices a:hover{transform:translateY(-4px); box-shadow:0 12px 30px rgba(6,20,56,.34)}
.hero-devices img{max-height:107px; max-width:80px; width:auto; object-fit:contain}
.hero-devices a:nth-child(2){width:112px; height:150px}
.hero-devices a:nth-child(2) img{max-height:131px; max-width:88px}
@media(max-width:1080px){ .hero-devices{display:none} }
.page-head h1{font-size:clamp(22px,3.4vw,30px); font-weight:800; line-height:1.6; color:#fff}
.page-head h1 em{font-style:normal; border-bottom:5px solid var(--sun); padding-bottom:2px}
.page-head .sub{color:rgba(255,255,255,.88); margin-top:9px; font-size:14.5px; max-width:700px}
.searchbox{display:flex; align-items:stretch; max-width:640px; margin-top:20px; border-radius:var(--radius-s); background:#fff; overflow:hidden; box-shadow:0 10px 28px rgba(6,20,56,.22)}
.searchbox:focus-within{box-shadow:0 0 0 3px rgba(255,255,255,.32), 0 10px 28px rgba(6,20,56,.22)}
.searchbox .s-ic{display:flex; align-items:center; padding-inline-start:15px; color:#8a929d}
.searchbox .s-ic .ic{margin:0; width:16px; height:16px}
.searchbox input{
  flex:1; min-width:0; padding:13px 12px; font-size:15px;
  border:none; background:transparent; color:#182234; outline:none;
}
.searchbox input::placeholder{color:#8a929d}
.searchbox button{
  border:none; background:var(--sun); color:var(--sun-ink); font-weight:800;
  font-family:var(--font-head); font-size:14.5px; padding:0 28px; cursor:pointer; transition:background .12s;
}
.searchbox button:hover{background:var(--sun-hover)}
.meta-line{color:rgba(255,255,255,.65); font-size:12.5px; margin-top:14px}
/* ============================================================
   صف «أفضل هاتف حسب ميزانيتك» — اختيارات حقيقية بصور الأجهزة
   ============================================================ */
.picks-sec{margin-top:22px}
.sec-more{margin-inline-start:auto; font-size:12.5px; font-weight:700; color:var(--accent); white-space:nowrap}
.picks-row{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.pick{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 10px 12px; display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:7px; color:var(--text); box-shadow:var(--shadow); transition:border-color .15s, box-shadow .2s, transform .2s;
}
.pick:hover{text-decoration:none; border-color:var(--accent); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.pick:hover img{transform:scale(1.03)}
.pick .pk-range{font-size:11.5px; font-weight:700; color:var(--accent)}
.pick img{height:84px; width:auto; object-fit:contain; transition:transform .3s ease}
.pick .ph{width:22px; height:34px; margin:25px 0}
.pick b{font-size:12.5px; line-height:1.5; font-weight:700}
.pick .pk-price{color:var(--price); font-family:var(--font-head); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums; margin-top:auto}
@media(max-width:860px){
  .picks-row{display:flex; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .picks-row::-webkit-scrollbar{display:none}
  .pick{flex:0 0 148px}
}

/* ============================================================
   بلاطات الميزات — ألوان الهوية المسطّحة (أزرق/أخضر/عنبري)
   نفس ألوان الموقع الثابتة بالوضعين، وكل بلاطة رابط لميزة حقيقية
   ============================================================ */
.promo-row{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:16px 0 0}
.promo{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 17px; border-radius:var(--radius); color:#fff; background:var(--brand);
  box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s;
}
.promo:hover{text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow-md)}
.promo .pr-txt{min-width:0}
.promo .pr-txt b{display:block; font-family:var(--font-head); font-size:15.5px; font-weight:800; line-height:1.55; color:inherit}
.promo .pr-txt small{display:block; font-size:11.5px; opacity:.85; margin-top:3px; line-height:1.65}
.promo .pr-ph{flex:0 0 auto; width:52px; height:68px; background:#fff; border-radius:6px; display:flex; align-items:center; justify-content:center; gap:4px}
.promo .pr-ph img{max-height:58px; max-width:42px; width:auto; object-fit:contain}
.promo .pr-ph.pr-two{width:82px}
.promo .pr-ph.pr-two img{max-width:32px; max-height:52px}
.promo.p-green{background:#0f7c3d}
.promo.p-sun{background:var(--sun); color:var(--sun-ink)}
.promo.p-sun .pr-txt small{opacity:.72}
@media(max-width:900px){ .promo-row{grid-template-columns:1fr; gap:8px} .promo{padding:13px 15px} }

/* مُطلق المقارنة السريع — منتقي بصري بتفتحه بلاطة «قارن قبل ما تشتري» */
.cmp-launch{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin:10px 0 0; display:flex; flex-direction:column; gap:11px;
  box-shadow:var(--shadow); scroll-margin-top:80px;
}
.cl-top{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cmp-launch .cl-lbl{font-weight:700; font-size:13.5px}
.cl-search{
  flex:1 1 220px; min-width:0; max-width:340px; border:1px solid var(--border); background:var(--card);
  color:var(--text); border-radius:var(--radius-s); padding:8px 12px; font-size:13px;
}
.cl-search:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.cl-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(106px,1fr)); gap:8px;
  max-height:292px; overflow-y:auto; padding:2px;
}
.cl-tile{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius-s);
  padding:9px 6px 8px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  font-family:inherit; transition:border-color .12s, box-shadow .15s;
}
.cl-tile:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.cl-tile img{height:56px; width:auto; object-fit:contain}
.cl-tile .cl-noimg{height:56px; width:30px; border:2px solid #d5dae1; border-radius:6px}
.cl-tile b{font-size:10.5px; line-height:1.45; color:#1c2330; font-weight:700}
.cl-tile > span{font-size:10.5px; color:#0f7c3d; font-weight:800; font-family:var(--font-head); font-variant-numeric:tabular-nums}
.cl-tile.on{border-color:var(--green); box-shadow:0 0 0 2px var(--green-border)}
.cl-tile.on::after{
  content:'✓'; position:absolute; top:5px; inset-inline-start:5px; width:18px; height:18px;
  border-radius:50%; background:var(--green); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.cl-none{color:var(--muted); font-size:13px; padding:14px; grid-column:1/-1}
.cl-picked{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cl-pick{
  display:inline-flex; align-items:center; gap:7px; background:var(--green-soft);
  border:1px solid var(--green-border); color:var(--text); border-radius:var(--radius-s);
  padding:4px 9px; font-size:12.5px; font-weight:700;
}
.cl-pick img{height:26px; width:auto; background:#fff; border-radius:3px; padding:1px}
.cl-x{border:none; background:none; color:var(--red); cursor:pointer; font-size:16px; line-height:1; padding:0 2px}
.cl-more{color:var(--muted-2); font-size:12px}
.cl-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cl-actions .btn{flex:0 0 auto}
.cl-actions .btn[disabled]{opacity:.5; cursor:default}
.cl-hint{color:var(--red); font-size:12.5px; font-weight:600; display:none}
.cl-hint.show{display:block}

/* ============================================================
   حزام «الأعلى بمؤشر الأداء» — لوحة كحلية بكروت بيضاء
   ============================================================ */
.band-top{background:var(--navy); border-top:3px solid var(--sun); border-radius:var(--radius); padding:18px 20px 20px; margin:26px 0 22px}
.bt-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.bt-head h2{color:#fff; font-size:18px; font-weight:800; display:flex; align-items:center; gap:10px; line-height:1.5}
.bt-head h2::before{content:''; width:22px; height:4px; border-radius:2px; background:var(--sun); flex:0 0 auto}
.bt-head a{color:#a9c6ff; font-size:12.5px; font-weight:700; white-space:nowrap}
.bt-head a:hover{color:#fff}
.bt-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.bt-row::-webkit-scrollbar{display:none}
.bt-card{
  flex:0 0 132px; background:#fff; border-radius:var(--radius-s); padding:10px 10px 11px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; position:relative;
  transition:transform .2s, box-shadow .2s;
}
.bt-card:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.35)}
.bt-rank{
  position:absolute; top:8px; inset-inline-start:8px; width:22px; height:22px; border-radius:5px;
  background:var(--sun); color:var(--sun-ink); font-family:var(--font-head); font-weight:800; font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.bt-ph{height:74px; display:flex; align-items:center}
.bt-ph img{max-height:74px; max-width:60px; width:auto; object-fit:contain}
.bt-card b{font-size:12px; line-height:1.5; color:#1c2330; font-weight:700; min-height:36px; display:block}
.bt-meta{display:flex; align-items:center; gap:6px; margin-top:auto}
.bt-score{background:#eaf5ee; color:#0f7c3d; font-size:10.5px; font-weight:800; padding:1px 7px; border-radius:4px; font-family:var(--font-head); font-variant-numeric:tabular-nums}
.bt-price{color:#0f7c3d; font-family:var(--font-head); font-weight:800; font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}

/* ============================================================
   معالج «مش عارف شو تختار؟»
   ============================================================ */
.wizard{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin:16px 0 0; overflow:hidden; box-shadow:var(--shadow)}
.wizard summary{padding:13px 18px; cursor:pointer; font-size:14.5px; color:var(--text); list-style:none; position:relative; padding-inline-end:42px}
.wizard summary::-webkit-details-marker{display:none}
.wizard summary b{color:var(--accent)}
.wizard summary::after{content:'+'; position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:20px}
.wizard[open] summary::after{content:'−'}
.wizard[open] summary{border-bottom:1px solid var(--border-soft)}
.wiz-body{padding:16px 18px 14px}
.wiz-q{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.wiz-lbl{font-weight:700; font-size:13.5px; color:var(--text); white-space:nowrap}
.wiz-opts{display:flex; gap:7px; flex-wrap:wrap}
.wiz-opts button{border:1px solid var(--border); background:var(--card); color:var(--muted); padding:6px 15px; border-radius:var(--radius-s); cursor:pointer; font-size:13px; font-weight:600; transition:border-color .12s, color .12s, background .12s}
.wiz-opts button .ic{width:14px; height:14px; vertical-align:-2.5px}
.wiz-opts button:hover{border-color:var(--muted-2); color:var(--text)}
.wiz-opts button.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.wiz-results{margin-top:4px}
.wiz-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); gap:10px}
.wiz-card{display:flex; gap:12px; align-items:center; background:var(--photo); border:1px solid var(--border); border-radius:var(--radius-s); padding:12px 14px; transition:border-color .12s}
.wiz-card:hover{text-decoration:none; border-color:var(--accent)}
.wiz-card img{height:64px; width:auto; object-fit:contain; flex:0 0 auto}
.wc-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.wiz-card b{font-size:13px; line-height:1.55; color:#1c2330}
.wc-why{color:#5a6472; font-size:11.5px; line-height:1.7}
.wc-price{font-family:var(--font-head); color:#0f7c3d; font-weight:800; font-size:14px}
.wiz-hint{color:var(--muted-2); font-size:12px; margin-top:13px}

/* «شاهدتها مؤخراً» */
.recent-row{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:16px 0 -4px; font-size:13px}
.recent-row .lbl{color:var(--muted-2); font-size:12.5px}
.recent-row a{background:var(--card); border:1px solid var(--border); color:var(--muted); padding:3px 12px; border-radius:var(--radius-s); font-size:12.5px; transition:border-color .12s, color .12s; display:inline-flex; align-items:center; gap:7px}
.recent-row a:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.recent-row .rc-ph{width:20px; height:26px; background:#fff; border:1px solid var(--border-soft); border-radius:3px;
  display:flex; align-items:center; justify-content:center; margin-inline-start:-7px; flex:0 0 auto}
.recent-row .rc-ph img{max-height:22px; max-width:16px; width:auto; object-fit:contain}

/* ============================================================
   شريط الفلاتر
   ============================================================ */
.toolbar{
  position:sticky; top:0; z-index:40; background:var(--card);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius);
  margin:18px 0 14px; box-shadow:var(--shadow);
}
.brand-chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  border:1px solid var(--border); background:var(--card); color:var(--muted);
  padding:6px 13px; border-radius:var(--radius-s); cursor:pointer;
  font-size:13.5px; font-weight:500; white-space:nowrap; display:inline-flex; align-items:center;
  transition:border-color .12s, color .12s, background .12s;
}
.chip:hover{border-color:var(--muted-2); color:var(--text)}
.chip.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
select.chip{appearance:none; color:var(--text); padding-inline-end:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a929d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 11px center}

/* مبدّل طريقة العرض: شبكة / قائمة */
.view-seg{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-s); overflow:hidden; flex:0 0 auto}
.view-seg button{border:none; background:var(--card); color:var(--muted-2); width:36px; height:33px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:background .12s, color .12s}
.view-seg button + button{border-inline-start:1px solid var(--border)}
.view-seg button:hover{color:var(--text)}
.view-seg button.on{background:var(--accent-soft); color:var(--accent)}
.view-seg .ic{margin:0; width:15px; height:15px}

/* عدّاد النتائج داخل شريط الفلاتر (صفحات الماركات) */
.count-inline{color:var(--muted); font-size:13px; font-weight:600; margin-inline-end:auto}

/* زرا «فلاتر أكثر» و«المفضلة» مع شارة العدد */
.chip-fav, .chip-adv{gap:6px}
.chip-fav svg{width:14px; height:14px; flex:0 0 auto}
.chip-fav.active svg{fill:currentColor}
.fav-n, .adv-n{
  min-width:17px; height:17px; padding:0 5px; border-radius:9px;
  background:var(--accent); color:var(--accent-ink); font-size:10.5px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.chip.active .fav-n, .chip.active .adv-n{background:var(--accent-ink); color:var(--accent)}

/* لوحة «فلاتر أكثر» */
.adv-filters{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin:-6px 0 14px;
  display:flex; flex-direction:column; gap:10px;
}
.adv-group{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.adv-lbl{font-weight:700; font-size:12.5px; color:var(--muted); min-width:82px}
.adv-opts{display:flex; gap:6px; flex-wrap:wrap}
.adv-opts button{
  border:1px solid var(--border); background:var(--card); color:var(--muted);
  padding:5px 12px; border-radius:var(--radius-s); cursor:pointer; font-size:12.5px; font-weight:600;
  transition:border-color .12s, color .12s, background .12s;
}
.adv-opts button:hover{border-color:var(--muted-2); color:var(--text)}
.adv-opts button.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.adv-price{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.adv-price input{
  width:92px; padding:6px 9px; border:1px solid var(--border); border-radius:var(--radius-s);
  background:var(--card); color:var(--text); font-size:13px; font-variant-numeric:tabular-nums;
}
.adv-price input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
.adv-price span{color:var(--muted-2); font-size:12.5px}
.adv-reset{
  align-self:flex-start; border:none; background:none; color:var(--muted-2);
  font-size:12px; font-weight:600; cursor:pointer; padding:2px 0; text-decoration:underline;
}
.adv-reset:hover{color:var(--red)}
@media(max-width:640px){
  .adv-group{flex-direction:column; align-items:flex-start; gap:6px}
  .adv-lbl{min-width:0}
}

.simple-toggle{display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; border:1px solid var(--border); border-radius:var(--radius-s); padding:4px 13px 4px 10px; background:var(--card); margin-inline-start:auto; transition:border-color .12s}
.simple-toggle:hover{border-color:var(--muted-2)}
.simple-toggle .sw{width:34px; height:19px; border-radius:19px; background:var(--border); position:relative; flex:0 0 auto; transition:background .15s}
.simple-toggle .sw::after{content:''; position:absolute; top:2.5px; right:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:right .15s; box-shadow:0 1px 2px rgba(0,0,0,.25)}
.simple-toggle.on .sw{background:var(--green)}
.simple-toggle.on .sw::after{right:17px}
.simple-toggle .lbl{font-size:12.5px; font-weight:700; line-height:1.35; color:var(--text)}
.simple-toggle small{color:var(--muted-2); font-weight:400; font-size:10.5px; display:block}

@media(max-width:640px){
  .toolbar{position:static}
  .simple-toggle{margin-inline-start:0}
  .chip{padding:8px 14px}
  .brand-chips{width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .brand-chips::-webkit-scrollbar{display:none}
}

.count{color:var(--muted-2); font-size:12.5px; margin-bottom:12px}

/* ============================================================
   كروت الأجهزة
   ============================================================ */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:16px; padding-bottom:44px; scroll-margin-top:70px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .15s, box-shadow .2s, transform .2s;
}
.card:hover{border-color:var(--muted-2); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.card:hover .thumb img{transform:scale(1.04)}
.card.hidden{display:none}

.thumb{height:170px; background:var(--photo); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden}
.thumb:hover{text-decoration:none}
.thumb img{max-height:142px; width:auto; object-fit:contain; display:block; transition:transform .3s ease}
.thumb .brandmark{font-weight:700; font-size:17px; color:#98a0ac; letter-spacing:.5px; direction:ltr; font-family:var(--font-head)}
.badge-new{position:absolute; top:10px; right:10px; z-index:2; background:var(--jo-red); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px}
.badge-value{position:absolute; top:10px; left:10px; z-index:2; background:var(--green); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px}
:root[data-theme="dark"] .badge-value{color:#0c2517}

.card-body{padding:11px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:26px}
.eyebrow{color:var(--muted-2); font-size:11px; font-weight:600; letter-spacing:.2px}
.fav{
  width:30px; height:30px; flex:0 0 auto; border:1px solid var(--border); border-radius:50%;
  background:var(--card); color:var(--muted-2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
  transition:color .12s, border-color .12s, background .12s;
}
.fav:hover{color:var(--red); border-color:var(--red)}
.fav.on{color:#fff; background:var(--red); border-color:var(--red)}
.fav.on svg{fill:currentColor}
:root[data-theme="dark"] .fav.on{color:#1b1d21}
.card h3{font-size:14.5px; font-weight:700; line-height:1.55; margin-top:-2px}
.card h3 a{color:var(--text)}
.card h3 a:hover{color:var(--accent); text-decoration:none}
.card .en{color:var(--muted-2); font-size:11px; direction:ltr; text-align:right; margin-top:-4px}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.price{font-family:var(--font-head); font-variant-numeric:tabular-nums; font-size:20px; font-weight:800; color:var(--price)}
.price small{font-family:'Tajawal'; font-size:11.5px; color:var(--muted); font-weight:400}
.used-chip{background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--amber); font-size:11px; font-weight:700; padding:2px 8px; border-radius:4px; white-space:nowrap}

/* مواصفات مصغّرة بأيقونات — شبكة 2×2 */
.specs-mini{display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; padding:9px 0 2px; border-top:1px solid var(--border-soft); align-items:start}
.specs-mini span{display:flex; align-items:flex-start; font-size:11.5px; line-height:1.55; color:var(--muted); min-width:0}
.specs-mini .ic{width:13.5px; height:13.5px; color:var(--muted-2); margin-inline-end:5px; margin-top:2.5px}
.specs-mini.simple{display:none}
.specs-mini.simple span{color:var(--green)}
.specs-mini.simple .ic{color:var(--green)}
body.simple-mode .specs-mini.simple{display:grid}
body.simple-mode .specs-mini.tech{display:none}

.score-label{font-size:11px; color:var(--muted-2); display:flex; justify-content:space-between; margin-top:2px; font-variant-numeric:tabular-nums}
.scorebar{height:5px; background:var(--card-2); border-radius:3px; overflow:hidden}
.scorebar i{display:block; height:100%; border-radius:3px; background:var(--accent)}
/* لون الشريط حسب المستوى — أخضر قوي / أزرق متوسط / كهرماني منخفض */
.scorebar i.hi,.rt-bar i.hi{background:var(--green)}
.scorebar i.mid,.rt-bar i.mid{background:var(--accent)}
.scorebar i.lo,.rt-bar i.lo{background:#dfa63a}

.card-actions{display:flex; gap:7px; margin-top:auto; padding-top:9px}
.card-actions .btn{white-space:nowrap; padding-inline:10px}
.card-actions .btn:not(.primary){flex:0 1 auto}
.btn{
  flex:1; padding:8px 13px; border-radius:var(--radius-s); border:1px solid var(--border);
  background:var(--card); color:var(--text); cursor:pointer;
  font-size:13.5px; font-weight:600; text-align:center; display:inline-block;
  transition:background .12s, border-color .12s, color .12s;
}
.btn:hover{background:var(--card-2); border-color:var(--muted-2); text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn.selected{background:var(--green); border-color:var(--green); color:#fff; font-weight:700}
:root[data-theme="dark"] .btn.selected{color:#0c2517}
.btn.osq{border-color:#8fcbe4; color:#00749f; background:#f0f9fd; font-weight:700}
.btn.osq:hover{background:#e3f3fa; border-color:#5fb6da}
:root[data-theme="dark"] .btn.osq{color:#54bde8; border-color:rgba(84,189,232,.35); background:rgba(84,189,232,.08)}
:root[data-theme="dark"] .btn.osq:hover{background:rgba(84,189,232,.14)}
.btn.wa{background:#1faa55; border-color:#1faa55; color:#fff; font-weight:700}
.btn.wa:hover{background:#178f46; border-color:#178f46; color:#fff}
.btn.wa svg{width:15px; height:15px; vertical-align:-2.5px; margin-inline-end:6px}
.btn.fav-lg.on{background:var(--red-soft); border-color:var(--red-border); color:var(--red); font-weight:700}

.empty{text-align:center; color:var(--muted); padding:60px 0; font-size:15px}

@media(max-width:520px){
  .grid{grid-template-columns:1fr 1fr; gap:10px}
  .thumb{height:132px}
  .thumb img{max-height:108px}
  .card-body{padding:10px 11px 12px}
  .card h3{font-size:13px}
  .price{font-size:17px}
  .specs-mini{grid-template-columns:1fr}
  .card-actions{flex-direction:column}
}

/* ============================================================
   عرض «قائمة الأسعار» — نفس الكروت بصفوف مضغوطة
   ============================================================ */
body.list-mode .grid.listable{display:flex; flex-direction:column; gap:8px}
body.list-mode .grid.listable .card{flex-direction:row; align-items:center; gap:14px; padding:8px 12px}
body.list-mode .grid.listable .card:hover{transform:none}
body.list-mode .grid.listable .card:hover .thumb img{transform:none}
body.list-mode .grid.listable .thumb{flex:0 0 48px; width:48px; height:60px; border:1px solid var(--border-soft); border-radius:4px; border-bottom:1px solid var(--border-soft)}
body.list-mode .grid.listable .thumb img{max-height:52px}
body.list-mode .grid.listable .badge-new,
body.list-mode .grid.listable .badge-value{display:none}
body.list-mode .grid.listable .thumb .brandmark{font-size:10px}
body.list-mode .grid.listable .thumb .ph{width:18px; height:28px}
body.list-mode .grid.listable .card-body{display:contents}
body.list-mode .grid.listable .card h3{order:1; flex:1 1 150px; min-width:0; font-size:13.5px; margin:0}
body.list-mode .grid.listable .card .en{display:none}
body.list-mode .grid.listable .specs-mini{order:2; flex:2 1 300px; display:flex; flex-wrap:wrap; gap:2px 14px; border-top:0; padding:0}
body.list-mode .grid.listable .specs-mini.simple{display:none}
body.list-mode.simple-mode .grid.listable .specs-mini.tech{display:none}
body.list-mode.simple-mode .grid.listable .specs-mini.simple{display:flex}
body.list-mode .grid.listable .specs-mini span{align-items:center}
body.list-mode .grid.listable .specs-mini .ic{margin-top:0}
body.list-mode .grid.listable .price-row{order:3; flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:2px; min-width:96px}
body.list-mode .grid.listable .price{font-size:16px}
body.list-mode .grid.listable .score-label,
body.list-mode .grid.listable .scorebar{display:none}
body.list-mode .grid.listable .card-actions{order:4; flex:0 0 auto; margin:0; padding:0; gap:6px}
body.list-mode .grid.listable .card-actions .btn{flex:0 0 auto; padding:6px 12px; font-size:12.5px}
body.list-mode .grid.listable .card-top{order:5; min-height:0}
body.list-mode .grid.listable .eyebrow{display:none}
@media(max-width:760px){
  body.list-mode .grid.listable .specs-mini{display:none!important}
  body.list-mode .grid.listable .card-actions{display:none}
  body.list-mode .grid.listable .card h3{flex:1 1 auto}
  body.list-mode .grid.listable .price-row{min-width:0; align-items:flex-end}
}

/* ============================================================
   شريط المقارنة العائم + المودال
   ============================================================ */
.compare-bar{
  position:fixed; bottom:16px; right:0; left:0; margin-inline:auto; width:fit-content; max-width:94vw;
  z-index:60; background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 16px; display:none; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap;
  box-shadow:var(--shadow-lg);
}
.compare-bar.show{display:flex}
.compare-bar .names{font-size:13.5px; color:var(--muted)}
.compare-bar .names b{color:var(--text)}
.compare-bar .btn{flex:0 0 auto; padding:8px 18px}

.modal-overlay{position:fixed; inset:0; background:rgba(13,18,31,.6); z-index:100; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:28px 12px}
.modal-overlay.show{display:flex}
.modal{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); max-width:860px; width:100%; padding:26px; position:relative; box-shadow:var(--shadow-lg)}
.modal .close{position:absolute; top:15px; left:15px; background:var(--card-2); border:1px solid var(--border); color:var(--muted); width:33px; height:33px; border-radius:var(--radius-s); cursor:pointer; font-size:14px; transition:color .12s, border-color .12s}
.modal .close:hover{border-color:var(--red); color:var(--red)}
.modal h2{font-size:19px; margin-bottom:6px}
.modal .page-links{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.modal .page-links a{flex:1; min-width:180px}

.cmp-head{display:flex; align-items:stretch; justify-content:center; gap:10px; margin:16px 0 6px; text-align:center}
.cmp-side{flex:1; max-width:240px; display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border:1px solid var(--border); border-radius:var(--radius); background:var(--photo); color:var(--text)}
.cmp-side .nm{font-weight:700; font-size:13.5px; line-height:1.5; color:#1c2330}
.cmp-side .pr{font-family:var(--font-head); color:#0f7c3d; font-weight:800; font-size:14px}
.cmp-side:hover{text-decoration:none; border-color:var(--accent)}
.cmp-side img{height:105px; width:auto; object-fit:contain}
.cmp-vs{align-self:center; color:var(--muted-2); font-size:12px; font-weight:700; border:1px solid var(--border); border-radius:var(--radius-s); padding:3px 10px; white-space:nowrap}
/* مقارنة ثلاثية — عناصر أصغر عشان تلبق ثلاثتها */
.cmp-head.three{gap:6px}
.cmp-head.three .cmp-side{padding:10px 5px}
.cmp-head.three .cmp-side img{height:80px}
.cmp-head.three .cmp-side .nm{font-size:11.5px}
.cmp-head.three .cmp-vs{padding:2px 7px; font-size:10.5px}
.modal table th{width:118px}
.modal{overflow-x:auto}
@media(max-width:520px){
  .cmp-head{gap:6px}
  .cmp-side{padding:9px 4px}
  .cmp-side img{height:74px}
  .cmp-side .nm{font-size:11.5px}
  .cmp-side .pr{font-size:12.5px}
  .cmp-vs{padding:2px 8px; font-size:11px}
}
.cbar{display:block; height:4px; background:var(--card-2); border-radius:3px; margin-top:6px; max-width:150px; overflow:hidden}
.cbar i{display:block; height:100%; border-radius:3px; background:var(--muted-2)}
td.win .cbar i{background:var(--green)}

/* ============================================================
   الجداول
   ============================================================ */
table{width:100%; border-collapse:separate; border-spacing:0; margin-top:14px; font-size:14px;
  border:1px solid var(--border); border-radius:var(--radius-s); overflow:hidden;
  font-variant-numeric:tabular-nums; background:var(--card)}
th,td{padding:10px 13px; border-bottom:1px solid var(--border-soft); text-align:right; vertical-align:top}
tr:last-child th, tr:last-child td{border-bottom:0}
tr:nth-child(even) td:not(.win){background:var(--row)}
tr:nth-child(even) th:not([colspan]){background:var(--row)}
th{color:var(--muted); font-weight:500; white-space:nowrap; width:170px}
td.win{color:var(--green); font-weight:700; background:var(--green-soft)}
tr.group-row th{background:var(--card-2); color:var(--text); font-weight:700; font-size:13px; font-family:var(--font-head)}
tr.group-row .ic{width:14px; height:14px; color:var(--accent); vertical-align:-2px}
@media(max-width:600px){ th{width:104px; font-size:13px} .modal{padding:17px} }

/* ============================================================
   صناديق المحتوى
   ============================================================ */
.simple-box{background:var(--green-soft); border:1px solid var(--green-border); border-radius:var(--radius); padding:16px 18px; margin-top:12px; font-size:14px; line-height:2.05}
.simple-box b{color:var(--green)}
.verdict{background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px; margin-top:14px; font-size:14px; line-height:2.05}
.verdict b{color:var(--accent)}

/* ============================================================
   صفحة الهاتف
   ============================================================ */
.breadcrumb{font-size:12.5px; color:var(--muted-2); padding:16px 0 4px; display:flex; gap:7px; flex-wrap:wrap; align-items:center}
.breadcrumb a{color:var(--muted)}
.breadcrumb .ic{width:12.5px; height:12.5px; margin-inline-end:4px; vertical-align:-2px}
.breadcrumb .sep{opacity:.6}

.phone-hero{display:grid; grid-template-columns:300px 1fr; gap:26px; align-items:start; margin:10px 0 8px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.ph-visual{background:var(--photo); border:1px solid var(--border-soft); border-radius:var(--radius-s); min-height:310px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.ph-visual img{max-height:255px; width:auto; object-fit:contain}
.ph-visual .brandmark{font-size:22px}
.ph-main h1{font-size:clamp(20px,2.7vw,25px); font-weight:800; line-height:1.6}
.ph-main .en{color:var(--muted-2); direction:ltr; text-align:right; font-size:13px; margin-top:3px}
.price-big{font-family:var(--font-head); font-variant-numeric:tabular-nums; font-size:34px; font-weight:800; color:var(--price); margin-top:12px; line-height:1.25}
.price-big .cur{font-family:'Tajawal'; font-size:15px; font-weight:700}
.price-big small{font-family:'Tajawal'; font-size:13px; color:var(--muted); font-weight:400; display:block; margin-top:2px}
.usd-line{display:inline-block; background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--amber); font-size:12px; font-weight:700; padding:3px 11px; border-radius:4px; margin-top:9px; font-variant-numeric:tabular-nums}
.used-box{display:block; width:fit-content; background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--text); font-size:13px; padding:7px 13px; border-radius:var(--radius-s); margin-top:10px}
.used-box b{color:var(--amber)}
.used-box small{color:var(--muted)}
.used-box a{font-weight:700}
.updated-line{color:var(--muted-2); font-size:12.5px; margin-top:10px}

/* أبرز الملامح — شبكة بأيقونات */
.key-chips{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 18px; margin-top:16px; max-width:430px}
.key-chips span{display:flex; align-items:center; font-size:13px; font-weight:600; color:var(--text); min-width:0}
.key-chips .ic{width:16px; height:16px; color:var(--accent); margin-inline-end:8px}

.score-line{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:13px; color:var(--muted)}
.score-line .scorebar{width:150px; flex:0 1 auto}
.score-line b{color:var(--text); font-size:13.5px; font-family:var(--font-head); font-weight:700}
.hero-actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.hero-actions .btn{flex:0 1 auto; padding:9px 18px}
.cmp-select{
  appearance:none; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink);
  font-size:13.5px; font-weight:700; padding:9px 16px; padding-inline-start:34px;
  border-radius:var(--radius-s); cursor:pointer; max-width:250px; transition:background .12s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 12px center;
}
.cmp-select:hover{background-color:var(--accent-hover); border-color:var(--accent-hover)}
:root[data-theme="dark"] .cmp-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2310141d' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.cmp-select option, .cmp-select optgroup{background:var(--card); color:var(--text); font-weight:400}

@media(max-width:700px){
  .phone-hero{grid-template-columns:1fr; padding:15px; gap:15px}
  .ph-visual{min-height:225px}
  .ph-visual img{max-height:185px}
}

/* تبويبات أقسام الصفحة */
.page-tabs{
  position:sticky; top:0; z-index:35; display:flex; gap:3px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:5px; margin:16px 0 2px; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; box-shadow:var(--shadow);
}
.page-tabs::-webkit-scrollbar{display:none}
.page-tabs a{color:var(--muted); font-size:13px; font-weight:600; padding:7px 13px; border-radius:var(--radius-s); white-space:nowrap; transition:color .12s, background .12s}
.page-tabs a:hover{color:var(--accent); background:var(--accent-soft); text-decoration:none}
.page-tabs .tabs-lbl{align-self:center; color:var(--muted-2); font-size:12px; font-weight:700; padding:0 8px; white-space:nowrap}

/* أقسام صفحة «أفضل الهواتف» — ترقيم عنبري ووسم نطاق سعري */
.bnum{display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; flex:0 0 auto;
  background:var(--sun); color:var(--sun-ink); border-radius:var(--radius-s); font-size:15px; font-weight:800}
.range-chip{margin-inline-start:auto; background:var(--amber-soft); border:1px solid var(--amber-border); color:var(--amber);
  font-size:12px; font-weight:700; font-family:'Tajawal'; padding:3px 12px; border-radius:4px; white-space:nowrap; font-variant-numeric:tabular-nums}

/* ============================================================
   الأقسام — عنوان بشرطة زرقاء
   ============================================================ */
.section{margin:34px 0; scroll-margin-top:80px}
.section h2{font-size:19px; font-weight:800; margin-bottom:13px; display:flex; align-items:center; gap:11px; line-height:1.5}
.section h2::before{content:''; width:24px; height:4px; border-radius:2px; background:var(--accent); flex:0 0 auto}
.bracket h2::before{display:none}
.section p{color:var(--text); font-size:14.5px; line-height:2.05; margin-bottom:10px}
.rank-line{color:var(--muted); font-size:14px}
.rank-line b{color:var(--accent); font-family:var(--font-head)}

/* تقييم فون الأردن */
.ratings{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; display:grid; gap:13px; box-shadow:var(--shadow)}
.rt{display:grid; grid-template-columns:145px 1fr 64px; align-items:center; gap:14px; font-size:13.5px}
.rt-label{color:var(--muted); font-weight:600}
.rt-label .ic{width:14px; height:14px; color:var(--muted-2); margin-inline-end:7px; vertical-align:-2.5px}
@media(max-width:520px){ .rt-label .ic{display:none} }
.rt-bar{height:8px; background:var(--card-2); border-radius:5px; overflow:hidden}
.rt-bar i{display:block; height:100%; border-radius:5px; background:var(--accent)}
.rt b{font-family:var(--font-head); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums}
.rt b small{color:var(--muted-2); font-weight:400; font-size:10.5px; font-family:'Tajawal'}
.price-pos{border-top:1px solid var(--border-soft); padding-top:16px; margin-top:5px}
.pp-head{color:var(--muted); font-size:13px}
.pp-bar{position:relative; height:6px; background:var(--card-2); border-radius:4px; margin:15px 9px 9px}
.pp-bar i{position:absolute; top:50%; margin-top:-8px; margin-inline-start:-8px; width:16px; height:16px; border-radius:50%; background:var(--sun); border:3px solid var(--card); box-shadow:0 0 0 1px var(--border)}
.pp-range{display:flex; justify-content:space-between; font-size:12px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.ratings-note{color:var(--muted-2); font-size:12.5px; margin-top:9px}
@media(max-width:520px){ .rt{grid-template-columns:96px 1fr 56px; gap:8px; font-size:12.5px} }

/* الإيجابيات والسلبيات */
.pros-cons{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.pros,.cons{border-radius:var(--radius); padding:15px 17px; font-size:14px}
.pros{background:var(--green-soft); border:1px solid var(--green-border)}
.cons{background:var(--red-soft); border:1px solid var(--red-border)}
.pros h3{color:var(--green); font-size:14.5px; margin-bottom:7px}
.cons h3{color:var(--red); font-size:14.5px; margin-bottom:7px}
.pros ul,.cons ul{list-style:none}
.pros li,.cons li{margin:6px 0; padding-inline-start:23px; position:relative; line-height:1.85}
.pros li::before{content:'✓'; position:absolute; inset-inline-start:0; color:var(--green); font-weight:700}
.cons li::before{content:'✕'; position:absolute; inset-inline-start:0; color:var(--red); font-weight:700}
@media(max-width:640px){ .pros-cons{grid-template-columns:1fr} }

/* الأسئلة الشائعة */
.faq details{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-s); margin-bottom:9px; overflow:hidden}
.faq summary{padding:12px 16px; cursor:pointer; font-weight:700; font-size:14.5px; list-style:none; position:relative; padding-inline-end:38px}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:19px; font-weight:400}
.faq details[open] summary::after{content:'−'}
.faq details[open] summary{border-bottom:1px solid var(--border-soft)}
.faq .answer{padding:12px 16px 14px; color:var(--muted); font-size:14px; line-height:2.05}
.faq .answer a{font-weight:700}
.faq .answer b{color:var(--text)}

.similar-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:13px}
.ready-cmp{color:var(--muted-2); font-size:13px; margin-top:14px}
.ready-cmp a{font-weight:700}

/* مقارنات شائعة (الرئيسية) */
.pop-cmp{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px}
.pop-cmp a{display:flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:12px 14px; color:var(--text); font-size:13.5px; font-weight:700; transition:border-color .15s, box-shadow .2s}
.pop-cmp a:hover{border-color:var(--accent); text-decoration:none; box-shadow:var(--shadow)}
.pop-cmp a span{color:var(--muted-2); font-size:11.5px; font-weight:400; flex:0 0 auto}
.pop-cmp .pc-ph{flex:0 0 auto; width:34px; height:44px; background:#fff; border:1px solid var(--border-soft);
  border-radius:5px; display:flex; align-items:center; justify-content:center}
.pop-cmp .pc-ph img{max-height:38px; max-width:28px; width:auto; object-fit:contain}
@media(max-width:520px){ .pop-cmp{grid-template-columns:1fr} }
@media(max-width:520px){ .similar-grid{grid-template-columns:1fr 1fr; gap:10px} }

.disclaimer{border-top:1px solid var(--border); padding:15px 0 4px; color:var(--muted-2); font-size:12.5px; line-height:1.95; margin:30px 0 8px}

/* ============================================================
   صفحات المحتوى
   ============================================================ */
.prose{max-width:760px; margin:28px auto 48px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 34px; box-shadow:var(--shadow)}
.prose h1{font-size:clamp(21px,3vw,26px); font-weight:800; margin-bottom:15px; line-height:1.55}
.prose h2{font-size:17px; font-weight:800; margin:24px 0 9px; display:flex; align-items:center; gap:10px}
.prose h2::before{content:''; width:20px; height:4px; border-radius:2px; background:var(--accent); flex:0 0 auto}
.prose p{color:var(--text); font-size:14.5px; line-height:2.1; margin-bottom:10px}
.prose ul{margin:0 22px 12px 0}
.prose li{margin-bottom:7px; line-height:2.05}
.prose .lead{color:var(--muted); font-size:15.5px}
@media(max-width:640px){ .prose{padding:20px 17px} }

.seo-block{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; margin:4px 0 48px}
.seo-block h2{font-size:17px; font-weight:800; margin-bottom:9px; display:flex; align-items:center; gap:10px}
.seo-block h2::before{content:''; width:20px; height:4px; border-radius:2px; background:var(--accent); flex:0 0 auto}
.seo-block p{color:var(--muted); font-size:14px; line-height:2.05; margin-bottom:8px}
.seo-block ul{margin:4px 20px 0 0; color:var(--muted); font-size:14px}
.seo-block li{margin-bottom:5px; line-height:1.95}
.seo-block b{color:var(--text)}

/* ============================================================
   الفوتر — كحلي
   ============================================================ */
footer.site{background:var(--navy); border-top:3px solid var(--sun); margin-top:28px}
footer.site a{color:#a9c6ff}
footer.site a:hover{color:#fff}
.footer-cols{display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:28px; padding:34px 0 20px}
.footer-cols h4{font-size:14.5px; font-weight:700; margin-bottom:10px; color:#fff}
.f-mark{display:inline-flex; width:25px; height:25px; border-radius:6px; background:#fff; color:var(--brand);
  align-items:center; justify-content:center; margin-inline-end:8px; vertical-align:-7px}
.footer-cols p{color:rgba(255,255,255,.72); font-size:13px; line-height:2.05; margin-bottom:8px}
.footer-cols p.sources{font-size:12px; color:rgba(255,255,255,.48)}
.footer-cols ul{list-style:none}
.footer-cols li{margin-bottom:7px}
.footer-cols a{color:rgba(255,255,255,.72); font-size:13px; transition:color .12s}
.footer-cols a:hover{color:#fff}
.footer-brands{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12); padding:15px 0 24px; color:rgba(255,255,255,.48); font-size:12px; line-height:2}
@media(max-width:720px){ .footer-cols{grid-template-columns:1fr 1fr} .footer-cols div:first-child{grid-column:1/-1} }

/* زر العودة للأعلى */
.to-top{
  position:fixed; bottom:16px; inset-inline-start:16px; z-index:55;
  width:42px; height:42px; border-radius:var(--radius-s); border:1px solid var(--border);
  background:var(--card); color:var(--muted); font-size:17px;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .18s, transform .18s, color .12s, border-color .12s; box-shadow:var(--shadow-md);
}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top:hover{color:var(--accent); border-color:var(--accent)}

/* متفرقات */
.brand-page-head{padding:26px 0 4px}
.brand-page-head h1{font-size:clamp(20px,3vw,27px); font-weight:800; line-height:1.55}
.brand-page-head p{color:var(--muted); margin-top:9px; font-size:14.5px; line-height:2.05; max-width:820px}

/* ============================================================
   الحركة — تفاعلية فقط: استجابة لفعل المستخدم أو ظهور بيانات.
   بدون حركات دخول للمحتوى، بدون تكرار لانهائي، بدون زخارف.
   قاعدة prefers-reduced-motion (أعلى الملف) تعطّلها كلها.
   ============================================================ */
/* ضغطة زر ملموسة */
.btn:active, .chip:active, .wiz-opts button:active, .adv-opts button:active,
.view-seg button:active, .searchbox button:active, .theme-btn:active, .fav:active{transform:translateY(1px)}

/* تعبئة أشرطة التقييم عند أول ظهور بالشاشة (site.js يضيف .in) */
@keyframes barGrow{from{transform:scaleX(0)}}
@keyframes dotIn{from{transform:scale(0)}}
.scorebar i, .rt-bar i, .cbar i{transform-origin:100% 50%}
.scorebar.in i, .rt-bar.in i{animation:barGrow .8s cubic-bezier(.25,.65,.3,1)}
.pp-bar.in i{animation:dotIn .45s cubic-bezier(.2,.7,.3,1.25)}
.modal-overlay.show .cbar i{animation:barGrow .55s cubic-bezier(.25,.65,.3,1)}

/* فتح العناصر المطوية (الأسئلة الشائعة، المعالج، فلاتر أكثر، مُطلق المقارنة) */
@keyframes openFade{from{opacity:0; transform:translateY(-4px)}}
.faq details[open] .answer, .wizard[open] .wiz-body,
.adv-filters:not([hidden]), .cmp-launch:not([hidden]), .wiz-results .wiz-cards{animation:openFade .2s ease}

/* المودال وشريط المقارنة ومنسدلة البحث */
@keyframes overlayIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0; transform:translateY(12px) scale(.98)}}
@keyframes riseIn{from{opacity:0; transform:translateY(14px)}}
@keyframes acIn{from{opacity:0; transform:translateY(-5px)}}
.modal-overlay.show{animation:overlayIn .16s ease}
.modal-overlay.show .modal{animation:modalIn .22s cubic-bezier(.2,.7,.3,1)}
.compare-bar.show{animation:riseIn .24s cubic-bezier(.2,.7,.3,1)}
.nav-ac:not([hidden]){animation:acIn .14s ease}

/* نبضة القلب عند الإضافة للمفضلة (site.js يضيف .pop لحظياً) */
@keyframes favPop{0%{transform:scale(1)}35%{transform:scale(1.35)}70%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes favPulse{50%{transform:scale(1.04)}}
.fav.pop svg{animation:favPop .35s ease}
.btn.fav-lg.pop{animation:favPulse .3s ease}

/* ظهور هادئ لصور الأجهزة بعد اكتمال تحميلها (site.js) */
img.imgf{opacity:0; transition:opacity .3s ease}
img.imgf.ld{opacity:1}

/* رسمة «ما في نتائج» — خط مسطّح بلون واحد + عدسة بالأزرق،
   وبحالة فلتر المفضلة الفاضي بتنعرض نسخة القلب الأحمر بدلها */
.empty .empty-art{display:block; margin:0 auto 16px; color:var(--muted-2)}
.empty-art .e1{stroke:currentColor; opacity:.55}
.empty-art .e1f{fill:currentColor; opacity:.55}
.empty-art .e2{stroke:var(--accent)}
.empty-art .e3{fill:var(--red)}
.empty .art-fav{display:none}
.empty.fav .art-fav{display:block}
.empty.fav .art-search{display:none}
.empty p{margin:0}

/* ============================================================
   الطباعة — ورقة مواصفات نظيفة
   ============================================================ */
@media print{
  header.site,.brandsbar,.page-tabs,.hero-actions,.card-actions,.to-top,.compare-bar,
  footer.site,.nav-search,.toolbar,.picks-sec,.searchbox,.recent-row,.theme-btn{display:none!important}
  body{background:#fff; color:#000}
  .phone-hero,.ratings,.prose,.card,.seo-block{box-shadow:none; border-color:#bbb}
  a{color:#000}
}