/*!
 * مدد — صفحة أعلن معنا فقط (advertise.html — P04، الإصدار 2.2)
 * البانر والأقسام والخطوات ولقطة الواجهة من site.css، وبطاقة الإعلان الأصلية jb-adcard من components.css.
 * هون: البانر بلقطة لوحة المعلن، وبطاقات الجمهور، وعرض البطاقة مع أماكن الظهور، وقائمة إعلانات المعلن، والخطوات.
 */

/* ===== البانر (خاص بهذه الصفحة): عمودان — النص، ولقطة زجاجية من لوحة المعلن =====
   فوق صورة البانر الداكنة: تدرّج أعمق بلون الهوية من جهة اللقطة، ولوحة زجاجية بإعلان منشور وأرقامه الإجمالية (Q-31)
   ورسم أعمدة صغير، ووسم «بلا أي بيانات مرضى» عائم. اللقطة تمثيلية (aria-hidden) مع وصف لقارئ الشاشة */
.ad-hero { min-height: clamp(460px, 26vw + 200px, 600px); }
.ad-hero::after {
  background:
    radial-gradient(45% 70% at 18% 55%, rgba(31, 95, 214, .45), transparent 70%),
    linear-gradient(to left, rgba(15, 31, 61, .92) 0%, rgba(15, 31, 61, .8) 50%, rgba(15, 31, 61, .78) 100%);
}
[dir="ltr"] .ad-hero::after {
  background:
    radial-gradient(45% 70% at 82% 55%, rgba(31, 95, 214, .45), transparent 70%),
    linear-gradient(to right, rgba(15, 31, 61, .92) 0%, rgba(15, 31, 61, .8) 50%, rgba(15, 31, 61, .78) 100%);
}
.ad-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.ad-hero__text { min-width: 0; }
.ad-hero .jb-banner__title { font-size: clamp(2.125rem, 1.4rem + 2.8vw, 3.5rem); }
.ad-hero .jb-banner__actions .btn { min-height: 54px; font-weight: 700; }
.ad-hero .jb-banner__actions .btn-primary { box-shadow: 0 12px 28px -12px rgba(110, 168, 255, .7); }

.ad-hero__visual { position: relative; margin: 0; min-width: 0; }
.ad-hero__panel {
  position: relative; display: grid; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 60px -24px rgba(0, 0, 0, .65);
  color: #FFFFFF;
}
.ad-hero__bar { display: flex; align-items: center; gap: 6px; padding-block-end: var(--sp-3); border-block-end: 1px solid rgba(255, 255, 255, .12); }
.ad-hero__bar > span:not(.jb-sample-tag) { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.ad-hero__bar b { margin-inline-start: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; color: #E8F0FE; }
.ad-hero__bar .jb-sample-tag { margin-inline-start: auto; }
.ad-hero__ad { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-lg); background: rgba(255, 255, 255, .95); color: #0F1F3D; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.ad-hero__ad > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ad-hero__ad b { font-size: var(--fs-sm); line-height: 1.5; }
.ad-hero__ad small { color: #50607A; font-size: var(--fs-xs); }
.ad-hero__thumb { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: linear-gradient(135deg, #DCE8FD, #FEF3C7); color: #1F5FD6; font-size: 1.35rem; }
.ad-hero__live { flex: none; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--r-pill); background: #DCFCE7; color: #166534; font-size: var(--fs-xs); font-weight: 700; }
.ad-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.ad-hero__stats > div { display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-md); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }
.ad-hero__stats .bi { color: #9CC3FF; font-size: 1rem; }
.ad-hero__stats b { font-size: 1.375rem; line-height: 1.2; color: #FFFFFF; }
.ad-hero__stats small { color: #A9B6CC; font-size: var(--fs-xs); }
.ad-hero__chart { display: flex; align-items: flex-end; gap: 6px; height: 64px; padding-inline: 2px; }
.ad-hero__chart span { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #9CC3FF, rgba(110, 168, 255, .25)); }
.ad-hero__chart span:last-child { background: linear-gradient(180deg, #5ED6DE, rgba(94, 214, 222, .3)); }
.ad-hero__badge {
  position: absolute; inset-block-end: -18px; inset-inline-start: -18px;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--r-pill);
  background: #FFFFFF; color: #0F1F3D; font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .55);
}
.ad-hero__badge .bi { color: #1F5FD6; font-size: 1.1rem; }
/* عمودان حتى 1024 (اللقطة أضيق قليلاً)، وتحتها النص وحده — اللقطة تزيينية، وعرضها تحت النص كان يضاعف طول البانر */
@media (max-width: 1280px) {
  .ad-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: var(--sp-6); }
  .ad-hero__panel { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
  .ad-hero__stats b { font-size: 1.125rem; }
}
@media (max-width: 1023px) {
  .ad-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ad-hero__visual { display: none; }
  .ad-hero { min-height: 0; }
}

/* ===== بطاقات الجمهور =====
   كل بطاقة بلون: رأس بصورة حقيقية (من الصور المرخّصة الموجودة) عليها طبقة بلون البطاقة، وأيقونة بمربع أبيض تتداخل مع الجسم،
   ورقم، ثم العنوان والوصف، ووسم «الاستهداف» بالأسفل. الأطباء تيل، الاستقبال نيلي، المنتدى ذهبي */
.ad-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.ad-aud {
  --c: 31, 95, 214; --c-solid: #1F5FD6; --c-text: var(--jb-primary);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--jb-border); background: var(--jb-surface);
  box-shadow: 0 1px 2px rgba(15, 31, 61, .04), 0 12px 30px -18px rgba(15, 31, 61, .18);
  transition: transform var(--mo-base) var(--mo-ease), box-shadow var(--mo-base) var(--mo-ease), border-color var(--mo-base) var(--mo-ease);
}
.ad-aud:hover { transform: translateY(-4px); border-color: rgba(var(--c), .35); box-shadow: 0 1px 2px rgba(15, 31, 61, .04), 0 24px 44px -20px rgba(var(--c), .45); }
@media (prefers-reduced-motion: reduce) { .ad-aud, .ad-aud:hover { transition: none; transform: none; } }
.ad-aud--rec { --c: 46, 196, 206; --c-solid: #2EC4CE; --c-text: #0A6B73; }
.ad-aud--forum { --c: 63, 63, 70; --c-solid: #334866; --c-text: var(--jb-text); }
[data-bs-theme="dark"] .ad-aud--rec { --c-text: #5ED6DE; }
.ad-aud__top { position: relative; isolation: isolate; height: 168px; flex: none; background: rgb(var(--c)); }
.ad-aud__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center 30%); transition: transform .6s var(--mo-ease); }
/* طبقة بلون البطاقة: أقوى بالأعلى (لوضوح الرقم) وبالأسفل (لتندمج مع الأيقونة)، وشفافة بالوسط لتظهر الصورة */
.ad-aud__top::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--c), .55) 0%, rgba(var(--c), .12) 38%, rgba(var(--c), .18) 62%, rgba(var(--c), .78) 100%),
    linear-gradient(0deg, rgba(var(--c), .12), rgba(var(--c), .12));
}
.ad-aud:hover .ad-aud__photo { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .ad-aud__photo, .ad-aud:hover .ad-aud__photo { transition: none; transform: none; } }
.ad-aud--doc { --pos: 55% 35%; }
.ad-aud--rec { --pos: 70% 60%; }
.ad-aud--forum { --pos: 40% 30%; }
.ad-aud__icon {
  position: absolute; inset-block-end: -28px; inset-inline-start: var(--sp-5);
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px;
  background: var(--jb-surface); color: var(--c-solid); font-size: 1.6rem;
  box-shadow: 0 0 0 4px var(--jb-surface), 0 10px 22px -8px rgba(var(--c), .55);
}
.ad-aud__num { position: absolute; inset-block-start: var(--sp-3); inset-inline-start: var(--sp-5); padding: .1rem .55rem; border-radius: var(--r-pill); background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #FFFFFF; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; }
.ad-aud__body { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; padding: calc(var(--sp-6) + 6px) var(--sp-5) var(--sp-5); }
.ad-aud__title { margin: 0; font-size: 1.1875rem; }
.ad-aud__text { margin: 0; color: var(--jb-text-muted); line-height: 1.8; }
.ad-aud__tag {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  margin: auto 0 0; padding: .35rem .75rem; border-radius: var(--r-pill);
  background: rgba(var(--c), .1); color: var(--c-text); font-size: var(--fs-xs); font-weight: 700;
}
.ad-aud__text { margin-block-end: var(--sp-3); }
/* بالداكن: لون الأيقونة الفاتح من كل لون (التيل الغامق والنيلي يضيعان على السطح الداكن) */
[data-bs-theme="dark"] .ad-aud__icon { color: var(--c-text); }
@media (max-width: 1024px) { .ad-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ad-aud:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .ad-cards { grid-template-columns: 1fr; } .ad-aud:last-child { grid-column: auto; } }

/* ===== شكل الإعلان وأماكن الظهور =====
   تبويبات عمودية (الأماكن الثلاثة) + «شاشة» تمثيلية تُظهر البطاقة الحقيقية بموقعها في كل مكان:
   الاستقبال/الطبيب ← أسفل القائمة، المنتدى ← بين منشورين. التبديل بـ pages/advertise.js (data-place) */
.ad-showcase { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; }
@media (max-width: 1024px) { .ad-showcase { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } }

/* التبويبات */
.ad-tabs { display: grid; gap: var(--sp-3); min-width: 0; }
.ad-tab {
  position: relative; display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  padding: var(--sp-4); border-radius: var(--r-lg); border: 1px solid var(--jb-border);
  background: var(--jb-surface); color: var(--jb-text); text-align: start; font: inherit; cursor: pointer;
  transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease), background-color var(--mo-fast) var(--mo-ease);
}
.ad-tab:hover { border-color: rgba(var(--jb-primary-rgb), .4); }
.ad-tab:focus-visible { outline: 3px solid var(--jb-primary); outline-offset: 2px; }
.ad-tab[aria-selected="true"] { border-color: var(--jb-primary); background: var(--jb-primary-subtle); box-shadow: 0 10px 24px -14px rgba(var(--jb-primary-rgb), .55); }
.ad-tab[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; width: 4px; border-radius: 0 4px 4px 0; background: var(--jb-primary); }
[dir="rtl"] .ad-tab[aria-selected="true"]::before { border-radius: 4px 0 0 4px; }
.ad-tab__icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--jb-primary-subtle); color: var(--jb-primary); font-size: 1.25rem; transition: background-color var(--mo-fast) var(--mo-ease), color var(--mo-fast) var(--mo-ease); }
.ad-tab[aria-selected="true"] .ad-tab__icon { background: var(--jb-primary); color: var(--jb-on-primary); }
.ad-tab__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ad-tab__text b { font-size: 1.0625rem; }
.ad-tab__text small { color: var(--jb-text-muted); font-size: var(--fs-sm); }
.ad-tab__go { flex: none; color: var(--jb-text-muted); opacity: 0; transition: opacity var(--mo-fast) var(--mo-ease); }
.ad-tab[aria-selected="true"] .ad-tab__go, .ad-tab:hover .ad-tab__go { opacity: 1; color: var(--jb-primary); }
@media (prefers-reduced-motion: reduce) { .ad-tab, .ad-tab__go, .ad-tab__icon { transition: none; } }
@media (max-width: 1024px) {
  .ad-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-tab { flex-direction: column; align-items: flex-start; }
  .ad-tab__go { display: none; }
  .ad-tab[aria-selected="true"]::before { inset-block: auto -1px; inset-inline: 14px; width: auto; height: 4px; border-radius: 4px 4px 0 0; }
  [dir="rtl"] .ad-tab[aria-selected="true"]::before { border-radius: 4px 4px 0 0; }
}
@media (max-width: 640px) {
  .ad-tabs { grid-template-columns: 1fr; }
  .ad-tab { flex-direction: row; align-items: center; padding: var(--sp-3); }
  .ad-tab__icon { width: 40px; height: 40px; }
}

/* الشاشة */
.ad-stage {
  margin: 0; min-width: 0; overflow: hidden;
  border-radius: var(--r-xl); border: 1px solid var(--jb-border); background: var(--jb-surface);
  box-shadow: 0 2px 6px rgba(15, 31, 61, .05), 0 30px 60px -28px rgba(15, 31, 61, .35);
}
.ad-stage__bar { display: flex; align-items: center; gap: 6px; padding: .7rem var(--sp-4); border-block-end: 1px solid var(--jb-border); background: var(--jb-surface-2); }
.ad-stage__bar > span { width: 10px; height: 10px; border-radius: 50%; background: var(--jb-border-input); opacity: .5; }
.ad-stage__title { display: none; margin-inline-start: var(--sp-2); font-size: var(--fs-sm); color: var(--jb-text-muted); }
.ad-stage[data-place="rec"] .ad-stage__title[data-for="rec"],
.ad-stage[data-place="doc"] .ad-stage__title[data-for="doc"],
.ad-stage[data-place="forum"] .ad-stage__title[data-for="forum"] { display: inline; }
.ad-stage__screen { display: grid; grid-template-columns: 58px minmax(0, 1fr); min-height: 440px; background: var(--jb-canvas, var(--jb-bg)); }
.ad-stage__main { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4); min-width: 0; }
/* الشريط الجانبي بأيقونات اللوحة — أيقونة المكان الحالي مضاءة */
.ad-stage__side { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) 0; background: linear-gradient(180deg, #16305A, #0F1F3D); }
.ad-stage__side > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: rgba(255, 255, 255, .62); font-size: 1.05rem; }
.ad-stage__logo { display: grid; place-items: center; width: 38px; height: 38px; margin-block-end: var(--sp-2); border-radius: 11px; background: linear-gradient(135deg, #6EA8FF, #1F5FD6); color: #FFFFFF; font-size: 1.1rem; }
.ad-stage[data-place="rec"] .ad-stage__side > [data-on="rec"],
.ad-stage[data-place="doc"] .ad-stage__side > [data-on="doc"],
.ad-stage[data-place="forum"] .ad-stage__side > [data-on="forum"] { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }

/* محتوى واقعي مصغّر للشاشات الثلاث */
.ad-ui { border-radius: var(--r-md); border: 1px solid var(--jb-border); background: var(--jb-surface); font-size: var(--fs-sm); }
.ad-ui__head { display: flex; align-items: center; gap: var(--sp-2); padding: .65rem var(--sp-3); border-block-end: 1px solid var(--jb-border); }
.ad-ui__head > b { font-size: .9375rem; }
.ad-ui__count { padding: 0 .45rem; border-radius: var(--r-pill); background: var(--jb-surface-2); color: var(--jb-text-muted); font-size: var(--fs-xs); font-weight: 700; }
.ad-ui__btn { display: inline-flex; align-items: center; gap: .3rem; margin-inline-start: auto; padding: .3rem .7rem; border-radius: var(--r-sm); background: var(--jb-primary); color: var(--jb-on-primary); font-size: var(--fs-xs); font-weight: 700; }
.ad-ui__tabs { display: inline-flex; gap: 2px; margin-inline-start: auto; padding: 2px; border-radius: var(--r-sm); background: var(--jb-surface-2); font-size: var(--fs-xs); }
.ad-ui__tabs > span { padding: .15rem .55rem; border-radius: 4px; color: var(--jb-text-muted); }
.ad-ui__tabs > .is-on { background: var(--jb-surface); color: var(--jb-text); font-weight: 700; box-shadow: var(--sh-xs); }
.ad-ui__list { margin: 0; padding: 0; list-style: none; }
.ad-ui__list > li { display: flex; align-items: center; gap: var(--sp-3); padding: .6rem var(--sp-3); }
.ad-ui__list > li + li { border-block-start: 1px solid var(--jb-border); }
.ad-ui__list > li > .jb-num { flex: none; min-width: 2.75rem; font-weight: 700; }
.ad-ui__list > li.is-now { background: rgba(var(--jb-primary-rgb), .06); }
.ad-ui__who { display: grid; flex: 1; min-width: 0; line-height: 1.45; }
.ad-ui__who > b { font-size: var(--fs-sm); }
.ad-ui__who > small { overflow: hidden; color: var(--jb-text-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ad-ui__av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--jb-primary-subtle); color: var(--jb-primary); font-weight: 700; }
.ad-ui__st { flex: none; padding: .15rem .55rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 700; }
.ad-ui__st--arrived { background: var(--jb-st-arrived-bg); color: var(--jb-st-arrived); }
.ad-ui__st--doctor { background: var(--jb-st-with-doctor-bg); color: var(--jb-st-with-doctor); }
.ad-ui__st--confirmed { background: var(--jb-st-confirmed-bg); color: var(--jb-st-confirmed); }
/* منشور المنتدى بصورة الطبيب */
.ad-ui--post { display: grid; gap: .35rem; padding: var(--sp-3); }
.ad-ui__author { display: flex; align-items: center; gap: var(--sp-2); }
.ad-ui__author img { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--jb-surface), 0 0 0 3px rgba(var(--jb-primary-rgb), .25); }
.ad-ui__ptitle { margin: 0; font-weight: 700; line-height: 1.5; }
.ad-ui__ptext { margin: 0; overflow: hidden; color: var(--jb-text-muted); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ad-ui__react { display: flex; gap: var(--sp-3); color: var(--jb-text-muted); font-size: var(--fs-xs); }
.ad-ui__react > span { display: inline-flex; align-items: center; gap: .3rem; }
/* المكان الحالي: الاستقبال ← مواعيد، الطبيب ← مرضى، المنتدى ← منشور، الإعلان، منشور */
.ad-stage:not([data-place="rec"]) .ad-ui--rec,
.ad-stage:not([data-place="doc"]) .ad-ui--doc,
.ad-stage:not([data-place="forum"]) .ad-ui--post { display: none; }
/* خانة الإعلان مُبرزة */
.ad-stage__slot { position: relative; margin-block-start: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-lg); border: 2px dashed rgba(var(--jb-accent-rgb), .75); background: rgba(var(--jb-accent-rgb), .06); }
.ad-stage__here {
  position: absolute; inset-block-start: -13px; inset-inline-start: var(--sp-4); z-index: 2;
  display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .6rem .1rem .45rem; border-radius: var(--r-pill);
  background: var(--jb-accent); color: var(--jb-on-accent); font-size: var(--fs-xs); font-weight: 700;
}
.ad-stage__slot .jb-adcard { box-shadow: var(--sh-md); }
.ad-stage__slot .jb-adcard__actions .btn { pointer-events: none; }
/* داخل الشاشة: صورة أضيق، والأزرار الثلاثة بسطر واحد أسفل البطاقة */
.ad-stage__slot .jb-adcard__body { align-content: start; }
.ad-stage__slot .jb-adcard__actions { flex-wrap: nowrap; margin-block-start: var(--sp-2); }
.ad-stage__slot .jb-adcard__actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: .5rem; }
@container (min-width: 560px) { .ad-stage__slot .jb-adcard__wrap { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } }
/* الاستقبال والطبيب: البطاقة عائمة بالزاوية السفلية بجهة النهاية فوق المحتوى (كما في اللوحة — ad-card.js mount) */
@media (min-width: 641px) {
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__main { position: relative; justify-content: flex-start; }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot { position: absolute; inset-block-end: var(--sp-4); inset-inline-end: var(--sp-4); z-index: 1; width: min(290px, 58%); margin: 0; padding: var(--sp-2); background: rgba(var(--jb-accent-rgb), .08); }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard { box-shadow: var(--sh-lg); }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard__media { aspect-ratio: auto; height: 92px; }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard__art { width: 3rem; height: 3rem; font-size: 1.4rem; }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard__body { gap: var(--sp-1); padding: var(--sp-3); }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard__title { font-size: .9375rem; }
  .ad-stage:is([data-place="rec"], [data-place="doc"]) .ad-stage__slot .jb-adcard__text { display: none; }
}
@media (max-width: 640px) {
  .ad-stage__screen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ad-stage__side { display: none; }
  .ad-stage__slot .jb-adcard__actions { flex-wrap: wrap; }
  .ad-stage__main { padding: var(--sp-3); }
}

/* ===== لقطة «إعلاناتي» بحساب المعلن ===== */
.ad-list { display: grid; gap: var(--sp-2); }
.ad-list__row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--jb-border); background: var(--jb-surface); }
.ad-list__row > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ad-list__row b { font-size: var(--fs-sm); line-height: 1.5; }
.ad-list__row small { color: var(--jb-text-muted); font-size: var(--fs-xs); }
.ad-list__new { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-block-start: var(--sp-4); pointer-events: none; }
@media (max-width: 480px) {
  .ad-list__row { flex-wrap: wrap; }
  .ad-list__row .jb-badge { margin-inline-start: calc(44px + var(--sp-3)); }
}

.ad-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .ad-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ad-steps { grid-template-columns: 1fr; } }