/* =============================================================
   ITC CORE — Consolidated Stylesheet
   كل الـ CSS بتاع البلاجن اتجمع هنا من الـ <style> المبعثرة جوه
   كل ملف PHP، عشان يبقى في مصدر واحد بس للتنسيق.
   ============================================================= */

/* =============================================================
   0. DESIGN TOKENS — هوية IT SOUQ 2026 (أحمر قاني / أسود / أبيض)
   ============================================================= */
:root{
  /* الألوان الأساسية */
  --itc-red:        #E31B23;
  --itc-red-dark:   #A3050C;
  --itc-red-darker: #7A0308;
  --itc-red-light:  #FF4B52;
  --itc-red-tint:   #FDEAEA;
  --itc-black:      #0B0B0D;
  --itc-black-soft: #17171B;
  --itc-white:      #FFFFFF;
  --itc-gray-50:    #F7F7F8;
  --itc-gray-100:   #EFEFF1;
  --itc-gray-300:   #D6D6DA;
  --itc-gray-500:   #8A8A93;
  --itc-gray-700:   #47474F;

  /* التدرجات */
  --itc-grad-red: linear-gradient(135deg, var(--itc-red) 0%, var(--itc-red-dark) 100%);
  --itc-grad-dark: linear-gradient(135deg, var(--itc-black-soft) 0%, var(--itc-black) 100%);

  /* الخطوط */
  --itc-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

  /* الظلال */
  --itc-shadow-sm: 0 2px 8px rgba(11,11,13,.08);
  --itc-shadow-md: 0 6px 20px rgba(11,11,13,.10);
  --itc-shadow-lg: 0 12px 36px rgba(11,11,13,.14);
  --itc-shadow-red: 0 10px 28px rgba(227,27,35,.28);
  --itc-focus-ring: 0 0 0 3px rgba(227,27,35,.08);

  /* الحواف والمسافات */
  --itc-radius-sm: 8px;
  --itc-radius-md: 14px;
  --itc-radius-lg: 20px;
  --itc-radius-pill: 999px;
  --itc-space-1: 8px;
  --itc-space-2: 16px;
  --itc-space-3: 24px;
  --itc-space-4: 40px;

  /* الحركة */
  --itc-ease: cubic-bezier(.22,1,.36,1);
  --itc-dur-fast: .18s;
  --itc-dur-base: .3s;
  --itc-dur-slow: .5s;

  /* نظام الزجاج (Glassmorphism) — إضافة theme3، بدون ألوان جديدة، فقط تدرجات شفافة من نفس الهوية */
  --itc-bg-base: #EEF0F3;
  --itc-glass-fill: rgba(255,255,255,.58);
  --itc-glass-fill-strong: rgba(255,255,255,.74);
  --itc-glass-fill-dark: rgba(11,11,13,.62);
  --itc-glass-border: rgba(255,255,255,.55);
  --itc-glass-border-dark: rgba(255,255,255,.10);
  --itc-glass-blur: blur(20px) saturate(160%);
  --itc-glass-blur-sm: blur(10px) saturate(140%);
  --itc-glass-shadow: 0 8px 32px rgba(11,11,13,.10), inset 0 1px 0 rgba(255,255,255,.5);
  --itc-glass-shadow-hover: 0 20px 48px rgba(11,11,13,.16), inset 0 1px 0 rgba(255,255,255,.6);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =============================================================
   0.1 KEYFRAMES — أنيميشن عام يتاح استخدامه في أي مكان بالموقع
   ============================================================= */
@keyframes itcFadeInUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }
@keyframes itcScaleIn{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:scale(1); } }
@keyframes itcShimmer{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } }
@keyframes itcPulseRed{ 0%,100%{ box-shadow:0 0 0 0 rgba(227,27,35,.45); } 50%{ box-shadow:0 0 0 10px rgba(227,27,35,0); } }
@keyframes itcFloatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* عناصر بتدخل الشاشة تتحرك تلقائيًا (بدون JS) — تتفعّل بإضافة class="itc-anim" */
.itc-anim{ animation: itcFadeInUp var(--itc-dur-slow) var(--itc-ease) both; }
.itc-anim-scale{ animation: itcScaleIn var(--itc-dur-slow) var(--itc-ease) both; }
/* تأخير متدرج للكروت جوه شبكة (Grid) عشان تتحرك واحدة بعد التانية */
.itc-grid > *:nth-child(1),.itc-grid-modern > *:nth-child(1){ animation-delay:.02s; }
.itc-grid > *:nth-child(2),.itc-grid-modern > *:nth-child(2){ animation-delay:.06s; }
.itc-grid > *:nth-child(3),.itc-grid-modern > *:nth-child(3){ animation-delay:.10s; }
.itc-grid > *:nth-child(4),.itc-grid-modern > *:nth-child(4){ animation-delay:.14s; }
.itc-grid > *:nth-child(5),.itc-grid-modern > *:nth-child(5){ animation-delay:.18s; }
.itc-grid > *:nth-child(6),.itc-grid-modern > *:nth-child(6){ animation-delay:.22s; }
.itc-grid > *:nth-child(7),.itc-grid-modern > *:nth-child(7){ animation-delay:.26s; }
.itc-grid > *:nth-child(8),.itc-grid-modern > *:nth-child(8){ animation-delay:.30s; }

/* =============================================================
   0.2 COMPONENT SYSTEM — عناصر جاهزة تتستخدم في shortcodes/widgets
   ============================================================= */
.itc-sec-wrap{ max-width:1400px; margin:0 auto; box-sizing:border-box; padding:var(--itc-space-3) var(--itc-space-2); direction:rtl; font-family:var(--itc-font); }
.itc-sec-title{
  font-size:clamp(20px,3vw,28px); font-weight:800; color:var(--itc-black);
  text-align:center; margin:0 0 var(--itc-space-3); position:relative; padding-bottom:14px;
}
.itc-sec-title::after{
  content:''; position:absolute; bottom:0; right:50%; transform:translateX(50%);
  width:64px; height:4px; border-radius:4px; background:var(--itc-grad-red);
}
.itc-sec-title.on-dark{ color:var(--itc-white); }

.itc-grid-modern{
  display:grid; gap:var(--itc-space-2); align-items:start;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
/* الموقع شغال على أرباح Google Ads، فمش هنخفي أي إعلان — لكن لو Google حقنت إعلان جوه كارت
   من كروت الهوية (Auto Ads)، بندّيله شكل "بانر إعلاني" مستقل بعرض الصف بدل ما يتلخبط
   جوه ستايل الكارت (خلفية بيضا/ظل/بوردر) ويكسر شكل الصف. الإعلان لسه بيظهر وبياخد
   مساحته الطبيعية، بس بشكل مقصود مش عطل بصري.
   ملاحظة مهمة: Google بيحقن ins.adsbygoogle حتى لو السلوت "مش متملي" فعليًا
   (data-ad-status="unfilled"/"unfill-optimized")، يعني مفيش إعلان حقيقي هيظهر أصلاً.
   لو استهدفنا أي ins.adsbygoogle من غير شرط، هنكسر شكل كروت كتير عشان سلوت فاضي —
   ده اللي كان بيحصل فعليًا (تأكدنا منه على الموقع اللايف: 9 من 10 سلوتات كانت فاضية
   وكانت بتكسر شكل الكارت من غير أي فايدة). الشرط [data-ad-status="filled"] يقصر
   التحويل لبانر على الحالة اللي فيها إعلان حقيقي هيظهر بس. */
.itc-card-modern:has(ins.adsbygoogle[data-ad-status="filled"]) {
  grid-column: 1 / -1;
  background: transparent; border: none; box-shadow: none; padding: 0;
  display: flex; justify-content: center; animation: none;
}
@media (max-width:600px){
  .itc-sec-wrap{ padding:var(--itc-space-2) 12px; }
  .itc-grid-modern{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
}

.itc-card-modern{
  background:var(--itc-white); border-radius:var(--itc-radius-md); overflow:hidden;
  box-shadow:var(--itc-shadow-sm); border:1px solid var(--itc-gray-100);
  transition:transform var(--itc-dur-base) var(--itc-ease), box-shadow var(--itc-dur-base) var(--itc-ease), border-color var(--itc-dur-base) var(--itc-ease);
  animation: itcFadeInUp var(--itc-dur-slow) var(--itc-ease) both;
}
.itc-card-modern:hover{
  transform:translateY(-6px); box-shadow:var(--itc-shadow-lg); border-color:var(--itc-red-tint);
}
.itc-card-modern img{ transition:transform var(--itc-dur-slow) var(--itc-ease); }
.itc-card-modern:hover img{ transform:scale(1.06); }
.itc-card-body{ padding:16px; }

.itc-badge{
  display:inline-block; font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px;
  background:var(--itc-grad-red); color:var(--itc-white); letter-spacing:.2px;
}
.itc-badge.outline{ background:var(--itc-red-tint); color:var(--itc-red-dark); }

.itc-price{ color:var(--itc-red); font-weight:800; }

.itc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:var(--itc-radius-pill); font-weight:700; font-size:15px;
  text-decoration:none; border:1px solid transparent; cursor:pointer; font-family:var(--itc-font);
  background:var(--itc-grad-red); color:var(--itc-white); white-space:nowrap;
  transition:transform var(--itc-dur-base) var(--itc-ease), box-shadow var(--itc-dur-base) var(--itc-ease), background var(--itc-dur-base);
  box-shadow:var(--itc-shadow-red);
}
.itc-btn:active{ transform:scale(.97); }
.itc-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 32px rgba(227,27,35,.36); color:var(--itc-white); }
.itc-btn.dark{ background:var(--itc-grad-dark); box-shadow:var(--itc-shadow-md); }
.itc-btn.dark:hover{ box-shadow:var(--itc-shadow-lg); }
.itc-btn.glass{
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1px solid var(--itc-glass-border); color:var(--itc-black); box-shadow:none;
}
.itc-btn.glass:hover{ transform:translateY(-3px); background:#fff; color:var(--itc-black); }
.itc-btn.ghost{ background:transparent; color:var(--itc-black); border:1.5px solid var(--itc-gray-300); box-shadow:none; }
.itc-btn.ghost:hover{ background:transparent; border-color:var(--itc-red); color:var(--itc-red); box-shadow:none; }
.itc-btn.sm{ padding:9px 18px; font-size:13.5px; }

.itc-name-link{ color:var(--itc-black); text-decoration:none; transition:color var(--itc-dur-fast) ease; }
.itc-name-link:hover{ color:var(--itc-red); }

/* =============================================================
   0.25 SECTION SHELL — توحيد المسافات لكل أقسام الصفحة الرئيسية
   كل قسم (ويدجت Elementor مستقل: مستقلين/وظائف/مستعمل/خدمات رقمية/
   دليل شركات/فيديوهات/كوبونات...) كان بيحدد max-width/padding بنفسه
   بقيم مختلفة تمامًا (حد بيحطها صفر ويسيب Elementor يتحكم، حد
   بيحط 1400px+20px، حد تاني من غير أي حد أقصى) — وده بالظبط سبب
   "المسافات مش متسقة من اليمين والشمال". أي قسم يضيف
   class="itc-section-shell" لعنصره الخارجي بياخد نفس الإيقاع
   بالظبط بغض النظر عن إعدادات الكونتينر في Elementor، لأن الـ
   !important هنا مقصودة تحديدًا عشان تكسب أي قيمة تانية داخل
   الـ <style> الخاص بكل ويدجت.
   ============================================================= */
.itc-section-shell{
  max-width:1400px; margin:0 auto; box-sizing:border-box;
  padding:56px 24px !important;
}
@media (max-width:1024px){
  .itc-section-shell{ padding:44px 20px !important; }
}
@media (max-width:600px){
  .itc-section-shell{ padding:32px 16px !important; }
}
/* نسخة أفقية بس (من غير padding رأسي) — لويدجتس شقيقة بتتشارك
   Elementor container واحد (زي عروض الاستضافة + الكوبونات) عشان
   ميتكررش التباعد الرأسي مرتين بين عنصرين في نفس القسم المنطقي. */
.itc-section-shell-h{
  max-width:1400px; margin:0 auto; box-sizing:border-box;
  padding:0 24px !important;
}
@media (max-width:1024px){
  .itc-section-shell-h{ padding:0 20px !important; }
}
@media (max-width:600px){
  .itc-section-shell-h{ padding:0 16px !important; }
}
.itc-shell-pair-first{ margin-top:56px !important; }
.itc-shell-pair-last{ margin-bottom:56px !important; }
@media (max-width:1024px){
  .itc-shell-pair-first{ margin-top:44px !important; }
  .itc-shell-pair-last{ margin-bottom:44px !important; }
}
@media (max-width:600px){
  .itc-shell-pair-first{ margin-top:32px !important; }
  .itc-shell-pair-last{ margin-bottom:32px !important; }
}
/* الطبقة التانية للمشكلة: مش بس الويدجت نفسه كان بيحدد padding مختلف —
   كونتينر Elementor (.e-con) اللي لافّ الويدجت كان بره برضه بيحدد padding
   مختلف من قسم للتاني (بعضهم "0px 10px" وبعضهم "0px") — ده كان بيدّي فرق
   20px حقيقي وظاهر بالعين بين الأقسام حتى بعد ما itc-section-shell وحّد
   الـ padding الداخلي. الحل: أي e-con بيحتوي على شل موحّد نصفّر الـ
   padding الأفقي بتاعه تمامًا ونسيب itc-section-shell هو المتحكم الوحيد. */
.e-con:has(.itc-section-shell),
.e-con:has(.itc-section-shell-h){
  padding-left:0 !important; padding-right:0 !important;
}

/* =============================================================
   0.3 LEGACY COLOR BRIDGE — بيحافظ على شكل موحّد في كل الويدجتس/الصفحات
   القديمة اللي لسه شغالة بـ inline styles وألوان الهوية القديمة،
   لحد ما يتراجع بناء كل ملف على حدة. الـ !important هنا مقصودة
   عشان تتغلب على inline style بدون ما نلمس كل ملف PHP.
   ============================================================= */
body, .itc-section-page, #itc-sections-nav .itc-nav-item{ font-family: var(--itc-font) !important; }

[style*="color:var(--itc-red)"], [style*="color: var(--itc-red)"],
[style*="color:var(--itc-red)"], [style*="color: var(--itc-red)"],
[style*="color:var(--itc-red-dark)"]{ color: var(--itc-red) !important; }

[style*="background:var(--itc-red)"], [style*="background: var(--itc-red)"],
[style*="background:var(--itc-red)"], [style*="background: var(--itc-red)"]{ background: var(--itc-grad-red) !important; }

[style*="color:var(--itc-black)"], [style*="color: var(--itc-black)"],
[style*="color:var(--itc-black)"], [style*="color: var(--itc-black)"]{ color: var(--itc-black) !important; }

[style*="background:var(--itc-black)"], [style*="background: var(--itc-black)"]{ background: var(--itc-grad-dark) !important; }

/* منع السكرول العرضي في الموبايل اللي بيبوظ القائمة السفلية */
html {
    overflow-x: hidden;
    width: 100%;
}



/* =============================================
   1. SOUQ SECTIONS — Bottom Floating Nav
   (كان جوه module-souq-pages.php > itc_inject_sections_navbar)
   ============================================= */
#itc-sections-nav {
    display: none;
}
@media (max-width: 767px) {
  #itc-sections-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: var(--itc-glass-fill-strong);
    backdrop-filter: var(--itc-glass-blur);
    -webkit-backdrop-filter: var(--itc-glass-blur);
    border-top: 1px solid var(--itc-glass-border);
    direction: rtl;
    box-shadow: 0 -8px 32px rgba(17,20,29,.10);
    display: flex;
    justify-content: center;
    padding: 0;
  }
  /* مساحة تحت المحتوى عشان الشريط الثابت مايغطيش حاجة */
  body { padding-bottom: 62px !important; }
}
#itc-sections-nav .itc-nav-inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    width: 100%;
    justify-content: center;
}
#itc-sections-nav .itc-nav-inner::-webkit-scrollbar { display: none; }
#itc-sections-nav .itc-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--itc-gray-700);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Cairo', sans-serif;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-top: 3px solid transparent;
    min-width: 70px;
}
#itc-sections-nav .itc-nav-item:hover {
    color: var(--itc-red);
    background: rgba(227,27,35,0.08);
    border-top-color: var(--itc-red);
}
#itc-sections-nav .itc-nav-item.active {
    color: var(--itc-red);
    border-top-color: var(--itc-red);
    background: rgba(227,27,35,0.08);
}
#itc-sections-nav .itc-nav-icon { font-size: 20px; line-height: 1; }
#itc-sections-nav .itc-nav-label { font-size: 10px; }
/* إخفاء الشريط عند الطباعة */
@media print { #itc-sections-nav { display: none; } }

/* أقسام السوق: عنوان القسم + التصنيف */
.main-navigation .menu > li > a,
.classima-header .main-menu > li > a {
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: color 0.2s ease !important;
}
.itc-section-page .itc-page-hero {
    position: relative;
    overflow: hidden;
}
.itc-section-page .itc-page-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    pointer-events: none;
}
.itc-section-page {
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
}
#itc-sections-nav .itc-nav-item {
    font-family: 'Cairo', 'Segoe UI', sans-serif !important;
}
.itc-fl-card:hover,
div[style*="border-radius:16px"]:hover,
div[style*="border-radius:14px"]:hover {
    transform: translateY(-4px) !important;
}


/* =============================================
   2. AFFILIATE — Product Card Image Fix
   (كان جوه module-affiliate.php > wp_head)
   ============================================= */
.itc-card-image-wrap {
    height: 220px !important;
    background: #fff !important;
    min-height: unset !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}
.itc-card-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 188px !important;
    object-fit: contain !important;
}


/* =============================================
   3. JOBS — Listing Header Bar + Single Job Page
   (كان جوه module-jobs.php > itc_jobs_styles)
   ملاحظة: شِلنا قواعد li.job_listing/.job_listings القديمة —
   صفحة الوظائف بتترسم بكروت <div> مخصصة من module-souq-pages.php
   (قسم 6 تحت) مش بقالب WP Job Manager الافتراضي، فكانت قواعد ميتة.
   ============================================= */
.jobs-action-bar { display:flex; justify-content:space-between; align-items:center; padding:18px 4px 14px; direction:rtl; border-bottom:3px solid #e31b1b; margin-bottom:20px; }
.jobs-action-bar h2 { font-size:22px; font-weight:800; color:var(--itc-black); margin:0; }
.add-job-btn { display:inline-flex !important; align-items:center !important; gap:6px; background:linear-gradient(135deg,#e31b1b,#b50000) !important; color:#fff !important; padding:10px 22px !important; border-radius:25px !important; font-size:14px !important; font-weight:700 !important; text-decoration:none !important; box-shadow:0 4px 15px rgba(227,27,27,0.35) !important; transition:all 0.3s ease !important; border:none !important; }
.add-job-btn:hover { transform:translateY(-2px) !important; box-shadow:0 6px 20px rgba(227,27,27,0.5) !important; color:#fff !important; }

.it-apply-section { background:#fff; border:2px solid #e31b1b; border-radius:16px; padding:24px; margin:24px 0; direction:rtl; box-shadow:0 4px 20px rgba(227,27,27,0.1); }
.it-apply-section h3 { font-size:18px; font-weight:800; color:var(--itc-black); margin:0 0 16px; }
.it-job-content-box { background:#fff; border-radius:16px; padding:28px; margin-bottom:20px; box-shadow:0 2px 15px rgba(0,0,0,0.08); direction:rtl; }
.it-job-content-box h3 { font-size:18px; font-weight:800; color:#e31b1b; margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #f5f5f5; }
.it-job-content-box .content p, .it-job-content-box .content li { line-height:1.9; color:#444; font-size:15px; }

/* ── توحيد عرض عمود صفحة الوظيفة ──────────────────────────────────────
   العطل: `.itc-flp` (الكتلة اللي فوق) عندها max-width:820px، وقسم التقديم
   وصندوق التفاصيل من غير أي حد ⇒ بياخدوا عرض `.itc-section-shell` كامل
   (1400px) ⇒ يبانوا أعرض من اللي فوقهم. (شكوى المالك · 2026-08-12)

   ولزوم `box-sizing:border-box` مقيس مش احتياطي: مفيش reset عام في الملف
   ⇒ الافتراضي content-box ⇒ الـpadding (24px/28px) كان هيخلّي العرض الكلي
   868px بدل 820 ⇒ يفضل مش مساوي للي فوقه.

   و820px هو عرض العمود المعتمد أصلًا في نفس العيلة:
   `.itc-flp` · `.itc-flp-section` · `.itc-company-jobs` — فمفيش رقم جديد. */
.it-apply-section,
.it-job-content-box{ max-width:820px; margin-inline:auto; box-sizing:border-box; }

/* والكتل الباقية في نفس العمود — مقصورة على صفحة الوظيفة بالـbody class،
   لأن `.itc-t3-grid` و`.itc-ad-slot` مستخدمين بعرض كامل في صفحات تانية
   (الرئيسية · المدونة) ⇒ تعديلهم عامًّا كان هيكسرها. */
.single-job_listing .itc-ad-slot,
.single-job_listing .itc-t3-banner,
.single-job_listing .itc-t3-grid{ max-width:820px; margin-inline:auto; box-sizing:border-box; }

.it-apply-section #it-apply-form label { display:block; font-weight:700; margin-bottom:6px; color:#333; font-size:14px; }
.it-apply-section #it-apply-form input, .it-apply-section #it-apply-form textarea { width:100%; padding:11px 14px; border:1.5px solid #ddd; border-radius:10px; font-size:14px; margin-bottom:14px; box-sizing:border-box; font-family:inherit; transition:border 0.3s; }
.it-apply-section #it-apply-form input:focus, .it-apply-section #it-apply-form textarea:focus { border-color:#e31b1b; outline:none; }
.it-apply-section #it-apply-form textarea { resize:vertical; min-height:90px; }
.it-modal-submit { width:100%; padding:13px; background:linear-gradient(135deg,#e31b1b,#b50000); color:#fff; border:none; border-radius:10px; font-size:16px; font-weight:700; cursor:pointer; transition:all 0.3s; }
.it-modal-submit:hover { opacity:0.9; }
.it-modal-success { text-align:center; padding:20px 0; }
.it-modal-success .icon { font-size:48px; margin-bottom:12px; }
.it-modal-success h4 { font-size:20px; font-weight:800; color:#2e7d32; margin:0 0 8px; }
.it-modal-success p { color:#666; font-size:14px; }
.it-modal-login-notice { background:#fff5f5; border:1.5px dashed #e31b1b; border-radius:12px; padding:18px; text-align:center; }
.it-modal-login-notice a { display:inline-block; margin-top:10px; background:linear-gradient(135deg,#e31b1b,#b50000); color:#fff !important; padding:9px 20px; border-radius:20px; text-decoration:none; font-weight:700; font-size:14px; }

.it-cv-upload-wrap { margin-bottom:12px; }
.it-cv-label { display:flex; align-items:center; gap:10px; cursor:pointer; border:2px dashed #ccc; border-radius:8px; padding:12px 16px; background:#fafafa; transition:all .2s; font-size:14px; }
.it-cv-label:hover { border-color:#e31b1b; background:#fff5f5; }
.it-cv-label.has-file { border-color:#22a249; background:#f5fff8; }
.it-cv-icon { font-size:20px; }
.it-cv-text { color:#555; font-weight:500; }
.it-cv-hint { color:#999; font-size:12px; margin-right:auto; }
.it-cv-input { opacity:0; position:absolute; width:0; height:0; pointer-events:none; }
.it-cv-filename { display:block; margin-top:6px; font-size:13px; color:#22a249; font-weight:500; min-height:18px; }
.featured-badge { display:inline-block; background:linear-gradient(135deg,#ffb300,#ff8f00); color:#fff; font-size:11px; font-weight:800; padding:3px 10px; border-radius:12px; margin-right:8px; }


/* =============================================
   4. AUTH — Company/Seeker Register & Login Cards
   (كان itc_auth_css() جوه module-seekers.php، مستخدم
   من module-companies.php ومodule-seekers.php الاتنين)
   ============================================= */
.itc-auth-wrap{max-width:460px;margin:0 auto;padding:40px 4px;direction:rtl;font-family:inherit;position:relative;}
.itc-auth-card{
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-lg); padding:34px 36px;
  box-shadow:var(--itc-glass-shadow); position:relative; z-index:1;
}
.itc-auth-card h2{font-size:22px;font-weight:800;color:var(--itc-black);margin:0 0 6px;text-align:center;}
.itc-auth-card p.sub{color:var(--itc-gray-700);font-size:14px;text-align:center;margin:0 0 22px;}
.itc-auth-card label{display:block;font-weight:700;font-size:13px;color:#333;margin-bottom:6px;}
.itc-auth-card input,
.itc-auth-card textarea{width:100%;padding:12px 15px;background:rgba(255,255,255,.65);border:1.5px solid var(--itc-gray-100);border-radius:10px;font-size:14px;margin-bottom:16px;box-sizing:border-box;font-family:inherit;transition:border-color var(--itc-dur-fast),box-shadow var(--itc-dur-fast);}
.itc-auth-card input:focus,
.itc-auth-card textarea:focus{border-color:var(--itc-red);outline:none;box-shadow:0 0 0 4px rgba(227,27,35,.12);}
.itc-auth-btn{width:100%;padding:13px;background:var(--itc-grad-red);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--itc-shadow-red);transition:transform var(--itc-dur-fast) var(--itc-ease),box-shadow var(--itc-dur-fast) var(--itc-ease);}
.itc-auth-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(227,27,35,.4);}
.itc-auth-error{background:rgba(254,242,242,.85);border:1px solid #f87171;color:#991b1b;padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:16px;}
.itc-auth-switch{text-align:center;font-size:13px;color:var(--itc-gray-700);margin-top:16px;position:relative;z-index:1;}
.itc-auth-switch a{color:var(--itc-red);font-weight:700;text-decoration:none;}

/* =============================================
   4b. صفحات تسجيل الشركة/المستقل — ويزارد multi-step split-screen (theme3)
   ============================================= */
.itc-reg-shell{ display:grid; grid-template-columns:.9fr 1.1fr; min-height:100vh; direction:rtl; }
.itc-reg-side{
  position:relative; background:var(--itc-grad-dark); color:#fff; padding:56px 48px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
}
.itc-reg-side-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.16; }
.itc-reg-side-content{ position:relative; }
.itc-reg-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; margin-bottom:40px; color:#fff; text-decoration:none; }
.itc-reg-brand .mark{ width:38px; height:38px; border-radius:11px; background:var(--itc-grad-red); display:grid; place-items:center; color:#fff; font-size:18px; box-shadow:0 6px 16px rgba(227,27,35,.35); }
.itc-reg-side-content h1{ font-size:30px; font-weight:900; line-height:1.35; margin:0 0 16px; }
.itc-reg-side-content p{ color:rgba(255,255,255,.72); line-height:1.8; max-width:420px; margin:0; }
.itc-reg-perks{ display:flex; flex-direction:column; gap:16px; margin-top:28px; }
.itc-reg-perk{ display:flex; align-items:center; gap:14px; }
.itc-reg-perk .p-ico{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); flex:none; }
.itc-reg-copy{ position:relative; font-size:12.5px; color:rgba(255,255,255,.55); }

.itc-reg-main{ display:flex; align-items:center; justify-content:center; padding:56px 24px; position:relative; }
.itc-reg-card{ width:100%; max-width:520px; padding:40px; }
.itc-reg-steps{ display:flex; gap:8px; margin-bottom:28px; }
.itc-reg-steps .itc-step{ flex:1; height:5px; border-radius:4px; background:var(--itc-gray-100); overflow:hidden; }
.itc-reg-steps .itc-step.done, .itc-reg-steps .itc-step.current{ background:var(--itc-grad-red); }
.itc-reg-card .itc-reg-step-title{ margin:0 0 6px; font-size:22px; font-weight:900; color:var(--itc-black); text-align:right; }
.itc-reg-step-sub{ color:var(--itc-gray-700); font-size:13.5px; margin:0 0 24px; text-align:right; }
.itc-reg-switch{ text-align:center; margin-top:22px; font-size:13.5px; color:var(--itc-gray-700); }
.itc-reg-switch a{ color:var(--itc-red); font-weight:700; text-decoration:none; }

.itc-form-row{ margin-bottom:18px; }
.itc-form-row label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--itc-black); }
.itc-form-row input, .itc-form-row select, .itc-form-row textarea{
  width:100%; padding:13px 16px; border-radius:var(--itc-radius-sm); border:1.5px solid var(--itc-gray-100);
  background:rgba(255,255,255,.7); font-family:inherit; font-size:14.5px; outline:none; box-sizing:border-box;
  transition:border-color var(--itc-dur-fast), box-shadow var(--itc-dur-fast);
}
.itc-form-row input:focus, .itc-form-row select:focus, .itc-form-row textarea:focus{ border-color:var(--itc-red); box-shadow:0 0 0 4px rgba(227,27,35,.12); }
.itc-form-row textarea{ resize:vertical; min-height:90px; }
.itc-form-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .itc-form-grid-2{ grid-template-columns:1fr; } }

.itc-role-pick{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
@media (max-width:480px){ .itc-role-pick{ grid-template-columns:1fr; } }
.itc-role-card{
  padding:20px; border-radius:var(--itc-radius-md); border:1.5px solid var(--itc-gray-100); text-align:center; cursor:pointer;
  transition:border-color var(--itc-dur-fast), transform var(--itc-dur-fast), box-shadow var(--itc-dur-fast); background:rgba(255,255,255,.5);
}
.itc-role-card:hover{ transform:translateY(-4px); }
.itc-role-card.selected{ border-color:var(--itc-red); box-shadow:0 0 0 4px rgba(227,27,35,.1); background:var(--itc-red-tint); }
.itc-role-card .r-ico{ width:44px; height:44px; margin:0 auto 10px; border-radius:14px; background:var(--itc-grad-dark); color:#fff; display:grid; place-items:center; }
.itc-role-card.selected .r-ico{ background:var(--itc-grad-red); }
.itc-role-card.itc-plan-card{ text-align:right; }
.itc-role-card .plan-name{ font-weight:900; font-size:16px; color:var(--itc-black); margin-bottom:4px; }
.itc-role-card .plan-price{ font-weight:900; font-size:22px; color:var(--itc-red); margin-bottom:10px; }
.itc-role-card .plan-price span{ font-size:12.5px; font-weight:600; color:var(--itc-gray-700); }
.itc-role-card .plan-features{ list-style:none; margin:0; padding:0; font-size:12.5px; color:var(--itc-gray-700); text-align:right; }
.itc-role-card .plan-features li{ padding:4px 0; }
.itc-role-card .plan-features li::before{ content:"✓ "; color:var(--itc-red); font-weight:800; }

.itc-skill-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.itc-skill-chip{
  padding:9px 16px; border-radius:var(--itc-radius-pill); border:1.5px solid var(--itc-gray-100); font-size:13px; font-weight:700;
  cursor:pointer; transition:all var(--itc-dur-fast); background:transparent;
}
.itc-skill-chip.on{ background:var(--itc-grad-red); border-color:transparent; color:#fff; }

.itc-upload-drop{
  border:1.6px dashed var(--itc-gray-300); border-radius:var(--itc-radius-md); padding:28px; text-align:center;
  color:var(--itc-gray-700); font-size:13.5px; cursor:pointer; position:relative;
  transition:border-color var(--itc-dur-fast), background var(--itc-dur-fast);
}
.itc-upload-drop:hover{ border-color:var(--itc-red); background:var(--itc-red-tint); }
.itc-upload-drop input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.itc-upload-drop .filename{ display:block; margin-top:6px; font-weight:700; color:var(--itc-black); }

.itc-btn.block{ width:100%; }
.itc-agree-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--itc-gray-700); margin-bottom:18px; }
.itc-agree-row input{ width:auto; }
.itc-agree-row a{ color:var(--itc-red); text-decoration:underline; }

@media (max-width:960px){ .itc-reg-shell{ grid-template-columns:1fr; } .itc-reg-side{ display:none; } }

/* =============================================
   5. SEEKER DASHBOARD — /my-applications/
   (كان جوه module-seekers.php > itc_seeker_dashboard_shortcode)
   ============================================= */
.itc-dash-wrap{max-width:900px;margin:0 auto;box-sizing:border-box;padding:40px 24px;direction:rtl;font-family:inherit;position:relative;}
@media (max-width:1024px){ .itc-dash-wrap{ padding:32px 20px; } }
@media (max-width:600px){ .itc-dash-wrap{ padding:24px 16px; } }
.itc-dash-header{background:var(--itc-grad-red);border-radius:var(--itc-radius-lg);padding:26px 30px;padding-left:150px;color:#fff;margin-bottom:24px;position:relative;overflow:hidden;z-index:1;}
.itc-dash-header::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.5px,transparent 1.5px);background-size:20px 20px;opacity:.5;pointer-events:none;}
.itc-dash-header h2{font-size:22px;font-weight:800;margin:0 0 4px;position:relative;}
.itc-dash-header p{opacity:.85;font-size:14px;margin:0;position:relative;}
@media (max-width:600px){
  .itc-dash-header{padding-left:30px;padding-top:64px;}
  .itc-logout-btn{left:24px;top:24px;}
}
.itc-logout-btn{position:absolute;left:24px;top:24px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);color:#fff;padding:8px 18px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;z-index:2;transition:background var(--itc-dur-fast);}
.itc-logout-btn:hover{background:rgba(255,255,255,.3);color:#fff;}
.itc-empty{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-lg); box-shadow:var(--itc-glass-shadow);
  padding:40px;text-align:center;color:var(--itc-gray-700);font-size:15px;position:relative;z-index:1;
}
.itc-empty a{color:var(--itc-red);font-weight:700;text-decoration:none;}

/* صفحة 404 (classima-child/404.php) */
.itc-404-wrap{ max-width:640px; }
.itc-404-wrap .itc-empty{ padding:64px 40px; }
.itc-404-code{ font-size:64px; font-weight:900; background:var(--itc-grad-red); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; margin-bottom:8px; }
.itc-404-title{ font-size:24px; font-weight:900; color:var(--itc-black); margin:0 0 10px; }
.itc-404-actions{ display:flex; gap:12px; justify-content:center; margin-top:24px; flex-wrap:wrap; }

/* صفحة المدونة — ترقيم الصفحات */
.itc-blog-pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:32px; }
.itc-blog-page-link{
  min-width:40px; height:40px; padding:0 8px; border-radius:var(--itc-radius-pill); display:flex; align-items:center; justify-content:center;
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1px solid var(--itc-glass-border); color:var(--itc-black); font-weight:700; font-size:14px; text-decoration:none;
  transition:all var(--itc-dur-fast);
}
.itc-blog-page-link:hover{ background:var(--itc-red-tint); color:var(--itc-red); }
.itc-blog-page-link.active{ background:var(--itc-grad-red); border-color:transparent; color:#fff; }

/* صفحة نتائج البحث (classima-child/search.php) — بتستخدم paginate_links() الأساسية
   بتاعة ووردبريس (.page-numbers) بدل الكلاس المخصص itc-blog-page-link. */
.itc-blog-pagination .page-numbers{
  min-width:40px; height:40px; padding:0 8px; border-radius:var(--itc-radius-pill); display:flex; align-items:center; justify-content:center;
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1px solid var(--itc-glass-border); color:var(--itc-black); font-weight:700; font-size:14px; text-decoration:none;
  transition:all var(--itc-dur-fast);
}
.itc-blog-pagination .page-numbers:hover{ background:var(--itc-red-tint); color:var(--itc-red); }
.itc-blog-pagination .page-numbers.current{ background:var(--itc-grad-red); border-color:transparent; color:#fff; }
.itc-blog-pagination .page-numbers.dots{ background:none; border:none; }
.itc-apps-table{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1;}
.itc-app-row{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md); padding:16px 22px;
  display:flex;justify-content:space-between;align-items:center;box-shadow:var(--itc-glass-shadow);flex-wrap:wrap;gap:10px;
  transition:transform var(--itc-dur-base) var(--itc-ease),box-shadow var(--itc-dur-base) var(--itc-ease);
}
.itc-app-row:hover{ transform:translateY(-3px); box-shadow:var(--itc-glass-shadow-hover); }
.itc-app-title{font-weight:800;font-size:16px;color:var(--itc-black);}
.itc-app-company,.itc-app-date{font-size:13px;color:#888;margin-top:4px;}
.itc-app-status{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;}
.itc-status-pending{background:#fff3cd;color:#856404;}
.itc-status-viewed{background:#d1ecf1;color:#0c5460;}
.itc-status-interview{background:#d4edda;color:#155724;}
.itc-status-accepted{background:#d4edda;color:#155724;font-weight:800;}
.itc-status-rejected{background:#f8d7da;color:#721c24;}
.itc-status-publish{background:#d4edda;color:#155724;font-weight:800;}
.itc-status-draft{background:var(--itc-gray-100);color:var(--itc-gray-700);}


/* =============================================
   6. COMPANY DASHBOARD — /company-panel/
   (كان جوه module-companies.php > itc_company_dashboard_shortcode)
   ============================================= */
.cp-tabs{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;position:relative;z-index:1;}
.cp-tab-btn{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1px solid var(--itc-glass-border); padding:11px 22px;border-radius:20px;font-weight:700;font-size:14px;cursor:pointer;color:#666;
  transition:all var(--itc-dur-fast);
}
.cp-tab-btn.active{background:var(--itc-grad-red);border-color:transparent;color:#fff;box-shadow:var(--itc-shadow-red);}
.cp-tab-content{display:none;position:relative;z-index:1;}
.cp-tab-content.active{display:block;}
.cp-job-card{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md);margin-bottom:16px;overflow:hidden;box-shadow:var(--itc-glass-shadow);
}
.cp-job-header{padding:16px 22px;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.25);flex-wrap:wrap;gap:10px;}
.cp-job-title{font-weight:800;font-size:16px;}
.cp-job-meta{font-size:13px;color:var(--itc-gray-700);margin-top:4px;}
.cp-feature-btn{background:linear-gradient(135deg,#ffb300,#ff8f00);color:#fff;border:none;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700;cursor:pointer;transition:transform var(--itc-dur-fast);}
.cp-feature-btn:hover{transform:translateY(-2px);}
.cp-app-row{padding:14px 22px;border-top:1px solid rgba(11,11,13,.06);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.cp-app-name{font-weight:700;}
.cp-app-contacts{display:flex;gap:14px;font-size:13px;margin-top:4px;}
.cp-app-contacts a{color:#555;text-decoration:none;}
.cp-app-msg{font-size:13px;color:var(--itc-gray-700);background:rgba(227,27,35,.05);border-right:3px solid var(--itc-red);padding:8px 12px;border-radius:0 6px 6px 0;margin-top:6px;}
.cp-no-apps{padding:18px 22px;color:#aaa;font-size:13px;}
.cp-status-select{padding:8px 12px;border-radius:8px;border:1.5px solid var(--itc-gray-100);background:rgba(255,255,255,.6);font-size:13px;font-family:inherit;}
#cp-tab-add form label,#cp-tab-profile form label{display:block;font-weight:700;font-size:13px;color:#333;margin-bottom:6px;}
#cp-tab-add form input,#cp-tab-add form select,#cp-tab-add form textarea,
#cp-tab-profile form input,#cp-tab-profile form select,#cp-tab-profile form textarea{width:100%;padding:12px 15px;background:rgba(255,255,255,.65);border:1.5px solid var(--itc-gray-100);border-radius:10px;font-size:14px;margin-bottom:16px;box-sizing:border-box;font-family:inherit;transition:border-color var(--itc-dur-fast),box-shadow var(--itc-dur-fast);}
#cp-tab-add form input:focus,#cp-tab-add form select:focus,#cp-tab-add form textarea:focus,
#cp-tab-profile form input:focus,#cp-tab-profile form select:focus,#cp-tab-profile form textarea:focus{border-color:var(--itc-red);outline:none;box-shadow:0 0 0 4px rgba(227,27,35,.12);}
#cp-add-job-msg{margin-top:10px;font-size:13px;font-weight:600;}


/* =============================================================
   7. FREELANCER CARDS - CLEAN DESIGN v5
   No overflow issues - avatar centered on header/body border
   ============================================================= */

.elementor-widget-itc_freelancers .itc-fl-tabs-row {
    
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin-bottom: 24px !important;
    direction: rtl !important;
}
.elementor-widget-itc_freelancers .itc-fl-tab {
    padding: 7px 18px !important;
    border-radius: 25px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: var(--itc-glass-fill-strong) !important;
    -webkit-backdrop-filter: var(--itc-glass-blur-sm) !important;
    backdrop-filter: var(--itc-glass-blur-sm) !important;
    color: #555 !important;
    border: 1px solid var(--itc-glass-border) !important;
    transition: all 0.2s !important;
}
.elementor-widget-itc_freelancers .itc-fl-tab:hover,
.elementor-widget-itc_freelancers .itc-fl-tab.active {
    background: var(--itc-red) !important;
    color: #fff !important;
    border-color: var(--itc-red) !important;
}

/* نفس شريط تابات التصنيف لكن بدون تحديد .elementor-widget-itc_freelancers — عشان يشتغل
   في صفحة /freelancers-page/ كمان (itc_freelancers_page shortcode في module-souq-pages.php
   بيستخدم نفس أسماء الكلاسات لكن من غير راپر إليمنتور، فكانت القواعد فوق دي ملهاش تأثير عليها). */
.itc-fl-tabs-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:4px;
}
.itc-fl-tabs-row::-webkit-scrollbar{ display:none; }
.itc-fl-tab{
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1.5px solid var(--itc-glass-border); border-radius:999px; padding:8px 18px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap; color:var(--itc-gray-700); transition:all var(--itc-dur-fast); font-family:var(--itc-font);
}
.itc-fl-tab:hover, .itc-fl-tab.active{ background:var(--itc-grad-red); border-color:transparent; color:#fff; }

.elementor-widget-itc_freelancers .itc-fl-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    row-gap: 32px !important;
}

/* === CARD (زجاجي) === */
.elementor-widget-itc_freelancers .itc-fl-card {
    background: var(--itc-glass-fill) !important;
    -webkit-backdrop-filter: var(--itc-glass-blur) !important;
    backdrop-filter: var(--itc-glass-blur) !important;
    border-radius: 16px !important;
    box-shadow: var(--itc-glass-shadow) !important;
    border: 1px solid var(--itc-glass-border) !important;
    overflow: visible !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    position: relative !important;
}
.elementor-widget-itc_freelancers .itc-fl-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--itc-glass-shadow-hover) !important;
}
/****** fix freelancer in mobile ***/
@media (max-width: 767px) {
  .elementor-widget-itc_freelancers .itc-fl-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-itc_freelancers .itc-fl-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .elementor-widget-itc_freelancers .itc-fl-card {
    min-width: 0 !important;
    border: 1px solid var(--itc-glass-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--itc-glass-shadow) !important;
    overflow: hidden !important;
    background: var(--itc-glass-fill) !important;
    -webkit-backdrop-filter: var(--itc-glass-blur) !important;
    backdrop-filter: var(--itc-glass-blur) !important;
  }

  .elementor-widget-itc_freelancers .itc-fl-card-header {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: visible !important;
  }

  .elementor-widget-itc_freelancers .itc-fl-card-body {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    background: transparent !important;
  }
}
/* === HEADER - red banner, overflow hidden === */
.elementor-widget-itc_freelancers .itc-fl-card-header {
    background: linear-gradient(135deg, var(--itc-red) 0%, var(--itc-red-dark) 100%) !important;
    height: 100px !important;
    border-radius: 0 !important;
    position: relative !important;
    overflow: visible !important;
}
.elementor-widget-itc_freelancers .itc-fl-card-header-pattern {
    position: absolute !important;
    inset: 0 !important;
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    opacity: 0.7 !important;
}

/* === AVAILABLE BADGE - small pill top right === */
.elementor-widget-itc_freelancers .itc-fl-available-badge {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    background: rgba(34,197,94,0.95) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    z-index: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
}

/* === HIDE CATEGORY TAG === */
.elementor-widget-itc_freelancers .itc-fl-cat-tag {
    display: none !important;
}

/* === AVATAR - inside header, centered at bottom, sticks out via negative margin on body === */
.elementor-widget-itc_freelancers .itc-fl-avatar-wrap {
    position: absolute !important;
    bottom: -36px !important;
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 4px solid #fff !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.18) !important;
    overflow: hidden !important;
    background: #dde3f0 !important;
    z-index: 10 !important;
}
.elementor-widget-itc_freelancers .itc-fl-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* === CARD BODY - padding-top makes room for avatar === */
.elementor-widget-itc_freelancers .itc-fl-card-body {
    padding: 46px 18px 18px !important;
    text-align: center !important;
    
    flex-direction: column !important;
    align-items: center !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
}

.elementor-widget-itc_freelancers .itc-fl-name {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--itc-black) !important;
    margin: 0 0 10px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

.elementor-widget-itc_freelancers .itc-fl-cat {
    display: none !important;
}

.elementor-widget-itc_freelancers .itc-fl-meta-row {
    
    justify-content: center !important;
    width: 100% !important;
    margin-bottom: 14px !important;
}

.elementor-widget-itc_freelancers .itc-fl-rating-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff9e6 !important;
    border: 1px solid #f0c040 !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
}
.elementor-widget-itc_freelancers .itc-fl-stars {
    color: #f4a700 !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}
.elementor-widget-itc_freelancers .itc-fl-rating-num {
    font-weight: 800 !important;
    font-size: 14px !important;
    color: #b8860b !important;
}

/* === INFO EXTRA === */
.elementor-widget-itc_freelancers .itc-fl-info-extra {
    width: 100% !important;
    
    flex-direction: column !important;
    gap: 7px !important;
    margin-bottom: 14px !important;
}
.elementor-widget-itc_freelancers .itc-fl-info-item {
    
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #555 !important;
    font-weight: 500 !important;
    padding: 7px 12px !important;
    background: #f8f9ff !important;
    border-radius: 8px !important;
    border: 1px solid #eef0ff !important;
    margin-bottom: 0 !important;
    direction: rtl !important;
}
.elementor-widget-itc_freelancers .itc-fl-service-item {
    background: #fff0f1 !important;
    border-color: #ffd0d3 !important;
    color: var(--itc-red-dark) !important;
    font-weight: 700 !important;
}
.elementor-widget-itc_freelancers .itc-fl-info-icon {
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
.elementor-widget-itc_freelancers .itc-fl-info-text {
    font-size: 12px !important;
    color: #444 !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    text-align: right !important;
}
.elementor-widget-itc_freelancers .itc-fl-stat-icon {
    font-size: 16px !important;
}
.elementor-widget-itc_freelancers .itc-fl-stats-row {
    
    gap: 10px !important;
    justify-content: center !important;
}
.elementor-widget-itc_freelancers .itc-fl-stat-badge {
    
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    background: #f5f7fa !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    flex: 1 !important;
    min-width: 70px !important;
    border: 1px solid #e8e8e8 !important;
}
.elementor-widget-itc_freelancers .itc-fl-stat-num {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--itc-red) !important;
    line-height: 1.2 !important;
}
.elementor-widget-itc_freelancers .itc-fl-stat-label {
    font-size: 11px !important;
    color: #888 !important;
    font-weight: 500 !important;
}

.elementor-widget-itc_freelancers .itc-fl-divider {
    width: 100% !important;
    border: none !important;
    border-top: 1px solid #f0f2f5 !important;
    margin: 4px 0 12px !important;
}

.elementor-widget-itc_freelancers .itc-fl-cta-btn {
    display: block !important;
    width: 100% !important;
    background: linear-gradient(135deg, var(--itc-red), var(--itc-red-dark)) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 10px !important;
    padding: 12px 0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: opacity 0.2s, transform 0.2s !important;
    box-shadow: 0 4px 12px rgba(227,27,35,0.3) !important;
    letter-spacing: 0.3px !important;
}
.elementor-widget-itc_freelancers .itc-fl-cta-btn:hover {
    opacity: 0.88 !important;
    color: #fff !important;
}

.elementor-widget-itc_freelancers .itc-fl-see-all {
    text-align: center !important;
    margin-top: 32px !important;
}
.elementor-widget-itc_freelancers .itc-fl-see-all a {
    display: inline-block !important;
    background: transparent !important;
    border: 2px solid var(--itc-red) !important;
    color: var(--itc-red) !important;
    padding: 10px 36px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s !important;
}
.elementor-widget-itc_freelancers .itc-fl-see-all a:hover {
    background: var(--itc-red) !important;
    color: #fff !important;
}


/* =============================================
   8. JOBS BOARD - MODERN DESIGN (Elementor widget)
   ============================================= */

.elementor-widget-itc_jobs_board .itc-jobs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-top: 20px !important;
}

.elementor-widget-itc_jobs_board .itc-job-card {
    background: var(--itc-glass-fill) !important;
    -webkit-backdrop-filter: var(--itc-glass-blur) !important;
    backdrop-filter: var(--itc-glass-blur) !important;
    border-radius: 16px !important;
    border: 1px solid var(--itc-glass-border) !important;
    box-shadow: var(--itc-glass-shadow) !important;
    overflow: hidden !important;
    
    flex-direction: column !important;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
    position: relative !important;
}
.elementor-widget-itc_jobs_board .itc-job-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, var(--itc-red), var(--itc-red-light)) !important;
    transform: scaleX(0) !important;
    transform-origin: right !important;
    transition: transform 0.3s ease !important;
}
.elementor-widget-itc_jobs_board .itc-job-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--itc-glass-shadow-hover) !important;
    border-color: rgba(227,27,35,0.3) !important;
}
.elementor-widget-itc_jobs_board .itc-job-card:hover::before {
    transform: scaleX(1) !important;
}

.elementor-widget-itc_jobs_board .itc-job-header {
    
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 18px 14px !important;
}

.elementor-widget-itc_jobs_board .itc-job-logo {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--itc-red), var(--itc-red-dark)) !important;
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(227,27,35,0.25) !important;
    flex-shrink: 0 !important;
}
.elementor-widget-itc_jobs_board .itc-job-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}

.elementor-widget-itc_jobs_board .itc-job-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--itc-black) !important;
    margin: 0 0 4px !important;
    line-height: 1.4 !important;
    text-align: right !important;
    direction: rtl !important;
}
.elementor-widget-itc_jobs_board .itc-job-company {
    font-size: 13px !important;
    color: var(--itc-red) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-align: right !important;
}

.elementor-widget-itc_jobs_board .itc-job-meta {
    
    flex-direction: row-reverse !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 18px !important;
    border-top: 1px solid #f5f5f5 !important;
    flex-wrap: wrap !important;
}
.elementor-widget-itc_jobs_board .itc-job-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: #666 !important;
    font-weight: 500 !important;
}

.elementor-widget-itc_jobs_board .itc-job-type {
    display: inline-block !important;
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 20px !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.elementor-widget-itc_jobs_board .itc-job-apply {
    display: block !important;
    margin: 0 18px 18px !important;
    background: linear-gradient(135deg, var(--itc-red), var(--itc-red-dark)) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 10px !important;
    padding: 11px 0 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
    box-shadow: 0 4px 12px rgba(227,27,35,0.3) !important;
}
.elementor-widget-itc_jobs_board .itc-job-apply:hover {
    opacity: 0.88 !important;
    color: #fff !important;
}

.elementor-widget-itc_jobs_board .itc-jobs-view-all {
    text-align: center !important;
    margin-top: 28px !important;
}
.elementor-widget-itc_jobs_board .itc-jobs-view-all a {
    display: inline-block !important;
    border: 2px solid var(--itc-red) !important;
    color: var(--itc-red) !important;
    padding: 10px 36px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s !important;
}
.elementor-widget-itc_jobs_board .itc-jobs-view-all a:hover {
    background: var(--itc-red) !important;
    color: #fff !important;
}

/* Jobs board mobile layout fix */
@media (max-width: 767px) {
  .elementor-widget-itc_jobs_board .itc-jobs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .elementor-widget-itc_jobs_board .itc-job-card {
    min-width: 0 !important;
  }

  .elementor-widget-itc_jobs_board .itc-job-header {
    align-items: flex-start !important;
  }

  .elementor-widget-itc_jobs_board .itc-job-header > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .elementor-widget-itc_jobs_board .itc-job-title,
  .elementor-widget-itc_jobs_board .itc-job-company,
  .elementor-widget-itc_jobs_board .itc-job-meta span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .elementor-widget-itc_jobs_board .itc-job-apply {
    width: calc(100% - 36px) !important;
  }
}


/* =============================================
   9. FREELANCER SECTION PAGE — Header Row + Avatar Fix
   (نفس تخطيط ودجت Elementor لكن على صفحة السوق المستقلة)
   ============================================= */

.itc-fl-wrap .itc-fl-header-row {
  
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  direction: rtl !important;
}

.itc-fl-wrap .itc-fl-title-group {
  
  flex-direction: column !important;
  gap: 6px !important;
  height: auto !important;
  align-items: flex-end !important;
}

.itc-fl-wrap .itc-fl-heading {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--itc-black) !important;
  margin: 0 !important;
  text-align: right !important;
  direction: rtl !important;
}

.itc-fl-wrap .itc-fl-accent {
  display: block !important;
  width: 40px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--itc-red), var(--itc-red-dark)) !important;
  border-radius: 2px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  margin-bottom: 8px !important;
}

.itc-fl-wrap .itc-fl-stats {
  font-size: 13px !important;
  color: #888 !important;
}

.itc-fl-wrap .itc-fl-stats strong {
  color: var(--itc-red) !important;
  font-weight: 800 !important;
}

.itc-fl-wrap .itc-fl-hire-btn {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--itc-red) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 25px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}

.itc-fl-wrap .itc-fl-hire-btn:hover {
  background: var(--itc-red-dark) !important;
  color: #fff !important;
}

/* Avatar الدائري داخل الكارت في صفحة القسم */
.itc-fl-wrap .itc-fl-avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  
  align-items: center !important;
  justify-content: center !important;
  background: #dde3f0 !important;
}

.itc-fl-wrap .itc-fl-avatar-placeholder,
.itc-fl-wrap .itc-fl-avatar > div {
  width: 100% !important;
  height: 100% !important;
  
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.itc-fl-wrap .itc-fl-avatar img.emoji {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}


/* =============================================
   10. USED PRODUCTS — Mobile Layout Fix
   ============================================= */
@media (max-width: 767px) {
  .elementor-widget-itc_used_products .itc-up-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .elementor-widget-itc_used_products .itc-up-card {
    min-width: 0 !important;
  }

  .elementor-widget-itc_used_products .itc-up-add-btn {
    width: 100% !important;
    text-align: center !important;
  }

  .elementor-widget-itc_used_products .itc-up-title-wrap {
    flex-wrap: wrap !important;
  }
  .elementor-widget-itc_used_products .itc-up-sec,
  .elementor-widget-itc_used_products .itc-up-inner {
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }
}


/* =============================================
   11. FREELANCERS PAGE — Mobile Wrap Padding
   ============================================= */
@media (max-width: 767px) {
  .elementor-widget-itc_freelancers .itc-fl-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}


/* =============================================
   12. YOUTUBE TABS WIDGET — Mobile Fix
   (ملحوظة: الودجت نفسه مش جوه itc-core، مسجل في مكان تاني —
   القاعدة موجودة هنا احتياطي عشان الفيوجوال يفضل متسق لو استخدم)
   ============================================= */
@media (max-width: 767px) {
  .elementor-widget-itc_youtube_tabs .itc-yt-wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
}


/* =============================================
   13. MOBILE OVERLAY FIX — Language Switcher + Bottom Nav
   بيجي بعد قسم 1 قصدًا عشان يغلب على قيم body/itbot الافتراضية
   في المقاسات الصغيرة (آخر قاعدة بنفس specificity هي اللي تكسب).
   ============================================= */
@media (max-width: 767px) {
  #trp-floater-ls {
    bottom: 86px !important;
    z-index: 9998 !important;
  }

  body {
    padding-bottom: 86px !important;
  }

  #itbot-toggle {
    bottom: 132px !important;
    left: 0 !important;
    z-index: 100000 !important;
  }
  #itbot-wrapper,
  #itbot-menu {
    bottom: 88px !important;
  }

  #itc-sections-nav .itc-nav-inner {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
  }

  #itc-sections-nav .itc-nav-item {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    scroll-snap-align: start;
  }
}

/* ITBOT stateful toggle icons (ITBOT نفسه سنيبت منفصل، دي شكل الأيقونة بس) */
#itbot-toggle {
  font-size: 0 !important;
  line-height: 1 !important;
}

#itbot-toggle::before {
  content: "" !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

body:has(#itbot-wrapper.itbot-hidden) #itbot-toggle::before {
  content:"🤖" !important;
  font-size:16px !important;
  line-height:1.4 !important;
}

body:has(#itbot-wrapper:not(.itbot-hidden)) #itbot-toggle::before {
  content:"👁"  !important;
  font-size:16px !important;
  line-height:1.4 !important;
}


/* =============================================================
   14. "أضف شركتك" (Add Company) — Legacy Elementor Page Styles
   تنبيه: القواعد دي بتستهدف #wrap-company / .itc-ph / .itc-plans /
   #itc-company-form / .itc-pay-modal ... إلخ — دول مش موجودين في
   أي شورت كود جوه itc-core حاليًا (فورم التسجيل الفعلي [itc_company_register]
   بيستخدم .itc-auth-* بس، قسم 4 فوق، من غير خطط أسعار أو مودال دفع).
   يبدو إنها بقايا من تصميم صفحة "أضف شركتك" (Elementor add-company-2)
   القديمة أو تصميم مخطط له لسه ملتحقش بالفورم الحالي. سايبها هنا
   من غير حذف عشان ما تتفقدش، لكنها مش هتظهر تأثير على أي حاجة حاليًا
   لحد ما يتقرر: إما نبني الفورم الجديد بنفس الكلاسات دي، أو نشيلها.
   ============================================================= */

#wrap-company {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  font-family: inherit;
  direction: rtl;
}

.itc-ph {
  background: linear-gradient(135deg, var(--itc-black) 0%, #16213e 50%, #0f3460 100%);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.itc-ph h1 {
  color: #fff;
  font-size: 28px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.itc-ph p {
  color: rgba(255,255,255,0.8);
  margin: 0;
  font-size: 15px;
}

.ph-bar {
  display: inline-block;
  width: 4px;
  height: 30px;
  background: var(--itc-red);
  border-radius: 2px;
  margin-left: 10px;
  vertical-align: middle;
}

.itc-success {
  display: none;
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 2px solid #28a745;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  text-align: center;
}

.itc-success.active {
  display: block;
}

.itc-success .si {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.itc-success h2 {
  color: #155724;
  font-size: 22px;
  margin: 0 0 8px 0;
}

.itc-success p {
  color: #155724;
  margin: 0 0 16px 0;
}

.itc-success .itc-sbtn,
a.itc-sbtn {
  display: inline-block;
  background: var(--itc-red);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.itc-success .itc-sbtn:hover,
a.itc-sbtn:hover {
  background: var(--itc-red-dark);
}

.itc-plans {
  margin-bottom: 30px;
}

.itc-plans-hd {
  font-size: 18px;
  font-weight: 700;
  color: var(--itc-black);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.itc-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.itc-plan {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  position: relative;
}

.itc-plan:hover {
  border-color: var(--itc-red);
  box-shadow: 0 4px 20px rgba(227,27,35,0.15);
}

.itc-plan.sel {
  border-color: var(--itc-red);
  background: linear-gradient(135deg, #fff5f5, #fff);
  box-shadow: 0 4px 20px rgba(227,27,35,0.2);
}

.itc-plan.free-p .pb {
  background: #28a745;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.itc-card {
  text-align: center;
}

.itc-sec-ttl {
  font-size: 17px;
  font-weight: 700;
  color: var(--itc-black);
  margin-bottom: 4px;
}

.itc-card .price {
  font-size: 28px;
  font-weight: 800;
  color: var(--itc-red);
  margin: 8px 0;
}

.itc-card .price span {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.itc-card .duration {
  font-size: 13px;
  color: #888;
  margin-bottom: 12px;
}

.itc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}

.itc-card ul li {
  padding: 4px 0;
  font-size: 13px;
  color: #555;
}

.itc-card ul li::before {
  content: "✓ ";
  color: #28a745;
  font-weight: 700;
}

#itc-company-form {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

.itc-row {
  margin-bottom: 20px;
}

.itc-row.c1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.itc-row.c2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.itc-row.c3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .itc-row.c2,
  .itc-row.c3 {
    grid-template-columns: 1fr;
  }
  .itc-plans-grid {
    grid-template-columns: 1fr;
  }
}

#itc-company-form label {
  display: block;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  font-size: 14px;
}

#itc-company-form input[type="text"],
#itc-company-form input[type="tel"],
#itc-company-form input[type="url"],
#itc-company-form textarea,
#itc-company-form select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  background: #fafafa;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#itc-company-form input:focus,
#itc-company-form textarea:focus,
#itc-company-form select:focus {
  outline: none;
  border-color: var(--itc-red);
  background: #fff;
}

#itc-company-form textarea {
  min-height: 120px;
  resize: vertical;
}

#itc-company-form .itc-sec-ttl {
  font-size: 16px;
  font-weight: 700;
  color: var(--itc-black);
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 20px;
  border-right: 4px solid var(--itc-red);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}

.itc-row input[type="file"] {
  padding: 8px;
  background: #f8f9fa;
  border: 2px dashed #ddd;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  box-sizing: border-box;
}

.itc-tc {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
  cursor: pointer;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.itc-tc input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.itc-tc a {
  color: var(--itc-red);
  font-weight: 600;
}

.itc-sb {
  margin-top: 24px;
  text-align: center;
}

button.itc-sbtn,
#itc-company-form button[type="submit"] {
  background: linear-gradient(135deg, var(--itc-red), var(--itc-red-dark));
  color: #fff;
  border: none;
  padding: 14px 40px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(227,27,35,0.3);
}

button.itc-sbtn:hover,
#itc-company-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(227,27,35,0.4);
}

.itc-ntc {
  background: #fff8e1;
  border-right: 4px solid #ffc107;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #7c6000;
  display: none;
  align-items: center;
  gap: 8px;
}
.itc-ntc.active { display: flex; }
.itc-ntc.err { background: #fdeaea; border-right-color: var(--itc-red); color: #9b2b2b; }
.itc-ntc.ok { background: #eafaf1; border-right-color: #28a745; color: #1a7a40; }

.itc-logo-up,
.itc-logo-box {
  border: 2px dashed #ddd;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s;
  background: #fafafa;
}

.itc-logo-up:hover,
.itc-logo-box:hover {
  border-color: var(--itc-red);
}

.itc-logo-box img:not(.emoji) {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}

.pb {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 8px;
}

.free-p .pb { background: #28a745; color: #fff; }
.itc-plan:not(.free-p) .pb { background: var(--itc-red); color: #fff; }

.itc-plan .pn {
  font-size: 15px;
  font-weight: 700;
  color: var(--itc-black);
  margin: 8px 0 4px 0;
}

.itc-plan .pp {
  font-size: 26px;
  font-weight: 800;
  color: var(--itc-red);
  margin: 6px 0;
  line-height: 1;
}

.itc-plan .pd {
  font-size: 12px;
  color: #888;
  margin-bottom: 12px;
  background: #f0f0f0;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
}

.itc-plan .pf {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  text-align: right;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.itc-plan .pf li {
  padding: 4px 0;
  font-size: 13px;
  color: #555;
}

.itc-plan .pf li::before {
  content: "✓ ";
  color: #28a745;
  font-weight: 700;
}

.itc-plan.sel .pp { color: var(--itc-red); }
.itc-plan.sel .pn { color: var(--itc-red); }

.itc-pay-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  justify-content: center;
  align-items: center;
}

.itc-pay-modal.active {
  display: flex;
}

/* =============================================================
   14. SOUQ SECTION PAGES — كروت مشتركة (وظائف/منتجات مستعملة/خدمات/شركات)
   بتستخدم نظام itc-card-modern/itc-btn/itc-badge/itc-price (قسم 0.2) بدل
   ما كل صفحة تكرر inline styles خاصة بيها — التنسيق نفسه، كود واحد بس.
   ============================================================= */
.itc-souq-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; direction:rtl; }
.itc-souq-grid.itc-souq-grid-lg{ grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); }

.itc-card-img{ width:100%; height:180px; object-fit:cover; display:block; }
.itc-card-img.itc-card-img-sm{ height:160px; }
.itc-card-title{ font-size:14px; font-weight:700; color:var(--itc-black); margin:6px 0; line-height:1.4; }

/* كارت الشركة — تخطيط ممركز بأڤاتار دائري */
.itc-souq-company-card{ text-align:center; padding:24px 16px; }
.itc-souq-company-avatar{
  width:80px; height:80px; border-radius:var(--itc-radius-md); object-fit:cover;
  margin:0 auto 12px; display:block; border:2px solid var(--itc-gray-100);
}
.itc-souq-company-avatar-fallback{
  width:80px; height:80px; border-radius:var(--itc-radius-md); background:var(--itc-grad-red);
  color:var(--itc-white); font-size:32px; font-weight:800; display:flex; align-items:center;
  justify-content:center; margin:0 auto 12px;
}
.itc-souq-company-desc{ font-size:12px; color:var(--itc-gray-700); margin:10px 0; line-height:1.6; }
.itc-souq-company-card .itc-btn{ margin-top:8px; }

/* كارت الوظيفة — تخطيط صف علوي (لوجو + عنوان) وصف سفلي (موقع + نوع الدوام) */
.itc-souq-job-header{ display:flex; flex-direction:row-reverse; align-items:center; gap:14px; padding:18px 18px 14px; }
.itc-souq-job-logo{
  width:56px; height:56px; min-width:56px; border-radius:var(--itc-radius-sm); background:var(--itc-grad-red);
  color:var(--itc-white); font-size:22px; font-weight:800; display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0;
}
.itc-souq-job-logo img{ width:100%; height:100%; object-fit:cover; }
.itc-souq-job-info{ flex:1; text-align:right; }
.itc-souq-meta-strong{ font-size:13px; color:var(--itc-red); font-weight:600; margin:0; }
.itc-souq-job-meta{ display:flex; flex-direction:row-reverse; align-items:center; gap:10px; padding:10px 18px; border-top:1px solid var(--itc-gray-100); flex-wrap:wrap; }
.itc-souq-job-location{ font-size:12px; color:var(--itc-gray-700); }
/* أزرق نوع الدوام لون دلالي (status) مش هوية — مسموح يفضل زي ما هو (راجع design-system.md قسم 2) */
.itc-souq-job-type{ background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; border-radius:20px; padding:3px 12px; font-size:12px; font-weight:600; }
.itc-souq-job-apply{ display:block; margin:0 18px 18px; }

@media (max-width:600px){
  .itc-souq-grid{ grid-template-columns:1fr; gap:16px; }
}

/* =============================================================
   15. SINGLE COMPANY / JOB PAGES — إخفاء الـ byline العام
   الثيم بيحط UL.post-meta (تاريخ/كاتب/تعليقات) فوق كل single post عادي —
   منطقي لمقال مدونة، مش لصفحة شركة أو وظيفة (محدش يهمه مين الموظف اللي
   دخل بيانات الشركة، وعداد التعليقات "(0)" بيدي انطباع إن الصفحة فاضية).
   المحتوى الحقيقي المفيد (بيانات التواصل + الوظائف المتاحة للشركة، تفاصيل
   الوظيفة + فورم التقديم للوظيفة) بييجي من itc-core نفسه (module-companies.php /
   module-jobs.php) وده اللي المفروض يبان، مش الـ byline العام.
   ============================================================= */
.single-itc_company .post-meta,
.single-job_listing .post-meta,
.single-itc_freelancer .post-meta,
.single-itc_product .post-meta,
.single-itc_service .post-meta{ display:none !important; }

/* نفس المنطق: الثيم بيحط .post-footer (روابط مشاركة سوشيال ميديا بدون أي تنسيق)
   تحت كل single post عادي — مش موجودة في تصميم theme3 خالص، وطلعت شكلها
   افتراضي بايظ (قايمة نقط عادية) وسط صفحة متصممة بالكامل. */
.single-itc_company .post-footer,
.single-job_listing .post-footer,
.single-itc_freelancer .post-footer,
.single-itc_product .post-footer,
.single-itc_service .post-footer{ display:none !important; }

/* الثيم بيطبع الصورة المميزة تلقائيًا فوق the_content على أي single post عادي —
   منطقي لمقال مدونة، لكن الصفحات دي كلها ليها هيرو/جاليري خاص بيهم مبني في itc-core
   (غلاف + أڤاتار، أو سلايدر صور كامل لصفحة المنتج) فبييجي الشكل الافتراضي زيادة
   وغالبًا مقصوص بشكل مش حلو (aspect ratio التيم مش مناسب لصور المنتجات الحقيقية). */
.single-itc_company .wp-post-image,
.single-job_listing .wp-post-image,
.single-itc_freelancer .wp-post-image,
.single-itc_product .wp-post-image,
.single-itc_service .wp-post-image{ display:none !important; }

/* صفحة بروفايل المستقل المفردة (module-freelancers.php) */
.itc-fl-profile{ direction:rtl; }
.itc-fl-profile-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.itc-fl-profile-meta span{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--itc-black); background:var(--itc-gray-50); border:1px solid var(--itc-gray-100);
  border-radius:20px; padding:6px 14px;
}
.itc-fl-profile-rating{ color:var(--itc-red); }
.itc-fl-profile-bio{ color:var(--itc-gray-700); line-height:1.9; margin-bottom:24px; }

/* صفحة بروفايل مستقل — تصميم كامل (غلاف + أڤاتار + إحصائيات + نبذة) */
/* .itc-flp-* — literal port of theme3's .profile-* system (company-profile.html/
   freelancer-profile.html), same values (260px cover, -92px overlap, 132px/28px-radius
   avatar, flex profile-stats) instead of the earlier ad-hoc 120px/56px/circle version. */
.itc-flp{ direction:rtl; max-width:820px; margin:0 auto; }

/* ── الكفر لازم يلزق في الهيدر ──────────────────────────────────────────
   العطل: صفحة الشركة بترسم `.itc-flp` مباشرة تحت `.site-content` ⇒ الكفر
   بيلزق في الهيدر (مقيس: الاتنين عند y=83). وصفحة الوظيفة بتلفّه في
   `.itc-section-shell` اللي عندها `padding:56px 24px` ⇒ الكفر بينزل لـy=139
   ⇒ شريط رمادي بعرض 56px بين الهيدر والكفر. (شكوى المالك · 2026-08-12)

   ⇒ السبب مش في الكفر ولا في الهيدر — الاتنين متطابقين في الصفحتين.
     الفرق كله إن قالب الوظيفة زوّد غلافًا بـpadding علوي.

   والعلاج بيشيل الـpadding العلوي بس (والسفلي يفضل 56 عشان الفوتر).
   والقاعدتين مقصودتين: التانية `:has()` بتغطي أي صفحة جاية تلفّ كفرًا في
   shell، والأولى بالـbody class بتضمن الوظيفة حتى لو المتصفح قديم
   ومش داعم `:has()` — فمفيش اعتماد على ميزة واحدة. */
.single-job_listing .itc-section-shell{ padding-top:0 !important; }
.itc-section-shell:has(> .itc-flp){ padding-top:0 !important; }
.itc-flp-cover{
  position:relative; height:260px; border-radius:0 0 var(--itc-radius-lg) var(--itc-radius-lg);
  overflow:hidden; background:var(--itc-grad-dark);
}
.itc-flp-cover img{ width:100%; height:100%; object-fit:cover; filter:blur(6px) brightness(.9); transform:scale(1.1); }
.itc-flp-cover::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,11,13,.05), rgba(11,11,13,.55));
}
/* الأفاتار بس هو اللي المفروض "يطلع" فوق صورة الكفر — الاسم والسطر التاني
   والأزرار المفروض يفضلوا تحت الكفر خالص عشان يبانوا واضحين. لو السحب لفوق
   (margin-top سالب) كان على itc-flp-header نفسه، كل حاجة جواه (مش بس الأفاتار)
   كانت بتتشال لفوق معاه؛ فبقى الاسم/السطر التاني بيدخلوا جوه منطقة الصورة.
   الحل: نشيل السحب من الهيدر، ونحطه بس على itc-flp-avatar، فيفضل هو اللي
   بيطلع فوق الكفر لوحده، وباقي المحتوى (الاسم/الأزرار) يفضل تحت طبيعي. */
.itc-flp-header{
  position:relative; z-index:2; padding:0 8px; margin-top:30px;
  display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap;
}
.itc-flp-avatar{
  width:132px; height:132px; min-width:132px; border-radius:28px; border:5px solid var(--itc-bg-base,#EEF0F3);
  box-shadow:0 14px 30px rgba(11,11,13,.2); overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:var(--itc-white); font-size:46px; font-weight:800; font-family:Arial,sans-serif; background:var(--itc-grad-red); flex:none;
  /* مركز الأفاتار (132/2=66) يساوي آخر صورة الكفر بالظبط: -30 (هيدر) -66 = -96 */
  margin-top:-96px;
}
.itc-flp-avatar img{ width:100%; height:100%; object-fit:cover; }
.itc-flp-avatar-square{ background:var(--itc-white); }
.itc-flp-avatar-square img{ object-fit:contain; padding:10px; }
.itc-flp-headline{ flex:1; min-width:200px; padding-bottom:6px; overflow:hidden; }
/* الاسم والسطر التاني (مدينة/تخصص/حالة) لازم يفضلوا سطر واحد بس مهما كان طول
   الكلام — لو لفّوا سطرين، الـ headline بيبقى أطول من الأفاتار (bottom-aligned
   مع بعض)، فالنص بيتشال لفوق جوه منطقة صورة الكفر (نص غامق فوق صورة = نص
   مختفي عمليًا). ده كان بيحصل حتى على الديسكتوب مش الموبايل بس. */
.itc-flp-name{ font-size:25px; font-weight:900; margin:0 0 4px; display:flex; align-items:center; gap:8px; color:var(--itc-black); flex-wrap:nowrap; }
.itc-flp-name-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.itc-flp-verified{ color:#fff; background:var(--itc-red); width:20px; height:20px; border-radius:50%; display:inline-grid; place-items:center; font-size:11px; flex:none; }
.itc-flp-sub{ color:var(--itc-gray-700); font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; display:block; }
.itc-flp-tagline{ font-size:17px; font-weight:700; color:var(--itc-black); margin:0 0 10px; }
.itc-flp-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.itc-flp-actions{ display:flex; gap:10px; padding-bottom:6px; flex-wrap:wrap; }
.itc-flp-actions .itc-icon-btn{ background:var(--itc-glass-fill-strong); }

.itc-flp-stats{
  display:flex; gap:28px; flex-wrap:wrap; margin:22px 0 28px; padding:22px 28px;
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md); box-shadow:var(--itc-glass-shadow);
}
.itc-flp-stat{ text-align:center; }
.itc-flp-stat-num{ display:block; font-size:20px; font-weight:900; color:var(--itc-black); }
.itc-flp-stat-label{ font-size:12px; color:var(--itc-gray-700); }

.itc-ad-slot{
  position:relative; margin:22px 0 28px; padding:14px; text-align:center; overflow:hidden;
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md); min-height:60px;
}
.itc-ad-slot-label{
  position:absolute; top:6px; inset-inline-end:10px; font-size:10px; color:var(--itc-gray-500);
  letter-spacing:.5px; text-transform:uppercase; z-index:1;
}
.itc-ad-slot .adsbygoogle{ margin:0 auto; }

.itc-flp-tabs{
  display:flex; gap:6px; margin:0 0 22px; padding:6px; width:fit-content;
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:999px; box-shadow:var(--itc-glass-shadow);
}
.itc-flp-tab{
  padding:11px 22px; border:none; background:transparent; border-radius:999px; font-weight:700; font-size:14px;
  color:var(--itc-gray-700); cursor:pointer; font-family:var(--itc-font); transition:all var(--itc-dur-fast); outline:none;
}
.itc-flp-tab.active{ background:var(--itc-grad-red); color:#fff; box-shadow:0 8px 18px rgba(227,27,35,.28); }
/* theme3 مفيش عنده أي تخصيص للـ focus أصلاً، فكان طالع outline المتصفح الافتراضي
   (رمادي/أسود جامد) لما تدوس على زرار التاب — مش متسق مع باقي التصميم. بدّلناه
   بحلقة حمراء شفافة خفيفة زي نفس أسلوب focus بتاع حقول الفورم في theme3. */
.itc-flp-tab:focus-visible{ box-shadow:0 0 0 3px rgba(227,27,35,.25); }
.itc-flp-tab.active:focus-visible{ box-shadow:0 8px 18px rgba(227,27,35,.28), 0 0 0 3px rgba(227,27,35,.25); }
.itc-flp-tab-panel{ display:none; }
.itc-flp-tab-panel.active{ display:block; }

.itc-flp-section{ max-width:820px; margin:0 auto 28px; }
.itc-flp-section-title{ font-size:16px; font-weight:800; color:var(--itc-black); margin:0 0 12px; }
.itc-flp-bio{ color:var(--itc-gray-700); line-height:1.9; font-size:15px; }

/* البورتفوليو — نسخة حرفية من theme3 §"Portfolio" */
.itc-flp-portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.itc-flp-portfolio-item{ position:relative; border-radius:var(--itc-radius-md); overflow:hidden; aspect-ratio:4/3; display:block; }
.itc-flp-portfolio-item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--itc-dur-slow); }
.itc-flp-portfolio-item:hover img{ transform:scale(1.06); }
.itc-flp-portfolio-overlay{
  position:absolute; inset:0; background:linear-gradient(0deg, rgba(11,11,13,.85), transparent 55%); display:flex; align-items:flex-end; padding:16px;
  opacity:0; transition:opacity var(--itc-dur-fast);
}
.itc-flp-portfolio-item:hover .itc-flp-portfolio-overlay{ opacity:1; }
.itc-flp-portfolio-overlay span{ color:#fff; font-weight:700; font-size:13.5px; }
@media (max-width:900px){ .itc-flp-portfolio-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .itc-flp-portfolio-grid{ grid-template-columns:1fr; } }

/* المهارات — bars */
.itc-flp-skill-bars{ display:flex; flex-direction:column; gap:16px; }
.itc-flp-skill-bar-row .top{ display:flex; justify-content:space-between; font-size:13.5px; font-weight:700; margin-bottom:8px; color:var(--itc-black); }
.itc-flp-skill-bar-track{ height:8px; border-radius:6px; background:var(--itc-gray-100); overflow:hidden; }
.itc-flp-skill-bar-fill{ height:100%; border-radius:6px; background:var(--itc-grad-red); display:block; }

/* التقييمات */
.itc-flp-rating{ display:flex; align-items:center; gap:2px; color:#E8A100; font-size:13px; }
.itc-flp-review-card{
  background:var(--itc-white); border:1px solid var(--itc-gray-100); border-radius:var(--itc-radius-md); padding:20px;
}
.itc-flp-review-text{ font-size:13.5px; color:var(--itc-gray-700); line-height:1.8; margin:10px 0 0; }
.itc-flp-review-author{ font-weight:700; font-size:13px; margin-top:10px; color:var(--itc-black); }
.itc-flp-review-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:640px){ .itc-flp-review-grid{ grid-template-columns:1fr; } }
.itc-flp-review-form{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md); padding:20px; margin-bottom:24px;
}
.itc-flp-review-form input, .itc-flp-review-form textarea{
  width:100%; padding:10px 14px; border:1px solid var(--itc-gray-300); border-radius:var(--itc-radius-sm);
  font-family:var(--itc-font); font-size:14px; margin-bottom:12px; box-sizing:border-box;
}
.itc-flp-star-input{ display:flex; gap:4px; margin-bottom:12px; direction:ltr; justify-content:flex-end; }
.itc-flp-star-input i{ font-size:22px; color:var(--itc-gray-300); cursor:pointer; transition:color var(--itc-dur-fast); }
.itc-flp-star-input i.active{ color:#E8A100; }
.itc-flp-review-msg{ font-size:13.5px; padding:10px 14px; border-radius:var(--itc-radius-sm); margin-top:10px; display:none; }
.itc-flp-review-msg.ok{ display:block; background:var(--itc-red-tint); color:var(--itc-red-dark); }

/* لوحات تحكم المستقل/الشركة — فورمات بروفايل داخل بطاقة .itc-flp-review-form */
.itc-flp-review-form .itc-form-row input,
.itc-flp-review-form .itc-form-row select,
.itc-flp-review-form .itc-form-row textarea{ margin-bottom:0; }
.itc-flp-review-form .itc-form-row{ margin-bottom:16px; }
.itc-flp-review-form .itc-form-row:last-child{ margin-bottom:0; }
.itc-field-hint{ font-size:12px; color:var(--itc-gray-500); margin:6px 0 0; }
.itc-field-hint code{ background:var(--itc-gray-100); padding:1px 6px; border-radius:4px; direction:ltr; display:inline-block; }
.itc-fl-photo-row{ display:flex; gap:18px; align-items:stretch; margin-bottom:18px; }
.itc-fl-photo-preview{
  width:88px; height:88px; min-width:88px; border-radius:var(--itc-radius-md); overflow:hidden; flex:none;
  background:var(--itc-grad-dark); display:flex; align-items:center; justify-content:center; color:#fff; font-size:30px;
}
.itc-fl-photo-preview img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:520px){ .itc-fl-photo-row{ flex-direction:column; } .itc-fl-photo-preview{ width:100%; height:120px; } }

.itc-skill-builder{ display:flex; flex-direction:column; gap:10px; }
.itc-skill-row{ display:flex; flex-wrap:nowrap; align-items:center; gap:12px; background:rgba(255,255,255,.6); border:1px solid var(--itc-gray-100); border-radius:var(--itc-radius-sm); padding:10px 14px; }
.itc-skill-name{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; border:none !important; background:transparent !important; padding:4px !important; margin:0 !important; font-size:14px; font-weight:700; color:var(--itc-black); }
.itc-skill-name:focus{ box-shadow:none !important; outline:none; }
.itc-skill-range{ width:140px !important; flex:none !important; accent-color:var(--itc-red); cursor:pointer; margin:0; }
.itc-skill-range::-webkit-slider-runnable-track{ height:5px; border-radius:4px; background:var(--itc-gray-100); }
.itc-skill-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--itc-grad-red); margin-top:-5.5px; box-shadow:0 2px 6px rgba(227,27,35,.4); }
.itc-skill-range::-moz-range-track{ height:5px; border-radius:4px; background:var(--itc-gray-100); }
.itc-skill-range::-moz-range-thumb{ width:16px; height:16px; border:none; border-radius:50%; background:var(--itc-grad-red); box-shadow:0 2px 6px rgba(227,27,35,.4); }
.itc-skill-pct{ width:38px; flex:none; text-align:center; font-size:12.5px; font-weight:800; color:var(--itc-red); direction:ltr; }
.itc-skill-remove{ flex:none; width:26px; height:26px; border:none; border-radius:50%; background:var(--itc-gray-100); color:var(--itc-gray-700); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition:background var(--itc-dur-fast), color var(--itc-dur-fast); }
.itc-skill-remove:hover{ background:var(--itc-red-tint); color:var(--itc-red); }
@media (max-width:480px){ .itc-skill-range{ width:90px; } }
.itc-flp-review-msg.err{ display:block; background:#fdeaea; color:#b02a2a; }

@media (max-width:640px){
  .itc-flp-cover{ height:150px; }
  /* نفس الحساب: مركز الأفاتار (96/2=48) = آخر الكفر: -30 (هيدر) -48 = -78 */
  .itc-flp-avatar{ width:96px; height:96px; min-width:96px; font-size:34px; border-width:4px; margin-top:-78px; }
  .itc-flp-stats{ gap:16px; padding:18px 20px; }
}

/* صف الأزرار في كارت المستقل بصفحة السوق (الملف الشخصي + تواصل الآن) */
.itc-fl-actions-row{ display:flex; gap:8px; }
.itc-fl-actions-row .itc-fl-cta-btn{ width:auto !important; flex:1; }
.itc-fl-profile-link{
  display:flex; align-items:center; justify-content:center; flex:1;
  border:1.5px solid var(--itc-gray-300); color:var(--itc-black); border-radius:10px;
  padding:12px 0; font-weight:700; font-size:13px; text-decoration:none;
  transition:border-color var(--itc-dur-fast) ease, color var(--itc-dur-fast) ease;
}
.itc-fl-profile-link:hover{ border-color:var(--itc-red); color:var(--itc-red); }
@media (max-width:480px){
  .itc-fl-actions-row{ flex-direction:column; }
}

/* صفحة الشركة المفردة — بيانات تواصل + قائمة الوظائف (module-companies.php) */
.itc-company-meta{ direction:rtl; display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.itc-company-meta span{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--itc-black); background:var(--itc-gray-50); border:1px solid var(--itc-gray-100);
  border-radius:20px; padding:6px 14px;
}
.itc-company-meta a{ color:var(--itc-red); text-decoration:none; }
.itc-company-meta a:hover{ text-decoration:underline; }

.itc-company-jobs{ direction:rtl; margin-top:28px; max-width:820px; margin-left:auto; margin-right:auto; padding:24px 16px; border-radius:var(--itc-radius-lg); }
.itc-company-jobs h3{
  font-size:18px; font-weight:800; color:var(--itc-black); border-bottom:2px solid var(--itc-gray-100);
  padding-bottom:10px; margin-bottom:16px; position:relative; z-index:1;
}
.itc-company-jobs-empty{ color:var(--itc-gray-500); }
.itc-company-job-row{
  display:block; background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md);
  padding:14px 18px; margin-bottom:10px; text-decoration:none; color:var(--itc-black); font-weight:700;
  box-shadow:var(--itc-glass-shadow); transition:transform var(--itc-dur-base) var(--itc-ease), box-shadow var(--itc-dur-base) var(--itc-ease);
}
.itc-company-job-row:hover{ transform:translateY(-2px); box-shadow:var(--itc-glass-shadow-hover); border-color:var(--itc-red-tint); color:var(--itc-black); }
.itc-company-job-location{ font-weight:400; color:var(--itc-gray-500); font-size:13px; }

/* =============================================================
   16. USED-PRODUCTS — تحسينات كارت وصفحة المنتج المفردة (إلهام من دوبيزل)
   عرض السعر بشكل بارز، شارة "منذ متى"، زرار تواصل سريع، وصفحة منتج
   كاملة (صورة كبيرة + سعر + اتصال/واتساب + معلومات البائع).
   ============================================================= */
.itc-souq-card-media{ position:relative; }
.itc-souq-time-badge{
  position:absolute; top:10px; right:10px; background:rgba(11,11,13,.65); color:var(--itc-white);
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; backdrop-filter:blur(2px);
}
.itc-card-noimg-icon{
  display:flex; align-items:center; justify-content:center; font-size:40px;
  background:var(--itc-gray-50); color:var(--itc-gray-300);
}
.itc-souq-card-price{ font-size:22px; margin-bottom:4px; }
.itc-souq-card-actions{ display:flex; gap:8px; }
.itc-souq-card-actions .itc-btn{ flex:1; }
.itc-souq-quick-contact{
  flex:0 0 auto; width:44px; padding:0; display:inline-flex; align-items:center; justify-content:center;
  font-size:18px;
}

/* صفحة إعلان المنتج/الخدمة المفردة — عمودين (محتوى + شريط جانبي ثابت)،
   منقولة حرفيًا من مقاييس theme3 (pd-grid / sv-grid) بدل التصميم القديم أحادي العمود. */
.itc-pdp,.itc-svc{ direction:rtl; }
.itc-pdp-grid,.itc-svc-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:28px; align-items:start; }

.itc-pdp-gallery-main,.itc-svc-media{
  position:relative; border-radius:var(--itc-radius-lg); overflow:hidden; background:var(--itc-gray-50);
  aspect-ratio:16/10; margin-bottom:12px;
}
.itc-svc-media{ aspect-ratio:16/9; margin-bottom:20px; }
.itc-pdp-gallery-main img,.itc-svc-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.itc-pdp-noimg{
  height:100%; display:flex; align-items:center; justify-content:center; font-size:64px; color:var(--itc-gray-300);
}
.itc-pdp-condition-badge{
  position:absolute; top:14px; right:14px; background:var(--itc-white); color:var(--itc-black);
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:20px; box-shadow:var(--itc-shadow-sm);
}
.itc-pdp-thumbs{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.itc-pdp-thumbs img{
  width:76px; height:76px; border-radius:10px; object-fit:cover; cursor:pointer;
  border:2px solid transparent; transition:border-color var(--itc-dur-fast) ease;
}
.itc-pdp-thumbs img.active,.itc-pdp-thumbs img:hover{ border-color:var(--itc-red); }

.itc-pdp-info,.itc-svc-info{ padding:26px; }
.itc-glass.itc-pdp-info,.itc-glass.itc-svc-info{
  background:var(--itc-glass-fill-strong); border:1px solid var(--itc-gray-100);
  box-shadow:0 4px 18px rgba(11,11,13,.06); border-radius:var(--itc-radius-md);
}
.itc-pdp-info-top{ margin-bottom:16px; }
.itc-pdp-title,.itc-svc-title{ font-size:24px; font-weight:900; margin:0 0 10px; color:var(--itc-black); }
.itc-pdp-meta-row{ display:flex; gap:14px; flex-wrap:wrap; color:var(--itc-gray-700); font-size:14px; }
.itc-pdp-info .itc-flp-section-title,.itc-svc-info .itc-flp-section-title{ margin-top:0; }

.itc-svc-provider-row{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.itc-svc-provider-avatar{ width:40px; height:40px; border-radius:10px; overflow:hidden; flex:none; background:var(--itc-grad-red); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.itc-svc-provider-avatar img{ width:100%; height:100%; object-fit:cover; }
.itc-svc-provider-name{ font-weight:800; font-size:13.5px; color:var(--itc-black); }

.itc-pdp-side,.itc-svc-side{ position:sticky; top:96px; }
.itc-pdp-price-card,.itc-svc-side-card{ padding:24px; }
.itc-glass.itc-pdp-price-card,.itc-glass.itc-svc-side-card{
  background:var(--itc-glass-fill-strong); border:1px solid var(--itc-gray-100);
  box-shadow:0 4px 18px rgba(11,11,13,.06); border-radius:var(--itc-radius-md);
}
.itc-pdp-price-label{ font-size:13px; color:var(--itc-gray-700); margin-bottom:4px; }
.itc-pdp-price{ font-size:30px; font-weight:900; color:var(--itc-red); margin-bottom:18px; }
.itc-pdp-actions,.itc-svc-actions{ display:flex; flex-direction:column; gap:10px; }
.itc-pdp-actions .itc-btn,.itc-svc-actions .itc-btn{ width:100%; justify-content:center; }

.itc-pdp-seller{
  display:flex; align-items:center; gap:12px; padding:16px; margin-top:20px;
  background:var(--itc-glass-fill-strong); border-radius:var(--itc-radius-md);
}
.itc-pdp-seller-avatar{
  width:48px; height:48px; min-width:48px; border-radius:12px; overflow:hidden; background:var(--itc-grad-red); color:var(--itc-white);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;
}
.itc-pdp-seller-avatar img{ width:100%; height:100%; object-fit:cover; }
.itc-pdp-seller-name{ font-weight:800; color:var(--itc-black); font-size:14px; }
.itc-pdp-seller-label{ font-size:12px; color:var(--itc-gray-700); }

.itc-svc-stats-list{ margin-bottom:16px; }
.itc-svc-stat-row{
  display:flex; justify-content:space-between; align-items:center; padding:12px 0;
  border-bottom:1px solid var(--itc-glass-border); font-size:13.5px; color:var(--itc-gray-700);
}
.itc-svc-stat-row:last-child{ border-bottom:none; }
.itc-svc-stat-row b{ color:var(--itc-red); font-weight:800; }

@media (max-width:900px){
  .itc-pdp-grid,.itc-svc-grid{ grid-template-columns:1fr; }
  .itc-pdp-side,.itc-svc-side{ position:static; }
}
@media (max-width:600px){
  .itc-pdp-price{ font-size:26px; }
}

/* =============================================================
   17. GLASS SYSTEM — نقل تصميم theme3 (زجاجي) للموقع الحي
   خلفية رمادي فاتح + ألواح زجاج (backdrop-filter) بدل الأبيض المسطح،
   بيستخدمها ويدجت السلايدر الرئيسي وويدجت مربعات الأقسام تحت،
   ومتاحة لأي ويدجت جديد بعدين (فقط class="itc-glass" على أي راپر).
   ============================================================= */
.itc-glass{
  background:var(--itc-glass-fill);
  -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border);
  box-shadow:var(--itc-glass-shadow);
  border-radius:var(--itc-radius-md);
}
.itc-glass-dark{
  background:var(--itc-glass-fill-dark);
  -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border-dark);
  border-radius:var(--itc-radius-md);
  color:var(--itc-white);
}
.itc-glass-strong{ background:var(--itc-glass-fill-strong); }

/* شفافة عمدًا: طبقة header.php الثابتة (position:fixed) هي المصدر الوحيد للون/التدرّج
   الحقيقي خلف الصفحة كلها؛ أي قسم يلف نفسه بـ itc-ambient-bg هنا بيضيف فقاعاته الزخرفية
   بس فوقها، من غير ما يرسم مستطيل خلفية صلد يحجب التدرّج المستمر (كانت المشكلة السابقة). */
.itc-ambient-bg{ position:relative; overflow:hidden; }
.itc-ambient-bg > .itc-ambient-blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
/* أي محتوى حقيقي جوه itc-ambient-bg غير طبقة الفقاعات لازم يطفو فوقها (z-index:0 المطلق ممكن
   يرسم فوق محتوى static عادي حسب ترتيب تكديس CSS، فبنرفع أي حاجة تانية لطبقة موجبة). */
.itc-ambient-bg > *:not(.itc-ambient-blobs){ position:relative; z-index:1; }
.itc-ambient-blobs span{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.35;
  animation:itcBlobFloat 22s var(--itc-ease) infinite alternate;
}
.itc-ambient-blobs span:nth-child(1){ width:480px; height:480px; top:-140px; inset-inline-end:-110px; background:radial-gradient(circle at 30% 30%, var(--itc-red-light), transparent 70%); }
.itc-ambient-blobs span:nth-child(2){ width:420px; height:420px; bottom:-130px; inset-inline-start:-90px; background:radial-gradient(circle at 60% 40%, var(--itc-black-soft), transparent 70%); opacity:.10; animation-delay:-8s; }
.itc-ambient-blobs span:nth-child(3){ width:320px; height:320px; top:36%; inset-inline-start:44%; background:radial-gradient(circle, var(--itc-red), transparent 70%); opacity:.14; animation-delay:-14s; }
@keyframes itcBlobFloat{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-4%,3%) scale(1.08); }
  100%{ transform:translate(3%,-4%) scale(.96); }
}

/* عناصر تتكشف تدريجيًا وهي بتدخل الشاشة (JS يضيف class="in" عبر IntersectionObserver في itc-core.js) */
.itc-reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--itc-dur-slow) var(--itc-ease), transform var(--itc-dur-slow) var(--itc-ease); }
.itc-reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .itc-reveal{ opacity:1; transform:none; }
  .itc-ambient-blobs span{ animation:none; }
}

/* =============================================================
   18. HERO SLIDER WIDGET (itc_hero_slider) — نقل هيرو theme3
   ============================================================= */
.itc-hero-wrap{ direction:rtl; font-family:var(--itc-font); position:relative; padding-top:8px; }
.itc-hero-slider{
  position:relative; border-radius:var(--itc-radius-lg); overflow:hidden; min-height:600px;
  box-shadow:0 30px 70px rgba(11,11,13,.22);
}
.itc-hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity var(--itc-dur-slow) var(--itc-ease), visibility 0s linear var(--itc-dur-slow);
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
}
.itc-hero-slide.active{ opacity:1; visibility:visible; transition:opacity var(--itc-dur-slow) var(--itc-ease); z-index:2; }
.itc-hero-slide .itc-hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.08); transition:transform 7s linear;
}
.itc-hero-slide.active .itc-hero-bg{ transform:scale(1); }
.itc-hero-slide .itc-hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,11,13,.88) 0%, rgba(11,11,13,.62) 42%, rgba(11,11,13,.15) 78%);
}
.itc-hero-content{ position:relative; z-index:2; padding:52px 90px 52px 56px; max-width:640px; color:var(--itc-white); }
.itc-hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); font-size:13px; font-weight:700; color:#fff; margin-bottom:16px;
}
.itc-hero-content h1{ font-size:clamp(26px,3.4vw,40px); line-height:1.25; font-weight:900; margin:0 0 14px; }
.itc-hero-content p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.82); margin:0 0 22px; max-width:520px; }
.itc-hero-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.itc-hero-cta-row .itc-btn.ghost{ color: #fff; border-color: rgba(255,255,255,0.4); }
.itc-hero-cta-row .itc-btn.ghost:hover{ background: #fff; color: var(--itc-black); }
.itc-hero-side{
  position:relative; z-index:2; justify-self:center; width:340px;
  display:flex; flex-direction:column; gap:14px;
  animation:itcFloatY 5s var(--itc-ease) infinite;
}
.itc-hero-stat-card{ padding:22px; }
.itc-hero-stat-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.35); }
.itc-hero-stat-row:last-child{ border-bottom:none; }
.itc-hero-stat-ico{ width:38px; height:38px; border-radius:11px; background:var(--itc-grad-red); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; font-size:16px; }
.itc-hero-stat-num{ font-weight:800; font-size:16px; color:#fff; }
.itc-hero-stat-lbl{ font-size:12.5px; color:rgba(255,255,255,.72); }
.itc-hero-preview-row{ display:flex; flex-direction:column; gap:10px; }
.itc-hero-preview{
  display:flex; align-items:center; gap:12px; padding:11px; border-radius:var(--itc-radius-md);
  background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2); width:100%; text-decoration:none;
  transition:background var(--itc-dur-fast), transform var(--itc-dur-fast) var(--itc-ease);
}
.itc-hero-preview:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }
.itc-hero-preview img{ width:46px; height:46px; border-radius:11px; object-fit:cover; flex:none; }
.itc-hero-preview .itc-hp-info{ flex:1; min-width:0; }
.itc-hero-preview .itc-hp-tag{ display:inline-block; font-size:10px; font-weight:800; padding:3px 9px; border-radius:999px; background:var(--itc-red); color:#fff; margin-bottom:5px; transition:opacity .35s ease; }
.itc-hero-preview .itc-hp-tag.itc-swapping{ opacity:0; }
.itc-hero-preview .itc-hp-title{ font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itc-hero-preview .itc-hp-go{ flex:none; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#fff; transition:background var(--itc-dur-fast); }
.itc-hero-preview:hover .itc-hp-go{ background:#fff; color:var(--itc-red); }
.itc-hero-arrows{ position:absolute; inset-inline:24px; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; z-index:3; pointer-events:none; }
.itc-hero-arrow{
  pointer-events:all; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); color:#fff; transition:background var(--itc-dur-fast), transform var(--itc-dur-fast); cursor:pointer;
}
.itc-hero-arrow:hover{ background:rgba(255,255,255,.32); transform:scale(1.06); }
.itc-hero-dots{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.itc-hero-dot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4); transition:width var(--itc-dur-base), background var(--itc-dur-base); cursor:pointer; border:none; padding:0; }
.itc-hero-dot.active{ width:26px; border-radius:5px; background:var(--itc-red-light); }
@media (max-width:900px){
  .itc-hero-slider{ min-height:auto; }
  .itc-hero-slide{ position:relative; grid-template-columns:1fr; }
  .itc-hero-slide:not(.active){ display:none; }
  .itc-hero-content{ padding:40px 24px 32px; }
  .itc-hero-side{ display:none; }
}

/* شريط البحث الموحّد — تحت السلايدر (مش راكب عليه) */
.itc-hero-search{
  position:relative; z-index:1; margin:26px auto 0; max-width:1040px;
  display:flex; align-items:center; gap:10px; padding:12px; border-radius:999px;
}
.itc-hero-search select, .itc-hero-search input{
  border:none; background:transparent; font-family:inherit; font-size:14.5px; padding:12px 14px; outline:none; color:var(--itc-black); flex:none;
}
.itc-hero-search input{ flex:1; }
.itc-hero-search .itc-hs-divider{ width:1px; height:26px; background:var(--itc-gray-300); flex:none; }
.itc-hero-search .itc-btn{ flex:none; }
@media (max-width:700px){
  .itc-hero-search{ flex-wrap:wrap; border-radius:var(--itc-radius-md); }
  .itc-hero-search .itc-hs-divider{ display:none; }
}

/* =============================================================
   19. CATEGORY TILES WIDGET (itc_category_tiles) — أيقونات SVG متحركة
   ============================================================= */
.itc-cat-wrap{ direction:rtl; font-family:var(--itc-font); }
.itc-cat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
@media (max-width:1024px){ .itc-cat-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .itc-cat-grid{ grid-template-columns:repeat(2,1fr); } }
.itc-cat-tile{
  display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 12px; text-align:center;
  text-decoration:none; color:var(--itc-black);
  transition:transform var(--itc-dur-base) var(--itc-ease), box-shadow var(--itc-dur-base) var(--itc-ease), background var(--itc-dur-base);
}
.itc-cat-tile:hover{ transform:translateY(-8px); box-shadow:var(--itc-glass-shadow-hover); background:var(--itc-glass-fill-strong); color:var(--itc-black); }
.itc-cat-tile .itc-cat-ico{ width:30px; height:30px; display:flex; align-items:center; justify-content:center; }
.itc-cat-tile .itc-cat-ico svg{ width:30px; height:30px; transition:transform var(--itc-dur-slow) var(--itc-ease); }
.itc-cat-tile:hover .itc-cat-ico svg{ transform:scale(1.12) rotate(-4deg); }
.itc-cat-tile span{ font-weight:700; font-size:14px; }
.itc-cat-tile small{ color:var(--itc-gray-700); font-size:12px; }

/* =============================================================
   20. CTA BAND — closing call-to-action strip (new theme3 page only,
   plain Elementor "html" widget, no dedicated PHP widget for this yet)
   ============================================================= */
.itc-cta-band{
  position:relative; overflow:hidden; padding:56px; text-align:center;
  background:var(--itc-grad-dark) !important; border-radius:var(--itc-radius-lg) !important; color:#fff !important;
  direction:rtl; font-family:var(--itc-font);
}
.itc-cta-band h2{ font-size:30px; font-weight:900; margin:0 0 12px; }
.itc-cta-band p{ color:rgba(255,255,255,.75); max-width:560px; margin:0 auto 26px; }
.itc-cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.itc-cta-glow{
  position:absolute; inset:-40% -10% auto; height:300px;
  background:radial-gradient(ellipse at center, rgba(227,27,35,.35), transparent 70%); filter:blur(30px);
}

/* =============================================================
   21. SITE HEADER + MOBILE NAV DRAWER (classima-child theme's
   header.php/footer.php — replaces Classima's own template-parts
   entirely, so this is the ONLY header/footer visual system now)
   ============================================================= */
html{ scroll-behavior:smooth; }
body.itc-child-theme{ background:var(--itc-bg-base); margin:0; }
.itc-site-header{
  position:sticky; top:0; z-index:999; padding:5px 24px 14px;
  background:transparent;
}
@media (max-width:1024px){ .itc-site-header{ padding:5px 20px 14px; } }
@media (max-width:600px){ .itc-site-header{ padding:5px 16px 12px; } }
body.admin-bar .itc-site-header{ top:32px; }
@media (max-width:782px){ body.admin-bar .itc-site-header{ top:46px; } }
.itc-site-header .itc-header-inner{
  max-width:1400px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-radius:999px;
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); box-shadow:var(--itc-glass-shadow);
}
.itc-brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:19px; color:var(--itc-black); text-decoration:none; white-space:nowrap; }
.itc-brand img{ max-height:36px; width:auto; display:block; }
.itc-brand .itc-brand-mark{
  width:38px; height:38px; border-radius:11px; background:var(--itc-grad-red);
  display:grid; place-items:center; color:#fff; font-size:18px; box-shadow:0 6px 16px rgba(227,27,35,.35); flex:none;
}
.itc-main-nav{ display:flex; gap:4px; list-style:none; margin:0; padding:0; }
.itc-main-nav li{ display:flex; }
.itc-main-nav a{
  position:relative; padding:10px 10px; font-weight:600; font-size:14.5px; border-radius:999px;
  color:var(--itc-black); text-decoration:none; transition:background var(--itc-dur-fast), color var(--itc-dur-fast); white-space:nowrap;
}
.itc-main-nav a:hover, .itc-main-nav .current-menu-item > a{ background:rgba(227,27,35,.08); color:var(--itc-red); }
.itc-header-actions{ display:flex; align-items:center; gap:10px; }
.itc-icon-btn{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--itc-glass-border);
  background:rgba(255,255,255,.5); color:var(--itc-black); text-decoration:none; transition:transform var(--itc-dur-fast) var(--itc-ease), background var(--itc-dur-fast);
}
.itc-icon-btn:hover{ transform:translateY(-2px); background:#fff; color:var(--itc-black); }
.itc-nav-toggle{ display:none; border:1px solid var(--itc-glass-border); background:rgba(255,255,255,.5); cursor:pointer; }
@media (max-width:1024px){
  .itc-main-nav{ display:none; }
  .itc-nav-toggle{ display:grid; }
}

/* ── قص أزرار الهيدر في النطاق 1025..1319 ────────────────────────────────
   العطل: إضافة زرار «تسجيل الدخول» (رابط حادي عشر) دفعت صف الأزرار، والهيدر
   RTL فالصف بيتزحلق برّه الشاشة من الشمال بدل ما يلفّ أو يضغط
   (`.itc-header-actions` scrollW = clientW ⇒ مفيش overflow داخلي يمتصّه).

   والحدود مقيسة بالبحث مش تقديرية:
     1024 ⇒ minX=+37  سليم (القائمة بتختفي للدرج)
     1025 ⇒ minX=-295 ❌   ← القائمة بتظهر فجأة بعرض 730px
     1300 ⇒ minX=-20  ❌
     1320 ⇒ minX=0    ✅   ← أول عرض سليم
   ⇒ النطاق المكسور بالظبط = 1025..1319 (المدير قدّره 900..1366 تقريبًا).

   ⛔ وما خفيتش «انضم كمستقل» — ده مدخل تسجيل، وإخفاؤه بيصلّح الشكل ويكسر وظيفة.

   والعلاج على مرحلتين، والحدّ بينهم مقيس مش مخمَّن:
   ① فوق 1220 الضغط لوحده كافٍ (بالضغط: 1220 ⇒ minX=+13 · 1200 ⇒ minX=-7
      ⇒ بيفشل عند ~1207) ⇒ نضغط الحشو والخط ونسيب القائمة ظاهرة.
   ② ومن 1220 ونازل، القائمة والأزرار مايسعوش مع بعض مهما ضغطنا ⇒ القائمة
      تروح للدرج (نفس سلوك 1024 الموجود أصلًا، بس بيبدأ أبكر).
   📌 والدرج فيه العشر روابط كاملة (مقيس) ⇒ مفيش رابط بيضيع، بيتنقل مكانه بس.
   📌 والهيدر بيقصر 83→81 مش بيطول ⇒ الكفر الملزّق فيه (شغل النهارده) في أمان. */
@media (min-width:1221px) and (max-width:1400px){
  .itc-main-nav{ gap:0; }
  .itc-main-nav a{ padding:10px 7px; font-size:13.5px; }
  .itc-header-actions{ gap:6px; }
  .itc-header-actions .itc-btn{ padding:10px 15px; font-size:13.5px; }
}
@media (max-width:1220px){
  .itc-main-nav{ display:none; }
  .itc-nav-toggle{ display:grid; }
}
/* the site's <html> tag is never actually marked dir="rtl" (WP core locale is en-US; Arabic is
   served via TranslatePress translating text in place, not a real RTL document) — every itc-core
   widget already assumes RTL unconditionally via inline direction:rtl, so the header drawer must
   do the same instead of gating on a [dir="rtl"] attribute that's never present. Without this,
   the drawer sat LTR-positioned (off-screen to the right via translateX(100%) from right:0),
   which caused real horizontal page overflow/scroll on every viewport. */
@media (max-width:640px){
  .itc-header-actions .itc-btn{ display:none; }
}

.itc-nav-drawer{
  position:fixed; top:0; bottom:0; left:0; right:auto; width:min(320px,84vw); z-index:1000; padding:90px 26px 26px;
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border-right:1px solid var(--itc-glass-border); box-shadow:var(--itc-glass-shadow-hover);
  display:flex; flex-direction:column; gap:4px; list-style:none; margin:0;
  transform:translateX(-100%); transition:transform var(--itc-dur-slow) var(--itc-ease);
  overflow-y:auto;
}
.itc-nav-drawer.open{ transform:translateX(0); }
.itc-nav-drawer li{ list-style:none; }
.itc-nav-drawer a{ display:block; padding:14px 16px; border-radius:var(--itc-radius-sm); font-weight:700; text-decoration:none; color:var(--itc-black); transition:background var(--itc-dur-fast); }
.itc-nav-drawer a:hover{ background:rgba(227,27,35,.08); color:var(--itc-red); }
.itc-nav-scrim{
  position:fixed; inset:0; z-index:998; background:rgba(11,11,13,.35);
  opacity:0; visibility:hidden; transition:opacity var(--itc-dur-base), visibility var(--itc-dur-base);
}
.itc-nav-scrim.open{ opacity:1; visibility:visible; }

/* footer — same max-width (1400px) and same responsive horizontal padding scale
   (24px/20px/16px) as .itc-section-shell, so the footer's outer gutter matches every
   other section instead of using its own narrower/non-responsive values. */
.itc-site-footer{
  max-width:1400px; margin:0 auto; box-sizing:border-box;
  padding:56px 24px 26px; position:relative; z-index:1;
}
@media (max-width:1024px){ .itc-site-footer{ padding:44px 20px 26px; } }
@media (max-width:600px){ .itc-site-footer{ padding:32px 16px 26px; } }
.itc-footer-grid{
  margin:0 0 20px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding:40px;
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-lg); box-shadow:var(--itc-glass-shadow);
}
.itc-footer-grid h4{ font-size:14.5px; margin:0 0 16px; color:var(--itc-black); }
.itc-footer-grid ul{ list-style:none; margin:0; padding:0; }
.itc-footer-grid li{ margin-bottom:10px; font-size:13.5px; color:var(--itc-gray-700); }
.itc-footer-grid li a{ color:inherit; text-decoration:none; }
.itc-footer-grid li a:hover{ color:var(--itc-red); }
.itc-footer-grid p{ color:var(--itc-gray-700); font-size:13.5px; line-height:1.8; max-width:280px; }
.itc-footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:16px 32px; font-size:12.5px; color:var(--itc-gray-700);
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-lg); box-shadow:var(--itc-glass-shadow);
}
.itc-footer-social{ display:flex; gap:12px; }
.itc-footer-social a{ color:var(--itc-gray-700); font-size:18px; transition:color var(--itc-dur-fast); }
.itc-footer-social a:hover{ color:var(--itc-red); }
@media (max-width:900px){ .itc-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .itc-footer-grid{ grid-template-columns:1fr; } }

/* =============================================================
   22. GLOBAL OVERRIDES — new theme is the only visual system
   (full-width containers, no breadcrumb residue, kill leftover
   Classima colors/fonts wherever a template still references them)
   ============================================================= */
body, input, textarea, select, button{ font-family:var(--itc-font) !important; }
.main-breadcrumb, .theme-banner-breadcrumb, .breadcrumb, nav.breadcrumbs{ display:none !important; }
.e-con, .e-con-inner, .elementor-section, .elementor-container{ max-width:none !important; }
.e-con.e-parent{ padding-inline:0 !important; }

/* بعض صفحات SOUQ (used-products-page, freelancers-page, digital-services-page) بترندر من
   غير أي إليمنتور، فبتاخد قالب page.php الافتراضي بتاع Classima اللي لسه شايل شبكة
   Bootstrap (.container 1140px + .row + .col-sm-*) من قبل الثيم القديم — ده كان بيحصر
   itc-section-shell (1400px) جوه 1140px ويخليها أضيق من باقي صفحات SOUQ التانية اللي
   بترندر من غير الراپر ده (jobs-page, tech-companies-page). بنلغي القيود دي بالكامل
   عشان itc-section-shell يبقى المصدر الوحيد لعرض الصفحة في كل مكان.*/
.content-area .container,
.content-area .row,
.content-area [class*="col-"]{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }

/* أيقونة اللغة اتشالت من الهيدر (وطلعت مسبّبة مشكلة في منيو الموبايل) —
   الفلوتر الافتراضي بتاع TranslatePress برضه سايبينه مخفي زي ما كان. */
#trp-floater-ls{ display:none !important; }

/* =============================================================
   23. THEME3 CARD SYSTEM — literal port of theme3/css/style.css
   §8 "Cards" + §"section-banner", namespaced .itc-t3-* so it never
   collides with the older .itc-card/.itc-card-modern families used
   by the legacy homepage-shortcode + hosting-offers markup. This is
   the ONLY card system new/rewritten widgets should render into —
   see theme3/design-system.md §6.
   ============================================================= */
.itc-t3-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:22px; }

.itc-t3-card{
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); box-shadow:var(--itc-glass-shadow); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform var(--itc-dur-slow, .42s) var(--itc-ease), box-shadow var(--itc-dur-slow, .42s) var(--itc-ease);
}
.itc-t3-card:hover{ transform:translateY(-8px); box-shadow:var(--itc-glass-shadow-hover); color:inherit; }
.itc-t3-card.itc-t3-commercial:hover{ box-shadow:0 20px 44px rgba(227,27,35,.24), inset 0 1px 0 rgba(255,255,255,.5); }

.itc-t3-media{ position:relative; height:170px; overflow:hidden; flex:none; background:var(--itc-gray-50); }
/* الفريلانسرز مستثناة بطلب صريح — سايبين ارتفاعها زي ما كانت (300px) */
.itc-fl-wrap .itc-t3-media{ height:300px; }
.itc-t3-media img{ width:100% !important; height:100% !important; object-fit:cover; background:transparent; padding:0; box-sizing:border-box; transition:transform var(--itc-dur-slow, .42s) var(--itc-ease); }
.itc-dir-section .itc-t3-media img { object-fit:contain !important; padding:12px !important; background:#fff !important; }
.itc-t3-card:hover .itc-t3-media img{ transform:scale(1.08); }
.itc-t3-media .itc-t3-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:36px; color:var(--itc-gray-300); background:var(--itc-gray-50); }

.itc-t3-badge{
  position:absolute; top:12px; inset-inline-start:12px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--itc-black); z-index:2;
}
.itc-t3-badge.red{ background:rgba(227,27,35,.9); color:#fff; }

.itc-t3-fav{
  position:absolute; top:12px; inset-inline-end:12px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background var(--itc-dur-fast); border:none; cursor:pointer; z-index:2; color:var(--itc-black);
}
.itc-t3-fav:hover{ background:#fff; color:var(--itc-red); }

.itc-t3-body{ padding:16px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.itc-t3-title{ font-size:15.5px; font-weight:800; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--itc-black); }
.itc-t3-meta-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--itc-gray-700); }
.itc-t3-meta-row i{ margin-inline-end:3px; }
.itc-t3-rating{ display:flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; color:#E8A100; }

.itc-t3-footer{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; border-top:1px solid rgba(0,0,0,.06); }
.itc-t3-price{ font-weight:900; color:var(--itc-red); font-size:16px; }
.itc-t3-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 18px; border-radius:999px;
  font-weight:700; font-size:13.5px; background:transparent; border:1.5px solid var(--itc-gray-300); color:var(--itc-black);
  text-decoration:none; white-space:nowrap; transition:border-color var(--itc-dur-fast), color var(--itc-dur-fast);
}
.itc-t3-cta:hover{ border-color:var(--itc-red); color:var(--itc-red); }

/* section-banner: glass/gradient ribbon each listing section opens with */
.itc-t3-banner{
  position:relative; overflow:hidden; padding:30px 32px; margin-bottom:28px; border-radius:18px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.itc-t3-banner.tone-red{ background:var(--itc-grad-red); color:#fff; }
.itc-t3-banner.tone-dark{ background:var(--itc-grad-dark); color:#fff; }
.itc-t3-banner::after{
  content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.5px,transparent 1.5px);
  background-size:20px 20px; opacity:.5; pointer-events:none;
}
.itc-t3-sb-left{ position:relative; z-index:2; display:flex; align-items:center; gap:18px; }
.itc-t3-sb-left h3{ margin:0 0 4px; font-size:22px; font-weight:900; }
.itc-t3-sb-left p{ margin:0; opacity:.85; font-size:13.5px; }
.itc-t3-sb-ico{
  width:58px; height:58px; border-radius:18px; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:grid; place-items:center; font-size:24px; border:1px solid rgba(255,255,255,.25); flex:none; color:#fff;
}
.itc-t3-sb-actions{ position:relative; z-index:2; display:flex; gap:10px; flex-wrap:wrap; }
.itc-t3-sb-actions .itc-btn{ padding:9px 18px; font-size:13.5px; }
/* the white pill "add X" button used inside a banner (companies/freelancers/jobs/products) —
   one shared, unscoped class so it works identically whether the banner sits inside a widget's
   own <style> block or a shortcode page with no matching wrapper class. */
.itc-t3-banner-btn{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--itc-red-dark);
  padding:9px 20px; border-radius:999px; font-size:13.5px; font-weight:700; text-decoration:none;
  white-space:nowrap; transition:background var(--itc-dur-fast), color var(--itc-dur-fast);
}
.itc-t3-banner-btn:hover{ background:var(--itc-red-light); color:#fff; }

.itc-t3-footer-text{ font-size:13px; color:var(--itc-gray-700); line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }

.itc-badge-info{
  display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px;
  font-size:11.5px; font-weight:800; background:rgba(41,128,185,.12); color:#2980b9;
}

@media (max-width:600px){
  .itc-t3-banner{ padding:22px 20px; }
  .itc-t3-sb-ico{ width:46px; height:46px; font-size:19px; border-radius:14px; }
  .itc-t3-sb-left h3{ font-size:18px; }
}

/* theme3 §14 "stats-strip" — literal port */
.itc-t3-stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;
  background:var(--itc-glass-fill); -webkit-backdrop-filter:var(--itc-glass-blur); backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border); box-shadow:var(--itc-glass-shadow); border-radius:18px; padding:32px 24px;
}
.itc-t3-stats-strip .itc-t3-stat-num{ font-size:32px; font-weight:900; color:var(--itc-red); line-height:1.1; }
.itc-t3-stats-strip .itc-t3-stat-lbl{ font-size:13.5px; color:var(--itc-gray-700); margin-top:6px; }
@media (max-width:700px){ .itc-t3-stats-strip{ grid-template-columns:repeat(2,1fr); } }

/* دليل الشركات — زرار الإضافة + شريط تصنيفات البراند القابل للتمرير (مشترك بين ويدجت الرئيسية وصفحة "عرض كل الشركات") */
.itc-dir-add-btn{
  display:inline-flex; align-items:center; gap:6px; background:#fff; color:var(--itc-red-dark); padding:10px 20px;
  border-radius:999px; font-size:13.5px; font-weight:700; text-decoration:none; transition:all var(--itc-dur-base);
  white-space:nowrap;
  position: relative; z-index: 10; pointer-events: auto;
}
.itc-dir-add-btn:hover{ background:var(--itc-red-light); color:#fff; }
.itc-brand-carousel-wrap{ margin-top:20px; overflow:hidden; position:relative; }
.itc-brand-scroll-outer{ display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none; padding:4px 0 12px; }
.itc-brand-scroll-outer::-webkit-scrollbar{ display:none; }
.itc-brand-card{
  background:var(--itc-glass-fill-strong); -webkit-backdrop-filter:var(--itc-glass-blur-sm); backdrop-filter:var(--itc-glass-blur-sm);
  border:1.5px solid var(--itc-glass-border); border-radius:12px; padding:10px 16px; cursor:pointer; font-size:13px; font-weight:600;
  white-space:nowrap; display:flex; align-items:center; gap:8px; transition:all var(--itc-dur-fast); color:var(--itc-gray-700); flex-shrink:0;
  font-family:var(--itc-font);
}
.itc-brand-card:hover, .itc-brand-card.active{ background:var(--itc-grad-red); border-color:transparent; color:#fff; }
.itc-brand-count-badge{ background:var(--itc-red-dark); color:#fff; border-radius:10px; padding:2px 7px; font-size:11px; font-weight:700; }

/* =============================================================
   19. SINGLE BLOG POST (classima-child/single.php)
   ============================================================= */
.itc-single-post{ direction:rtl; max-width:860px; margin:0 auto; }
.itc-single-breadcrumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--itc-gray-700); margin-bottom:22px; flex-wrap:wrap; }
.itc-single-breadcrumb a{ color:var(--itc-gray-700); text-decoration:none; transition:color var(--itc-dur-fast); }
.itc-single-breadcrumb a:hover{ color:var(--itc-red); }
.itc-single-breadcrumb i{ font-size:9px; opacity:.6; }

.itc-single-header{ margin-bottom:24px; }
.itc-single-header h1{ font-size:clamp(24px,3.6vw,38px); font-weight:900; line-height:1.35; color:var(--itc-black); margin:14px 0 16px; }
.itc-single-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:18px; font-size:13.5px; color:var(--itc-gray-700); }
.itc-single-meta-item{ display:flex; align-items:center; gap:7px; }
.itc-single-meta-item img{ border-radius:50%; }

.itc-single-thumb{ border-radius:var(--itc-radius-lg); overflow:hidden; margin-bottom:32px; max-height:460px; }
.itc-single-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.itc-single-content{ font-size:17px; line-height:1.95; color:#232326; }
.itc-single-content p{ margin:0 0 22px; }
.itc-single-content h2{ font-size:26px; font-weight:900; color:var(--itc-black); margin:40px 0 18px; line-height:1.4; }
.itc-single-content h3{ font-size:21px; font-weight:800; color:var(--itc-black); margin:32px 0 14px; line-height:1.4; }
.itc-single-content h4{ font-size:18px; font-weight:800; color:var(--itc-black); margin:26px 0 12px; }
.itc-single-content ul, .itc-single-content ol{ margin:0 0 22px; padding-inline-start:26px; }
.itc-single-content li{ margin-bottom:9px; }
.itc-single-content a{ color:var(--itc-red); text-decoration:underline; text-underline-offset:3px; }
.itc-single-content strong{ color:var(--itc-black); }
.itc-single-content img{ max-width:100%; height:auto; border-radius:14px; margin:12px 0; }
.itc-single-content blockquote{
  margin:26px 0; padding:18px 22px; border-inline-start:4px solid var(--itc-red); background:var(--itc-red-tint);
  border-radius:0 14px 14px 0; font-size:16px; color:var(--itc-gray-700);
}
.itc-single-content table{ width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px; }
.itc-single-content table th, .itc-single-content table td{ padding:10px 14px; border:1px solid var(--itc-glass-border); text-align:right; }
.itc-single-content table th{ background:var(--itc-gray-50); font-weight:800; }
.itc-single-content pre{ background:var(--itc-black-soft); color:#eee; padding:16px; border-radius:12px; overflow-x:auto; margin:0 0 22px; direction:ltr; text-align:left; }
.itc-single-content code{ background:var(--itc-gray-50); padding:2px 7px; border-radius:6px; font-size:14px; }
.itc-single-content pre code{ background:none; padding:0; }

.itc-single-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 32px; }
.itc-single-tags a{
  background:var(--itc-gray-50); color:var(--itc-gray-700); font-size:12.5px; font-weight:600; padding:7px 14px;
  border-radius:999px; text-decoration:none; transition:all var(--itc-dur-fast);
}
.itc-single-tags a:hover{ background:var(--itc-red-tint); color:var(--itc-red-dark); }

.itc-single-author-card{
  display:flex; align-items:center; gap:14px; padding:18px 20px; margin-bottom:44px;
  background:var(--itc-glass-fill-strong); border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md);
}
.itc-single-author-card img{ border-radius:50%; flex:none; }
.itc-single-author-name{ font-weight:800; color:var(--itc-black); font-size:15px; }
.itc-single-author-lbl{ font-size:12.5px; color:var(--itc-gray-700); }
.itc-single-author-card .itc-btn{ margin-inline-start:auto; }

.itc-single-related h2{ font-size:22px; font-weight:900; color:var(--itc-black); margin:0 0 18px; }

@media (max-width:600px){
  .itc-single-content{ font-size:15.5px; }
  .itc-single-author-card{ flex-wrap:wrap; }
  .itc-single-author-card .itc-btn{ margin-inline-start:0; width:100%; text-align:center; }
}
.site-content, #content, #page{ max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; }

/* =============================================================
   20. PREMIUM COMPANIES SLIDER (دليل الشركات — itc_companies_page shortcode)
   بيحل محل شريط الإحصائيات (عدد شركات/مميزة/تصنيف) اللي كان مجرد أرقام —
   بيعرض الشركات المميزة فعليًا (itc_company_is_premium) في سلايدر أفقي.
   ============================================================= */
.itc-prem-slider{ margin-bottom:28px; }
.itc-prem-slider-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.itc-prem-slider-head h3{ font-size:17px; font-weight:900; color:var(--itc-black); display:flex; align-items:center; gap:8px; margin:0; }
.itc-prem-slider-head h3 i{ color:#FFB800; }
.itc-prem-slider-arrows{ display:flex; gap:8px; }
.itc-prem-arrow{
  width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--itc-glass-fill-strong); border:1px solid var(--itc-glass-border); color:var(--itc-black);
  cursor:pointer; transition:all var(--itc-dur-fast);
}
.itc-prem-arrow:hover{ background:var(--itc-grad-red); color:#fff; border-color:transparent; }
.itc-prem-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:2px 2px 10px; scrollbar-width:none; }
.itc-prem-track::-webkit-scrollbar{ display:none; }
.itc-prem-card{
  flex:none; width:200px; scroll-snap-align:start; text-decoration:none; display:block;
  background:var(--itc-glass-fill-strong); border:1px solid var(--itc-glass-border); border-radius:var(--itc-radius-md);
  overflow:hidden; transition:all var(--itc-dur-fast); color:inherit;
}
.itc-prem-card:hover{ transform:translateY(-6px); box-shadow:var(--itc-glass-shadow-hover); color:inherit; }
.itc-prem-media{ position:relative; height:120px; background:var(--itc-gray-50); }
.itc-prem-media img{ width:100%; height:100%; object-fit:cover; background:transparent; padding:0; box-sizing:border-box; }
.itc-prem-media .itc-t3-noimg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:28px; color:var(--itc-gray-300); background:var(--itc-gray-50); }
.itc-prem-badge{
  position:absolute; top:8px; inset-inline-end:8px; background:linear-gradient(135deg,#FFC93C,#FF8A00); color:#3a2200;
  font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px; display:flex; align-items:center; gap:4px;
}
.itc-prem-name{ padding:12px 14px 4px; font-size:14px; font-weight:800; color:var(--itc-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.itc-prem-city{ padding:0 14px 14px; font-size:12px; color:var(--itc-gray-700); display:flex; align-items:center; gap:5px; }
@media (max-width:600px){
  .itc-prem-card{ width:160px; }
  .itc-prem-media{ height:100px; }
}

/* =========================================================
   Toast Notifications
   ========================================================= */
.itc-toast-notification {
  position: fixed;
  bottom: 80px; /* فوق القائمة السفلية في الموبايل */
  left: 20px;
  background: var(--itc-grad-red);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(220,12,92,0.3);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 999999;
  animation: itc-toast-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.itc-toast-notification.fade-out {
  animation: itc-toast-out 0.5s ease forwards;
}
@keyframes itc-toast-in {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes itc-toast-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

/* Fix WordPress wp_editor Quicktags layout */
.quicktags-toolbar {
    padding: 5px !important;
    background: #f0f0f1 !important;
    border-bottom: 1px solid #dcdcde !important; display: flex; 
    
    flex-wrap: wrap !important;
    gap: 4px !important;
}
.quicktags-toolbar input.ed_button {
    width: auto !important;
    display: inline-block !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    background: #f6f7f7 !important;
    border: 1px solid #dcdcde !important;
    border-radius: 3px !important;
    color: #2271b1 !important;
    cursor: pointer !important;
}
.quicktags-toolbar input.ed_button:hover {
    background: #f0f0f1 !important;
    border-color: #0a4b78 !important;
    color: #0a4b78 !important;
}


/* Fix Quicktags visibility toggle */
.wp-editor-wrap.tmce-active .quicktags-toolbar {
    display: none !important;
}
.wp-editor-wrap.html-active .quicktags-toolbar {
    display: flex !important;
}

/* ===== itc-checkout-skin-start ===== 
   Skin for the WooCommerce checkout page so it matches the site identity.
   ===== */
/* القيم كلها من مصدر الثيم (itc-core.css) مش من الشاشة:
   .itc-btn  153-160 : padding:13px 26px · pill · 700 · 15px · grad-red · shadow-red
   .itc-btn.ghost 170: transparent · black · 1.5px solid gray-300
   الحقول    464-467 : padding:12px 15px · 1.5px solid gray-100 · radius 10px · 14px
                       focus: red + 0 0 0 4px rgba(227,27,35,.12)

   والخصوصية مرفوعة عمدًا بدل !important — الخصوم مقيسون:
   · `.woocommerce table.shop_table` في woocommerce-rtl.css ⇒ (0,2,1)
   · وقواعد الحقول من ووكومرس/select2 بتغلب (0,3,1)
   ⇒ فبكسب بالخصوصية (form.checkout / table.shop_table) مش بالأولوية.

   📌 والصفحة فيها **فورمان** مش واحد:
      form.checkout          ← بيانات الفوترة والمراجعة
      form.checkout_coupon   ← الكوبون (فوق الصفحة)
   ⇒ والاتنين لازم يتغطّوا، وde اللي مِرقاتي الأولى فاتها. */

/* ① الزرار الأساسي — «تأكيد الطلب» */
.woocommerce-checkout #place_order,
.woocommerce-checkout form.checkout button.button.alt{
  background:var(--itc-grad-red);
  color:var(--itc-white);
  border:1px solid transparent;
  border-radius:var(--itc-radius-pill);
  padding:13px 26px;
  font-family:var(--itc-font);
  font-size:15px;
  font-weight:700;
  box-shadow:var(--itc-shadow-red);
  transition:transform var(--itc-dur-base) var(--itc-ease), box-shadow var(--itc-dur-base) var(--itc-ease);
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout form.checkout button.button.alt:hover{
  background:var(--itc-grad-red);
  color:var(--itc-white);
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(227,27,35,.36);
}
.woocommerce-checkout #place_order:active{ transform:scale(.97); }

/* ② الأزرار الثانوية (زرار الكوبون) — نمط ghost */
.woocommerce-checkout form.checkout_coupon button.button,
.woocommerce-checkout form button.button:not(.alt),
.woocommerce-checkout .woocommerce button.button:not(.alt){
  background:transparent;
  color:var(--itc-black);
  border:1.5px solid var(--itc-gray-300);
  border-radius:var(--itc-radius-pill);
  padding:13px 26px;
  font-family:var(--itc-font);
  font-size:15px;
  font-weight:700;
  box-shadow:none;
}
.woocommerce-checkout form.checkout_coupon button.button:hover,
.woocommerce-checkout form button.button:not(.alt):hover,
.woocommerce-checkout .woocommerce button.button:not(.alt):hover{
  background:transparent;
  border-color:var(--itc-red);
  color:var(--itc-red);
}

/* ③ الحقول — الفورمان الاتنين */
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea.input-text,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout_coupon .form-row input.input-text{
  background:rgba(255,255,255,.65);
  border:1.5px solid var(--itc-gray-100);
  border-radius:10px;
  padding:12px 15px;
  font-family:var(--itc-font);
  font-size:14px;
  color:var(--itc-black);
  box-sizing:border-box;
  transition:border-color var(--itc-dur-fast), box-shadow var(--itc-dur-fast);
}
.woocommerce-checkout form.checkout .form-row input.input-text:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout_coupon .form-row input.input-text:focus{
  border-color:var(--itc-red);
  outline:none;
  box-shadow:0 0 0 4px rgba(227,27,35,.12);
}

/* ⛔ والليبل: بس اللي **ظاهر** — screen-reader-text مخفي عمدًا لقارئ الشاشة
   وتنسيقه بيبوّظ إتاحته من غير أي مكسب بصري. */
.woocommerce-checkout form.checkout .form-row label:not(.screen-reader-text){
  font-weight:700;
  color:var(--itc-black);
  font-size:14px;
}

/* ④ العناوين */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--itc-font);
  font-size:20px;
  font-weight:800;
  color:var(--itc-black);
}

/* ⑤ جدول المراجعة — table.shop_table عشان يغلب قاعدة ووكومرس (0,2,1) */
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table{
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  overflow:hidden;
  background:#fff;
}
.woocommerce-checkout table.shop_table.woocommerce-checkout-review-order-table th{
  font-weight:700;
  color:var(--itc-black);
}

/* ===== itc-checkout-layout-start =====
   لفة ②: المسافة الجانبية + شكل وترتيب خانات الإدخال.

   القيم من **مصدر** الثيم مش من الشاشة:
   · عمود الثيم: قِسته على /jobs/ ⇒ .col-lg-9 = 1080px عند 1440 (وهامش 360 كل ناحية)
   · خانة /user-login/: module-auth.php:307
       padding:14px 45px 14px 16px · border:2px solid #e2e8f0 · radius:10px
       font-size:15px · background:#f8fafc · color:#1a202c
     ⚠️ والـ45px يمين مساحة أيقونة في اللوجين — ⛔ منقولتش (مفيش أيقونة هنا)،
        فالحشو بقى 14px 16px متناظرًا.

   والعطلان المقيسان:
   ① .woocommerce عرضها 1440 وmaxW=none ⇒ ممدودة من حافة للحافة
   ② صف الحقل display:flex ⇒ اللابل والخانة جنب بعض ⇒ الخانة 171px من 677
      واللابل بيتلفّ على سطرين (h=44)
   ⇒ فالعلاج: حاوية بـmax-width+auto · والصف يبقى عمودًا · والخانة 100%. */

/* ① الحاوية — نفس عرض عمود الثيم، وبيفضل مرن تحت 1080 */
.woocommerce-checkout .woocommerce{
  max-width:1080px;
  margin-inline:auto;
  box-sizing:border-box;
}

/* ② الصف: اللابل فوق الخانة بدل ما يبقوا جنب بعض */
.woocommerce-checkout form.checkout .form-row,
.woocommerce-checkout form.checkout_coupon .form-row{
  display:block;
  box-sizing:border-box;
  /* ووكومرس بتحط padding:3px على .form-row ⇒ الخانة (100%) بتطلع أضيق من صفها
     بـ6px ⇒ الضابط (≤4) بيسقط. فبصفّر الحشو الأفقي وأسيب الرأسي للتباعد. */
  padding-inline:0;
}
.woocommerce-checkout form.checkout .form-row label,
.woocommerce-checkout form.checkout_coupon .form-row label{
  display:block;
  width:100%;
  margin-bottom:6px;
  line-height:1.5;
}
.woocommerce-checkout form.checkout .woocommerce-input-wrapper{
  display:block;
  width:100%;
}

/* ③ الخانة: بعرض صفها كامل، وبقيم الثيم */
.woocommerce-checkout form.checkout .form-row input.input-text,
.woocommerce-checkout form.checkout .form-row textarea,
.woocommerce-checkout form.checkout .form-row textarea.input-text,
.woocommerce-checkout form.checkout .form-row select,
.woocommerce-checkout form.checkout_coupon .form-row input.input-text{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border:2px solid #e2e8f0;
  border-radius:10px;
  background:#f8fafc;
  font-family:var(--itc-font);
  font-size:15px;
  color:#1a202c;
  transition:border-color var(--itc-dur-fast), box-shadow var(--itc-dur-fast);
}
.woocommerce-checkout form.checkout .form-row input.input-text:focus,
.woocommerce-checkout form.checkout .form-row textarea:focus,
.woocommerce-checkout form.checkout .form-row select:focus,
.woocommerce-checkout form.checkout_coupon .form-row input.input-text:focus{
  border-color:var(--itc-red);
  outline:none;
  box-shadow:0 0 0 4px rgba(227,27,35,.12);
}

/* ④ صف «الاسم الأول / اسم العائلة» — متساويان ومتباعدان */
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last{
  width:calc(50% - 8px);
  box-sizing:border-box;
}
.woocommerce-checkout form.checkout .form-row-first{ float:right; }
.woocommerce-checkout form.checkout .form-row-last{ float:left; }
.woocommerce-checkout form.checkout .form-row-wide{ width:100%; float:none; clear:both; }

/* وعلى الموبايل يبقوا تحت بعض */
@media (max-width:600px){
  .woocommerce-checkout form.checkout .form-row-first,
  .woocommerce-checkout form.checkout .form-row-last{
    width:100%;
    float:none;
  }
}

/* ⑤ العنوان — سلّم الثيم (h2 في /user-login/ = 26px/800) */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
  font-size:26px;
  font-weight:800;
}

/* ===== itc-checkout-fluid-start =====
   لفة ③: العرض السائل + الكروت.

   🔑 السبب الجذري: الكتلة السابقة حطّت `max-width:1080px` ثابتة، والثيم **نسبي**.
   قِست عمود الثيم (.col-lg-9 على /jobs/) على عشر مقاسات:
        1887⇒1415 · 1600⇒1200 · 1200⇒900 · 1100⇒825 · 992⇒744   = **75.00%**
         991⇒661 ·  900⇒600 ·  800⇒533 ·  768⇒512              = **66.67%**
         767⇒767 ·  700⇒700 ·  600⇒600                          = **100%**
   ⇒ فالحدود 992 و768 مقيسة من الثيم نفسه، مش مفترَضة من bootstrap.

   والكتلة دي بتيجي **بعد** كتلة لفة ② في نفس الملف ⇒ بتغلبها بترتيب المصدر
   بنفس الخصوصية، من غير !important. */

/* ① العرض — نسبي زي الثيم بالظبط */
.woocommerce-checkout .woocommerce{
  max-width:none;
  width:100%;
  margin-inline:auto;
  box-sizing:border-box;
}
@media (min-width:768px){
  .woocommerce-checkout .woocommerce{ width:66.666667%; }
}
@media (min-width:992px){
  .woocommerce-checkout .woocommerce{ width:75%; }
}

/* ② كارت بيانات الفوترة — بنفس هوية كارت الملخّص القايم (radius 14 · بوردر gray-100) */
.woocommerce-checkout form.checkout .woocommerce-billing-fields,
.woocommerce-checkout form.checkout .woocommerce-additional-fields{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:24px;
  box-sizing:border-box;
  margin-bottom:20px;
}

/* ③ صندوق الدفع — بدل البنفسجي الافتراضي rgba(129,110,153,.14) */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:20px;
  box-sizing:border-box;
}
.woocommerce-checkout #payment ul.payment_methods{
  background:transparent;
  border-bottom:1px solid var(--itc-gray-100);
  padding:0 0 14px;
  margin:0 0 14px;
}
.woocommerce-checkout #payment div.form-row{
  background:transparent;
  padding:0;
}

/* والعنوان جوّه الكارت مايلزقش بالحافة العليا */
.woocommerce-checkout form.checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout form.checkout .woocommerce-additional-fields > h3{
  margin-top:0;
}

/* itc-checkout-gutter-mark */
/* ⑤ أرضية الهوامش الجانبية — تحت 768 العرض 100% ⇒ المحتوى كان بيلمس الحافة
   والقيم من مصدر الثيم (itc-core.css:2513-2517 — حشو .itc-site-header):
        الافتراضي > 1024 : 24px
        ≤ 1024           : 20px
        ≤ 600            : 16px
   ⇒ فباخد نفس السلّم، والهامش على **الحاوية** مش جوّه الكارت
      عشان بوردر الكارت نفسه يبعد عن الحافة (شرط المدير). */
@media (max-width:767px){
  .woocommerce-checkout .woocommerce{ padding-inline:20px; }
}
@media (max-width:600px){
  .woocommerce-checkout .woocommerce{ padding-inline:16px; }
}


/* itc-checkout-payment-spec-mark
   صندوق الدفع فضل بنفسجي بـradius 5 بعد النشر. والسبب مقيس بالـCDP:
     قاعدتنا        .woocommerce-checkout #payment   ⇒ (1 كلاس + 1 id)
     وقاعدة ووكومرس  .woocommerce-checkout #payment   ⇒ نفس الخصوصية بالظبط
     وwoocommerce-rtl.css بتتحمّل **بعد** itc-core.css ⇒ عند التساوي الأخير بيغلب.
   ⛔ فمش !important — بضيف `body` قبل الكلاس ⇒ خصوصية أعلى بعنصر واحد:
     body.woocommerce-checkout #payment  =  (1 عنصر + 1 كلاس + 1 id)  >  (1 كلاس + 1 id)
   📌 وفرضيتي القديمة (inline من ووكومرس) كانت **غلط** — المصدر stylesheet عادي. */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:20px;
  box-sizing:border-box;
}
body.woocommerce-checkout #payment ul.payment_methods{
  background:transparent;
  border-bottom:1px solid var(--itc-gray-100);
  padding:0 0 14px;
  margin:0 0 14px;
}
body.woocommerce-checkout #payment div.form-row{
  background:transparent;
  padding:0;
}


/* ============================================================
   itc-myaccount-spec-mark
   /my-account/ (WooCommerce login form) -> theme auth identity.

   SCOPE: body.woocommerce-account  (measured: present on /my-account/ = 1,
   and = 0 on / , /cart/ , /checkout/ , /blog/ , /jobs/ , /shop/ ,
   /user-login/ , /company-register/  -> zero leakage by construction)

   The body. prefix also raises specificity one step above WooCommerce's own
   ".woocommerce-account ..." rules, which load AFTER itc-core.css.
   Winning by specificity, not by !important. (0,1,1,1) > (0,1,1,0)

   VALUES: copied from the theme SOURCE in this same file, not from a screen:
     .itc-auth-card            -> glass fill / blur / border / radius-lg / padding
     .itc-reg-card             -> max-width 520px
     .itc-auth-card input      -> radius 10 / 1.5px gray-100 / rgba(255,255,255,.65)
                                  / font 14 / padding 12px 15px
     .itc-btn                  -> pill button identity
   NOTE: /company-register/ renders its fields via #itc-company-form, which
   overrides .itc-auth-card input. I use the auth-card rule because that is the
   card identity I am adopting here.
   ============================================================ */

/* --- page container: centre the card like every other auth page --- */
body.woocommerce-account .woocommerce{
  max-width:520px;
  margin-inline:auto;
  box-sizing:border-box;
}

/* --- the login form becomes the glass auth card --- */
body.woocommerce-account form.woocommerce-form-login{
  background:var(--itc-glass-fill-strong);
  -webkit-backdrop-filter:var(--itc-glass-blur);
  backdrop-filter:var(--itc-glass-blur);
  border:1px solid var(--itc-glass-border);
  border-radius:var(--itc-radius-lg);
  box-shadow:var(--itc-glass-shadow);
  padding:34px 36px;
  margin:0;
  box-sizing:border-box;
}

/* --- rows and labels --- */
body.woocommerce-account form.woocommerce-form-login .woocommerce-form-row{
  display:block;
  padding-inline:0;
  margin:0 0 4px;
}
body.woocommerce-account form.woocommerce-form-login label{
  display:block;
  font-weight:700;
  font-size:13px;
  color:#333;
  margin-bottom:6px;
  line-height:1.5;
}

/* --- fields: the auth-card field identity --- */
body.woocommerce-account form.woocommerce-form-login input.input-text,
body.woocommerce-account form.woocommerce-form-login input[type="text"],
body.woocommerce-account form.woocommerce-form-login input[type="email"],
body.woocommerce-account form.woocommerce-form-login input[type="password"]{
  display:block;
  width:100%;
  padding:12px 15px;
  background:rgba(255,255,255,.65);
  border:1.5px solid var(--itc-gray-100);
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  color:var(--itc-black);
  margin-bottom:16px;
  box-sizing:border-box;
  transition:border-color var(--itc-dur-fast),box-shadow var(--itc-dur-fast);
}
body.woocommerce-account form.woocommerce-form-login input.input-text:focus,
body.woocommerce-account form.woocommerce-form-login input[type="text"]:focus,
body.woocommerce-account form.woocommerce-form-login input[type="email"]:focus,
body.woocommerce-account form.woocommerce-form-login input[type="password"]:focus{
  border-color:var(--itc-red);
  outline:none;
  box-shadow:0 0 0 4px rgba(227,27,35,.12);
}

/* --- remember-me sits inline, not as a block row --- */
body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--itc-gray-700);
  margin:0 0 18px;
}
body.woocommerce-account form.woocommerce-form-login .woocommerce-form-login__rememberme input{
  width:auto;
  margin:0;
}

/* --- submit: site pill button --- */
body.woocommerce-account form.woocommerce-form-login button.woocommerce-button,
body.woocommerce-account form.woocommerce-form-login button[type="submit"]{
  display:block;
  width:100%;
  background:var(--itc-grad-red);
  color:var(--itc-white);
  border:0;
  border-radius:var(--itc-radius-pill);
  padding:13px 26px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  box-shadow:var(--itc-shadow-red);
}

/* --- lost password link --- */
body.woocommerce-account form.woocommerce-form-login .lost_password{
  margin:16px 0 0;
  text-align:center;
  font-size:13px;
}
body.woocommerce-account form.woocommerce-form-login .lost_password a{
  color:var(--itc-red);
  text-decoration:none;
}

/* --- heading above the form --- */
body.woocommerce-account .woocommerce > h2{
  font-size:22px;
  font-weight:800;
  color:var(--itc-black);
  text-align:center;
  margin:0 0 18px;
}

/* --- side gutter floor on small screens (same scale as the header) --- */
@media (max-width:767px){
  body.woocommerce-account .woocommerce{ padding-inline:20px; }
}
@media (max-width:600px){
  body.woocommerce-account .woocommerce{ padding-inline:16px; }
}


/* ============================================================
   itc-checkout-account-fields-mark
   (2) signup_and_login_from_checkout = yes added a "create account"
   checkbox to the checkout. MEASURED: it renders in
   div.woocommerce-account-fields, a SIBLING **outside** the billing card
   (card bottom = 931, checkbox top = 951 at 1887) with:
       background transparent · border 0 · radius 0 · padding 3px 0
   -> it sits bare on the page background while every neighbour is a card.

   Give it the same card identity already used by the billing block
   (measured from this file: #fff / 1px gray-100 / radius-md / 24px pad),
   and make the row a proper flex line so the 13x13 box and its text align.

   SCOPE: .woocommerce-checkout  (same scope as the rest of the checkout work)
   Zero !important - the rules below have no competing WooCommerce rule.
   ============================================================ */

.woocommerce-checkout form.checkout .woocommerce-account-fields{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:20px 24px;
  box-sizing:border-box;
  margin-bottom:20px;
}

.woocommerce-checkout form.checkout .woocommerce-account-fields p.create-account{
  display:block;
  margin:0;
  padding:0;
}

.woocommerce-checkout form.checkout .woocommerce-account-fields label.woocommerce-form__label-for-checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-weight:700;
  font-size:14px;
  color:var(--itc-black);
  cursor:pointer;
  line-height:1.5;
}

.woocommerce-checkout form.checkout .woocommerce-account-fields input.woocommerce-form__input-checkbox{
  width:18px;
  height:18px;
  margin:0;
  flex:0 0 auto;
  accent-color:var(--itc-red);
  cursor:pointer;
}

.woocommerce-checkout form.checkout .woocommerce-account-fields label.woocommerce-form__label-for-checkbox span{
  font-size:14px;
  font-weight:600;
  color:var(--itc-black);
}


/* ============================================================
   itc-myaccount-dashboard-fix-mark
   DEFECT IN MY OWN SHIPPED BLOCK (166,768 round), found by re-reading it:

     body.woocommerce-account .woocommerce{ max-width:520px; margin-inline:auto }

   17 of my 21 selectors are tied to form.woocommerce-form-login, so they stop
   applying once the user logs in. But the container cap above is NOT tied to
   the form - it applies to the page in EVERY state, including the logged-in
   dashboard (MyAccount-navigation + orders table), which I had never seen.

   MEASURED consequence (simulated dashboard markup + the LIVE css):
     1887 : WRAP 520  · NAV 156 · CONTENT 354 · TABLE 354
     (with the pre-my-account css: WRAP 1857 · NAV 557 · CONTENT 1263)
   -> the whole account dashboard would be squeezed into a 520px column.

   FIX: the 520px belongs to the LOGIN CARD, not to the page container.
   Move it onto the form (and its heading) and release the container.
   Net-additive: same selectors repeated later win by source order, so the
   earlier declarations stay untouched on disk. Zero !important.
   ============================================================ */

body.woocommerce-account .woocommerce{
  max-width:none;
}

body.woocommerce-account form.woocommerce-form-login{
  max-width:520px;
  margin-inline:auto;
}

body.woocommerce-account .woocommerce > h2{
  max-width:520px;
  margin-inline:auto;
}


/* ============================================================
   itc-myaccount-dashboard-mark
   /my-account/ dashboard (logged-in) -> theme identity.

   MEASURED BEFORE WRITING (real logged-in markup, account 58):
     .woocommerce-MyAccount-navigation  float:right above 600, no background,
                                        links rgb(0,123,255) 16px  = bootstrap blue
     .woocommerce-MyAccount-content     plain paragraphs, no styling
   MEASURED BY @it-DevOps Agent (account 22, real orders):
     table.woocommerce-orders-table = 1 · __row = 4 · itc-* classes = 0
     .woocommerce-button = 4 (the "view" buttons)

   SCOPE: body.woocommerce-account  (measured = 1 on /my-account/, = 0 on
   / , /cart/ , /checkout/ , /blog/ , /jobs/ , /shop/ , /user-login/ ,
   /company-register/ -> zero leakage by construction)
   body. also raises specificity one step over WooCommerce's own
   ".woocommerce-account ..." rules, which load after itc-core.css.

   VALUES: the card identity already used on checkout, read from this file:
     #fff · 1px var(--itc-gray-100) · var(--itc-radius-md) · 24px
   ============================================================ */

/* --- navigation: a card, not bare text --- */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:12px;
  box-sizing:border-box;
  margin-bottom:20px;
}
body.woocommerce-account .woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link{
  list-style:none;
  margin:0 0 4px;
  padding:0;
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a{
  display:block;
  padding:11px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--itc-gray-700);
  text-decoration:none;
  transition:background-color var(--itc-dur-fast),color var(--itc-dur-fast);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover{
  background:var(--itc-gray-50);
  color:var(--itc-black);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a{
  background:var(--itc-red-tint);
  color:var(--itc-red);
  font-weight:700;
}

/* --- content area: a card too --- */
body.woocommerce-account .woocommerce-MyAccount-content{
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  padding:24px;
  box-sizing:border-box;
}
body.woocommerce-account .woocommerce-MyAccount-content p{
  font-size:14px;
  line-height:1.9;
  color:var(--itc-gray-700);
  margin:0 0 14px;
}
body.woocommerce-account .woocommerce-MyAccount-content p:last-child{
  margin-bottom:0;
}
body.woocommerce-account .woocommerce-MyAccount-content a{
  color:var(--itc-red);
  text-decoration:none;
  font-weight:600;
}

/* --- orders table: same identity as the checkout summary table --- */
body.woocommerce-account table.woocommerce-orders-table{
  width:100%;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:#fff;
  margin:0;
}
body.woocommerce-account table.woocommerce-orders-table th{
  background:var(--itc-gray-50);
  font-size:13px;
  font-weight:700;
  color:var(--itc-black);
  text-align:start;
  padding:14px 16px;
  border-bottom:1px solid var(--itc-gray-100);
}
body.woocommerce-account table.woocommerce-orders-table td{
  font-size:14px;
  color:var(--itc-gray-700);
  padding:14px 16px;
  border-bottom:1px solid var(--itc-gray-100);
}
body.woocommerce-account table.woocommerce-orders-table tr:last-child td{
  border-bottom:0;
}
body.woocommerce-account table.woocommerce-orders-table a{
  color:var(--itc-red);
  text-decoration:none;
  font-weight:700;
}

/* --- the "view" button: site pill --- */
body.woocommerce-account table.woocommerce-orders-table a.woocommerce-button{
  display:inline-block;
  background:var(--itc-grad-red);
  color:var(--itc-white);
  border:0;
  border-radius:var(--itc-radius-pill);
  padding:8px 18px;
  font-size:13px;
  font-weight:700;
  box-shadow:var(--itc-shadow-red);
}

/* --- mobile: navigation stops floating, cards keep breathing room --- */
@media (max-width:600px){
  body.woocommerce-account .woocommerce-MyAccount-content{ padding:18px; }
  body.woocommerce-account table.woocommerce-orders-table th,
  body.woocommerce-account table.woocommerce-orders-table td{ padding:12px; }
}

/* --- notice banner above the table (measured by @it-DevOps Agent in the
       sanitised structure: <div class="woocommerce-info" role="status"> with a
       <a class="button wc-forward">) --- */
body.woocommerce-account .woocommerce-info{
  background:var(--itc-gray-50);
  border:1px solid var(--itc-gray-100);
  border-inline-start:4px solid var(--itc-red);
  border-radius:var(--itc-radius-md);
  padding:14px 18px;
  margin:0 0 18px;
  font-size:14px;
  color:var(--itc-gray-700);
  box-sizing:border-box;
}
body.woocommerce-account .woocommerce-info a.button{
  display:inline-block;
  background:var(--itc-grad-red);
  color:var(--itc-white);
  border:0;
  border-radius:var(--itc-radius-pill);
  padding:8px 18px;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

/* --- status cell: readable state instead of raw text --- */
body.woocommerce-account table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status{
  font-weight:700;
  color:var(--itc-black);
}

/* ============================================================
   itc-proof-form-mark
   @it-Backend Agent is shipping module-instapay.php with the 5 inline styles
   REPLACED by 8 classes. Once the inline styles are gone, nothing styles this
   form -> it renders bare on a live payment page. So this block must land in
   the SAME window as their PHP (their measurement, their warning).

   Surfaces (verbatim from their delivery contract):
     .itc-proof-notice / --error / --done  ·  .itc-proof-link
     .itc-proof-form · .itc-proof-label · .itc-proof-file · .itc-proof-hint
     (the button keeps WooCommerce's "button alt" - they left it on purpose)

   The contract's OLD values are reproduced in structure, but re-expressed in
   the theme identity already used on checkout (radius-md / gray-100 / #fff),
   so the form matches the cards around it instead of the 2019 look.

   NOT rendered by me: I have no access to an order page. The structure comes
   from their measurement of the live file, not from my own render.

   SCOPE: body.woocommerce-account - the form renders on view-order, which is a
   woocommerce-account page. Measured = 1 there, = 0 on 8 other pages.
   ============================================================ */

body.woocommerce-account .itc-proof-notice{
  margin-top:15px;
  padding:14px 16px;
  border-radius:var(--itc-radius-md);
  font-size:14px;
  line-height:1.7;
  text-align:start;
  box-sizing:border-box;
}
body.woocommerce-account .itc-proof-notice--error{
  background:var(--itc-red-tint);
  border:1px solid #ef9a9a;
  color:#b71c1c;
}
body.woocommerce-account .itc-proof-notice--done{
  background:#e8f5e9;
  border:1px solid #a5d6a7;
  color:#1b5e20;
}
body.woocommerce-account .itc-proof-link{
  color:var(--itc-red);
  text-decoration:none;
  font-weight:700;
}
body.woocommerce-account .itc-proof-form{
  margin-top:15px;
  padding:24px;
  background:#fff;
  border:1px solid var(--itc-gray-100);
  border-radius:var(--itc-radius-md);
  text-align:start;
  box-sizing:border-box;
}
body.woocommerce-account .itc-proof-label{
  display:block;
  margin-bottom:8px;
  font-weight:700;
  font-size:14px;
  color:var(--itc-black);
}
body.woocommerce-account .itc-proof-file{
  display:block;
  width:100%;
  padding:12px 15px;
  background:var(--itc-gray-50);
  border:1.5px solid var(--itc-gray-100);
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  color:var(--itc-black);
  box-sizing:border-box;
  cursor:pointer;
}
body.woocommerce-account .itc-proof-hint{
  font-size:12px;
  color:var(--itc-gray-500);
  margin:8px 0 14px;
}
body.woocommerce-account .itc-proof-submit{
  border-radius:var(--itc-radius-pill);
  padding:12px 26px;
  font-size:15px;
  font-weight:700;
}


/* ============================================================
   itc-myaccount-shell-mark
   OWNER REPORT (2026-08-16 13:59Z): /my-account/view-order/<id>/ spans the
   FULL viewport width while every other page keeps a side gutter.

   MEASURED CAUSE (ancestor chain walked, live css 178,793 = b32400417b14):
     div.woocommerce = div.container = 1890 @1920  -> nothing caps the account page
     itc-core.css:2658  .content-area .container, .content-area .row,
                        .content-area [class*="col-"]{ max-width:none !important;
                        width:100% !important; padding:0 !important; margin:0 !important }
     -> that block (added for the SOUQ pages) releases the theme's Bootstrap
        container SITE-WIDE. Pages that look correct do NOT rely on .container:
          /blog/  -> .itc-section-shell  max-width:1400 + padding 24/20/16
          /jobs/  -> .col-lg-9           = 75% of the row
        The account template has neither: it renders into .col-sm-12 (100%),
        so releasing .container leaves it edge to edge.
     -> so this is the SHELL of every account page, NOT the order-details markup.
        Measured identically on /my-account/ (login state) at all 5 widths.

   FIX: give the account container the SAME shell metric the rest of the site
   already uses. The number is not invented - 1400px is read from this file in
   two places: .itc-section-shell (max-width:1400) and .itc-header-inner
   (max-width:1400), and the 24/20/16 gutter scale + the 1024/600 breakpoints
   are copied from .itc-section-shell.
   RESULT (target): account content box == blog shell content box at every width.

   Applied to .woocommerce - NOT to .container - because .container is held by
   an !important rule at 2658. .woocommerce is untouched by that rule, so this
   needs ZERO !important and wins on source order over the earlier
   body.woocommerce-account .woocommerce declarations (3312 / 3515 / 3426 / 3429).
   Net-additive: appended, nothing above this line changes.
   ============================================================ */

body.woocommerce-account .woocommerce{
  max-width:1400px;
  margin-inline:auto;
  padding-inline:24px;
  box-sizing:border-box;
}
@media (max-width:1024px){
  body.woocommerce-account .woocommerce{ padding-inline:20px; }
}
@media (max-width:600px){
  body.woocommerce-account .woocommerce{ padding-inline:16px; }
}


/* Freelancer registration: category proposal and approved avatar presets. */
#itc-freelancer-form .itc-category-proposal[hidden]{ display:none; }
#itc-freelancer-form .itc-category-proposal{ margin-top:var(--itc-space-2); }
#itc-freelancer-form .itc-category-review-note{ margin:var(--itc-space-1) 0 0; color:var(--itc-gray-700); font-size:13px; line-height:1.7; }
#itc-freelancer-form .itc-avatar-presets{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--itc-space-1); margin-top:var(--itc-space-2); }
#itc-freelancer-form .itc-avatar-preset{ position:relative; display:block; cursor:pointer; border:1px solid var(--itc-gray-300); border-radius:var(--itc-radius-md); overflow:hidden; background:var(--itc-white); transition:border-color var(--itc-dur-fast) var(--itc-ease),box-shadow var(--itc-dur-fast) var(--itc-ease),transform var(--itc-dur-fast) var(--itc-ease); }
#itc-freelancer-form .itc-avatar-preset input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; }
#itc-freelancer-form .itc-avatar-preset img{ display:block; inline-size:100%; aspect-ratio:1; object-fit:cover; }
#itc-freelancer-form .itc-avatar-preset:focus-within,#itc-freelancer-form .itc-avatar-preset:hover{ border-color:var(--itc-red); box-shadow:var(--itc-shadow-sm); transform:translateY(-2px); }
#itc-freelancer-form .itc-avatar-preset:has(input:checked){ border:2px solid var(--itc-red); box-shadow:var(--itc-shadow-red); }
#itc-freelancer-form .itc-avatar-preset-name{ display:block; padding:var(--itc-space-1); color:var(--itc-black); font-size:12px; font-weight:700; text-align:center; }
@media (max-width:600px){ #itc-freelancer-form .itc-avatar-presets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Freelancer registration: compact avatar gallery — live CSS append. */
[data-itc-avatar-presets]{
  border-style:none;
  padding:unset;
}
[data-itc-avatar-presets] .itc-avatar-preset-options{
  display:grid;
  gap:var(--itc-space-1);
  grid-template-columns:repeat(6,minmax(0,1fr));
}
[data-itc-avatar-presets] .itc-avatar-preset-option{
  aspect-ratio:1;
  background:var(--itc-glass-fill-strong);
  border:solid var(--itc-gray-100);
  border-radius:var(--itc-radius-sm);
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  font-size:0;
  margin:unset;
  overflow:hidden;
  position:relative;
  transition:border-color var(--itc-dur-fast) var(--itc-ease),box-shadow var(--itc-dur-fast) var(--itc-ease);
}
[data-itc-avatar-presets] .itc-avatar-preset-option:hover{
  border-color:var(--itc-red);
  box-shadow:var(--itc-shadow-sm);
}
[data-itc-avatar-presets] .itc-avatar-preset-option input{
  opacity:0;
  position:absolute;
}
[data-itc-avatar-presets] .itc-avatar-preset-option input:checked + img{
  outline:solid var(--itc-red);
  outline-offset:calc(var(--itc-space-1) * -1);
}
[data-itc-avatar-presets] .itc-avatar-preset-option input:focus-visible + img{
  box-shadow:var(--itc-focus-ring);
  outline:solid var(--itc-red);
  outline-offset:calc(var(--itc-space-1) * -1);
}
[data-itc-avatar-presets] .itc-avatar-preset-option img{
  display:block;
  height:100%;
  object-fit:cover;
  width:100%;
}
@media (orientation:portrait){
  [data-itc-avatar-presets] .itc-avatar-preset-options{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* Freelancer registration avatar hover: red glow, not a selected red edge. */
[data-itc-avatar-presets] .itc-avatar-preset-option:hover:has(input:checked){
  border-color:var(--itc-glass-fill-strong);
  box-shadow:var(--itc-focus-ring);
}
[data-itc-avatar-presets] .itc-avatar-preset-option:hover:has(input:checked:not(:focus-visible)) input:checked + img{
  outline-color:transparent;
}