/*
 * شكل البطاقة على الشاشة، في ملف واحد تستعمله صفحة التسجيل ولوحة المحل.
 *
 * كان الشكل مكتوباً مرتين، فكل تحسين في إحدى الصفحتين يترك الأخرى خلفه:
 * يختار صاحب المحل تصميماً عند التسجيل، ثم يفتح لوحته فيرى غيره. والقيم
 * هنا تطابق ما يرسمه مولّد الطباعة عنصراً بعنصر، فالمعاينة التي تخالف
 * المطبوع تُفقد الثقة بأول بطاقة تصل من المطبعة.
 */

.ca-card {
  --ca-bg: #0f3d3e;
  --ca-fg: #f5f1e8;
  --ca-accent: #c9a227;
  --ca-on: #0f3d3e;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, .07) 0%, rgba(0, 0, 0, .14) 100%),
    var(--ca-bg);
  color: var(--ca-fg);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 85.6 / 54;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* المثلث القطري نفسه المرسوم على المطبوع، بالنسب نفسها */
.ca-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ca-accent);
  opacity: .13;
  clip-path: polygon(100% 18%, 100% 100%, 42% 100%);
}
.ca-card > * { position: relative; z-index: 1; }

.ca-card .ca-name { font-size: 1.2rem; font-weight: 700; }
.ca-card .ca-rule {
  width: 72px; height: 1px; background: var(--ca-accent); opacity: .5;
  /* في العربية البداية يمين، فدفعُ الخط إلى اليمين يكون بهامش نهاية تلقائي */
  margin-block: 6px 5px; margin-inline-end: auto;
}
.ca-card .ca-tag { font-size: .78rem; opacity: .85; color: var(--ca-accent); }

/* شارة الخصم تُقرأ عربية: علامة النسبة لاتينية لأن العربية منها يقلبها
   مولّد الطباعة إلى يسار الرقم بينما يبقيها المتصفح يمينه. */
.ca-card .ca-cut {
  display: inline-block; margin-top: 10px;
  padding: 6px 14px; border-radius: 8px;
  background: var(--ca-accent); color: var(--ca-on);
  font-weight: 700; font-size: 1.05rem;
}

/* الاتجاه يُقلب هنا وحده ليقع الرمز يساراً كما في المطبوع */
.ca-card .ca-bottom {
  direction: ltr; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 12px;
}
.ca-card .ca-qr {
  width: 56px; height: 56px; border-radius: 6px; background: #fff;
  display: grid; place-items: center; color: #99a3a1; font-size: .58rem;
}
.ca-card .ca-ids { direction: rtl; text-align: right; }
.ca-card .ca-contact { font-size: .66rem; opacity: .8; color: var(--ca-accent); }
.ca-card .ca-serial {
  direction: ltr; letter-spacing: .1em; font-weight: 700;
  font-size: .84rem; margin-top: 3px;
}

/* تخطيط الشريط: الشريط الملوّن يملأ أسفل البطاقة ويحمل الرمز والخصم،
   كما يرسمه مولّد الطباعة. والقطر يُخفى لأن المطبوع بلا قطر هنا. */
.ca-card.ca-band { padding: 0; }
.ca-card.ca-band::after { display: none; }
.ca-card.ca-band .ca-top { padding: 18px 20px 0; }
.ca-card.ca-band .ca-bottom {
  background: var(--ca-accent); color: var(--ca-on);
  padding: 10px 20px; align-items: center;
}
.ca-card.ca-band .ca-ids { color: var(--ca-on); }
.ca-card.ca-band .ca-contact { color: var(--ca-fg); }
.ca-card.ca-band .ca-bigcut { font-weight: 700; font-size: 1.25rem; }

/* ── شبكة الاختيار ── */
.ca-picks {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ca-pick {
  border: 2px solid transparent; border-radius: 14px; padding: 0;
  background: none; cursor: pointer; position: relative;
  font: inherit; color: inherit; text-align: inherit;
}
.ca-pick[aria-pressed="true"] { border-color: var(--ca-picked, #0f3d3e); }

/* علامة الاختيار على الطرف المقابل لبداية السطر: اسم المحل يبدأ من جهة
   البداية، فعلامة فوقها تغطيه. */
.ca-pick[aria-pressed="true"]::after {
  content: "✓"; position: absolute;
  inset-block-start: -9px; inset-inline-end: -9px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ca-picked, #0f3d3e); color: #fff;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700;
  box-shadow: 0 0 0 3px var(--ca-ring, #fff), 0 2px 6px rgba(0, 0, 0, .25);
}

.ca-mini {
  border-radius: 12px; padding: 12px 13px; aspect-ratio: 85.6 / 54;
  position: relative; overflow: hidden; display: flex;
  flex-direction: column; justify-content: space-between; text-align: start;
}
.ca-mini.ca-classic::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ca-accent); opacity: .13;
  clip-path: polygon(100% 18%, 100% 100%, 42% 100%);
}
.ca-mini > * { position: relative; z-index: 1; }
.ca-mini .ca-nm { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.ca-mini .ca-tg { font-size: .58rem; opacity: .82; margin-top: 2px; }
.ca-mini .ca-pill {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-weight: 700; font-size: .72rem; align-self: flex-start;
}
.ca-mini .ca-bot { display: flex; align-items: flex-end; gap: 8px; direction: ltr; }
.ca-mini .ca-sq { width: 26px; height: 26px; border-radius: 4px; background: #fff; flex: 0 0 auto; }
.ca-mini .ca-sn {
  font-size: .56rem; letter-spacing: .08em; font-weight: 700; direction: ltr;
  margin-inline-start: auto;
}
.ca-pick .ca-label { font-size: .78rem; color: var(--ca-muted, #5f6b6a); margin-top: 6px; }