/* public/store-system/store.css */

/* أيقونة المتجر بجانب زرار القائمة (التلت شرط) */
.usx-qb-store-btn {
  position: relative;
}
.usx-qb-store-btn i.fa-shopping-bag,
.usx-qb-store-btn i.fa-shopping-cart {
  font-size: 16px;
}

.store-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3000;
}

.store-modal {
  max-width: 640px;
  margin: 40px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.store-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(90deg, #ff9800, #f57c00);
  color: #fff;
}

.store-likes-balance-wrap {
  padding: 8px 16px;
  background: #fff7e6;
  font-weight: bold;
  color: #b45309;
}

.store-modal-body {
  /* [FIX - SCROLL NOT WORKING] الحاوية دي كانت من غير flex:1/min-height:0
     جوه المودال (flex column بـ overflow:hidden وmax-height:85vh) - فكانت
     بتكبّر لحجم محتواها بس بدل ما تتحدد بالمساحة المتاحة، يعني overflow-y:auto
     بتاعها ماكانش عنده أي حاجة فعليًا يعمل لها سكرول جواه؛ أي محتوى زيادة عن
     المساحة كان بيتقص بره الشاشة من غير أي طريقة توصلي له (مش سكرول داخلي
     ولا حتى سكرول الصفحة، لأن الأب عنده overflow:hidden). بإضافة flex:1
     (تاخد المساحة المتبقية فعليًا) وmin-height:0 (تسمح لها تتقلص صح جوه
     flexbox بدل ما تتمدد بارتفاع محتواها)، بقى عندها ارتفاع محدود حقيقي
     فـoverflow-y:auto يشتغل والسكرول (وبالتالي التحميل الكسول عند الوصول
     لآخره) يشتغل صح في كل تابات الأطر/الأغلفة/الافيكتات.
   */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 16px;
}

/* [STORE FIX] تابات "المتجر" / "مشترياتي" */
.store-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.store-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px 6px;
  font-size: 13px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.store-tab-active {
  color: #f57c00;
  border-bottom-color: #f57c00;
}
.store-my-count {
  color: #f57c00;
}

/* [ADDED] شريط التبويبات الفرعي جوه "مشترياتي" (الأطر/الأغلفة/الألوان/المميزات) */
.store-subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  width: 100%;
}
.store-subtab {
  border: 1px solid #eee;
  background: #fafafa;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.store-subtab:hover {
  background: #f2f2f2;
}
.store-subtab.store-subtab-active {
  background: linear-gradient(90deg, #ff9800, #f57c00);
  color: #fff;
  border-color: transparent;
}

/* [STORE FIX] صفوف "مشترياتي" — كل ميزة في صف بإجراءها المناسب جنبها */
.store-my-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #fafafa;
}
.store-my-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.store-my-row-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #eee;
}
.store-my-row-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #f0ad4e;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
}
.store-my-label {
  font-weight: bold;
  font-size: 12px;
  color: #444;
}
.store-my-expiry {
  font-size: 10px;
  color: #999;
}
.store-my-row-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
  min-width: 160px;
}
/* [FIX - COLOR PICKER NOT SHOWING] أداة لون خلفية الاسم/الكارت (معاينة +
   دواير ألوان + اتجاه + لمعة + حفظ + مسح) محتوى كبير نسبيًا كان بيتحط جوه
   ".store-my-row-action" بعرض محدود (160px) جنب ".store-my-row-head" في نفس
   الصف الأفقي - فكان بينضغط جدًا/يتقطع ويبان عمليًا مش ظاهر. الكلاس ده بيخلي
   الصف كامل يترتب طولي (الرأس فوق، وأداة اللون بعرض العمود الكامل تحته)
   بدل ما يتزنقوا جنب بعض. */
.store-my-row.store-my-row-color,
.store-my-row.store-my-row-preview {
  flex-direction: column;
  align-items: stretch;
}
.store-my-row.store-my-row-color .store-my-row-action,
.store-my-row.store-my-row-preview .store-my-row-action {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}
.store-use-btn {
  background: #f57c00;
  white-space: nowrap;
}

/* فورم روابط التواصل المدمج جوه المتجر */
.store-social-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.store-social-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.store-social-row input {
  flex: 1;
  font-size: 11px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* مفتاح تشغيل/إيقاف (زي ميزة رؤية من زار البروفايل) */
.store-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}
.store-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.store-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 20px;
  transition: 0.2s;
}
.store-toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.store-toggle input:checked + .store-toggle-slider {
  background: #5cb85c;
}
.store-toggle input:checked + .store-toggle-slider::before {
  transform: translateX(18px);
}
.store-toggle-label {
  font-size: 11px;
  color: #666;
}

.store-section-title {
  font-weight: bold;
  margin: 10px 0 6px;
  color: #444;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

.store-grid {
  display: flex;
  flex-wrap: wrap;
  /* [FIX - CARDS TOO BIG] كان 10px - قللناه شوية مع تصغير الكروت عشان يفضل
     متناسق ويدخل عدد أكتر في نفس الصف */
  gap: 7px;
}

.store-card {
  /* [FIX - CARDS TOO BIG] كانت 110px - النافذة كبيرة والكروت كانت بتاخد
     مساحة زيادة عن اللازم، فقللناها عشان يدخل عدد أكتر في نفس الصف ويبقى
     الشكل العام أخف */
  width: 84px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  background: #fafafa;
}

.store-card-img {
  width: 100%;
  /* [FIX - CARDS TOO BIG] كانت 70px */
  height: 52px;
  object-fit: contain;
  margin-bottom: 3px;
}

.store-card-icon {
  /* [FIX - CARDS TOO BIG] كانت 70px/28px */
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #f0ad4e;
}

.store-card-btns {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.store-buy-btn {
  border: none;
  border-radius: 5px;
  /* [FIX - CARDS TOO BIG] كانت 4px 6px / 11px */
  padding: 3px 4px;
  font-size: 10px;
  cursor: pointer;
  background: #5cb85c;
  color: #fff;
}
.store-buy-btn-30 {
  background: #337ab7;
}

.store-card-active {
  color: #2e7d32;
  font-weight: bold;
  font-size: 12px;
  padding-top: 8px;
}

.store-empty {
  text-align: center;
  color: #999;
  padding: 30px 0;
}

.store-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  z-index: 5000;
}
.store-toast-error {
  background: #d9534f;
}

/* [STORE FIX 3] أداة اللون/التدرج المصغّرة (لون خلفية الاسم / لون خلفية الكارت) */
.store-color-picker {
  display: flex;
  align-items: center;
  gap: 4px;
}
.store-color-picker input[type="color"] {
  width: 26px;
  height: 26px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
}
.store-color-picker input[type="color"]:disabled {
  opacity: 0.35;
}

/* [STORE FIX 5] تابات الأطر/الأغلفة (تحميل كسول) — نفس ارتفاع جسم المودال
   تقريبًا عشان يبقى فيه اسكرول داخلي يقدر نراقبه ونحمّل الدفعة اللي بعدها */
.store-lazy-panel {
  display: none;
}

/* [STORE FIX 5] تاب "المميزات": كروت صغيرة جنب بعض في صف واحد بدل سكشن
   لكل ميزة لوحدها تحت التانية */
.store-panel-features {
  display: none;
}
.store-features-grid {
  justify-content: flex-start;
}
.store-feature-card {
  /* [FIX - CARDS TOO BIG] كانت 130px */
  width: 100px;
}
.store-feature-label {
  /* [FIX - CARDS TOO BIG] كانت 11px / 28px */
  font-size: 10px;
  font-weight: bold;
  color: #444;
  margin: 3px 0 5px;
  min-height: 22px;
}

.store-panel-atar,
.store-panel-back {
  display: none;
}

/* [STORE FIX 5] أداة "لون/تدرج" المصغّرة داخل تاب مشترياتي — كلاسات مستقلة
   تمامًا عن استوديو تصميم العضوية (.ds-cbg-*) عشان الاتنين يفضلوا شغالين
   جنب بعض من غير أي تعارض سيلكتورات */
.store-cbg-colors {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.store-cbg-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.store-cbg-dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #e2e2ea, 0 2px 6px rgba(0, 0, 0, 0.12);
  background: #eee;
  display: block;
  transition: transform 0.12s ease;
}
.store-cbg-dot:hover {
  transform: scale(1.06);
}
.store-cbg-dot.store-cbg-dot-empty {
  background: repeating-linear-gradient(45deg, #f2f2f7, #f2f2f7 4px, #e4e4ee 4px, #e4e4ee 8px) !important;
}
.store-cbg-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.store-cbg-clear {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: #d9534f;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.store-cbg-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.store-mix-btn,
.store-glow-btn {
  border: 1px solid #ecebf3;
  background: #fafafd;
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  transition: all 0.15s ease;
}
.store-mix-btn.store-mix-active {
  background: linear-gradient(135deg, #6a82fb, #c2185b);
  color: #fff;
  border-color: transparent;
}
.store-glow-btn.store-glow-active {
  background: linear-gradient(135deg, #ffd76a, #ff9f43);
  color: #fff;
  border-color: transparent;
}
.store-cbg-preview {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  background: #eef0f5;
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* [ADDED] معاينة حية حقيقية (صورة العضو الفعلية + اسمه) داخل تاب "مشترياتي"
   لأداتي لون خلفية الاسم/الكارت - بنفس فكرة معاينة استوديو تصميم العضوية
   (avatar + name) عشان العضو يشوف شكل لونه على بروفايله الحقيقي فورًا */
.store-mini-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #eef1fb;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.15s ease;
}
.store-mini-preview-pic {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #ccc no-repeat center/cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.store-mini-preview-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #222;
  padding: 3px 10px;
  border-radius: 14px;
  background: #eef0f5;
  transition: background 0.15s ease, color 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* [ADDED] معاينة الإطار - نفس فكرة معاينة استوديو تصميم العضوية بالظبط
   (ds-preview-avatar-wrap/ds-preview-frame) لكن بكلاسات مستقلة ومقاس أصغر
   يناسب صف "مشترياتي" */
.store-mini-preview-avatar-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.store-mini-preview-avatar-wrap .store-mini-preview-pic {
  width: 34px;
  height: 34px;
  min-width: 34px;
  position: relative;
  z-index: 1;
}
.store-mini-preview-frame-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  pointer-events: none;
  z-index: 2;
}

/* [ADDED] زرار "مسح اللون والرجوع للافتراضي" - كان مفقود بالكامل، مفيش قبل
   كده أي طريقة يشيل بيها العضو اللون المختار غير إنه يختار لون تاني بدل منه */
.store-cbg-reset {
  width: 100%;
  border: none;
  background: transparent;
  color: #d9534f;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 0 2px;
  cursor: pointer;
  text-align: center;
}
.store-cbg-reset:hover {
  text-decoration: underline;
}

/* [ADDED - STORE FIX 8] صف سويتش "رؤية من زار البروفايل" جوه استوديو تصميم
   العضوية - نفس عناصر .store-toggle المستخدمة بالمتجر، هنا بس بصف أفقي بسيط */
.ds-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* حقول السعر في لوحة التحكم - خانة الإضافات */
.store-admin-price-row {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  margin-top: 2px;
}
.store-admin-price-row input {
  width: 46px;
  font-size: 11px;
  padding: 1px 3px;
}