/* ══════════════════════════════════════════════════════════════
   Partix — كود CSS الكامل (القديم + الجديد)
   📍 انسخه كامل في: لوحة تحكم سلة > التصميم > تخصيص > أكواد CSS
   ══════════════════════════════════════════════════════════════ */

/* ─── المتغيرات ─── */
:root {
  --px-navy: #1B2A4A;
  --px-navy-deep: #111D36;
  --px-navy-light: #243658;
  --px-orange: #E8751A;
  --px-orange-light: #F5923E;
  --px-orange-glow: rgba(232, 117, 26, 0.15);
  --px-orange-glow2: rgba(232, 117, 26, 0.08);
  --px-grey: #8A8D90;
  --px-grey-light: #B0B3B7;
  --px-text: #F0F1F3;
  --px-text-dim: #8A8D90;
  --px-border: #2D3D5A;
  --px-radius: 14px;
}

/* ─── الحاوية ─── */
.partix-search-widget {
  width: 100%; max-width: 820px; margin: 0 auto;
  background: var(--px-navy); border: 1px solid var(--px-border);
  border-radius: var(--px-radius); padding: 36px 32px 28px;
  position: relative; overflow: hidden; font-family: 'Cairo', sans-serif;
  direction: rtl; animation: px-slide-up 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.partix-search-widget::before {
  content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px;
  background: linear-gradient(90deg, transparent 5%, var(--px-orange) 30%, var(--px-orange-light) 50%, var(--px-orange) 70%, transparent 95%);
}
.partix-search-widget::after {
  content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 200px;
  background: radial-gradient(ellipse, var(--px-orange-glow2) 0%, transparent 70%);
  pointer-events: none;
}

/* ─── العنوان ─── */
.partix-header { text-align: center; margin-bottom: 30px; position: relative; z-index: 1; }
.partix-logo-area { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.partix-gear-icon { width: 36px; height: 36px; color: var(--px-orange); animation: px-spin 8s linear infinite; }
.partix-header h2 {
  font-size: 1.5rem; font-weight: 900;
  background: linear-gradient(135deg, var(--px-text) 40%, var(--px-orange-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.partix-header p { font-size: 0.88rem; color: var(--px-text-dim); margin-top: 4px; }

/* ─── الفلاتر (3 أعمدة) ─── */
.partix-filters {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; margin-bottom: 22px; position: relative; z-index: 1;
}
@media (max-width: 640px) {
  .partix-filters { grid-template-columns: 1fr; gap: 14px; }
  .partix-search-widget { padding: 28px 20px 22px; }
  .partix-header h2 { font-size: 1.3rem; }
}

/* ─── الحقول ─── */
.partix-field { position: relative; }
.partix-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--px-orange);
  margin-bottom: 8px; letter-spacing: 0.8px;
}
.partix-field label .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; background: var(--px-orange); color: #fff;
  border-radius: 50%; font-size: 0.65rem; font-weight: 800; flex-shrink: 0;
}
.partix-field select {
  width: 100%; padding: 13px 16px; padding-left: 38px;
  background: var(--px-navy-deep); border: 1.5px solid var(--px-border);
  border-radius: 10px; color: var(--px-text); font-family: 'Cairo', sans-serif;
  font-size: 0.92rem; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none; transition: all 0.25s ease; direction: rtl;
}
.partix-field select:hover { border-color: rgba(232, 117, 26, 0.35); background: var(--px-navy-light); }
.partix-field select:focus { outline: none; border-color: var(--px-orange); box-shadow: 0 0 0 3px var(--px-orange-glow); }
.partix-field select:disabled { opacity: 0.35; cursor: not-allowed; }
.partix-field select option { background: var(--px-navy-deep); color: var(--px-text); }
.partix-field .arrow-icon { position: absolute; left: 13px; bottom: 15px; width: 15px; height: 15px; pointer-events: none; color: var(--px-orange); opacity: 0.7; }

/* ─── زر البحث ─── */
.partix-search-btn {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--px-orange), var(--px-orange-light));
  color: #fff; border: none; border-radius: 10px; font-family: 'Cairo', sans-serif;
  font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: relative; z-index: 1;
}
.partix-search-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(232, 117, 26, 0.35); }
.partix-search-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.partix-search-btn svg { width: 20px; height: 20px; }

/* ─── الخط الفاصل (أو ابحث برقم القطعة) ─── */
.partix-part-divider {
  display: flex; align-items: center; margin: 20px 0 16px;
  position: relative; z-index: 1;
}
.partix-part-divider::before,
.partix-part-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--px-border);
}
.partix-part-divider span {
  padding: 0 16px; font-family: 'Cairo', sans-serif;
  font-size: 0.78rem; font-weight: 600; color: var(--px-text-dim); white-space: nowrap;
}

/* ─── حقل البحث برقم القطعة ─── */
.partix-part-row {
  display: flex; gap: 10px; position: relative; z-index: 1;
}
.partix-part-input {
  flex: 1; padding: 13px 16px;
  background: var(--px-navy-deep); border: 1.5px solid var(--px-border);
  border-radius: 10px; color: var(--px-text); font-family: 'Cairo', sans-serif;
  font-size: 0.92rem; font-weight: 600;
  direction: ltr; text-align: left; transition: all 0.25s ease;
}
.partix-part-input::placeholder { color: #5A6580; font-weight: 400; }
.partix-part-input:focus {
  outline: none; border-color: var(--px-orange);
  box-shadow: 0 0 0 3px rgba(232, 117, 26, 0.15);
}
.partix-part-btn {
  padding: 13px 24px;
  background: linear-gradient(135deg, var(--px-orange), var(--px-orange-light));
  color: #fff; border: none; border-radius: 10px; font-family: 'Cairo', sans-serif;
  font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.partix-part-btn:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(232, 117, 26, 0.3);
}

@media (max-width: 640px) {
  .partix-part-row { flex-direction: column; }
}

/* ─── أنيميشن ─── */
@keyframes px-slide-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes px-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }