/* --------------------------------------------------------------------------
   SaloCart V5.2.36 — Role-aware welcome popup
   Displays only after a successful sign-in or first registration. It is a
   standard dismissible SaloCart dialog, so backdrop tap and Escape stay safe.
   -------------------------------------------------------------------------- */

:root {
  --welcome-green: #0f8318;
  --welcome-ink: #173324;
  --welcome-muted: #63776a;
}

.role-welcome-sheet {
  --welcome-accent: var(--welcome-green);
  --welcome-accent-soft: rgba(15,131,24,.12);
  --welcome-accent-strong: rgba(15,131,24,.24);
  position: relative;
  display: flex;
  width: min(100%, 596px);
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid rgba(20, 73, 42, .14);
  border-radius: 26px;
  background: linear-gradient(145deg, #ffffff 0%, #f8fcf9 55%, #f1f9f3 100%);
  color: var(--welcome-ink);
  box-shadow: 0 24px 70px rgba(9, 42, 24, .26);
  isolation: isolate;
}

.role-welcome-sheet--seller { --welcome-accent: #1c7e52; --welcome-accent-soft: rgba(28,126,82,.12); --welcome-accent-strong: rgba(28,126,82,.23); }
.role-welcome-sheet--partner { --welcome-accent: #1772bd; --welcome-accent-soft: rgba(23,114,189,.12); --welcome-accent-strong: rgba(23,114,189,.23); }
.role-welcome-sheet--admin { --welcome-accent: #6a57b6; --welcome-accent-soft: rgba(106,87,182,.12); --welcome-accent-strong: rgba(106,87,182,.23); }

.role-welcome-sheet__glow {
  position: absolute;
  z-index: -1;
  top: -8rem;
  right: -5rem;
  width: 21rem;
  height: 21rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--welcome-accent-strong) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}

.role-welcome-sheet__close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(18, 55, 33, .1);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  color: var(--welcome-muted);
  font-size: .9rem;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.role-welcome-sheet__close:hover,
.role-welcome-sheet__close:focus-visible {
  border-color: var(--welcome-accent);
  background: var(--welcome-accent-soft);
  color: var(--welcome-accent);
  transform: translateY(-1px);
}

.role-welcome-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  padding: 1.3rem 4rem .4rem 1.35rem;
}
.role-welcome-sheet__role,
.role-welcome-sheet__secure {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: .4rem;
  color: var(--welcome-accent);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}
.role-welcome-sheet__role {
  padding: .48rem .68rem;
  border-radius: 999px;
  background: var(--welcome-accent-soft);
}
.role-welcome-sheet__secure {
  justify-content: flex-end;
  color: var(--welcome-muted);
  font-weight: 750;
  letter-spacing: .015em;
  text-transform: none;
}
.role-welcome-sheet__secure i { color: var(--welcome-accent); }

.role-welcome-sheet__identity {
  display: flex;
  align-items: center;
  gap: .82rem;
  min-width: 0;
  padding: .35rem 1.35rem 0;
}
.role-welcome-sheet__avatar {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 18px;
  background: var(--welcome-accent);
  color: #fff;
  box-shadow: 0 7px 18px var(--welcome-accent-soft);
  font-family: var(--font-display, Sora, sans-serif);
  font-size: 1.06rem;
  font-weight: 900;
}
.role-welcome-sheet__avatar .avatar-photo { width:100%; height:100%; object-fit:cover; }
.role-welcome-sheet__identity > div { min-width:0; }
.role-welcome-sheet__identity p {
  margin: 0;
  color: var(--welcome-ink);
  font-size: clamp(.96rem, 2.3vw, 1.06rem);
  line-height: 1.25;
}
.role-welcome-sheet__identity p strong { font-family: var(--font-display, Sora, sans-serif); font-weight: 900; }
.role-welcome-sheet__identity small {
  display: block;
  margin-top: .18rem;
  overflow: hidden;
  color: var(--welcome-muted);
  font-size: .75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-welcome-sheet__copy { padding: 1rem 1.35rem .5rem; }
.role-welcome-sheet__copy h2 {
  max-width: 30rem;
  margin: 0;
  color: var(--welcome-ink);
  font-family: var(--font-display, Sora, sans-serif);
  font-size: clamp(1.38rem, 3.35vw, 1.92rem);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1.1;
}
.role-welcome-sheet__copy p {
  max-width: 34rem;
  margin: .62rem 0 0;
  color: var(--welcome-muted);
  font-size: .88rem;
  line-height: 1.6;
}

.role-welcome-sheet__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: .6rem 1.35rem 1rem;
  padding: 0;
  list-style: none;
}
.role-welcome-sheet__points li {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: .42rem;
  padding: .68rem .58rem;
  border: 1px solid rgba(20, 73, 42, .1);
  border-radius: 14px;
  background: rgba(255,255,255,.7);
  color: var(--welcome-ink);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.35;
}
.role-welcome-sheet__points i { flex:0 0 auto; color:var(--welcome-accent); font-size:.88rem; }
.role-welcome-sheet__points span { min-width:0; overflow-wrap:anywhere; }

.role-welcome-sheet__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .64rem;
  padding: .9rem 1.35rem max(1.3rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(20, 73, 42, .1);
  background: rgba(255,255,255,.54);
}
.role-welcome-sheet__primary,
.role-welcome-sheet__secondary {
  min-height: 46px;
  border-radius: 14px;
  font-size: .8rem;
  font-weight: 850;
}
.role-welcome-sheet__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-color: var(--welcome-accent);
  background: var(--welcome-accent);
}
.role-welcome-sheet__primary:hover,
.role-welcome-sheet__primary:focus-visible { border-color: var(--welcome-accent); background:var(--welcome-accent); filter:brightness(.95); }
.role-welcome-sheet__secondary { min-width: 148px; border-color: rgba(20,73,42,.14); }

html[data-theme="dark"] .role-welcome-sheet {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(145deg, #14211a 0%, #0d1711 100%);
  color: #eff8f1;
  box-shadow: 0 24px 70px rgba(0,0,0,.52);
}
html[data-theme="dark"] .role-welcome-sheet__close { border-color: rgba(255,255,255,.11); background:rgba(22,36,27,.84); color:rgba(239,248,241,.75); }
html[data-theme="dark"] .role-welcome-sheet__identity p,
html[data-theme="dark"] .role-welcome-sheet__copy h2,
html[data-theme="dark"] .role-welcome-sheet__points li { color:#eff8f1; }
html[data-theme="dark"] .role-welcome-sheet__identity small,
html[data-theme="dark"] .role-welcome-sheet__copy p,
html[data-theme="dark"] .role-welcome-sheet__secure { color:rgba(239,248,241,.68); }
html[data-theme="dark"] .role-welcome-sheet__points li { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.045); }
html[data-theme="dark"] .role-welcome-sheet__actions { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.025); }
html[data-theme="dark"] .role-welcome-sheet__secondary { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#eff8f1; }

@media (max-width: 575.98px) {
  .role-welcome-sheet { border-radius: 24px 24px 0 0; }
  .role-welcome-sheet__header { padding: 1.12rem 4rem .35rem 1rem; }
  .role-welcome-sheet__secure { display:none; }
  .role-welcome-sheet__identity { padding-inline:1rem; }
  .role-welcome-sheet__copy { padding-inline:1rem; }
  .role-welcome-sheet__points { margin-inline:1rem; }
  .role-welcome-sheet__actions { padding-inline:1rem; }
}

@media (max-width: 430px) {
  .role-welcome-sheet__copy h2 { font-size:1.34rem; }
  .role-welcome-sheet__copy p { font-size:.81rem; }
  .role-welcome-sheet__points { gap:.45rem; }
  .role-welcome-sheet__points li { padding:.6rem .45rem; font-size:.63rem; }
  .role-welcome-sheet__actions { grid-template-columns:1fr; }
  .role-welcome-sheet__secondary { width:100%; min-width:0; }
}

@media (max-width: 340px) {
  .role-welcome-sheet__points { grid-template-columns:1fr; }
  .role-welcome-sheet__points li { align-items:center; }
  .role-welcome-sheet__identity small { white-space:normal; }
}

@media (prefers-reduced-motion: reduce) {
  .role-welcome-sheet__close { transition:none; }
}