@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* Dublaa design system v3
   Shared foundation for staged customer-funnel mockups.
   Brand colors remain black, red, and white. */

:root {
  /* Brand */
  --d-black: #0d0d10;
  --d-ink: #1a1a1f;
  --d-red: #c2253a;
  --d-red-soft: #fde9ec;
  --d-red-deep: #94182a;

  /* Neutral accent replacing the old yellow family */
  --d-accent-slate: #1e1e26;
  --d-surface-slate: #f4f4f7;
  --d-accent-slate-deep: #0d0d10;

  /* Surfaces */
  --d-bg: #ffffff;
  --d-bg-elev: #ffffff;
  --d-bg-tint: #f6f6f8;
  --d-bg-warm: #f8f8fa;
  --d-bg-soft: #fff5f6;
  --d-bg-rose: #fde9ec;
  --d-line: #ececf1;
  --d-line-strong: #d8d8de;
  --d-divider: #f0f0f4;

  /* Text */
  --d-text: #15151a;
  --d-text-muted: #5e5e6a;
  --d-text-subtle: #9a9aa6;
  --d-text-on-dark: #ffffff;
  --d-text-on-accent-slate: #ffffff;
  --d-text-on-surface-slate: #15151a;

  /* Status */
  --d-success: #1a8f4c;
  --d-success-soft: #e6f5ec;
  --d-warning: #c77700;
  --d-warning-soft: #fff4dc;
  --d-error: #c2253a;
  --d-error-soft: #fde9ec;
  --d-info: #2962ff;
  --d-info-soft: #eaf2ff;

  /* Interaction */
  --d-focus-ring: rgba(194, 37, 58, 0.35);
  --d-focus-ring-soft: rgba(194, 37, 58, 0.12);

  /* Spacing */
  --d-sp-1: 4px;
  --d-sp-2: 8px;
  --d-sp-3: 12px;
  --d-sp-4: 16px;
  --d-sp-5: 20px;
  --d-sp-6: 24px;
  --d-sp-8: 32px;
  --d-sp-10: 40px;
  --d-sp-14: 56px;
  --d-sp-18: 72px;

  /* Radius */
  --d-r-sm: 8px;
  --d-r-md: 14px;
  --d-r-lg: 20px;
  --d-r-xl: 28px;
  --d-r-pill: 999px;
  --d-btn-radius: var(--d-r-md);

  /* Shadows */
  --d-shadow-xs: 0 1px 2px rgba(15, 15, 25, 0.04);
  --d-shadow-sm: 0 2px 4px rgba(15, 15, 25, 0.05), 0 4px 8px rgba(15, 15, 25, 0.03);
  --d-shadow-md: 0 4px 8px rgba(15, 15, 25, 0.05), 0 10px 24px rgba(15, 15, 25, 0.06);
  --d-shadow-lg: 0 8px 16px rgba(15, 15, 25, 0.07), 0 24px 48px rgba(15, 15, 25, 0.08);
  --d-shadow-accent-slate: 0 6px 16px rgba(30, 30, 38, 0.22), 0 2px 4px rgba(13, 13, 16, 0.14);
  --d-shadow-red: 0 6px 16px rgba(194, 37, 58, 0.25), 0 2px 4px rgba(148, 24, 42, 0.15);
  --d-shadow-dark: 0 8px 24px rgba(13, 13, 16, 0.35);

  /* Type */
  --d-font-display: "Bricolage Grotesque", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --d-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --d-font-ar: "Cairo", "Tajawal", system-ui, sans-serif;
  --d-fs-h1: 40px;
  --d-fs-h1-mobile: 28px;
  --d-fs-h2: 28px;
  --d-fs-h2-mobile: 22px;
  --d-fs-h3: 18px;
  --d-fs-body: 15px;
  --d-fs-body-mobile: 14px;
  --d-fs-small: 13px;
  --d-fs-meta-min: 12px;

  /* Gradients */
  --d-grad-dark: linear-gradient(135deg, #15151a 0%, #2a2a32 100%);
  --d-grad-accent-slate: linear-gradient(135deg, #2a2a32 0%, #15151a 100%);
  --d-grad-warm: linear-gradient(160deg, #faf8f3 0%, #ffffff 100%);
  --d-grad-cool: linear-gradient(180deg, #ffffff 0%, #f4f4f7 100%);
  --d-grad-red: linear-gradient(135deg, #c2253a 0%, #94182a 100%);
}

[lang="ar"], [dir="rtl"] {
  font-family: var(--d-font-ar);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }
body {
  font-family: var(--d-font-body);
  color: var(--d-text);
  background: var(--d-bg);
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
}

/* ===== Page viewer (mockup display chrome) ===== */
.page-wrap {
  padding: 40px 24px 64px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(194, 37, 58, 0.10), transparent 60%),
    radial-gradient(1000px 600px at 110% 110%, rgba(194, 37, 58, 0.07), transparent 60%),
    #fff5f6;
  min-height: 100vh;
}
.page-header {
  max-width: 1480px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.page-header .crumb {
  font-size: 12px;
  color: var(--d-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.page-header h1 {
  font-family: var(--d-font-display);
  font-size: 36px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.page-header p {
  color: var(--d-text-muted);
  margin: 0;
  font-size: 15px;
  max-width: 720px;
}

.variant-strip {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: flex-start;
  max-width: 1480px;
  margin: 0 auto;
}
.variant {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-xl);
  padding: 24px;
  box-shadow: var(--d-shadow-md);
}
.variant h3 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--d-text-muted);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--d-divider);
}
.variant.desktop { width: 760px; }
.variant.mobile { width: 380px; }

/* ===== Frame ===== */
.d-frame {
  background: var(--d-bg-elev);
  border-radius: var(--d-r-lg);
  overflow: hidden;
  border: 1px solid var(--d-line);
}

/* ===== Top nav ===== */
.d-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  background: var(--d-bg-elev);
  border-bottom: 1px solid var(--d-divider);
}
.d-logo-img { height: 40px; width: auto; display: block; }
.mobile .d-logo-img { height: 30px; }
.d-footer .d-logo-img, .d-foot-grid .brand img { height: 28px; }

.d-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 14px;
  color: var(--d-text);
}
.d-nav-links a, .d-nav-links .link {
  color: var(--d-text-muted);
  text-decoration: none;
  font-weight: 500;
  cursor: default;
  transition: color 0.15s;
}
.d-nav-links a:hover, .d-nav-links .link:hover { color: var(--d-text); }

.d-lang {
  font-size: 12px;
  color: var(--d-text-muted);
  padding: 6px 12px;
  background: var(--d-bg-tint);
  border-radius: var(--d-r-pill);
  font-weight: 600;
}
.d-signin {
  font-size: 13px;
  padding: 9px 20px;
  background: var(--d-text);
  color: var(--d-text-on-dark);
  border-radius: var(--d-r-pill);
  font-weight: 600;
  cursor: default;
}
.d-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--d-grad-accent-slate);
  color: var(--d-text-on-accent-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--d-font-display);
  font-size: 14px;
}

/* ===== Body container ===== */
.d-body { padding: 36px 40px 36px; }
.mobile .d-body { padding: 20px 18px 22px; }

/* ===== Progress (segmented + numbered) ===== */
.d-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}
.d-progress .step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--d-bg-tint);
  border-radius: var(--d-r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--d-text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.d-progress .step .dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--d-bg-elev);
  border: 1.5px solid var(--d-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--d-fs-meta-min);
  font-weight: 800;
  color: var(--d-text-muted);
  flex: 0 0 auto;
}
.d-progress .step.done {
  background: var(--d-success-soft);
  color: var(--d-success);
}
.d-progress .step.done .dot {
  background: var(--d-success);
  border-color: var(--d-success);
  color: #fff;
}
.d-progress .step.active {
  background: var(--d-text);
  color: var(--d-text-on-dark);
}
.d-progress .step.active .dot {
  background: var(--d-accent-slate);
  border-color: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
}
.mobile .d-progress { gap: 4px; }
.mobile .d-progress .step { font-size: var(--d-fs-meta-min); padding: 7px 8px; gap: 6px; }
.mobile .d-progress .step .dot { width: 18px; height: 18px; font-size: var(--d-fs-meta-min); }

/* ===== Hero / Headings ===== */
.d-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-red);
  background: var(--d-red-soft);
  padding: 6px 14px;
  border-radius: var(--d-r-pill);
  margin-bottom: 14px;
}
.d-h1 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 38px;
  letter-spacing: -0.025em;
  color: var(--d-text);
  margin: 0 0 12px;
  line-height: 1.1;
}
.d-h1.center { text-align: center; }
.d-h2 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--d-text);
}
.d-sub {
  font-size: 16px;
  color: var(--d-text-muted);
  margin: 0 0 28px;
  line-height: 1.55;
}
.d-sub.center { text-align: center; }
.mobile .d-h1 { font-size: 26px; }
.mobile .d-h2 { font-size: 18px; }
.mobile .d-sub { font-size: 14px; margin-bottom: 20px; }

/* ===== Cards (the modern container primitive) ===== */
.d-card {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 28px;
  box-shadow: var(--d-shadow-sm);
}
.d-card.subtle {
  background: var(--d-bg-tint);
  border-color: transparent;
  box-shadow: none;
}
.d-card.dark {
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  border: 0;
  box-shadow: var(--d-shadow-dark);
}
.mobile .d-card { padding: 18px; }

/* ===== Labels & inputs ===== */
.d-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--d-text);
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.d-label .hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--d-text-subtle);
}
.d-label + .d-input,
.d-label + .d-phone,
.d-label + .d-textarea { margin-bottom: 14px; }

.d-input {
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  background: var(--d-bg-elev);
  color: var(--d-text);
  display: flex;
  align-items: center;
  gap: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.d-input:focus, .d-input.focused {
  border-color: var(--d-text);
  box-shadow: 0 0 0 4px rgba(15, 15, 25, 0.05);
}
.d-input.placeholder { color: var(--d-text-subtle); }
.d-input .leading {
  color: var(--d-text-subtle);
  font-size: 18px;
  flex: 0 0 auto;
}
.d-input .leading.search::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border: 1.8px solid var(--d-text-subtle);
  border-radius: 50%;
  position: relative;
}
.d-input .leading.search {
  position: relative;
  width: 16px;
  height: 16px;
}
.d-input .leading.search::after {
  content: "";
  position: absolute;
  width: 2px; height: 7px;
  background: var(--d-text-subtle);
  bottom: -3px; right: -1px;
  transform: rotate(-45deg);
  border-radius: 1px;
}
[dir="rtl"] .d-input .leading.search::after { right: auto; left: -1px; transform: rotate(45deg); }

.d-textarea {
  width: 100%;
  padding: 16px 18px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  background: var(--d-bg-elev);
  color: var(--d-text);
  min-height: 110px;
  resize: vertical;
  outline: none;
}
.d-textarea:focus { border-color: var(--d-text); box-shadow: 0 0 0 4px rgba(15, 15, 25, 0.05); }

/* Phone input with country */
.d-phone {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  background: var(--d-bg-elev);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.d-phone:focus-within, .d-phone.focused {
  border-color: var(--d-text);
  box-shadow: 0 0 0 4px rgba(15, 15, 25, 0.05);
}
.d-phone .cc {
  padding: 16px 16px;
  background: var(--d-bg-tint);
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid var(--d-line);
  color: var(--d-text);
}
[dir="rtl"] .d-phone .cc { border-right: 0; border-left: 1px solid var(--d-line); }
.d-phone .cc .flag {
  width: 22px; height: 16px;
  background: linear-gradient(to right, #00732f 33%, #fff 33% 66%, #000 66%);
  border-radius: 2px;
  position: relative;
}
.d-phone .cc .flag::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: #c8102e;
}
.d-phone .num {
  flex: 1;
  padding: 16px 18px;
  font-size: 15px;
  color: var(--d-text);
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
}
.d-phone .num.placeholder { color: var(--d-text-subtle); }

/* ===== Buttons ===== */
.d-btn {
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 28px;
  border-radius: var(--d-r-pill);
  border: 0;
  background: var(--d-grad-accent-slate);
  color: var(--d-text-on-accent-slate);
  cursor: default;
  box-shadow: var(--d-shadow-accent-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.d-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(30, 30, 38, 0.26), 0 4px 8px rgba(13, 13, 16, 0.16);
}
.d-btn.dark {
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  box-shadow: var(--d-shadow-dark);
}
.d-btn.disabled, .d-btn:disabled {
  background: var(--d-bg-tint);
  color: var(--d-text-subtle);
  box-shadow: none;
}
.d-btn.secondary {
  background: var(--d-bg-elev);
  color: var(--d-text);
  border: 1.5px solid var(--d-line-strong);
  box-shadow: var(--d-shadow-xs);
}
.d-btn.ghost {
  background: transparent;
  color: var(--d-text-muted);
  box-shadow: none;
}
.d-btn.ghost:hover { color: var(--d-text); transform: none; box-shadow: none; }
.d-btn.full { width: 100%; }
.mobile .d-btn { padding: 14px 22px; font-size: 14px; }

/* CTA row */
.d-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.mobile .d-cta-row { flex-direction: column-reverse; align-items: stretch; }
.mobile .d-cta-row .d-btn { width: 100%; }

/* ===== Footer ===== */
.d-footer {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--d-divider);
  font-size: 12px;
  color: var(--d-text-subtle);
  text-align: center;
}

/* ===== OTP boxes ===== */
.d-otp-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 24px 0 12px;
  direction: ltr;
}
.d-otp-box {
  width: 52px; height: 60px;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 24px;
  background: var(--d-bg-elev);
  color: var(--d-text);
  box-shadow: var(--d-shadow-xs);
}
.d-otp-box.filled {
  border-color: var(--d-text);
  background: var(--d-text);
  color: var(--d-text-on-dark);
}
.d-otp-box.active {
  border-color: var(--d-accent-slate);
  border-width: 2px;
  box-shadow: 0 0 0 4px rgba(194, 37, 58, 0.12);
}
.mobile .d-otp-box { width: 42px; height: 52px; font-size: 20px; }

.d-resend {
  text-align: center;
  font-size: 13px;
  color: var(--d-text-muted);
  margin: 12px 0 4px;
}
.d-resend .link { color: var(--d-text); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--d-accent-slate); padding-bottom: 1px; }
.d-resend .disabled { color: var(--d-text-subtle); }
.d-resend .sep { color: var(--d-text-subtle); margin: 0 8px; }

/* ===== Trust strip (used on register screen) ===== */
.d-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--d-divider);
  font-size: 12px;
  color: var(--d-text-muted);
}
.d-trust .item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.d-trust .item .ic { font-size: 14px; color: var(--d-success); }

/* ===== Banner (announcement) ===== */
.d-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--d-surface-slate);
  border: 1px solid var(--d-line-strong);
  color: var(--d-text);
  border-radius: var(--d-r-md);
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.5;
}
.d-banner .ic {
  width: 28px; height: 28px;
  background: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
  border-radius: 50%;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-family: var(--d-font-display);
  font-size: 14px;
}
.d-banner.info {
  background: #eaf2ff;
  border-color: #cfdfff;
  color: #1a3a8a;
}
.d-banner.info .ic { background: var(--d-info); color: #fff; }

/* ===== Two-column for desktop register hero ===== */
.d-two-col {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: stretch;
}
.mobile .d-two-col { display: block; }

.d-side {
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  border-radius: var(--d-r-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.d-side::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(30, 30, 38, 0.22), transparent);
  filter: blur(20px);
}
.d-side::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -20%;
  width: 280px; height: 280px;
  background: radial-gradient(closest-side, rgba(194, 37, 58, 0.30), transparent);
  filter: blur(20px);
}
.d-side .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--d-r-pill);
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f9f9fc;
  position: relative;
  z-index: 1;
}
.d-side h2 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 22px 0 14px;
  position: relative;
  z-index: 1;
}
.d-side p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 28px;
  position: relative;
  z-index: 1;
}
.d-side .why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.d-side .why-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  color: #ebebf2;
  line-height: 1.5;
}
.d-side .why-list .num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--d-font-display);
  font-size: 13px;
  flex: 0 0 auto;
}
.d-side .why-list .body strong { display: block; color: #fff; font-weight: 700; margin-bottom: 2px; font-size: 14px; }

/* ===== Switch tab (sign-in / register) ===== */
.d-tabs {
  display: flex;
  gap: 4px;
  background: var(--d-bg-tint);
  padding: 4px;
  border-radius: var(--d-r-pill);
  margin: 0 0 24px;
}
.d-tab {
  flex: 1;
  padding: 10px 18px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--d-text-muted);
  border-radius: var(--d-r-pill);
  cursor: default;
}
.d-tab.active {
  background: var(--d-bg-elev);
  color: var(--d-text);
  box-shadow: var(--d-shadow-xs);
}

/* ===== Notes / Design rationale panel ===== */
.d-notes {
  max-width: 1480px;
  margin: 40px auto 0;
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-xl);
  padding: 28px 32px;
  font-size: 14px;
  box-shadow: var(--d-shadow-sm);
}
.d-notes h2 { font-family: var(--d-font-display); font-size: 20px; margin: 0 0 10px; font-weight: 800; }
.d-notes ul { margin: 12px 0 0; padding-left: 22px; }
[dir="rtl"] .d-notes ul { padding-left: 0; padding-right: 22px; }
.d-notes li { margin-bottom: 8px; color: var(--d-text); line-height: 1.6; }
.d-notes .swatch-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 6px; }
.d-notes .swatch { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--d-text-muted); }
.d-notes .swatch .chip { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--d-line); box-shadow: var(--d-shadow-xs); }

/* RTL niceties */
[dir="rtl"] body, [dir="rtl"] .d-frame { text-align: right; }
[dir="rtl"] .d-h1 { letter-spacing: 0; }
[dir="rtl"] .d-progress { direction: rtl; }

/* =========================================================
   Site-wide components (Home / Marketplace / About / etc.)
   ========================================================= */

/* Hero section */
.d-hero {
  position: relative;
  padding: 56px 40px 64px;
  background:
    radial-gradient(900px 480px at 20% 0%, rgba(194, 37, 58, 0.10), transparent 60%),
    radial-gradient(800px 480px at 100% 100%, rgba(194, 37, 58, 0.08), transparent 60%),
    var(--d-bg-elev);
  overflow: hidden;
}
.mobile .d-hero { padding: 28px 18px 32px; }
.d-hero .eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--d-red);
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
}
.d-hero h1 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--d-text);
  max-width: 700px;
}
.mobile .d-hero h1 { font-size: 30px; }
.d-hero .lead {
  font-size: 18px;
  color: var(--d-text-muted);
  margin: 0 0 28px;
  max-width: 560px;
  line-height: 1.55;
}
.mobile .d-hero .lead { font-size: 14px; margin-bottom: 18px; }
.d-hero h1 .accent {
  color: var(--d-red);
  position: relative;
}
.d-hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 8px;
  background: var(--d-accent-slate);
  z-index: -1;
  border-radius: 2px;
}

/* Hero search bar (vehicle -> part -> CTA) */
.d-hero-search {
  display: flex;
  align-items: stretch;
  background: var(--d-bg-elev);
  border-radius: var(--d-r-pill);
  padding: 6px;
  box-shadow: var(--d-shadow-md);
  border: 1px solid var(--d-line);
  max-width: 720px;
  gap: 0;
}
.d-hero-search .seg {
  flex: 1;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--d-divider);
}
[dir="rtl"] .d-hero-search .seg { border-right: 0; border-left: 1px solid var(--d-divider); }
.d-hero-search .seg:last-of-type { border-right: 0; border-left: 0; }
.d-hero-search .seg .lbl { font-size: var(--d-fs-meta-min); font-weight: 700; color: var(--d-text-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.d-hero-search .seg .val { font-size: 14px; font-weight: 600; color: var(--d-text); }
.d-hero-search .seg .val.placeholder { color: var(--d-text-subtle); font-weight: 500; }
.d-hero-search .go {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  box-shadow: var(--d-shadow-dark);
}
.mobile .d-hero-search { flex-direction: column; padding: 14px; border-radius: var(--d-r-lg); }
.mobile .d-hero-search .seg { border-right: 0; border-bottom: 1px solid var(--d-divider); padding: 10px 6px; }
.mobile .d-hero-search .seg:last-of-type { border-bottom: 0; }
.mobile .d-hero-search .go { width: 100%; height: 44px; border-radius: var(--d-r-pill); margin-top: 10px; font-size: 14px; font-weight: 700; }

/* Stats strip */
.d-stats-strip {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--d-divider);
}
.d-stat .num {
  font-family: var(--d-font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--d-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.d-stat .lbl {
  font-size: 13px;
  color: var(--d-text-muted);
  margin-top: 4px;
}
.mobile .d-stats-strip { gap: 18px; }
.mobile .d-stat .num { font-size: 22px; }
.mobile .d-stat .lbl { font-size: var(--d-fs-meta-min); }

/* Sections */
.d-section {
  padding: 56px 40px;
}
.mobile .d-section { padding: 32px 18px; }
.d-section.tint { background: var(--d-bg-tint); }
.d-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}
.d-section-head h2 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--d-text);
}
.d-section-head p { color: var(--d-text-muted); margin: 0; font-size: 15px; max-width: 540px; }
.d-section-head .more {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-text);
  border-bottom: 1.5px solid var(--d-accent-slate);
  padding-bottom: 1px;
}
.mobile .d-section-head h2 { font-size: 22px; }
.mobile .d-section-head { margin-bottom: 20px; }

/* Category tiles (large, with line icons) */
.d-cat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mobile .d-cat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.d-cat-tile {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 22px 18px;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.d-cat-tile:hover { transform: translateY(-2px); box-shadow: var(--d-shadow-md); border-color: transparent; }
.d-cat-tile .ic-wrap {
  width: 44px; height: 44px;
  background: var(--d-bg-tint);
  border-radius: var(--d-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 22px;
  color: var(--d-text);
}
.d-cat-tile .name { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--d-text); }
.d-cat-tile .count { font-size: 12px; color: var(--d-text-muted); }
.mobile .d-cat-tile { padding: 14px; }
.mobile .d-cat-tile .ic-wrap { width: 36px; height: 36px; margin-bottom: 10px; font-size: 18px; }
.mobile .d-cat-tile .name { font-size: 13px; }

/* Supplier card */
.d-sup-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mobile .d-sup-row { grid-template-columns: 1fr; }
.d-sup-card {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--d-shadow-xs);
}
.d-sup-card .head { display: flex; gap: 14px; align-items: center; }
.d-sup-card .logo {
  width: 48px; height: 48px;
  border-radius: var(--d-r-md);
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 18px;
  flex: 0 0 auto;
}
.d-sup-card .logo.y { background: var(--d-grad-accent-slate); color: var(--d-text-on-accent-slate); }
.d-sup-card .logo.r { background: var(--d-grad-red); color: #fff; }
.d-sup-card .name { font-family: var(--d-font-display); font-weight: 800; font-size: 17px; margin: 0; line-height: 1.2; }
.d-sup-card .sub { font-size: 12px; color: var(--d-text-muted); margin-top: 2px; }
.d-sup-card .verify {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--d-success-soft);
  color: var(--d-success);
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--d-r-pill);
  margin-top: 4px;
}
.d-sup-card .metrics { display: flex; gap: 14px; font-size: 12px; color: var(--d-text-muted); flex-wrap: wrap; }
.d-sup-card .metrics .m { display: flex; flex-direction: column; }
.d-sup-card .metrics .m .v { font-weight: 800; color: var(--d-text); font-size: 14px; font-family: var(--d-font-display); }
.d-sup-card .tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.d-sup-card .tag {
  font-size: var(--d-fs-meta-min);
  background: var(--d-bg-tint);
  color: var(--d-text-muted);
  padding: 4px 10px;
  border-radius: var(--d-r-pill);
  font-weight: 600;
}
.d-sup-card .row-foot { display: flex; gap: 8px; }
.d-sup-card .row-foot .d-btn { flex: 1; padding: 10px 14px; font-size: 13px; }

/* Testimonial */
.d-quote {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 28px;
  box-shadow: var(--d-shadow-sm);
}
.d-quote .mark {
  font-family: var(--d-font-display);
  font-size: 56px;
  line-height: 0.6;
  color: var(--d-accent-slate);
  margin: 0 0 8px;
}
.d-quote blockquote {
  font-family: var(--d-font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--d-text);
}
.d-quote .who { display: flex; gap: 12px; align-items: center; }
.d-quote .who .av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--d-grad-accent-slate);
  color: var(--d-text-on-accent-slate);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-family: var(--d-font-display);
  font-size: 14px;
}
.d-quote .who .nm { font-weight: 700; font-size: 14px; color: var(--d-text); }
.d-quote .who .meta { font-size: 12px; color: var(--d-text-muted); }
.mobile .d-quote blockquote { font-size: 16px; }

/* Three-step row (How it works mini) */
.d-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mobile .d-steps-row { grid-template-columns: 1fr; }
.d-step-card {
  padding: 24px;
  border-radius: var(--d-r-lg);
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  position: relative;
}
.d-step-card .num {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--d-accent-slate);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.d-step-card h3 { font-family: var(--d-font-display); font-weight: 700; font-size: 18px; margin: 0 0 6px; color: var(--d-text); }
.d-step-card p { color: var(--d-text-muted); font-size: 14px; margin: 0; line-height: 1.55; }

/* Final CTA band */
.d-cta-band {
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  border-radius: var(--d-r-xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
  margin: 0 40px;
}
.mobile .d-cta-band { margin: 0 18px; padding: 28px 22px; border-radius: var(--d-r-lg); }
.d-cta-band::before {
  content: ""; position: absolute;
  top: -60%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(closest-side, rgba(30, 30, 38, 0.18), transparent);
  filter: blur(20px);
}
.d-cta-band > .inner {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
}
.d-cta-band h2 { font-family: var(--d-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; margin: 0 0 6px; color: #fff; line-height: 1.2; }
.d-cta-band p { color: rgba(255,255,255,0.75); margin: 0; font-size: 15px; max-width: 480px; }
.mobile .d-cta-band h2 { font-size: 22px; }
.mobile .d-cta-band > .inner { flex-direction: column; align-items: stretch; gap: 18px; }

/* Site footer */
.d-site-footer {
  background: var(--d-text);
  color: rgba(255,255,255,0.7);
  padding: 56px 40px 28px;
}
.mobile .d-site-footer { padding: 36px 18px 22px; }
.d-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 36px;
}
.mobile .d-foot-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
.d-foot-grid h4 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin: 0 0 12px;
}
.d-foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.d-foot-grid li { font-size: 14px; }
.d-foot-grid a { color: rgba(255,255,255,0.65); text-decoration: none; cursor: default; }
.d-foot-grid a:hover { color: #fff; }
.d-foot-grid .brand img { height: 24px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.d-foot-grid .brand p { font-size: 13px; color: rgba(255,255,255,0.6); margin: 0 0 14px; max-width: 280px; line-height: 1.55; }
.d-foot-grid .brand .socials { display: flex; gap: 10px; }
.d-foot-grid .brand .socials .s {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}
.d-foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.d-foot-bottom .legal { display: flex; gap: 18px; }

/* Section: value-prop row */
.d-vp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mobile .d-vp-row { grid-template-columns: 1fr; }
.d-vp {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 24px;
}
.d-vp .ic {
  width: 44px; height: 44px;
  background: var(--d-grad-accent-slate);
  border-radius: var(--d-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--d-text-on-accent-slate);
}
.d-vp h3 { font-family: var(--d-font-display); font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--d-text); }
.d-vp p { font-size: 14px; color: var(--d-text-muted); margin: 0; line-height: 1.55; }

/* Faq accordion-look (collapsed and one expanded) */
.d-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; margin: 0 auto; }
.d-faq-item {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 22px;
}
.d-faq-item .q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--d-text);
}
.d-faq-item .q .toggle {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--d-bg-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--d-text-muted);
}
.d-faq-item.open { border-color: var(--d-text); box-shadow: var(--d-shadow-sm); }
.d-faq-item.open .toggle { background: var(--d-text); color: #fff; }
.d-faq-item .a {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--d-divider);
  color: var(--d-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Search results / supplier list (find supplier page) */
.d-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.d-chip-filter {
  background: var(--d-bg-elev);
  border: 1px solid var(--d-line);
  padding: 8px 14px;
  border-radius: var(--d-r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--d-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.d-chip-filter.active { background: var(--d-text); color: var(--d-text-on-dark); border-color: var(--d-text); }
.d-chip-filter .ic { font-size: var(--d-fs-meta-min); opacity: 0.7; }

/* About / trust callouts (timeline-ish) */
.d-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.d-bullet { display: flex; gap: 16px; }
.d-bullet .bul {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--d-surface-slate);
  color: var(--d-accent-slate-deep);
  border: 1.5px solid var(--d-accent-slate);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  flex: 0 0 auto;
  font-family: var(--d-font-display);
}
.d-bullet h4 { font-family: var(--d-font-display); font-weight: 700; font-size: 16px; margin: 0 0 4px; color: var(--d-text); }
.d-bullet p { font-size: 14px; color: var(--d-text-muted); margin: 0; line-height: 1.55; }

/* Variant header - make "site" pages full-width inside frame */
.variant.fullsite { width: 1200px; }
.variant.fullsite.mobile { width: 380px; }
@media (max-width: 1320px) {
  .variant.fullsite { width: 100%; max-width: 1100px; }
}

/* =========================================
   ADDED 2026-06-11 - match live dublaa.com
   ========================================= */

/* Top utility bar - Supplier/Customer/Commercial pivots + EN/AR toggle */
.d-utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 40px;
  background: var(--d-text);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 500;
}
.d-utility-bar .pivots { display: flex; gap: 22px; }
.d-utility-bar .pivots a { color: rgba(255,255,255,0.85); text-decoration: none; cursor: default; }
.d-utility-bar .pivots a:hover { color: #fff; }
.d-utility-bar .pivots a.commercial { color: var(--d-red); font-weight: 700; }

/* Clear EN/AR language toggle pill */
.d-lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.12);
  border-radius: var(--d-r-pill);
  padding: 3px;
  gap: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.d-lang-toggle .opt {
  padding: 5px 14px;
  border-radius: var(--d-r-pill);
  color: rgba(255,255,255,0.7);
  cursor: default;
}
.d-lang-toggle .opt.active {
  background: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
}

/* Main nav (below utility bar) */
.d-mainnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  background: #fff;
  border-bottom: 1px solid var(--d-line);
}
.d-mainnav .links {
  display: flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--d-text-muted);
}
.d-mainnav .links a, .d-mainnav .links .link {
  color: var(--d-text-muted);
  text-decoration: none;
  cursor: default;
}
.d-mainnav .links a:hover, .d-mainnav .links .link:hover { color: var(--d-text); }
.d-mainnav .login-btn {
  padding: 9px 20px;
  background: var(--d-red);
  color: #fff;
  border-radius: var(--d-r-pill);
  font-weight: 700;
  font-size: 13px;
  border: 0;
  cursor: pointer;
}

/* Hero with vehicle search form (matches live site) */
.d-hero-form {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-xl);
  padding: 24px;
  box-shadow: var(--d-shadow-md);
  margin-top: 28px;
  max-width: 920px;
}
.d-hero-form h3 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--d-text);
}
.d-hero-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}
.d-hero-form .field { display: flex; flex-direction: column; gap: 5px; }
.d-hero-form .field label {
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  color: var(--d-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.d-hero-form .field .sel {
  padding: 12px 14px;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--d-text);
  background: #fff;
  display: flex; align-items: center; justify-content: space-between;
}
.d-hero-form .field .sel.placeholder { color: var(--d-text-subtle); font-weight: 500; }
.d-hero-form .field .sel::after {
  content: 'v';
  color: var(--d-text-muted);
  font-size: var(--d-fs-meta-min);
}
.d-hero-form .search-btn {
  padding: 12px 24px;
  background: var(--d-red);
  color: #fff;
  border-radius: var(--d-r-md);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.d-hero-form .cant-find {
  margin-top: 12px;
  font-size: 13px;
  color: var(--d-text-muted);
}
.d-hero-form .cant-find a {
  color: var(--d-red);
  font-weight: 700;
  text-decoration: underline;
}

/* Trust indicators - 6 cards (matches live site's 6 benefits) */
.d-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.d-trust-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: var(--d-shadow-xs);
}
.d-trust-card .ic {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.d-trust-card .ic.y,
.d-trust-card .ic.k,
.d-trust-card .ic.g { background: transparent; }
.d-trust-card .ic img {
  width: 48px; height: 48px;
  object-fit: contain;
}
.d-trust-card .nm { font-family: var(--d-font-display); font-weight: 700; font-size: 15px; color: var(--d-text); margin: 0 0 4px; line-height: 1.3; }
.d-trust-card .dx { font-size: 13px; color: var(--d-text-muted); margin: 0; line-height: 1.5; }

/* Supplier logo grid - "Trusted. Verified. Ready to Deliver." */
.d-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.d-logo-grid .lg {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 10px 8px;
  text-align: center;
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: var(--d-fs-meta-min);
  color: var(--d-text-muted);
  min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  box-shadow: var(--d-shadow-xs);
}
.d-logo-grid .lg img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.d-logo-grid .lg .name {
  font-size: var(--d-fs-meta-min);
  line-height: 1.2;
  color: var(--d-text);
  font-weight: 700;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}
.d-logo-grid .lg.more {
  background: var(--d-bg-soft);
  color: var(--d-text);
  font-size: 12px;
  font-weight: 800;
}

/* Supplier Advertising Band - paid featured slots */
.d-ad-band {
  background: linear-gradient(135deg, #fafafd 0%, #fde9ec 100%);
  border: 1px solid var(--d-red-soft);
  border-radius: var(--d-r-xl);
  padding: 28px 32px;
  margin: 0;
  position: relative;
}
.d-ad-band::before {
  content: 'SPONSORED - مساحة إعلانية';
  position: absolute;
  top: 14px; right: 18px;
  font-size: var(--d-fs-meta-min);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--d-text-muted);
  background: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: var(--d-r-pill);
}
[dir="rtl"] .d-ad-band::before { right: auto; left: 18px; }
.d-ad-band h2 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0 0 4px;
  color: var(--d-text);
}
.d-ad-band p.lead {
  font-size: 14px;
  color: var(--d-text-muted);
  margin: 0 0 18px;
}
.d-ad-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}
.d-ad-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--d-shadow-sm);
}
.d-ad-card .lg-box {
  width: 56px; height: 56px;
  border-radius: var(--d-r-md);
  background: var(--d-grad-accent-slate);
  color: var(--d-text-on-accent-slate);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 18px;
}
.d-ad-card .lg-box.r { background: var(--d-grad-red); color: #fff; }
.d-ad-card .lg-box.k { background: var(--d-grad-dark); color: #fff; }
.d-ad-card .nm { font-family: var(--d-font-display); font-weight: 800; font-size: 15px; margin: 0; line-height: 1.25; }
.d-ad-card .sub { font-size: 12px; color: var(--d-text-muted); margin: 0; }
.d-ad-card .tagline { font-size: 13px; color: var(--d-text); margin: 6px 0 0; line-height: 1.45; }
.d-ad-card .visit { font-size: 12px; font-weight: 700; color: var(--d-red); margin-top: auto; padding-top: 8px; }
.d-ad-reserve {
  background: var(--d-text);
  color: #fff;
  border-radius: var(--d-r-lg);
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
  align-items: center; justify-content: center;
  border: 1.5px dashed rgba(255,255,255,0.3);
}
.d-ad-reserve .plus {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800;
}
.d-ad-reserve .t { font-family: var(--d-font-display); font-weight: 800; font-size: 14px; line-height: 1.25; }
.d-ad-reserve .d { font-size: 12px; color: rgba(255,255,255,0.7); }
.d-ad-reserve .cta {
  margin-top: 6px;
  font-size: 12px; font-weight: 700;
  color: var(--d-accent-slate);
}

/* Parts categories - accordion style */
.d-parts-cats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.d-parts-cat {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-lg);
  padding: 22px;
  box-shadow: var(--d-shadow-xs);
}
.d-parts-cat .head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.d-parts-cat .ic {
  width: 56px; height: 56px;
  border-radius: var(--d-r-md);
  background: var(--d-red-soft);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.d-parts-cat .ic.y { background: var(--d-red-soft); }
.d-parts-cat .ic img {
  width: 38px; height: 38px;
  object-fit: contain;
}
.d-parts-cat h3 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}
.d-parts-cat .components {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.d-parts-cat .components .comp {
  background: var(--d-bg-tint);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 4px 11px;
  font-size: 12px;
  color: var(--d-text-muted);
  font-weight: 500;
}

/* Brand makes row */
.d-makes-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}
.d-makes-row .mk {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 14px 8px;
  text-align: center;
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--d-text-muted);
  box-shadow: var(--d-shadow-xs);
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
}
.d-makes-row .mk img {
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%);
  opacity: 0.78;
  transition: opacity 0.15s, filter 0.15s;
}
.d-makes-row .mk:hover img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(15%) sepia(89%) saturate(4901%) hue-rotate(345deg) brightness(85%) contrast(95%);
}

/* Commercial & Heavy Machinery - 3 sub-area cards */
.d-commercial-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.d-commercial-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-xl);
  padding: 26px;
  box-shadow: var(--d-shadow-sm);
}
.d-commercial-card .ic {
  width: 64px; height: 64px;
  border-radius: var(--d-r-md);
  background: var(--d-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.d-commercial-card .ic img {
  width: 48px; height: 48px;
  object-fit: contain;
}
.d-commercial-card h3 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 19px;
  margin: 0 0 8px;
}
.d-commercial-card ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.d-commercial-card li {
  font-size: 13px;
  color: var(--d-text-muted);
  padding-left: 18px;
  position: relative;
}
.d-commercial-card li::before {
  content: '>';
  position: absolute; left: 4px;
  color: var(--d-red);
  font-weight: 800;
}
[dir="rtl"] .d-commercial-card li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .d-commercial-card li::before { left: auto; right: 4px; content: '<'; }

/* Help section - 2 channels */
.d-help-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.d-help-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-xl);
  padding: 28px;
  box-shadow: var(--d-shadow-sm);
  text-align: center;
}
.d-help-card .ic-big {
  width: 64px; height: 64px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: #1c1c22;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.d-help-card .ic-big.r { background: var(--d-red); color: #fff; }
.d-help-card .ic-big .bi { font-size: 28px; line-height: 1; }
.d-help-card h3 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 8px;
}
.d-help-card p {
  color: var(--d-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
}

/* Mobile app section */
.d-app-band {
  background: linear-gradient(135deg, #0d0d10 0%, #1a1a22 100%);
  color: #fff;
  border-radius: var(--d-r-xl);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.d-app-band::before {
  content: '';
  position: absolute; top: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(194,37,58,0.30) 0%, transparent 70%);
  pointer-events: none;
}
.d-app-band h2 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 28px;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -0.02em;
}
.d-app-band p {
  color: rgba(255,255,255,0.75);
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  max-width: 500px;
}
.d-store-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.d-store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: #fff;
  color: var(--d-text);
  border-radius: var(--d-r-md);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
.d-store-btn .ic { font-size: 22px; }
.d-store-btn .col { display: flex; flex-direction: column; line-height: 1.1; }
.d-store-btn .col .top { font-size: var(--d-fs-meta-min); color: var(--d-text-muted); font-weight: 500; }

/* Phone mockup placeholder for app section */
.d-phone-mock {
  width: 180px;
  height: 320px;
  background: linear-gradient(180deg, #2a2a35 0%, #1a1a22 100%);
  border-radius: 32px;
  border: 8px solid #0d0d10;
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}
.d-phone-mock::before {
  content: '';
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 6px;
  background: #0d0d10; border-radius: 4px;
}
.d-phone-mock::after {
  content: 'DUBLAA';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--d-font-display);
  font-weight: 800; font-size: 22px;
  color: #ffffff;
  letter-spacing: 0.1em;
}

/* Footer extended for marketplace links */
.d-foot-grid.extended {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
}

/* Mobile adjustments */
.mobile .d-utility-bar { padding: 8px 14px; font-size: var(--d-fs-meta-min); }
.mobile .d-utility-bar .pivots { gap: 10px; }
.mobile .d-mainnav { padding: 10px 14px; }
.mobile .d-mainnav .links { display: none; }
.mobile .d-mainnav .hamb {
  font-size: 22px;
  color: var(--d-text);
}
.mobile .d-hero-form .form-row { grid-template-columns: 1fr; }
.mobile .d-trust-grid { grid-template-columns: 1fr; }
.mobile .d-logo-grid { grid-template-columns: repeat(4, 1fr); }
.mobile .d-ad-row { grid-template-columns: 1fr; }
.mobile .d-parts-cats { grid-template-columns: 1fr; }
.mobile .d-makes-row { grid-template-columns: repeat(5, 1fr); }
.mobile .d-commercial-row { grid-template-columns: 1fr; }
.mobile .d-help-row { grid-template-columns: 1fr; }
.mobile .d-app-band { grid-template-columns: 1fr; padding: 24px; text-align: center; }
.mobile .d-app-band .d-phone-mock { margin: 0 auto; }
.mobile .d-foot-grid.extended { grid-template-columns: 1fr 1fr; }

/* Help-card CTAs (referenced in home/index.html) */
.d-cta {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--d-r-pill);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: default;
}
.d-cta-yellow { background: var(--d-text); color: #fff; }
.d-cta-red { background: var(--d-red); color: #fff; }

/* Popular Parts horizontal chips */
.d-popular-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.d-popular-parts .pop {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--d-text);
  text-decoration: none;
  cursor: default;
  box-shadow: var(--d-shadow-xs);
}
.d-popular-parts .pop:hover {
  border-color: var(--d-red);
  color: var(--d-red);
}
.mobile .d-popular-parts { gap: 8px; }
.mobile .d-popular-parts .pop { padding: 8px 14px; font-size: 13px; }

/* ====== Funnel-specific components (vehicle/part pickers) ====== */

/* small all-caps section label inside a card */
.d-section-label {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: var(--d-fs-meta-min);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-text-subtle);
  margin: 14px 0 8px;
}

/* picker pill grid (popular makes / quick-pick chips) */
.d-pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.d-pill {
  background: #fff;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 10px 16px;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--d-text);
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--d-shadow-xs);
  transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.d-pill:hover { border-color: var(--d-text); transform: translateY(-1px); }
.d-pill.selected {
  background: var(--d-text);
  border-color: var(--d-text);
  color: #fff;
}
.d-pill .pl {
  width: 22px; height: 22px;
  background: var(--d-bg-soft);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.d-pill .pl img { max-height: 16px; max-width: 18px; object-fit: contain; }
.d-pill.selected .pl { background: rgba(255,255,255,0.15); }
.d-pill.selected .pl img { filter: brightness(0) invert(1); }

/* inline expander link (e.g. "Show all 403 makes v") */
.d-expander {
  display: inline-block;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--d-text);
  border-bottom: 1.5px solid var(--d-red);
  padding-bottom: 1px;
  cursor: default;
  margin-top: 6px;
}

/* year picker quick-range grid */
.d-year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mobile .d-year-grid { grid-template-columns: repeat(2, 1fr); }
.d-year {
  background: #fff;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 14px 10px;
  text-align: center;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--d-text);
  cursor: default;
  box-shadow: var(--d-shadow-xs);
  transition: border-color 0.15s, transform 0.15s;
}
.d-year:hover { border-color: var(--d-text); transform: translateY(-1px); }
.d-year .sub {
  display: block;
  font-size: var(--d-fs-meta-min);
  font-weight: 600;
  color: var(--d-text-subtle);
  margin-top: 2px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* "I'm not sure" escape hatch */
.d-escape {
  background: var(--d-bg-soft);
  border: 1px dashed var(--d-line);
  border-radius: var(--d-r-md);
  padding: 16px 18px;
  margin: 22px 0 6px;
}
.d-escape .cta-line {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--d-red);
  margin-bottom: 4px;
}
.d-escape .body {
  font-size: 13px;
  color: var(--d-text-muted);
  line-height: 1.5;
}

/* compact summary cards used across funnel + dashboards */
.d-summary {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  box-shadow: var(--d-shadow-xs);
}
.d-summary .lbl {
  font-size: var(--d-fs-meta-min);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-text-subtle);
  font-weight: 700;
}
.d-summary .val {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--d-text);
  margin-top: 2px;
}
.d-summary .edit {
  font-size: 12px;
  font-weight: 700;
  color: var(--d-red);
  border-bottom: 1.5px solid var(--d-red);
  padding-bottom: 1px;
}

/* persistent vehicle context chip across funnel screens */
.d-vehicle-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 8px 16px 8px 8px;
  box-shadow: var(--d-shadow-xs);
  margin: 0 0 18px;
}
.d-vehicle-chip .veh-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--d-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.d-vehicle-chip .veh-text {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--d-text);
}
.d-vehicle-chip .veh-edit {
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  color: var(--d-red);
  border-bottom: 1.5px solid var(--d-red);
  padding-bottom: 1px;
  margin-left: 6px;
}

/* OR divider between search and browse */
.d-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 16px;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--d-text-subtle);
}
.d-or::before, .d-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--d-line);
}

/* 8-tile category grid in part picker */
.d-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mobile .d-cat-grid { grid-template-columns: repeat(2, 1fr); }
.d-cat-tile-funnel {
  background: #fff;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 12px 14px;
  text-align: center;
  cursor: default;
  box-shadow: var(--d-shadow-xs);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.d-cat-tile-funnel:hover {
  border-color: var(--d-text);
  transform: translateY(-2px);
  box-shadow: var(--d-shadow-sm);
}
.d-cat-tile-funnel .ic {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  background: var(--d-red-soft);
  border-radius: var(--d-r-md);
  display: flex; align-items: center; justify-content: center;
}
.d-cat-tile-funnel .ic img { width: 32px; height: 32px; object-fit: contain; }
.d-cat-tile-funnel .name {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--d-text);
  margin-bottom: 2px;
}
.d-cat-tile-funnel .count {
  font-size: var(--d-fs-meta-min);
  color: var(--d-text-subtle);
}
.d-cat-tile-funnel.selected {
  border-color: var(--d-red);
  background: var(--d-red-soft);
}

/* search autocomplete dropdown preview */
.d-search-dropdown {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  box-shadow: var(--d-shadow-md);
  padding: 8px;
  margin-top: -10px;
  margin-bottom: 12px;
}
.d-search-dropdown .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--d-r-sm);
  cursor: default;
}
.d-search-dropdown .row:hover, .d-search-dropdown .row.active { background: var(--d-bg-soft); }
.d-search-dropdown .row .ic { width: 26px; height: 26px; border-radius: 6px; background: var(--d-bg-soft); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.d-search-dropdown .row .ic img { width: 16px; height: 16px; }
.d-search-dropdown .row .lbl { flex: 1; }
.d-search-dropdown .row .lbl .pri { font-family: var(--d-font-display); font-weight: 700; font-size: 13px; color: var(--d-text); }
.d-search-dropdown .row .lbl .sec { font-size: var(--d-fs-meta-min); color: var(--d-text-muted); }
.d-search-dropdown .row .cat { font-size: var(--d-fs-meta-min); font-weight: 700; color: var(--d-text-subtle); }

/* photo upload drop zone */
.d-upload {
  background: var(--d-bg-soft);
  border: 2px dashed var(--d-line);
  border-radius: var(--d-r-md);
  padding: 28px 20px;
  text-align: center;
  cursor: default;
  transition: border-color 0.15s, background 0.15s;
}
.d-upload:hover { border-color: var(--d-text); background: #fff; }
.d-upload .icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  border: 1px solid var(--d-line);
}
.d-upload .heading {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--d-text);
  margin-bottom: 4px;
}
.d-upload .sub {
  font-size: 12px;
  color: var(--d-text-muted);
  line-height: 1.5;
  max-width: 360px;
  margin: 0 auto 12px;
}
.d-upload .browse {
  display: inline-block;
  padding: 8px 18px;
  background: var(--d-text);
  color: #fff;
  border-radius: var(--d-r-pill);
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
}

/* thumbnail row after upload */
.d-thumb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}
.d-thumb {
  width: 76px; height: 76px;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--d-text-muted);
  overflow: hidden;
}
.d-thumb img { width: 100%; height: 100%; object-fit: cover; }
.d-thumb .x {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.d-thumb.add {
  border-style: dashed;
  cursor: default;
  font-size: 30px;
  font-weight: 300;
  color: var(--d-text-subtle);
}
.d-thumb.video::after { content: "play"; position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); color:#fff; font-size: 9px; padding: 2px 5px; border-radius: 3px; }
[dir="rtl"] .d-thumb .x { right: auto; left: 4px; }

/* helpful tip block inside form */
.d-hint {
  background: var(--d-surface-slate);
  border: 1px solid var(--d-line-strong);
  border-radius: var(--d-r-md);
  padding: 12px 14px;
  font-size: 12px;
  color: var(--d-text);
  line-height: 1.55;
  margin: 12px 0 6px;
}

/* segmented chips (used for condition / urgency / delivery / OEM-aftermarket) */
.d-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.d-seg .chip {
  background: #fff;
  border: 1.5px solid var(--d-line);
  border-radius: var(--d-r-pill);
  padding: 9px 16px;
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--d-text);
  cursor: default;
  box-shadow: var(--d-shadow-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.d-seg .chip:hover { border-color: var(--d-text); }
.d-seg .chip.selected { background: var(--d-text); color: #fff; border-color: var(--d-text); }
.d-seg .chip.selected.red { background: var(--d-red); border-color: var(--d-red); }
.d-seg .chip .ic { font-size: 14px; }
.d-seg .chip .sub { font-size: var(--d-fs-meta-min); font-weight: 500; opacity: 0.7; margin-left: 4px; }

/* confirm-screen multi-row summary card */
.d-section-title {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-text-subtle);
  margin: 22px 0 10px;
}
.d-summary-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  box-shadow: var(--d-shadow-xs);
  overflow: hidden;
}
.d-summary-card .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--d-line);
}
.d-summary-card .row:last-child { border-bottom: 0; }
.d-summary-card .row .label {
  font-size: var(--d-fs-meta-min);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-text-subtle);
  font-weight: 700;
  margin-bottom: 4px;
}
.d-summary-card .row .value {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--d-text);
}
.d-summary-card .row .secondary {
  display: block;
  font-family: var(--d-font-body);
  font-weight: 400;
  font-size: 12.5px;
  color: var(--d-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.d-summary-card .edit-link {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--d-red);
  border-bottom: 1.5px solid var(--d-red);
  padding-bottom: 1px;
  cursor: default;
  align-self: flex-start;
  flex: 0 0 auto;
}

/* "what happens next" success panel */
.d-next-panel {
  background: var(--d-grad-dark);
  color: var(--d-text-on-dark);
  border-radius: var(--d-r-lg);
  padding: 22px 24px;
  margin: 22px 0 14px;
}
.d-next-panel h4 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 12px;
  color: #fff;
}
.d-next-panel ol {
  margin: 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}
[dir="rtl"] .d-next-panel ol { padding-left: 0; padding-right: 20px; }
.d-next-panel ol li { margin-bottom: 6px; }
.d-next-panel ol li strong { color: var(--d-accent-slate); font-weight: 700; }

/* T&C disclosure */
.d-disclosure {
  font-size: 12px;
  color: var(--d-text-muted);
  background: var(--d-bg-soft);
  border-radius: var(--d-r-sm);
  padding: 12px 16px;
  margin: 18px 0;
  line-height: 1.55;
}

/* ========== SUCCESS SCREEN (06) ========== */
.d-success-check {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--d-success);
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto 18px;
  box-shadow: 0 8px 20px -6px rgba(26, 143, 76, 0.35);
}
.mobile .d-success-check { width: 60px; height: 60px; font-size: 30px; }

.d-h1.center, .d-sub.center { text-align: center; }

.d-refnum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 14px 18px;
  margin: 22px 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.d-refnum .num {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--d-text);
  text-transform: none;
}
.mobile .d-refnum { padding: 12px 14px; font-size: 12px; }
.mobile .d-refnum .num { font-size: 17px; }

.d-match {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: var(--d-r-md);
  background: var(--d-grad-red);
  color: #fff;
  margin-bottom: 14px;
}
.d-match .big {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.d-match .small {
  font-size: 14px;
  opacity: 0.92;
  line-height: 1.4;
}
.mobile .d-match { padding: 14px; }
.mobile .d-match .big { font-size: 21px; }
.mobile .d-match .small { font-size: 13px; }

.d-timing {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-text);
  border-radius: var(--d-r-sm);
  font-size: 14px;
  line-height: 1.55;
  color: var(--d-text);
  margin-bottom: 16px;
}
[dir="rtl"] .d-timing { border-left: 1px solid var(--d-line); border-right: 3px solid var(--d-text); }
.d-timing .icon {
  font-size: 18px;
  flex: 0 0 auto;
  color: var(--d-text);
  line-height: 1;
  transform: translateY(1px);
}
.d-timing strong { font-weight: 700; }

.d-optional {
  background: var(--d-bg-soft);
  border: 1px dashed var(--d-line-strong);
  border-radius: var(--d-r-md);
  padding: 18px 20px;
  margin: 22px 0 18px;
}
.d-optional h4 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--d-text);
  letter-spacing: -0.01em;
}
.d-optional h4::before {
  content: "";
  margin-right: 6px;
  color: var(--d-red);
}
[dir="rtl"] .d-optional h4::before { margin-right: 0; margin-left: 6px; }
.d-optional p {
  font-size: 13.5px;
  color: var(--d-text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}

.d-shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.mobile .d-shortcut-grid { grid-template-columns: 1fr; gap: 8px; }
.d-shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm);
  text-decoration: none;
  color: var(--d-text);
  font-size: 13.5px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.d-shortcut:hover {
  border-color: var(--d-text);
  transform: translateY(-1px);
  box-shadow: var(--d-shadow-xs);
}
.d-shortcut .ico {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--d-bg-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--d-red);
}
.d-shortcut .t { font-weight: 700; font-family: var(--d-font-display); font-size: 13.5px; line-height: 1.2; }
.d-shortcut .d { font-size: var(--d-fs-meta-min); color: var(--d-text-muted); margin-top: 2px; line-height: 1.3; }

/* notify-strip - push/whatsapp opt-in reminder */
.d-notify-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--d-surface-slate);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm);
  font-size: 13px;
  color: var(--d-text);
  margin: 16px 0;
  line-height: 1.5;
}
.d-notify-strip .icon { font-size: 18px; color: var(--d-red); flex: 0 0 auto; }
.d-notify-strip a {
  color: var(--d-red);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  flex: 0 0 auto;
}
[dir="rtl"] .d-notify-strip a { margin-left: 0; margin-right: auto; }
.d-disclosure a { color: var(--d-red); font-weight: 700; text-decoration: underline; }

/* ========== DASHBOARD (C6 - My Requests) ========== */
.d-dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.d-dash-head h1 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--d-text);
}
.d-dash-head .sub {
  font-size: 14px;
  color: var(--d-text-muted);
  margin: 4px 0 0;
}
.mobile .d-dash-head h1 { font-size: 22px; }

/* Stat tiles row */
.d-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.mobile .d-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.d-stat {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 14px 16px;
  position: relative;
}
.d-stat:hover { border-color: var(--d-text); cursor: pointer; }
.d-stat .lbl {
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--d-text-muted);
  margin-bottom: 4px;
}
.d-stat .num {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--d-text);
  line-height: 1.1;
}
.d-stat .delta {
  font-size: var(--d-fs-meta-min);
  font-weight: 600;
  color: var(--d-text-muted);
  margin-top: 4px;
}
.d-stat .delta.up { color: var(--d-success); }
.d-stat .delta.red { color: var(--d-red); }
.d-stat.has-badge::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--d-red);
  box-shadow: 0 0 0 3px rgba(194, 37, 58, 0.18);
}
[dir="rtl"] .d-stat.has-badge::after { right: auto; left: 12px; }
.mobile .d-stat .num { font-size: 21px; }

/* Search + filter row */
.d-search-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.d-search-bar .d-search-input-wrap {
  flex: 1;
  position: relative;
}
.d-search-bar .d-search-input-wrap input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  font-family: var(--d-font-body);
  font-size: 14px;
  color: var(--d-text);
}
[dir="rtl"] .d-search-bar .d-search-input-wrap input { padding: 12px 42px 12px 16px; }
.d-search-bar .d-search-input-wrap input:focus { outline: none; border-color: var(--d-text); }
.d-search-bar .d-search-input-wrap .icon {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  color: var(--d-text-muted);
  font-size: 16px;
}
[dir="rtl"] .d-search-bar .d-search-input-wrap .icon { left: auto; right: 16px; }
.mobile .d-search-bar { flex-wrap: wrap; }

/* Request card */
.d-req-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.d-req-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 20px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.d-req-card:hover {
  border-color: var(--d-text);
  box-shadow: var(--d-shadow-xs);
  transform: translateY(-1px);
}
.d-req-card .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.d-req-card .ref {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--d-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.d-req-card .ref strong { color: var(--d-text); font-weight: 800; }
.d-req-card h3 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 17px;
  margin: 4px 0 6px;
  color: var(--d-text);
  letter-spacing: -0.01em;
}
.d-req-card .car-line {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--d-text-muted);
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.d-req-card .car-line .dot { color: var(--d-line-strong); }
.d-req-card .parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}
.d-req-card .part-chip {
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  color: var(--d-text);
  padding: 4px 10px;
  border-radius: var(--d-r-pill);
  font-size: 12px;
  font-weight: 600;
}
.d-req-card .photos {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.d-req-card .photos .ph {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--d-text-subtle);
  font-size: 16px;
}
.d-req-card .photos .more { font-size: 12px; font-weight: 700; color: var(--d-text-muted); }
.d-req-card .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--d-line);
  flex-wrap: wrap;
}
.d-req-card .foot .meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--d-text-muted);
}
.d-req-card .foot .meta strong { color: var(--d-text); font-weight: 700; }
.d-req-card .foot .meta .red { color: var(--d-red); font-weight: 700; }
.d-req-card .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.d-req-card .actions .d-btn { padding: 8px 14px; font-size: 13px; }
.mobile .d-req-card { padding: 14px 16px; }
.mobile .d-req-card h3 { font-size: 15px; }

/* Status pills (request states) */
.d-pill-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--d-r-pill);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--d-font-body);
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.d-pill-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.d-pill-status.live   { background: rgba(26, 143, 76, 0.12); color: var(--d-success); border-color: rgba(26, 143, 76, 0.3); }
.d-pill-status.quoted { background: rgba(194, 37, 58, 0.10); color: var(--d-red); border-color: rgba(194, 37, 58, 0.25); }
.d-pill-status.accepted { background: var(--d-text); color: #fff; border-color: var(--d-text); }
.d-pill-status.done   { background: var(--d-surface-slate); color: var(--d-text); border-color: var(--d-line); }
.d-pill-status.cancelled { background: #fff; color: var(--d-text-muted); border-color: var(--d-line-strong); }
.d-pill-status.expired { background: #fff; color: var(--d-text-muted); border-color: var(--d-line-strong); }
.d-pill-status.urgent { background: var(--d-red); color: #fff; border-color: var(--d-red); animation: pulse-red 1.6s ease-in-out infinite; }
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194, 37, 58, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(194, 37, 58, 0); }
}

/* Empty state */
.d-empty {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border: 1px dashed var(--d-line-strong);
  border-radius: var(--d-r-md);
}
.d-empty .icon {
  font-size: 42px;
  color: var(--d-text-subtle);
  margin-bottom: 12px;
}
.d-empty h3 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 8px;
  color: var(--d-text);
}
.d-empty p {
  font-size: 14px;
  color: var(--d-text-muted);
  max-width: 380px;
  margin: 0 auto 18px;
  line-height: 1.55;
}

/* Need-help bottom strip */
.d-help-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 20px;
  margin-top: 28px;
}
.mobile .d-help-strip { grid-template-columns: 1fr; }
.d-help-strip .card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm);
  padding: 14px 16px;
}
.d-help-strip .card .ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--d-bg-soft);
  color: var(--d-red);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 8px;
}
.d-help-strip .card h4 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 14px;
  margin: 0 0 4px;
  color: var(--d-text);
}
.d-help-strip .card p {
  font-size: 12.5px;
  color: var(--d-text-muted);
  margin: 0 0 10px;
  line-height: 1.5;
}
.d-help-strip .card a {
  color: var(--d-red);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}

/* Tab strip */
.d-tab-strip {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--d-line);
  margin-bottom: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.d-tab-strip .tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--d-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.d-tab-strip .tab.active { color: var(--d-text); border-bottom-color: var(--d-red); font-weight: 700; }
.d-tab-strip .tab .ct {
  background: var(--d-bg-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  margin-left: 6px;
  color: var(--d-text-muted);
}
[dir="rtl"] .d-tab-strip .tab .ct { margin-left: 0; margin-right: 6px; }
.d-tab-strip .tab.active .ct { background: var(--d-red); color: #fff; }

/* ========== REQUEST DETAIL + CHAT (C7) ========== */

/* Request summary header (top of detail page) */
.d-req-summary {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.d-req-summary .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.d-req-summary .ref {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--d-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.d-req-summary h2 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 22px;
  margin: 0;
  color: var(--d-text);
  letter-spacing: -0.01em;
}
.mobile .d-req-summary { padding: 14px 16px; }
.mobile .d-req-summary h2 { font-size: 17px; }

.d-req-summary .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--d-line);
}
.mobile .d-req-summary .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.d-req-summary .cell .lbl {
  font-size: var(--d-fs-meta-min);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--d-text-muted);
  margin-bottom: 2px;
}
.d-req-summary .cell .val {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--d-text);
  line-height: 1.4;
}

/* Quote response card (one per supplier) */
.d-quote-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.d-quote-card.best {
  border-color: var(--d-success);
  box-shadow: 0 0 0 3px rgba(26, 143, 76, 0.08);
}
.d-quote-card.accepted {
  border-color: var(--d-text);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(30, 30, 38, 0.06);
}
.d-quote-card.best::before {
  content: "Best price match";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--d-success);
  color: #fff;
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--d-r-pill);
  letter-spacing: 0.02em;
}
[dir="rtl"] .d-quote-card.best::before { left: auto; right: 16px; }
.d-quote-card.accepted::before {
  content: "check Accepted";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--d-text);
  color: #fff;
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--d-r-pill);
}
[dir="rtl"] .d-quote-card.accepted::before { left: auto; right: 16px; }

.d-quote-card .supplier-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.d-quote-card .logo {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  flex: 0 0 auto;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
}
.d-quote-card .logo img { width: 100%; height: 100%; object-fit: cover; }
.d-quote-card .supplier-head .info { flex: 1; min-width: 0; }
.d-quote-card .supplier-head h4 {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 15px;
  margin: 0;
  color: var(--d-text);
}
.d-quote-card .supplier-head .meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--d-text-muted);
  margin-top: 3px;
  flex-wrap: wrap;
}
.d-quote-card .supplier-head .meta .verified { color: var(--d-success); font-weight: 700; }
.d-quote-card .supplier-head .meta .star { color: #f5a623; }

.d-quote-card .price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.d-quote-card .price-row .total {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--d-text);
  letter-spacing: -0.01em;
}
.d-quote-card .price-row .total .cur { font-size: 14px; color: var(--d-text-muted); font-weight: 600; }
.d-quote-card .price-row .vat {
  font-size: 12px;
  color: var(--d-text-muted);
}
.d-quote-card .price-row .vs {
  margin-left: auto;
  font-size: 12px;
  color: var(--d-success);
  font-weight: 700;
}
[dir="rtl"] .d-quote-card .price-row .vs { margin-left: 0; margin-right: auto; }

.d-quote-card .quote-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--d-bg-soft);
  border-radius: var(--d-r-sm);
}
.mobile .d-quote-card .quote-meta-grid { grid-template-columns: repeat(2, 1fr); }
.d-quote-card .quote-meta-grid .cell .lbl {
  font-size: var(--d-fs-meta-min);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--d-text-muted);
  margin-bottom: 2px;
}
.d-quote-card .quote-meta-grid .cell .val {
  font-size: 13px;
  font-weight: 700;
  color: var(--d-text);
}

.d-quote-card .quote-notes {
  font-size: 13px;
  color: var(--d-text);
  line-height: 1.55;
  margin: 0 0 10px;
  padding: 12px;
  background: var(--d-bg-soft);
  border-radius: var(--d-r-sm);
  border-left: 3px solid var(--d-line-strong);
}
[dir="rtl"] .d-quote-card .quote-notes { border-left: 0; border-right: 3px solid var(--d-line-strong); }

.d-quote-card .quote-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--d-line);
  flex-wrap: wrap;
}
.d-quote-card .quote-foot .left {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--d-text-muted);
}
.d-quote-card .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Chat thread inside quote card */
.d-chat-thread {
  margin: 12px 0 0;
  padding: 14px;
  background: var(--d-bg-soft);
  border-radius: var(--d-r-sm);
  border: 1px solid var(--d-line);
}
.d-chat-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.d-chat-msg.me { justify-content: flex-end; }
.d-chat-msg .bubble {
  max-width: 70%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  background: #fff;
  border: 1px solid var(--d-line);
  color: var(--d-text);
}
.d-chat-msg.me .bubble {
  background: var(--d-grad-dark);
  color: #fff;
  border: none;
  border-bottom-right-radius: 4px;
}
[dir="rtl"] .d-chat-msg.me .bubble { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
.d-chat-msg .bubble.them { border-bottom-left-radius: 4px; }
[dir="rtl"] .d-chat-msg .bubble.them { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.d-chat-msg .ts {
  font-size: var(--d-fs-meta-min);
  color: var(--d-text-muted);
  margin-top: 3px;
}
.d-chat-msg.me .ts { text-align: right; }
[dir="rtl"] .d-chat-msg.me .ts { text-align: left; }

.d-chat-input-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed var(--d-line);
}
.d-chat-input-row input {
  flex: 1;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-pill);
  font-size: 13px;
  font-family: var(--d-font-body);
}
.d-chat-input-row input:focus { outline: none; border-color: var(--d-text); }
.d-chat-input-row button {
  background: var(--d-grad-dark);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}

/* Quote photos strip */
.d-quote-photos {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.d-quote-photos .ph {
  width: 60px; height: 60px;
  border-radius: 8px;
  background: var(--d-bg-soft);
  border: 1px solid var(--d-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--d-text-subtle);
  font-size: 18px;
  cursor: pointer;
}
.d-quote-photos .ph.video { background: var(--d-grad-dark); color: #fff; }
.d-quote-photos .ph.video::before {
  content: "play";
  font-size: 14px;
}

/* Tiny side rail of compare-cards (mobile horizontal scroll) */
.d-compare-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
  padding-bottom: 6px;
}
.d-compare-rail .pill {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.d-compare-rail .pill.active { border-color: var(--d-text); font-weight: 700; }
.d-compare-rail .pill .name { font-weight: 700; }
.d-compare-rail .pill .price { color: var(--d-success); font-weight: 700; margin-left: 6px; }
[dir="rtl"] .d-compare-rail .pill .price { margin-left: 0; margin-right: 6px; }

/* Sticky accept bar (mobile) */
.d-accept-bar {
  position: sticky;
  bottom: 0;
  background: #fff;
  border-top: 1px solid var(--d-line);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 5;
}

/* ========== ACCOUNT (C8) ========== */
.d-acct-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
}
.d-acct-sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--d-r-sm);
  color: var(--d-text-muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.d-acct-sidebar .nav-item:hover { background: var(--d-bg-soft); color: var(--d-text); }
.d-acct-sidebar .nav-item.active { background: var(--d-grad-dark); color: #fff; }
.d-acct-sidebar .nav-item .ico {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.d-acct-sidebar .nav-item .count {
  margin-left: auto;
  background: var(--d-bg-soft);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  color: var(--d-text-muted);
}
[dir="rtl"] .d-acct-sidebar .nav-item .count { margin-left: 0; margin-right: auto; }
.d-acct-sidebar .nav-item.active .count { background: rgba(255,255,255,0.18); color: #fff; }

.d-acct-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-md);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.d-acct-card h3 {
  font-family: var(--d-font-display);
  font-weight: 800;
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--d-text);
}
.d-acct-card .desc {
  font-size: 13px;
  color: var(--d-text-muted);
  margin: 0 0 16px;
}

.d-field-row {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--d-line);
}
.d-field-row:last-child { border-bottom: none; }
.d-field-row .label {
  font-size: 13px;
  color: var(--d-text-muted);
  font-weight: 600;
}
.d-field-row .value {
  font-size: 14px;
  color: var(--d-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.d-field-row .value .badge-ok { color: var(--d-success); font-size: 12px; font-weight: 700; }
.d-field-row .value .badge-warn { color: var(--d-red); font-size: 12px; font-weight: 700; }
.mobile .d-field-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }

/* Toggle switch */
.d-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.d-switch input { opacity: 0; width: 0; height: 0; }
.d-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--d-line-strong);
  border-radius: 999px;
  transition: 0.2s;
}
.d-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.d-switch input:checked + .slider { background: var(--d-success); }
.d-switch input:checked + .slider::before { transform: translateX(18px); }
[dir="rtl"] .d-switch input:checked + .slider::before { transform: translateX(-18px); }

/* Garage/vehicle/address tile */
.d-mini-card {
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.d-mini-card .icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--d-bg-soft);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--d-red);
  font-size: 18px;
  flex: 0 0 auto;
}
.d-mini-card .body { flex: 1; min-width: 0; }
.d-mini-card .body .t {
  font-family: var(--d-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--d-text);
  margin: 0 0 2px;
}
.d-mini-card .body .d {
  font-size: 12px;
  color: var(--d-text-muted);
  margin: 0;
  line-height: 1.4;
}
.d-mini-card .actions { display: flex; gap: 4px; flex: 0 0 auto; }
.d-mini-card .actions button {
  background: transparent;
  border: 1px solid var(--d-line);
  color: var(--d-text-muted);
  padding: 6px 10px;
  border-radius: var(--d-r-sm);
  cursor: pointer;
  font-size: 12px;
}
.d-mini-card .actions button:hover { color: var(--d-text); border-color: var(--d-text); }
.d-mini-card.default-tag::after {
  content: "Default";
  position: absolute;
  top: 8px; right: 8px;
  background: var(--d-success-soft);
  color: var(--d-success);
  font-size: var(--d-fs-meta-min);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.d-mini-card.with-default { position: relative; }

/* === DESIGN REVIEW MODE - shells expand to fit content ============
   Originally each page set .dt-shell { height: 760-820px; overflow: hidden }
   and .dt-body { overflow-y: auto } to simulate a browser viewport.
   For design review we need every variant's full content visible without
   scrolling inside the mockup. These overrides win over per-page rules. */
.dt-shell,
.mb-shell,
.dt-inner,
.mb-inner {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}
.dt-body,
.mb-body {
  overflow: visible;
  flex: 0 0 auto;
}


/* ===== v3 locked primitive contracts ===== */
body {
  font-size: var(--d-fs-body);
  line-height: 1.55;
}
.mobile body, .mobile { font-size: var(--d-fs-body-mobile); }

a, .d-link, .link {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover, .d-link:hover, .link:hover { color: var(--d-red); }
a:focus-visible, .d-link:focus-visible, .link:focus-visible {
  outline: 3px solid var(--d-focus-ring);
  outline-offset: 2px;
  border-radius: var(--d-r-sm);
}
a:active, .d-link:active, .link:active { color: var(--d-red-deep); }
a[aria-disabled="true"], .d-link.disabled, .link.disabled {
  color: var(--d-text-subtle);
  pointer-events: none;
}

.d-h1, .d-hero h1, .page-header h1, .d-dash-head h1 {
  font-family: var(--d-font-display);
  font-size: clamp(var(--d-fs-h1-mobile), 4vw, var(--d-fs-h1));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
}
.d-h2, .d-section-head h2 {
  font-family: var(--d-font-display);
  font-size: clamp(var(--d-fs-h2-mobile), 2.4vw, var(--d-fs-h2));
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.16;
}
.d-h3, .d-step-card h3, .d-vp h3, .d-card h3 {
  font-family: var(--d-font-display);
  font-size: var(--d-fs-h3);
  font-weight: 700;
  letter-spacing: 0;
}
.d-sub, .d-hero .lead, .d-section-head p { font-size: var(--d-fs-body); }
.mobile .d-sub, .mobile .d-hero .lead, .mobile .d-section-head p { font-size: var(--d-fs-body-mobile); }

.d-label, .d-label-small, .d-section-label, .d-section-title, .d-summary .lbl, .d-summary-card .row .label, .d-req-summary .cell .lbl, .d-quote-card .quote-meta-grid .cell .lbl, .d-hero-form .field label {
  font-size: var(--d-fs-meta-min);
}
.d-label-small {
  display: inline-flex;
  align-items: center;
  gap: var(--d-sp-2);
  color: var(--d-text-muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.d-label-small-ar, [dir="rtl"] .d-label-small, [dir="rtl"] .d-section-label, [dir="rtl"] .d-section-title, [dir="rtl"] .d-summary .lbl, [dir="rtl"] .d-summary-card .row .label, [dir="rtl"] .d-req-summary .cell .lbl, [dir="rtl"] .d-quote-card .quote-meta-grid .cell .lbl, [dir="rtl"] .d-hero-form .field label {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 800;
}

.d-btn {
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--d-btn-radius);
  border: 1px solid var(--d-accent-slate);
  background: var(--d-accent-slate);
  color: var(--d-text-on-accent-slate);
  box-shadow: none;
  font-family: var(--d-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--d-sp-2);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.mobile .d-btn { min-height: 48px; height: 48px; padding: 0 20px; font-size: 15px; }
.d-btn:hover { background: var(--d-black); border-color: var(--d-black); color: #fff; transform: translateY(-1px); box-shadow: none; }
.d-btn:focus-visible { outline: 3px solid var(--d-focus-ring); outline-offset: 2px; }
.d-btn:active { transform: translateY(0); background: var(--d-accent-slate-deep); border-color: var(--d-accent-slate-deep); }
.d-btn.secondary { background: #fff; border-color: var(--d-line-strong); color: var(--d-text); }
.d-btn.secondary:hover { border-color: var(--d-accent-slate); background: var(--d-surface-slate); color: var(--d-text); }
.d-btn.ghost { background: transparent; border-color: transparent; color: var(--d-text); }
.d-btn.ghost:hover { background: var(--d-surface-slate); border-color: transparent; color: var(--d-text); transform: none; }
.d-btn.destructive { background: var(--d-red); border-color: var(--d-red); color: #fff; }
.d-btn.destructive:hover { background: var(--d-red-deep); border-color: var(--d-red-deep); color: #fff; }
.d-btn.disabled, .d-btn:disabled, .d-btn[aria-disabled="true"] {
  background: var(--d-bg-tint);
  border-color: var(--d-line);
  color: var(--d-text-subtle);
  box-shadow: none;
  pointer-events: none;
  cursor: default;
  transform: none;
}
.d-btn.full { width: 100%; }
.d-btn.small { min-height: 36px; height: 36px; padding: 0 20px; font-size: 14px; }
.d-btn.dark { background: var(--d-accent-slate); border-color: var(--d-accent-slate); color: #fff; }

.d-input, .d-textarea, .d-select, select.d-select, input.d-input, textarea.d-textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--d-r-md);
  background: #fff;
  color: var(--d-text);
  font-family: var(--d-font-body);
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s, outline-color 0.15s, background 0.15s;
}
.d-textarea, textarea.d-textarea { min-height: 112px; padding-top: 14px; padding-bottom: 14px; resize: vertical; }
.d-input.compact, .d-textarea.compact, .d-select.compact { min-height: 40px; }
.d-input:hover, .d-textarea:hover, .d-select:hover { border-color: var(--d-text-muted); }
.d-input:focus, .d-input.focused, .d-textarea:focus, .d-select:focus, .d-phone:focus-within {
  border-color: var(--d-red);
  outline: 3px solid var(--d-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.d-input:active, .d-textarea:active, .d-select:active { border-color: var(--d-red-deep); }
.d-input.error, .d-textarea.error, .d-select.error { border-color: var(--d-error); background: var(--d-error-soft); }
.d-input.success, .d-textarea.success, .d-select.success { border-color: var(--d-success); background: var(--d-success-soft); }
.d-input.disabled, .d-input:disabled, .d-textarea.disabled, .d-textarea:disabled, .d-select.disabled, .d-select:disabled {
  background: var(--d-bg-tint);
  color: var(--d-text-subtle);
  pointer-events: none;
}
.d-input.placeholder, .d-phone .num.placeholder, .d-select.placeholder { color: var(--d-text-subtle); }

.d-card {
  background: #fff;
  border: 0;
  border-radius: var(--d-r-lg);
  padding: 20px;
  box-shadow: var(--d-shadow-sm);
}
.mobile .d-card { padding: 16px; }
.d-card.subtle { background: #fff; border: 1px solid var(--d-line); box-shadow: none; }
.d-card.dark { background: var(--d-accent-slate); color: var(--d-text-on-accent-slate); border: 0; box-shadow: var(--d-shadow-dark); }
.d-card.flat { background: transparent; border: 0; box-shadow: none; padding: 20px; }
.mobile .d-card.flat { padding: 16px; }

.d-tabs, .d-tab-strip { gap: var(--d-sp-1); }
.d-tab, .d-tab-strip .tab { cursor: pointer; min-height: 40px; }
.d-tab:hover, .d-tab-strip .tab:hover { color: var(--d-text); background: var(--d-surface-slate); }
.d-tab:focus-visible, .d-tab-strip .tab:focus-visible { outline: 3px solid var(--d-focus-ring); outline-offset: 2px; }
.d-tab:active, .d-tab-strip .tab:active { color: var(--d-red-deep); }
.d-tab.disabled, .d-tab-strip .tab.disabled { color: var(--d-text-subtle); pointer-events: none; }

.d-switch .slider { cursor: pointer; }
.d-switch:hover .slider { background: var(--d-text-muted); }
.d-switch input:focus-visible + .slider { outline: 3px solid var(--d-focus-ring); outline-offset: 2px; }
.d-switch:active .slider::before { width: 20px; }
.d-switch input:disabled + .slider, .d-switch.disabled .slider { opacity: 0.45; pointer-events: none; cursor: default; }

.d-progress .step { font-size: var(--d-fs-meta-min); }
.mobile .d-progress .step, .mobile .d-progress .step .dot { font-size: var(--d-fs-meta-min); }
.d-banner, .d-hint, .d-notify-strip { background: var(--d-surface-slate); border-color: var(--d-line-strong); color: var(--d-text); }
.d-banner .ic { background: var(--d-accent-slate); color: #fff; }
.d-frame { border-radius: var(--d-r-lg); }

.d-pl-1 { padding-left: var(--d-sp-1); }
.d-pl-2 { padding-left: var(--d-sp-2); }
.d-pl-3 { padding-left: var(--d-sp-3); }
.d-pl-4 { padding-left: var(--d-sp-4); }
.d-pr-1 { padding-right: var(--d-sp-1); }
.d-pr-2 { padding-right: var(--d-sp-2); }
.d-pr-3 { padding-right: var(--d-sp-3); }
.d-pr-4 { padding-right: var(--d-sp-4); }
[dir="rtl"] .d-pl-1 { padding-left: 0; padding-right: var(--d-sp-1); }
[dir="rtl"] .d-pl-2 { padding-left: 0; padding-right: var(--d-sp-2); }
[dir="rtl"] .d-pl-3 { padding-left: 0; padding-right: var(--d-sp-3); }
[dir="rtl"] .d-pl-4 { padding-left: 0; padding-right: var(--d-sp-4); }
[dir="rtl"] .d-pr-1 { padding-right: 0; padding-left: var(--d-sp-1); }
[dir="rtl"] .d-pr-2 { padding-right: 0; padding-left: var(--d-sp-2); }
[dir="rtl"] .d-pr-3 { padding-right: 0; padding-left: var(--d-sp-3); }
[dir="rtl"] .d-pr-4 { padding-right: 0; padding-left: var(--d-sp-4); }

[dir="rtl"] body, [dir="rtl"] .d-frame { font-family: var(--d-font-ar); text-align: right; }
[dir="rtl"] .d-h1, [dir="rtl"] .d-h2, [dir="rtl"] .d-h3, [dir="rtl"] .d-hero h1, [dir="rtl"] .d-section-head h2 { letter-spacing: 0; }

/* ===== v2bridge-app-overrides (auto) ===== */
/* Legacy dark-red search/filter panels -> clean light card (mock look) */
.hero-seach-section,.hero-seach-section.no-labels{
  background:#fff !important;
  border:1px solid var(--d-line,#e6e6ea) !important;
  border-radius:16px !important;
  box-shadow:0 6px 22px rgba(20,20,30,.05) !important;
  color:var(--d-text,#15151a) !important;
  padding:20px !important;
}
.hero-seach-section label,.hero-seach-section .control-label{color:var(--d-text-muted,#5e5e6a) !important;font-weight:700}
.hero-seach-section a,.hero-seach-section .text-white,.hero-seach-section span{color:var(--d-red,#c2253a) !important}
.hero-seach-section .btn-warning,.hero-seach-section input[type=submit],.hero-seach-section button[type=submit]{
  background:var(--d-red,#c2253a) !important;color:#fff !important;
}
.hero-seach-section input,.hero-seach-section select{background:#fff !important;color:var(--d-text,#15151a) !important}
/* ===== end v2bridge-app-overrides ===== */

/* ===== v2bridge-linkbutton (auto) ===== */
.link-button{
  border-radius:12px !important;font-weight:700 !important;
  min-height:40px;padding:9px 18px !important;display:inline-flex;
  align-items:center;justify-content:center;border:0 !important;
  font-size:14px !important;letter-spacing:.01em;text-decoration:none !important;
  box-shadow:0 2px 8px rgba(20,20,30,.08);
}
.link-button--small{min-height:36px;padding:7px 16px !important;font-size:13px !important}
/* destructive / cancel -> brand red */
.link-button,.link-button--red,.link-button--danger{background:var(--d-red,#c2253a) !important;color:#fff !important}
/* resend / positive secondary -> slate */
.link-button--orange,.link-button--resend{background:var(--d-accent-slate,#2f3542) !important;color:#fff !important}
.link-button--green,.link-button--success{background:#1f9d55 !important;color:#fff !important}
.link-button:hover{filter:brightness(.94)}
/* ===== end v2bridge-linkbutton ===== */

/* ===== v2bridge-rtl-fixes (auto) ===== */
[dir=rtl] .filter-form__clear-link{float:left !important}
[dir=rtl] .link-button--float-right{float:left !important}
[dir=rtl] .supplier-wrapper_request-refresh{text-align:right}
/* ===== end v2bridge-rtl-fixes ===== */

/* ===== v2bridge-rtl-fixes2 (auto) ===== */
[dir=rtl] .filter-form__clear-link{right:auto !important;left:0 !important}
/* ===== end v2bridge-rtl-fixes2 ===== */

/* ===== v2bridge-auth-lighten (auto) ===== */
/* Supplier auth cards still render the legacy dark .bg-black hero. Scope to
   .auth-shell (customer auth was rebuilt light and has no .bg-black) so only
   the supplier login/register/reset dark cards flip to a clean light card. */
.auth-shell .bg-black{
  background:#fff !important;
  color:var(--d-text,#15151a) !important;
  border:1px solid var(--d-line,#e6e6ea) !important;
  border-radius:18px !important;
  box-shadow:0 10px 30px rgba(20,20,30,.06) !important;
}
.auth-shell .bg-black h1,.auth-shell .bg-black h2,.auth-shell .bg-black h3,
.auth-shell .bg-black h4,.auth-shell .bg-black p,.auth-shell .bg-black label,
.auth-shell .bg-black span,.auth-shell .bg-black div,.auth-shell .bg-black strong{
  color:var(--d-text,#15151a) !important;
}
/* muted sub-copy */
.auth-shell .bg-black p{color:var(--d-text-muted,#5e5e6a) !important}
/* nested app-promo box -> light tinted panel */
.auth-shell .bg-black .bg-black,
.auth-shell .bg-black [class*="app"],
.auth-shell .bg-black .d-card{
  background:var(--d-bg-tint,#f6f6f8) !important;
  border:1px solid var(--d-line,#e6e6ea) !important;
  color:var(--d-text,#15151a) !important;
}
/* keep inputs clean white with border */
.auth-shell .bg-black input[type=text],.auth-shell .bg-black input[type=email],
.auth-shell .bg-black input[type=password],.auth-shell .bg-black input[type=tel],
.auth-shell .bg-black select{
  background:#fff !important;color:var(--d-text,#15151a) !important;
  border:1px solid var(--d-line,#e6e6ea) !important;
}
/* OR divider readable on light */
.auth-shell .bg-black hr{border-color:var(--d-line,#e6e6ea) !important}
/* error banner stays red (it is a real flash) */
/* ===== end v2bridge-auth-lighten ===== */

/* ===== v2bridge-auth-lighten2 (auto) ===== */
/* neutralise the legacy dark "OR" divider badge on the lightened supplier card */
.auth-shell .bg-black span{background-color:transparent !important}
.auth-shell .bg-black span{color:var(--d-text-muted,#5e5e6a) !important}
/* app-store badge images sit fine on light; give the promo box breathing room */
.auth-shell .bg-black img{background:transparent !important}
/* ===== end v2bridge-auth-lighten2 ===== */

/* ===== v2bridge-authwidth (auto) ===== */
/* .auth-wrap was max-width:560px but it wraps the WHOLE maincontent (login
   card + need-help section + footer), squishing them on desktop. Unconstrain
   auth-wrap; keep only the login card narrow-and-centered. Full-width sections
   (need-help, footer) then use the page width. */
.auth-shell .auth-wrap{max-width:none !important;margin-left:0 !important;margin-right:0 !important;width:auto !important}
.auth-shell .auth-wrap > .d-card{max-width:920px !important;margin-left:auto !important;margin-right:auto !important}
/* need-help stays a clean 3-col grid at full width */
.auth-shell .need-help-section{max-width:1240px !important;margin-left:auto !important;margin-right:auto !important}
/* ===== end v2bridge-authwidth ===== */

/* ===== v2bridge-auth-lighten3 (auto) ===== */
/* loginverify (OTP) uses .bg-black as a direct child of #maincontent with NO
   .auth-shell wrapper. Ref-heroes use .bg-dark (untouched); footer get-app is
   outside #maincontent. So scoping to #maincontent>.bg-black is safe. */
#maincontent > .bg-black,.block--content > .bg-black{
  background:#fff !important;color:var(--d-text,#15151a) !important;
  border:1px solid var(--d-line,#e6e6ea) !important;border-radius:18px !important;
  box-shadow:0 10px 30px rgba(20,20,30,.06) !important;
}
#maincontent > .bg-black h1,#maincontent > .bg-black h2,#maincontent > .bg-black h3,
#maincontent > .bg-black h4,#maincontent > .bg-black p,#maincontent > .bg-black label,
#maincontent > .bg-black span,#maincontent > .bg-black div,#maincontent > .bg-black strong{
  color:var(--d-text,#15151a) !important;
}
#maincontent > .bg-black p{color:var(--d-text-muted,#5e5e6a) !important}
#maincontent > .bg-black .bg-black{
  background:var(--d-bg-tint,#f6f6f8) !important;border:1px solid var(--d-line,#e6e6ea) !important;
}
#maincontent > .bg-black input[type=text],#maincontent > .bg-black input[type=email],
#maincontent > .bg-black input[type=password],#maincontent > .bg-black input[type=tel],
#maincontent > .bg-black input[type=number],#maincontent > .bg-black select{
  background:#fff !important;color:var(--d-text,#15151a) !important;border:1px solid var(--d-line,#e6e6ea) !important;
}
/* ===== end v2bridge-auth-lighten3 ===== */

/* ===== v2-hide-app-links (staging: customer+supplier NOT delivered yet — reversible) ===== */
a[href*="supplier"],a[href*="customer"]{display:none !important}
/* remove the now-empty footer "Account" column (h4 + ul of hidden entry links) */
div:has(> h4):has(> ul a[href*="customers/index"]){display:none !important}
/* ===== end v2-hide-app-links ===== */

/* ===== v2-hide-app-links2: hero "Find Supplier" CTA (hrefless, JS-driven) ===== */
.home-actions a.d-btn.secondary,.home-hero a.d-btn.secondary{display:none !important}
/* ===== end v2-hide-app-links2 ===== */

/* ===== v2-commercial-area-color ===== */
/* brighter, legible highlight for the "Commercial Area" link on the dark utility bar */
.d-utility-bar a.commercial{color:#ff6470 !important;font-weight:700 !important;transition:color .15s}
.d-utility-bar a.commercial:hover{color:#ff8a93 !important}
/* ===== end v2-commercial-area-color ===== */

/* ===== v2-hiw-video ===== */
.info-video{padding:0 !important;overflow:hidden;background:#000 !important;border:0 !important}
.info-video .v2-video-embed{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000}
.info-video .v2-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ===== end v2-hiw-video ===== */

/* ===== v2-foot-social ===== */
.d-foot-social h4{margin-bottom:10px}
.d-foot-social .d-socials{display:flex;gap:14px}
.d-foot-social .d-socials a{color:#cfcfd6;font-size:20px;line-height:1;transition:color .15s}
.d-foot-social .d-socials a:hover{color:#fff}
[dir=rtl] .d-foot-social .d-socials{justify-content:flex-start}
/* ===== end v2-foot-social ===== */

/* ===== v2-contact-cards ===== */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--d-sp-4,16px)}
.contact-cards .d-card h3{margin:0 0 8px}
.contact-cards .d-card p{margin:0;color:var(--d-text-muted)}
@media(max-width:860px){.contact-cards{grid-template-columns:1fr}}
/* ===== end v2-contact-cards ===== */

/* ===== v2-hiw-steps ===== */
.hiw-steps-list{display:grid;gap:var(--d-sp-4,16px);max-width:860px}
.hiw-step h3{margin:0 0 10px;font-size:18px}
.hiw-step p{margin:0 0 10px;color:var(--d-text-muted)}
.hiw-step ul{margin:0 0 10px;padding-inline-start:20px;color:var(--d-text-muted)}
.hiw-step li{margin-bottom:6px}
.hiw-step p:last-child,.hiw-step ul:last-child{margin-bottom:0}
/* ===== end v2-hiw-steps ===== */

/* ===== v2-adtop-flag ===== */
.d-ad-top{background:linear-gradient(90deg,#c2253a 0%,#8f1a2b 100%);color:#fff}
.d-ad-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:8px 16px;font-size:13.5px;flex-wrap:wrap;justify-content:center}
.d-ad-badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:2px 8px;font-weight:800;font-size:11px;letter-spacing:.05em}
.d-ad-text{font-weight:600}
.d-ad-cta{background:#fff;color:#c2253a!important;border-radius:8px;padding:5px 14px;font-weight:800;text-decoration:none;white-space:nowrap}
.d-ad-cta:hover{filter:brightness(.95)}
.lang-flag{width:18px;height:13px;object-fit:cover;border-radius:2px;margin-inline-end:6px;vertical-align:-2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.d-lang-toggle .opt{display:inline-flex;align-items:center}
@media(max-width:640px){.d-ad-text{font-size:12px}.d-ad-cta{display:none}}
/* ===== end v2-adtop-flag ===== */

/* ===== v2-makes ===== */
.home-makes-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1240px;margin:0 auto}
.home-make{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:14px;padding:18px;min-height:88px;transition:box-shadow .15s,transform .15s}
.home-make:hover{box-shadow:0 8px 22px rgba(20,20,30,.08);transform:translateY(-2px)}
.home-make img{max-height:44px;max-width:100%;width:auto;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .15s,opacity .15s}
.home-make:hover img{filter:none;opacity:1}
@media(max-width:860px){.home-makes-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.home-makes-row{grid-template-columns:repeat(2,1fr)}}
/* ===== end v2-makes ===== */

/* ===== v2-makes-override ===== */
.home-make img{filter:none !important;opacity:1 !important;max-height:48px}
.home-make{padding:16px 14px}
/* ===== end v2-makes-override ===== */

/* ===== v2-makes-dark (brand logos are white -> dark tiles) ===== */
.home-make{background:#15151a !important;border:1px solid #262633 !important}
.home-make:hover{background:#1d1d29 !important;box-shadow:0 8px 22px rgba(20,20,30,.18) !important}
.home-make img{filter:none !important;opacity:.92 !important;max-height:46px}
.home-make:hover img{opacity:1 !important}
/* ===== end v2-makes-dark ===== */

/* ===== v2-en-font: Plus Jakarta Sans for English (Arabic unchanged) ===== */
body{font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,sans-serif !important}
h1,h2,h3,h4,.d-h1,.d-h2,.d-h3,.d-hero h1,.d-section-head h2,.d-logo-link{font-family:'Plus Jakarta Sans',system-ui,sans-serif !important;font-weight:800}
.d-sub,.d-label-small,.d-eyebrow,.d-btn,button,input,select,textarea{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif}
/* keep Arabic fonts for RTL (override wins by specificity) */
[dir=rtl] body{font-family:'Tajawal',sans-serif !important}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .d-h1,[dir=rtl] .d-h2,[dir=rtl] .d-h3{font-family:'El Messiri','Tajawal',sans-serif !important}
/* ===== end v2-en-font ===== */

/* ===== v2-appsection + crest ===== */
.home-app-section{background:linear-gradient(120deg,#c2253a 0%,#8f1a2b 100%);color:#fff;border-radius:22px;margin:24px auto;max-width:1240px;overflow:hidden}
.home-app-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:40px 40px 0}
.home-app-copy{padding-bottom:40px}
.home-app-copy .d-label-small{color:rgba(255,255,255,.85)}
.home-app-copy h2,.home-app-copy .d-h2{color:#fff!important}
.home-app-copy .d-sub{color:rgba(255,255,255,.9)!important}
.home-app-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.home-app-badges img{height:46px;width:auto}
.home-app-visual{align-self:end;text-align:center}
.home-app-visual img{max-width:100%;max-height:340px;width:auto;display:inline-block}
.d-foot-crest{display:block;height:54px;width:auto;margin-bottom:10px;opacity:.95}
@media(max-width:860px){.home-app-inner{grid-template-columns:1fr;padding:28px 20px 0;text-align:center}.home-app-badges{justify-content:center}.home-app-copy{padding-bottom:0}}
/* ===== end v2-appsection ===== */

/* ===== v2-unhide-appstore (app store IDs contain "customer" -> were hidden by mistake) ===== */
a[href*="apple.com"],a[href*="play.google.com"]{display:inline-flex !important}
.home-app-badges a{display:inline-flex !important}
/* ===== end v2-unhide-appstore ===== */

/* ===== v2-makes-marquee ===== */
.home-makes-marquee{overflow:hidden;max-width:1240px;margin:0 auto;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.home-makes-track{display:flex;gap:14px;width:max-content;animation:makesScroll 32s linear infinite}
.home-makes-marquee:hover .home-makes-track{animation-play-state:paused}
.home-makes-track .home-make{flex:0 0 180px;width:180px;min-height:88px}
[dir=rtl] .home-makes-track{animation-direction:reverse}
@keyframes makesScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.home-makes-track{animation:none}}
/* ===== end v2-makes-marquee ===== */

/* ===== v2-merchant-ad ===== */
.home-merchant-ad{max-width:1240px;margin:20px auto}
.home-merchant-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--d-accent-slate,#1f2430);color:#fff;border-radius:18px;padding:24px 28px;position:relative;overflow:hidden}
.home-merchant-inner::before{content:"AD";position:absolute;top:10px;inset-inline-end:14px;font-size:10px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.35)}
.home-merchant-copy .d-label-small{color:#ff8a93}
.home-merchant-copy h3,.home-merchant-copy .d-h3{color:#fff!important;margin:4px 0 6px}
.home-merchant-copy p{color:rgba(255,255,255,.82);margin:0;max-width:640px}
.home-merchant-ad .d-btn{background:#fff!important;color:var(--d-accent-slate,#1f2430)!important;white-space:nowrap}
@media(max-width:640px){.home-merchant-inner{flex-direction:column;align-items:flex-start}.home-merchant-ad .d-btn{width:100%;justify-content:center}}
/* ===== end v2-merchant-ad ===== */

/* ===== v2-crest-size (bigger footer crest) ===== */
.d-foot-crest{height:76px !important;margin-bottom:14px !important}
@media(max-width:640px){.d-foot-crest{height:64px !important}}
/* ===== end v2-crest-size ===== */

/* ===== v2-marquee-rtlfix (force LTR so RTL marquee renders) ===== */
.home-makes-marquee{direction:ltr}
.home-makes-track{direction:ltr}
[dir=rtl] .home-makes-track{animation-direction:normal}
/* ===== end v2-marquee-rtlfix ===== */

/* ===== v2-supplier-marquee ===== */
.home-supplier-marquee{overflow:hidden;max-width:1240px;margin:0 auto;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.home-supplier-track{display:flex;gap:12px;width:max-content;direction:ltr;animation:supScroll 45s linear infinite}
.home-supplier-marquee:hover .home-supplier-track{animation-play-state:paused}
.home-supplier-track .home-logo-tile{flex:0 0 150px;width:150px;min-height:92px}
@keyframes supScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.home-supplier-track{animation:none}}
/* ===== end v2-supplier-marquee ===== */

/* ===== v2-supplier-speed (make it clearly move like the makes) ===== */
.home-supplier-track{animation-duration:22s !important}
/* ===== end v2-supplier-speed ===== */

/* ===== v2-deployA (commercial yellow + footer makes) ===== */
.d-utility-bar a.commercial{color:#f7c948 !important}
.d-utility-bar a.commercial:hover{color:#ffd873 !important}
.d-foot-makes-list{list-style:none;margin:0;padding:0;columns:2;column-gap:22px}
.d-foot-makes-list li{margin-bottom:8px;break-inside:avoid}
.d-foot-makes-list a{color:rgba(255,255,255,.7);text-decoration:none;font-size:13.5px}
.d-foot-makes-list a:hover{color:#fff}
/* ===== end v2-deployA ===== */

/* ===== v2-reviews ===== */
.home-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--d-sp-4,16px);max-width:1240px;margin:0 auto}
.home-review-card{background:#eef1f7;border:1px solid #e0e5f0;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px}
.home-stars{color:#f5a623;font-size:18px;letter-spacing:2px}
.home-review-card p{margin:0;color:#3a3f4c;font-weight:500;line-height:1.55;flex:1}
.home-review-name{font-weight:800;color:#1f2430;font-size:14px}
@media(max-width:860px){.home-reviews-grid{grid-template-columns:1fr}}
/* ===== end v2-reviews ===== */

/* ===== v2-vparts (SEO detailed vehicle parts) ===== */
.home-vparts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--d-sp-4,16px);max-width:1240px;margin:0 auto}
.home-vparts .home-vpart{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:14px;padding:20px 22px}
.home-vpart h3{margin:0 0 8px;font-size:16px}
.home-vpart p{margin:0;color:var(--d-text-muted,#5e5e6a);font-size:13.5px;line-height:1.6}
@media(max-width:860px){.home-vparts-grid{grid-template-columns:1fr}}
/* ===== end v2-vparts ===== */

/* ===== v2-hide-legacy-copyright (dup of footer copyright, EN on AR) ===== */
.copyright-section{display:none !important}

/* ===== v2-vpart-icon ===== */
.home-vparts .home-vpart .home-card-icon{margin-bottom:12px}
/* ===== end v2-vpart-icon ===== */

/* ===== v2-reviews-center (match mock: centered + black stars) ===== */
.home-review-card{text-align:center;align-items:center}
.home-stars{color:#ffc107}
.home-review-name{align-self:center}
/* ===== end v2-reviews-center ===== */

/* ===== v2-supplier-cta ===== */
.d-supplier-cta{display:flex;align-items:center;gap:12px;font-size:12.5px;flex:1;justify-content:center}
.d-supplier-cta span{color:#ff9aa4;font-weight:600}
.d-supplier-cta a{background:var(--d-red,#c2253a);color:#fff !important;border-radius:6px;padding:4px 13px;font-weight:700;text-decoration:none;font-size:12px;white-space:nowrap}
.d-supplier-cta a:hover{filter:brightness(1.1)}
@media(max-width:1000px){.d-supplier-cta span{display:none}}
@media(max-width:640px){.d-supplier-cta{display:none}}
/* ===== end v2-supplier-cta ===== */

/* ===== v2-vpart-iconleft (icon on left, matches mock) ===== */
.home-vparts .home-vpart{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start}
.home-vparts .home-vpart .home-card-icon{grid-row:1 / 3;margin-bottom:0}
.home-vparts .home-vpart h3{grid-column:2;margin:0 0 6px}
.home-vparts .home-vpart p{grid-column:2}
/* ===== end v2-vpart-iconleft ===== */

/* v2-header-restack : utility bar removed, lang toggle in white mainnav, supplier band above navbar */
.d-nav-right{display:flex;align-items:center;gap:16px}
.d-mainnav .d-lang-toggle{background:#ececf1}
.d-mainnav .d-lang-toggle .opt{color:#4a4a57}
.d-mainnav .d-lang-toggle .opt.active{background:var(--d-accent-slate);color:var(--d-text-on-accent-slate)}
.d-mainnav .lang-flag{box-shadow:0 0 0 1px rgba(0,0,0,.12)}
@media(max-width:600px){.d-nav-right{gap:8px}.d-mainnav .d-lang-toggle .opt{padding:5px 10px}}

/* v2-header-restack-mobile : keep nav + lang toggle within viewport on narrow screens */
@media(max-width:820px){.d-mainnav{flex-wrap:wrap;row-gap:10px}.d-nav-right{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px}.d-mainnav .links{flex-wrap:wrap;gap:10px 14px}}

/* v2-foot-logo-red : white DUBLAA + red check like old site (no invert, no badge) */
.d-foot-grid .brand img:not(.d-foot-crest){filter:none!important;height:40px;width:auto;background:transparent;padding:0;box-shadow:none;border-radius:0}

/* v2-howto-images : How to use DUBLAA with photos from the old site */
.home-howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1240px;margin:0 auto}
.home-howto{background:#fff;border:1px solid var(--d-line);border-radius:16px;overflow:hidden;text-align:center;display:flex;flex-direction:column}
.home-howto img{width:100%;aspect-ratio:389/291;object-fit:cover;display:block}
.home-howto h3{margin:16px 18px 20px;font-size:18px;font-weight:800;color:var(--d-text)}
@media(max-width:860px){.home-howto-grid{grid-template-columns:1fr}}

/* v2-foot-compact : social in brand column, drop dead Account column, tidy 4-col like old site */
.d-foot-grid{grid-template-columns:1.3fr 0.9fr 1.1fr 1.2fr}
.brand .d-foot-social{margin-top:20px}
.brand .d-foot-social h4{margin-bottom:10px}

/* v2-foot-makes-2col : force real 2-column makes list (flex rule was killing columns) */
.d-foot-makes-list{display:block!important;columns:2;column-gap:26px}
.d-foot-makes-list li{display:block;break-inside:avoid}

/* v2-hero-reviews : compact reviews under the Start-a-request CTA in the hero */
.home-hero-reviews{margin-top:24px}
.home-hero-reviews>.d-label-small{display:block;margin-bottom:10px}
.home-hero-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.home-hero-reviews .home-review-card{padding:12px;border-radius:12px;gap:6px}
.home-hero-reviews .home-review-card p{font-size:12px;line-height:1.5;margin:0}
.home-hero-reviews .home-stars{font-size:12px;letter-spacing:1px}
.home-hero-reviews .home-review-name{font-size:11px}
@media(max-width:860px){.home-hero-reviews-grid{grid-template-columns:1fr}}

/* ===== v2-account : customer account screen (DataSource stub restyled) ===== */
.v2-account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.v2-account .v2-field{margin-bottom:16px;display:block}
.v2-account .v2-field .d-label{display:block;margin-bottom:6px}
.v2-account label,.v2-account .form__label{display:block;font-size:13px;font-weight:700;color:var(--d-text);margin-bottom:6px}
.v2-account .form__input,.v2-account input[type=text],.v2-account input[type=email],
.v2-account input[type=tel],.v2-account select,.v2-account .form__select{
  width:100%;background:#fff;color:var(--d-text);border:1px solid var(--d-line);
  border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;box-shadow:none}
.v2-account .form__input:focus,.v2-account select:focus{outline:none;border-color:var(--d-red);box-shadow:0 0 0 3px rgba(194,37,58,.12)}
.v2-account .pin-row{display:flex;gap:10px}
.v2-account .pin-box{width:52px!important;text-align:center;font-size:20px!important}
[dir=rtl] .v2-account .pin-row{flex-direction:row-reverse}
.v2-account .v2-phone{display:grid;grid-template-columns:150px 1fr;gap:10px}
.v2-account fieldset,.v2-account .form__fieldset{border:0;padding:0;margin:0}
.v2-account legend,.v2-account .form__legend{display:none}
@media(max-width:860px){.v2-account-grid{grid-template-columns:1fr}.v2-account .v2-phone{grid-template-columns:1fr}}
/* ===== end v2-account ===== */

/* ===== v2-customer-area-links : the global a[href*="customer"] hide is for the PUBLIC site only.
   Inside the customer area itself those links are the navigation, so restore them there. ===== */
.auth-shell a[href*="customer"],
.auth-links a[href*="customer"],
.v2-account a[href*="customer"],
.v2-cust-menu a[href*="customer"],
.loggedinname__details a[href*="customer"]{display:inline-block !important}
.v2-cust-menu ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.v2-cust-menu a{color:var(--d-text);font-weight:700;text-decoration:none;font-size:14px}
.v2-cust-menu a:hover{color:var(--d-red)}
/* ===== end v2-customer-area-links ===== */

/* ===== v2-customer-auth-layout : the legacy .app-banner is pulled up 288px to sit under the
   old dark hero; with the v2 auth-shell that pull-up overlaps the form card. ===== */
.customerpage .app-banner{margin-top:0 !important}
.customerpage .auth-shell{padding-bottom:var(--d-sp-14,56px)}
/* ===== end v2-customer-auth-layout ===== */

/* ===== v2-preview-entry : the global a[href*="customer"] hide left NO way into the customer
   area at all. Show the navbar login button only for a reviewer holding the preview cookie
   (page.php stamps .v2-preview on <html>); the public still sees nothing. ===== */
/* The preview key was dropped (owner decision) - the login pills are public now, and the
   theme's global a[href*="customer"]/a[href*="supplier"] hide at (0,1,1) must not win. */
html body a.v2-login-entry[href]{display:inline-flex !important;align-items:center}
/* ===== end v2-preview-entry ===== */

/* ===== v2-req-cards : "My Requests" list rebuilt as app-style cards (phase 2).
   Deliberately has NO link/button into the request detail, chat or the request funnel. ===== */
.req-list{display:flex;flex-direction:column;gap:14px;max-width:1000px;margin:0 auto}
.req-card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:16px 18px;
  box-shadow:0 1px 2px rgba(20,20,30,.04)}
.req-card__head{display:flex;gap:16px;align-items:flex-start}
.req-date{flex:none;width:74px;text-align:center;background:var(--d-bg-tint,#f6f6f9);border-radius:12px;padding:10px 6px}
.req-date__day{display:block;font-size:24px;font-weight:800;line-height:1;color:var(--d-text,#15151a)}
.req-date__mon{display:block;font-size:11px;font-weight:700;color:#5a5a66;margin-top:4px}
.req-date__time{display:block;font-size:11px;color:#8a8a96;margin-top:2px}
.req-main{flex:1;min-width:0}
.req-vehicle{margin:0 0 4px;font-size:16px;font-weight:800;color:var(--d-text,#15151a)}
.req-parts{margin:0;font-size:13.5px;color:#4a4a57}
.req-partnames{color:#8a8a96}
.req-note{margin:4px 0 0;font-size:12.5px;color:#6a6a76}
.req-card:has(.req-note-val:empty) .req-note{display:none}
.req-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
[dir=rtl] .req-side{align-items:flex-start}
.req-ref{font-size:12px;color:#6a6a76;white-space:nowrap}
.req-pill{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;white-space:nowrap}
.req-pill--submitted{background:#e6f4ea;color:#1c6b34}
.req-pill--expired{background:#f1f1f4;color:#5a5a66}
.req-pill--cancelled{background:#fdeaec;color:#a6161c}
.req-pill--draft{background:#fff4d9;color:#7a5600}
.req-closed{margin:12px 0 0;padding:9px 12px;background:#f7f7fa;border-radius:10px;font-size:12.5px;color:#5a5a66}
.req-card__foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--d-line,#e6e6ea);
  display:flex;align-items:center;gap:8px;font-size:13px;color:#4a4a57}
.req-responses b{background:var(--d-red,#c2253a);color:#fff;border-radius:20px;padding:1px 9px;margin-inline-start:6px;font-size:12px}
.req-items{margin-top:10px}
.req-items summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--d-red,#c2253a);list-style:none}
.req-items summary::-webkit-details-marker{display:none}
.req-items__list{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.req-item{display:flex;gap:10px;align-items:flex-start;background:var(--d-bg-tint,#f6f6f9);border-radius:10px;padding:8px 11px;font-size:12.5px}
.req-item__ref{flex:none;color:#8a8a96}
.req-item__desc{flex:1;min-width:0;color:#3a3a47}
.req-item__media img{height:34px;width:auto;border-radius:6px;margin-inline-end:4px}
.req-empty{text-align:center;padding:44px 20px;color:#8a8a96;max-width:1000px;margin:0 auto}
.req-list:not(:empty) ~ .req-empty{display:none}
.req-empty__art{width:78px;height:58px;color:#c9c9d2}
.req-empty__title{margin:14px 0 6px;font-size:18px;font-weight:800;color:var(--d-text,#15151a)}
.req-empty__text{margin:0;font-size:13.5px}
@media(max-width:700px){
  .req-card__head{flex-wrap:wrap}
  .req-side{width:100%;flex-direction:row;justify-content:space-between;align-items:center}
}
/* ===== end v2-req-cards ===== */

/* ===== v2-hide-request-funnel : the part-request funnel is PHASE 3 and is closed.
   Hide every entry point to it so nothing dead is reachable or visible.
   DELETE THIS WHOLE BLOCK when phase 3 opens. ===== */
a[href*="parts/request"]{display:none !important}
/* the "Submit a Request Now" help card loses its only action -> hide the card itself */
.card:has(a[href*="parts/request"]){display:none !important}
/* footer "Trusted Suppliers by Car Make" column: every entry points at the funnel */
div:has(> h4):has(a[href*="parts/request"]),
div:has(> .footer-title):has(a[href*="parts/request"]){display:none !important}
/* ===== end v2-hide-request-funnel ===== */

/* ===== v2-req-empty-standalone ===== */
.req-empty--standalone{display:block !important}
/* ===== end v2-req-empty-standalone ===== */

/* ===== v2-cust-tail : shared bilingual help strip + app band for the customer area ===== */
.v2-help-strip{background:var(--d-bg-tint,#f6f6f9);padding:44px 20px}
.v2-help-strip__inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.v2-help-strip__card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:22px}
.v2-help-strip__card h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--d-text,#15151a)}
.v2-help-strip__card p{margin:0 0 16px;font-size:14px;color:#5a5a66;line-height:1.7}
.v2-app-band{background:var(--d-red,#c2253a);color:#fff;padding:36px 20px}
.v2-app-band__inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.v2-app-band h2{color:#fff;margin:0 0 8px}
.v2-app-band p{margin:0;font-size:14.5px;line-height:1.75;opacity:.95}
.v2-app-band__stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
[dir=rtl] .v2-app-band__stores{justify-content:flex-start}
.v2-app-band__stores img{height:44px;width:auto}
@media(max-width:860px){
  .v2-help-strip__inner,.v2-app-band__inner{grid-template-columns:1fr}
  .v2-app-band__stores{justify-content:flex-start}
}
/* ===== end v2-cust-tail ===== */

/* ===== v2-cust-footer-links : restore the customer nav links inside the customer-area footer ===== */
.d-site-footer a[href*="customers/"]{display:inline-block !important}
/* ===== end v2-cust-footer-links ===== */

/* ===== v2-howto-rich : the 3-step section rebuilt to the customer's mockup (AR + EN) ===== */
.hr-wrap{background:#fff;padding:48px 20px}
.hr-cards{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.hr-card{position:relative;background:#fff;border:1px solid #ececf0;border-radius:18px;padding:26px 20px 20px;
  box-shadow:0 2px 10px rgba(20,20,30,.05);text-align:center;display:flex;flex-direction:column}
.hr-num{position:absolute;top:-14px;inset-inline-start:18px;width:34px;height:34px;border-radius:50%;
  background:#9e1b22;color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.hr-title{margin:2px 0 8px;font-size:19px;font-weight:800;color:#1a1a22}
.hr-sub{margin:0 0 16px;font-size:13px;line-height:1.8;color:#6a6a76}
.hr-sub--accent{color:#9e1b22;font-weight:800;font-size:14px}
.hr-i{width:18px;height:18px;flex:none}
/* card 1 */
.hr-stage{position:relative;padding:18px 6px 10px}
.hr-blob{position:absolute;left:-4px;right:-4px;top:0;height:210px;background:#f1f1f3;border-radius:50%;z-index:0}
.hr-field{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hr-field__ico{color:#1a1a22;display:flex}
.hr-field__box{flex:1;display:flex;align-items:center;justify-content:space-between;background:#fff;
  border:1px solid #dcdce2;border-radius:9px;padding:9px 12px;font-size:13px;color:#3a3a45}
.hr-chev{font-style:normal;font-size:11px;color:#6a6a76}
.hr-search{position:relative;z-index:1;width:100%;margin-top:4px;background:#9e1b22;color:#fff;border:0;
  border-radius:10px;padding:11px;font-size:14px;font-weight:800;font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:default}
.hr-search .hr-i{color:#fff}
.hr-hand-wrap{position:absolute;top:30px;inset-inline-end:-14px;z-index:2;pointer-events:none}
.hr-hand{width:40px;height:39px;display:block}
[dir=ltr] .hr-hand-wrap{inset-inline-start:-6px;transform:scaleX(-1)}
.hr-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.hr-feat{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:#3a3a45}
.hr-feat__ico{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #ececf0;color:#9e1b22;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(20,20,30,.07)}
/* card 2 */
.hr-panel{background:#fafafb;border:1px solid #ececf0;border-radius:14px;padding:12px;text-align:start}
.hr-panel__head{display:flex;align-items:center;gap:10px;padding:6px 4px 12px;border-bottom:1px solid #ececf0;margin-bottom:8px;color:#1a1a22}
.hr-bars{flex:1;display:flex;flex-direction:column;gap:5px}
.hr-bars i{display:block;height:7px;border-radius:20px;background:#e3e3e8}
.hr-qrow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eeeef2;border-radius:10px;padding:9px 10px;margin-bottom:7px;color:#1a1a22}
.hr-bld{width:22px;height:22px;flex:none}
.hr-price{flex:none;text-align:center;line-height:1.35;display:flex;flex-direction:column;align-items:center}
.hr-price b{font-size:15px;font-weight:800;color:#9e1b22}
.hr-price em{font-style:normal;font-size:10.5px;color:#9e1b22}
.hr-city{display:flex;align-items:center;gap:3px;font-size:10.5px;color:#6a6a76;margin-top:2px}
.hr-pin{width:11px;height:11px;flex:none}
.hr-vat{font-size:10px;color:#6a6a76;margin-top:2px}
.hr-cta{width:100%;margin-top:5px;background:#9e1b22;color:#fff;border:0;border-radius:9px;padding:11px;
  font-size:13.5px;font-weight:800;font-family:inherit;cursor:default}
.hr-bullets{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:start}
.hr-bullets li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#3a3a45;margin:0;padding:0}
.hr-ck{width:19px;height:19px;flex:none;color:#9e1b22}
/* card 3 */
.hr-srow{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eeeef2;border-radius:10px;
  padding:9px 10px;margin-bottom:7px;text-align:start;color:#1a1a22}
.hr-sinfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hr-sinfo b{font-size:12.5px;font-weight:800}
.hr-meta{display:flex;align-items:center;gap:4px;font-size:10.5px;color:#6a6a76}
.hr-meta .hr-i{width:11px;height:11px}
.hr-dot{width:6px;height:6px;border-radius:50%;background:#2ea44f;flex:none}
.hr-warn{display:flex;align-items:center;gap:11px;background:#fdf3ea;border-radius:12px;padding:12px;margin-top:12px;text-align:start}
.hr-warn__ico{width:34px;height:34px;border-radius:50%;background:#9e1b22;color:#fff;flex:none;display:flex;align-items:center;justify-content:center}
.hr-warn b{display:block;font-size:13px;font-weight:800;color:#1a1a22;margin-bottom:2px}
.hr-warn span span,.hr-warn>span{font-size:11.5px;line-height:1.7;color:#5a5a66}
.hr-chan-head{margin:16px 0 10px;font-size:12.5px;font-weight:800;color:#1a1a22;text-align:start;
  border-top:1px solid #ececf0;padding-top:12px}
.hr-chans{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hr-chan{display:flex;flex-direction:column;align-items:center;gap:5px}
.hr-chan__ico{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}
.hr-chan--chat .hr-chan__ico{background:#2f2f3a}
.hr-chan--call .hr-chan__ico{background:#9e1b22}
.hr-chan--wa .hr-chan__ico{background:#25D366}
.hr-chan__t{font-size:11.5px;font-weight:700;color:#3a3a45}
.hr-chan__s{font-size:10px;color:#8a8a96}
.hr-c3foot{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;
  font-size:11.5px;font-weight:700;color:#9e1b22}
.hr-c3foot .hr-i{width:14px;height:14px}
/* areas + note */
.hr-areas{max-width:1240px;margin:14px auto 0;background:#fafafb;border:1px solid #ececf0;border-radius:12px;
  padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.hr-areas__h{font-size:12.5px;font-weight:800;color:#1a1a22}
.hr-area{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid #e6e6ec;border-radius:8px;
  padding:5px 11px;font-size:12px;color:#3a3a45}
.hr-area .hr-pin{width:12px;height:12px;color:#1a1a22}
.hr-note{max-width:1240px;margin:10px auto 0;background:#fafafb;border:1px solid #ececf0;border-radius:12px;
  padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hr-note p{margin:0;font-size:11.5px;line-height:1.75;color:#5a5a66;max-width:640px;text-align:start}
.hr-note b{color:#9e1b22}
.hr-badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hr-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#3a3a45}
.hr-badge .hr-i{width:15px;height:15px;color:#1a1a22}
@media(max-width:980px){.hr-cards{grid-template-columns:1fr;max-width:520px}
  .hr-note{justify-content:center}.hr-note p{text-align:center}}
/* ===== end v2-howto-rich ===== */

/* ===== v2-quotes : phase 3-A - request detail + supplier quotes, app-style (AR + EN).
   Deliberately carries NO link to chat or to the request funnel - those are 3-B / 3-C. ===== */
.q-wrap{max-width:1000px;margin:0 auto;padding:8px 0 24px}
.q-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.q-ref{font-size:12.5px;color:#6a6a76}
.q-ref b{color:var(--d-text,#15151a)}
.q-veh{margin:4px 0 6px;font-size:22px}
.q-veh-extra{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:#6a6a76}
.q-veh-extra li{margin:0}
.q-head__side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
[dir=rtl] .q-head__side{align-items:flex-start}
.q-body{display:flex;flex-direction:column;gap:14px}
.parts-request-supplier-responses{display:flex;flex-direction:column;gap:14px}
.q-card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:18px 20px;
  box-shadow:0 1px 2px rgba(20,20,30,.04)}
.q-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--d-line,#e6e6ea)}
.q-sup{display:flex;flex-direction:column;gap:4px;min-width:0}
.q-sup__name{font-size:16px;font-weight:800;color:var(--d-text,#15151a)}
.q-sup__rating{font-size:12.5px;color:#8a8a96}
.q-star{width:13px;height:13px;color:#f5a623}
.q-total{flex:none;text-align:end;line-height:1.25}
.q-total span{display:block;font-size:11.5px;color:#6a6a76}
.q-total b{font-size:22px;font-weight:800;color:var(--d-red,#c2253a)}
.q-money{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.q-money__row{background:var(--d-bg-tint,#f6f6f9);border-radius:10px;padding:9px 11px;text-align:center}
.q-money__row span{display:block;font-size:11px;color:#6a6a76;margin-bottom:3px}
.q-money__row b{font-size:14px;font-weight:800;color:var(--d-text,#15151a)}
.q-parts{margin:0 0 12px}
.q-line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:9px 0;border-top:1px solid #f2f2f5;font-size:13px}
.q-line__k{display:inline-flex;align-items:center;gap:7px;color:#6a6a76;font-weight:700;font-size:12.5px}
.q-line__v{color:var(--d-text,#15151a);text-align:end}
.q-i{width:15px;height:15px;flex:none}
.q-msg{padding:10px 0;border-top:1px solid #f2f2f5}
.q-msg p{margin:5px 0 0;font-size:13px;line-height:1.75;color:#3a3a47}
.q-media{display:flex;flex-wrap:wrap;gap:8px}
.q-media img{height:74px;width:auto;border-radius:10px;border:1px solid var(--d-line,#e6e6ea)}
.q-card__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--d-line,#e6e6ea)}
.q-sup-link{font-weight:800;color:var(--d-red,#c2253a);text-decoration:none;font-size:13px}
.parts-request-supplier-responses_parts{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.parts-request-supplier-responses_parts__part{display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:var(--d-bg-tint,#f6f6f9);border-radius:9px;padding:8px 11px;font-size:12.5px}
.parts-request-supplier-responses_parts__part__cost{font-weight:800;color:var(--d-red,#c2253a);flex:none}
.q-empty{text-align:center;padding:46px 20px;color:#8a8a96;background:#fff;
  border:1px solid var(--d-line,#e6e6ea);border-radius:16px}
.q-empty__title{margin:14px 0 6px;font-size:18px;font-weight:800;color:var(--d-text,#15151a)}
.q-empty__text{margin:0;font-size:13.5px}
.q-empty__art{width:80px;height:60px;color:#c9c9d2}
@media(max-width:760px){
  .q-head{flex-direction:column}
  .q-head__side{align-items:stretch;width:100%}
  .q-money{grid-template-columns:repeat(2,1fr)}
  .q-card__top{flex-direction:column;gap:8px}
  .q-total{text-align:start}
}
/* ===== end v2-quotes ===== */

/* ===== v2-req-view-link : appears only when stage 3-A is open ===== */
.req-card__foot{justify-content:space-between}
.req-view{background:var(--d-red,#c2253a);color:#fff !important;border-radius:8px;padding:7px 15px;
  font-size:12.5px;font-weight:800;text-decoration:none;display:inline-block !important;white-space:nowrap}
.req-view:hover{filter:brightness(1.08)}
/* ===== end v2-req-view-link ===== */

/* ===== v2-quotes-app : quote card matched to the app - collapsed summary, logo, address,
   and the same field order. No VAT / parts-price rows: the app does not show them. ===== */
.q-card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;
  box-shadow:0 1px 2px rgba(20,20,30,.04);overflow:hidden}
.q-sum{display:flex;align-items:center;gap:13px;padding:14px 16px;cursor:pointer;list-style:none}
.q-sum::-webkit-details-marker{display:none}
.q-logo{flex:none;width:52px;height:52px;border-radius:12px;background:var(--d-bg-tint,#f6f6f9);
  border:1px solid var(--d-line,#e6e6ea);overflow:hidden;display:flex;align-items:center;justify-content:center}
.q-logo img{width:100%;height:100%;object-fit:cover}
.q-sum__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.q-sup__name{font-size:15.5px;font-weight:800;color:var(--d-text,#15151a)}
.q-sup__addr{font-size:12px;color:#8a8a96}
.q-sup__rating{font-size:12px;color:#8a8a96}
.q-star{width:13px;height:13px;color:#f5a623}
.q-sum__price{flex:none;font-size:19px;font-weight:800;color:var(--d-red,#c2253a);white-space:nowrap}
.q-sum__chev{flex:none;color:#8a8a96;display:flex}
.q-chev{width:20px;height:20px;transition:transform .18s}
.q-card[open] .q-chev{transform:rotate(180deg)}
.q-body-in{padding:4px 16px 16px;border-top:1px solid var(--d-line,#e6e6ea)}
.q-tv{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid #f2f2f5;font-size:13px}
.q-tv__k{display:inline-flex;align-items:center;gap:7px;color:#6a6a76;font-weight:700;font-size:12.5px}
.q-tv__v{color:var(--d-text,#15151a);text-align:end;font-weight:600}
.q-parts{padding:10px 0;border-bottom:1px solid #f2f2f5}
.q-msg{padding:10px 0;border-bottom:1px solid #f2f2f5}
.q-msg p{margin:5px 0 0;font-size:13px;line-height:1.75;color:#3a3a47}
.q-media{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0}
.q-media img{height:74px;width:auto;border-radius:10px;border:1px solid var(--d-line,#e6e6ea)}
.q-card__foot{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-top:12px}
@media(max-width:620px){
  .q-sum{flex-wrap:wrap}
  .q-sum__price{width:100%;text-align:start}
}
/* ===== end v2-quotes-app ===== */

/* ===== v2-quote-rating : never show empty stars as if they were a zero score ===== */
.q-rev{font-size:12px;color:#6a6a76;margin-inline-start:6px}
.q-rev--none{color:#9a9aa6;font-style:italic;margin:0}
.q-sup__rating .supplier-wrapper__star-rating-wrapper{display:inline-flex;vertical-align:middle;gap:1px}
/* ===== end v2-quote-rating ===== */

/* ===== v2-quote-hide-empty : a supplier who left a field blank should not leave a
   labelled empty row on the customer's screen. Hide the row when it has no value. ===== */
.q-tv:has(> .q-tv__v:empty){display:none}
.q-msg:has(> p:empty){display:none}
.q-imgs:has(> .q-media:empty){display:none}
.q-parts:has(> .parts-request-supplier-responses_parts:empty){display:none}
.q-media:empty{display:none}
/* ===== end v2-quote-hide-empty ===== */

/* ===== v2-quote-hide-empty-parts : the Parts row holds only its label when the supplier
   quoted no line items (production shows the same empty cell). Hide the whole row. ===== */
.q-parts:not(:has(> .parts-request-supplier-responses_parts > *)){display:none}
/* ===== end v2-quote-hide-empty-parts ===== */

/* ===== v2-authmsg : the login page never showed why a sign in failed ===== */
.v2-authmsg{margin:0}
.v2-authmsg p{margin:0;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.6;font-weight:600}
.v2-authmsg p.fail{background:#fdecee;border:1px solid #f3c2c9;color:#a8182c}
.v2-authmsg p.success{background:#eaf7ee;border:1px solid #bfe3c9;color:#1c6b34}
/* ===== end v2-authmsg ===== */

/* ===== v2-hide-closed-links : links on the open pages that point at areas the stage
   guard blocks. They were safe (302) but dead, which reads as a broken site. ===== */
a[href="suppliers/index"],
a[href$="/suppliers"],
a[href*="/parts/request"]{display:none !important}
/* supview 2026-08-09: suppliers/view/<id> is open now — the quote-card supplier name
   links to it again. (0,3,1) beats the global a[href*="supplier"]{display:none} at (0,1,1). */
.q-tv__v a.q-sup-link[href]{display:inline !important;pointer-events:auto;text-decoration:none}
.q-tv__v a.q-sup-link[href]:hover{text-decoration:underline}
/* ===== end v2-hide-closed-links ===== */

/* ===== v2-unhide-own-links : the theme's global a[href*="customer"]{display:none}
   has specificity (0,1,1) and beats plain class rules even with !important, so the
   customer area's OWN buttons were invisible. Selectors here are (0,3,1) to win. ===== */
.req-card a.req-view[href]{display:inline-block !important}
.q-head__side a.link-button[href]{display:inline-block !important}
.q-head__side a.link-button[href]{background:#fff;border:1px solid var(--d-line,#e6e6ea);color:var(--d-text,#15151a) !important;
  border-radius:9px;padding:8px 15px;font-size:12.5px;font-weight:800;text-decoration:none;float:none;margin-inline-start:8px}
.q-head__side a.link-button[href]:hover{border-color:#c9c9d2}
.q-head__side a.link-button--orange[href]{background:var(--d-red,#c2253a);border-color:var(--d-red,#c2253a);color:#fff !important}
/* Resend fires real notifications to real suppliers - keep it out until that is muted. */
.q-head__side a.link-button--resend[href]{display:none !important}
/* ===== end v2-unhide-own-links ===== */

/* ===== v2-resend-off : resend notifies real suppliers. Server-side blocked too. ===== */
a.filter-form__clear-link[href]{display:inline !important}
/* ===== end v2-resend-off ===== */

/* ===== v2-parts-strip : the grey legacy band above the quotes, rebuilt ===== */
.q-parts-strip{background:transparent;padding:0}
.q-parts-strip__in{max-width:1120px;margin:0 auto;padding:0 24px}
.q-parts-strip__label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#8a8a96;margin:0 0 10px}
.q-parts-strip__items{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.q-part{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:14px;padding:13px 16px;
  min-width:220px;flex:1 1 260px;box-shadow:0 1px 2px rgba(20,20,30,.04)}
.q-part__name{font-size:14.5px;font-weight:700;color:var(--d-text,#15151a);line-height:1.5}
.q-part__note{margin:6px 0 0;font-size:12.5px;color:#8a8a96}
.q-part__video{margin:6px 0 0;font-size:12.5px}
.q-part__imgs{display:flex;flex-wrap:wrap;gap:6px}
.q-part__imgs:empty{display:none}
.q-part__imgs img{height:54px;border-radius:8px;border:1px solid var(--d-line,#e6e6ea)}
.q-quotes-sec__in{max-width:1120px;margin:0 auto;padding:0 24px}
/* ===== end v2-parts-strip ===== */

/* ===== v2-request-actions : cancel / resend, styled and no longer eaten by the
   global a[href*="customer"] hide (selectors are (0,3,1)). ===== */
.q-head__side a.q-act[href]{display:inline-block !important;background:#fff;
  border:1px solid var(--d-line,#e6e6ea);color:var(--d-text,#15151a) !important;border-radius:10px;
  padding:9px 16px;font-size:12.5px;font-weight:800;text-decoration:none;white-space:nowrap;
  margin-inline-start:8px;float:none}
.q-head__side a.q-act[href]:hover{border-color:#c9c9d2}
.q-head__side a.q-act--primary[href]{background:var(--d-red,#c2253a);border-color:var(--d-red,#c2253a);color:#fff !important}
.q-head__side a.q-act--primary[href]:hover{filter:brightness(1.08)}
/* ===== end v2-request-actions ===== */

/* ===== v2-head-side : the two request actions on one row ===== */
.q-head__side{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.q-head__side a.q-act[href]{margin-inline-start:0}
.q-veh-extra{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.q-veh-extra li{margin:0;font-size:13px;color:#5a5a68}
/* ===== end v2-head-side ===== */

/* ===== v2-chat : staging skin for the customer chat, matching the rest of v2 ===== */
#chatContainer{max-width:1120px;margin:28px auto 40px;padding:0 24px;display:grid;
  grid-template-columns:320px 1fr;gap:18px;align-items:start}
#chatSidebar{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:18px;
  overflow:hidden;box-shadow:0 1px 2px rgba(20,20,30,.04)}
#chatMain{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:18px;
  overflow:hidden;box-shadow:0 1px 2px rgba(20,20,30,.04);min-height:560px;display:flex;flex-direction:column}
#convList{max-height:560px;overflow-y:auto}
.conv-avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;
  background:var(--d-bg-tint,#f6f6f9);border:1px solid var(--d-line,#e6e6ea);flex:none}
#threadHeader{display:flex;align-items:center;gap:12px;padding:14px 18px;
  border-bottom:1px solid var(--d-line,#e6e6ea)}
#thName{font-size:15.5px;font-weight:800;color:var(--d-text,#15151a)}
#thTyping{font-size:12px;color:#8a8a96}
.messages-area{flex:1;overflow-y:auto;padding:18px;background:var(--d-bg-tint,#f8f8fb)}
.composer{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--d-line,#e6e6ea)}
.composer input[type=text],.composer textarea{flex:1;border:1px solid var(--d-line,#e6e6ea);
  border-radius:12px;padding:11px 14px;font-size:14px;outline:none}
.composer input[type=text]:focus,.composer textarea:focus{border-color:#c9c9d2}
.send-btn,.attach-btn{border:none;background:transparent;color:var(--d-red,#c2253a);
  font-size:19px;cursor:pointer;padding:6px 8px;border-radius:10px}
.send-btn:hover,.attach-btn:hover{background:var(--d-bg-tint,#f6f6f9)}
.char-count{font-size:11px;color:#a0a0ac}
.blocked-banner{background:#fdecee;border-top:1px solid #f3c2c9;color:#a8182c;
  padding:11px 16px;font-size:13px;font-weight:700;text-align:center}
#threadEmpty{flex:1;display:flex;align-items:center;justify-content:center;color:#8a8a96;font-size:14px}
@media(max-width:820px){
  #chatContainer{grid-template-columns:1fr;padding:0 16px}
  #convList{max-height:280px}
}
/* ===== end v2-chat ===== */

/* ===== v2-quote-chat : the app puts a chat action on every supplier reply; the website had none ===== */
.q-sum a.q-chat[href]{display:inline-flex !important;align-items:center;gap:6px;flex:none;
  border:1px solid var(--d-line,#e6e6ea);border-radius:999px;padding:6px 13px;
  font-size:12px;font-weight:800;text-decoration:none;color:var(--d-text,#15151a) !important;background:#fff}
.q-sum a.q-chat[href]:hover{border-color:var(--d-red,#c2253a);color:var(--d-red,#c2253a) !important}
.q-sum a.q-chat .q-i{width:15px;height:15px}
@media(max-width:620px){ .q-sum a.q-chat[href] span{display:none} }
/* ===== end v2-quote-chat ===== */

/* ===== v2-review : supplier rating page, same three axes the app asks about ===== */
.rv-wrap{max-width:720px;margin:34px auto 56px;padding:0 24px}
.rv-card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:20px;
  padding:32px 30px;box-shadow:0 1px 2px rgba(20,20,30,.04)}
.rv-head{text-align:center;margin-bottom:22px}
.rv-head__label{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#8a8a96;margin-bottom:6px}
.rv-head__name{margin:0 0 4px;font-size:26px}
.rv-head__addr{margin:0;font-size:13px;color:#8a8a96}
.rv-head__sub{margin:12px 0 0;font-size:14px;color:#5a5a68;line-height:1.7}
.rv-meta{list-style:none;margin:0 0 26px;padding:16px 0;display:flex;flex-wrap:wrap;gap:14px 30px;
  justify-content:center;border-top:1px solid var(--d-line,#e6e6ea);border-bottom:1px solid var(--d-line,#e6e6ea)}
.rv-meta li{margin:0;display:flex;flex-direction:column;gap:2px;align-items:center;font-size:13px}
.rv-meta span{color:#8a8a96;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rv-meta b{color:var(--d-text,#15151a)}
.rv-block{border:none;margin:0 0 22px;padding:0}
.rv-block__q{font-size:15px;font-weight:800;color:var(--d-text,#15151a);margin-bottom:12px;padding:0}
.rv-scale{display:flex;gap:8px;flex-wrap:wrap}
.rv-opt{flex:1 1 92px;display:flex;flex-direction:column;align-items:center;gap:7px;
  border:1px solid var(--d-line,#e6e6ea);border-radius:14px;padding:13px 8px;cursor:pointer;
  font-size:12px;font-weight:700;color:#5a5a68;background:#fff;transition:border-color .15s,background .15s}
.rv-opt input{position:absolute;opacity:0;width:0;height:0}
.rv-opt__dot{width:16px;height:16px;border-radius:50%;border:2px solid #c9c9d2;display:block}
.rv-opt:hover{border-color:#c9c9d2}
.rv-opt:has(input:checked){border-color:var(--d-red,#c2253a);background:#fdecee;color:var(--d-red,#c2253a)}
.rv-opt:has(input:checked) .rv-opt__dot{border-color:var(--d-red,#c2253a);background:var(--d-red,#c2253a);
  box-shadow:inset 0 0 0 3px #fff}
.rv-actions{margin-top:26px}
.rv-submit{width:100%;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:800;
  background:var(--d-red,#c2253a);color:#fff;cursor:pointer}
.rv-submit:hover{filter:brightness(1.08)}
@media(max-width:560px){ .rv-opt{flex:1 1 calc(33% - 8px)} .rv-card{padding:24px 18px} }
/* ===== end v2-review ===== */

/* ===== v2-review-msg ===== */
.v2-authmsg-inline{max-width:720px;margin:22px auto -8px;padding:13px 16px;border-radius:12px;
  background:#eaf7ee;border:1px solid #bfe3c9;color:#1c6b34;font-size:13.5px;font-weight:700;text-align:center}
/* ===== end v2-review-msg ===== */

/* ===== v2-funnel : the new-request flow, skinned to match the rest of v2 ===== */
.js-main-content .container-fluid,
.js-main-content .container{max-width:1120px;margin-inline:auto}
.parts-selection-wrapper,.parts-request-summary-wrapper,.parts-request-confirmation{
  background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:20px;
  padding:28px 26px;margin:26px auto 34px;max-width:820px;box-shadow:0 1px 2px rgba(20,20,30,.04)}
.js-main-content .split-title,.js-main-content h1,.js-main-content h2{letter-spacing:-.01em}
.js-main-content .subtext{color:#5a5a68;font-size:14px;line-height:1.7}
.js-main-content .card.border-0.bg-transparent{background:#fff !important;
  border:1px solid var(--d-line,#e6e6ea) !important;border-radius:16px;padding:6px}
.js-main-content .form__input,.js-main-content input[type=text],.js-main-content input[type=search],
.js-main-content select,.js-main-content textarea{border:1px solid var(--d-line,#e6e6ea);
  border-radius:12px;padding:11px 14px;font-size:14px;width:100%;outline:none;background:#fff}
.js-main-content input:focus,.js-main-content select:focus,.js-main-content textarea:focus{border-color:#c9c9d2}
.js-main-content .form__label{display:block;font-size:12.5px;font-weight:700;color:#6a6a76;margin-bottom:6px}
.js-main-content .button,.js-main-content .btn.btn-dark,.js-main-content input[type=submit]{
  background:var(--d-red,#c2253a);border:none;border-radius:12px;color:#fff;padding:12px 22px;
  font-size:14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.js-main-content .button:hover,.js-main-content .btn.btn-dark:hover{filter:brightness(1.08)}
.js-main-content .button--back,.js-main-content .button--secondary{background:#fff;color:var(--d-text,#15151a);
  border:1px solid var(--d-line,#e6e6ea)}
.js-main-content .button-holder{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.parts-selection__additional-notes{font-size:12.5px;color:#8a8a96}
@media(max-width:620px){
  .parts-selection-wrapper,.parts-request-summary-wrapper,.parts-request-confirmation{padding:20px 16px;margin:16px 12px 24px}
}
/* ===== end v2-funnel ===== */

/* ===== v2-supplier-directory : shown after a request is sent, like the app does ===== */
.sd-wrap{max-width:1120px;margin:34px auto 8px;padding:0 24px}
.sd-head{margin-bottom:16px}
.sd-head__t{font-size:21px;font-weight:800;margin:0 0 4px;color:var(--d-text,#15151a)}
.sd-head__s{margin:0;font-size:13.5px;color:#8a8a96}
.sd-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.sd-card{margin:0;display:flex;align-items:center;gap:12px;background:#fff;
  border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:13px 15px;
  box-shadow:0 1px 2px rgba(20,20,30,.04)}
.sd-logo{flex:none;width:46px;height:46px;border-radius:12px;overflow:hidden;
  background:var(--d-bg-tint,#f6f6f9);border:1px solid var(--d-line,#e6e6ea);
  display:flex;align-items:center;justify-content:center}
.sd-logo img{width:100%;height:100%;object-fit:cover}
.sd-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.sd-name{font-size:14.5px;font-weight:800;color:var(--d-text,#15151a);line-height:1.4}
.sd-city{font-size:12px;color:#8a8a96}
.sd-rev{font-size:12px;color:#8a8a96}
.sd-rev--none{font-style:italic}
@media(max-width:620px){ .sd-wrap{padding:0 16px} }
/* ===== end v2-supplier-directory ===== */

/* ===== v2-funnel-page : the funnel's own theme is white-on-black; once _brand.css is
   linked the cards go white, so pin readable colours on these pages only. ===== */
.v2-funnel-page body{background:var(--d-bg-tint,#f6f6f9)}
.v2-funnel-page .block--content,
.v2-funnel-page .js-main-content{color:var(--d-text,#15151a);background:transparent}
.v2-funnel-page .block--content h1,.v2-funnel-page .block--content h2,
.v2-funnel-page .block--content h3,.v2-funnel-page .block--content h4,
.v2-funnel-page .block--content p,.v2-funnel-page .block--content li,
.v2-funnel-page .block--content label,.v2-funnel-page .block--content span,
.v2-funnel-page .block--content div{color:inherit}
.v2-funnel-page .block--content .card,
.v2-funnel-page .block--content .card-body{background:#fff;color:var(--d-text,#15151a)}
.v2-funnel-page .block--content a{color:var(--d-red,#c2253a)}
/* keep the hero band readable where the theme paints it dark on purpose */
.v2-funnel-page .bg-dark,.v2-funnel-page .bg-black{color:#fff}
.v2-funnel-page .bg-dark h1,.v2-funnel-page .bg-dark h2,.v2-funnel-page .bg-dark p,
.v2-funnel-page .bg-dark label,.v2-funnel-page .bg-dark span{color:#fff}
/* ===== end v2-funnel-page ===== */

/* ===== v2-notifications : the app has this screen, the website had nothing ===== */
.nt-wrap{max-width:820px;margin:30px auto 44px;padding:0 24px}
.nt-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.nt-head__t{margin:0;font-size:26px}
.nt-badge{background:var(--d-red,#c2253a);color:#fff;border-radius:999px;padding:4px 11px;
  font-size:12px;font-weight:800}
.nt-month{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#8a8a96;margin:22px 0 9px}
.nt-card{display:flex;align-items:flex-start;gap:13px;background:#fff;
  border:1px solid var(--d-line,#e6e6ea);border-radius:16px;padding:14px 16px;margin-bottom:10px;
  text-decoration:none;box-shadow:0 1px 2px rgba(20,20,30,.04)}
.nt-card:hover{border-color:#c9c9d2}
.nt-card--unread{background:#fffdfd;border-color:#f3c2c9}
.nt-icon{flex:none;width:40px;height:40px;border-radius:12px;background:var(--d-bg-tint,#f6f6f9);
  display:flex;align-items:center;justify-content:center;color:var(--d-text,#15151a)}
.nt-icon svg{width:20px;height:20px}
.nt-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nt-title{font-size:15px;font-weight:800;color:var(--d-text,#15151a);line-height:1.45}
.nt-body{font-size:13.5px;color:#5a5a68;line-height:1.6}
.nt-time{font-size:11.5px;color:#a0a0ac}
.nt-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--d-red,#c2253a);margin-top:7px}
.nt-empty{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:18px;
  padding:44px 26px;text-align:center}
.nt-empty__t{margin:0 0 6px;font-size:16px;font-weight:800;color:var(--d-text,#15151a)}
.nt-empty__s{margin:0;font-size:13.5px;color:#8a8a96}
/* the global a[href*="customer"] hide is (0,1,1) - beat it */
.nt-wrap a.nt-card[href]{display:flex !important}
/* ===== end v2-notifications ===== */

/* ===== v2-footer-columns-guard : footer link columns must never be hidden
   (defends against overzealous cosmetic content filters hiding the Company /
   car-make columns; harmless everywhere else) ===== */
.d-site-footer .d-foot-grid > div{display:block !important}
.d-site-footer .d-foot-grid > div > ul{display:flex !important}
.d-site-footer .d-foot-grid li{display:list-item !important}
.d-site-footer .d-foot-grid a{display:inline-block !important}
/* ===== end v2-footer-columns-guard ===== */


/* ===== v2-supplier-directory-app : app-parity supplier directory (dir3) ===== */
.v2sd{max-width:760px;margin:0 auto;padding:0 0 8px}
.v2sd .v2sd-i{width:14px;height:14px;flex:none}
.v2sd-head{background:#fff;border:1px solid #e6e6ea;border-radius:12px;padding:12px 14px;text-align:center;margin:0 0 8px}
.v2sd-head__sent{display:flex;align-items:center;justify-content:center;gap:5px;font-size:13.5px;font-weight:700;color:#15151a}
.v2sd-head__sent .v2sd-i{width:16px;height:16px}
.v2sd-head__line{font-size:12.5px;color:#8a8a96;margin-top:2px}
.v2sd-head__rank{display:flex;align-items:center;justify-content:center;gap:4px;font-size:11.5px;color:rgba(212,105,42,.85);margin-top:2px}
.v2sd-head__rank .v2sd-i{width:12px;height:12px}
.v2sd-banner{display:flex;align-items:flex-start;gap:6px;border-radius:6px;padding:8px 10px;font-size:12.5px;margin:0 0 6px}
.v2sd-banner--info{background:#E8F4FD;border:1px solid #B3D9F2;color:#1565C0}
.v2sd-banner--contact{background:#FDE8D8;border:1px solid #F5C6A0;color:#C55A1E}
.v2sd-banner .v2sd-i{margin-top:1px}
.v2sd-banner span{flex:1;min-width:0}
.v2sd-banner__x{flex:none;background:none;border:0;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.v2sd-banner--info .v2sd-banner__x{color:#1976D2}
.v2sd-banner--contact .v2sd-banner__x{color:#D4692A}
.v2sd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.v2sd-card{display:flex;align-items:stretch;background:#fff;border:1px solid #e6e6ea;border-radius:10px;overflow:hidden}
.v2sd-card--top{border-color:#E8D5A0}
.v2sd-card__main{flex:1;min-width:0;padding:8px 6px 8px 10px;display:flex;flex-direction:column;gap:4px}
[dir=rtl] .v2sd-card__main{padding:8px 10px 8px 6px}
.v2sd-nameRow{display:flex;align-items:center;gap:5px;min-width:0}
.v2sd-rankchip{flex:none;background:rgba(37,89,168,.1);color:#2559A8;font-size:10.5px;font-weight:800;border-radius:5px;padding:1px 5px}
.v2sd-name{font-size:13.5px;font-weight:700;color:#15151a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2sd-star{width:15px;height:15px;flex:none}
.v2sd-badges{display:flex;flex-wrap:wrap;gap:4px}
.v2sd-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;border-radius:6px;padding:2px 6px}
.v2sd-badge .v2sd-i{width:11px;height:11px}
.v2sd-badge--rank{color:#2559A8;background:rgba(37,89,168,.1);border:1px solid rgba(37,89,168,.3)}
.v2sd-badge--top{color:#e8770e;background:rgba(232,119,14,.1);border:1px solid rgba(232,119,14,.3)}
.v2sd-badge--fast{color:#2e9e5b;background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.3)}
.v2sd-addr{display:flex;align-items:center;gap:3px;font-size:11px;color:#8a8a96;min-width:0}
.v2sd-addr .v2sd-i{width:11px;height:11px}
.v2sd-btns{display:flex;gap:4px;margin-top:2px}
.v2sd-btns .v2sd-btn{flex:1}
/* the theme hides a[href*="supplier"] and a[href*="customer"] at (0,1,1) — these are (0,3,1)+ to win */
.v2sd-btns a.v2sd-btn[href]{display:inline-flex !important;align-items:center;justify-content:center;gap:3px;
  padding:6px 4px;border-radius:6px;font-size:11.5px;font-weight:700;text-decoration:none;min-width:0}
.v2sd-btns a.v2sd-btn--wa[href]{color:#25D366;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.3)}
.v2sd-btns a.v2sd-btn--call[href]{color:#e8770e;background:rgba(232,119,14,.1);border:1px solid rgba(232,119,14,.3)}
.v2sd-btns a.v2sd-btn--chat[href]{color:#2559A8;background:rgba(37,89,168,.1);border:1px solid rgba(37,89,168,.3)}
.v2sd-btns a.v2sd-btn[href] span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2sd-logo{flex:none;width:85px;background:#F3F4F6;display:flex;align-items:center;justify-content:center;overflow:hidden}
.v2sd-logo img{width:100%;height:100%;object-fit:cover}
.v2sd-logo__init{font-size:18px;font-weight:800;color:#BBBBBB}
.v2sd-empty{background:#fff;border:1px solid #e6e6ea;border-radius:12px;padding:44px 20px;text-align:center;color:#8a8a96;font-size:14px}
.v2sd-foot{background:#fff;border-top:1px solid #e6e6ea;padding:10px 16px;margin-top:8px;border-radius:0 0 12px 12px}
.v2sd-foot a.v2sd-cta[href]{display:flex !important;align-items:center;justify-content:center;width:100%;height:44px;
  background:#1A9E8F;color:#fff !important;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none}
/* expired (inactive) section — name/logo/location only, muted, no actions */
.v2sd-exp{margin-top:16px}
.v2sd-exp__head{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:#6b6b76;margin:0 2px 1px}
.v2sd-exp__count{font-weight:700;color:#a5a5b0}
.v2sd-exp__note{font-size:11.5px;color:#9a9aa5;margin:0 2px 6px}
.v2sd-card--exp{background:#fafafa;border-color:#e9e9ed}
.v2sd-card--exp .v2sd-name{color:#6b6b76;font-weight:600}
.v2sd-card--exp .v2sd-logo{opacity:.55}
@media(max-width:480px){ .v2sd-logo{width:70px} }
/* supview: the name links to suppliers/view/<id> — the theme's a[href*="supplier"]{display:none}
   at (0,1,1) would eat it, so this unhide is (0,3,1) */
.v2sd-nameRow a.v2sd-name[href]{display:inline-block !important;color:#15151a;text-decoration:none;min-width:0}
.v2sd-nameRow a.v2sd-name[href]:hover{color:#2559A8;text-decoration:underline}
/* supview: the address opens Google Maps (href has no "supplier"/"customer" so no unhide needed) */
a.v2sd-addr[href]{text-decoration:none}
a.v2sd-addr[href]:hover{color:#2559A8;text-decoration:underline}
/* ===== end v2-supplier-directory-app ===== */

/* ===== v2store : supplier storefront (suppliers/view/N) + public Find-Supplier
   directory (suppliers/directory) in the v2 card language. 2026-08-09 ===== */
/* unhide: the global a[href*="supplier"]{display:none} at (0,1,1) must not eat the
   now-open directory links, card links or paging. All selectors below are >=(0,2,1). */
a[href*="suppliers/directory"][href]{display:inline !important}
.d-mainnav .links a[href*="suppliers/directory"]{display:inline-block !important}
.supplier-card a[href]{display:inline-flex !important;align-items:center}
.paging a[href]{display:inline-block !important}
/* ---- storefront grid (Seller's Marketplace) ---- */
.supplier-market-place .container-fluid{max-width:1240px;margin:0 auto}
.supplier-market-place h2{font-size:24px;color:#15151a}
.v2store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:6px}
.v2store-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;box-shadow:0 6px 22px rgba(20,20,30,.05);overflow:hidden;text-decoration:none !important;color:var(--d-text,#15151a);transition:box-shadow .15s ease,transform .15s ease}
.v2store-card:hover{box-shadow:0 10px 28px rgba(20,20,30,.12);transform:translateY(-2px)}
.v2store-imgwrap{display:block;aspect-ratio:4/3;background:#f6f6f8;position:relative;overflow:hidden}
.v2store-img{width:100%;height:100%;object-fit:cover;display:block}
.v2store-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#f1f1f4}
.v2store-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.v2store-title{font-size:13.5px;font-weight:700;line-height:1.4;color:var(--d-text,#15151a);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.v2store-price{font-size:14.5px;font-weight:800;color:var(--d-red,#c2253a);margin-top:auto}
.v2store-cfp{display:inline-block;background:#fdf1f3;color:var(--d-red,#c2253a);border:1px solid #f3ccd3;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.v2store-empty{background:#fff;border:1px dashed var(--d-line,#e6e6ea);border-radius:16px;padding:30px;text-align:center;color:var(--d-text-muted,#8a8a96);font-weight:600}
/* ---- directory hero ---- */
.supplierpage .hero-section .titles-section h1{font-size:34px;margin:14px 0 8px;color:#15151a}
.supplierpage .hero-section .titles-section h2{font-size:16px;font-weight:600;color:var(--d-text-muted,#8a8a96);line-height:1.5}
/* ---- directory search band ---- */
.suppliers-list section.bg-danger{background:var(--d-accent-slate,#2f3542) !important;border-radius:16px;padding:6px 0 !important;margin-bottom:6px}
.form--suppliers-search{background:transparent !important;box-shadow:none !important}
.form--suppliers-search .form__legend{color:#fff;font-weight:800;font-size:17px;margin-bottom:12px}
.form--suppliers-search label,.form--suppliers-search .form__label{color:#fff !important;font-weight:700;font-size:13px}
.form--suppliers-search input[type=submit]{background:var(--d-red,#c2253a) !important;color:#fff !important;border-radius:12px !important;font-weight:800 !important;border:0}
.form--suppliers-search input[type=submit]:hover{filter:brightness(1.08)}
.form--suppliers-search .filter-form__clear-link{color:#fff !important;text-decoration:underline;font-weight:600;font-size:13px}
.form--suppliers-search .search-field{margin:4px 0}
/* ---- directory cards ---- */
.suppliers-list .segment__wrapper1{padding-top:4px}
.supplier-card{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:16px;box-shadow:0 6px 22px rgba(20,20,30,.05);margin-bottom:14px;overflow:hidden}
.supplier-card__inner{display:flex;flex-direction:row;align-items:stretch}
.supplier-card__logo{width:110px;min-height:104px;background:#f6f6f8;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:12px}
.supplier-card__logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.supplier-card__logo img,.supplier-card__logo .supplier-image-container__image{max-width:100%;max-height:80px;object-fit:contain}
.supplier-card__body{flex:1;padding:14px 18px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.supplier-card__category{font-size:11.5px;color:var(--d-text-muted,#8a8a96);margin-bottom:2px;line-height:1.3}
.supplier-card__category .supplier-businesstypes,.supplier-card__category .supplier-businesstypes__types,.supplier-card__category .supplier-businesstypes__types__type{display:inline;list-style:none;margin:0;padding:0}
.supplier-card__category .supplier-businesstypes__types__type + .supplier-businesstypes__types__type::before{content:", "}
.supplier-card__name{font-size:16.5px;font-weight:800;margin:0 0 7px 0;line-height:1.35}
.supplier-card__name a{color:var(--d-text,#15151a);text-decoration:none}
.supplier-card__name a:hover{color:var(--d-red,#c2253a)}
.supplier-card__badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.badge-verified{display:inline-flex;align-items:center;gap:4px;background:#e7f6ee;color:#1c6b34;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.badge-verified .bi{font-size:12px;font-family:"bootstrap-icons" !important}
.supplier-card__badges .supplier-businesstypes,.supplier-card__badges .supplier-businesstypes__types{display:inline-flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.supplier-card__badges .supplier-businesstypes__types__type{display:inline-flex;align-items:center;background:var(--d-surface-slate,#eef0f4);color:#3d4353;font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.v2sd-inactive{display:inline-flex;align-items:center;background:#f4f4f6;color:var(--d-text-muted,#8a8a96);font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.supplier-card.v2-expired .supplier-card__actions{display:none}
.supplier-card.v2-expired .supplier-card__logo{filter:grayscale(1);opacity:.75}
.supplier-card__actions{display:flex;flex-wrap:wrap;gap:8px}
.supplier-card .sc-btn{font-size:13px;padding:6px 14px !important;border-radius:10px !important;font-weight:700 !important;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;text-decoration:none;line-height:1.4;min-height:34px}
.supplier-card .sc-btn .bi{font-family:"bootstrap-icons" !important;font-size:14px}
.supplier-card .sc-btn-call{background:#fdf1f3 !important;color:#a11f31 !important;border:1px solid #f3ccd3 !important}
.supplier-card .sc-btn-call:hover{background:#f7dade !important}
.supplier-card .sc-btn-whatsapp{background:#ecfdf3 !important;color:#067647 !important;border:1px solid #abefc6 !important}
.supplier-card .sc-btn-whatsapp:hover{background:#d8f6e4 !important}
.supplier-card .sc-btn-chat{background:#eef0f4 !important;color:#2f3542 !important;border:1px solid #d8dce4 !important}
.supplier-card .sc-btn-chat:hover{background:#e0e4ec !important}
.supplier-card .sc-btn-location{background:#fff !important;color:#555 !important;border:1px solid var(--d-line,#e6e6ea) !important}
.supplier-card .sc-btn-location:hover{background:#f4f4f6 !important}
.supplier-card .sc-btn-location .bi{color:var(--d-red,#c2253a)}
/* ---- paging ---- */
ul.paging{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:8px 0;margin:14px 0;list-style:none}
ul.paging li{list-style:none}
ul.paging a{background:#fff;border:1px solid var(--d-line,#e6e6ea);border-radius:10px;padding:7px 13px;font-weight:700;font-size:13.5px;color:var(--d-text,#15151a);text-decoration:none}
ul.paging a:hover{border-color:#c9c9d2}
ul.paging a.paging__list-item__link--standardrange--current{background:var(--d-red,#c2253a);border-color:var(--d-red,#c2253a);color:#fff}
ul.paging a.paging__list-item__link--previouspage--disabled{opacity:.45;pointer-events:none}
/* ---- RTL ---- */
[dir=rtl] .supplier-card__body{text-align:right}
[dir=rtl] .form--suppliers-search{text-align:right}
/* ---- mobile ---- */
@media (max-width:575px){
  .v2store-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .v2store-body{padding:10px 11px 12px}
  .supplier-card__logo{width:84px;min-height:84px;padding:8px}
  .supplier-card__body{padding:10px 12px}
  .supplier-card__name{font-size:14.5px}
  .supplier-card .sc-btn{font-size:11.5px;padding:5px 9px !important;gap:3px}
}
/* ===== end v2store ===== */

/* ===== v2sd-icon-size : the directory banners ship inline SVGs with no sizing rule,
   so they rendered full-bleed (a giant arrow and a giant info circle). Constrain them. ===== */
.v2sd-wrap svg,
.v2sd-banner svg,
.v2sd-head svg,
.v2sd-card svg,
.v2sd-badge svg,
.v2sd-btn svg{width:16px;height:16px;flex:none;display:inline-block;vertical-align:middle}
.v2sd-banner svg{width:14px;height:14px}
.v2sd-badge svg{width:12px;height:12px}
.v2sd-btn svg{width:15px;height:15px}
.v2sd-wrap img{max-width:100%;height:auto}
/* ===== end v2sd-icon-size ===== */
/* ===== v2sd-i-hardsize : the directory icons carry class .v2sd-i and had no size,
   so they painted at full container width. Size the class itself. ===== */
svg.v2sd-i{width:16px !important;height:16px !important;flex:0 0 auto !important;display:inline-block;vertical-align:-3px}
.v2sd-banner svg.v2sd-i{width:14px !important;height:14px !important}
.v2sd-head__rank svg.v2sd-i{width:14px !important;height:14px !important}
.v2sd-badge svg.v2sd-i{width:12px !important;height:12px !important}
/* ===== end v2sd-i-hardsize ===== */

/* ===== v2sup — supplier area Stage 1 (2026-08-13) ===== */
body.supplierpage #maincontent a[href],
body.supplierpage .v2-help-strip a[href],
body.supplierpage .v2-app-band a[href],
body.supplierpage .d-site-footer a[href],
body.supplierpage header a[href],
body.supplierpage .sub-menu a[href]{display:revert !important}
body.supplierpage a.d-btn[href]{display:inline-flex !important}
body.supplierpage #maincontent a.btn[href]{display:inline-flex !important}
body.supplierpage .navbar a.navbar-brand[href]{display:inline-block !important}
body.supplierpage .sub-menu{padding:8px 16px}
/* register: benefits + form side by side inside the card */
@media(min-width:992px){
.auth-wrap--register .d-card{display:flex;flex-wrap:wrap;gap:0 28px;align-items:flex-start}
.auth-wrap--register .d-card>.registration-info-section{flex:0 0 40%;max-width:40%;margin:0 !important}
.auth-wrap--register .d-card>div[class*=col-xl-5]{flex:1 1 52%;max-width:56%;margin:0 !important}
}
@media(max-width:991.98px){
.auth-wrap--register .d-card{display:flex;flex-direction:column}
.auth-wrap--register .d-card>div[class*=col-xl-5]{order:-1;width:100%;max-width:100%}
.auth-wrap--register .d-card>.registration-info-section{width:100%;max-width:100%}
}
body.supplierpage .sub-menu .btn{white-space:nowrap}
/* ===== end v2sup ===== */

/* ===== v2-supplier-entry : the global a[href*="supplier"] hide (0,1,1) was also hiding the
   only way into the supplier area from the public site. Unhide the entry points. ===== */
.pivots a[href*="suppliers/"][href],
.pivots a[href*="customers/"][href]{display:inline-block !important}
.block--footer a[href*="suppliers/index"][href],
.block--footer a[href*="suppliers/login"][href],
footer a[href*="suppliers/index"][href],
footer a[href*="suppliers/login"][href]{display:inline !important}
.d-site-header a[href*="suppliers/login"][href],
.d-site-header a[href*="suppliers/register"][href],
nav a[href*="suppliers/login"][href],
nav a[href*="suppliers/register"][href]{display:inline-flex !important}
/* Supplier Login sits beside Customer Login in the site header: same pill size, outlined so
   the customer entry stays the primary one. */
html body .d-site-header a.v2-supplier-login[href]{display:inline-flex !important;align-items:center;
  background:#fff !important;border:1.5px solid var(--d-red,#c2253a) !important;
  color:var(--d-red,#c2253a) !important;margin-inline-start:8px}
html body .d-site-header a.v2-supplier-login[href]:hover{background:var(--d-red,#c2253a) !important;color:#fff !important}
@media(max-width:900px){html body .d-site-header a.v2-supplier-login[href]{margin-inline-start:6px}}
/* The yellow "Become a Supplier" CTA bar now points at suppliers/register, which the global
   a[href*="supplier"] hide would swallow. */
html body .supplier-cta-bar a[href*="suppliers/"][href]{display:inline-block !important}
/* ===== end v2-supplier-entry ===== */
/* ===== v2-cookie-and-badges : consent block lives in shared CMS content (production
   reads the same rows) so it is hidden here, not deleted. Store badges ship at
   different intrinsic sizes and stacked unevenly — pin them to one height. ===== */
html body .block--cookies,html body .js-cookies,html body .cookies-details,
html body .js-cookies-details,html body .block__wrapper--cookies{display:none !important}
a[href*='apps.apple.com'] img,a[href*='play.google.com'] img,
img[src*='appStoreLogo'],img[src*='googlePlayBadge'],img[src*='appStoreBadge']{
  height:44px !important;width:auto !important;max-width:none !important;display:block}
a[href*='apps.apple.com'],a[href*='play.google.com']{display:inline-block;line-height:0}
/* ===== end v2-cookie-and-badges ===== */

/* ===== v2sup-login — supplier login mirrors the app login screen (2026-08-14).
   Brand panel = the app's login_bg (black→red, wireframe car) with logo, taglines
   and store badges; card = the app's white sheet: Email|WhatsApp tabs, one primary
   button per pane, centered trouble/reset, outlined register button. ===== */
body.supplierpage .block--slalogin{max-width:1240px;margin:0 auto;padding:24px 16px 44px}
.sla-msg{max-width:1080px;margin:0 auto 16px}
.sla-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border:1px solid #e6e6ea;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 1px 2px rgba(20,20,30,.04)}
/* brand panel (mirrors the app's login background) */
.sla-brand{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:40px 36px;color:#fff;
  background:linear-gradient(160deg,#0a0a0c 0%,#420b12 45%,#9c1522 78%,#c2253a 100%)}
.sla-brand::before{content:"";position:absolute;inset:0;
  background:url('/website/staticimages/supplier_login_bg.png') top center/cover no-repeat;opacity:.95}
.sla-brand>*{position:relative;z-index:1}
.sla-logo{height:40px !important;width:auto !important;display:block;margin-bottom:22px}
.sla-taglines{display:flex;flex-direction:column;gap:2px}
.sla-taglines span{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:23px;line-height:1.35;letter-spacing:.01em}
[dir=rtl] .sla-taglines span{font-family:'El Messiri','Tajawal',sans-serif}
.sla-desc{margin:18px 0 0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.82);max-width:40ch}
.sla-store-t{margin:0 0 10px;font-weight:700;font-size:14px;color:rgba(255,255,255,.92)}
.sla-badges{display:flex;gap:10px;flex-wrap:wrap}
.sla-brand .sla-badges a[href]{display:inline-block !important;line-height:0}
/* card (mirrors the app's white bottom sheet) */
.sla-card{padding:32px 36px 30px;display:flex;flex-direction:column;background:#fff;color:#15151a}
[dir=rtl] .sla-card{text-align:right}
.sla-eyebrow{margin:0 0 2px;color:#8a8a96;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sla-h1{margin:0 0 16px;font-size:28px}
/* tabs — radio-driven, works without JS */
.sla-tsel{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sla-tabs{display:flex;gap:6px;border-bottom:1px solid #e6e6ea;margin-bottom:20px}
.sla-card .sla-tabs label.sla-tab{flex:1;text-align:center;padding:10px 4px 11px;margin-bottom:-1px;
  font-weight:700;font-size:14.5px;color:#15151a;cursor:pointer;border-bottom:3px solid transparent;user-select:none}
.sla-tsel-email:checked~.sla-tabs .sla-tab-email,
.sla-tsel-wa:checked~.sla-tabs .sla-tab-wa{color:#c2253a;border-bottom-color:#c2253a}
.sla-pane{display:none;flex-direction:column}
.sla-tsel-email:checked~.sla-pane-email{display:flex}
.sla-tsel-wa:checked~.sla-pane-wa{display:flex}
/* the stub generator emits its own "Email Address" label — the app uses question
   headings instead, so hide the generated one (checkbox label is nested deeper, safe) */
.sla-pane-email>.form__label{display:none}
.sla-q{font-weight:800;font-size:16px;margin:2px 0 8px;color:#15151a}
.sla-pane .form__input,.sla-pane .form__select{width:100%}
/* password + eye toggle (app parity) */
.sla-pw{position:relative;display:block}
.sla-pw input{width:100%;padding-inline-end:44px !important}
.sla-card .sla-pw button.sla-eye{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:6px;
  width:34px;height:34px;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:8px !important;
  background:transparent !important;color:#8a8a96;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.sla-card .sla-pw button.sla-eye:hover{color:#15151a}
.sla-eye .sla-eye-shut{display:none}
.sla-eye.is-on .sla-eye-open{display:none}
.sla-eye.is-on .sla-eye-shut{display:block}
/* one visible Remember-me row (the inactive tab's copy is hidden with its pane).
   min/?g=css-site loads AFTER _brand.css and absolutely-positions .form__input--checkbox
   and gives the label width:91%/margin-left:9% !important — neutralise all of it at
   higher specificity. order: swaps the stub's label-then-checkbox source order. */
.sla-remember{margin:14px 0 2px}
.sla-remember .form__checkbox{display:flex !important;align-items:center;gap:8px;padding:0 !important;position:static !important}
.sla-remember .form__label--checkbox{order:2;display:inline !important;width:auto !important;
  margin:0 !important;padding:0 !important;position:static !important;
  font-weight:600 !important;font-size:14px !important;line-height:1.4 !important;color:#15151a;cursor:pointer}
.sla-remember input.form__input--checkbox{order:1;flex:0 0 auto;position:static !important;top:auto !important;
  width:18px !important;height:18px !important;margin:0 !important;appearance:auto !important;-webkit-appearance:checkbox !important;
  border:0 !important;background:transparent !important;accent-color:#c2253a;cursor:pointer}
/* labelled dial-code + number */
.sla-warow{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px}
.sla-mini{display:block;font-size:12px;font-weight:700;color:#8a8a96;margin:0 0 6px}
/* primary action — red, full width, one per pane (app parity) */
.sla-card input[type=submit].sla-btn-primary{width:100%;margin-top:18px;min-height:48px;border:0;
  background:#c2253a !important;color:#fff !important;border-radius:12px !important;
  font-weight:800 !important;font-size:16px;cursor:pointer}
.sla-card input[type=submit].sla-btn-primary:hover{background:#a81d30 !important}
/* trouble + reset (centered, app parity). (0,3,1)+ so the global
   a[href*="supplier"] hide can never swallow these links */
.sla-trouble{text-align:center;margin:20px 0 4px}
.sla-trouble-q{margin:0 0 2px;font-size:14px;color:#15151a}
/* the Stage-1 unhide (body.supplierpage #maincontent a[href]{display:revert !important})
   carries an ID, so these two need equal specificity + later position to keep their display */
body.supplierpage #maincontent a.sla-reset[href]{display:inline-block !important;color:#c2253a !important;
  font-weight:800;font-size:14.5px;text-decoration:none}
body.supplierpage #maincontent a.sla-reset[href]:hover{text-decoration:underline}
/* outlined register button (the app's outlined sign-up button) */
body.supplierpage #maincontent a.sla-signup[href]{display:inline-flex !important;align-items:center;justify-content:center;
  width:100%;min-height:48px;margin-top:14px;border:2px solid #c2253a;border-radius:12px;
  color:#c2253a !important;font-weight:800;font-size:15px;text-decoration:none;background:#fff}
body.supplierpage #maincontent a.sla-signup[href]:hover{background:#fdf2f4}
/* messages */
.sla-msg .warning{margin:0}
/* responsive — stack like the app (brand on top, sheet below) */
@media(max-width:991.98px){
  .sla-grid{grid-template-columns:minmax(0,1fr)}
  .sla-brand{padding:26px 22px;gap:20px}
  .sla-logo{height:34px !important;margin-bottom:12px}
  .sla-taglines span{font-size:19px}
  .sla-desc{display:none}
  .sla-card{padding:24px 18px 24px}
  .sla-warow{grid-template-columns:130px minmax(0,1fr)}
}
/* ===== end v2sup-login ===== */

/* ===== v2sup-chrome : logged-in supplier pages keep the legacy bootstrap navbar. Its logo
   ships at 270x64 and sits flush against the window edge, which reads as broken next to the
   reskinned auth pages. Pin it to the same 34px as the v2 header and centre the bar on the
   same 1240px column the rest of the page uses. ===== */
body.customerpage header .navbar-container-fluid{max-width:1240px;margin-left:auto;margin-right:auto;
  padding-left:18px;padding-right:18px}
body.customerpage header .navbar-brand{max-width:none !important}
body.customerpage header .navbar-brand img{height:34px !important;width:auto !important;max-width:170px !important}
body.customerpage header{background:#fff;box-shadow:0 6px 22px rgba(20,20,30,.07)}
body.customerpage header .navbar{padding-top:12px;padding-bottom:12px}
/* The sub-menu carries eight items; boxing it to 1240px made them wrap onto two lines. */
body.customerpage .sub-menu{max-width:none;padding-left:18px;padding-right:18px}
body.customerpage .sub-menu .nav{flex-wrap:nowrap;overflow-x:auto}
body.customerpage .sub-menu .nav-link{white-space:nowrap}
/* Stage 2 opened partsrequestview, so the per-row action is a real destination again. */
body.supplierpage #maincontent a.requests--items-row_link[href*="partsrequest/view"]{
  display:inline-block !important;background:var(--d-red,#c2253a);color:#fff !important;
  border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;text-decoration:none}
/* The trailing column carries the row action again now that stage 2 is open. */
/* The framework prints an empty .text-danger placeholder under the filter, which renders
   as a stray full stop above "Clear this filter". */
body.supplierpage #maincontent .hero-seach-section > .text-danger:empty,
body.supplierpage #maincontent .hero-seach-section > .text-danger{min-height:0;font-size:0}
/* ===== end v2sup-chrome ===== */

/* ===== v2sup-stage2 : the stage-2 pages ship the legacy "Need Help Finding a Part?"
   band inside the page body, and the shared v2 tail adds its own help strip - so the
   reviewer saw the same offer twice. Keep the v2 one. ===== */
body.supplierpage section.need-help-section{display:none !important}
/* Row actions in the framework tables are bare links; give them the same pill the
   parts-request rows use so "View" reads as a button. */
body.supplierpage #maincontent td a[href*="/part/view/"],
body.supplierpage #maincontent td a[href*="/part/edit/"],
body.supplierpage #maincontent td a[href*="/commercialpart/view/"],
body.supplierpage #maincontent td a[href*="/commercialpartsrequest/view/"]{
  display:inline-block !important;background:var(--d-red,#c2253a);color:#fff !important;
  border-radius:8px;padding:6px 14px;font-size:12.5px;font-weight:700;text-decoration:none}
/* The framework reserves a tall empty block under short tables. */
body.supplierpage #maincontent{min-height:0 !important}
body.supplierpage .block--content{padding-bottom:8px}
/* ===== end v2sup-stage2 ===== */

/* ===== v2sup-quote : the quote screen rebuilt to mirror the supplier app's
   "Quote Request Details" screen. The framework emits one <table> (parts rows, then
   Additional / Guarantee / Condition / Delivery / VAT / Total). Nothing here changes the
   markup or a single field name - the table is taken out of table layout and regrouped
   into the app's card stack purely in CSS. ===== */
body.supplierpage #maincontent form.js-form__parts-request-item-response table,
body.supplierpage #maincontent form.js-form__parts-request-item-response thead,
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody,
body.supplierpage #maincontent form.js-form__parts-request-item-response tr,
body.supplierpage #maincontent form.js-form__parts-request-item-response td{
  display:block;border:0 !important;background:none;padding:0;width:auto}
body.supplierpage #maincontent form.js-form__parts-request-item-response thead{display:none}

body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr{
  display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody td:first-child{
  flex:1 1 auto;min-width:0;font-size:14.5px;font-weight:600;color:var(--d-text,#15151a)}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody td:last-child{
  flex:0 0 180px}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody td:last-child input{
  width:100% !important;text-align:end;font-weight:600}

/* the requested parts - the app groups them in a soft grey card */
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:not(:nth-last-child(-n+6)){
  background:#f1f2f4;border-radius:12px;margin-bottom:10px;align-items:flex-start;padding:16px}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:not(:nth-last-child(-n+6)) td:first-child{
  font-size:15.5px;font-weight:700;padding-top:8px}
body.supplierpage #maincontent .parts-selection__additional-notes{
  margin:6px 0 0;font-size:12.5px;font-weight:500;color:var(--d-red,#c2253a)}
body.supplierpage #maincontent .parts-selection__additional-notes em{font-style:normal;color:#5b5b66}

/* Additional charge -> VAT: one flush white card with dividers, like the app */
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:nth-last-child(-n+6):not(:last-child){
  border-bottom:1px solid var(--d-line,#e9e9ee) !important}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:nth-last-child(6){
  border-radius:12px 12px 0 0;margin-top:4px}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:nth-last-child(2){
  border-radius:0 0 12px 12px;border-bottom:0 !important}

/* Total - the app puts a hard 1px black border round it */
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:last-child{
  margin-top:14px;border:1px solid #15151a !important;border-radius:12px;padding:16px}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:last-child td:first-child{
  font-size:16px;font-weight:800}
body.supplierpage #maincontent form.js-form__parts-request-item-response tbody tr:last-child td:last-child input{
  font-size:17px;font-weight:800;border-color:transparent !important;background:#fafafb !important}

/* right-hand column: message / video / images */
body.supplierpage #maincontent form.js-form__parts-request-item-response .car-parts-card{
  background:#fff !important;border:1px solid var(--d-line,#e9e9ee) !important;border-radius:16px !important;
  box-shadow:0 6px 22px rgba(20,20,30,.05) !important}
body.supplierpage #maincontent form.js-form__parts-request-item-response .card-body{padding:18px !important}
body.supplierpage #maincontent form.js-form__parts-request-item-response .form__textarea{
  min-height:120px;border-radius:12px !important}
body.supplierpage #maincontent .be-medialibrary-filedrop,
body.supplierpage #maincontent .js-medialibrary-fileselector + *{border-radius:20px !important}

/* the submit button - full-width pill, like the app's Send Response */
body.supplierpage #maincontent form.js-form__parts-request-item-response input[type=submit]{
  border-radius:12px !important;padding:14px 20px !important;font-weight:800 !important;font-size:15px !important;
  background:var(--d-red,#c2253a) !important;border:0 !important;box-shadow:0 8px 20px rgba(194,37,58,.25)}

/* the dark request header + the chat pill the app shows above the form */
body.supplierpage #maincontent .supplier-request-header,
body.supplierpage #maincontent .bg-dark.section{border-radius:14px 14px 0 0}
/* the request header - the app shows it as one rounded card (dark title block +
   light contact strip), not a full-bleed band. */
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier{
  max-width:1240px;margin:0 auto 6px;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 26px rgba(20,20,30,.08)}
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier .bg-dark{padding:22px 24px !important}
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier h1{margin:2px 0 6px;font-size:30px}
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier .bg-light{padding:14px 24px !important}
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier .link-button--green{
  border-radius:999px;padding:9px 18px;font-weight:700}
/* the app's dashed image dropzone */
body.supplierpage #maincontent .be-medialibrary-wrapper{
  border:2px dashed var(--d-line,#d9d9e2) !important;border-radius:20px !important;background:#fbfbfc !important}
/* ===== end v2sup-quote ===== */

/* ===== v2sup-forms : the product / commercial-part forms. The framework puts the left
   column in a grey card and leaves the right column bare, and it emits an empty
   "Categories" block that renders as a large dead area. Match the app: two equal white
   cards, section headings, a full-width primary button. ===== */
body.supplierpage #maincontent form.form--with-tabs .car-parts-card{
  background:#fff !important;border:1px solid var(--d-line,#e9e9ee) !important;border-radius:16px !important;
  box-shadow:0 6px 22px rgba(20,20,30,.05) !important;margin:0 !important}
body.supplierpage #maincontent form.form--with-tabs .card-body{padding:22px !important}
/* give the bare right-hand column the same card */
body.supplierpage #maincontent form.form--with-tabs > .row > [class*="col-xl-5"]{
  background:#fff;border:1px solid var(--d-line,#e9e9ee);border-radius:16px;
  box-shadow:0 6px 22px rgba(20,20,30,.05);padding:22px;align-self:flex-start}
body.supplierpage #maincontent form.form--with-tabs > .row{align-items:flex-start;gap:22px;margin:0}
body.supplierpage #maincontent form.form--with-tabs .form__heading{
  font-size:15px;font-weight:800;margin:22px 0 10px;padding-top:16px;
  border-top:1px solid var(--d-line,#e9e9ee)}
/* the empty Categories block the renderer always emits */
body.supplierpage #maincontent form.form--with-tabs .form__area--flex:has(> p:empty){display:none}
body.supplierpage #maincontent form.form--with-tabs .form__heading:has(+ .form__area--flex > p:empty){display:none}
body.supplierpage #maincontent .form__multicheckboxheading:empty{display:none}
body.supplierpage #maincontent form.form--with-tabs label.form__label{
  display:block;font-size:12.5px;font-weight:700;color:#5b5b66;margin-bottom:6px}
body.supplierpage #maincontent form.form--with-tabs input[type=submit],
body.supplierpage #maincontent form.form--with-tabs button[type=submit]{
  width:100%;border-radius:12px !important;padding:14px 20px !important;font-weight:800 !important;
  background:var(--d-red,#c2253a) !important;border:0 !important;box-shadow:0 8px 20px rgba(194,37,58,.25)}
/* breadcrumb above the form */
body.supplierpage #maincontent h1 a.js-inherit-link{
  text-decoration:none;font-weight:600;color:var(--d-red,#c2253a) !important}
body.supplierpage #maincontent form.form--with-tabs .be-medialibrary-wrapper{
  border:2px dashed var(--d-line,#d9d9e2) !important;border-radius:20px !important;background:#fbfbfc !important}
@media(max-width:1199px){
  body.supplierpage #maincontent form.form--with-tabs > .row > [class*="col-xl-5"]{margin-top:18px}
}
/* trim the framework's dead vertical space around the supplier forms */
body.supplierpage #maincontent form.form--with-tabs > .row.mt-4,
body.supplierpage #maincontent form.form--with-tabs > .row.mt-xl-5{margin-top:14px !important}
body.supplierpage #maincontent .block--content{padding-top:18px}
body.supplierpage #maincontent > .container-fluid > .row:empty,
body.supplierpage #maincontent .js-form--parts-request__message:empty{display:none}
/* ===== end v2sup-forms ===== */

/* ===== v2q : per-item quote form (owner spec 2026-08-21). Bespoke markup from
   private_suppliers/includes/v2_quote_form.php - not the framework's table. ===== */
body.supplierpage #maincontent form.v2q{max-width:820px;margin:0 auto;display:block}
.v2q-head{margin:4px 0 18px}
.v2q-title{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.v2q-dash{color:#9a9aa6;font-weight:600}
.v2q-sub{margin:0;color:#6b6b78;font-size:14px}
.v2q-dot{color:#c2c2cc}

.v2q-card{background:#fff;border:1px solid #ececf1;border-radius:14px;padding:20px;margin-bottom:16px;
  box-shadow:0 4px 16px rgba(20,20,30,.04);transition:opacity .15s}
.v2q-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.v2q-card__name{font-size:16px;font-weight:700;line-height:1.35}
.v2q-num{color:#15151a}
/* 2026-09-01 (owner): the customer's note is the most important thing the supplier reads
   before pricing — it was plain grey text that disappeared into the card. Now a green box. */
.v2q-note{margin:10px 0 4px;font-size:13.5px;line-height:1.7;color:#14532d;
          background:#f0faf1;border:1px solid #b7e4c0;border-inline-start:4px solid #1f9d55;
          border-radius:10px;padding:10px 14px}
.v2q-note b{color:#0f7a3d;font-weight:800}

.v2q-skip{flex:0 0 auto;background:#fff;border:1px solid #d9d9e2;border-radius:9px;padding:10px 18px;
  font-size:14px;font-weight:600;color:#15151a;cursor:pointer;white-space:nowrap}
.v2q-skip:hover{border-color:#15151a}
.v2q-skip__off{display:none}
.v2q-card.is-skipped .v2q-skip__on{display:none}
.v2q-card.is-skipped .v2q-skip__off{display:inline}
.v2q-card.is-skipped{opacity:.55;background:#fafafb}
.v2q-card.is-skipped .v2q-fields{pointer-events:none}

.v2q-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.v2q-field{display:block;min-width:0}
.v2q-label{display:block;font-size:12.5px;color:#6b6b78;margin-bottom:6px}
.v2q-money{position:relative;display:block}
.v2q-money i{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:13px;color:#9a9aa6;pointer-events:none}
/* the head-bridge sets input padding with !important at the same specificity and lands
   later in the cascade, so the AED prefix needs a stronger selector than .v2q-money input */
body.supplierpage #maincontent form.v2q .v2q-money input.v2q-price{padding-inline-start:48px !important}
form.v2q input[type=text],form.v2q select,form.v2q textarea{width:100%;border:1px solid #d9d9e2;border-radius:10px;
  min-height:48px;padding:0 14px;font-size:15px;background:#fff;font-family:inherit;color:#15151a}
form.v2q select{appearance:auto;padding-inline-end:32px}
form.v2q input:focus,form.v2q select:focus,form.v2q textarea:focus{outline:2px solid rgba(194,37,58,.25);border-color:#c2253a}
.v2q-invalid{border-color:#c2253a !important;background:#fff6f7 !important}

.v2q-card__foot{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #ececf1}
.v2q-foot-label{font-size:14px;color:#6b6b78}
.v2q-item-total{margin-inline-start:auto;font-size:16px;font-weight:800}
.v2q-callprice,.v2q-unavailable{display:none;margin-inline-start:auto;font-size:13.5px;font-weight:700}
.v2q-callprice{color:#c2253a}
.v2q-unavailable{color:#8a8a96}
.v2q-card.is-callprice .v2q-item-total{display:none}
.v2q-card.is-callprice .v2q-callprice{display:inline}
.v2q-card.is-skipped .v2q-item-total,.v2q-card.is-skipped .v2q-callprice{display:none}
.v2q-card.is-skipped .v2q-unavailable{display:inline}

.v2q-total{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f7f7f9;
  border:1px solid #ececf1;border-radius:14px;padding:22px 24px;margin:22px 0 8px}
.v2q-total__label{font-size:15px;color:#4a4a56}
.v2q-total__value{font-size:26px;font-weight:800;letter-spacing:-.01em}
.v2q-hint{margin:0 0 20px;font-size:12.5px;color:#8a8a96}

.v2q-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed #d9d9e2;border-radius:14px;background:#fbfbfc;padding:28px 20px;margin-bottom:14px;cursor:pointer}
.v2q-drop input[type=file]{display:none}
.v2q-drop__icon{width:34px;height:34px;color:#8a8a96;display:flex;align-items:center;justify-content:center}
.v2q-drop__icon svg{width:34px;height:34px;display:block}
.v2q-drop:hover .v2q-drop__icon{color:#15151a}
.v2q-drop__text{font-size:14px;color:#8a8a96;text-align:center}
.v2q-message{min-height:96px;padding:14px !important;margin-bottom:16px;resize:vertical}

.v2q-send{width:100%;border:0;border-radius:12px;padding:17px 20px;font-size:16px;font-weight:800;
  background:#c2253a;color:#fff;cursor:pointer;box-shadow:0 8px 22px rgba(194,37,58,.25)}
.v2q-send:hover{background:#a81e31}
.v2q-send:disabled{background:#e3e3e9;color:#9a9aa6;box-shadow:none;cursor:not-allowed}
.v2q-blocked{display:none;margin:10px 0 0;text-align:center;font-size:13.5px;color:#c2253a}
form.v2q.is-empty .v2q-blocked{display:block}

@media(max-width:640px){
  .v2q-fields{grid-template-columns:minmax(0,1fr)}
  .v2q-card__top{flex-direction:column}
  .v2q-skip{align-self:flex-start}
  .v2q-total{flex-direction:column;align-items:flex-start;gap:6px}
}
/* contact block - the three ways to reach the customer, as in the owner's mockup */
.v2q-contact{background:#15151a;border-radius:14px;padding:18px;margin:0 0 20px}
.v2q-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.v2q-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#2c2c38;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;letter-spacing:.02em}
.v2q-who__text{display:flex;flex-direction:column;min-width:0}
.v2q-who__text b{color:#fff;font-size:15px;font-weight:700;line-height:1.3}
.v2q-who__text i{color:#a4a4b2;font-size:12.5px;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2q-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v2q-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-radius:12px;padding:14px 8px;font-size:13.5px;font-weight:700;text-decoration:none;color:#fff !important;
  min-height:64px;transition:filter .15s}
.v2q-act:hover{filter:brightness(1.08)}
.v2q-act__ico{font-size:19px;line-height:1}
.v2q-act--call{background:#c2253a}
.v2q-act--wa{background:#12833f}
.v2q-act--chat{background:#2aa9e0}
/* the global a[href*="supplier"] hide would swallow the chat button */
html body #maincontent form.v2q a.v2q-act[href]{display:flex !important}

/* second field row: delivery + extra charge, both optional */
.v2q-fields--extra{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}
.v2q-label em{font-style:normal;color:#9a9aa6;font-weight:400}
@media(max-width:640px){
  .v2q-fields--extra{grid-template-columns:minmax(0,1fr)}
  .v2q-actions{gap:8px}
  .v2q-act{font-size:12.5px;padding:12px 6px}
}
.v2q-act .v2q-svg{width:20px;height:20px;display:block}
/* the new contact block carries the customer's details and all three actions, so the
   legacy contact strip and the standalone chat pill above the form are duplicates now */
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier .bg-light{display:none !important}
html body.supplierpage #maincontent a[href*="chat.php?open_request"][href]{display:none !important}
body.supplierpage #maincontent .parts-request-summary-wrapper--supplier{margin-bottom:18px}
.v2q-videowrap{display:block;margin-bottom:14px}
.v2q-videowrap .v2q-label{margin-bottom:6px}
form.v2q input.v2q-video{width:100%}
/* ===== end v2q ===== */

/* ===== v2d : supplier dashboard "requests needing attention" (owner design 2026-08-23).
   Ref / Vehicle / Received / Status / action. The parts count and location ride on the
   vehicle line, the exact date-time under the friendly one - so nothing the old eight
   column table showed was lost. ===== */
body.supplierpage #maincontent .v2d{max-width:1100px;margin:0 auto}
.v2d-title{font-size:19px;font-weight:800;margin:0 0 14px;letter-spacing:-.01em}
.v2d-empty{color:#6b6b78;font-size:14.5px;margin:0}
.v2d-wrap{background:#fff;border:1px solid #ececf1;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 16px rgba(20,20,30,.04)}
table.v2d-table{width:100%;border-collapse:collapse;table-layout:auto;background:none}
.v2d-table thead th{text-align:start;font-size:12.5px;font-weight:600;color:#6b6b78;
  padding:14px 18px;border-bottom:1px solid #ececf1;white-space:nowrap;background:#fff}
.v2d-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v2d-table tbody td{padding:14px 18px;border-bottom:1px solid #f2f2f6;vertical-align:middle;background:none}
.v2d-table tbody tr:last-child td{border-bottom:0}
.v2d-row--overdue td{background:#fdeaec}
.v2d-row--pending td{background:#fff}
.v2d-row--responded td{background:#fff}
.v2d-ref{font-size:14px;font-weight:600;color:#15151a;white-space:nowrap}
.v2d-veh b{display:block;font-size:14.5px;font-weight:700;color:#15151a;line-height:1.35}
.v2d-meta{display:block;font-size:12.5px;color:#7a7a86;margin-top:3px}
.v2d-dot{color:#c2c2cc}
.v2d-media{display:inline-flex;align-items:center;gap:3px;vertical-align:middle;
           margin-inline-start:4px;color:#1f5fa8}
.v2d-media--video{color:#c2253a}
.v2d-media svg{width:15px;height:15px;display:block}
.v2d-media i{font-style:normal;font-size:11px;font-weight:700}
.v2d-when b{display:block;font-size:14px;font-weight:600;color:#15151a}
.v2d-exact{display:block;font-size:11.5px;color:#9a9aa6;margin-top:3px;white-space:nowrap}
.v2d-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 12px;
  font-size:12.5px;font-weight:700;white-space:nowrap}
.v2d-chip i{font-style:normal;font-size:12px;line-height:1}
.v2d-chip--overdue{background:transparent;color:#c2253a}
.v2d-chip--pending{background:#fdf0cd;color:#8a6100}
.v2d-chip--responded{background:#d6f5e0;color:#136c37}
.v2d-act{text-align:end;white-space:nowrap}
html body.supplierpage #maincontent a.v2d-btn[href]{display:inline-block !important;
  background:#fff;border:1px solid #d9d9e2;border-radius:9px;padding:8px 18px;font-size:13.5px;
  font-weight:600;color:#15151a !important;text-decoration:none}
html body.supplierpage #maincontent a.v2d-btn[href]:hover{border-color:#15151a}
html body.supplierpage #maincontent a.v2d-btn--primary[href]{border-color:#c2253a;color:#c2253a !important}
html body.supplierpage #maincontent a.v2d-btn--primary[href]:hover{background:#c2253a;color:#fff !important}
/* the sort dropdown was clipping "Newest to Oldest" at 114px */
body.supplierpage #maincontent select[name="OrderBy"]{min-width:196px}
@media(max-width:820px){
  .v2d-table thead{display:none}
  .v2d-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:14px 16px;
    border-bottom:1px solid #f2f2f6}
  .v2d-table tbody td{display:block;padding:0;border:0}
  .v2d-ref{grid-column:1;font-size:12.5px;color:#7a7a86}
  .v2d-act{grid-column:2;grid-row:1 / span 2;align-self:center}
  .v2d-veh{grid-column:1}
  .v2d-when,.v2d-table tbody td:nth-child(4){grid-column:1}
  .v2d-when{margin-top:6px}
  body.supplierpage #maincontent select[name="OrderBy"]{min-width:0}
}
/* the framework zebra-stripes tbody rows; the state colour has to outrank it */
body.supplierpage #maincontent table.v2d-table tbody tr.v2d-row--overdue td{background:#fdeaec !important}
body.supplierpage #maincontent table.v2d-table tbody tr.v2d-row--pending td,
body.supplierpage #maincontent table.v2d-table tbody tr.v2d-row--responded td{background:#fff !important}
.v2d-chip .v2d-svg{width:13px;height:13px;display:block}
/* ===== end v2d ===== */

/* ===== v2h : shared v2 header for the supplier area (2026-08-23). Replaces the legacy
   two-row bootstrap navbar on all 14 supplier pages. One include, one look, signed in or
   out. ===== */

/* FIRST, and not optional: the theme hides a[href*="supplier"] / a[href*="customer"] at
   (0,1,1), and every link in this header matches. Without this the nav renders empty. */
html body .v2h a[href]{display:inline-flex !important;align-items:center}
html body .v2h .v2h-logo[href]{display:inline-block !important}
html body .v2h .v2h-sub a[href]{display:inline-flex !important}

.v2h{position:sticky;top:0;z-index:300;background:#fff;box-shadow:0 6px 22px rgba(20,20,30,.07)}
.v2h-bar{max-width:1240px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:22px}
.v2h-logo img{height:32px;width:auto;display:block}
.v2h-main{display:flex;align-items:center;gap:22px;flex:1 1 auto;min-width:0}
.v2h-main a{font-size:14.5px;font-weight:500;color:var(--d-text,#15151a) !important;text-decoration:none;white-space:nowrap}
.v2h-main a:hover{color:var(--d-red,#c2253a) !important}
.v2h-right{display:flex;align-items:center;gap:12px;flex:0 0 auto}

.v2h-lang{display:flex;align-items:center;background:#15151a;border-radius:999px;padding:3px}
.v2h-lang .opt{font-size:12.5px;font-weight:600;color:#a9a9b6 !important;padding:5px 11px;border-radius:999px;text-decoration:none}
.v2h-lang .opt.is-on{background:#fff;color:#15151a !important}

.v2h-btn{border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.v2h-btn--ghost{background:#fff;border:1.5px solid var(--d-line,#e0e0e8);color:var(--d-text,#15151a) !important}
.v2h-btn--ghost:hover{border-color:#15151a}
.v2h-btn--solid{background:var(--d-red,#c2253a);border:1.5px solid var(--d-red,#c2253a);color:#fff !important}

.v2h-acct{position:relative}
.v2h-acct__btn{display:flex;align-items:center;gap:8px;background:#f4f4f7;border:0;border-radius:999px;
  padding:9px 16px;font-size:13.5px;font-weight:600;color:#15151a;cursor:pointer;font-family:inherit}
.v2h-acct__ico{font-size:9px;color:#8a8a96}
.v2h-acct__menu{display:none;position:absolute;inset-inline-end:0;top:calc(100% + 10px);min-width:230px;
  background:#fff;border:1px solid var(--d-line,#ececf1);border-radius:14px;padding:10px;
  box-shadow:0 18px 40px rgba(20,20,30,.14)}
.v2h-acct.is-open .v2h-acct__menu{display:block}
.v2h-acct__menu p{margin:0}
html body .v2h .v2h-acct__menu a[href]{display:block !important;padding:9px 12px;border-radius:9px;
  font-size:13.5px;color:var(--d-text,#15151a) !important;text-decoration:none}
html body .v2h .v2h-acct__menu a[href]:hover{background:#f4f4f7}

/* the supplier menu strip - the markup comes from GetLoggedInSupplierMenu, stage-filtered */
.v2h-sub{background:#f6f6f9;border-top:1px solid var(--d-line,#ececf1)}
.v2h-sub__inner{max-width:1240px;margin:0 auto;padding:0 18px}
.v2h-sub ul{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;overflow-x:auto;
  scrollbar-width:none}
.v2h-sub ul::-webkit-scrollbar{display:none}
.v2h-sub li{list-style:none}
html body .v2h .v2h-sub a[href]{padding:13px 15px;font-size:14px;font-weight:600;white-space:nowrap;
  color:#4a4a56 !important;text-decoration:none;border-bottom:3px solid transparent}
html body .v2h .v2h-sub a[href]:hover{color:#15151a !important}
html body .v2h .v2h-sub a.selected[href]{color:var(--d-red,#c2253a) !important;border-bottom-color:var(--d-red,#c2253a)}

.v2h-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;padding:8px;cursor:pointer}
.v2h-burger span{display:block;width:20px;height:2px;background:#15151a;border-radius:2px}

@media(max-width:1100px){
  .v2h-main{display:none}
  .v2h-burger{display:flex}
  .v2h.is-open .v2h-main{display:flex;position:absolute;inset-inline:0;top:100%;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;padding:8px 18px 14px;
    box-shadow:0 18px 34px rgba(20,20,30,.12)}
  .v2h.is-open .v2h-main a{padding:11px 0;width:100%}
}
@media(max-width:700px){
  .v2h-bar{gap:12px;padding:12px 14px}
  .v2h-btn{padding:8px 13px;font-size:12.5px}
  .v2h-lang .opt{padding:4px 8px;font-size:11.5px}
  .v2h-sub__inner{padding:0 14px}
}
/* ===== end v2h ===== */

/* ===== v2stat : the flat grey summary strip rebuilt as stat cards. Markup untouched -
   the framework emits .supplier-wrapper_request-summary-item with two <p>. ===== */
body.supplierpage #maincontent section.bg-light.section{background:transparent !important;padding:0 !important}
body.supplierpage #maincontent .supplier-wrapper_request-summary{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;
  max-width:1240px;margin:0 auto 22px;padding:0 !important}
body.supplierpage #maincontent .supplier-wrapper_request-summary-item{
  background:#fff;border:1px solid var(--d-line,#ececf1);border-radius:14px;padding:18px 20px;
  box-shadow:0 4px 16px rgba(20,20,30,.04);display:flex;flex-direction:column;gap:6px;min-width:0}
body.supplierpage #maincontent .supplier-wrapper_request-summary-item p{margin:0}
body.supplierpage #maincontent .supplier-wrapper_request-summary-item p:first-child{
  font-size:12.5px;font-weight:600;color:#7a7a86;line-height:1.35}
body.supplierpage #maincontent .supplier-wrapper_request-summary-item p:last-child span{
  font-size:26px;font-weight:800;color:#15151a;letter-spacing:-.01em;line-height:1.1}

/* the page heading + the filter card above it */
body.supplierpage #maincontent .hero-section h1{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 16px}
body.supplierpage #maincontent .hero-section{padding-top:26px !important;padding-bottom:0 !important;background:transparent !important}
body.supplierpage #maincontent .hero-seach-section{
  background:#fff;border:1px solid var(--d-line,#ececf1);border-radius:14px;padding:16px 18px;
  box-shadow:0 4px 16px rgba(20,20,30,.04);max-width:1240px;margin:0 auto 18px}
body.supplierpage #maincontent section.body-container,
body.supplierpage #maincontent .segment--supplier_dark{background:transparent !important;
  border:0 !important;box-shadow:none !important;padding:0 !important}
@media(max-width:900px){
  body.supplierpage #maincontent .supplier-wrapper_request-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  body.supplierpage #maincontent .supplier-wrapper_request-summary{grid-template-columns:minmax(0,1fr)}
}
/* ===== end v2stat ===== */

/* ===== v2-mobile-fixes : no scrolling of any kind.
   1) PRE-EXISTING: the footer car-make list sat at left:-109px and made every v2 page
      scroll sideways on phones (521px wide on a 412px screen).
   2) The 3-step section keeps the mockup's three-across layout on phones and simply
      scales down, so the whole thing sits in one screen with no swipe. ===== */
@media(max-width:860px){
  .d-foot-makes-list{columns:1 !important;column-gap:0 !important}
  .d-foot-makes{width:100%;max-width:100%;overflow:hidden}
}
html,body{overflow-x:hidden}
@media(max-width:980px){
  .hr-wrap{padding:16px 6px}
  .hr-cards{display:grid !important;grid-template-columns:repeat(3,1fr) !important;max-width:none !important;
    gap:5px;overflow:visible !important}
  .hr-card{padding:14px 6px 10px;border-radius:11px}
  .hr-num{width:20px;height:20px;font-size:10px;top:-9px;inset-inline-start:6px}
  .hr-title{font-size:10.5px;margin-bottom:4px;line-height:1.3}
  .hr-sub{font-size:7.5px;line-height:1.55;margin-bottom:8px}
  .hr-sub--accent{font-size:8px}
  .hr-i{width:10px;height:10px}
  .hr-stage{padding:8px 0 4px}
  .hr-blob{height:96px}
  .hr-field{gap:3px;margin-bottom:4px}
  .hr-field__box{padding:4px 5px;font-size:7.5px;border-radius:5px}
  .hr-chev{font-size:7px}
  .hr-search{padding:5px;font-size:8.5px;border-radius:6px;gap:4px}
  .hr-hand{width:20px;height:20px}
  .hr-hand-wrap{top:12px;inset-inline-end:-6px}
  .hr-feats{gap:3px;margin-top:9px}
  .hr-feat{font-size:6.5px;gap:3px}
  .hr-feat__ico{width:20px;height:20px}
  .hr-panel{padding:6px;border-radius:8px}
  .hr-panel__head{padding:2px 2px 6px;margin-bottom:5px;gap:5px}
  .hr-bars i{height:4px}
  .hr-bars{gap:3px}
  .hr-qrow,.hr-srow{padding:4px 5px;margin-bottom:4px;gap:4px;border-radius:6px}
  .hr-bld{width:12px;height:12px}
  .hr-price b{font-size:9px}
  .hr-price em,.hr-city,.hr-vat{font-size:6.5px}
  .hr-pin{width:7px;height:7px}
  .hr-cta{padding:5px;font-size:8px;border-radius:6px}
  .hr-bullets{gap:5px;margin-top:9px}
  .hr-bullets li{font-size:7.5px;gap:4px}
  .hr-ck{width:11px;height:11px}
  .hr-sinfo b{font-size:7.5px}
  .hr-meta{font-size:6.5px;gap:2px}
  .hr-meta .hr-i{width:7px;height:7px}
  .hr-dot{width:4px;height:4px}
  .hr-warn{padding:6px;gap:5px;margin-top:7px;border-radius:7px}
  .hr-warn__ico{width:18px;height:18px}
  .hr-warn b{font-size:8px}
  .hr-warn>span{font-size:6.5px;line-height:1.5}
  .hr-chan-head{font-size:7.5px;margin:9px 0 6px;padding-top:7px}
  .hr-chans{gap:3px}
  .hr-chan__ico{width:20px;height:20px}
  .hr-chan__t{font-size:6.5px}
  .hr-chan__s{font-size:5.5px}
  .hr-c3foot{font-size:6.5px;margin-top:8px;gap:4px}
  .hr-areas{margin-top:7px;padding:6px 8px;gap:5px}
  .hr-areas__h{font-size:8px}
  .hr-area{font-size:7.5px;padding:3px 6px;border-radius:5px}
  .hr-note{margin-top:5px;padding:6px 8px;gap:6px}
  .hr-note p{font-size:7px;line-height:1.55}
  .hr-badges{gap:8px}
  .hr-badge{font-size:7px;gap:3px}
  .hr-badge .hr-i{width:9px;height:9px}
}
/* ===== end v2-mobile-fixes ===== */



/* ===== v2m : supplier "My Performance". Every rule is scoped to .v2m / .v2m-page, so
   nothing here can reach another supplier screen. Built 2026-08-23 from the owner's
   mockup — the whole page is v2 markup, no framework renderer underneath it. ===== */

/* MANDATORY FIRST RULE. The theme hides a[href*="supplier"] at (0,1,1) and the blanket
   supplier-area unhide is scoped to #maincontent only — every link in here matches that
   hide, so without this the brand tabs and the warning buttons render as empty space. */
html body .v2m a[href],
html body .v2m-page a[href]{display:inline-flex !important;align-items:center}

.v2m-page{max-width:1180px;margin:0 auto;padding:8px 0 48px}
.v2m-pagehead{margin:4px 0 20px}
.v2m-pagehead h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px;color:#15151a}
.v2m-pagehead p{margin:0;font-size:13px;color:#8a8a96}
.v2m-h2{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#15151a;margin:30px 0 12px}
.v2m-empty{margin:0;color:#6b6b78;font-size:14.5px}

.v2m-card{background:#fff;border:1px solid #ececf1;border-radius:16px;padding:20px 22px;
          box-shadow:0 6px 22px rgba(20,20,30,.05)}
.v2m-card-note{margin:0 0 16px;font-size:13px;color:#7a7a86;line-height:1.6}

.v2m-demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;padding:12px 14px;
         border:1px dashed #c9c9d6;border-radius:14px;background:#fafafd}
.v2m-demo-tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
              color:#6b6b78;background:#eceCf2;border-radius:6px;padding:3px 8px}
html body .v2m a.v2m-demo-btn[href]{display:inline-flex !important;padding:8px 14px;border-radius:10px;
    border:1px solid #dcdce6;background:#fff;color:#15151a !important;font-size:13px;font-weight:700;
    text-decoration:none}
html body .v2m a.v2m-demo-btn.is-on[href]{background:#15151a;border-color:#15151a;color:#fff !important}
.v2m-demo-note{flex:1 1 100%;font-size:11.5px;color:#8a8a96;line-height:1.5}

/* ---- brand tabs. Ranking is per brand, so the page must say which one it is showing ---- */
.v2m-brands{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.v2m-brands>span{font-size:12px;font-weight:700;color:#8a8a96;text-transform:uppercase;letter-spacing:.06em}
html body .v2m a.v2m-brand[href]{display:inline-flex !important;padding:7px 15px;border-radius:999px;
    border:1px solid #e2e2ea;background:#fff;color:#4a4a58 !important;font-size:13.5px;font-weight:600;
    text-decoration:none;transition:border-color .15s,color .15s}
html body .v2m a.v2m-brand[href]:hover{border-color:#15151a;color:#15151a !important}
html body .v2m a.v2m-brand.is-on[href]{background:#15151a;border-color:#15151a;color:#fff !important}

/* ---- the ranking banner (the block the owner circled) ---- */
.v2m-rank{background:#fff;border:1px solid #ececf1;border-radius:20px;overflow:hidden;
          box-shadow:0 10px 30px rgba(20,20,30,.06)}
.v2m-rank-top{display:flex;align-items:center;gap:22px;padding:22px 24px}
.v2m-score{direction:ltr;flex:0 0 auto;width:78px;height:78px;border-radius:50%;display:flex;align-items:baseline;
           justify-content:center;gap:1px;background:#eef0f4;color:#15151a}
.v2m-score b{font-size:30px;font-weight:800;line-height:78px}
.v2m-score span{font-size:11px;font-weight:600;color:#8a8a96;align-self:center;margin-top:8px}
.v2m-rank--excellent .v2m-score{background:#dcf3e6;color:#0f7a4d}
.v2m-rank--good .v2m-score{background:#e4f1ff;color:#1f5fa8}
.v2m-rank--average .v2m-score{background:#fdf0cd;color:#8a6100}
.v2m-rank--needs_improvement .v2m-score{background:#fdeaec;color:#c2253a}

.v2m-rank-head{flex:1 1 auto;min-width:0}
.v2m-rank-head h2{font-size:19px;font-weight:800;margin:0 0 3px;color:#15151a;letter-spacing:-.01em}
.v2m-rank-head p{margin:0 0 8px;font-size:13.5px;color:#7a7a86}
.v2m-band{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700}
.v2m-band--excellent{background:#dcf3e6;color:#0f7a4d}
.v2m-band--good{background:#e4f1ff;color:#1f5fa8}
.v2m-band--average{background:#fdf0cd;color:#8a6100}
.v2m-band--needs_improvement{background:#fdeaec;color:#c2253a}
.v2m-band--no_data{background:#f0f0f4;color:#6b6b78}

.v2m-rank-pos{flex:0 0 auto;text-align:end}
.v2m-rank-pos>b{display:block;font-size:28px;font-weight:800;color:#15151a;line-height:1.1}
.v2m-rank-pos>span{display:block;font-size:12.5px;color:#8a8a96;margin-top:1px}
.v2m-move{display:inline-block;font-style:normal;font-size:12px;font-weight:700;margin-top:6px}
.v2m-move--up{color:#0f7a4d}
.v2m-move--down{color:#c2253a}
.v2m-move--same,.v2m-move--new{color:#8a8a96}

/* the warning itself — it sits INSIDE the banner, which is what was asked for */
.v2m-alert{display:flex;gap:14px;align-items:flex-start;padding:18px 24px;border-top:1px solid #f0f0f4}
.v2m-alert--danger{background:#fdeaec;border-top-color:#f6d0d6}
.v2m-alert--warn{background:#fdf6e3;border-top-color:#f2e4bd}
.v2m-alert--good{background:#eefaf3;border-top-color:#d5f0e0}
.v2m-alert--info{background:#f4f7fb;border-top-color:#e2e9f2}
.v2m-alert-icon{flex:0 0 auto;width:24px;height:24px;margin-top:1px}
.v2m-alert-icon svg{width:24px;height:24px;display:block}
.v2m-alert--danger .v2m-alert-icon{color:#c2253a}
.v2m-alert--warn .v2m-alert-icon{color:#a37500}
.v2m-alert--good .v2m-alert-icon{color:#0f7a4d}
.v2m-alert--info .v2m-alert-icon{color:#3a6ea5}
.v2m-alert-text{min-width:0}
.v2m-alert-text b{display:block;font-size:15.5px;font-weight:800;line-height:1.4;margin-bottom:4px;color:#15151a}
.v2m-alert--danger .v2m-alert-text b{color:#96182c}
.v2m-alert-text p{margin:0;font-size:13.5px;line-height:1.7;color:#4a4a58}
.v2m-alert-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
html body .v2m a.v2m-act[href]{display:inline-flex !important;padding:8px 16px;border-radius:10px;
    font-size:13px;font-weight:700;text-decoration:none;border:1px solid #d9d9e2;
    background:#fff;color:#15151a !important}
html body .v2m a.v2m-act[href]:hover{border-color:#15151a}
html body .v2m a.v2m-act--primary[href]{background:#c2253a;border-color:#c2253a;color:#fff !important}
html body .v2m a.v2m-act--primary[href]:hover{background:#a11d2f;border-color:#a11d2f}

/* ---- stat grids ---- */
.v2m-grid{display:grid;gap:12px;margin-top:14px}
.v2m-grid--4{grid-template-columns:repeat(4,1fr)}
.v2m-grid--3{grid-template-columns:repeat(3,1fr)}
.v2m-stat{background:#fff;border:1px solid #ececf1;border-radius:16px;padding:16px 18px;
          box-shadow:0 6px 22px rgba(20,20,30,.04)}
.v2m-stat-label{display:block;font-size:12.5px;font-weight:600;color:#7a7a86;margin-bottom:6px}
.v2m-stat-value{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;color:#15151a;line-height:1.15}
.v2m-of{font-size:15px;font-weight:600;color:#9a9aa6}
.v2m-stat-foot{display:block;font-size:12px;font-weight:600;color:#8a8a96;margin-top:6px}
.v2m-stat-foot.is-excellent{color:#0f7a4d}
.v2m-stat-foot.is-good{color:#1f5fa8}
.v2m-stat-foot.is-average{color:#8a6100}
.v2m-stat-foot.is-needs_improvement{color:#c2253a}
.v2m-stat-foot.is-no_data{color:#9a9aa6}

.v2m-grid--2{grid-template-columns:repeat(2,1fr)}
.v2m-grid--tight{margin-top:0;gap:10px}
.v2m-report{padding:6px 22px 18px}
.v2m-report-row{padding:14px 0;border-bottom:1px solid #f2f2f6}
.v2m-report-row:last-child{border-bottom:0;padding-bottom:2px}
.v2m-report-head{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
                 text-transform:uppercase;color:#8a8a96;margin-bottom:10px}
.v2m-report .v2m-stat{box-shadow:none;background:#fafafc}

/* ---- customer contact ---- */
.v2m-touch{background:#fff;border:1px solid #ececf1;border-radius:16px;padding:20px;text-align:center;
           box-shadow:0 6px 22px rgba(20,20,30,.04)}
.v2m-touch-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
               border-radius:50%;margin-bottom:10px}
.v2m-touch-ico svg{width:22px;height:22px}
.v2m-touch--chat .v2m-touch-ico{background:#e4f1ff;color:#1f5fa8}
.v2m-touch--wa .v2m-touch-ico{background:#dcf3e6;color:#0f7a4d}
.v2m-touch--call .v2m-touch-ico{background:#fdf0cd;color:#8a6100}
.v2m-touch b{display:block;font-size:28px;font-weight:800;color:#15151a;line-height:1.15}
.v2m-touch>span:last-child{display:block;font-size:13px;color:#7a7a86;margin-top:3px}

.v2m-contact{padding:16px 18px}
.v2m-contact .v2m-touch{background:#fafafc;box-shadow:none;padding:16px 12px}
.v2m-contact .v2m-touch b{display:block;font-size:26px;font-weight:800;color:#15151a;line-height:1.15}
.v2m-contact .v2m-touch>span{display:block;font-size:12.5px;color:#7a7a86;margin-top:3px}
.v2m-channels{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid #f2f2f6}
.v2m-chan{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#4a4a58}
.v2m-chan b{font-weight:800;color:#15151a}
.v2m-chan i{width:9px;height:9px;border-radius:50%;display:inline-block}
.v2m-chan--wa i{background:#17a463}
.v2m-chan--call i{background:#c2253a}
.v2m-chan--chat i{background:#1f4f8a}

/* ---- bars ---- */
.v2m-bar{display:grid;grid-template-columns:210px 1fr 108px;align-items:center;gap:16px;
         padding:12px 0;border-bottom:1px solid #f4f4f8}
.v2m-card .v2m-bar:last-child{border-bottom:0;padding-bottom:2px}
.v2m-bar-label b{display:block;font-size:14px;font-weight:700;color:#15151a;line-height:1.35}
.v2m-bar-label span{display:block;font-size:11.5px;color:#9a9aa6;margin-top:2px;line-height:1.45}
.v2m-weight{display:inline-block;font-style:normal;font-size:11px;font-weight:700;color:#6b6b78;
            background:#f0f0f4;border-radius:6px;padding:1px 6px;margin-inline-start:6px;vertical-align:middle}
.v2m-bar-track{height:10px;border-radius:999px;background:#eef0f4;overflow:hidden}
.v2m-bar-track i{display:block;height:100%;border-radius:999px;background:#9a9aa6;transition:width .3s}
.v2m-bar--excellent .v2m-bar-track i{background:#17a463}
.v2m-bar--good .v2m-bar-track i{background:#3d9a5b}
.v2m-bar--average .v2m-bar-track i{background:#e0a800}
.v2m-bar--needs_improvement .v2m-bar-track i{background:#d9384f}
.v2m-bar--no_data .v2m-bar-track i{background:#d5d5de}
.v2m-bar-value{text-align:end;white-space:nowrap}
.v2m-bar-value b{font-size:16px;font-weight:800;color:#15151a}
.v2m-bar-value span{font-size:12px;color:#9a9aa6;margin-inline-start:2px}
.v2m-nodata{font-size:12px;color:#9a9aa6}

/* ---- the requests table is the dashboard's, reused verbatim ---- */
.v2m-requests{margin-top:30px}
.v2m-requests .v2d-title{font-size:17px;font-weight:800;margin:0 0 12px;color:#15151a}

@media (max-width:1040px){
  .v2m-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .v2m-page{padding:4px 0 36px}
  .v2m-pagehead h1{font-size:24px}
  .v2m-rank-top{flex-wrap:wrap;gap:16px;padding:18px}
  .v2m-score{width:62px;height:62px}
  .v2m-score b{font-size:24px;line-height:62px}
  .v2m-rank-head{flex:1 1 60%}
  .v2m-rank-pos{flex:1 1 100%;text-align:start;border-top:1px solid #f2f2f6;padding-top:12px}
  .v2m-alert{padding:16px 18px}
  .v2m-grid--3,.v2m-grid--4{grid-template-columns:1fr 1fr}
  .v2m-bar{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .v2m-bar-value{text-align:start}
}
@media (max-width:430px){
  .v2m-grid--3,.v2m-grid--4{grid-template-columns:1fr}
}
/* ===== end v2m ===== */

/* ===== v2q price validation — owner's 2026-08-28 warning design ===== */
.v2q-price.v2q-invalid{border-color:#e02436 !important;background:#fff6f7 !important}
.v2q-err{display:block;margin-top:5px;font-size:12px;font-weight:600;color:#c2253a;line-height:1.5}
body.v2q-noscroll{overflow:hidden}

.v2q-modal{position:fixed;inset:0;z-index:99999;background:rgba(18,18,26,.6);
           display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
.v2q-warn{background:#fff;border-radius:22px;max-width:470px;width:100%;padding:30px 26px 26px;
          text-align:center;box-shadow:0 30px 80px rgba(18,18,26,.35);margin:auto}

.v2q-warn__tri{width:96px;height:96px;border-radius:50%;background:#fdecee;color:#e02436;
               display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.v2q-warn__tri svg{width:54px;height:54px}
.v2q-warn__h{margin:0 0 10px;font-size:34px;font-weight:800;color:#e02436;letter-spacing:-.01em;line-height:1.1}
.v2q-warn__lead{margin:0 0 6px;font-size:19px;font-weight:800;color:#15151a;line-height:1.4}
.v2q-warn__sub{margin:0 0 18px;font-size:15px;color:#4a4a58;line-height:1.5}

.v2q-warn__row{display:flex;gap:12px;align-items:flex-start;text-align:start;
               border-radius:14px;padding:14px 15px;margin-bottom:12px}
.v2q-warn__row p{margin:0;font-size:14px;line-height:1.65;color:#3a3a48}
.v2q-warn__bullet{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;
                  align-items:center;justify-content:center;font-size:14px;font-weight:800;line-height:1}
.v2q-warn__row--bad{background:#fdeef0}
.v2q-warn__bullet--x{background:#e02436;color:#fff}
.v2q-warn__row--bad b{color:#c2253a;font-weight:800}
.v2q-warn__row--note{background:#fdf6e4}
.v2q-warn__bullet--i{background:#f0a500;color:#fff}

.v2q-warn__row--help{background:#fff;border:1.5px solid #1f9d55;align-items:flex-start}
.v2q-warn__bullet--talk{width:40px;height:40px;background:transparent;color:#1f9d55}
.v2q-warn__bullet--talk svg{width:36px;height:36px}
.v2q-warn__helptext{min-width:0;flex:1 1 auto}
.v2q-warn__helptext b{display:block;font-size:15px;font-weight:800;color:#1f9d55;margin-bottom:2px}
.v2q-warn__helptext>span{display:block;font-size:14px;color:#3a3a48;line-height:1.6;margin-bottom:11px}
.v2q-warn__btns{display:flex;gap:0;border-radius:10px;overflow:hidden}
html body .v2q-warn a.v2q-wbtn[href]{display:flex !important;flex:1 1 0;min-width:0;
    flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:9px 4px;font-size:11px;font-weight:700;color:#fff !important;text-decoration:none;line-height:1.2}
.v2q-wbtn__ico svg{width:15px;height:15px;display:block}
.v2q-wbtn--call{background:#8f1d2b}
.v2q-wbtn--wa{background:#0f6b3a}
.v2q-wbtn--chat{background:#2ea8e0}

.v2q-warn__ack{display:flex;gap:11px;align-items:flex-start;text-align:start;
               border-top:1px solid #ececf1;padding:16px 2px 0;margin-top:4px}
.v2q-warn__cb{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:#e02436;cursor:pointer}
.v2q-warn__ack b{display:block;font-size:14px;font-weight:600;color:#15151a;line-height:1.5}
.v2q-warn__ack i{display:block;font-style:normal;font-size:12.5px;color:#8a8a96;margin-top:3px;line-height:1.5}

.v2q-warn__ok{width:100%;margin-top:16px;background:#e02436;color:#fff;border:0;border-radius:12px;
              padding:15px 20px;font-size:17px;font-weight:800;cursor:pointer;min-height:52px;
              transition:background .15s,opacity .15s}
.v2q-warn__ok:hover:not(:disabled){background:#c01d2d}
.v2q-warn__ok:disabled{background:#e6a3aa;cursor:not-allowed}

.v2q-servererr{background:#fdeaec;border:1px solid #f6d0d6;border-radius:14px;padding:16px 18px;margin:0 0 18px}
.v2q-servererr b{display:block;font-size:15px;font-weight:800;color:#96182c;margin-bottom:6px}
.v2q-servererr p{margin:0 0 8px;font-size:13.5px;line-height:1.7;color:#4a4a58}
.v2q-servererr__warn{background:#fdf6e3;border:1px solid #f2e4bd;border-radius:10px;
                     padding:10px 12px;font-size:13px !important;color:#8a6100 !important;margin:10px 0 0 !important}

@media (max-width:480px){
  .v2q-warn{padding:24px 18px 20px;border-radius:18px}
  .v2q-warn__tri{width:78px;height:78px}
  .v2q-warn__tri svg{width:44px;height:44px}
  .v2q-warn__h{font-size:28px}
  .v2q-warn__lead{font-size:17px}
}
/* ===== end v2q price validation ===== */


/* ===== v2m-home : the app's first-screen cards, on the supplier home page ===== */
.v2m-home{display:grid;gap:14px;margin:0 0 4px}
@media (min-width:900px){.v2m-home{grid-template-columns:1fr 1fr;align-items:start}
  .v2m-home__more{grid-column:1 / -1}}
.v2m-rr__h{font-size:17px;font-weight:800;color:#15151a;margin:0 0 14px;letter-spacing:-.01em}
.v2m-rr{background:#f4f4f7;border-color:#e8e8ef}
.v2m-rr__lead{padding-bottom:14px;border-bottom:1px solid #e2e2ea;margin-bottom:4px}
.v2m-rr__lead>span{display:block;font-size:14.5px;color:#3a3a48;margin-bottom:4px}
.v2m-rr__lead>b{display:block;font-size:17px;font-weight:800;color:#15151a}
.v2m-rr__lead>b em{font-style:normal;font-size:27px;color:#c2253a;margin-inline-start:4px}
.v2m-rr__lead>i{display:block;font-style:normal;font-size:12px;color:#8a8a96;margin-top:4px}
.v2m-rr__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
             padding:12px 0;border-bottom:1px solid #e6e6ee}
.v2m-rr__row:last-child{border-bottom:0;padding-bottom:0}
.v2m-rr__row>span{font-size:14.5px;color:#3a3a48}
.v2m-rr__row>b{font-size:21px;font-weight:800;color:#15151a;letter-spacing:-.01em}
html body .v2m-home a[href]{display:inline-flex !important}
.v2m-home__more{margin:2px 0 0}
html body .v2m-home a[href]{font-size:13.5px;font-weight:700;color:#c2253a !important;text-decoration:none}
html body .v2m-home a[href]:hover{text-decoration:underline}
/* ===== end v2m-home ===== */

/* ===== v2sp : supplier profile contact — number hidden until tapped (owner p.33) ===== */
.v2sp-contact{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 0}
html body .v2sp-contact a[href]{display:inline-flex !important}
.v2sp-btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;
          padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;min-height:44px;
          color:#fff !important;text-decoration:none;line-height:1;transition:opacity .15s}
.v2sp-btn__ico svg{width:17px;height:17px;display:block}
.v2sp-btn--wa{background:#0f6b3a}
.v2sp-btn--chat{background:#2ea8e0}
.v2sp-btn--call{background:#8f1d2b}
.v2sp-btn:hover{opacity:.9}
.v2sp-btn.is-busy{opacity:.6;cursor:progress}
.v2sp-btn.is-revealed{cursor:pointer}
.v2sp-hint{font-size:12.5px;color:#8a8a96}
.v2sp-err{flex:1 1 100%;font-size:12.5px;color:#c2253a;font-weight:600}
/* ===== end v2sp ===== */

/* ===== v2lic : trade licence approval (owner p.23) ===== */
.v2lic{border-radius:12px;padding:13px 16px;margin:0 0 12px;font-size:13.5px;line-height:1.65}
.v2lic--info{background:#f4f7fb;border:1px solid #e2e9f2;color:#3a4a5e}
.v2lic--pending{background:#fdf6e3;border:1px solid #f2e4bd;color:#8a6100;font-weight:600}
.v2lic--error{background:#fdeaec;border:1px solid #f6d0d6;color:#96182c;font-weight:600}
.v2lic-page{max-width:640px;margin:0 auto;padding:28px 16px 60px}
.v2lic-page h1{font-size:26px;font-weight:800;margin:0 0 18px;color:#15151a}
.v2lic-card{background:#fff;border:1px solid #ececf1;border-radius:16px;padding:22px;
            box-shadow:0 6px 22px rgba(20,20,30,.05)}
.v2lic-card p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#3a3a48}
.v2lic-meta{font-size:13px !important;color:#6b6b78 !important}
.v2lic-note{font-size:13px !important;color:#8a6100 !important;background:#fdf6e3;
            border-radius:10px;padding:10px 12px}
.v2lic-acts{display:flex;gap:10px;margin-top:16px}
html body .v2lic-acts a[href]{display:inline-flex !important;align-items:center;justify-content:center;
    flex:1 1 0;padding:13px 18px;border-radius:11px;font-size:15px;font-weight:700;
    text-decoration:none;color:#fff !important;min-height:48px}
.v2lic-btn--ok{background:#0f7a4d}
.v2lic-btn--no{background:#c2253a}
.v2lic-result{font-size:16px !important;font-weight:700}
.v2lic-result--ok{color:#0f7a4d !important}
.v2lic-result--error{color:#c2253a !important}
.v2lic-result--info{color:#3a4a5e !important}
/* ===== end v2lic ===== */

/* ===== v2sp on the customer quote card — black & white, per the user's instruction
       ("بألوان الموقع كش أبيض واسود"), not the green/blue of the owner's mockup. ===== */
.q-tv .v2sp-contact,.q-tv__v .v2sp-contact{margin:10px 0 6px;justify-content:flex-start}
.q-tv .v2sp-btn,.q-tv__v .v2sp-btn{background:#15151a;color:#fff !important;border:1px solid #15151a}
.q-tv .v2sp-btn--call,.q-tv__v .v2sp-btn--call{background:#fff;color:#15151a !important;border:1px solid #d9d9e2}
.q-tv .v2sp-btn--chat,.q-tv__v .v2sp-btn--chat{background:#fff;color:#15151a !important;border:1px solid #d9d9e2}
.q-tv .v2sp-btn:hover,.q-tv__v .v2sp-btn:hover{opacity:1;background:#2f3542;color:#fff !important}
.q-tv .v2sp-btn--call:hover,.q-tv__v .v2sp-btn--call:hover{background:#f4f4f7;color:#15151a !important;border-color:#15151a}
html body a.v2sp-map[href]{display:inline-flex !important;align-items:center;gap:7px;
    margin-top:8px;padding:9px 15px;border:1px solid #d9d9e2;border-radius:10px;
    background:#fff;color:#15151a !important;font-size:13px;font-weight:700;text-decoration:none}
html body a.v2sp-map[href]:hover{border-color:#15151a;background:#f4f4f7}
a.v2sp-map svg{width:15px;height:15px}
/* ===== end ===== */

/* Delivery is blanked server-side when it is 0 (see partsrequestspublic.php) so the existing
   `.q-tv:has(> .q-tv__v:empty)` rule at the top of this block hides the row — no new rule
   needed. "Delivery 0" read as a promise of free delivery rather than "not stated". */

/* ===== v2q-custimgs : the customer's photos, shown to the supplier on the quote form ===== */
.v2q-custimgs{margin:10px 0 4px}
.v2q-custimgs__label{display:block;font-size:12px;font-weight:700;color:#6b6b78;margin-bottom:8px;
                     text-transform:uppercase;letter-spacing:.05em}
.v2q-custimgs__row{display:flex;flex-wrap:wrap;gap:10px}
html body .v2q-custimgs__row a[href]{display:block !important;width:86px;height:86px;border-radius:12px;
    overflow:hidden;border:1px solid #e2e2ea;transition:border-color .15s,transform .15s}
html body .v2q-custimgs__row a[href]:hover{border-color:#15151a;transform:scale(1.03)}
.v2q-custimgs__row img{width:100%;height:100%;object-fit:cover;display:block}
/* ===== end v2q-custimgs ===== */

/* ===== v2sd colour restore (2026-09-01) ======================================
   Reverses the short-lived monochrome pass. The page keeps the app's familiar
   semantic colours (blue info, orange contact, gold trophy, green fast/WhatsApp)
   and the brand red #E41E26 from live dublaa.com leads the primary actions.
   The icons carry fill="currentColor" now, so each icon needs its own colour. */
.v2sd-head__sent .v2sd-i{color:#2e9e5b}
.v2sd-head__rank{color:rgba(212,105,42,.95)}
.v2sd-banner--info{background:#E8F4FD;border:1px solid #B3D9F2;color:#1565C0}
.v2sd-banner--info .v2sd-i{color:#1976D2}
.v2sd-banner--info .v2sd-banner__x{color:#1976D2}
.v2sd-banner--contact{background:#FDE8D8;border:1px solid #F5C6A0;color:#C55A1E}
.v2sd-banner--contact .v2sd-i{color:#D4692A}
.v2sd-banner--contact .v2sd-banner__x{color:#D4692A}
.v2sd-card--top{border-color:#E8D5A0}
.v2sd-rankchip{background:#E41E26;color:#fff}
.v2sd-badge--rank{color:#2559A8;background:rgba(37,89,168,.1);border:1px solid rgba(37,89,168,.3)}
.v2sd-badge--rank .v2sd-i{color:#2559A8}
.v2sd-badge--top{color:#e8770e;background:rgba(232,119,14,.1);border:1px solid rgba(232,119,14,.3)}
.v2sd-badge--top .v2sd-i{color:#e8770e}
.v2sd-badge--fast{color:#2e9e5b;background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.3)}
.v2sd-badge--fast .v2sd-i{color:#2e9e5b}
.v2sd-btns a.v2sd-btn--wa[href]{color:#1c9c4d;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.45)}
.v2sd-btns a.v2sd-btn--wa[href]:hover{background:rgba(37,211,102,.22)}
.v2sd-btns a.v2sd-btn--call[href]{color:#e8770e;background:rgba(232,119,14,.1);border:1px solid rgba(232,119,14,.35)}
.v2sd-btns a.v2sd-btn--call[href]:hover{background:rgba(232,119,14,.2)}
.v2sd-btns a.v2sd-btn--chat[href]{color:#E41E26;background:rgba(228,30,38,.08);border:1px solid rgba(228,30,38,.35)}
.v2sd-btns a.v2sd-btn--chat[href]:hover{background:rgba(228,30,38,.16)}
.v2sd-btns a[href] .v2sd-i{color:inherit}
.v2sd-star{color:#D4A017}
.v2sd-foot a.v2sd-cta[href]{background:#E41E26}
.v2sd-nameRow a.v2sd-name[href]:hover{color:#E41E26}
a.v2sd-addr[href]:hover{color:#E41E26}
.v2sd-exp__tag{display:inline-flex;align-items:center;font-size:10px;font-weight:700;color:#2e9e5b;background:rgba(46,158,91,.1);border:1px solid rgba(46,158,91,.3);border-radius:6px;padding:1px 6px;margin-inline-start:6px;white-space:nowrap;flex:none}
/* ===== end v2sd colour restore ===== */

/* ===== v2-req-card red-reduction (2026-09-02, owner note "too much red") ==================
   The requests list had FIVE red things per card: the responses badge, "Parts in this request",
   "View Suppliers", "Message all suppliers" and the status pill. Red now marks ONLY the primary
   action of a card; the supporting elements move to the design system's success green
   (--d-success #1a8f4c / --d-success-soft #e6f5ec), which is already used by the "Broadcast sent"
   state, so the page keeps one green family instead of inventing a colour.
   Overrides only — deleting this block restores the all-red look. */
.req-responses b{background:var(--d-success,#1a8f4c)}
.req-items summary{color:var(--d-success,#1a8f4c)}
.req-items summary:hover{color:#14713c}
/* View Suppliers is the neutral action — white/outlined exactly like the customer app's
   OutlinedButton, so green keeps ONE meaning on this page: "you have quotes". */
.req-card a.req-view--suppliers[href]{background:#fff;color:var(--d-text,#15151a) !important;
  box-shadow:inset 0 0 0 1px var(--d-line-strong,#d8d8de)}
.req-card a.req-view--suppliers[href]:hover{background:#f6f6f8;box-shadow:inset 0 0 0 1px #b9b9c4;filter:none}
.req-card a.req-view--quotes[href]{background:var(--d-success,#1a8f4c);color:#fff !important}
.req-card a.req-view--quotes[href]:hover{background:#14713c;filter:none}
/* no quotes yet: plain white, same box size (inset shadow instead of a border) */
.req-card a.req-view--quotes-empty[href]{background:#fff;color:var(--d-text,#15151a) !important;
  box-shadow:inset 0 0 0 1px var(--d-line-strong,#d8d8de)}
.req-card a.req-view--quotes-empty[href]:hover{background:#f6f6f8;box-shadow:inset 0 0 0 1px #b9b9c4;filter:none}
.req-responses--zero b{background:#e9e9ef;color:#5a5a66}
/* ===== end v2-req-card red-reduction ===== */

/* ===== v2 primary buttons: brand red, never black (2026-09-08, owner's standing rule) ==========
   The design system shipped .d-btn as dark slate (--d-accent-slate #1e1e26), so every primary
   action on the site — Create Account, Search Parts, Start a part request — rendered black. The
   owner banned black/white UI on 2026-09-01: primary actions carry the LIVE brand red #E41E26
   (the red production itself uses), not v2's duller --d-red #c2253a.
   .secondary (white/outline), .ghost and the disabled state are deliberately untouched, so the
   page keeps a clear primary / secondary hierarchy.
   Overrides only — deleting this block restores the dark-slate look. */
.d-btn{background:#E41E26;border-color:#E41E26;color:#fff}
.d-btn:hover{background:#c2151d;border-color:#c2151d;color:#fff}
.d-btn:active{background:#a81118;border-color:#a81118}
/* "Customer Login" uses .destructive, which was the duller --d-red — align it so every red matches */
.d-btn.destructive{background:#E41E26;border-color:#E41E26;color:#fff}
.d-btn.destructive:hover{background:#c2151d;border-color:#c2151d;color:#fff}
/* WhatsApp CTA is a .d-btn too: keep it WhatsApp green, same treatment the supplier directory uses */
a.d-btn[href*="wa.me"]{background:var(--d-success,#1a8f4c);border-color:var(--d-success,#1a8f4c);color:#fff}
a.d-btn[href*="wa.me"]:hover{background:#14713c;border-color:#14713c;color:#fff}
/* ===== end v2 primary buttons ===== */

/* PageSpeed batch 1 (2026-09-24): contrast to WCAG AA 4.5:1, and the footer logo keeps its own proportions */
.hr-chan__s{color:#5f5f6b!important}
.badge-business-type{color:#666!important}
a.d-btn[href^="https://wa.me"]{background:#157a40!important;border-color:#157a40!important}
.d-foot-grid .brand img:not(.d-foot-crest){height:auto!important;width:174px!important;max-width:100%}