/**
 * Vanzy Web Premium 2026 — white SaaS UI overlay
 * Loaded on app surfaces only (NOT Home). Home must stay untouched.
 * Icon system: Lucide-style via web-icons.js (.vz-ico)
 */

/* ── Scope: never alter homepage ── */
body.page-home {
  /* intentional no-op guard */
}

:root {
  --web-paper: #ffffff;
  --web-canvas: #f6f8fb;
  --web-ink: #0f172a;
  --web-ink-soft: #334155;
  --web-muted: #64748b;
  --web-line: #e8edf5;
  --web-line-strong: #d7deea;
  --web-accent: #1a56db;
  --web-accent-deep: #1240a8;
  --web-accent-soft: rgba(26, 86, 219, 0.08);
  --web-ok: #16a34a;
  --web-warn: #f59e0b;
  --web-danger: #dc2626;
  --web-radius: 16px;
  --web-radius-sm: 12px;
  --web-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  --web-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.08);
  --web-motion: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --web-motion-slow: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Shared icon ── */
.vz-ico {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  color: currentColor;
}

/* ── Motion utilities (discrete) ── */
@keyframes web-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes web-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body:not(.page-home) .web-reveal,
body.page-dashboard .vp-surface,
body.page-dashboard .dash-card,
body.page-public-profile .pp-ig-card,
body.page-public-profile .pp-section--card,
body.page-listings .listing-card,
body.page-publish .pub-card,
body.page-dashboard .ops-hub {
  animation: web-fade-up var(--web-motion-slow) both;
}

body:not(.page-home) .web-reveal:nth-child(2),
body.page-dashboard .vp-stack > .vp-surface:nth-child(2) { animation-delay: 40ms; }
body:not(.page-home) .web-reveal:nth-child(3),
body.page-dashboard .vp-stack > .vp-surface:nth-child(3) { animation-delay: 80ms; }
body:not(.page-home) .web-reveal:nth-child(4),
body.page-dashboard .vp-stack > .vp-surface:nth-child(4) { animation-delay: 120ms; }
body:not(.page-home) .web-reveal:nth-child(5),
body.page-dashboard .vp-stack > .vp-surface:nth-child(5) { animation-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  body:not(.page-home) .web-reveal,
  body.page-dashboard .vp-surface,
  body.page-dashboard .dash-card,
  body.page-public-profile .pp-ig-card,
  body.page-listings .listing-card,
  body.page-publish .pub-card,
  body.page-dashboard .ops-hub {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════
   DASHBOARD / OWN PROFILE
   ═══════════════════════════════════════════ */
body.page-dashboard {
  background: var(--web-canvas) !important;
  color: var(--web-ink);
}

body.page-dashboard .dash-shell,
body.page-dashboard .dash-main,
body.page-dashboard .ig-profile,
body.page-dashboard .vp-profile {
  background: transparent;
}

body.page-dashboard .vp-surface,
body.page-dashboard .dash-card,
body.page-dashboard .ig-sheet__panel {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  transition: box-shadow var(--web-motion), transform var(--web-motion), border-color var(--web-motion);
}

body.page-dashboard .vp-surface:hover,
body.page-dashboard .dash-card:hover {
  box-shadow: var(--web-shadow-hover);
  border-color: var(--web-line-strong);
}

body.page-dashboard .vp-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--web-muted);
  margin: 0 0 14px;
}

body.page-dashboard .vp-hero {
  padding: 28px 24px;
  text-align: center;
}

body.page-dashboard .vp-hero__name {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--web-ink);
  margin: 12px 0 6px;
}

body.page-dashboard .vp-bio,
body.page-dashboard .vp-member,
body.page-dashboard .vp-hint {
  color: var(--web-muted);
  line-height: 1.5;
}

body.page-dashboard .vp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--web-accent-soft);
  color: var(--web-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(26, 86, 219, 0.12);
}

body.page-dashboard .vp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

body.page-dashboard .vp-hero__actions .btn,
body.page-dashboard .vp-action {
  transition: transform var(--web-motion), box-shadow var(--web-motion), background var(--web-motion);
}

body.page-dashboard .vp-hero__actions .btn:hover,
body.page-dashboard .vp-action:hover {
  transform: translateY(-1px);
  box-shadow: var(--web-shadow);
}

body.page-dashboard .vp-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--web-radius-sm);
  border: 1px solid var(--web-line);
  background: var(--web-paper);
  color: var(--web-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

body.page-dashboard .vp-action small,
body.page-dashboard .vp-action .vz-ico {
  color: var(--web-accent);
}

body.page-dashboard .vp-action .vz-ico {
  width: 18px;
  height: 18px;
}

body.page-dashboard .vp-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

body.page-dashboard .vp-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.page-dashboard .vp-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--web-radius-sm);
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--web-motion), transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .vp-stat:hover {
  border-color: rgba(26, 86, 219, 0.28);
  transform: translateY(-1px);
  box-shadow: var(--web-shadow);
}

body.page-dashboard .vp-stat strong {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--web-ink);
}

body.page-dashboard .vp-stat span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--web-muted);
}

body.page-dashboard .vp-trust-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin: 0 0 8px;
  border-radius: var(--web-radius-sm);
  border: 1px solid var(--web-line);
  background: var(--web-canvas);
  color: var(--web-ink-soft);
  font: inherit;
  font-weight: 600;
  text-align: left;
}

body.page-dashboard .vp-trust-row.is-ok {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
  color: #15803d;
}

body.page-dashboard .vp-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--web-line);
  overflow: hidden;
  margin: 8px 0 12px;
}

body.page-dashboard .vp-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--web-accent), #4da3ff);
}

body.page-dashboard .vp-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-dashboard .vp-activity li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--web-line);
  color: var(--web-ink-soft);
  font-size: 0.92rem;
}

body.page-dashboard .vp-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--web-accent);
  flex-shrink: 0;
}

body.page-dashboard .ig-activity__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

body.page-dashboard .ig-activity__stat {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius-sm);
  padding: 14px 12px;
  text-align: center;
  box-shadow: var(--web-shadow);
}

body.page-dashboard .ig-activity__stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.page-dashboard .ig-activity__stat span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--web-muted);
}

@media (max-width: 640px) {
  body.page-dashboard .ig-activity__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Settings sheet */
body.page-dashboard .ig-sheet__panel {
  padding: 8px 0 20px;
}

body.page-dashboard .ig-settings-row,
body.page-dashboard [data-settings-act] {
  transition: background var(--web-motion);
}

body.page-dashboard .ig-settings-row:hover,
body.page-dashboard [data-settings-act]:hover {
  background: var(--web-accent-soft);
}

/* Dash stats / KPI */
body.page-dashboard .dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

body.page-dashboard .dash-stats > div,
body.page-dashboard .dash-stat,
body.page-dashboard .ops-stats > div {
  position: relative;
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  padding: 16px;
  box-shadow: var(--web-shadow);
  overflow: hidden;
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .dash-stats > div:hover,
body.page-dashboard .ops-stats > div:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
}

body.page-dashboard .dash-stats > div strong,
body.page-dashboard .ops-stats > div strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--web-ink);
}

body.page-dashboard .dash-stats > div span,
body.page-dashboard .ops-stats > div span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--web-muted);
}

/* Mini sparkline bars for stats presentation */
body.page-dashboard .web-kpi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.page-dashboard .web-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  width: fit-content;
}

body.page-dashboard .web-kpi__trend.is-up {
  color: #15803d;
  background: rgba(22, 163, 74, 0.1);
}

body.page-dashboard .web-kpi__trend.is-down {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

body.page-dashboard .web-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 4px;
}

body.page-dashboard .web-spark > i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgba(26, 86, 219, 0.55), rgba(26, 86, 219, 0.18));
  min-height: 4px;
}

/* ═══════════════════════════════════════════
   COMPANY HUB — SaaS
   ═══════════════════════════════════════════ */
body.page-dashboard .ops-hub {
  background: transparent;
}

body.page-dashboard .ops-hub__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 18px 20px;
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
}

body.page-dashboard .ops-hub__head h2,
body.page-dashboard .ops-hub__head h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body.page-dashboard .ops-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 16px;
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: 999px;
  box-shadow: var(--web-shadow);
}

body.page-dashboard .ops-subnav__btn {
  border: 0;
  background: transparent;
  color: var(--web-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--web-motion), color var(--web-motion);
}

body.page-dashboard .ops-subnav__btn:hover {
  background: var(--web-canvas);
  color: var(--web-ink);
}

body.page-dashboard .ops-subnav__btn.is-active {
  background: var(--web-accent);
  color: #fff;
}

body.page-dashboard .ops-trip,
body.page-dashboard .ops-form,
body.page-dashboard .ops-details {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  padding: 16px;
  margin-bottom: 12px;
}

body.page-dashboard .ops-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--web-ink-soft);
}

body.page-dashboard .ops-field input,
body.page-dashboard .ops-field select,
body.page-dashboard .ops-field textarea,
body.page-publish .pub-field input,
body.page-publish .pub-field select,
body.page-publish .pub-field textarea {
  font: inherit;
  font-weight: 500;
  padding: 11px 12px;
  border: 1px solid var(--web-line-strong);
  border-radius: 10px;
  background: #fff;
  color: var(--web-ink);
  transition: border-color var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .ops-field input:focus,
body.page-dashboard .ops-field select:focus,
body.page-dashboard .ops-field textarea:focus,
body.page-publish .pub-field input:focus,
body.page-publish .pub-field select:focus,
body.page-publish .pub-field textarea:focus {
  outline: none;
  border-color: var(--web-accent);
  box-shadow: 0 0 0 3px var(--web-accent-soft);
}

body.page-dashboard .ops-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--web-line);
  overflow: hidden;
}

body.page-dashboard .ops-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--web-accent), #4da3ff);
}

body.page-dashboard .ops-seat {
  border-radius: 10px;
  border: 1px solid var(--web-line);
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .ops-seat:hover {
  transform: translateY(-1px);
  box-shadow: var(--web-shadow);
}

/* ═══════════════════════════════════════════
   PUBLIC PROFILE
   ═══════════════════════════════════════════ */
body.page-public-profile {
  background: var(--web-canvas) !important;
}

body.page-public-profile #public-profile-root {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

body.page-public-profile .pp-wrap--ig .pp-ig-card,
body.page-public-profile .pp-section--card,
body.page-public-profile .pp-banner-card,
body.page-public-profile .pp-review,
body.page-public-profile .pp-ad-tile {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  transition: box-shadow var(--web-motion), transform var(--web-motion), border-color var(--web-motion);
}

body.page-public-profile .pp-ad-tile:hover,
body.page-public-profile .pp-review:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
  border-color: var(--web-line-strong);
}

body.page-public-profile .pp-section--card {
  padding: 20px;
  margin-bottom: 16px;
}

body.page-public-profile .pp-section--card h2 {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--web-ink);
}

body.page-public-profile .pp-ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

body.page-public-profile .pp-ad-tile {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

body.page-public-profile .pp-ad-tile__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--web-canvas);
}

body.page-public-profile .pp-ad-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.page-public-profile .pp-ad-tile__status {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.page-public-profile .pp-ad-tile__body {
  padding: 12px 14px 14px;
}

body.page-public-profile .pp-ad-tile__body strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  margin-bottom: 4px;
}

body.page-public-profile .pp-trust-grid,
body.page-public-profile .pp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

body.page-public-profile .pp-stat-card {
  padding: 14px;
  border-radius: var(--web-radius-sm);
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
}

body.page-public-profile .pp-stat-card strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.page-public-profile .pp-stat-card span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--web-muted);
}

body.page-public-profile .pp-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--web-accent-soft);
  color: var(--web-accent-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

body.page-public-profile .pp-type-badge .vz-ico {
  width: 14px;
  height: 14px;
}

/* ═══════════════════════════════════════════
   LISTINGS (Anunțuri) — not Home
   ═══════════════════════════════════════════ */
body.page-listings {
  background: var(--web-canvas) !important;
}

body.page-listings .listing-card,
body.page-listings .listing-card-h {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  overflow: hidden;
  transition: transform var(--web-motion), box-shadow var(--web-motion), border-color var(--web-motion);
}

body.page-listings .listing-card:hover,
body.page-listings .listing-card-h:hover {
  transform: translateY(-3px);
  box-shadow: var(--web-shadow-hover);
  border-color: var(--web-line-strong);
}

body.page-listings .listing-card__media,
body.page-listings .listing-card-h__media {
  position: relative;
  overflow: hidden;
}

body.page-listings .listing-card__media img,
body.page-listings .listing-card-h__media img {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-listings .listing-card:hover .listing-card__media img,
body.page-listings .listing-card-h:hover .listing-card-h__media img {
  transform: scale(1.03);
}

body.page-listings .listing-badge,
body.page-listings .listing-card-h__type,
body.page-listings [class*="listing-badge"] {
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

body.page-listings .mp-sidebar__panel,
body.page-listings .mp-filters {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
}

body.page-listings .chip {
  transition: background var(--web-motion), color var(--web-motion), transform var(--web-motion);
}

body.page-listings .chip:hover {
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   PUBLISH
   ═══════════════════════════════════════════ */
body.page-publish {
  background: var(--web-canvas) !important;
}

body.page-publish .pub-screen {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 72px;
}

body.page-publish .pub-card,
body.page-publish .pub-choice,
body.page-publish .auth-card {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  transition: transform var(--web-motion), box-shadow var(--web-motion), border-color var(--web-motion);
}

body.page-publish .pub-choice:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
  border-color: rgba(26, 86, 219, 0.28);
}

body.page-publish .pub-choice {
  cursor: pointer;
  padding: 18px;
}

body.page-publish .pub-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--web-ink-soft);
}

body.page-publish .pub-field.is-invalid input,
body.page-publish .pub-field.is-invalid select,
body.page-publish .pub-field.is-invalid textarea {
  border-color: var(--web-danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

body.page-publish .pub-field.is-valid input,
body.page-publish .pub-field.is-valid select,
body.page-publish .pub-field.is-valid textarea {
  border-color: var(--web-ok);
}

body.page-publish .btn {
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-publish .btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--web-shadow);
}

body.page-public-profile .pp-premium-stack {
  display: grid;
  gap: 14px;
  margin: 16px 0 20px;
}

body.page-public-profile .pp-verify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

body.page-public-profile .pp-verify-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
  color: var(--web-ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
}

body.page-public-profile .pp-verify-list li.is-on {
  background: rgba(22, 163, 74, 0.06);
  border-color: rgba(22, 163, 74, 0.2);
  color: #15803d;
}

body.page-public-profile .pp-section--card h2 .vz-ico {
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--web-accent);
}

body.page-join-company {
  background: var(--web-canvas) !important;
}

/* Favorites / messages panels share dash language */
body.page-dashboard #dash-panel-favorites .listing-card,
body.page-dashboard #dash-panel-ads .listing-card,
body.page-dashboard #dash-panel-messages .dash-card {
  border-radius: var(--web-radius);
  border: 1px solid var(--web-line);
  box-shadow: var(--web-shadow);
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard #dash-panel-favorites .listing-card:hover,
body.page-dashboard #dash-panel-ads .listing-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
}


body.page-dashboard .ig-settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.page-dashboard .ig-settings-item .vz-ico {
  color: var(--web-accent);
  width: 18px;
  height: 18px;
}

/* Listing status badges — Anunțurile mele / Rezervări */
.dash-status-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  vertical-align: middle;
}
.dash-status-badge--active,
.dash-status-badge--accepted,
.dash-status-badge--completed {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
}
.dash-status-badge--expiring_soon,
.dash-status-badge--pending {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.dash-status-badge--expired,
.dash-status-badge--rejected {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}
.dash-status-badge--draft,
.dash-status-badge--inactive,
.dash-status-badge--cancelled {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}
.dash-ad-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.dash-ad-warn {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 600;
}
.dash-ad-row[data-status="expired"] .dash-ad-warn {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}

/* ═══════════════════════════════════════════
   PREMIUM 2026 — Profile / Publish / Hub polish
   Presentation only. Home untouched.
   ═══════════════════════════════════════════ */

/* Profile hero */
body.page-dashboard .vp-hero--premium {
  position: relative;
  padding: 32px 24px 28px;
  overflow: hidden;
}

body.page-dashboard .vp-hero--premium::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 88px;
  background: linear-gradient(135deg, rgba(26, 86, 219, 0.08), rgba(13, 115, 119, 0.06));
  pointer-events: none;
}

body.page-dashboard .vp-avatar-ring {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 14px;
  border-radius: 50%;
  padding: 3px;
  box-sizing: border-box;
  background: linear-gradient(145deg, #1a56db, #4da3ff 45%, #0d7377);
  box-shadow: 0 8px 28px rgba(26, 86, 219, 0.22);
  z-index: 1;
  flex-shrink: 0;
}

body.page-dashboard .vp-avatar-ring .ig-avatar,
body.page-dashboard .vp-avatar-ring .ig-avatar--lg {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #fff;
  overflow: hidden;
  background: #e2e8f0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--web-ink);
  box-shadow: none;
}

body.page-dashboard .vp-avatar-ring .ig-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.page-dashboard .vp-avatar-ring .ig-avatar-edit {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--web-line);
  box-shadow: var(--web-shadow);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--web-accent);
  z-index: 2;
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .vp-avatar-ring .ig-avatar-edit:hover {
  transform: scale(1.06);
  box-shadow: var(--web-shadow-hover);
}

@media (max-width: 560px) {
  body.page-dashboard .vp-avatar-ring {
    width: 112px;
    height: 112px;
  }
  body.page-dashboard .vp-avatar-ring .ig-avatar,
  body.page-dashboard .vp-avatar-ring .ig-avatar--lg {
    width: 100% !important;
    height: 100% !important;
    font-size: 2rem;
  }
}

body.page-dashboard .vp-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
  color: var(--web-ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

body.page-dashboard .vp-type-pill .vz-ico {
  color: var(--web-accent);
  width: 14px;
  height: 14px;
}

body.page-dashboard .vp-hero__name {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  margin: 4px 0 8px;
}

body.page-dashboard .vp-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  justify-content: center;
  align-items: center;
  color: var(--web-muted);
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 14px;
}

body.page-dashboard .vp-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body.page-dashboard .vp-meta-row .vz-ico {
  width: 14px;
  height: 14px;
  color: var(--web-accent);
}

body.page-dashboard .vp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 4px 0 16px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

body.page-dashboard .vp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--web-motion), box-shadow var(--web-motion);
  animation: web-fade-up var(--web-motion-slow) both;
}

body.page-dashboard .vp-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--web-shadow);
}

body.page-dashboard .vp-badge .vz-ico {
  width: 14px;
  height: 14px;
}

body.page-dashboard .vp-badge--ok {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.18);
}

body.page-dashboard .vp-badge--accent {
  background: var(--web-accent-soft);
  color: var(--web-accent-deep);
  border-color: rgba(26, 86, 219, 0.14);
}

body.page-dashboard .vp-badge--warn {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.2);
}

body.page-dashboard .vp-badge--soft {
  background: var(--web-canvas);
  color: var(--web-ink-soft);
  border-color: var(--web-line);
}

body.page-dashboard .vp-hero__actions .btn {
  border-radius: 12px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 18px;
}

body.page-dashboard .vp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  body.page-dashboard .vp-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-dashboard .vp-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: var(--web-radius-sm);
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--web-motion), box-shadow var(--web-motion), border-color var(--web-motion);
}

body.page-dashboard .vp-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow);
  border-color: var(--web-line-strong);
  background: #fff;
}

body.page-dashboard .vp-kpi__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.page-dashboard .vp-kpi__ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
}

body.page-dashboard .vp-kpi strong {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--web-ink);
  line-height: 1.1;
}

body.page-dashboard .vp-kpi span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--web-muted);
}

body.page-dashboard .vp-kpi .web-spark {
  height: 22px;
  margin-top: 2px;
}

/* Publish type cards + wizard */
body.page-publish .pub-type-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  body.page-publish .pub-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-publish .pub-type-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 20px;
  text-decoration: none;
  color: inherit;
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  box-shadow: var(--web-shadow);
  transition: transform var(--web-motion), box-shadow var(--web-motion), border-color var(--web-motion);
  animation: web-fade-up var(--web-motion-slow) both;
}

body.page-publish .pub-type-card:nth-child(2) { animation-delay: 60ms; }
body.page-publish .pub-type-card:nth-child(3) { animation-delay: 120ms; }

body.page-publish .pub-type-card:hover,
body.page-publish .pub-type-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--web-shadow-hover);
  border-color: rgba(26, 86, 219, 0.35);
  outline: none;
}

body.page-publish .pub-type-card.is-selected,
body.page-publish .pub-type-card[aria-current="true"] {
  border-color: var(--web-accent);
  box-shadow: 0 0 0 3px var(--web-accent-soft), var(--web-shadow);
}

body.page-publish .pub-type-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
  margin-bottom: 4px;
}

body.page-publish .pub-type-card__icon .vz-ico {
  width: 24px;
  height: 24px;
}

body.page-publish .pub-type-card strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--web-ink);
}

body.page-publish .pub-type-card__hint {
  font-size: 0.86rem;
  color: var(--web-muted);
  font-weight: 600;
}

body.page-publish .pub-header h1 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--web-ink);
}

body.page-publish .pub-wizard-steps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 10px;
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: 999px;
  box-shadow: var(--web-shadow);
}

body.page-publish .pub-wizard-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--web-muted);
  font-size: 0.8rem;
  font-weight: 700;
  transition: background var(--web-motion), color var(--web-motion);
}

body.page-publish .pub-wizard-step__n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--web-canvas);
  border: 1px solid var(--web-line);
  font-size: 0.75rem;
}

body.page-publish .pub-wizard-step.is-active {
  background: var(--web-accent-soft);
  color: var(--web-accent-deep);
}

body.page-publish .pub-wizard-step.is-active .pub-wizard-step__n {
  background: var(--web-accent);
  border-color: var(--web-accent);
  color: #fff;
}

body.page-publish .pub-wizard-step.is-done {
  color: #15803d;
}

body.page-publish .pub-wizard-step.is-done .pub-wizard-step__n {
  background: rgba(22, 163, 74, 0.12);
  border-color: rgba(22, 163, 74, 0.25);
  color: #15803d;
}

body.page-publish .pub-form-step {
  animation: web-fade-up var(--web-motion-slow) both;
}

body.page-publish .pub-form fieldset {
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius);
  background: var(--web-paper);
  box-shadow: var(--web-shadow);
  padding: 18px 16px;
  margin: 0 0 16px;
}

body.page-publish .pub-form legend {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--web-muted);
  padding: 0 6px;
}

body.page-publish .pub-wizard-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 8px;
}

body.page-publish .pub-form input,
body.page-publish .pub-form select,
body.page-publish .pub-form textarea {
  border-radius: 12px !important;
  border: 1px solid var(--web-line-strong);
  padding: 12px 14px;
  transition: border-color var(--web-motion), box-shadow var(--web-motion);
}

body.page-publish .pub-form input:focus,
body.page-publish .pub-form select:focus,
body.page-publish .pub-form textarea:focus {
  outline: none;
  border-color: var(--web-accent);
  box-shadow: 0 0 0 3px var(--web-accent-soft);
}

/* Hub SaaS action center */
body.page-dashboard .ops-action-center {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

body.page-dashboard .ops-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: var(--web-radius-sm);
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  box-shadow: var(--web-shadow);
  color: var(--web-ink);
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform var(--web-motion), box-shadow var(--web-motion), border-color var(--web-motion);
  text-align: left;
}

body.page-dashboard .ops-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
  border-color: var(--web-line-strong);
}

body.page-dashboard .ops-action__ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--web-accent-soft);
  color: var(--web-accent);
}

body.page-dashboard .ops-action small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--web-muted);
}

body.page-dashboard .ops-hub__head .prod-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--web-accent);
  margin: 0 0 4px;
}

body.page-dashboard .ops-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

body.page-dashboard .ops-stats .dash-stat,
body.page-dashboard .ops-stats .web-kpi {
  background: var(--web-paper);
  border: 1px solid var(--web-line);
  border-radius: var(--web-radius-sm);
  box-shadow: var(--web-shadow);
  padding: 14px;
  transition: transform var(--web-motion), box-shadow var(--web-motion);
}

body.page-dashboard .ops-stats .dash-stat:hover,
body.page-dashboard .ops-stats .web-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--web-shadow-hover);
}

body.page-dashboard .ops-stats .dash-stat strong,
body.page-dashboard .ops-stats .web-kpi strong {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--web-ink);
}

body.page-dashboard .vp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  border: 1px solid transparent;
  transition: transform var(--web-motion), box-shadow var(--web-motion);
  animation: web-fade-up var(--web-motion-slow) both;
}

body.page-dashboard .vp-badge-row {
  overflow-x: visible;
  max-width: 100%;
}

body.page-dashboard .ops-action__ico {
  position: relative;
}

body.page-dashboard .ops-action__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid #fff;
}

body.page-dashboard .vp-profile,
body.page-dashboard .ops-hub,
body.page-publish .pub-screen {
  overflow-x: clip;
  max-width: 100%;
}

@media (max-width: 640px) {
  body.page-dashboard .vp-badge-row {
    justify-content: center;
    gap: 6px;
  }
  body.page-dashboard .vp-badge {
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 6px 10px;
  }
  body.page-dashboard .vp-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-dashboard .ops-action-center {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.page-publish .pub-type-grid {
    grid-template-columns: 1fr;
  }
  body.page-publish .pub-wizard-step span:not(.pub-wizard-step__n) {
    display: inline;
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* —— Public firm profile parity (fleet / gallery / contact / badges) —— */
body.page-public-profile .pp-biz-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

body.page-public-profile .pp-biz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid transparent;
}

body.page-public-profile .pp-biz-badge--verified {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.35);
}

body.page-public-profile .pp-biz-badge--top {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

body.page-public-profile .pp-biz-badge--premium {
  color: #6d28d9;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.35);
}

body.page-public-profile .pp-fleet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  body.page-public-profile .pp-fleet-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.page-public-profile .pp-fleet-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--web-line, #e2e8f0);
  background: var(--web-canvas, #f8fafc);
}

body.page-public-profile .pp-fleet-card__media {
  flex: 0 0 88px;
  width: 88px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(13, 115, 119, 0.08);
  display: grid;
  place-items: center;
}

body.page-public-profile .pp-fleet-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-public-profile .pp-fleet-card__icon {
  color: var(--web-accent, #0d7377);
}

body.page-public-profile .pp-fleet-card__body {
  min-width: 0;
  flex: 1;
}

body.page-public-profile .pp-fleet-card__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--web-ink, #0f172a);
}

body.page-public-profile .pp-fleet-card__brand {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: var(--web-ink-soft, #64748b);
}

body.page-public-profile .pp-fleet-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

body.page-public-profile .pp-fleet-chip {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  background: #fff;
  border: 1px solid var(--web-line, #e2e8f0);
  color: var(--web-ink-soft, #475569);
}

body.page-public-profile .pp-gallery--premium {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px) {
  body.page-public-profile .pp-gallery--premium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-public-profile .pp-gallery__item {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--web-line, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}

body.page-public-profile .pp-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.2s ease;
}

body.page-public-profile .pp-gallery__item:hover img {
  transform: scale(1.03);
}

body.page-public-profile .pp-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body.page-public-profile .pp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

body.page-public-profile .pp-chip--link {
  text-decoration: none;
  color: inherit;
}

body.page-public-profile .pp-chip--link:hover {
  border-color: var(--web-accent, #0d7377);
  color: var(--web-accent, #0d7377);
}

.pp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
}

.pp-lightbox[hidden] {
  display: none !important;
}

.pp-lightbox__img {
  max-width: min(960px, 100%);
  max-height: min(90vh, 100%);
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.pp-lightbox__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

body.pp-lightbox-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  body.page-public-profile .pp-contact-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* Directory parity with listings premium surface */
body.page-directory,
body.page-business,
body.page-carriers,
body.page-passengers {
  background: var(--web-canvas, #fff) !important;
}
body.page-directory .dir-card,
body.page-business .dir-card,
body.page-carriers .dir-card,
body.page-passengers .dir-card {
  background: var(--web-paper, #fff);
  border: 1px solid var(--web-line, #e6eaf1);
  border-radius: var(--web-radius, 16px);
  box-shadow: var(--web-shadow, 0 8px 22px rgba(10,31,68,.05));
}
body.page-directory .mp-sidebar__panel,
body.page-business .mp-sidebar__panel,
body.page-carriers .mp-sidebar__panel,
body.page-passengers .mp-sidebar__panel {
  background: var(--web-paper, #fff);
  border: 1px solid var(--web-line, #e6eaf1);
  border-radius: var(--web-radius, 16px);
  box-shadow: var(--web-shadow, 0 8px 22px rgba(10,31,68,.05));
}