/*
 * SaloCart V5.2 — Guided Performance UI
 * Lightweight visual foundation and role-specific operating guides.
 * This stylesheet intentionally changes presentation only.
 */

:root {
  --sc-font-body: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sc-font-display: "Sora", "Manrope", Inter, ui-sans-serif, system-ui, sans-serif;
  --sc-content-max: 1460px;
  --sc-reading: 1.55;
  --sc-tight: -0.035em;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-synthesis: none;
  scroll-padding-top: 92px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--sc-font-body);
  font-kerning: normal;
}

body {
  text-rendering: optimizeLegibility;
  line-height: var(--sc-reading);
}

:where(h1, h2, h3, h4, h5, h6, .brand-copy strong, .workspace-hero h1, .shopper-welcome-bar h1, .role-guide-card h2, .role-guide-modal h2) {
  font-family: var(--sc-font-display);
  font-optical-sizing: auto;
  letter-spacing: var(--sc-tight);
  text-wrap: balance;
}

:where(p, small, .workspace-action small, .role-guide-step p, .role-guide-card__foot span, .role-guide-modal-step p) {
  text-wrap: pretty;
}

.container-xxl {
  max-width: var(--sc-content-max);
}

/* Clear, device-friendly focus without spending rendering budget on effects. */
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--role-primary, #087a57) 45%, transparent);
  outline-offset: 3px;
}

@media (pointer: coarse) {
  :where(button, .btn, .btn-sc, .btn-sc-light, .btn-sc-alt, .workspace-action, .seller-action-strip > button, .partner-tool-card) {
    min-height: 44px;
  }
}

/* Role guide: compact enough for daily use, complete enough for new users. */
.role-guide-card {
  position: relative;
  overflow: hidden;
  margin: clamp(1rem, 2vw, 1.4rem) 0;
  padding: clamp(1rem, 2.2vw, 1.4rem);
  border: 1px solid var(--role-line, #dcece3);
  border-radius: 24px;
  background:
    radial-gradient(500px 190px at 100% -45%, var(--role-glow, rgba(8, 122, 87, .16)), transparent 72%),
    linear-gradient(135deg, color-mix(in srgb, var(--role-soft, #f6fbf8) 90%, #fff), color-mix(in srgb, var(--role-soft, #f6fbf8) 52%, #fff));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--role-primary, #087a57) 9%, transparent);
}

html[data-theme="dark"] .role-guide-card {
  background:
    radial-gradient(500px 190px at 100% -45%, var(--role-glow, rgba(8, 122, 87, .16)), transparent 72%),
    color-mix(in srgb, var(--role-soft, #0e2b20) 88%, #000);
}

.role-guide-card::after {
  content: "";
  position: absolute;
  inset: auto -30px -66px auto;
  width: 170px;
  height: 170px;
  border: 28px solid color-mix(in srgb, var(--role-primary, #087a57) 9%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.role-guide-card__head,
.role-guide-card__identity,
.role-guide-card__foot {
  position: relative;
  z-index: 1;
}

.role-guide-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.role-guide-card__identity {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  min-width: 0;
}

.role-guide-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 15px;
  background: var(--role-primary, #087a57);
  color: #fff;
  font-size: 1.18rem;
  box-shadow: 0 8px 16px var(--role-glow, rgba(8, 122, 87, .16));
}

.role-guide-card .section-kicker {
  margin: 0 0 .22rem;
  font-size: .66rem;
}

.role-guide-card h2 {
  margin: 0;
  color: var(--role-ink, #102d22);
  font-size: clamp(1.02rem, 1.5vw, 1.26rem);
  font-weight: 800;
  line-height: 1.22;
}

.role-guide-card__head p {
  max-width: 720px;
  margin: .28rem 0 0;
  color: var(--role-muted, #61756b);
  font-size: .79rem;
  line-height: 1.55;
}

.role-guide-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: 36px;
  flex: 0 0 auto;
  padding: .45rem .68rem;
  border: 1px solid var(--role-line, #dcece3);
  border-radius: 11px;
  background: color-mix(in srgb, var(--role-soft, #f6fbf8) 58%, #fff);
  color: var(--role-primary, #087a57);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.role-guide-more:hover {
  border-color: color-mix(in srgb, var(--role-primary, #087a57) 42%, var(--role-line, #dcece3));
  background: var(--role-primary, #087a57);
  color: #fff;
}

.role-guide-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .68rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  counter-reset: guide-step;
}

.role-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 23px 30px minmax(0, 1fr);
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
  padding: .76rem;
  border: 1px solid color-mix(in srgb, var(--role-line, #dcece3) 88%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, #fff 78%, var(--role-soft, #f6fbf8));
}

html[data-theme="dark"] .role-guide-step {
  background: color-mix(in srgb, var(--role-soft, #0e2b20) 88%, #000);
}

.role-guide-step-number {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--role-primary, #087a57);
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  line-height: 1;
}

.role-guide-step-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--role-soft, #e8f7ee);
  color: var(--role-primary, #087a57);
  font-size: .9rem;
}

.role-guide-step strong {
  display: block;
  color: var(--role-ink, #102d22);
  font-size: .75rem;
  font-weight: 850;
  line-height: 1.24;
}

.role-guide-step p {
  margin: .2rem 0 0;
  color: var(--role-muted, #61756b);
  font-size: .66rem;
  line-height: 1.46;
}

.role-guide-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid color-mix(in srgb, var(--role-line, #dcece3) 82%, transparent);
}

.role-guide-card__foot > span {
  display: inline-flex;
  align-items: flex-start;
  gap: .4rem;
  max-width: 800px;
  color: var(--role-muted, #61756b);
  font-size: .67rem;
  line-height: 1.45;
}

.role-guide-card__foot > span i {
  margin-top: .1rem;
  color: var(--role-primary, #087a57);
}

.role-guide-card__foot .btn-sc-light {
  flex: 0 0 auto;
  font-size: .7rem;
  font-weight: 800;
}

/* Full guide modal */
.role-guide-modal {
  display: grid;
  gap: .9rem;
}

.role-guide-modal__hero {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .95rem;
  border-radius: 17px;
  background: var(--role-soft, #f6fbf8);
  color: var(--role-ink, #102d22);
}

.role-guide-modal__hero > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  background: var(--role-primary, #087a57);
  color: #fff;
  font-size: 1.1rem;
}

.role-guide-modal__hero small {
  display: block;
  margin-bottom: .16rem;
  color: var(--role-primary, #087a57);
  font-size: .66rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.role-guide-modal h2 {
  margin: 0;
  font-size: 1.13rem;
  font-weight: 800;
  line-height: 1.24;
}

.role-guide-modal__hero p {
  margin: .26rem 0 0;
  color: var(--role-muted, #61756b);
  font-size: .76rem;
  line-height: 1.5;
}

.role-guide-modal__steps {
  display: grid;
  gap: .56rem;
}

.role-guide-modal-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: .7rem;
  align-items: flex-start;
  padding: .7rem 0;
  border-bottom: 1px solid var(--role-line, #dcece3);
}

.role-guide-modal-step:last-child {
  border-bottom: 0;
}

.role-guide-modal-step > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--role-soft, #f6fbf8);
  color: var(--role-primary, #087a57);
  font-size: .71rem;
  font-weight: 900;
}

.role-guide-modal-step h3 {
  margin: 0;
  color: var(--role-ink, #102d22);
  font-size: .8rem;
  font-weight: 850;
  line-height: 1.3;
}

.role-guide-modal-step p {
  margin: .2rem 0 0;
  color: var(--role-muted, #61756b);
  font-size: .72rem;
  line-height: 1.52;
}

.role-guide-modal__note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 0;
  padding: .78rem;
  border: 1px solid color-mix(in srgb, var(--role-primary, #087a57) 24%, var(--role-line, #dcece3));
  border-radius: 14px;
  background: color-mix(in srgb, var(--role-soft, #f6fbf8) 72%, #fff);
}

.role-guide-modal__note i {
  margin-top: .1rem;
  color: var(--role-primary, #087a57);
}

.role-guide-modal__note p {
  margin: 0;
  color: var(--role-ink, #102d22);
  font-size: .71rem;
  font-weight: 720;
  line-height: 1.5;
}

.role-guide-modal__footer {
  display: grid;
  gap: .5rem;
}

/* The app has many rich dashboard panels. Let the browser defer off-screen paint. */
@supports (content-visibility: auto) {
  .page-root :is(.shopper-section, .seller-dashboard-section, .workspace-section, .workspace-card, .partner-receiving-section, .partner-ready-section, .partner-cash-reconcile-card, .role-guide-card) {
    content-visibility: auto;
    contain-intrinsic-size: auto 330px;
  }
}

@media (max-width: 767.98px) {
  .role-guide-card {
    padding: .9rem;
    border-radius: 20px;
  }

  .role-guide-card__head {
    gap: .7rem;
  }

  .role-guide-card__identity {
    gap: .62rem;
  }

  .role-guide-card__icon {
    width: 39px;
    height: 39px;
    flex-basis: 39px;
    border-radius: 13px;
    font-size: 1.02rem;
  }

  .role-guide-card h2 {
    font-size: .98rem;
  }

  .role-guide-card__head p {
    font-size: .7rem;
    line-height: 1.48;
  }

  .role-guide-more {
    min-height: 34px;
    padding: .4rem .48rem;
  }

  .role-guide-more span {
    display: none;
  }

  .role-guide-steps {
    grid-template-columns: 1fr;
    gap: .45rem;
    margin: .78rem 0;
  }

  .role-guide-step {
    grid-template-columns: 22px 28px minmax(0, 1fr);
    gap: .44rem;
    padding: .62rem;
    border-radius: 13px;
  }

  .role-guide-step-number {
    width: 22px;
    height: 22px;
    font-size: .61rem;
  }

  .role-guide-step-icon {
    width: 28px;
    height: 28px;
    font-size: .82rem;
  }

  .role-guide-step strong {
    font-size: .71rem;
  }

  .role-guide-step p {
    font-size: .62rem;
    line-height: 1.42;
  }

  .role-guide-card__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .55rem;
    padding-top: .62rem;
  }

  .role-guide-card__foot > span {
    font-size: .61rem;
    line-height: 1.4;
  }

  .role-guide-card__foot .btn-sc-light {
    min-height: 35px;
    align-self: start;
    padding-inline: .55rem;
    font-size: .65rem;
  }
}

@media (max-width: 380px) {
  .role-guide-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .role-guide-card__identity {
    min-width: 0;
  }

  .role-guide-card .section-kicker {
    font-size: .58rem;
  }

  .role-guide-card h2 {
    font-size: .88rem;
  }

  .role-guide-card__head p {
    font-size: .64rem;
  }

  .role-guide-card__foot {
    grid-template-columns: 1fr;
  }

  .role-guide-card__foot .btn-sc-light {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-guide-card,
  .role-guide-step,
  .role-guide-more {
    transition: none !important;
  }
}