/* Layout wrapper */
.ct-dealer {
  display: flex;
  min-height: calc(100vh - 64px); /* minus topbar */
  background: radial-gradient(circle at top left, #111827 0, #020617 55%);
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dealer portal: remove default white edge + ensure full-bleed background */
html, body{
  width: 100%;
  height: 100%;
}

body{
  margin: 0;
  padding: 0;
  background: radial-gradient(circle at top left, #111827 0, #020617 55%);
  overflow-x: hidden;
}

/* Sidebar */
.ct-dealerSidebar {
  width: 260px;
  padding: 24px 20px;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  background: linear-gradient(180deg, #020617 0%, #020617 60%, #020617 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ct-dealerSidebar__header {
  display: flex;
  align-items: center;
}

.ct-dealerSidebar__dealer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ct-dealerSidebar__logo {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #3b82f6, #0f172a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.ct-dealerSidebar__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-dealerSidebar__name {
  font-size: 14px;
  font-weight: 600;
}

.ct-dealerSidebar__status {
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerSidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ct-dealerNavItem {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 14px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ct-dealerNavItem:hover {
  background: rgba(148, 163, 184, 0.12);
  color: #e5e7eb;
}

.ct-dealerNavItem--active {
  background: #111827;
  color: #f9fafb;
}

.ct-dealerSidebar__footer {
  margin-top: auto;
}

.ct-dealerSidebar__trial {
  font-size: 12px;
  color: #9ca3af;
}

/* Main area */
.ct-dealerMain {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Paywall overlay */
.ct-dealerPaywall {
  position: absolute;
  inset: 0;
  z-index: 10;
  backdrop-filter: blur(4px);
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Respect the hidden attribute so JS can hide the overlay */
.ct-dealerPaywall[hidden] {
  display: none !important;
}


.ct-dealerPaywall__panel {
  max-width: 480px;
  padding: 24px 24px 20px;
  border-radius: 20px;
  background: #020617;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

.ct-dealerPaywall__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.ct-dealerPaywall__text {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 16px;
}

.ct-dealerPaywall__btn {
  width: 100%;
  border-radius: 999px;
  border: none;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #3b82f6;
  color: white;
}

/* Panel basics */
.ct-dealerPanel {
  display: none;
}

.ct-dealerPanel--active {
  display: block;
}

.ct-dealerPanel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ct-dealerPanel__title {
  /* Figma: Arial, 30 / 36, bold, white */
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
  color: #ffffff;
}

.ct-dealerPanel__subtitle {
  /* Figma: Arial, 16 / 24, regular, #99A1AF */
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #99a1af;
  margin-top: 4px;
  margin-bottom: 26px; /* matches the spacing down to the KPI row */
}


.ct-dealerPanel__actions {
  display: flex;
  gap: 10px;
}

/* Buttons */
.ct-dealerBtn {
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: transparent;
  color: #e5e7eb;
  cursor: pointer;
}

.ct-dealerBtn--primary {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

.ct-dealerBtn--ghost:hover {
  background: rgba(148, 163, 184, 0.1);
}

/* Light button – white with dark text (for Bulk import) */
.ct-dealerBtn--light {
  background: #ffffff;
  border-color: #ffffff;
  color: #020617; /* very dark navy/black */
}

.ct-dealerBtn--light:hover {
  background: #e5e7eb;
  border-color: #e5e7eb;
}

/* Header "Add listing" button (Figma style) */
#ctDealerAddListingBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Figma-ish padding + radius */
  padding: 7px 14px 7px 12px;
  border-radius: 8px;

  /* Override generic primary colour */
  background: #2b7fff;
  border-color: #2b7fff;

  /* Typography: 14px Arial, 20px line-height */
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
  color: #ffffff;
}

/* When you drop the "+" SVG inside, keep it tidy */
#ctDealerAddListingBtn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* KPI cards */
/* KPI cards */
.ct-dealerKpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ct-dealerKpi {
  border-radius: 18px;
  padding: 14px 16px;
  background: radial-gradient(circle at top left, #111827, #020617);
  border: 1px solid rgba(15, 23, 42, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Stack icon ABOVE the text */
.ct-dealerKpi__row {
  display: flex;
  flex-direction: column-reverse; /* icon is last in HTML but appears on top */
  align-items: flex-start;
  gap: 12px;
}

.ct-dealerKpi__text {
  display: flex;
  flex-direction: column;
}

.ct-dealerKpi__label {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 2px; /* tighter, like Figma */
}

.ct-dealerKpi__value {
  font-size: 22px;
  font-weight: 600;
}


/* Icon boxes for dashboard KPIs (48x48, per Figma) */
.ct-dealerKpi__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.8px solid rgba(43, 127, 255, 0.2); /* default, overridden below */
  background: rgba(43, 127, 255, 0.1);
}

/* Per-metric colours taken from Figma */

.ct-dealerKpi__icon--listings {
  border-color: rgba(43, 127, 255, 0.20);
  background: rgba(43, 127, 255, 0.10);
}

.ct-dealerKpi__icon--offers {
  border-color: rgba(0, 201, 80, 0.20);
  background: rgba(0, 201, 80, 0.10);
}

.ct-dealerKpi__icon--views {
  border-color: rgba(173, 70, 255, 0.20);
  background: rgba(173, 70, 255, 0.10);
}

.ct-dealerKpi__icon--agreed {
  border-color: rgba(240, 177, 0, 0.20);
  background: rgba(240, 177, 0, 0.10);
}





/* Grid of cards */
.ct-dealerGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: 16px;
}

.ct-dealerCard {
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617, #020617);
  border: 1px solid rgba(15, 23, 42, 0.9);
  padding: 16px;
}

.ct-dealerCard__header {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.ct-dealerCard__body {
  font-size: 13px;
  color: #9ca3af;
}

.ct-dealerState {
  font-size: 14px;
  color: #9ca3af;
}


/* ----------------------------------------
 * Dashboard – Recent activity
 * ------------------------------------- */

.ct-dealerActivityList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-dealerActivityItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  border: 1px solid rgba(15, 23, 42, 0.9);
}

.ct-dealerActivityItem__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 1);
}

.ct-dealerActivityItem__iconDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e; /* “message” green – you can override when you drop the SVG in */
}

.ct-dealerActivityItem__content {
  flex: 1;
  min-width: 0;
}

.ct-dealerActivityItem__title {
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
}

.ct-dealerActivityItem__meta {
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerActivityItem__time {
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

/* ----------------------------------------
 * Dashboard – Top performing plates
 * ------------------------------------- */

/* ----------------------------------------
 * Dashboard – Top performing plates
 * ------------------------------------- */

#ctDealerTopPlatesDashboard .ct-dealerTopPlates {
  margin: 0;
  padding: 0;
  list-style: none;
}

#ctDealerTopPlatesDashboard .ct-dealerTopPlate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  border: 1px solid rgba(15, 23, 42, 0.9);
}

#ctDealerTopPlatesDashboard .ct-dealerTopPlateTitle {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

#ctDealerTopPlatesDashboard .ct-dealerTopPlatePrice {
  margin-top: 2px;
  font-size: 13px;
  color: #9ca3af;
}

/* ✅ this is the key: keep stats horizontal */
#ctDealerTopPlatesDashboard .ct-dealerTopPlateStats {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #9ca3af;
}

#ctDealerTopPlatesDashboard .ct-dealerTopPlateStat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#ctDealerTopPlatesDashboard .ct-dealerTopPlateStatIcon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 1);
}



#ctDealerTopPlates .ct-dealerTopPlate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617 0%, #020617 40%, #020617 100%);
  border: 1px solid rgba(15, 23, 42, 0.9);
}

#ctDealerTopPlates .ct-dealerTopPlateTitle {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

#ctDealerTopPlates .ct-dealerTopPlatePrice {
  margin-top: 2px;
  font-size: 13px;
  color: #9ca3af;
}



/* Settings */
.ct-dealerSettings__hint {
  font-size: 14px;
  color: #9ca3af;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .ct-dealerSidebar {
    display: none;
  }

  .ct-dealerMain {
    padding: 16px;
  }

  .ct-dealerKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ct-dealerGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Quick action row under KPIs */
.ct-dealerQuickActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ct-dealerQuickCard {
  border-radius: 20px;
  border: 1px solid rgba(30, 64, 175, 0.6);
  background: radial-gradient(circle at top left, #020617, #020617);
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
  color: #e5e7eb;
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    transform 0.12s ease, background 0.18s ease;
}

.ct-dealerQuickCard--bulk {
  /* subtle blue border */
  border-color: rgba(59, 130, 246, 0.7);
}

.ct-dealerQuickCard--share {
  border-color: rgba(16, 185, 129, 0.7);
  background: radial-gradient(circle at top left, #022c22, #020617);
}

.ct-dealerQuickCard:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

.ct-dealerQuickCard__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ct-dealerQuickCard__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ct-dealerQuickCard__subtitle {
  font-size: 13px;
  color: #9ca3af;
}

.ct-dealerQuickCard__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* remove the circular pill behind the SVG */
  background: transparent;
  border-radius: 0;
  color: #60a5fa; /* bulk import icon colour */
}

.ct-dealerQuickCard--share .ct-dealerQuickCard__icon {
  color: #22c55e; /* share pack icon colour */
}


@media (max-width: 900px) {
  .ct-dealerQuickActions {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Inventory header */
.ct-dealerInvHeaderRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ct-dealerInvSearch {
  position: relative;
}

.ct-dealerInvSearch input {
  width: 220px;
  max-width: 100%;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.85);
  color: #e5e7eb;
  font-size: 13px;
  padding: 8px 14px;
  outline: none;
}

.ct-dealerInvSearch input::placeholder {
  color: #6b7280;
}

/* Reuse KPI layout for inventory */


/* Inventory table shell */
.ct-dealerTableWrap {
  border-radius: 20px;
  border: 1px solid rgba(30, 64, 175, 0.7);
  background: radial-gradient(circle at top left, #020617, #020617);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
  overflow: hidden;
}

.ct-dealerTable {
  width: 100%;
  font-size: 13px;
  color: #e5e7eb;
}

.ct-dealerTable__head {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 1.1fr 1.1fr 1.1fr 0.9fr 0.9fr 1.2fr;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(31, 41, 55, 0.9);
  background: radial-gradient(
    circle at top left,
    rgba(15, 23, 42, 0.95),
    rgba(15, 23, 42, 1)
  );

  /* Typography from Figma */
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #99a1af;
}


.ct-dealerTable__cell {
  padding-right: 10px;
}

.ct-dealerTable__cell--plate {
  padding-right: 24px;
}

.ct-dealerTable__cell--numeric {
  text-align: right;
}

.ct-dealerTable__cell--actions {
  text-align: right;
}

/* Table body rows */
.ct-dealerTable__body {
  display: flex;
  flex-direction: column;
}

.ct-dealerTable__row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) 1.1fr 1.1fr 1.1fr 0.9fr 0.9fr 1.2fr;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.85);
}

.ct-dealerTable__row:nth-child(2n) {
  background: radial-gradient(circle at top left, #020617, #020617);
}

.ct-dealerTable__row:hover {
  background: radial-gradient(circle at top left, #020617, #020617);
}

/* Plate pill (same style as account listing) */
.ct-dealerPlate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 6px 16px;
  border-radius: 8px;
  background: #dede17;
  border: 2px solid #d1c044;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.55);
}

.ct-dealerPlate__text {
  font-family: "UKNumberPlate", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  font-size: 20px;
  color: #111827;
}

/* Mode pill (Offers / Fixed etc.) */
.ct-dealerModeChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.ct-dealerModeChip--offers {
  background: rgba(22, 163, 74, 0.15);
  color: #4ade80;
}

.ct-dealerModeChip--fixed {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

/* Status pill */
.ct-dealerStatusChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: capitalize;
}

.ct-dealerStatusChip--active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.ct-dealerStatusChip--pending {
  background: rgba(234, 179, 8, 0.18);
  color: #facc15;
}

.ct-dealerStatusChip--inactive {
  background: rgba(239, 68, 68, 0.18);
  color: #fecaca;
}
.ct-dealerStatusChip--sold {
  background: rgba(148, 163, 184, 0.3);
  color: #e5e7eb;
}

/* Numeric cells */
.ct-dealerTable__metric {
  font-variant-numeric: tabular-nums;
}

.ct-dealerTable__metric--muted {
  color: #6b7280;
}

/* Metric + icon combo in numeric columns */
.ct-dealerTable__metricWrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.ct-dealerTable__metricIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.ct-dealerTable__metricWrap--muted .ct-dealerTable__metricIcon {
  opacity: 0.5;
}


/* Actions */
.ct-dealerTable__actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

.ct-dealerTableActionBtn {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  border-radius: 999px;
}

.ct-dealerTableActionBtn:hover {
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.9);
}

@media (max-width: 900px) {
  .ct-dealerInvHeaderRight {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ct-dealerInvSearch input {
    width: 100%;
  }

  .ct-dealerTable__head,
  .ct-dealerTable__row {
    grid-template-columns: minmax(0, 1.8fr) 1.1fr 1.1fr 0fr 0.9fr 0.9fr 1.2fr;
  }

  .ct-dealerTable__cell:nth-child(4),
  .ct-dealerTable__row > :nth-child(4) {
    display: none; /* hide Status column on small screens */
  }
}


/* --- Offers inbox layout --- */

.ct-dealerOffersShell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: 18px;
  margin-top: 18px;
}

.ct-dealerOffersSidebar {
  border-radius: 20px;
  border: 1px solid rgba(37, 99, 235, 0.6);
  background: radial-gradient(circle at top left, #020617, #020617);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.ct-dealerOffersSidebarHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ct-dealerOffersSidebarTitle {
  font-size: 15px;
  font-weight: 600;
  color: #e5e7eb;
}

.ct-dealerOffersSidebarMeta {
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerOffersConversations {
  margin-top: 4px;
  overflow-y: auto;
  max-height: 520px;
}

/* State inside sidebar */
.ct-dealerState--compact {
  font-size: 12px;
}

/* Conversation rows */
.ct-dealerOffersConv {
  border-radius: 16px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.95), #020617);
  border: 1px solid transparent;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: center;
}

.ct-dealerOffersConv:hover {
  border-color: rgba(59, 130, 246, 0.5);
}

.ct-dealerOffersConv.is-active {
  border-color: rgba(59, 130, 246, 1);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.8);
}

.ct-dealerOffersConvMetaPrimary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ct-dealerOffersConvPlate {
  margin-bottom: 3px;
}

.ct-dealerOffersConvBuyer {
  font-size: 12px;
  color: #e5e7eb;
}

.ct-dealerOffersConvLatest {
  font-size: 11px;
  color: #9ca3af;
}

.ct-dealerOffersConvMetaSecondary {
  justify-self: flex-end;
  text-align: right;
}

.ct-dealerOffersConvStatusChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: capitalize;
}

.ct-dealerOffersConvStatusChip--pending {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
}

.ct-dealerOffersConvStatusChip--countered {
  background: rgba(249, 115, 22, 0.25);
  color: #fed7aa;
}

.ct-dealerOffersConvStatusChip--agreed {
  background: rgba(22, 163, 74, 0.25);
  color: #bbf7d0;
}

.ct-dealerOffersConvStatusChip--declined {
  background: rgba(239, 68, 68, 0.25);
  color: #fecaca;
}

.ct-dealerOffersConvCount {
  font-size: 11px;
  color: #9ca3af;
}

/* RIGHT SIDE */

.ct-dealerOffersThread {
  border-radius: 20px;
  border: 1px solid rgba(30, 64, 175, 0.8);
  background: radial-gradient(circle at top left, #020617, #020617);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
  padding: 18px 20px 18px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
}

.ct-dealerOffersHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ct-dealerPlate--large {
  padding: 10px 24px;
  min-width: 170px;
}

.ct-dealerPlate--large .ct-dealerPlate__text {
  font-size: 24px;
}

.ct-dealerOffersHeaderLeft {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ct-dealerOffersHeaderMeta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #9ca3af;
}

.ct-dealerOffersAsking span {
  color: #e5e7eb;
  font-weight: 500;
}

.ct-dealerOffersCount {
  font-size: 12px;
  color: #6b7280;
}

.ct-dealerOffersHeaderRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-dealerOffersStatusBadge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: capitalize;
}

.ct-dealerOffersStatusBadge--muted {
  background: rgba(75, 85, 99, 0.4);
  color: #e5e7eb;
}

.ct-dealerOffersStatusBadge--active {
  background: rgba(22, 163, 74, 0.25);
  color: #bbf7d0;
}

.ct-dealerOffersStatusBadge--agreed {
  background: rgba(22, 163, 74, 0.35);
  color: #bbf7d0;
}

.ct-dealerOffersStatusBadge--declined {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.ct-dealerOffersBody {
  margin-top: 8px;
  padding-top: 8px;
}

/* Offer cards (dealer portal version) */

.ct-dealerOfferCard {
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 55%),
    rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.5);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.9);
}

.ct-dealerOfferCard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ct-dealerOfferCard__buyer {
  font-size: 13px;
  font-weight: 500;
  color: #e5e7eb;
}

.ct-dealerOfferCard__role {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 6px;
}

.ct-dealerOfferCard__time {
  font-size: 11px;
  color: #9ca3af;
}

.ct-dealerOfferCard__amount {
  margin-top: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #facc15;
}

.ct-dealerOfferCard__meta {
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerOfferCard__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ct-dealerOfferCard__status--pending {
  background: rgba(234, 179, 8, 0.25);
  color: #facc15;
}

.ct-dealerOfferCard__status--countered {
  background: rgba(249, 115, 22, 0.25);
  color: #fed7aa;
}

.ct-dealerOfferCard__status--agreed {
  background: rgba(22, 163, 74, 0.35);
  color: #bbf7d0;
}

.ct-dealerOfferCard__status--declined {
  background: rgba(239, 68, 68, 0.3);
  color: #fecaca;
}

.ct-dealerOfferCard__footer {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.ct-dealerOfferBtn {
  border-radius: 999px;
  border: 0;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease,
    transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.ct-dealerOfferBtn--accept {
  background: #22c55e;
  color: #022c22;
  box-shadow: 0 12px 30px rgba(34, 197, 94, 0.5);
}

.ct-dealerOfferBtn--accept:hover {
  background: #16a34a;
}

.ct-dealerOfferBtn--counter {
  border: 1px solid rgba(148, 163, 184, 0.7);
  background: transparent;
  color: #e5e7eb;
}

.ct-dealerOfferBtn--counter:hover {
  background: rgba(15, 23, 42, 0.9);
}

.ct-dealerOfferBtn--decline {
  border: 1px solid rgba(248, 113, 113, 0.9);
  background: transparent;
  color: #fecaca;
}

.ct-dealerOfferBtn--decline:hover {
  background: rgba(127, 29, 29, 0.7);
}

/* Checklist card */

.ct-dealerChecklistCard {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.95), #020617);
}

.ct-dealerChecklistHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ct-dealerChecklistIcon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.ct-dealerChecklistTitle {
  font-size: 14px;
  font-weight: 600;
  color: #e5e7eb;
}

.ct-dealerChecklistSubtitle {
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerChecklistList {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerChecklistList li {
  margin-bottom: 4px;
}

@media (max-width: 1024px) {
  .ct-dealerOffersShell {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-dealerOffersThread {
    margin-top: 10px;
  }
}


/* --- Analytics panel --- */

.ct-dealerKpi__delta {
  margin-top: 4px;
  font-size: 11px;
  color: #4ade80; /* green up */
}

.ct-dealerKpi__hint {
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
}

.ct-dealerAnalytics {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ct-dealerAnalyticsRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.ct-dealerAnalyticsCard {
  border-radius: 20px;
  padding: 18px 20px;
  background: radial-gradient(circle at top left, #020617, #020617);
  border: 1px solid #1E2939;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.7);
}

.ct-dealerAnalyticsCard__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* UPDATED: analytics card titles (Views over time, Offers over time, etc.) */
.ct-dealerAnalyticsCard__title {
  font-size: 20px;      /* matches Figma */
  line-height: 28px;    /* 140% line-height */
  font-weight: 700;     /* bold */
  color: #ffffff;
  margin: 0 0 4px;      /* tiny breathing room above the chart */
}


.ct-dealerAnalyticsCard__subtitle {
  font-size: 13px;
  color: #9ca3af;
}

/* Line charts */
/* Inner chart wrapper – no visible box, just spacing */
.ct-dealerChartLine {
  margin-top: 12px;        /* space below the title */
  padding: 0;              /* let the SVG sit directly inside the card */
  border: none;
  border-radius: 0;
  background: transparent; /* remove the inner gradient box */
}


.ct-dealerChartLine svg {
  display: block;
  width: 100%;
  height: 180px;
}

.ct-dealerChartGrid line {
  stroke: #6b7280;
  stroke-width: 0.5;
}

.ct-dealerChartSeries {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-dealerChartSeries--views {
  stroke: #3b82f6;
}

.ct-dealerChartSeries--offers {
  stroke: #22c55e;
}

/* Traffic sources */

.ct-dealerAnalyticsTraffic {
  display: flex;
  align-items: center;
  gap: 24px;
}

.ct-dealerChartPieGraphic {
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: conic-gradient(
  var(--rmAnaBlue) 0 24%,
  var(--rmAnaPurple) 24% 52%,
  var(--rmAnaGreen) 52% 100%
);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.7);
}

.ct-dealerChartLegend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.ct-dealerChartLegendItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ct-dealerChartLegendItem > div {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ct-dealerChartLegendDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.ct-dealerChartLegendDot--direct {
  background: #3b82f6;
}

.ct-dealerChartLegendDot--google {
  background: #a855f7;
}

.ct-dealerChartLegendDot--facebook {
  background: #22c55e;
}

/* Top plates list */

.ct-dealerTopPlates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-dealerTopPlate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: radial-gradient(circle at top left, #020617, #020617);
  border: 1px solid rgba(30, 64, 175, 0.4);
}

.ct-dealerTopPlateMeta {
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  gap: 12px;
}

.ct-dealerTopPlateConversion {
  font-weight: 600;
  color: #22c55e;
}

/* Facebook performance table */

.ct-dealerFbTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ct-dealerFbTable th,
.ct-dealerFbTable td {
  padding: 8px 4px;
}

.ct-dealerFbTable th {
  text-align: left;
  font-weight: 500;
  color: #9ca3af;
}

.ct-dealerFbTable td:nth-child(3),
.ct-dealerFbTable td:nth-child(4) {
  text-align: center;
}

.ct-dealerFbTable td:last-child {
  text-align: right;
}

/* Pro tip */

.ct-dealerAnalyticsProTip {
  margin-top: 16px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.9);
  font-size: 13px;
  color: #e5e7eb;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ct-dealerAnalyticsProTipIcon {
  font-size: 16px;
}

/* Responsive adjustments */

@media (max-width: 1024px) {
  .ct-dealerAnalyticsRow {
    grid-template-columns: minmax(0, 1fr);
  }

  .ct-dealerAnalyticsTraffic {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Share Packs */

.ct-dealerPanel[data-dealer-panel="share-packs"] {
  padding-bottom: 32px;
}

#ctDealerShareRoot {
  margin-top: 24px;
}

/* Stepper */

.ct-dealerShareStepper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.ct-dealerShareStepDot {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #9ca3af;
  background: radial-gradient(
    circle at top left,
    rgba(148, 163, 184, 0.2),
    rgba(15, 23, 42, 1)
  );
}

.ct-dealerShareStepDot.is-current {
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

.ct-dealerShareStepDot.is-complete {
  background: #22c55e;
  border-color: #22c55e;
  color: #0b1120;
}

.ct-dealerShareStepDot span {
  font-size: 14px;
}

.ct-dealerShareStepLine {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(31, 41, 55, 0.9),
    rgba(15, 23, 42, 1)
  );
}

/* Steps */

.ct-dealerShareStep {
  display: none;
}

.ct-dealerShareStep.is-active {
  display: block;
}

.ct-dealerShareStepTitle {
  font-size: 22px;
  margin-bottom: 4px;
}

.ct-dealerShareStepSubtitle {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 20px;
}

/* Step 1 – listing grid */

.ct-dealerShareListingGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ct-dealerShareListingCard {
  text-align: left;
  border-radius: 18px;
  padding: 16px 18px;
  background: radial-gradient(
    circle at top left,
    rgba(30, 64, 175, 0.4),
    rgba(15, 23, 42, 1)
  );
  border: 1px solid rgba(148, 163, 184, 0.24);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ct-dealerShareListingCard:hover {
  border-color: #3b82f6;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.7);
  transform: translateY(-1px);
}

.ct-dealerShareListingCard.is-selected {
  border-color: #3b82f6;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.8);
}

.ct-dealerShareListingHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ct-dealerSharePlate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 999px;
  background: #facc15;
  color: #111827;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}

.ct-dealerShareCheckbox {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ct-dealerShareCheckboxBox {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: transparent;
}

.ct-dealerShareCheckbox.is-checked .ct-dealerShareCheckboxBox {
  background: #3b82f6;
}

.ct-dealerShareListingPrice {
  font-weight: 600;
  font-size: 15px;
}

.ct-dealerShareListingTagline {
  font-size: 13px;
  color: #9ca3af;
}

.ct-dealerShareFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

.ct-dealerShareEmpty {
  padding: 32px 20px;
  border-radius: 18px;
  background: radial-gradient(
    circle at top left,
    rgba(30, 64, 175, 0.35),
    rgba(15, 23, 42, 1)
  );
  border: 1px dashed rgba(148, 163, 184, 0.5);
  font-size: 14px;
  color: #9ca3af;
}

/* Step 2 – styles */

.ct-dealerShareStyleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.ct-dealerShareStyleCard {
  border-radius: 18px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: radial-gradient(
    circle at top left,
    rgba(30, 64, 175, 0.2),
    rgba(15, 23, 42, 1)
  );
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-dealerShareStyleCard.is-selected {
  border-color: #3b82f6;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.7);
}

.ct-dealerShareStylePreview {
  border-radius: 14px;
  height: 180px;
  background: radial-gradient(circle at top left, #312e81, #020617);
}

.ct-dealerShareStylePreview.is-gloss {
  background: radial-gradient(circle at top left, #0ea5e9, #020617);
}

.ct-dealerShareStylePreview.is-minimal {
  background: linear-gradient(135deg, #f9fafb, #e5e7eb);
}

.ct-dealerShareStyleBody h3 {
  font-size: 16px;
}

.ct-dealerShareStyleBody p {
  font-size: 13px;
  color: #9ca3af;
}

/* Step 3 – results */

.ct-dealerShareResults {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}

.ct-dealerShareResult {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 20px;
  padding: 18px 20px;
  border-radius: 20px;
  background: radial-gradient(
    circle at top left,
    rgba(15, 23, 42, 0.95),
    rgba(15, 23, 42, 1)
  );
  border: 1px solid rgba(15, 23, 42, 0.9);
}

@media (max-width: 1024px) {
  .ct-dealerShareResult {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ct-dealerShareResultImageWrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ct-dealerShareResultImage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  padding: 26px 24px;
  background: radial-gradient(#1e40af, #4c1d95, #020617);
}

.ct-dealerShareResultGradient {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: radial-gradient(
    circle at top,
    rgba(59, 130, 246, 0.9),
    transparent 60%
  );
  mix-blend-mode: screen;
}

.ct-dealerShareResultPlate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 16px;
  background: #facc15;
  color: #111827;
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 26px;
  text-transform: uppercase;
}

.ct-dealerShareResultWatermark {
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-size: 13px;
  color: rgba(191, 219, 254, 0.75);
}

.ct-dealerShareResultMeta {
  font-size: 14px;
  color: #e5e7eb;
}

.ct-dealerShareResultCopy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ct-dealerShareCaptionGroup {
  border-radius: 14px;
  padding: 10px 12px 12px;
  background: transparent;
  border: 0px solid rgba(31, 41, 55, 0.9);
}

.ct-dealerShareCaptionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 13px;
}

.ct-dealerShareCaption {
  width: 100%;
  min-height: 72px;
  border-radius: 10px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background: rgba(10, 16, 30, 0.65);
  color: #e5e7eb;
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
}

.ct-dealerShareCaption:focus {
  outline: none;
  border-color: #3b82f6;
}

.ct-dealerShareCopyBtn {
  border: none;
  background: rgba(30, 64, 175, 0.2);
  color: #e5e7eb;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.ct-dealerShareCopyBtn.is-copied {
  background: rgba(34, 197, 94, 0.2);
}

.ct-dealerShareTracking {
  margin-top: 4px;
}

.ct-dealerShareTrackingLabel {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.ct-dealerShareTrackingRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-dealerShareTrackingInput {
  flex: 1;
  border-radius: 10px;
  border: 1px solid rgba(31, 41, 55, 0.9);
  background: rgba(15, 23, 42, 0.9);
  color: #e5e7eb;
  font-size: 13px;
  padding: 6px 8px;
}


/* Settings panel */

.ct-dealerSettingsTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.ct-dealerSettingsTab {
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: #9ca3af;
  cursor: default;
}

.ct-dealerSettingsTab.is-active {
  background: rgba(59, 130, 246, 0.18);
  color: #e5e7eb;
}

.ct-dealerSettingsTab:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ct-dealerSettings {
  max-width: 880px;
}

.ct-dealerSettingsForm {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ct-dealerSettingsCard {
  background: radial-gradient(circle at top left, #020617 0, #020617 40%, #050816 100%);
  border-radius: 20px;
  padding: 20px 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
}

.ct-dealerSettingsCard__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.ct-dealerFieldGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 24px;
  margin-top: 16px;
}

.ct-dealerField--full {
  grid-column: 1 / -1;
}

.ct-dealerField__label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #e5e7eb;
}

.ct-dealerField input,
.ct-dealerField textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #020617;
  padding: 8px 10px;
  font-size: 14px;
  color: #e5e7eb;
}

.ct-dealerField textarea {
  resize: vertical;
  min-height: 80px;
}

.ct-dealerField input::placeholder,
.ct-dealerField textarea::placeholder {
  color: #6b7280;
}

.ct-dealerField__hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ct-dealerField__meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.ct-dealerField__slugRow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ct-dealerField__slugPrefix {
  font-size: 13px;
  color: #9ca3af;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(55, 65, 81, 0.9);
}

.ct-dealerSettingsActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Logo upload */

.ct-dealerLogoUpload {
  margin-top: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.75);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease;
}

.ct-dealerLogoUpload:hover {
  border-color: rgba(59, 130, 246, 0.9);
  transform: translateY(-1px);
}

.ct-dealerLogoUpload__preview {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 0, #1e293b, #020617);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ct-dealerLogoUpload__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ct-dealerLogoUpload__initials {
  font-size: 28px;
  font-weight: 600;
  color: #e5e7eb;
}

.ct-dealerLogoUpload__text {
  font-size: 13px;
  color: #e5e7eb;
}

@media (max-width: 900px) {
  .ct-dealerFieldGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ===========================
   Settings – tabs & layout
   =========================== */

.ct-dealerSettings {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ct-dealerSettingsTabs {
  margin-top: 0.75rem;
  display: inline-flex;
  gap: 0.5rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
}

.ct-dealerSettingsTab {
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 0.75rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ct-dealerSettingsTab.is-active {
  background: radial-gradient(circle at top left, #1d4ed8, #020617);
  color: #f9fafb;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.7);
}

/* sections */

.ct-dealerSettingsSection {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ct-dealerSettingsSection[hidden] {
  display: none;
}

/* cards */

.ct-dealerSettingsCard {
  border-radius: 14px;
border: 0.8px solid #1E2939;
background: linear-gradient(135deg, #101828 0%, #030712 100%);
  padding: 1.5rem 1.8rem;
}

.ct-dealerSettingsCard__title {
  font-size: 1rem;
  font-weight: 600;
  color: #e5e7eb;
  margin-bottom: 0.25rem;
}

.ct-dealerSettingsCard__hint {
  font-size: 0.85rem;
  color: #9ca3af;
  margin-bottom: 1.25rem;
}

/* grid + fields */

.ct-dealerSettingsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}

@media (max-width: 900px) {
  .ct-dealerSettingsGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ct-dealerSettingsField {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.ct-dealerSettingsField--full {
  grid-column: 1 / -1;
}

.ct-dealerSettingsLabel {
  font-size: 0.8rem;
  color: #9ca3af;
}

.ct-dealerSettingsInput,
.ct-dealerSettingsTextarea {
  border-radius: 8px;
border: 0.8px solid #1E2939;
background: #030712;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  color: #ffffff;
  outline: none;
}

.ct-dealerSettingsInput:focus,
.ct-dealerSettingsTextarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4);
}

.ct-dealerSettingsTextarea {
  resize: vertical;
  min-height: 100px;
}

.ct-dealerSettingsFieldHint {
  font-size: 0.75rem;
  color: #6b7280;
}

.ct-dealerSettingsSlug {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 0.75rem;
  border: 1px solid rgba(55, 65, 81, 0.9);
  padding: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: #6b7280;
}

.ct-dealerSettingsInput--slug {
  background: transparent;
  border: none;
  padding-left: 0;
}

/* upload dropzone */

.ct-dealerSettingsUpload {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  border-radius: 0.85rem;
  border: 1px dashed rgba(107, 114, 128, 0.8);
  background: rgba(15, 23, 42, 0.75);
  padding: 1.25rem 1rem;
  cursor: pointer;
  color: #e5e7eb;
}

.ct-dealerSettingsUpload__icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.15);
  font-size: 1.1rem;
}

.ct-dealerSettingsUpload__text {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: #9ca3af;
}

.ct-dealerSettingsUpload__text strong {
  color: #e5e7eb;
  margin-bottom: 0.1rem;
}

/* actions */

.ct-dealerSettingsActions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: flex-end;
}

/* verification */

.ct-dealerSettingsVerificationStatus {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  margin-bottom: 1.25rem;
}

.ct-dealerSettingsStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #6b7280;
}

.ct-dealerSettingsStatusDot.is-pending {
  background: #facc15;
}

.ct-dealerSettingsStatusTitle {
  font-size: 0.85rem;
  color: #e5e7eb;
}

.ct-dealerSettingsStatusText {
  font-size: 0.78rem;
  color: #9ca3af;
}

.ct-dealerSettingsInfo {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

/* plan & billing */

.ct-dealerSettingsPlanCurrent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.ct-dealerSettingsPlanName {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e5e7eb;
}

.ct-dealerSettingsPlanMeta {
  font-size: 0.8rem;
  color: #9ca3af;
}

.ct-dealerSettingsUsage {
  margin-top: 0.5rem;
}

.ct-dealerSettingsUsageHeader {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.3rem;
}

.ct-dealerSettingsUsageBar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.4);
  overflow: hidden;
}

.ct-dealerSettingsUsageBar__fill {
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(to right, #3b82f6, #06b6d4);
}

/* plan cards */

.ct-dealerSettingsPlansGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 1100px) {
  .ct-dealerSettingsPlansGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .ct-dealerSettingsPlansGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ct-dealerSettingsPlanCard {
  border-radius: 0.9rem;
  border: 1px solid rgba(55, 65, 81, 0.9);
  background: radial-gradient(circle at top left, #020617, #020617);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.ct-dealerSettingsPlanCard--pro {
  border-color: #3b82f6;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.7);
}

.ct-dealerSettingsPlanPill {
  align-self: flex-start;
  font-size: 0.7rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  color: #bfdbfe;
}

.ct-dealerSettingsPlanLabel {
  font-weight: 600;
  color: #e5e7eb;
}

.ct-dealerSettingsPlanPrice {
  font-size: 1.35rem;
  font-weight: 600;
  color: #f9fafb;
}

.ct-dealerSettingsPlanPrice span {
  font-size: 0.8rem;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 0.1rem;
}

.ct-dealerSettingsPlanList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: #9ca3af;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* promotions */

.ct-dealerSettingsPromoRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(31, 41, 55, 0.9);
}

.ct-dealerSettingsPromoRow:first-of-type {
  border-top: none;
}

.ct-dealerSettingsPromoTitle {
  font-size: 0.85rem;
  color: #e5e7eb;
}

.ct-dealerSettingsPromoText {
  font-size: 0.78rem;
  color: #9ca3af;
}

.ct-dealerSettingsPromoPrice {
  font-size: 0.8rem;
  color: #e5e7eb;
  white-space: nowrap;
}

/* preferences */

.ct-dealerSettingsToggleRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(31, 41, 55, 0.9);
}

.ct-dealerSettingsToggleRow:first-of-type {
  border-top: none;
}

.ct-dealerSettingsToggleTitle {
  font-size: 13px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ct-dealerSettingsToggleText {
  font-size: 12px;
    color: #9ca3af;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* simple switch */

.ct-dealerSettingsToggleControl {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.ct-dealerSettingsToggleControl input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ct-dealerSettingsToggleSwitch {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.9);
  position: relative;
  transition: background 0.15s ease;
}

.ct-dealerSettingsToggleSwitch::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #9ca3af;
  top: 2px;
  left: 2px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.ct-dealerSettingsToggleControl input:checked
  + .ct-dealerSettingsToggleSwitch {
  background: #3b82f6;
}

.ct-dealerSettingsToggleControl input:checked
  + .ct-dealerSettingsToggleSwitch::before {
  transform: translateX(18px);
  background: #f9fafb;
}

/* Inventory KPI row */
.ct-dealerKpis--inventory {
  display: flex;
  gap: 24px;
  margin: 24px 0 32px;
  flex-wrap: wrap;
}

/* Individual KPI card – gradient box */
.ct-dealerKpis--inventory .ct-dealerKpiCard {
  flex: 1 0 0;
  max-width: 240px;
  padding: 16.8px 16.8px 16.8px 16.8px;
  border-radius: 10px;
  border: 0.8px solid #1e2939;
  background: linear-gradient(135deg, #101828 0%, #030712 100%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Label text – 14px, #99A1AF */
.ct-dealerKpis--inventory .ct-dealerKpiLabel {
  margin: 0;
  color: #99a1af;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* ~142% */
}

/* Value text – 24px, bold */
.ct-dealerKpis--inventory .ct-dealerKpiValue {
  margin: 0;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* ~133% */
  color: #ffffff; /* default white */
}

/* Colour variants for values */
.ct-dealerKpis--inventory .ct-dealerKpiValue--neutral {
  color: #ffffff;
}

.ct-dealerKpis--inventory .ct-dealerKpiValue--green {
  color: #05df72; /* Active */
}

.ct-dealerKpis--inventory .ct-dealerKpiValue--blue {
  color: #2b7fff; /* Total offers (7d) */
}

/* Small screens */
@media (max-width: 900px) {
  .ct-dealerKpis--inventory {
    gap: 16px;
  }

  .ct-dealerKpis--inventory .ct-dealerKpiCard {
    max-width: none;
  }
}

/* Inventory KPIs (single box) */
.ct-dealerKpis--inventory{
  margin: 24px 0 32px;
}

.ct-dealerKpis--inventory .ct-dealerInvKpiBox{
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  border: 0.8px solid #1e2939;
  background: linear-gradient(135deg, #101828 0%, #030712 100%);
  padding: 14px 18px;
}

.ct-dealerKpis--inventory .ct-dealerInvKpiRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}

.ct-dealerKpis--inventory .ct-dealerInvKpiRow + .ct-dealerInvKpiRow{
  border-top: 1px solid rgba(30, 41, 57, 0.65);
}

.ct-dealerKpis--inventory .ct-dealerInvKpiLeft{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.ct-dealerKpis--inventory .ct-dealerInvKpiKey{
  color: #99a1af;
  font-size: 14px;
  line-height: 20px;
}

.ct-dealerKpis--inventory .ct-dealerInvKpiDash{
  color: rgba(153, 161, 175, 0.7);
}

.ct-dealerKpis--inventory .ct-dealerInvKpiVal{
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px){
  .ct-dealerKpis--inventory .ct-dealerInvKpiBox{
    max-width: none;
  }
}

/* Buttons with icon + label */
.ct-dealerPrimaryBtn,
.ct-dealerBtn {
  display: inline-flex;
  align-items: center;   /* vertically center icon + text */
  justify-content: center;
  gap: 8px;              /* space between icon and text */
  line-height: 1;        /* stop the text line-height pushing things off */
}

/* Make SVGs stop sitting on the baseline */
.ct-dealerPrimaryBtn svg,
.ct-dealerBtn svg {
  display: block;
}


/* NEW: Analytics chart axes + dots */

/* UPDATED: dashed horizontal grid lines */
.ct-dealerChartGridLine {
  stroke: #6b7280;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.ct-dealerChartYAxisLabel,
.ct-dealerChartXAxisLabel {
  font-size: 10px;
  fill: #6b7280;
}

/* X labels sit just under the line area */
.ct-dealerChartXAxisLabel {
  dominant-baseline: hanging;
}

/* Y labels are centred on their grid lines */
.ct-dealerChartYAxisLabel {
  dominant-baseline: central;
}

/* Data point dots */
.ct-dealerChartDot {
  stroke-width: 0.7;
}

/* Match your Figma colours: blue views, green offers */
/* UPDATED: stroke matches fill so the line passes cleanly through the dots */
.ct-dealerChartDot--views {
  fill: #3b82f6;
  stroke: #3b82f6; /* was #020617 */
}

.ct-dealerChartDot--offers {
  fill: #22c55e;
  stroke: #22c55e; /* was #020617 */
}

/* NEW: vertical Y-axis line */
.ct-dealerChartAxisLine {
  stroke: #6b7280;
  stroke-width: 1;
}

/* NEW: short ticks next to Y-axis labels */
.ct-dealerChartAxisTick {
  stroke: #6b7280;
  stroke-width: 1;
}

/* X-axis ticks under date labels */
.ct-dealerChartAxisTickX {
  stroke: #6b7280;
  stroke-width: 1;
}

/* --- Analytics KPI top row & icon boxes --- */

/* Row so we can later add a trend arrow on the right if you want */
.ct-dealerKpi__topRow {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* or space-between if you add a right-hand icon */
  margin-bottom: 16px;
}

.ct-dealerKpiIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
}

.ct-dealerKpiIcon svg {
  display: block;
}

/* Views icon box (blue) */
.ct-dealerKpiIcon--views {
  border: 0.8px solid rgba(43, 127, 255, 0.20);
  background: rgba(43, 127, 255, 0.10);
}

/* Offers icon box (green) */
.ct-dealerKpiIcon--offers {
  border: 0.8px solid rgba(0, 201, 80, 0.20);
  background: rgba(0, 201, 80, 0.10);
}

/* Conversion icon box (purple) */
.ct-dealerKpiIcon--conversion {
  border: 0.8px solid rgba(173, 70, 255, 0.20);
  background: rgba(173, 70, 255, 0.10);
}

/* Social clicks icon box (yellow) */
.ct-dealerKpiIcon--social {
  border: 0.8px solid rgba(240, 177, 0, 0.20);
  background: rgba(240, 177, 0, 0.10);
}


/* ----------------------------------------
 * Analytics – Top plates by conversion
 * ------------------------------------- */

#ctDealerTopPlatesConversion {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ct-dealerConvItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: radial-gradient(circle at top left, #020617 0%, #020617 35%, #020617 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.ct-dealerConvLeft {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-dealerConvTitle {
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
}

.ct-dealerConvMeta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: #9ca3af;
}

.ct-dealerConvStat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-dealerConvStatIcon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 1);
  /* you’ll drop your SVG in here later */
}

.ct-dealerConvRight {
  text-align: right;
  flex: 0 0 auto;
}

.ct-dealerConvPct {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #22c55e;
}

.ct-dealerConvLabel {
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
}

.ct-dealerSharePlateWrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.ct-dealerShareListingPrice {
  color: #ffffff;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

.ct-dealerShareListingTagline {
  color: #99a1af;
  font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
  margin: 0;
}

/* Share packs checkbox (unselected) */
.ct-dealerShareCheckbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ct-dealerShareCheckboxBox {
  width: 16px;
  height: 16px;
  border-radius: 4px;

  /* Unselected style (screenshot 1) */
  background: #f3f3f5;
  border: 0.8px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Center any icon we inject later */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Selected style (screenshot 2/3) */
.ct-dealerShareCheckbox.is-checked .ct-dealerShareCheckboxBox {
  background: #030213;
  border: 0.8px solid #030213;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Placeholder checkmark (so it works now without your SVG) */
.ct-dealerShareCheckbox.is-checked .ct-dealerShareCheckboxBox::after {
  content: "✓";
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  transform: translateY(-0.5px);
}


/* ================================
   Share Packs checkbox – FINAL
   (override any older circular styles)
================================ */

/* Kill the old outer circle wrapper styling */
.ct-dealerShareCheckbox {
  width: auto !important;
  height: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The actual 16x16 control */
.ct-dealerShareCheckboxBox {
  width: 16px !important;
  height: 16px !important;
  border-radius: 4px !important;
  background: #f3f3f5 !important;
  border: 0.8px solid rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;

  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Remove the placeholder ✓ and replace with SVG-mask (hidden unless checked) */
.ct-dealerShareCheckboxBox::after {
  content: "" !important;
  width: 14px;
  height: 14px;
  opacity: 0;
  background: #ffffff;

  /* You'll set --ct-share-check-icon to your svg url */
  -webkit-mask: var(--ct-share-check-icon) no-repeat center / 14px 14px;
  mask: var(--ct-share-check-icon) no-repeat center / 14px 14px;
}

/* Checked state */
.ct-dealerShareCheckbox.is-checked .ct-dealerShareCheckboxBox {
  background: #030213 !important;
  border-color: #030213 !important;
}

.ct-dealerShareCheckbox.is-checked .ct-dealerShareCheckboxBox::after {
  opacity: 1;
}

/* Optional: nicer focus on the card, not the tiny checkbox */
.ct-dealerShareListingCard:focus { outline: none; }
.ct-dealerShareListingCard:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.6);
  outline-offset: 3px;
}

:root {
  --ct-share-check-icon: url("/assets/icons/check.svg");
}

/* Share Packs – Stepper (compact + centered) */

.ct-dealerShareStepper{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  /* keeps the whole stepper from stretching across the page */
  width: 100%;
  max-width: 560px;
  margin: 24px auto 24px;
}

.ct-dealerShareStepLine{
  /* was flex:1; which stretches + pushes dots apart */
  flex: 0 0 clamp(56px, 10vw, 120px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    rgba(31, 41, 55, 0.9),
    rgba(15, 23, 42, 1)
  );
}

.ct-dealerShareListingGrid {
  display: grid;
  /* Share packs Step 1: show 6 items as 2 rows of 3 (desktop) */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 980px) {
  .ct-dealerShareListingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ct-dealerShareListingGrid {
    grid-template-columns: 1fr;
  }
}

.ct-dealerSharePager {
  display: flex;
  justify-content: center;
  margin: 6px 0 18px;
}

.ct-dealerSharePager[hidden] {
  display: none;
}

.ct-dealerSharePagerInner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ct-dealerSharePagerSpacer {
  width: 42px;
  height: 42px;
}

.ct-dealerSharePagerArrow {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.45);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.ct-dealerSharePagerArrow:hover {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ct-dealerSharePagerPages {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.35);
}

.ct-dealerSharePagerBtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font: 700 14px/1 Arial;
}

.ct-dealerSharePagerBtn:hover {
  border-color: rgba(59, 130, 246, 0.45);
}

.ct-dealerSharePagerBtn.is-active {
  background: rgba(59, 130, 246, 0.95);
  border-color: rgba(59, 130, 246, 0.95);
  color: #fff;
}

.ct-dealerSharePreviewGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:16px;
  margin: 0 0 18px 0;
}

.ct-dealerSharePreviewCard{
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 16px;
  background: rgba(2,6,23,0.35);
  overflow: hidden;
}

.ct-dealerSharePreviewTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px;
}

.ct-dealerSharePreviewImg{
  width:100%;
  display:block;
}


/* Vehicles preview */
.ct-dealerShareStylePreview.is-vehicles{
  background-image: url("/assets/sharepack/vehicles-preview.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.ct-dealerShareStylePreviewPlate{
  position: absolute;
  left: 50%;
  top: 68%; /* tweak until it sits on the car plate */
  transform: translate(-50%, -50%);
  background: #e4e5e6;               /* your plate grey */
  color: #111827;
  border-radius: 6px;
  padding: 10px 18px;
  font-family: UKNumberPlate, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 22px;
  border: 3px solid rgba(59,130,246,0.9); /* optional */
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

/* Plate pair preview */


.ct-dealerSharePlatePairDemo{
  display: grid;
  gap: 12px;
}

.ct-dealerShareMiniPlate{
  min-width: 220px;
  text-align: center;
  border-radius: 8px;
  padding: 10px 16px;
  font-family: UKNumberPlate, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 22px;
  border: 2px solid rgba(17,24,39,0.25);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
}

.ct-dealerShareMiniPlate--front{
  background: #f3f4f6;
  color: #111827;
}

.ct-dealerShareMiniPlate--rear{
  background: #dedf17;
  color: #111827;
}

/* Dealer card preview */
.ct-dealerShareStylePreview.is-dealercard{
  display: grid;
  place-items: center;
  background: radial-gradient(900px 380px at 30% 20%, rgba(59,130,246,0.22), transparent),
              rgba(0,0,0,0.16);
}

.ct-dealerShareDealerCardDemo{
  width: 86%;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 18px 36px rgba(0,0,0,0.32);
}

.ct-dealerShareDealerCardTop,
.ct-dealerShareDealerCardBottom{
  color: rgba(255,255,255,0.78);
  font-size: 13px;
}

.ct-dealerShareDealerCardPlate{
  margin: 12px 0;
  background: #e4e5e6;
  color: #111827;
  border-radius: 8px;
  padding: 10px 16px;
  text-align: center;
  font-family: UKNumberPlate, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 24px;
  border: 2px solid rgba(17,24,39,0.25);
}

.ct-dealerShareStylePreview.is-vehicles{
  background-image: url("/assets/sharepack/vehicles-preview.png?v=2");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ct-dealerShareStylePreview.is-vehicles{
  background-image: url("/assets/sharepack/vehicles-preview.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Make the preview span full width (no inset) */
.ct-dealerShareStyleCard .ct-dealerShareStylePreview{
  width: 100%;
  display: block;
  margin: 0;
}

/* If you currently have padding on the card that causes the preview to be inset,
   remove it and move padding to the body instead. */
.ct-dealerShareStyleCard{
  padding: 0;                 /* key: remove inset */
  overflow: hidden;           /* key: clip to rounded corners */
  border-radius: 22px;        /* whatever you're using */
}

/* Only round the TOP corners of the image area, bottom stays flat */
.ct-dealerShareStylePreview{
  height: 220px;              /* tweak */
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Put padding back on the text area so it still looks nice */
.ct-dealerShareStyleBody{
  padding: 18px 18px 20px;
}

.ct-dealerShareStyleCard.is-selected{
  border-color: rgba(0,0,0,0.9) !important;
  box-shadow: none !important;
}

.ct-dealerShareStyleBody h3{
  color: #fff !important;
}

/* Share pack style cards: black border by default, white on hover/selected */
.ct-dealerShareStyleCard {
  border: 1px solid rgba(0, 0, 0, 0.9) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ct-dealerShareStyleCard:hover {
  border-color: rgba(255, 255, 255, 0.95) !important;
}

.ct-dealerShareStyleCard.is-selected {
  border-color: rgba(255, 255, 255, 0.95) !important;
}

/* Nice keyboard focus too (optional but recommended) */
.ct-dealerShareStyleCard:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.ct-dealerShareStyleCard:hover {
  transform: translateY(-1px);
}

/* Ensure overlays can be positioned inside previews */
.ct-dealerShareStylePreview{
  position: relative;
}

/* Plate Pair preview uses your saved image */
.ct-dealerShareStylePreview.is-platepair{
  background-image: url("/assets/sharepack/option2preview.png");
  background-size: cover;
  background-position: center 26%; /* move image DOWN inside the frame */
  background-repeat: no-repeat;
}


/* shared plate overlay styling */
.ct-dealerShareStylePreviewPlate--front,
.ct-dealerShareStylePreviewPlate--rear{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: UKNumberPlate, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 22px;
  color: #111827;
  border-radius: 8px;
  padding: 10px 18px;
  box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

/* independent placement (tweak these visually) */
.ct-dealerShareStylePreviewPlate--front{
  top: 26%;
  background: #f3f4f6;
  border: 2px solid rgba(17,24,39,0.18);
}

.ct-dealerShareStylePreviewPlate--rear{
  top: 60%;
  background: #DEDE17;
  border: 3px solid #D1C044;
}

/* Dealer card preview uses your saved image */
.ct-dealerShareStylePreview.is-dealercard{
  background-image: url("/assets/sharepack/dealer-plate-preview.png");
  background-size: cover;
  background-position: center 30%; /* try 60–85% */
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0.16); /* fallback while loading */
}


/* ================================
   Share Packs Step 3: Showcase + Phone preview
   ================================ */

.ct-dealerShareShowcase {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 360px;
  gap: 18px;
  align-items: start;
  margin: 14px 0 18px;
}

@media (max-width: 980px) {
  .ct-dealerShareShowcase {
    grid-template-columns: 1fr;
  }
}

.ct-dealerShareShowcaseCard {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(900px 380px at 30% 20%, rgba(59,130,246,0.20), transparent),
              rgba(255,255,255,0.04);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45);
}

.ct-dealerShareShowcaseTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.ct-dealerShareShowcaseMedia {
  padding: 14px;
}

.ct-dealerShareShowcaseImg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

/* Preview grid selection state */
.ct-dealerSharePreviewCard.is-active {
  outline: 2px solid rgba(59,130,246,0.9);
  outline-offset: 2px;
}

/* ================================
   Phone frame (no image needed)
   ================================ */

.ct-dealerSharePhoneFrame {
  border-radius: 34px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: black;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}

.ct-dealerSharePhoneScreen {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.10);
  min-height: 640px;
}

/* Subtle glass highlight */
.ct-dealerSharePhoneScreen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,0.10), transparent 35%, transparent 70%, rgba(255,255,255,0.06));
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.35;
}

/* Notch */
.ct-dealerSharePhoneNotch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 5;
}

/* Home indicator */
.ct-dealerSharePhoneHome {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  z-index: 5;
}

/* ================================
   Facebook post mock UI
   ================================ */

.ct-dealerShareFbPost {
  padding: 14px 14px 22px;
  color: rgba(255, 255, 255, 0.92);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.ct-dealerShareFbHeader {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 22px; /* leaves room under notch */
}

.ct-dealerShareFbAvatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  background: rgba(59,130,246,0.22);
  border: 1px solid rgba(255,255,255,0.12);
}

.ct-dealerShareFbNameRow {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}

.ct-dealerShareFbName {
  font-weight: 800;
  font-size: 14px;
}

.ct-dealerShareFbVerified {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(59,130,246,0.35);
  color: rgba(255,255,255,0.92);
}

.ct-dealerShareFbMeta {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
}

.ct-dealerShareFbMenu {
  color: rgba(255,255,255,0.70);
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.ct-dealerShareFbCaption {
  margin: 10px 0 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.86);
  white-space: pre-wrap;
}

.ct-dealerShareFbImageWrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.ct-dealerShareFbImg {
  width: 100%;
  height: auto;
  display: block;
}

/* Action row */
.ct-dealerShareFbActions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.ct-dealerShareFbAction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.82);
  font-size: 13px;
  font-weight: 700;
}

/* Placeholder icon (swap with your SVG later) */
.ct-dealerShareFbIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-radius: 4px;
  background: rgba(255,255,255,0.18);
}

/* =========================================
   Phone preview: switch to white Facebook UI
   (paste at END of dealer-portal.css)
   ========================================= */

.ct-dealerSharePhoneScreen{
  background: #ffffff;              /* white phone background */
  border: 1px solid rgba(15,23,42,0.12);
}

/* remove the dark “glass” overlay so white stays crisp */
.ct-dealerSharePhoneScreen::before{
  opacity: 0.08;
  mix-blend-mode: normal;
}

/* Facebook post container on white */
.ct-dealerShareFbPost{
  color: rgba(15,23,42,0.92);       /* dark text */
}

/* Name / meta */
.ct-dealerShareFbName{
  color: rgba(15,23,42,0.92);
}

.ct-dealerShareFbMeta{
  color: rgba(15,23,42,0.62);
}

/* Avatar becomes subtle on white */
.ct-dealerShareFbAvatar{
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.92);
}

/* Verified pill stays “blue”, just tuned for white */
.ct-dealerShareFbVerified{
  background: rgba(59,130,246,0.12);
  border: 1px solid rgba(59,130,246,0.28);
  color: rgba(15,23,42,0.85);
}

/* The “•••” menu button */
.ct-dealerShareFbMenu{
  color: rgba(15,23,42,0.70);
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.04);
}

/* Caption text */
.ct-dealerShareFbCaption{
  color: rgba(15,23,42,0.85);
}

/* Image frame looks more like FB on white */
.ct-dealerShareFbImageWrap{
  border: 1px solid rgba(15,23,42,0.10);
  background: rgba(15,23,42,0.03);
}

/* Action buttons row */
.ct-dealerShareFbActions{
  border-top: 1px solid rgba(15,23,42,0.10);
}

.ct-dealerShareFbAction{
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
  color: rgba(15,23,42,0.80);
}

/* Placeholder icon block on white */
.ct-dealerShareFbIcon{
  background: rgba(15,23,42,0.16);
}

/* Notch + home indicator still dark like a real phone */
.ct-dealerSharePhoneNotch{
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(0,0,0,0.55);
}

.ct-dealerSharePhoneHome{
  background: rgba(15,23,42,0.18);
}

/* FB menu (3-dot) button */
.ct-dealerShareFbMenu{
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 32px;
  padding: 0;
  border-radius: 10px;

  background: white;
  color: #65686C; /* <-- your requested icon colour */
  cursor: default;
}

.ct-dealerShareFbMenuIcon{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor; /* uses .ct-dealerShareFbMenu color */
}

/* Optional: subtle hover/focus like FB */


.ct-dealerShareFbMenu:focus{
  outline: 2px solid rgba(59,130,246,0.55);
  outline-offset: 2px;
}

/* 3-dot menu: icon only (no border / no box) */
.ct-dealerShareFbMenu{
  width: auto;
  height: auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  color: #65686C; /* icon colour */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* keep SVG sizing */
.ct-dealerShareFbMenuIcon{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* optional: FB-like hover tap target without a visible border */
.ct-dealerShareFbMenu:hover{
  background: rgba(15,23,42,0.06) !important;
  border-radius: 999px;
  padding: 6px;
}

/* optional: focus ring (keyboard) */
.ct-dealerShareFbMenu:focus{
  outline: none;
}

/* Action icons */
.ct-dealerShareFbActionIcon{
  width: 16px;
  height: 16px;
  display: block;
  color: #65686C;           /* FB-ish grey */
}

.ct-dealerShareFbActionIcon path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Remove old placeholder square if still present anywhere */
.ct-dealerShareFbIcon{
  display: none !important;
}

/* ============================
   FB actions row: no divider lines, no outlined buttons
   ============================ */

/* remove the grey divider line(s) */
.ct-dealerShareFbActions{
  border-top: 0 !important;
  padding-top: 10px;               /* keep spacing */
  margin-top: 10px;
  display: flex;                   /* row like FB */
  align-items: center;
  justify-content: space-around;
  gap: 0;
}

/* make each action look like FB: icon + label, no pill */
.ct-dealerShareFbAction{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(15,23,42,0.78);
  font-size: 12.5px;
  font-weight: 600;
}

/* subtle FB hover only */
.ct-dealerShareFbAction:hover{
  background: rgba(15,23,42,0.06) !important;
}

/* icon matches your existing colour */
.ct-dealerShareFbActionIcon{
  width: 16px;
  height: 16px;
  color: #65686C;
}

/* IMPORTANT: your Like SVG path is currently FILLED, so force it to use stroke like the others */
.ct-dealerShareFbActionIcon path{
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* but if any icon is meant to be filled, allow it explicitly by adding .is-fill later */
.ct-dealerShareFbActionIcon.is-fill path{
  fill: currentColor !important;
  stroke: none !important;
}

/* FB actions: force perfect 3-column centering */
.ct-dealerShareFbActions{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;   /* each button centered in its column */
  gap: 0;
  width: 100%;
}

/* Ensure each button doesn’t “hug” left inside its column */

/* Keep actions in a 3-col row */
.ct-dealerShareFbActions{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  width: 100%;
}

/* Force each action to be HORIZONTAL (icon left, text right) */
.ct-dealerShareFbAction{
  width: auto !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;   /* prevents label breaking */
  padding: 6px 8px !important;
  line-height: 1 !important;
}

/* Make sure SVG never becomes a block that pushes text down */
.ct-dealerShareFbActionIcon{
  display: inline-block !important;
  flex: 0 0 auto !important;
}

/* FB actions row: equal spacing with Comment dead-centre */
.ct-dealerShareFbPost .ct-dealerShareFbActions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0; /* no grey divider */
}

.ct-dealerShareFbPost .ct-dealerShareFbAction{
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;

  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 8px;
}

.ct-dealerShareResultsStack{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.ct-dealerShareResultRow{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:22px;
  align-items:start;
}

.ct-dealerShareResultLeft{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.ct-dealerShareDownloadOne{
  width:100%;
  max-width:340px;
}

@media (max-width: 980px){
  .ct-dealerShareResultRow{
    grid-template-columns: 1fr;
  }
  .ct-dealerShareDownloadOne{
    max-width:100%;
  }
}


/* Share Packs: caption tabs (Short / Standard / Hype) */
.ct-dealerShareCaptionTabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  margin: 8px 0 12px;
}

.ct-dealerShareCaptionTab {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 9px 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.ct-dealerShareCaptionTab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}

.ct-dealerShareCaptionTab.is-active {
  background: rgba(59, 130, 246, 0.22);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #ffffff;
}

.ct-dealerShareCaptionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ct-dealerShareCaptionTitle span {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
}


/* =========================
   Share Packs — iPhone preview + caption tabs
   ========================= */

.ct-dealerShareRow{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:24px;
  align-items:start;
}

.ct-dealerShareLeft{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.ct-dealerShareDownloadThis{
  width:min(360px, 100%);
}

.ct-dealerSharePhoneFrame{
  width:360px;
  max-width:100%;
  background:#05060a;
  border-radius:46px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}

.ct-dealerSharePhoneScreen{
  position:relative;
  background:#fff;
  border-radius:38px;
  overflow:hidden;
}


.ct-dealerSharePhoneHome{
  height:24px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ct-dealerSharePhoneHome::before{
  content:"";
  width:140px;
  height:5px;
  border-radius:999px;
  background:rgba(15,23,42,.18);
}

/* FB post inside phone */
.ct-dealerShareFbPost{
  padding:0px 16px 10px;
  color:#0f172a;
}

.ct-dealerShareFbHeader{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.ct-dealerShareFbAvatar{
  width:40px;
  height:40px;
  border-radius:999px;
  background:#e2e8f0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#0f172a;
  flex:0 0 auto;
}

.ct-dealerShareFbNameRow{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.2;
}

.ct-dealerShareFbName{
  font-weight:800;
}

.ct-dealerShareFbVerified{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(59,130,246,.14);
  color:#1d4ed8;
  font-weight:700;
}

.ct-dealerShareFbMeta{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.ct-dealerShareFbMenu{
  margin-left:auto;
  border:0;
  background:transparent;
  color:#64748b;
  padding:6px;
  border-radius:10px;
}

.ct-dealerShareFbMenuIcon{
  width:18px;
  height:18px;
  fill:currentColor;
}

.ct-dealerShareFbCaption{
  margin:12px 0 12px;
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
}

.ct-dealerShareFbImageWrap{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:#f1f5f9;
}

.ct-dealerShareFbImg{
  width:100%;
  display:block;
}

.ct-dealerShareFbActions{
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap:6px;
  padding:10px 10px 12px;
}

.ct-dealerShareFbAction{
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  color:#334155;
  font-weight:700;
  font-size:14px;
  padding:6px 10px;
  border-radius:12px;
}

.ct-dealerShareFbActionIcon{
  width:18px;
  height:18px;
  color:#64748b;
  stroke:currentColor;
  fill:none;
}

/* Like icon uses fill path */
.ct-dealerShareFbActionIcon path{
  fill:currentColor;
  stroke:none;
}

/* Caption tabs */
.ct-dealerShareCaptionTabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  width:min(520px, 100%);
  margin-bottom:14px;
}

.ct-dealerShareCaptionTab{
  flex:1;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.86);
  font-weight:800;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}

.ct-dealerShareCaptionTab.is-active{
  background:rgba(59,130,246,.22);
  border:1px solid rgba(59,130,246,.55);
}

/* Mobile: stack */
@media (max-width: 980px){
  .ct-dealerShareRow{
    grid-template-columns: 1fr;
  }
  .ct-dealerShareLeft{
    align-items:flex-start;
  }
}


/* =========================
   SHARE PACK STEP 3 FIXES
   ========================= */

/* Hide any legacy "showcase" card if it still exists somewhere */
.ct-dealerShareShowcase,
.ct-dealerShareShowcaseCard {
  display: none !important;
}

/* iPhone notch: make it subtle again */
.ct-dealerSharePhoneNotch {
  width: 160px;
  height: 18px;
  top: 10px;
  border-radius: 14px;
  background: rgba(20, 20, 20, 0.78);
}

/* Inside the iPhone FB post, actions should be grey on white (not white-on-dark) */
.ct-dealerShareFbPost .ct-dealerShareFbActions {
  display: flex;
  justify-content: space-around;
  gap: 8px;
  padding: 0px 14px 0px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  background: transparent;
}

.ct-dealerShareFbPost .ct-dealerShareFbAction {
  background: transparent;
  border: 0;
  color: #606770;
  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.ct-dealerShareFbPost .ct-dealerShareFbActionIcon {
  width: 18px;
  height: 18px;
  color: #606770;
}

/* Make multi-line captions render nicely in the phone */
.ct-dealerShareFbCaption {
  white-space: pre-line;
}


/* =========================================================
   Share Packs Step 3 — hard overrides (keep UI correct)
   ========================================================= */

/* 1) IMPORTANT: keep the preview grid hidden (it exists for download-all logic) */
#ctDealerSharePreviewGrid[hidden]{
  display: none !important;
}

/* 2) Fix the notch/top bar being oversized again */
.ct-dealerSharePhoneNotch{
  width: 150px !important;
  height: 18px !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 18px !important;
  background: #0b1220 !important;
  opacity: 0.92 !important;
}

/* 3) Menu button: dots only (no border box) */
.ct-dealerShareFbMenu{
  background: transparent !important;
  border: 0 !important;
  padding: 4px !important;
}

/* 4) Like / Comment / Send row: FB style (no grey pill buttons) */
.ct-dealerShareFbActions{
  border-top: 1px solid rgba(15,23,42,0.10) !important;
}

.ct-dealerShareFbAction{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  color: rgba(15,23,42,0.72) !important;
}

/* 5) Ensure icons render consistently (stroke-based look) */
.ct-dealerShareFbActionIcon{
  width: 18px !important;
  height: 18px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
}

/* Force stroke icons even if other CSS tried to fill */
.ct-dealerShareFbActionIcon path{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* --- Fix notch clipping: give the screen more headroom + nudge notch down --- */
.ct-dealerSharePhoneScreen{
  /* add a bit more breathing room */
  padding-top: 22px !important;
  padding-bottom: 22px !important;

  /* if any parent is clipping children, this helps */
  overflow: visible !important;
}

/* notch a touch lower so it doesn't kiss the top edge */
.ct-dealerSharePhoneNotch{
  top: 10px !important;
}

/* --- Fix bottom clipping: ensure post has bottom room --- */
.ct-dealerShareFbPost{
  padding-bottom: 14px !important;
}

/* If you have a "home bar" element, keep it from pushing/cropping */
.ct-dealerSharePhoneHome{
  margin-top: 10px !important;
}

/* --- Remove the grey line across the phone (actions divider) --- */
.ct-dealerShareFbActions{
  border-top: 0 !important;
}

.ct-dealerSharePhoneNotch{
  width: 150px !important;
  height: 18px !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  /* ✅ perfect pill (same curve on all corners) */
  border-radius: 9999px !important;

  background: #0b1220 !important;
  opacity: 0.92 !important;

  /* optional: helps it look crisp on light bg */
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset !important;
}


/* =========================================================
   Step 3 — make caption panel larger + textarea roomy
   ========================================================= */

/* The right-hand caption card */
.ct-dealerShareCaptionCard{
  min-height: 240px !important;        /* increase overall card height */
  padding: 16px !important;
}

/* If your caption “frame” wrapper is the thing limiting height */
.ct-dealerShareCaptionFrame{
  min-height: 240px !important;
}

/* Make the textarea itself larger */
.ct-dealerShareCaptionTextarea{
  min-height: 150px !important;        /* visible space */
  height: 150px !important;            /* ensure it actually grows */
  width: 100% !important;
  resize: vertical !important;         /* allow manual expand if desired */
  line-height: 1.35 !important;
}

/* In case the textarea lives inside a flex column, ensure it can grow */
.ct-dealerShareCaptionBody{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.ct-dealerShareCaptionBody .ct-dealerShareCaptionTextarea{
  flex: 1 1 auto !important;
}

/* =========================================================
   Step 3 — enlarge caption editor (real classnames)
   ========================================================= */

/* Make the right panel a bit wider if it’s being constrained */
.ct-dealerShareRight{
  min-width: 420px;
}

/* Make the caption group card itself taller */
.ct-dealerShareCaptionGroup{
  padding: 16px !important;
  border-radius: 16px !important;
}

/* ✅ This is the real textarea class you have */
textarea.ct-dealerShareCaption{
  min-height: 190px !important;  /* was 72px */
  height: 190px !important;
  width: 100% !important;
  resize: vertical !important;
  line-height: 1.4 !important;
}

/* If the group is inside a flex layout, allow it to grow */
.ct-dealerShareRight{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Keep header from squeezing the textarea */
.ct-dealerShareCaptionHeader{
  margin-bottom: 10px !important;
}

/* =========================================================
   Step 3 — Facebook-like caption typography
   ========================================================= */

/* Right panel textarea typography (FB-ish) */
textarea.ct-dealerShareCaption{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
  letter-spacing: 0 !important;

  /* keep your dark UI but make text feel like FB */
  color: rgba(245, 250, 255, 0.92) !important;
}

/* Optional: slightly soften placeholder too (if any) */
textarea.ct-dealerShareCaption::placeholder{
  color: rgba(245, 250, 255, 0.55) !important;
}

/* iPhone preview caption should match FB typography too */
.ct-dealerShareFbCaption{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.34 !important;
  color: rgba(15, 23, 42, 0.92) !important;
}

/* FB caption spacing */
.ct-dealerShareFbCaption{
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  white-space: pre-wrap !important; /* preserve line breaks like FB */
}


/* =========================================================
   Step 3 — Header UI + Facebook-like header typography
   ========================================================= */

.ct-dealerShareHeaderTabs{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.ct-dealerShareHeaderTab{
  appearance: none;
  border: 1px solid rgba(59,130,246,0.35);
  background: rgba(15,23,42,0.55);
  color: rgba(245,250,255,0.92);
  padding: 10px 16px;
  border-radius: 999px;
      font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  cursor: pointer;
  height: 40px;

}

.ct-dealerShareHeaderTab.is-active{
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.65);
}

.ct-dealerShareHeaderGroup{
  border: 0px solid rgba(31,41,55,0.9);
  background: transparent;
  border-radius: 16px;
  padding: 12px;
}

.ct-dealerShareHeaderRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ct-dealerShareHeaderLabel{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: rgba(245,250,255,0.92);
}

/* Right panel header input typography (FB-ish) */
.ct-dealerShareHeaderInput{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.9);
  background: rgba(10, 16, 30, 0.65);
  color: rgba(245,250,255,0.92);
  font-family: system-ui, -apple-system, "Segoe UI Historic","Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

/* iPhone post header above caption */
.ct-dealerShareFbHeaderText{
  font-family: system-ui, -apple-system, "Segoe UI Historic","Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(15,23,42,0.92);
  margin: 6px 0 6px;
}

/* wrap both header+caption nicely */
.ct-dealerShareFbText{
  padding: 0 12px 8px;
}


/* =========================================================
   Step 3 — align FB header (avatar + name/meta) with post text
   ========================================================= */

/* Add a consistent left/right gutter for the entire header row */
.ct-dealerShareFbHeader{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Ensure the header content doesn't overflow into the edge */
.ct-dealerShareFbHeader{
  align-items: center !important;
  gap: 10px !important;
}

/* Keep avatar from overhanging */
.ct-dealerShareFbAvatar{
  margin-left: 0 !important;
}

/* Make sure the text block (name/meta) aligns with caption/header block */
.ct-dealerShareFbText{
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Step 3 — add a bit more breathing room between profile row and header text */
.ct-dealerShareFbHeader{
  margin-bottom: 10px !important; /* increase/decrease to taste (8–14px) */
}

/* (Optional) if you want the header itself to sit a touch lower too */
.ct-dealerShareFbHeaderText{
  margin-top: 2px !important;
}

/* iPhone caption hyperlink styling */
.ct-dealerShareFbCaptionLink{
  display: inline-block;
  margin-top: 10px;
  color: #1877F2 !important; /* FB-ish blue */
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.ct-dealerShareFbCaptionLink:hover{
  text-decoration: underline;
}

.ct-dealerShareFbCaptionBody{
  white-space: pre-wrap; /* keep line breaks like FB */
}


/* =========================================================
   Step 3 — reduce big vertical gaps (Header ↔ Caption ↔ Link)
   ========================================================= */

/* The whole right column: tighten spacing between stacked sections */
.ct-dealerShareRight{
  gap: 14px !important; /* was effectively larger via margins; 12–16 is nice */
}

/* Header block and caption block: remove excessive bottom margins */
.ct-dealerShareHeaderBlock{
  margin-bottom: 0 !important;
}

.ct-dealerShareCaptionGroup{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce space between caption textarea card and tracking section */
.ct-dealerShareTracking{
  margin-top: 0 !important;
  padding-top: 10px !important;  /* keep a little separation */
}

/* If your tracking section is creating extra space via label margin */
.ct-dealerShareTrackingLabel{
  margin-bottom: 6px !important;
}

/* If your header group has extra padding making it feel huge */
.ct-dealerShareHeaderGroup{
  margin-top: 8px !important;
}

/* If the caption tabs or header tabs have extra margin under them */

.ct-dealerShareHeaderBlock,
.ct-dealerShareCaptionGroup,
.ct-dealerShareTracking{
  padding-bottom: 0 !important;
}

/* =========================================================
   Share Packs: Make DESCRIPTION/CAPTION tabs match HEADER tabs
   (3 separate buttons, not a segmented carousel)
   ========================================================= */

/* Make the caption tab row look like the header tab row */
.ct-dealerShareCaptionTabs{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;

  /* kill the "big pill / carousel" look */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  /* kill horizontal scrolling/overflow behaviour if present */
  overflow: visible !important;
  white-space: normal !important;

  margin: 0 0 10px 0 !important;
}

/* Make caption buttons use the same styling as header buttons */
.ct-dealerShareCaptionTab{
  appearance: none !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  background: rgba(15, 23, 42, 0.35) !important;
  color: rgba(255,255,255,0.92) !important;

  padding: 10px 16px !important;
  border-radius: 999px !important;

  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

/* Hover */
.ct-dealerShareCaptionTab:hover{
  border-color: rgba(59,130,246,0.75) !important;
  background: rgba(59,130,246,0.16) !important;
  transform: translateY(-1px) !important;
}

/* Active state */
.ct-dealerShareCaptionTab.is-active{
  border-color: rgba(59,130,246,0.9) !important;
  background: rgba(59,130,246,0.22) !important;
}

/* If your old styles used a wide "tab rail" pseudo element, nuke it */
.ct-dealerShareCaptionTabs::before,
.ct-dealerShareCaptionTabs::after{
  content: none !important;
}

.ct-dealerShareCaptionTabs,
.ct-dealerShareCaptionTabs *{
  box-shadow: none !important;
}

/* ================================
   Share packs: caption tabs = header tabs
   ================================ */

/* Remove the "rail / outer pill / box" around the caption tabs */
.ct-dealerShareCaptionTabs{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0 !important;
  margin: 0 0 12px 0 !important;

  display: inline-flex !important; /* prevents a full-width rail */
  width: auto !important;
  gap: 10px !important;

  overflow: visible !important;
}

/* Make caption pill buttons match header pill buttons exactly */
.ct-dealerShareCaptionTab{
  /* clone header pill look */
  appearance: none !important;
  border: 1px solid rgba(59,130,246,0.45) !important;
  background: rgba(15, 23, 42, 0.35) !important;
  color: rgba(255,255,255,0.92) !important;

  border-radius: 999px !important;

  /* typography */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;

  /* sizing */
  padding: 10px 18px !important;
  height: 40px !important;          /* forces identical height */
  min-width: 110px !important;      /* forces identical width */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}

.ct-dealerShareCaptionTab:hover{
  border-color: rgba(59,130,246,0.75) !important;
  background: rgba(59,130,246,0.16) !important;
  transform: translateY(-1px) !important;
}

.ct-dealerShareCaptionTab.is-active{
  border-color: rgba(59,130,246,0.9) !important;
  background: rgba(59,130,246,0.22) !important;
}

/* -------------------------------------------------------
   Step 3 — Make Description tabs match Header tabs exactly
   (no outer wrapper box + equal-sized pills)
------------------------------------------------------- */

/* Make both tab rows behave the same */
.ct-dealerShareHeaderTabs,
.ct-dealerShareCaptionTabs{
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Just in case any pseudo-element is drawing the wrapper */
.ct-dealerShareCaptionTabs::before,
.ct-dealerShareCaptionTabs::after{
  content: none !important;
  display: none !important;
}

/* Force all pills to be identical size */
.ct-dealerShareHeaderTabs .ct-dealerShareHeaderTab,
.ct-dealerShareCaptionTabs .ct-dealerShareHeaderTab{
  flex: 0 0 140px;            /* <-- adjust if you want wider/narrower */
  text-align: center;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Ensure caption tabs don't carry any extra styling */
.ct-dealerShareCaptionTab{
  background: transparent !important;
  border: 1 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.ct-dealerShareTrackingHelp{
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 0px solid rgba(59,130,246,0.18);
  background: rgba(15,23,42,0.40);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}

.ct-dealerShareTrackingHelpTitle{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(245,250,255,0.92);
  margin-bottom: 6px;
}

.ct-dealerShareTrackingHelpText{
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245,250,255,0.78);
}

.ct-dealerShareTrackingHelpStrong{
  color: rgba(245,250,255,0.92);
  font-weight: 600;
}

.ct-dealerShareTrackingHelpNote{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(245,250,255,0.62);
}

/* Settings header stack (keeps tabs under title/subtitle) */
.ct-dealerPanel__heading{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* In settings, we want subtitle tighter so tabs sit right under it */
.ct-dealerPanel[data-dealer-panel="settings"] .ct-dealerPanel__subtitle{
  margin-bottom: 12px;
}

.ct-dealerSettingsSlug{
  display:flex;
  align-items:center;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 0.75rem;
  border: 1px solid rgba(55, 65, 81, 0.9);
  overflow: hidden;           /* ✅ makes it feel like one control */
  padding: 0;                 /* ✅ no inner padding – children handle it */
  gap: 0;                     /* ✅ remove the “two-box gap” look */
  font-size: 0.85rem;
  color: #6b7280;
}

.ct-dealerSettingsSlug > span{
  padding: 0.55rem 0.75rem;
  white-space: nowrap;
  color: rgba(148, 163, 184, 0.85);
  border-right: 1px solid rgba(55, 65, 81, 0.9); /* ✅ divider */
}

.ct-dealerSettingsInput--slug{
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0.55rem 0.75rem;
  color: #e5e7eb;
  outline: none;
}

/* URL slug: prefix text + single input (no left bubble) */
.ct-dealerSettingsSlugRow{
  display:flex;
  align-items:center;
  gap: 14px;
}

.ct-dealerSettingsSlugPrefix{
  color: rgba(148, 163, 184, 0.9);
  font-size: 0.95rem;
  white-space: nowrap;
}

.ct-dealerSettingsInput--slugOnly{
  flex: 1;
  min-width: 0;
}

/* legacy: if any old slug container exists, keep it plain */
.ct-dealerSettingsSlug{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  gap: 14px !important;
}
.ct-dealerSettingsSlug > span{
  border-right: none !important;
  padding: 0 !important;
}
.ct-dealerSettingsInput--slug{
  padding: 0.55rem 0.75rem !important;
  border: 1px solid rgba(55, 65, 81, 0.9) !important;
  border-radius: 0.75rem !important;
  background: rgba(15, 23, 42, 0.9) !important;
}


/* -------------------------------------------------------
   Settings > Profile typography polish (matches reference)
-------------------------------------------------------- */

/* Card title: "Dealer profile" */
.ct-dealerSettingsTitle{
  color:#fff;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:20px;
  font-weight:700;
  line-height:28px; /* 140% */
  margin:0 0 10px;
}

/* Field labels: "Dealer name", "URL slug", etc */
.ct-dealerSettingsLabel{
  color:#fff;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:14px; /* 100% */
  margin: 15px 0 10px;
}

/* Text inputs + textarea: value typography (e.g. "Smith Plates") */
.ct-dealerSettingsInput,
.ct-dealerSettingsTextarea{
  color: rgba(245, 250, 255, 0.95);
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:20px; /* ~142.857% */
}

/* Placeholder softer */
.ct-dealerSettingsInput::placeholder,
.ct-dealerSettingsTextarea::placeholder{
  color: rgba(148, 163, 184, 0.55);
}

/* URL prefix (cartrait.uk/dealer/) */
.ct-dealerSettingsSlugPrefix{
  color:#99A1AF;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:20px; /* 142.857% */
}

/* Actual slug input (smith-plates) – ensure it reads like the main value */
.ct-dealerSettingsInput--slugOnly{
  color: rgba(245, 250, 255, 0.95);
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:20px;
}

/* Hint text under slug/description */
.ct-dealerSettingsFieldHint{
  color:#6A7282; /* matches your ref screenshot */
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:16px; /* 133.333% */
  margin-top:0px;
} 

/* Location should not span full width (match reference) */
.ct-dealerSettingsField--half{
  max-width: 520px; /* adjust if you want wider */
}

/* Description meta row: hint left + x/500 right */
.ct-dealerSettingsDescMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
}

.ct-dealerSettingsCharCount{
  color:#6A7282;
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:16px;
  white-space:nowrap;
}


/* Settings: Logo upload */
.ct-dealerSettingsUpload{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  padding:28px 22px;
  min-height:140px;

  border-radius:16px;
  border:1.6px dashed rgba(106,114,130,0.55);

  background: #0a101e;

  box-shadow:
    0 18px 42px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);

  cursor:pointer;
  user-select:none;
  text-align:left;
}

.ct-dealerSettingsUpload:hover{
  border-color:rgba(59,130,246,0.55);
  background:
    radial-gradient(1200px 240px at 30% 0%, rgba(59,130,246,0.14), transparent 55%),
    linear-gradient(180deg, rgba(10,14,24,0.78), rgba(8,12,22,0.78));
}

.ct-dealerSettingsUpload:focus-visible{
  outline:none;
  border-color:rgba(59,130,246,0.75);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 4px rgba(59,130,246,0.18);
}

.ct-dealerSettingsUpload__icon{
  width:56px;
  height:56px;
  border-radius:999px;
  display:grid;
  place-items:center;

  background:transparent;
}

.ct-dealerSettingsUpload__icon svg{
  width:48px;
  height:48px;
  display:block;
}

.ct-dealerSettingsUpload__text strong{
  display:block;
  color:rgba(245,250,255,0.92);
  font-weight:600;
  font-size:16px;
  line-height:24px;
  letter-spacing:-0.01em;
}

.ct-dealerSettingsUpload__text span{
  display:block;
  margin-top:2px;
  color:#6A7282;
  font-size:12px;
  line-height:16px;
}


/* Logo preview inside upload box */
.ct-dealerSettingsLogoPreview{
  width:64px;
  height:64px;
  border-radius:16px;
  overflow:hidden;
  display:none; /* hidden until an image is picked */
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}

.ct-dealerSettingsLogoPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Stack upload icon + text vertically (Logo box) */
.ct-dealerSettingsUpload {
  display: flex;
  flex-direction: column;     /* ✅ was row */
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;         /* ✅ center the text */
}

/* Keep the icon nicely centered */
.ct-dealerSettingsUpload__icon {
  display: grid;
  place-items: center;
}

/* Ensure the text block is also stacked + centered */
.ct-dealerSettingsUpload__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Optional: make the subtext look cleaner */
.ct-dealerSettingsUpload__text span {
  opacity: 0.9;
}

/* If you’re using the preview div, keep it centered too */
.ct-dealerSettingsLogoPreview {
  display: none;              /* will be turned on when an image loads */
  margin-bottom: 2px;
}
.ct-dealerSettingsLogoPreview img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 14px;
}

/* Settings "Save changes" (Figma style) */
.ct-dealerBtn--save {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 36px;
  padding: 8px 12px;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  text-align: center;

  background: #2B7FFF;
  border-color: #2B7FFF;
  color: #fff;
}

.ct-dealerBtn--save:hover {
  filter: brightness(1.06);
}

.ct-dealerBtn--save:active {
  filter: brightness(0.95);
}

.ct-dealerBtn--save:focus-visible {
  outline: 2px solid rgba(43, 127, 255, 0.45);
  outline-offset: 2px;
}

/* Give breathing room between the hint line and the next label (Logo) */
.ct-dealerSettingsCard__hint {
  margin-bottom: 18px;
}

/* Space above Logo label */
.ct-dealerSettingsField .ct-dealerSettingsLabel[for="ctDealerLogoInput"] {
  margin-top: 16px;
  display: inline-block; /* ensures margin applies cleanly */
}

.ct-dealerSettingsStatusDot.is-none { background: rgba(148,163,184,0.7); }
.ct-dealerSettingsStatusDot.is-approved { background: #22c55e; }
.ct-dealerSettingsStatusDot.is-rejected { background: #ef4444; }

/* Settings tabs */
.ct-dealerSettingsTab {
  position: relative;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.85);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.ct-dealerSettingsTab:hover {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.55);
  color: rgba(241, 245, 249, 0.95);
}

/* ✅ New active style: solid, premium, on-brand */
.ct-dealerSettingsTab.is-active {
  background: rgba(59, 130, 246, 0.18); /* accent block */
  border-color: rgba(59, 130, 246, 0.45);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.55);
}

/* Optional: subtle inner glow (keeps it “premium”, not loud) */
.ct-dealerSettingsTab.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

/* Keyboard focus */
.ct-dealerSettingsTab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.6);
}

/* Traffic sources legend: keep label left and % right with proper spacing */
.ct-dealerChartLegendItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;                 /* <-- this creates the “space” you want */
}

/* Ensure the left label block doesn't push into the % */
.ct-dealerChartLegendItem > div {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Make % column align nicely */
.ct-dealerChartLegendItem > span {
  margin-left: 12px;         /* extra safety space */
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.85);
}

/* -----------------------------
   Storefront plan gating + modal
------------------------------ */
.ct-dealerNotice{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.25));
  color: rgba(226, 232, 240, 0.92);
}
.ct-dealerNotice--info{
  border-color: rgba(59, 130, 246, 0.28);
  background: radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.18), rgba(2, 6, 23, 0.35));
}

.ct-dealerLocked{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.26);
  background: radial-gradient(120% 150% at 0% 0%, rgba(59, 130, 246, 0.12), rgba(2, 6, 23, 0.35));
}
.ct-dealerLocked__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}
.ct-dealerLocked__sub{
  margin: 0 0 12px;
  color: rgba(148, 163, 184, 0.95);
  line-height: 1.45;
}

.ct-dealerSettingsTab.is-locked{
  opacity: 0.92;
}
.ct-dealerSettingsTab.is-locked::after{
  content: "Pro";
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.95);
  border: 1px solid rgba(59, 130, 246, 0.30);
  background: rgba(59, 130, 246, 0.12);
}

body.ctd-modalOpen{
  overflow: hidden;
}
.ct-dealerModalOverlay{
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(12px);
}
.ct-dealerModal{
  width: min(620px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: radial-gradient(120% 140% at 0% 0%, rgba(59, 130, 246, 0.16), rgba(2, 6, 23, 0.88));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 16px 16px 18px;
}
.ct-dealerModal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ct-dealerModal__title{
  font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.98);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ct-dealerModal__close{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(2, 6, 23, 0.25);
  color: rgba(226, 232, 240, 0.9);
  cursor: pointer;
  line-height: 1;
  font-size: 20px;
}
.ct-dealerModal__actions{
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 520px){
  .ct-dealerModal__actions{ flex-direction: column; }
}

/* Make nav items able to hold a right-side badge */
.ct-dealerNavItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* "Pro+" badge (only shown when locked) */
.ct-dealerNavBadge {
  display: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(2, 6, 23, 0.25);
  color: rgba(229, 231, 235, 0.9);
}

.ct-dealerNavItem.is-locked .ct-dealerNavBadge {
  display: inline-flex;
}

.ct-dealerNavItem.is-locked {
  color: rgba(156, 163, 175, 0.95);
}

/* Storefront panel bits */
.ct-dealerStorefrontRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.ct-dealerStorefrontUrl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(2, 6, 23, 0.35);
  color: #e5e7eb;
  text-decoration: none;
  font-size: 13px;
}

.ct-dealerStorefrontUrl.is-muted {
  color: #9ca3af;
  pointer-events: none;
}

.ct-dealerStorefrontNotice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  background: rgba(59, 130, 246, 0.08);
  color: rgba(229, 231, 235, 0.95);
}

.ct-dealerStorefrontPerks {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #9ca3af;
  font-size: 13px;
  line-height: 1.5;
}

/* Respect the hidden attribute so JS can hide the onboarding modal */
.ct-dealerModalOverlay[hidden]{
  display: none !important;
}

/* Dashboard: hide the top-right "Add listing" button (keep Inventory page buttons) */
.ct-dealerPanel[data-dealer-panel="dashboard"] #ctDealerAddListingBtn{
  display: none !important;
}

/* Inventory layout: KPI top-right in header + centered controls above table */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerPanel__header--inventory{
  align-items: flex-start;
}

.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvHeaderRight--kpis{
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* KPI box sits neatly on the same "top line" as the Inventory heading */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader{
  margin: 0;
}

.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiBox{
  max-width: 520px;
  margin-top: 4px; /* small nudge so "Total listings —" aligns with Inventory title */
}

/* Centered controls row directly above the table */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvControls{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}

@media (max-width: 900px){
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvControls{
    justify-content: flex-start;
  }
}

/* Inventory controls: search stretches left, buttons align right */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvControls{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  justify-content: stretch;
  width: 100%;
}

.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvSearch{
  width: 100%;
}

.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvSearch__input{
  width: 100%;
  max-width: none;
}

/* Ensure buttons stay on the right */
.ct-dealerPanel[data-dealer-panel="inventory"] #ctDealerInvBulkImportBtn,
.ct-dealerPanel[data-dealer-panel="inventory"] #ctDealerInvAddListingBtn{
  justify-self: end;
}

@media (max-width: 900px){
  /* On mobile, stack nicely */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvControls{
    grid-template-columns: 1fr;
  }

  .ct-dealerPanel[data-dealer-panel="inventory"] #ctDealerInvBulkImportBtn,
  .ct-dealerPanel[data-dealer-panel="inventory"] #ctDealerInvAddListingBtn{
    justify-self: start;
  }
}

/* Inventory KPI box: transparent container + more space between label and value */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiBox{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* keep the row separators subtle (optional) */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiRow + .ct-dealerInvKpiRow{
  border-top: 1px solid rgba(30, 41, 57, 0.45);
}

/* Increase horizontal distance between left label + right value */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiRow{
  gap: 40px; /* was ~16 */
}

/* Make the left side a fixed width so values align neatly on the right */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiLeft{
  width: 240px;        /* increase if you want even more spacing */
  flex: 0 0 240px;
}

/* Ensure values stay flush right */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiVal{
  text-align: right;
}

/* Nudge the KPI block slightly left within the header */
.ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvHeaderRight--kpis{
  padding-right: 22px; /* tweak 16–32px to taste */
}

/* Settings: hide the small "Pro" badge next to Profile ONLY for Starter */
body.ct-plan--starter .ct-dealerSettingsTabs .ct-dealerTabPill,
body.ct-plan--starter .ct-dealerSettingsTabs .ct-dealerTabBadge,
body.ct-plan--starter .ct-dealerSettingsTabs [data-plan-badge]{
  display: none !important;
}


/* Settings: remove the "Pro" badge next to Profile (it’s a ::after pseudo element) */
.ct-dealerSettingsTab[data-settings-tab="profile"].is-locked::after{
  content: none !important;
  display: none !important;
}

/* -----------------------------
   Add listing modal (scoped)
------------------------------ */
#ctDealerAddListingModal .ctDealerAddListingHint{
  margin: 10px 0 8px;
  color: rgba(148,163,184,.92);
  font-size: 13px;
  line-height: 1.4;
}

#ctDealerAddListingModal .ctDealerAddListingErr{
  margin: 8px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(248,113,113,.35);
  background: rgba(248,113,113,.08);
  color: rgba(254,226,226,.98);
  font-size: 13px;
}

#ctDealerAddListingModal .ctDealerAddListingGrid{
  margin-top: 12px;
}

#ctDealerAddListingModal input#ctDealerAddListingVrm{
  text-transform: uppercase;
  letter-spacing: .06em;
}

#ctDealerAddListingModal .ct-dealerModal__actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* ---------------------------------
   Add listing modal — polish (scoped)
---------------------------------- */
#ctDealerAddListingModal.ct-dealerModalOverlay{
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(14px);
}

#ctDealerAddListingModal .ct-dealerModal{
  width: min(720px, 100%);
  padding: 22px 22px 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: radial-gradient(120% 140% at 0% 0%,
      rgba(59, 130, 246, 0.18),
      rgba(2, 6, 23, 0.92)
    );
  box-shadow:
    0 35px 90px rgba(0,0,0,0.62),
    0 0 0 1px rgba(59,130,246,0.08) inset;
  position: relative;
  overflow: hidden;
}

/* subtle top accent line */
#ctDealerAddListingModal .ct-dealerModal::before{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(59,130,246,0.0),
    rgba(59,130,246,0.55),
    rgba(59,130,246,0.0)
  );
  opacity: 0.9;
  pointer-events: none;
}

#ctDealerAddListingModal .ct-dealerModal__head{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}

#ctDealerAddListingModal .ct-dealerModal__title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.98);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ctDealerAddListingModal .ct-dealerModal__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226,232,240,0.92);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
#ctDealerAddListingModal .ct-dealerModal__close:hover{
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(59,130,246,0.35);
  transform: translateY(-1px);
}
#ctDealerAddListingModal .ct-dealerModal__close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.20);
}

/* Hint + error */
#ctDealerAddListingModal .ctDealerAddListingHint{
  margin: 12px 0 10px;
  color: rgba(148,163,184,0.92);
  font-size: 13px;
  line-height: 1.45;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ctDealerAddListingModal .ctDealerAddListingErr{
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(248,113,113,0.35);
  background: rgba(248,113,113,0.08);
  color: rgba(254,226,226,0.98);
}

/* Make the form feel tighter + remove empty 2nd column */
#ctDealerAddListingModal .ctDealerAddListingGrid{
  margin-top: 14px;
  grid-template-columns: 1fr;
  gap: 14px;

}

/* Inputs */
#ctDealerAddListingModal .ct-dealerField__label{
  font-size: 13px;
  font-weight: 600;
  color: rgba(226,232,240,0.92);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ctDealerAddListingModal .ct-dealerField input{
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(2, 6, 23, 0.55);
  padding: 12px 12px;
  color: rgba(226,232,240,0.98);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#ctDealerAddListingModal .ct-dealerField input::placeholder{
  color: rgba(148,163,184,0.55);
}

#ctDealerAddListingModal .ct-dealerField input:focus{
  outline: none;
  border-color: rgba(59,130,246,0.65);
  background: rgba(2, 6, 23, 0.72);
  box-shadow:
    0 0 0 4px rgba(59,130,246,0.18),
    0 18px 45px rgba(0,0,0,0.35);
}

#ctDealerAddListingModal input#ctDealerAddListingVrm{
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* remove number spinners (optional, looks cleaner) */
#ctDealerAddListingModal input[type="number"]::-webkit-outer-spin-button,
#ctDealerAddListingModal input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#ctDealerAddListingModal input[type="number"]{
  -moz-appearance: textfield;
}

/* Actions row */
#ctDealerAddListingModal .ct-dealerModal__actions{
  border-top: 1px solid rgba(148,163,184,0.12);
  padding-top: 14px;
  margin-top: 16px;
  justify-content: flex-end;
  gap: 10px;
}

/* Button styling (without changing HTML classes) */
#ctDealerAddListingModal #ctDealerAddListingCancel{
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(2, 6, 23, 0.30);
  color: rgba(226,232,240,0.92);
}
#ctDealerAddListingModal #ctDealerAddListingCancel:hover{
  background: rgba(15, 23, 42, 0.55);
}

#ctDealerAddListingModal #ctDealerAddListingSubmit{
  border-radius: 12px;
  border: 1px solid rgba(59,130,246,0.55);
  background: linear-gradient(180deg, rgba(59,130,246,1), rgba(37,99,235,1));
  color: #fff;
  box-shadow: 0 12px 28px rgba(59,130,246,0.22);
}
#ctDealerAddListingModal #ctDealerAddListingSubmit:hover{
  filter: brightness(1.03);
}
#ctDealerAddListingModal #ctDealerAddListingSubmit:active{
  transform: translateY(1px);
}
#ctDealerAddListingModal #ctDealerAddListingSubmit:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.22), 0 12px 28px rgba(59,130,246,0.22);
}


/* Add listing modal: give content some breathing room so inputs don't hug the edge */
#ctDealerAddListingModal .ct-dealerModal{
  padding-left: 26px !important;
  padding-right: 26px !important;
}

@media (max-width: 720px){
  #ctDealerAddListingModal .ct-dealerModal{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}
#ctDealerAddListingModal .ctDealerAddListingGrid{
  max-width: 640px;
}

/* -----------------------------
   Bulk import (create-only)
----------------------------- */

#ctDealerBulkImportModal .ct-dealerModal{
  max-width: 860px;
}

#ctDealerBulkImportModal .ct-dealerModal__sub{
  margin: 6px 0 16px;
  color: rgba(226, 232, 240, 0.78);
}

.ct-bulkImportSplit{
  display: grid;
  grid-template-columns: 1fr auto 1.2fr;
  gap: 18px;
  align-items: start;
}

.ct-bulkImportOr{
  align-self: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-bulkImportOr span{
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.65);
  padding: 8px 10px;
  border-radius: 999px;
  border: none;
  background: rgba(2, 6, 23, 0.25);
}

.ct-bulkImportTextarea{
  resize: vertical;
  min-height: 140px;
  line-height: 1.35;
}

.ct-bulkImportSummary{
  margin-top: 12px;
}

.ct-bulkImportPreview{
  margin-top: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.22);
}

.ct-bulkImportPreview ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.ct-bulkImportPreview li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.86);
}

.ct-bulkImportPreview code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.92);
}

.ct-bulkImportStatus{
  margin-top: 10px;
  min-height: 18px;
}

@media (max-width: 860px){
  .ct-bulkImportSplit{ grid-template-columns: 1fr; }
  .ct-bulkImportOr{ display: none; }
}


/* ================================
   Bulk import modal polish (scoped)
   ================================ */
#ctDealerBulkImportModal.ct-dealerModalOverlay {
  /* keep your existing overlay behavior but add a nicer backdrop */
  background: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#ctDealerBulkImportModal .ct-dealerModal {
  width: min(920px, calc(100vw - 64px));
  max-height: calc(100vh - 64px);
  overflow: auto;

  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(59, 130, 246, 0.18), transparent 55%),
    radial-gradient(700px 360px at 85% 10%, rgba(34, 211, 238, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);

  padding: 18px 20px 16px;
  color: rgba(226, 232, 240, 0.92);
}

#ctDealerBulkImportModal .ct-dealerModal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

#ctDealerBulkImportModal .ct-dealerModal__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
  color: rgba(248, 250, 252, 0.95);
}

#ctDealerBulkImportModal .ct-dealerModal__close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.92);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

#ctDealerBulkImportModal .ct-dealerModal__close:hover {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}

#ctDealerBulkImportModal .ct-bulkImportHint {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.35);
  color: rgba(226, 232, 240, 0.80);
  line-height: 1.35;
}

#ctDealerBulkImportModal .ct-bulkImportSplit {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}

#ctDealerBulkImportModal .ct-bulkImportOr {
  display: grid;
  place-items: center;
  margin-top: 26px; /* lines up with fields */
}

#ctDealerBulkImportModal .ct-bulkImportOr span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  
  background: transparent;
  color: rgba(226, 232, 240, 0.75);
  font-size: 12px;
  letter-spacing: 0.12em;
}

#ctDealerBulkImportModal .ct-dealerField {
  min-width: 0; /* prevents overflow in grid */
}

#ctDealerBulkImportModal .ct-dealerLabel {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
    font-weight: 600;
    color: rgba(226, 232, 240, 0.92);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#ctDealerBulkImportModal .ct-dealerInput {
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(2, 6, 23, 0.45);
  color: rgba(248, 250, 252, 0.92);
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

#ctDealerBulkImportModal .ct-dealerInput:focus {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
  background: rgba(2, 6, 23, 0.55);
}

#ctDealerBulkImportModal .ct-dealerInput::placeholder {
  color: rgba(148, 163, 184, 0.70);
}

#ctDealerBulkImportModal input[type="file"].ct-dealerInput {
  padding: 9px 10px;
}

#ctDealerBulkImportModal input[type="file"].ct-dealerInput::file-selector-button {
  margin-right: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
  color: rgba(248, 250, 252, 0.90);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

#ctDealerBulkImportModal input[type="file"].ct-dealerInput::file-selector-button:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.10);
}

#ctDealerBulkImportModal .ct-bulkImportTextarea {
  min-height: 190px;
  resize: vertical;
  line-height: 1.45;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  letter-spacing: 0.2px;
}

#ctDealerBulkImportModal .ct-dealerHelp {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.92);
}

#ctDealerBulkImportModal .ct-bulkImportSummary,
#ctDealerBulkImportModal .ct-bulkImportStatus {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.30);
}

#ctDealerBulkImportModal .ct-bulkImportPreview {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.35);
  color: rgba(226, 232, 240, 0.80);
  font-size: 13px;
  max-height: 180px;
  overflow: auto;
}

#ctDealerBulkImportModal .ct-dealerModal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.10);
}

/* Make sure buttons feel premium inside this modal */
#ctDealerBulkImportModal .ct-dealerBtn {
  border-radius: 12px;
}

#ctDealerBulkImportModal .ct-dealerBtn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 860px) {
  #ctDealerBulkImportModal .ct-dealerModal {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 28px);
    padding: 16px 16px 14px;
  }

  #ctDealerBulkImportModal .ct-bulkImportSplit {
    grid-template-columns: 1fr;
  }

  #ctDealerBulkImportModal .ct-bulkImportOr {
    margin: 2px 0 2px;
  }
}

/* --- Edit listing (danger) modal --- */
.ct-dealerModal--danger{
  border-color: rgba(239, 68, 68, 0.28);
  background: radial-gradient(120% 140% at 0% 0%,
    rgba(239, 68, 68, 0.12),
    rgba(2, 6, 23, 0.90)
  );
}

.ct-dealerModal__sub{
  margin: 10px 0 14px;
  color: rgba(148, 163, 184, 0.92);
    font-size: 13px;
    line-height: 1.45;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ct-dealerModal__sub--danger{
  color: rgba(254, 202, 202, 0.88);
}

.ct-dealerModal__actions--split{
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.ct-dealerBtn--danger{
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

.ct-dealerBtn--danger:hover{
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.65);
}

.ct-editListingPlateRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.45);
  margin-bottom: 10px;
}

.ct-editListingPlateLabel{
  font-size: 0.82rem;
  color: #9ca3af;
}

.ct-editListingPlatePill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.10);
  color: #fecaca;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.ct-editListingStatus{
  margin-top: 10px;
  min-height: 18px;
  color: #9ca3af;
}

.ct-editListingPlateRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(2, 6, 23, 0.35);
  margin-bottom: 10px;
}

.ct-editListingPlateLabel{
  font-size: 0.82rem;
  color: #9ca3af;
}

/* Plate hover preview tooltip */
.ct-platePreviewTip {
  position: fixed;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: radial-gradient(120% 140% at 0% 0%,
      rgba(59, 130, 246, 0.10),
      rgba(2, 6, 23, 0.88)
  );
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translate(-50%, 10px);
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
}

.ct-platePreviewTip.is-show {
  opacity: 1;
  transform: translate(-50%, 14px);
}

.ct-platePreviewTip__sub {
  margin-top: 6px;
  font-size: 0.75rem;
  color: rgba(148, 163, 184, 0.9);
}

/* Space the billing button from the plan meta text */
#ctDealerManageBillingBtn {
  margin-top: 10px;
}

/* Make "Active listings — 2 / 10" read nicely */
.ct-dealerSettingsUsageHeader {
  gap: 10px;
  align-items: center;
}

.ct-dealerSettingsUsageHeader > span:first-child::after {
  content: " —";
  opacity: 0.7;
  margin-left: 6px;
}

#ctDealerPlanUsageText {
  white-space: nowrap;
}

/* -----------------------------
   Dealer portal bottom tabs (mobile)
----------------------------- */
.ct-dealerBottomNav{
  display: none;
}

@media (max-width: 900px){
  /* Make room so content doesn't sit behind the tabs */
  .ct-dealerMain{
    padding-bottom: calc(16px + 92px + env(safe-area-inset-bottom));
  }

  .ct-dealerBottomNav{
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: min(560px, calc(100vw - 24px));
    z-index: 9; /* stays under paywall (z:10), under modals (z:140), under mobile menu (z:1000) */
  }

  .ct-dealerBottomNav_inner{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15,23,42,0.78), rgba(2,6,23,0.88));
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 60px rgba(0,0,0,0.45);
  }

  .ct-dealerBottomNav .ct-dealerBottomNavItem{
    text-align: center;
    padding: 10px 8px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    color: rgba(229,231,235,0.78);
    background: transparent;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
  }

  .ct-dealerBottomNav .ct-dealerBottomNavItem svg{
    width: 18px;
    height: 18px;
    opacity: 0.92;
  }

  .ct-dealerBottomNav .ct-dealerBottomNavItem:hover{
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.92);
  }

  .ct-dealerBottomNav .ct-dealerNavItem--active{
    background: rgba(59,130,246,0.16);
    border-color: rgba(59,130,246,0.45);
    color: #fff;
  }
}
/* -------------------------------------------------
   Inventory: phone layout fit (iPhone widths)
-------------------------------------------------- */
@media (max-width: 520px){
  /* compact columns: Plate | Price | Mode | Actions */
  .ct-dealerTable__head,
  .ct-dealerTable__row{
    grid-template-columns: minmax(0, 1.55fr) 0.95fr 0.95fr 0fr 0fr 0fr 0.9fr;
  }

  /* already hiding Status (4th); also hide Views (5th) + Offers (6th) */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(5),
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(6),
  .ct-dealerTable__row > :nth-child(5),
  .ct-dealerTable__row > :nth-child(6){
    display: none !important;
  }

  /* reduce overall padding so the grid fits */
  .ct-dealerTable__head{
    padding: 12px 14px;
  }
  .ct-dealerTable__row{
    padding: 10px 14px;
  }
  .ct-dealerTable__cell{
    padding-right: 6px;
  }

  /* plate pill: smaller + no forced width */
  .ct-dealerPlate{
    min-width: 0;
    padding: 4px 10px;
    border-radius: 7px;
  }
  .ct-dealerPlate__text{
    font-size: 16px;
    letter-spacing: 0.02em;
  }

  /* actions: tighter so they don't push layout */
  .ct-dealerTable__actions{
    gap: 6px;
  }
  .ct-dealerTableActionBtn{
    padding: 3px;
  }
}

/* -------------------------------------------------
   Inventory (mobile): show Status instead of Mode
-------------------------------------------------- */
@media (max-width: 900px){
  /* swap columns: keep Status, hide Mode */
  .ct-dealerTable__head,
  .ct-dealerTable__row{
    grid-template-columns: minmax(0, 1.8fr) 1.1fr 0fr 1.1fr 0.9fr 0.9fr 1.2fr;
  }

  /* hide Mode (3rd col) */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(3),
  .ct-dealerTable__row > :nth-child(3){
    display: none !important;
  }

  /* show Status (4th col) — overrides earlier rule */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(4),
  .ct-dealerTable__row > :nth-child(4){
    display: block !important;
  }
}

@media (max-width: 520px){
  /* compact columns: Plate | Price | Status | Actions */
  .ct-dealerTable__head,
  .ct-dealerTable__row{
    grid-template-columns: minmax(0, 1.55fr) 0.95fr 0fr 0.95fr 0fr 0fr 0.9fr;
  }

  /* hide Views + Offers on phones */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(5),
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(6),
  .ct-dealerTable__row > :nth-child(5),
  .ct-dealerTable__row > :nth-child(6){
    display: none !important;
  }

  /* slightly tighten status chip so it fits nicely */
  .ct-dealerStatusChip{
    padding: 3px 8px;
    font-size: 10px;
  }
}

/* -------------------------------------------------
   Inventory header KPIs: prevent horizontal overflow on mobile
   + reduce label/value spacing
-------------------------------------------------- */
@media (max-width: 700px){
  /* let the header wrap so KPIs can drop below the title if needed */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerPanel__header--inventory{
    flex-wrap: wrap;
    gap: 12px;
  }

  /* KPI block should never push the layout wider than the screen */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerInvHeaderRight--kpis{
    width: 100%;
    justify-content: flex-start;
    padding-right: 0; /* was 22px */
  }

  /* reduce the spacing between left label and right value */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiRow{
    gap: 12px; /* was 40px */
  }

  /* remove the fixed 240px label block so it can shrink on phones */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiLeft{
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* slightly smaller text so long labels like "Total offers (7d)" fit */
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiKey{
    font-size: 12px;
    line-height: 18px;
  }
  .ct-dealerPanel[data-dealer-panel="inventory"] .ct-dealerKpis--invHeader .ct-dealerInvKpiVal{
    font-size: 16px;
    line-height: 20px;
  }
}

/* -------------------------------------------------
   Inventory (mobile): show Mode + Status + Actions
-------------------------------------------------- */
@media (max-width: 520px){
  /* Plate | Price | Mode | Status | Actions */
  .ct-dealerTable__head,
  .ct-dealerTable__row{
    grid-template-columns: minmax(0, 1.35fr) 0.9fr 0.75fr 0.75fr 0.9fr;
  }

  /* show Mode (3rd) */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(3),
  .ct-dealerTable__row > :nth-child(3){
    display: block !important;
  }

  /* show Status (4th) */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(4),
  .ct-dealerTable__row > :nth-child(4){
    display: block !important;
  }

  /* keep Views + Offers hidden */
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(5),
  .ct-dealerTable__head .ct-dealerTable__cell:nth-child(6),
  .ct-dealerTable__row > :nth-child(5),
  .ct-dealerTable__row > :nth-child(6){
    display: none !important;
  }

  /* tighten Mode + Status chips a touch so they fit comfortably */
  .ct-dealerModeChip,
  .ct-dealerStatusChip{
    padding: 3px 7px;
    font-size: 10px;
  }
}

/* Inventory: VRM pill should never wrap to 2 lines */
.ct-dealerPlate,
.ct-dealerPlate__text{
  white-space: nowrap;
}

.ct-dealerPlate{
  overflow: hidden;          /* keeps pill clean */
  text-overflow: ellipsis;   /* rare fallback if super long */
}

.ct-dealerPlate__text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* Bottom nav now has 5 items on mobile */
@media (max-width: 900px){
  .ct-dealerBottomNav_inner{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .ct-dealerBottomNav .ct-dealerBottomNavItem{
    font-size: 10.5px;
    padding: 10px 6px;
  }
}

/* More sheet */
.ct-dealerMoreSheet{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 120; /* above portal content + bottom nav */
}

.ct-dealerMoreSheet.is-open{ display: block; }

.ct-dealerMoreSheet_backdrop{
  position: absolute;
  inset: 0;
  background: rgba(2,6,15,0.55);
  backdrop-filter: blur(8px);
}

.ct-dealerMoreSheet_panel{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom) + 92px); /* sits above bottom nav */
  width: min(560px, calc(100vw - 24px));
  border-radius: 22px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(2,6,23,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
}

.ct-dealerMoreSheet_head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 10px;
}

.ct-dealerMoreSheet_title{
  font-weight: 750;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em;
}

.ct-dealerMoreSheet_close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.ct-dealerMoreSheet_list{
  display: grid;
  gap: 10px;
}

.ct-dealerMoreSheet_item{
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.92);
  font-weight: 650;
}

.ct-dealerMoreSheet_item:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* -------------------------------------------------
   Share Packs: 2-up cards on mobile (Step 1 + Step 2)
-------------------------------------------------- */
@media (max-width: 560px){
  /* Step 1 – listing cards: 2 per row */
  .ct-dealerShareListingGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ct-dealerShareListingCard{
    padding: 12px 12px;
    border-radius: 16px;
    gap: 8px;
  }

  .ct-dealerSharePlate{
    padding: 5px 10px;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .ct-dealerShareListingPrice{
    font-size: 13px;
  }

  /* keep the tagline but stop it making cards huge */
  .ct-dealerShareListingTagline{
    font-size: 11.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ct-dealerShareCheckbox{
    width: 20px;
    height: 20px;
  }
  .ct-dealerShareCheckboxBox{
    width: 10px;
    height: 10px;
  }

  /* Step 2 – style cards: 2 per row */
  .ct-dealerShareStyleGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ct-dealerShareStyleCard{
    padding: 12px 12px 14px;
    border-radius: 16px;
    gap: 8px;
  }

  .ct-dealerShareStylePreview{
    height: 120px;
    border-radius: 12px;
  }

  .ct-dealerShareStyleBody h3{
    font-size: 14px;
  }

  .ct-dealerShareStyleBody p{
    font-size: 11.5px;
    line-height: 1.35;
  }
}

/* -------------------------------------------------
   Share Packs Step 1: compact cards on mobile
   - remove repeating description
   - ensure no horizontal overflow
-------------------------------------------------- */
@media (max-width: 560px){
  /* kill the repeated description line to free space */
  .ct-dealerShareListingTagline{
    display: none !important;
  }

  /* slightly tighter cards */
  .ct-dealerShareListingGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ct-dealerShareListingCard{
    padding: 10px 10px;
    border-radius: 16px;
    gap: 8px;
    min-width: 0; /* important for grid overflow */
  }

  /* plate pill: keep single line and shrink a touch */
  .ct-dealerSharePlate{
    padding: 4px 9px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* price: keep to one line */
  .ct-dealerShareListingPrice{
    font-size: 13px;
    white-space: nowrap;
  }

  /* checkbox: keep anchored, not forcing layout */
  .ct-dealerShareCheckbox{
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }
}

/* -------------------------------------------------
   Share Packs (mobile): stop horizontal overflow
   + make cards use space properly
-------------------------------------------------- */
@media (max-width: 560px) {
  /* make sure the share root can't exceed viewport */
  #ctDealerShareRoot,
  #ctDealerShareListingGrid {
    max-width: 100%;
  }

  /* 2-column grid that can actually shrink */
  #ctDealerShareListingGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* critical: allow grid items + inner flex children to shrink */
  #ctDealerShareListingGrid .ct-dealerShareListingCard {
    min-width: 0;
    padding: 10px 10px;
  }

  #ctDealerShareListingGrid .ct-dealerShareListingHeader {
    gap: 6px;
  }

  /* kill the legacy fixed width that forces overflow */
  #ctDealerShareListingGrid .ct-dealerShareCheckbox {
    width: auto;
    flex: 0 0 auto;
  }

  /* tighten checkbox box slightly */
  #ctDealerShareListingGrid .ct-dealerShareCheckboxBox {
    width: 14px;
    height: 14px;
  }

  /* IMPORTANT: your plate pill has a min-width globally (132px).
     In Share Packs we let it shrink + fill the card width nicely. */
  #ctDealerShareListingGrid .ct-dealerPlate {
    min-width: 0;
    width: 100%;
    padding: 5px 10px;
    border-radius: 10px;
  }

  /* never wrap VRM inside the pill */
  #ctDealerShareListingGrid .ct-dealerPlate__text {
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* if you removed the description in JS, this does nothing.
     if not, it keeps cards compact */
  #ctDealerShareListingGrid .ct-dealerShareListingTagline {
    display: none !important;
  }
}

/* Optional “seatbelt” (won’t affect layout, just prevents tiny scrollbars) */
.ct-dealerMain {
  overflow-x: clip;
}

/* =========================================================
   Share Packs (mobile) — force true 2-col grid that fits
   Paste at VERY BOTTOM of dealer-portal.css
   ========================================================= */
@media (max-width: 560px){
  /* stop any internal flex/grid children from forcing width */
  #ctDealerShareRoot,
  #ctDealerShareRoot *{
    box-sizing: border-box;
    min-width: 0;
  }

  /* 2 columns that can actually shrink */
  #ctDealerShareListingGrid.ct-dealerShareListingGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
    max-width: 100%;
  }

  /* card must be allowed to shrink */
  #ctDealerShareListingGrid .ct-dealerShareListingCard{
    width: 100%;
    min-width: 0 !important;
    padding: 10px 10px !important;
    overflow: hidden; /* prevents inner bits pushing width */
  }

  /* tighten plate pill so it doesn’t set a big min-content width */
  #ctDealerShareListingGrid .ct-dealerSharePlate{
    padding: 5px 8px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
    max-width: 100%;
  }

  /* tighten text */
  #ctDealerShareListingGrid .ct-dealerShareListingPrice{
    font-size: 13px !important;
  }

  /* make footer CTA not get clipped off-screen */
  #ctDealerShareRoot .ct-dealerShareFooter{
    justify-content: stretch;
  }
  #ctDealerShareRoot .ct-dealerShareFooter .ct-dealerBtn{
    width: 100%;
  }

  /* pager can be the thing that overflows — allow horizontal scroll instead */
  #ctDealerShareRoot .ct-dealerSharePager{
    max-width: 100%;
    
    -webkit-overflow-scrolling: touch;
  }
  #ctDealerShareRoot .ct-dealerSharePagerInner{
    width: max-content;
    margin: 0 auto;
  }
}

/* Super small phones: fall back to 1 column */
@media (max-width: 360px){
  #ctDealerShareListingGrid.ct-dealerShareListingGrid{
    grid-template-columns: 1fr !important;
  }
}

/* === Share Packs Step 1 (mobile) — single source of truth === */
@media (max-width: 560px) {
  /* avoid iOS/Safari issues with overflow-x: clip */
  html, body { overflow-x: hidden; }
  .ct-dealerMain { overflow-x: hidden; }

  /* Step 1 grid: safe 1-col (you can switch to 2-col later once stable) */
  #ctDealerShareListingGrid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #ctDealerShareListingGrid .ct-dealerShareListingCard {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Step 1 uses .ct-dealerPlate (not .ct-dealerSharePlate) */
  #ctDealerShareListingGrid .ct-dealerSharePlateWrap { min-width: 0; flex: 1 1 auto; }
  #ctDealerShareListingGrid .ct-dealerPlate { min-width: 0; width: 100%; }
  #ctDealerShareListingGrid .ct-dealerPlate__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* keep cards compact */
  #ctDealerShareListingGrid .ct-dealerShareListingTagline { display: none !important; }

  /* ✅ This is the real overflow culprit on accounts with lots of pages */
  #ctDealerSharePager {
    display: block;                 /* don’t center a too-wide flex row */
    max-width: 100%;
    overflow-x: auto;               /* contain the width here */
    -webkit-overflow-scrolling: touch;
    padding: 0 2px 10px;
  }

  #ctDealerSharePager .ct-dealerSharePagerInner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;             /* allow it to be wider, but only inside scroll */
    padding: 0 10px;                /* nice breathing room while scrolling */
  }

  #ctDealerSharePager::-webkit-scrollbar { display: none; }
  #ctDealerSharePager { scrollbar-width: none; }
}

/* === Share Packs Step 3 (mobile): make tab pills + right panel fit === */
@media (max-width: 560px) {
  /* Right panel must be allowed to shrink (you currently force min-width:420px) */
  .ct-dealerShareRight{
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Make the 3-tab rows always fit the screen */
  .ct-dealerShareHeaderTabs,
  .ct-dealerShareCaptionTabs{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Kill the fixed 140px pill width and let them size evenly */
  .ct-dealerShareHeaderTabs .ct-dealerShareHeaderTab,
  .ct-dealerShareCaptionTabs .ct-dealerShareHeaderTab{
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box !important;

    /* slightly tighter so "Standard" never clips */
    padding: 10px 8px !important;
    font-size: 13px !important;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Extra small phones: allow 2 + 1 wrap */
@media (max-width: 360px) {
  .ct-dealerShareHeaderTabs,
  .ct-dealerShareCaptionTabs{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}