/* ==========================================================================
   radio-chip.css — شريحة اختيار كبيرة (Selectable radio chip)
   شركة السرعة المطلقة | كل القيم من tokens.css — RTL.
   تُستخدم في: خطوة الدفع 2 (خيارات التوصيل الثلاثة) + نطاقات سعر الفلاتر
   WC-NOTE: محدّد طريقة شحن/تركيب مخصّص (custom shipping method selector)
   مثال HTML:
     <label class="radio-chip radio-chip--selected">
       <input type="radio" name="delivery" class="radio-chip__input" checked>
       <span class="radio-chip__check">✓</span>
       <span class="radio-chip__icon"><!-- أيقونة --></span>
       <span class="radio-chip__label">توصيل</span>
       <span class="radio-chip__price">300.00 ر.س</span>
     </label>
   ========================================================================== */

/* في RTL: التسمية يمين + الأيقونة يسارها، ودائرة الاختيار بأعلى اليسار */
.radio-chip {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-block: var(--space-20);
  padding-inline: var(--space-16);
  background-color: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.radio-chip:hover {
  border-color: var(--color-border-strong);
}

/* إخفاء زر الراديو الأصلي مع إبقائه متاحًا (accessible) */
.radio-chip__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* الأيقونة والتسمية */
.radio-chip__icon {
  display: inline-flex;
  font-size: var(--fs-xl);
  color: var(--color-text);
}
.radio-chip__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text);
}

/* دائرة الاختيار بأعلى اليمين (inset-inline-start = يمين في RTL)
   ظاهرة دائمًا كحلقة فارغة، وتمتلئ عنابيًا عند الاختيار */
.radio-chip__check {
  position: absolute;
  inset-block-start: var(--space-12);
  inset-inline-start: var(--space-12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-20);
  height: var(--space-20);
  border-radius: var(--radius-pill);
  border: var(--border-width-active) solid var(--color-border-strong);
  background-color: transparent;
  color: transparent;
  font-size: var(--fs-2xs);
}

/* الحالة المختارة (Selected) — حدّ عنابي + تعبئة ورديّة خفيفة + علامة */
.radio-chip--selected {
  border-color: var(--color-primary-deep);
  border-width: var(--border-width-active);
  background-color: color-mix(in srgb, var(--color-primary-deep) 6%, var(--color-surface));
}
.radio-chip--selected .radio-chip__check {
  border-color: var(--color-primary-deep);
  background-color: var(--color-primary-deep);
  color: var(--color-text-invert);
}
.radio-chip--selected .radio-chip__label,
.radio-chip--selected .radio-chip__icon {
  color: var(--color-primary-deep);
}

/* مُعدِّل صغير (Small) — شرائح نطاق السعر في الفلاتر
   حبّة صغيرة بلا أيقونة ولا سعر */
.radio-chip--sm {
  flex-direction: row;
  padding-block: var(--space-4);
  padding-inline: var(--space-12);
  font-size: var(--fs-2xs);
}
.radio-chip--sm .radio-chip__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}