/* Marketplace screen (Home/MarketPlaceUI).
   Mirrors the featured "Marketplace" promo box from
   biztech.cloud/internal/designs/truckon/indexv2.html.

   Deliberately standalone: every rule is scoped under .mpui and this file is loaded
   only by MarketPlaceUI.cshtml, so the consumer dashboard's consumerdashboardv2.css
   is neither modified nor relied on. */

.mpui {
  --mpui-navy: #0F2A44;
  --mpui-ink: #10243A;
  --mpui-muted: #64748B;
  --mpui-line: #E6ECF3;
  --mpui-card: #FFFFFF;
  --mpui-radius: 18px;
  --mpui-shadow: 0 1px 2px rgba(16, 36, 58, .06);

  display: block;
  color: var(--mpui-ink);
}

/* Heading */
.mpui-greet {
  margin: 14px 0;
  text-align: center;
}

.mpui-greet small {
  display: block;
  color: var(--mpui-muted);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.mpui-greet h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--mpui-navy);
}

.mpui-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
}

.mpui-section-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--mpui-navy);
  letter-spacing: -.01em;
}

.mpui-section-title span {
  font-size: 12.5px;
  color: var(--mpui-muted);
  font-weight: 600;
}

.mpui-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 15px;
}

/* Promo box - the reference design's featured Marketplace card */
.mpui .mpui-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  /* Same height as when the card had its 84px photo slot (84 + 2 x 14px padding). */
  min-height: 112px;
  border: 0;
  border-radius: var(--mpui-radius);
  background: var(--mpui-navy);
  color: #fff;
  padding: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .15s;
  -webkit-tap-highlight-color: transparent;
}

.mpui .mpui-promo:active {
  transform: scale(.99);
}

.mpui-promo-badge {
  width: 120px;
  height: 84px;
  border-radius: 12px;
  flex: 0 0 auto;
  order: 2;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  font-size: 38px;
  color: #fff;
}

.mpui-promo-txt {
  flex: 1;
  min-width: 0;
}

.mpui-promo-title {
  display: block;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: #fff;
  overflow-wrap: anywhere;
}

.mpui-promo-summary {
  display: block;
  margin: 0 0 10px;
  font-size: 16px;
  opacity: .8;
  line-height: 1.35;
  color: #fff;
}

.mpui-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--mpui-navy);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Detail panel revealed by Browse */
.mpui-details {
  border: 1px solid var(--mpui-line);
  border-radius: var(--mpui-radius);
  background: var(--mpui-card);
  box-shadow: var(--mpui-shadow);
  padding: 14px 16px;
  margin-top: 8px;
}

.mpui-details h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mpui-navy);
}

.mpui-details ul {
  margin: 0;
  padding-left: 18px;
}

.mpui-details li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mpui-ink);
}

/* Small screens: keep the reference's side-by-side layout, just a narrower photo */
@media (max-width: 374.98px) {
  .mpui-promo-badge {
    width: 100px;
    height: 72px;
  }

  .mpui .mpui-promo {
    min-height: 100px;
  }
}

/* Dark theme: flip the surfaces, keep the navy promo solid */
html[data-bs-theme="dark"] .mpui {
  --mpui-ink: #E8F0F8;
  --mpui-line: #24313F;
  --mpui-card: #161F29;
  --mpui-muted: #93A4B8;
}

html[data-bs-theme="dark"] .mpui-greet h1,
html[data-bs-theme="dark"] .mpui-section-title h3,
html[data-bs-theme="dark"] .mpui-details h4 {
  color: #E8F0F8;
}

html[data-bs-theme="dark"] .mpui .mpui-promo {
  background: #16212D;
}

html[data-bs-theme="dark"] .mpui-go {
  background: #E8F0F8;
  color: #0F2A44;
}

/* Thumbnail inside the media slot. contain, not cover: configured thumbnails come in
   any aspect ratio, so cropping them to the slot would hide part of the image. */
.mpui-promo-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  padding: 6px;
}

/* The reference design's truck photo fills the slot, as the reference's promo image does. */
.mpui-promo-badge .mpui-promo-photo {
  object-fit: cover;
  padding: 0;
}

.mpui-promo-poweredby {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  opacity: .85;
  overflow-wrap: anywhere;
}

.mpui-details p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mpui-ink);
}

.mpui-details-content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mpui-ink);
  margin-bottom: 10px;
}

.mpui-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--mpui-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.mpui-open:hover,
.mpui-open:focus {
  color: #fff;
  opacity: .9;
}

html[data-bs-theme="dark"] .mpui-open {
  background: #E8F0F8;
  color: #0F2A44;
}

html[data-bs-theme="dark"] .mpui-open:hover,
html[data-bs-theme="dark"] .mpui-open:focus {
  color: #0F2A44;
}

/* Group boxes - sections carrying a GroupbySectionName.
   The group name is rendered as a navy promo box (.mpui-promo) that expands to show
   that group's marketplace boxes as the submenu. */
.mpui-groups {
  margin-top: 12px;
}

.mpui-group {
  margin-bottom: 12px;
}

/* The submenu sits under its group box, indented so the nesting reads. */
.mpui-group-list {
  margin-top: 12px;
  margin-left: 16px;
  padding-left: 8px;
  border-left: 2px solid var(--mpui-line);
}

@media (max-width: 575.98px) {
  .mpui-group-list {
    margin-left: 8px;
    padding-left: 6px;
  }
}

/* Box colours match the customer dashboard's icon tiles (consumerdashboardv2.css .tov2-tile-badge):
   the light blue tint background with the icons' blue as the accent, and the same pair in the
   dark theme. Text switches from white to navy so it reads on the light background. */
.mpui {
  --mpui-box: #EAF3FC;
  --mpui-accent: #1E73B8;
}

.mpui .mpui-promo {
  background: var(--mpui-box);
  color: var(--mpui-navy);
}

.mpui-promo-title,
.mpui-promo-poweredby {
  color: var(--mpui-navy);
}

.mpui-promo-summary {
  color: var(--mpui-ink);
}

.mpui-go {
  background: var(--mpui-accent);
  color: #fff;
}

html[data-bs-theme="dark"] .mpui {
  --mpui-box: #1B2B3B;
  --mpui-accent: #6FB6EE;
}

html[data-bs-theme="dark"] .mpui .mpui-promo {
  background: var(--mpui-box);
  color: #E8F0F8;
}

html[data-bs-theme="dark"] .mpui-promo-title,
html[data-bs-theme="dark"] .mpui-promo-poweredby,
html[data-bs-theme="dark"] .mpui-promo-summary {
  color: #E8F0F8;
}

html[data-bs-theme="dark"] .mpui-go {
  background: var(--mpui-accent);
  color: #0F2A44;
}

/* MarketplaceLogo: on a white card at the box's right, so any logo colour stays visible. */
.mpui-promo-badge.mpui-promo-logo {
  background: #fff;
  border: 1px solid var(--mpui-line);
}

.mpui-promo-logo img {
  padding: 8px;
}

/* MarketplaceLogo sized as the image in indexv2.html's Marketplace box (.promo img):
   120 x 84, the whole logo fitted inside (not cropped), 12px corners, on the right - and the same on small phones.
   Replaces the white logo card above. */
.mpui .mpui-promo-badge.mpui-promo-logo {
  width: 120px;
  height: 84px;
  flex: 0 0 auto;
  order: 2;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  padding: 0;
}

.mpui .mpui-promo-logo img {
  width: 120px;
  height: 84px;
  object-fit: contain;
  display:block;
  margin:0 auto;
  
}

/* MarketplaceLogo shown as a circle: the logo is clipped to an 84px circle centred in the
   120 x 84 slot, and everything outside the circle is transparent, so the box background shows. */
.mpui .mpui-promo-badge.mpui-promo-logo {
  display: grid;
  place-items: center;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.mpui .mpui-promo-logo img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
  background: transparent;
}

/* Logo sits close to the text: the slot is only as wide as the circle (no empty space around
   it) and the box's gap is tighter when a logo is shown. The circle scales with the screen -
   84px on most phones and up, down to 60px on the narrowest - so the text keeps its room. */
.mpui .mpui-promo:has(.mpui-promo-logo) {
  gap: 10px;
}

.mpui .mpui-promo-badge.mpui-promo-logo,
.mpui .mpui-promo-logo img {
  width: clamp(60px, 20vw, 94px);
  height: clamp(60px, 20vw, 94px);
}

@media (max-width: 374.98px) {
  .mpui .mpui-promo:has(.mpui-promo-logo) {
    gap: 8px;
    padding: 12px;
  }
}