/* =====================================================
   طبقة — أنماط مُكوّن المتغيّرات (متجاوب على ٣ شاشات)
   يعتمد متغيّرات الهوية من styles.css:
   --ink --ink-soft --hot --hot-deep --card --line --radius
   ===================================================== */

.cfg-sec { margin-top: 20px; }
.cfg-sec:empty { display: none; }

.cfg-label {
  font-family: "Changa", sans-serif;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cfg-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hot);
}

/* شبكة الخيارات (خامة / مقاس) */
.cfg-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cfg-opt {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
  min-height: 48px; /* هدف لمس مريح */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cfg-opt small {
  display: block;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 3px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
}
.cfg-opt:hover { border-color: var(--ink-soft); }
.cfg-opt:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.cfg-opt.on {
  border-color: var(--hot);
  background: #fff7f1;
  color: var(--hot-deep);
}
.cfg-opt.on small { color: var(--hot-deep); }

/* دوائر الألوان */
.cfg-colors { display: flex; gap: 12px; flex-wrap: wrap; }
.cfg-col {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: box-shadow .15s;
}
.cfg-col:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.cfg-col.on { box-shadow: 0 0 0 2px var(--hot); }
.cfg-col.special::after {
  content: "★";
  position: absolute; top: -7px; left: -4px;
  font-size: 11px; color: var(--hot-deep);
}

/* ملاحظة السعر (خامة · مقاس · لون) */
.cfg-pricenote { font-size: 13px; color: var(--ink-soft); min-height: 18px; margin-top: 4px; }
.cfg-pricenote .special { color: var(--hot-deep); }

/* =========================================================
   نقاط التوقّف — ٣ شاشات
   ========================================================= */

/* تابلت: 561px – 820px */
@media (max-width: 820px) {
  .cfg-opt { font-size: 14px; padding: 14px 8px; }
  .cfg-col { width: 46px; height: 46px; } /* أهداف لمس أكبر */
}

/* جوال: ≤ 560px */
@media (max-width: 560px) {
  .cfg-opts { gap: 8px; }
  .cfg-opt { padding: 12px 6px; min-height: 52px; font-size: 14px; }
  .cfg-opt small { font-size: 10px; }
  .cfg-colors { gap: 14px; }
  .cfg-col { width: 44px; height: 44px; }

  /* شريط الشراء الثابت أسفل الشاشة على الجوال */
  .pd-order,
  .pd-price-wrap { }
  .cfg-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 50;
    box-shadow: 0 -4px 16px rgba(22,36,59,.08);
  }
  .cfg-buybar .bb-price {
    font-family: "Changa", sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--hot-deep);
    white-space: nowrap;
  }
  .cfg-buybar .bb-price small { font-size: 13px; color: var(--ink-soft); font-weight: 500; }
  .cfg-buybar .bb-add {
    flex: 1;
    background: var(--hot); color: #fff; border: none;
    border-radius: 12px; padding: 14px;
    font-family: "Changa", sans-serif; font-size: 16px; font-weight: 600;
    cursor: pointer;
  }
  .cfg-buybar .bb-add:disabled { background: var(--line); color: var(--ink-soft); }
  /* مساحة سفلية حتى لا يغطّي الشريط المحتوى */
  body.has-buybar { padding-bottom: 92px; }
}

/* سطح المكتب: نُخفي شريط الجوال دائماً فوق 560 */
@media (min-width: 561px) {
  .cfg-buybar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cfg-opt, .cfg-col { transition: none; }
}

/* =====================================================
   محرّر المتغيّرات في لوحة التحكم (وضع داكن)
   مُنطاق تحت .ve — لا يؤثّر على صفحة الزبون
   ===================================================== */
.ve{
  --ve-bg:#0d1622; --ve-surface:#121e2e; --ve-raised:#1a2940;
  --ve-line:#243753; --ve-text:#e8edf4; --ve-soft:#8fa0b8;
  --ve-hot:#ff7a1a; --ve-hot-deep:#e85d04; --ve-ok:#3ddc84; --ve-danger:#ff5470;
  display:flex; flex-direction:column; gap:18px;
  font-family:"IBM Plex Sans Arabic",sans-serif; color:var(--ve-text);
  margin-top:6px;
}
.ve-block{
  background:var(--ve-surface);
  border:1px solid var(--ve-line);
  border-radius:14px;
  padding:16px;
}
.ve-h{
  font-family:"Changa",sans-serif; font-size:14px; font-weight:600;
  color:var(--ve-text); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.ve-h::before{ content:""; width:6px; height:16px; border-radius:3px; background:var(--ve-hot); }

/* خامات — حبوب اختيار */
.ve-mats{ display:flex; flex-wrap:wrap; gap:10px; }
.ve-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ve-raised); border:1px solid var(--ve-line);
  border-radius:999px; padding:9px 16px; cursor:pointer;
  font-size:14px; color:var(--ve-soft); transition:.15s; user-select:none;
}
.ve-chip input{ accent-color:var(--ve-hot); width:16px; height:16px; cursor:pointer; }
.ve-chip:has(input:checked){
  border-color:var(--ve-hot); background:rgba(255,122,26,.12); color:var(--ve-text);
}

/* صفوف المقاسات — بطاقات */
.ve-rows{ display:flex; flex-direction:column; gap:12px; }
.ve-row{
  position:relative;
  background:var(--ve-raised);
  border:1px solid var(--ve-line);
  border-radius:12px;
  padding:16px 16px 14px;
}
.ve-grid{
  display:grid;
  grid-template-columns:1.3fr 1.3fr 1fr 1fr 1fr;
  gap:12px;
}
.ve-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ve-f > span{ font-size:11px; color:var(--ve-soft); font-weight:500; }
.ve-in{
  width:100%;
  background:var(--ve-bg);
  border:1px solid var(--ve-line);
  border-radius:9px;
  padding:10px 12px;
  color:var(--ve-text); font-family:inherit; font-size:14px;
  transition:border-color .15s; min-width:0;
}
.ve-in::placeholder{ color:#4d6178; }
.ve-in:focus{ outline:none; border-color:var(--ve-hot); }

/* شريط السعر التقديري */
.ve-price{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--ve-line);
}
.ve-price-label{ font-size:12px; color:var(--ve-soft); }
.ve-preview{
  font-family:"Changa",sans-serif; font-size:15px; font-weight:600;
  color:var(--ve-ok); background:rgba(61,220,132,.1);
  border-radius:8px; padding:5px 12px; min-width:70px; text-align:center;
}
.ve-preview em{ color:var(--ve-soft); font-weight:400; font-size:11px; font-style:normal; }

/* زر حذف الصف */
.ve-del{
  position:absolute; top:10px; left:10px;
  width:26px; height:26px; border-radius:7px;
  background:transparent; border:1px solid var(--ve-line);
  color:var(--ve-soft); cursor:pointer; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.ve-del:hover{ border-color:var(--ve-danger); color:var(--ve-danger); }

/* أزرار الإضافة */
.ve-add{
  margin-top:12px;
  background:transparent; border:1px dashed #35507a; color:var(--ve-soft);
  border-radius:10px; padding:10px 16px; cursor:pointer;
  font-family:inherit; font-size:14px; transition:.15s;
}
.ve-add:hover{ border-color:var(--ve-hot); color:var(--ve-hot); }

/* صفوف الألوان */
.ve-colors{ display:flex; flex-direction:column; gap:10px; }
.ve-crow{
  display:flex; align-items:center; gap:12px;
  background:var(--ve-raised); border:1px solid var(--ve-line);
  border-radius:10px; padding:10px 12px;
}
.ve-crow .ve-del{ position:static; margin-inline-start:auto; }
.ve-chex{
  width:40px; height:40px; padding:0; border:1px solid var(--ve-line);
  border-radius:8px; background:none; cursor:pointer; flex:0 0 auto;
}
.ve-crow .ve-cname{ flex:1; }
.ve-chip-tier{ flex:0 0 auto; }

/* تجاوب */
@media (max-width:640px){
  .ve-grid{ grid-template-columns:1fr 1fr; }
  .ve-f:first-child{ grid-column:1 / -1; }
}

/* عنوان قسم المقاسات داخل نموذج المنتج */
.pm-section-label{
  display:block; margin:18px 0 4px;
  font-family:"Changa",sans-serif; font-size:14px; font-weight:600; color:#e8edf4;
}
.pm-section-label small{ color:#8fa0b8; font-weight:400; font-size:12px; }