/* ═══════════════════════════════════════════════════════════════════════════
   «طريقتك» — المسار اليدوي (plm-). مصغّر أمين لمُنشئ العروض في لوحة رِماية:
   نافذة بيضاء تملأ لوحة 480×360، شريط علوي 44px فيه العنوان ومُخطّط من ثلاث
   خطوات، ومنطقة عمل رمادية فاتحة بحشوة 18px. الخطوة النشطة نقطة بنفسجية،
   والمنتهية علامة صح. الأرقام لاتينية بجدولة ثابتة.
   كل المقاسات بوحدات اللوحة (480×360) — القشرة تتحكّم بالقياس عبر transform.
   ========================================================================== */

.plm-app {
  --plm-brand: #5c17fd;
  --plm-deep: #331761;
  --plm-soft: #ede6ff;
  --plm-canvas: #f6f5fb;
  --plm-hair: #ece9f5;
  --plm-hair2: #dcd6e9;
  --plm-ink: #1b1530;
  --plm-ink2: #6b6680;
  --plm-teal: #024e5c;
  --plm-ok: #11795a;
  --plm-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Rimaya Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  font-size: 15px;
  color: var(--plm-ink);
  line-height: 1.5;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.plm-app *,
.plm-app *::before,
.plm-app *::after {
  box-sizing: border-box;
}

.plm-ico {
  width: 1em;
  height: 1em;
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─────────────────────────────────────────────────────── نافذة التطبيق ─── */

.plm-win {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 16px;
}

/* ──────────────────────────────────────────────────────── الشريط العلوي ─── */

.plm-top {
  flex: none;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #fff;
  border-block-end: 1px solid var(--plm-hair);
}

.plm-title {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.plm-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.plm-st {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--plm-ink2);
  white-space: nowrap;
  transition: color 200ms var(--plm-ease);
}

/* الوصلة بين الخطوات: خطّ شعري قصير يسبق كل خطوة بعد الأولى */
.plm-st + .plm-st::before {
  content: "";
  width: 8px;
  height: 1px;
  flex: none;
  margin-inline-start: -3px;
  background: var(--plm-hair2);
}

.plm-st-dot {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1.5px solid var(--plm-hair2);
  border-radius: 50%;
  background: #fff;
  transition:
    background-color 200ms var(--plm-ease),
    border-color 200ms var(--plm-ease),
    box-shadow 200ms var(--plm-ease);
}

.plm-st-dot .plm-ico {
  width: 9px;
  height: 9px;
  color: var(--plm-brand);
  opacity: 0;
  transition: opacity 160ms var(--plm-ease);
}

.plm-st.is-on {
  color: var(--plm-ink);
  font-weight: 700;
}

.plm-st.is-on .plm-st-dot {
  border-color: var(--plm-brand);
  background: var(--plm-brand);
  box-shadow: 0 0 0 3px var(--plm-soft);
}

.plm-st.is-done {
  color: var(--plm-ink2);
}

.plm-st.is-done .plm-st-dot {
  border-color: transparent;
  background: var(--plm-soft);
}

.plm-st.is-done .plm-st-dot .plm-ico {
  opacity: 1;
}

/* ───────────────────────────────────────────────────────── منطقة العمل ─── */

.plm-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  padding: 18px;
  background: var(--plm-canvas);
}

.plm-stage {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* الانتقال بين الخطوات: تلاشٍ مع انزلاق 12px في 280ms */
.plm-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 280ms var(--plm-ease),
    transform 280ms var(--plm-ease),
    visibility 0s linear 280ms;
}

.plm-step.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.plm-h {
  flex: none;
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--plm-ink);
}

/* ─────────────────────────────────────────────── الخطوة 0: شبكة الأنواع ─── */

.plm-types {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.plm-type {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #fff;
  border: 1.5px solid var(--plm-hair);
  border-radius: 14px;
  transition:
    border-color 180ms var(--plm-ease),
    box-shadow 200ms var(--plm-ease),
    transform 160ms var(--plm-ease);
}

.plm-type-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--plm-soft);
  color: var(--plm-deep);
  transition:
    background-color 180ms var(--plm-ease),
    color 180ms var(--plm-ease);
}

.plm-type-ico .plm-ico {
  width: 19px;
  height: 19px;
}

.plm-type-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--plm-ink);
}

.plm-type-tick {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--plm-brand);
  color: #fff;
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 160ms var(--plm-ease),
    transform 200ms var(--plm-ease);
}

.plm-type-tick .plm-ico {
  width: 12px;
  height: 12px;
}

/* علامات الصح الصغيرة تحتاج سُمكًا أكبر كي تُقرأ عند 9–13px */
.plm-st-dot .plm-ico,
.plm-type-tick .plm-ico,
.plm-chip .plm-ico,
.plm-toast-ico .plm-ico {
  stroke-width: 2.6;
}

.plm-type.is-on {
  border-color: var(--plm-brand);
  box-shadow: 0 0 0 3px var(--plm-soft);
}

.plm-type.is-on .plm-type-ico {
  background: var(--plm-brand);
  color: #fff;
}

.plm-type.is-on .plm-type-tick {
  opacity: 1;
  transform: none;
}

.plm-type.is-press {
  transform: scale(0.97);
}

/* ──────────────────────────────────────── الخطوة 1: الشرط والمعاينة ─── */

.plm-two {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

/* المعاينة في جهة البداية (يمين): ورقة الجيب بلون المتجر */
.plm-pv {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--plm-teal) 16%, #fff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--plm-teal) 6%, #fff);
}

.plm-pv-lab {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--plm-teal);
}

.plm-pv-lab .plm-ico {
  width: 14px;
  height: 14px;
}

.plm-pv-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  border: 1px solid #e6eef0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px -20px rgba(2, 78, 92, 0.55);
}

.plm-pv-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--plm-ink);
}

.plm-slots {
  display: flex;
  gap: 6px;
  flex: none;
  margin-block: auto;
}

.plm-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  overflow: hidden;
  border: 1.5px solid #e2edef;
  border-radius: 50%;
  background: #f2f7f8;
  transition:
    opacity 240ms var(--plm-ease),
    transform 240ms var(--plm-ease);
}

.plm-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plm-slot.is-off {
  opacity: 0;
  transform: scale(0.7);
}

.plm-slot--add {
  border: 1.5px dashed color-mix(in srgb, var(--plm-teal) 45%, #fff);
  background: transparent;
  color: var(--plm-teal);
}

.plm-slot--add .plm-ico {
  width: 15px;
  height: 15px;
}

.plm-pv-met {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
}

.plm-met {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgba(2, 78, 92, 0.12);
  overflow: hidden;
}

/* التعبئة تتقدّم بـ scaleX من جهة البداية (يمين) — بلا انتقال عرض.
   القيمة الافتراضية هي حالة النشر (2 من 3) كي يقرأ الترميز بلا JS. */
.plm-met i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--plm-teal);
  transform: scaleX(0.667);
  transform-origin: right center;
  transition: transform 420ms var(--plm-ease);
}

.plm-pv-count {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--plm-ink2);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* النموذج: تسمية فوق الحقل، كما في مُنشئ اللوحة الحقيقي */
.plm-form {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--plm-hair);
  border-radius: 14px;
  background: #fff;
}

.plm-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.plm-flab {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.plm-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plm-sbtn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1.5px solid var(--plm-hair2);
  border-radius: 10px;
  background: #fff;
  color: var(--plm-ink2);
  transition:
    transform 140ms var(--plm-ease),
    background-color 160ms var(--plm-ease),
    border-color 160ms var(--plm-ease);
}

.plm-sbtn:first-child {
  color: var(--plm-ink2);
}

.plm-sbtn .plm-ico {
  width: 16px;
  height: 16px;
}

.plm-sbtn.is-press {
  border-color: var(--plm-brand);
  background: var(--plm-soft);
  color: var(--plm-brand);
  transform: scale(0.94);
}

.plm-sval {
  display: grid;
  place-items: center;
  flex: 1;
  height: 40px;
  border: 1.5px solid var(--plm-hair2);
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plm-sval.is-tick {
  animation: plm-tick 260ms var(--plm-ease);
}

@keyframes plm-tick {
  0% {
    transform: scale(0.78);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

.plm-get {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  border: 1.5px solid color-mix(in srgb, var(--plm-brand) 28%, #fff);
  border-radius: 10px;
  background: var(--plm-soft);
  color: var(--plm-deep);
}

.plm-get b {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.plm-get span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.plm-get .plm-ico {
  align-self: center;
  width: 17px;
  height: 17px;
  margin-inline-start: auto;
  opacity: 0.8;
}

/* وميض المكافأة: حلقة تتوسّع وتتلاشى (transform + opacity وحدهما) */
.plm-get::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border: 1.5px solid var(--plm-brand);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
}

.plm-get.is-lit::after {
  animation: plm-lit 560ms var(--plm-ease);
}

@keyframes plm-lit {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.22);
  }
}

/* ──────────────────────────────────────────────── الخطوة 2: الصفحات ─── */

.plm-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: none;
}

.plm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border: 1.5px solid var(--plm-hair2);
  border-radius: 99px;
  background: #fff;
  color: var(--plm-ink2);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition:
    border-color 180ms var(--plm-ease),
    background-color 180ms var(--plm-ease),
    color 180ms var(--plm-ease),
    transform 140ms var(--plm-ease);
}

.plm-chip .plm-ico {
  width: 13px;
  height: 13px;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 160ms var(--plm-ease),
    transform 200ms var(--plm-ease);
}

.plm-chip.is-on {
  border-color: var(--plm-brand);
  background: var(--plm-soft);
  color: var(--plm-deep);
}

.plm-chip.is-on .plm-ico {
  opacity: 1;
  transform: none;
}

.plm-chip.is-press {
  transform: scale(0.97);
}

.plm-review {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-height: 0;
  margin-block-start: 12px;
  padding: 16px;
  border: 1px solid var(--plm-hair);
  border-radius: 14px;
  background: #fff;
}

.plm-review-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--plm-soft);
  color: var(--plm-deep);
}

.plm-review-ico .plm-ico {
  width: 21px;
  height: 21px;
}

.plm-review-txt {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plm-review-txt strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.plm-review-txt span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--plm-ink2);
}

.plm-review-art {
  display: flex;
  flex: none;
  margin-inline-start: auto;
}

.plm-review-art img {
  width: 34px;
  height: 34px;
  display: block;
  border: 2px solid #fff;
  border-radius: 11px;
  box-shadow: 0 0 0 1px var(--plm-hair);
}

.plm-review-art img + img {
  margin-inline-start: -10px;
}

.plm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-block-start: 12px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--plm-hair);
}

.plm-ghost {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--plm-hair2);
  border-radius: 10px;
  background: #fff;
  color: var(--plm-ink2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.plm-pub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0 20px;
  border-radius: 11px;
  background: var(--plm-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 10px 22px -14px rgba(92, 23, 253, 0.9);
  transition:
    transform 140ms var(--plm-ease),
    background-color 160ms var(--plm-ease);
}

.plm-pub.is-press {
  transform: scale(0.97);
}

/* ───────────────────────────────────────────────────────── الإشعار ─── */

.plm-toast {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 22px;
  z-index: 20;
  width: max-content;
  max-width: 300px;
  height: 38px;
  margin-inline: auto;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--plm-ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow:
    0 16px 30px -12px rgba(10, 4, 26, 0.55),
    0 2px 6px -2px rgba(10, 4, 26, 0.25);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity 260ms var(--plm-ease),
    transform 320ms var(--plm-ease);
}

.plm-toast.is-on {
  opacity: 1;
  transform: none;
}

.plm-toast-ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: #4ade9b;
}

.plm-toast-ico .plm-ico {
  width: 18px;
  height: 18px;
  stroke-width: 2.8;
}

/* ───────────────────────────────────────────────────────── المؤشّر ─── */

.plm-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 20px;
  height: 24px;
  opacity: 0;
  transform: translate(424px, 318px);
  transform-origin: 2.4px 2.2px;
  filter: drop-shadow(0 3px 4px rgba(10, 4, 26, 0.3));
  pointer-events: none;
  will-change: transform;
  transition: opacity 200ms var(--plm-ease);
}

.plm-cursor.is-live {
  opacity: 1;
}

.plm-ripple {
  position: absolute;
  z-index: 25;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(92, 23, 253, 0.32);
  pointer-events: none;
  animation: plm-ripple 560ms var(--plm-ease) forwards;
}

@keyframes plm-ripple {
  from {
    opacity: 0.65;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

/* ─────────────────────────────────────────────── حركة مخفّضة / استقرار ─── */

/* لحظة تثبيت الحالة: تُعطَّل الانتقالات كي لا تتسرّب حركة من إعادة الضبط */
.plm-settle,
.plm-settle *,
.plm-settle *::before,
.plm-settle *::after {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .plm-app *,
  .plm-app *::before,
  .plm-app *::after {
    transition: none !important;
    animation: none !important;
  }

  .plm-cursor,
  .plm-ripple {
    display: none !important;
  }
}