/* =====================================================================
   3T AdZone — Component Library
   ===================================================================== */

/* ---- Surfaces / Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card-elevated { background: var(--surface-elevated); box-shadow: var(--shadow-md); }
a.card:hover, .card.interactive:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  transform: translateY(-2px);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: var(--radius-md); border: none;
  font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  background: var(--color-secondary); color: #fff;
  box-shadow: var(--shadow-sm);
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { background: var(--color-accent); box-shadow: var(--shadow-primary); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-primary) 85%, black); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-border); box-shadow: none; }
.btn-outline:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--color-text); box-shadow: none; }
.btn-ghost:hover { background: var(--color-surface); }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); transform: translateY(-1px); }
.btn-success { background: var(--color-success); }
.btn-sm { padding: 6px 12px; font-size: var(--text-xs); }
.btn-block { width: 100%; }
.btn .spinner { width: 14px; height: 14px; }

/* ---- Forms ---- */
.field { margin-top: var(--space-4); }
.field label, label.field-label {
  display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); color: var(--color-text);
}
.input, input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 11px 14px; font-size: var(--text-sm); font-family: inherit;
  background: var(--surface-elevated); color: var(--color-text);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.input.is-error, input.is-error { border-color: var(--color-danger); }
.input.is-success, input.is-success { border-color: var(--color-success); }
.field-hint { font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-1); }
.field-error { font-size: var(--text-xs); color: var(--color-danger); margin-top: var(--space-1); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; background: var(--color-surface); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.badge-info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.badge-accent  { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.badge-neutral { background: var(--color-surface); color: var(--color-muted); border: 1px solid var(--color-border); }

/* ---- Verification / Trust badges ---- */
.trust-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border); }
.trust-badge svg { width: 12px; height: 12px; }

/* ---- Alerts / Flash ---- */
.flash, .alert {
  padding: 13px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-4);
  font-size: var(--text-sm); display: flex; align-items: flex-start; gap: var(--space-2);
  border: 1px solid transparent;
}
.flash-success, .alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.flash-error, .alert-danger { background: var(--color-danger-bg); color: var(--color-danger-text); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); }

/* ---- Score Ring (3T Score UI presentation only) ---- */
.score-ring { position: relative; width: 88px; height: 88px; }
.score-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.score-ring circle { fill: none; stroke-width: 8; }
.score-ring .track { stroke: var(--color-border); }
.score-ring .progress { stroke: var(--color-secondary); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.score-ring .value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-ring .value .num { font-size: 22px; font-weight: 800; color: var(--color-text); line-height: 1; }
.score-ring .value .max { font-size: 10px; color: var(--color-muted); }
.score-ring.level-elite .progress, .score-ring.level-trusted .progress { stroke: var(--color-success); }
.score-ring.level-good .progress { stroke: var(--color-secondary); }
.score-ring.level-needs_attention .progress { stroke: var(--color-warning); }
.score-ring.level-high_risk .progress { stroke: var(--color-danger); }

/* ---- Listing Card ---- */
.listing-card { position: relative; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.listing-card .thumb { position: relative; aspect-ratio: 4/3; background: var(--color-surface); overflow: hidden; }
.listing-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
a.listing-card:hover .thumb img { transform: scale(1.05); }
.listing-card .thumb .placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-muted); background: linear-gradient(135deg, var(--color-surface), var(--color-border)); }
.listing-card .ribbon { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.listing-card .fav-btn { position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: var(--shadow-sm); }
.listing-card .body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; gap: 6px; }
.listing-card .price { font-size: var(--text-lg); font-weight: 800; color: var(--color-secondary); }
.listing-card .title { font-weight: 600; font-size: var(--text-sm); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.listing-card .meta { font-size: var(--text-xs); color: var(--color-muted); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* ---- Category Tile ---- */
.category-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-5) var(--space-3); }
.category-tile .icon-wrap {
  width: 56px; height: 56px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); transition: background-color .2s ease, transform .2s ease;
}
a.category-tile:hover .icon-wrap { background: var(--color-primary); color: #fff; transform: scale(1.06); }
.category-tile .name { font-size: var(--text-sm); font-weight: 700; }
.category-tile .count { font-size: 11px; color: var(--color-muted); }

/* ---- Empty States ---- */
.empty-state { text-align: center; padding: var(--space-12) var(--space-5); color: var(--color-muted); }
.empty-state .icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); color: var(--color-border); }
.empty-state h3 { color: var(--color-text); margin-bottom: var(--space-2); }
.empty-state p { max-width: 380px; margin-inline: auto; }
.empty-state .btn { margin-top: var(--space-4); }

/* ---- Skeleton loaders ---- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-border) 50%, var(--color-surface) 75%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease infinite; border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
.spinner.dark { border-color: var(--color-border); border-top-color: var(--color-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Avatars ---- */
.avatar { border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--color-primary); overflow: hidden; flex-shrink: 0; }
.avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.avatar-md { width: 48px; height: 48px; font-size: 17px; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
table.data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: var(--text-sm); border-radius: var(--radius-md); overflow: hidden; }
table.data-table thead tr { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 80%, #052436)); color: #fff; }
table.data-table th { padding: 12px 14px; text-align: start; font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; }
table.data-table td { padding: 12px 14px; border-top: 1px solid var(--color-border); }
table.data-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; box-shadow: inset 0 0 0 0 transparent; }
table.data-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); box-shadow: inset 3px 0 0 0 var(--color-secondary); }
[dir="rtl"] table.data-table tbody tr:hover { box-shadow: inset -3px 0 0 0 var(--color-secondary); }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; border: 1px solid var(--color-border); background: var(--color-surface); }
.pagination a.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination a:hover:not(.active) { border-color: var(--color-primary); }

/* ---- Breadcrumbs ---- */
.breadcrumbs { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-4); flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .sep { opacity: .5; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 4px; font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); border-bottom: 2px solid transparent; background: none; border-top: none; border-inline: none; cursor: pointer; white-space: nowrap; }
.tabs a.active, .tabs button.active { color: var(--color-primary); border-color: var(--color-secondary); }

/* ---- Modal ---- */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay-bg); display: none; align-items: center; justify-content: center; z-index: 1000; padding: var(--space-4); }
.modal-overlay.open { display: flex; animation: fade-in .18s ease; }
.modal { background: var(--surface-elevated); border-radius: var(--radius-lg); padding: var(--space-6); max-width: 440px; width: 100%; box-shadow: var(--shadow-lg); animation: modal-pop .18s ease; }
.modal h3 { margin-bottom: var(--space-2); }
.modal .modal-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); justify-content: flex-end; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* ---- Toasts ---- */
#toast-container { position: fixed; bottom: var(--space-5); inset-inline-end: var(--space-5); z-index: 2000; display: flex; flex-direction: column; gap: var(--space-2); max-width: 320px; }
.toast { padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--text-sm); color: #fff; animation: toast-in .2s ease; display: flex; align-items: center; gap: var(--space-2); }
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-warning { background: var(--color-warning); color: var(--neutral-900); }
.toast-info { background: var(--color-info); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Progress bar ---- */
.progress-bar { height: 8px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.progress-bar .fill { height: 100%; background: var(--color-secondary); border-radius: var(--radius-full); transition: width .5s ease; }

/* ---- Dropdown ---- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: calc(100% + 6px); inset-inline-end: 0; background: var(--surface-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 180px; padding: var(--space-2); display: none; z-index: 100; }
.dropdown-menu.open { display: block; animation: fade-in .15s ease; }
.dropdown-menu a, .dropdown-menu button { display: block; width: 100%; text-align: start; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--text-sm); background: none; border: none; cursor: pointer; color: var(--color-text); }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--color-surface); }

/* ---- Tooltip ---- */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); inset-inline-start: 50%;
  transform: translateX(-50%); background: var(--neutral-900); color: #fff; font-size: 11px;
  padding: 4px 8px; border-radius: var(--radius-sm); white-space: nowrap; z-index: 50;
}

/* =====================================================================
   Card Micro-Interactions — رفعة + ظل + توهّج حدّ خفيف بلون العلامة عند
   الـHover، فوق تكبير الصورة الموجود بالفعل. Transform/Box-shadow فقط
   (GPU-friendly)، ومحكوم بقاعدة prefers-reduced-motion العامة أصلًا.
   ===================================================================== */
a.listing-card, .card.interactive {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.listing-card:hover, .card.interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--color-secondary) 35%, var(--color-border));
}
.listing-card .fav-btn { transition: transform .15s ease; }
.listing-card .fav-btn:hover { transform: scale(1.12); }

/* ---- Skeleton Loading — Shimmer حقيقي للصور أثناء التحميل (JS يشيل .loading عند onload) ---- */
.thumb.loading {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--neutral-200) 50%, var(--color-surface) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
[data-theme="dark"] .thumb.loading {
  background: linear-gradient(90deg, var(--color-dark-surface) 25%, color-mix(in srgb, var(--color-dark-surface) 60%, #fff) 50%, var(--color-dark-surface) 75%);
  background-size: 200% 100%;
}
.thumb.loading img { opacity: 0; }
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Scroll Reveal — Fade-up بسيط عبر IntersectionObserver، صفر مكتبة خارجية ---- */
.reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Empty State — نسخة مطوَّرة بنفس لغة "شبكة الصفقات" البصرية (Hero) ---- */
.empty-state { text-align: center; padding: var(--space-12) var(--space-5); }
.empty-state .icon-wrap {
  width: 84px; height: 84px; margin: 0 auto var(--space-4); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-secondary) 16%, transparent), transparent 70%),
              var(--color-surface);
  border: 1px solid var(--color-border);
}
.empty-state .icon-wrap svg { width: 34px; height: 34px; color: var(--color-secondary); animation: emptyIconPulse 3s ease-in-out infinite; }
@keyframes emptyIconPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.hero-3t__node { opacity: calc(var(--bg-intensity, 1)); }
.hero-3t__card { opacity: calc(var(--bg-intensity, 1)); }
.hero-3t::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: #000; opacity: var(--bg-overlay-opacity, 0);
}

/* ---- Admin Appearance Controls — تعطيل الحركة الزخرفية أو تبسيط النمط بالكامل ----
   مُحدِّد عام (.bg-static-mode/.bg-minimal-mode على أي عنصر أب) بدل تقييده
   بـbody، عشان نفس القاعدة تشتغل في الموقع الحقيقي (الكلاس على body) وفي
   معاينة admin-appearance.php الحية (الكلاس على عنصر المعاينة) بنفس الكود. */
.bg-static-mode .hero-3t__node,
.bg-static-mode .hero-3t__card,
.bg-static-mode .auth-page-bg::after,
.bg-static-mode .hero-3t__dot {
  animation: none !important;
}
.bg-minimal-mode .hero-3t__grid,
.bg-minimal-mode .hero-3t__node,
.bg-minimal-mode .hero-3t__card,
.bg-minimal-mode .auth-page-bg::before,
.bg-minimal-mode .auth-page-bg::after {
  display: none !important;
}

.empty-state h3 { margin: 0 0 6px; font-size: var(--text-lg); }
.empty-state p { color: var(--color-muted); max-width: 380px; margin: 0 auto var(--space-4); }

/* =====================================================================
   Search — فلاتر نشطة قابلة للإزالة + لوحة فلاتر Premium
   ===================================================================== */
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  color: var(--color-text); font-size: var(--text-xs); font-weight: 600;
  text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.filter-chip span { opacity: .6; transition: opacity .15s ease; }
.filter-chip:hover {
  background: color-mix(in srgb, var(--color-danger, #c0392b) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-danger, #c0392b) 35%, var(--color-border));
  transform: translateY(-1px);
}
.filter-chip:hover span { opacity: 1; }
#filterPanel { position: sticky; top: calc(64px + var(--space-4)); }
#filterPanel .field { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-3); }
#filterPanel .field:last-of-type { border-bottom: none; }
.footer-social a:hover { background: var(--color-secondary) !important; }

/* ---- Site-wide Background Video — ثابت خلف كل محتوى الصفحة، مع تراكب خفيف يحافظ على تباين النص ---- */
.site-bg-video {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; pointer-events: none;
}
.site-bg-video::after { content: ''; }
body.has-bg-video::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
  pointer-events: none;
}
body.bg-static-mode .site-bg-video,
body.bg-minimal-mode .site-bg-video { display: none; }

/* =====================================================================
   Animated Category Icons — حركة مصغَّرة مميّزة لكل قسم عند الـHover،
   فوق التكبير/التلوين الأساسي الموجود بالفعل. Transform/Opacity فقط.
   ===================================================================== */
a.category-tile[data-cat] .icon-wrap svg { transition: transform .35s ease; }
a.category-tile[data-cat="cars"]:hover .icon-wrap svg { animation: catCarDrive .6s ease; }
@keyframes catCarDrive { 0% { transform: translateX(0); } 40% { transform: translateX(3px) rotate(-2deg); } 100% { transform: translateX(0); } }

a.category-tile[data-cat="real-estate"]:hover .icon-wrap svg { animation: catBuildingRise .5s ease; }
@keyframes catBuildingRise { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.05); } 100% { transform: translateY(0) scale(1); } }

a.category-tile[data-cat="electronics"]:hover .icon-wrap, a.category-tile[data-cat="mobiles"]:hover .icon-wrap {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-secondary) 25%, transparent);
}

a.category-tile[data-cat="jobs"]:hover .icon-wrap svg { animation: catBriefcaseSwing .5s ease; transform-origin: top center; }
@keyframes catBriefcaseSwing { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-6deg); } 60% { transform: rotate(5deg); } }

a.category-tile[data-cat="pets"]:hover .icon-wrap svg { animation: catPawBounce .5s ease; }
@keyframes catPawBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

a.category-tile[data-cat="services"]:hover .icon-wrap svg { animation: catToolRotate .6s ease; }
@keyframes catToolRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }

a.category-tile[data-cat="clothing"]:hover .icon-wrap svg { animation: catHangerSwing .5s ease; transform-origin: top center; }
@keyframes catHangerSwing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ---- Glass/Depth Card — طبقة زجاجية خفيفة لبطاقات بارزة (بيانات البائع
   في صفحة الإعلان)، Backdrop-blur + حدود شفافة + ظل طبقي متعدد المستويات.
   Fallback آمن لمتصفح بدون دعم backdrop-filter (يفضل card عادي واضح). ---- */
.card-glass-depth {
  background: color-mix(in srgb, var(--surface-elevated) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 8px 24px -8px rgba(16,42,67,.12), 0 20px 40px -16px rgba(16,42,67,.10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .card-glass-depth { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}

/* =====================================================================
   Auth Page Background — نفس لغة "شبكة الصفقات" البصرية بتاعة الـHero،
   لكن نسخة خافتة جدًا خلف نموذج الدخول/التسجيل (صفر تأثير على القراءة).
   ===================================================================== */
.auth-page-bg {
  position: relative;
  min-height: calc(100vh - 320px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4);
  overflow: hidden;
}
.auth-page-bg::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--color-primary) 6%, transparent) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 80%);
}
.auth-page-bg::after {
  content: ''; position: absolute; top: 18%; inset-inline-end: 12%; z-index: 0; pointer-events: none;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-secondary) 45%, transparent), -120px 160px 0 -2px color-mix(in srgb, var(--color-secondary) 60%, transparent);
  animation: hero3tPulse 3.6s ease-in-out infinite;
}
.auth-page-bg > * { position: relative; z-index: 1; width: 100%; }
@media (max-width: 640px) { .auth-page-bg { min-height: auto; padding: var(--space-5) var(--space-3); } }