/* ════════════════════════════════════════════════════════
   «سوق اليوم» (الشريحة ١٧أ) — النموذج المعتمد docs/design/reefqalam-site-v7.html فوق v2.css:
   ألوان أوضح (تيل غامق + برتقالي + أحمر للخصم) · صفحة رمادية فاتحة وبطاقات بيضاء · شريط كوبون · صفقة الليلة · عدادات · محفظة كوبونات · هدية السلة.
   الوزن الأقصى للخط 600 · حواف التمييز مستقيمة · الأرقام إنجليزية.
═══════════════════════════════════════════════════════ */
body.v2.v3 {
  --v-bg: #f6f8f9; --v-surface: #eef2f4; --v-card: #ffffff; --v-line: #e3e8ec;
  --v-ink: #1d2a33; --v-muted: #5d6b74; --v-brand: #0b6f78; --v-brand-soft: #e6f4f4; --v-brand-ink: #064b52;
  --v-accent: #ff8a00; --v-accent-soft: #fff1e0; --v-accent-ink: #c2410c; --v-sale: #e5484d; --v-foot: #0b3f45;
}
body.v2.v3.tv-warm { --v-bg: #fbf7f1; --v-surface: #f4ece0; --v-line: #ece1cf; --v-ink: #2b2620; --v-muted: #75695b; }
body.v2.v3.tv-calm { --v-bg: #f2f7f6; --v-surface: #e6efed; --v-line: #d9e6e3; --v-brand: #1f7d80; --v-brand-ink: #155a5c; --v-brand-soft: #e0f0ef; }
body.v2.v3.line-female { --v-brand: #a33e7c; --v-brand-ink: #7a2a5c; --v-brand-soft: #fbe9f3; }
body.v2.v3 { background: var(--v-bg); }
.v2btn.acc { background: var(--v-accent); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--v-accent) 28%, transparent); }

/* ═══ شريط الكوبون أعلى الموقع ═══ */
.cbar { background: linear-gradient(90deg, #ff8a00, #ff5e3a); color: #fff; font-size: 14px; }
.cbar .wrap { display: flex; gap: 10px; align-items: center; justify-content: center; padding-top: 7px; padding-bottom: 7px; flex-wrap: wrap; }
.cbar .sic { width: 18px; height: 18px; }
.cbar code { background: rgba(255,255,255,.18); border: 1px dashed #fff; border-radius: 6px; padding: 0 8px; font: 600 14px 'Cairo', sans-serif; letter-spacing: 1px; }
.cbar button { background: #fff; color: #c2410c; border: 0; border-radius: 6px; padding: 1px 12px; font: 600 13px 'Cairo', sans-serif; cursor: pointer; }

/* ═══ الهيدر ═══ */
body.v3 .top.v2top { border-bottom: 1px solid var(--v-line); }
body.v3 .v2mark { background: var(--v-brand); width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
body.v3 .cartbtn { background: var(--v-brand); color: #fff; padding: 0 14px; border-radius: 12px; border: 0; width: auto; height: 44px; }
body.v3 .cartbtn:hover { background: var(--v-brand-ink); }
body.v3 .cartbtn .bdg { background: var(--v-accent); }
body.v3 .v2wa { background: #e8f8ee; color: #128c4a; }
body.v3 .v2wa:hover { background: #d6f2e1; }

/* ═══ شريط «الآن» ═══ */
body.v3 .hm-ticker { background: var(--v-brand-ink); border: 0; color: #fff; border-radius: 14px; margin-top: 14px; }
body.v3 .hm-ticker .live { color: #ffd28a; }
body.v3 .hm-ticker .live i { background: #ff6b5b; }
body.v3 .hm-ticker .msg { color: rgba(255,255,255,.88); }
body.v3 .hm-ticker .msg b { color: #ffb547; font-weight: 600; }
body.v3 .hm-ticker .st { color: rgba(255,255,255,.75); }
body.v3 .hm-ticker .st b { color: #fff; }

/* ═══ الواجهة + صفقة الليلة ═══ */
.hm-top { margin-top: 14px; }
.hm-top.has-flash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
body.v3 .hm-hero { height: 380px; margin: 0; border-radius: 22px; background: var(--v-brand-ink); }
body.v3 .hm-hero .hs::after { background: linear-gradient(to top, rgba(4,42,46,.88) 0%, rgba(4,42,46,.45) 55%, rgba(4,42,46,.15) 100%); }
body.v3 .hm-hero .ht { top: auto; bottom: 34px; transform: none; inset-inline-start: 84px; inset-inline-end: 84px; max-width: 640px; }
body.v3 .hm-hero h1 { color: #fff; font-size: 32px; }
body.v3 .hm-hero p { color: rgba(255,255,255,.9); }
body.v3 .hm-hero .tag { background: var(--v-accent); color: #fff; }
body.v3 .hm-hero .v2btn.pri { background: var(--v-accent); box-shadow: none; }
body.v3 .hm-hero .v2btn.lite { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
body.v3 .hm-hero .cd div { background: rgba(255,255,255,.14); color: #fff; }
.hm-flash { background: var(--v-card); border: 2px solid #ffe2bf; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.hm-flash .ftag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: var(--v-accent-soft); color: var(--v-accent-ink); font-size: 13px; font-weight: 600; padding: 3px 12px; border-radius: 999px; }
.hm-flash .ftag .sic { width: 16px; height: 16px; }
.hm-flash h3 { font-size: 20px; margin: 0; line-height: 1.5; }
.hm-flash .fprice { display: flex; align-items: baseline; gap: 10px; }
.hm-flash .fprice b { font-size: 30px; color: var(--v-sale); }
.hm-flash .fprice s { color: #8a98a2; }
.hm-flash .cd { display: flex; gap: 8px; direction: ltr; justify-content: flex-end; }
.hm-flash .cd div { background: #1d2a33; color: #fff; border-radius: 10px; min-width: 58px; text-align: center; padding: 6px 4px; line-height: 1.2; }
.hm-flash .cd b { display: block; font-size: 24px; }
.hm-flash .cd small { font-size: 11px; opacity: .7; }
.hm-flash .fsub { color: var(--v-muted); font-size: 13px; }
.hm-flash .v2btn { margin-top: auto; width: 100%; font-weight: 600; }

/* ═══ العدادات ═══ */
.hm-ctrs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.hm-ctrs .ctr { background: var(--v-card); border-radius: 0 0 16px 16px; padding: 14px 16px; border-top: 3px solid var(--v-brand); display: flex; gap: 12px; align-items: center; }
.hm-ctrs .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--v-brand-soft); color: var(--v-brand); display: grid; place-items: center; flex: none; }
.hm-ctrs b { font-size: 24px; line-height: 1.2; }
.hm-ctrs small { display: flex; align-items: center; gap: 6px; color: var(--v-muted); font-size: 13px; }
.hm-ctrs .k-today { border-top-color: var(--v-sale); }
.hm-ctrs .k-today .ico { background: #fdecec; color: var(--v-sale); }
.hm-ctrs .live { width: 8px; height: 8px; border-radius: 50%; background: var(--v-sale); animation: v3pulse 1.4s infinite; }
@keyframes v3pulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 100% { box-shadow: 0 0 0 10px rgba(229,72,77,0); } }

/* ═══ «وش تحتاج اليوم؟» ═══ */
.hm-cats { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.hm-cats::-webkit-scrollbar { display: none; }
.hm-cats a { flex: none; width: 116px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--v-card); border: 1px solid var(--v-line); border-radius: 16px; padding: 14px 8px 10px; text-align: center; color: var(--v-ink); text-decoration: none; transition: .2s; }
.hm-cats a:hover { border-color: var(--v-brand); transform: translateY(-2px); }
.hm-cats .ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--v-brand-soft); color: var(--v-brand); }
.hm-cats .ico .sic { width: 26px; height: 26px; }
.hm-cats b { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.hm-cats small { color: var(--v-muted); font-size: 12px; }
.hm-cats .custom .ico { background: var(--v-accent-soft); color: var(--v-accent-ink); }

/* ═══ البطاقة ═══ */
body.v3 .pcard { border-radius: 18px; }
body.v3 .pcard .price { color: var(--v-ink); }
body.v3 .pcard .offb { background: var(--v-sale); color: #fff; }
body.v3 .pcard .pwrap s, body.v3 .pcard .was { color: #98a3aa; }
body.v3 .pcard .add { background: var(--v-brand-soft); color: var(--v-brand-ink); font-weight: 600; }
body.v3 .pcard .wa { border: 1.5px solid #bfe7cf; color: #128c4a; background: #fff; }
body.v3 .pcard .price, body.v3 .pcard .offb, body.v3 .pcard .wa, body.v3 .pcard .time, body.v3 .pcard .star, body.v3 .pcard .add, body.v3 .pcard .kind { font-weight: 600; }

/* ═══ محفظة الكوبونات ═══ */
.hm-wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hm-wallet .cpn { display: flex; background: var(--v-card); border-radius: 16px; overflow: hidden; border: 1px solid #ffe2bf; }
.hm-wallet .v { width: 112px; flex: none; background: linear-gradient(160deg, #ff8a00, #ff5e3a); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-left: 2px dashed #fff; padding: 8px; }
.hm-wallet .v b { font-size: 24px; line-height: 1.2; }
.hm-wallet .v span { font-size: 13px; }
.hm-wallet .t { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hm-wallet .t small { color: var(--v-muted); font-size: 12.5px; }
.hm-wallet .code { align-self: flex-start; border: 1.5px dashed var(--v-accent); background: #fff; color: var(--v-accent-ink); border-radius: 8px; padding: 2px 14px; font: 600 14px 'Cairo', sans-serif; letter-spacing: 1px; cursor: pointer; }
.hm-wallet .code:hover { background: var(--v-accent-soft); }
.permit { font-size: 11px !important; opacity: .7; }

/* ═══ هدية السلة ═══ */
.hm-gift { background: linear-gradient(120deg, var(--v-brand-ink), var(--v-brand)); color: #fff; border-radius: 22px; padding: 20px 22px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; }
.hm-gift .ico { width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.14); display: grid; place-items: center; color: #ffb547; }
.hm-gift .ico .sic { width: 34px; height: 34px; }
.hm-gift h3 { font-size: 19px; margin: 0; color: #fff; }
.hm-gift .gbar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; margin: 8px 0 4px; }
.hm-gift .gbar i { display: block; height: 100%; width: 0; background: #ffb547; border-radius: 6px; transition: width .8s; }
.hm-gift small { display: block; opacity: .88; font-size: 13px; }
.cartwrap .hm-gift { margin: 10px 0 16px; }

/* ═══ الجوال والتابلت ═══ */
@media (max-width: 980px) {
  .hm-top.has-flash { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body.v3 .cartbtn { width: 44px; padding: 0; justify-content: center; }
  body.v3 .hm-hero { height: 330px; border-radius: 18px; }
  body.v3 .hm-hero .ht { inset-inline: 18px; bottom: 30px; }
  body.v3 .hm-hero h1 { font-size: 23px; }
  .hm-ctrs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hm-ctrs .ctr { padding: 12px; gap: 10px; }
  .hm-ctrs .ico { width: 38px; height: 38px; }
  .hm-ctrs b { font-size: 20px; }
  .hm-cats a { width: 98px; }
  .hm-gift { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .hm-wallet { grid-template-columns: 1fr; }
  .cbar { font-size: 13px; }
}
@media print { .cbar, .hm-ticker, .hm-flash .cd { display: none; } .hm-flash, .hm-gift, .hm-wallet .cpn, .hm-ctrs .ctr { box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .hm-ctrs .live { animation: none; } .hm-gift .gbar i { transition: none; } }

/* ═══ الحوافز (ش١٧ب): الشنط · صندوق الهدية · الأختام · النقاط · الدعوة · «هداياي» ═══ */
body.v3 .ptsbtn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--v-accent-soft); color: var(--v-accent-ink); font-size: 14px; text-decoration: none; white-space: nowrap; }
body.v3 .ptsbtn .sic { width: 18px; height: 18px; color: var(--v-accent); }
body.v3 .ptsbtn b { font-weight: 600; }
.hm-bags { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bag { background: var(--v-card); border-radius: 20px; overflow: hidden; border: 1px solid var(--v-line); display: flex; flex-direction: column; }
.bag .top { padding: 16px 18px; color: #fff; position: relative; }
.bag .top h3 { font-size: 20px; margin: 0; color: #fff; }
.bag .top small { opacity: .9; }
.bag .save { position: absolute; top: 14px; inset-inline-end: 14px; background: #fff; color: var(--v-sale); border-radius: 999px; font-weight: 600; font-size: 13px; padding: 2px 12px; transform: rotate(-5deg); }
.bag ul { list-style: none; padding: 12px 18px; margin: 0; display: grid; gap: 6px; flex: 1; }
.bag li { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.bag li .sic { color: var(--v-brand); width: 18px; height: 18px; }
.bag .ft { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 2px dashed var(--v-line); gap: 8px; }
.bag .ft b { font-size: 22px; color: var(--v-sale); }
.bag .ft s { color: #98a3aa; font-size: 14px; margin-inline-start: 6px; }
.bag .permit { padding: 0 18px 10px; display: block; }
.rw-box { background: var(--v-card); border-radius: 0 0 20px 20px; padding: 20px 22px; border: 1px solid var(--v-line); border-top: 4px solid var(--v-accent); display: flex; flex-direction: column; gap: 8px; }
.rw-box.tl { border-top-color: var(--v-brand); }
.rw-box h3 { font-size: 19px; margin: 0; }
.rw-box p { color: var(--v-muted); font-size: 14.5px; margin: 0; }
.rw-box .v2btn { align-self: flex-start; }
.stamps { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; max-width: 440px; margin: 6px 0; }
.stamps span { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #d5dde2; display: grid; place-items: center; color: #c3cdd3; }
.stamps span.on { border: 2px solid var(--v-brand); background: var(--v-brand-soft); color: var(--v-brand); animation: v3pop .4s; }
.stamps span.gst { border-color: var(--v-accent); color: var(--v-accent); }
.stamps .sic { width: 22px; height: 22px; }
@keyframes v3pop { 0% { transform: scale(.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.giftbox { text-align: center; align-items: center; justify-content: center; min-height: 280px; position: relative; overflow: hidden; }
.gbox { width: 140px; height: 140px; position: relative; cursor: pointer; border: 0; background: none; padding: 0; animation: v3wob 2.4s infinite; }
@keyframes v3wob { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-6deg); } 90% { transform: rotate(6deg); } 95% { transform: rotate(-3deg); } }
.gbox .bx { position: absolute; bottom: 0; left: 14px; right: 14px; height: 88px; background: var(--v-accent); border-radius: 10px; }
.gbox .lid { position: absolute; bottom: 82px; left: 4px; right: 4px; height: 32px; background: #ffb547; border-radius: 10px; transition: .5s; }
.gbox .rib { position: absolute; bottom: 0; left: 50%; width: 22px; margin-left: -11px; height: 114px; background: var(--v-brand); }
.gbox .bow { position: absolute; bottom: 110px; left: 50%; margin-left: -28px; width: 56px; height: 30px; transition: .5s; }
.gbox .bow::before, .gbox .bow::after { content: ""; position: absolute; width: 28px; height: 28px; border: 6px solid var(--v-brand); border-radius: 50% 50% 0 50%; top: 0; }
.gbox .bow::before { left: 0; transform: rotate(-20deg); }
.gbox .bow::after { right: 0; transform: scaleX(-1) rotate(-20deg); }
.giftbox .reveal { display: none; flex-direction: column; align-items: center; gap: 8px; }
.giftbox.open .gbox, .giftbox.open > .hint { display: none; }
.giftbox.open .reveal { display: flex; animation: v3up .5s; }
@keyframes v3up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.giftbox .big { font-size: 34px; color: var(--v-sale); line-height: 1.25; }
.giftbox .hint { color: var(--v-muted); font-size: 13.5px; }
.code { border: 2px dashed var(--v-brand); background: #fff; color: var(--v-brand-ink); border-radius: 12px; padding: 3px 16px; font: 600 18px 'Cairo', sans-serif; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.v3conf { position: absolute; width: 10px; height: 14px; top: -20px; animation: v3fall 1.6s ease-in forwards; pointer-events: none; }
@keyframes v3fall { to { transform: translateY(360px) rotate(540deg); opacity: 0; } }
.pts-band { background: linear-gradient(120deg, #5b3fd6, #8b6dff); color: #fff; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.pts-band h3 { font-size: 20px; margin: 0; color: #fff; }
.pts-band p, .pts-band small { color: rgba(255,255,255,.9); margin: 0; }
.pts-band .mine { display: flex; align-items: baseline; gap: 8px; }
.pts-band .mine b { font-size: 34px; line-height: 1.1; }
.pts-band .gbar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.2); overflow: hidden; }
.pts-band .gbar i { display: block; height: 100%; background: #ffb547; border-radius: 6px; }
.pts-band .rw { display: flex; gap: 8px; flex-wrap: wrap; }
.pts-band .rw span { background: rgba(255,255,255,.18); border-radius: 12px; padding: 4px 12px; font-size: 13.5px; }
.pts-band .rw span.can { background: #fff; color: #4a2fc0; font-weight: 600; }
.pts-band .v2btn { align-self: flex-start; background: #ffb547; color: #3a2604; box-shadow: none; }
.ref { display: flex; gap: 8px; align-items: center; background: var(--v-surface); border-radius: 14px; padding: 10px 12px; flex-wrap: wrap; }
.ref code { font: 600 18px 'Cairo', sans-serif; letter-spacing: 1px; color: var(--v-brand-ink); flex: 1; min-width: 110px; white-space: nowrap; text-align: right; }
.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 14px; }
.mycps { display: grid; gap: 8px; }
.mycps .cp { display: flex; align-items: center; gap: 10px; border: 1px solid #ffe2bf; border-radius: 14px; padding: 8px 12px; }
.mycps .cp > b { color: var(--v-accent-ink); font-size: 17px; white-space: nowrap; }
.mycps .cp span { flex: 1; font-size: 13.5px; min-width: 0; }
.mycps .cp small { display: block; color: var(--v-muted); font-size: 12px; }
.mycps .code { font-size: 14px; padding: 2px 10px; }
.redeem { display: flex; flex-wrap: wrap; gap: 8px; }
.redeem button[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 700px) {
  body.v3 .ptsbtn span { display: none; }
  .hm-bags, .gifts { grid-template-columns: 1fr; }
  .stamps { gap: 6px; }
  .stamps .sic { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) { .gbox { animation: none; } }

.mycps .cp { background: #fff; }

/* صور حقيقية في البطاقات وصفحة العنصر */
body.v3 .pcard .pc-media { height: 170px; background: var(--v-surface); }
body.v3 .pcard .pc-media img.photo, .it-main img.photo { object-fit: cover; width: 100%; height: 100%; }
@media (max-width: 700px) { body.v3 .pcard .pc-media { height: 130px; } }