/* =========================================================
   FIROZKALA SELLER PANEL
   New seller-only design system; storefront styles are untouched.
========================================================= */

.seller-panel-page,
.seller-login-page {
  --sp-bg: var(--background, #F8F8F8);
  --sp-surface: var(--surface, #FFFFFF);
  --sp-surface-soft: var(--surface-soft, #FCFBFA);
  --sp-primary: var(--primary, #F29318);
  --sp-primary-hover: var(--primary-hover, #E68912);
  --sp-green: var(--secondary, #1F9D55);
  --sp-red: #DC3545;
  --sp-blue: #2F80ED;
  --sp-text: var(--text-primary, #1F2533);
  --sp-text-2: var(--text-secondary, #5F6673);
  --sp-muted: var(--text-muted, #9AA1AC);
  --sp-border: var(--border, #EEE9E3);
  --sp-shadow:
    -4px -4px 11px rgba(255, 255, 255, .96),
    4px 4px 11px rgba(218, 213, 206, .24);
  --sp-shadow-sm:
    -2px -2px 7px rgba(255, 255, 255, .94),
    2px 2px 7px rgba(218, 213, 206, .20);
  --sp-inset:
    inset -2px -2px 6px rgba(255, 255, 255, .86),
    inset 2px 2px 6px rgba(218, 213, 206, .16);
  --sp-radius: 1.25rem;
  --sp-radius-sm: .9rem;

  min-height: 100vh;
  margin: 0;

  color: var(--sp-text);
  background: var(--sp-bg) !important;

  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  font-feature-settings: "ss01";
}

.seller-panel-page *,
.seller-panel-page *::before,
.seller-panel-page *::after,
.seller-login-page *,
.seller-login-page *::before,
.seller-login-page *::after {
  box-sizing: border-box;
}

.seller-panel-page button,
.seller-panel-page input,
.seller-panel-page textarea,
.seller-panel-page select,
.seller-login-page button,
.seller-login-page input,
.seller-login-page textarea,
.seller-login-page select {
  font: inherit;
}

.seller-panel-page button,
.seller-login-page button {
  cursor: pointer;
}

.seller-panel-page a,
.seller-login-page a {
  color: inherit;
  text-decoration: none;
}

.sp-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sp-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
}

.sp-app {
  min-height: 100vh;
}

.sp-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
}

.sp-panel {
  min-width: 0;
  padding: 1rem;
}

.sp-mt {
  margin-top: 1rem;
}

.sp-mt-sm {
  margin-top: .75rem;
}

.is-green {
  color: var(--sp-green) !important;
}

.is-orange {
  color: var(--sp-primary) !important;
}

.is-red {
  color: var(--sp-red) !important;
}

/* =========================================================
   Sidebar
========================================================= */

.sp-sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 120;

  display: flex;
  flex-direction: column;

  width: 17rem;
  height: 100dvh;
  padding: .9rem;

  background: var(--sp-bg);
  border-left: 1px solid rgba(238, 233, 227, .9);

  overflow-y: auto;
  overscroll-behavior: contain;
}

.sp-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  padding: .35rem .45rem .75rem;
}

.sp-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.55;
}

.sp-brand strong {
  color: var(--sp-primary);
  font-size: 1.3rem;
  font-weight: 900;
}

.sp-brand span {
  color: var(--sp-muted);
  font-size: .66rem;
  font-weight: 700;
}

.sp-sidebar-close {
  display: none;
  align-items: center;
  justify-content: center;

  width: 2.35rem;
  height: 2.35rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  box-shadow: var(--sp-shadow-sm);
}

.sp-store-mini {
  display: flex;
  align-items: center;
  gap: .65rem;

  padding: .65rem;
  margin-bottom: .8rem;
}

.sp-store-mini img {
  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 2.7rem;

  object-fit: cover;

  border-radius: .8rem;
}

.sp-store-mini > div {
  min-width: 0;
}

.sp-store-mini strong {
  display: flex;
  align-items: center;
  gap: .28rem;

  color: var(--sp-text);
  font-size: .75rem;
  font-weight: 900;
}

.sp-store-mini strong b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: .95rem;
  height: .95rem;

  color: #fff;
  background: var(--sp-blue);
  border-radius: 50%;

  font-size: .58rem;
}

.sp-store-mini span {
  display: flex;
  align-items: center;
  gap: .3rem;

  margin-top: .15rem;

  color: var(--sp-muted);
  font-size: .6rem;
}

.sp-store-mini span i {
  width: .42rem;
  height: .42rem;

  background: var(--sp-green);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(31, 157, 85, .08);
}

.sp-nav {
  display: flex;
  flex-direction: column;
  gap: .24rem;
}

.sp-nav-link {
  display: flex;
  align-items: center;
  gap: .68rem;

  min-height: 2.8rem;
  padding: .58rem .75rem;

  color: var(--sp-text-2);
  border: 1px solid transparent;
  border-radius: .86rem;

  font-size: .72rem;
  font-weight: 750;

  transition:
    color .2s ease,
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.sp-nav-link:hover {
  color: var(--sp-primary);
  background: rgba(242, 147, 24, .045);
  transform: translateX(-2px);
}

.sp-nav-link.is-active {
  color: #fff;
  background: var(--sp-primary);
  border-color: rgba(255, 255, 255, .36);
  box-shadow:
    -2px -2px 7px rgba(255, 255, 255, .78),
    3px 3px 8px rgba(215, 125, 15, .22);
}

.sp-nav-link .sp-icon {
  width: 1.22rem;
  height: 1.22rem;
}

.sp-nav-badge {
  min-width: 1.35rem;
  height: 1.35rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-right: auto;
  padding: 0 .3rem;

  color: #fff;
  background: var(--sp-red);
  border-radius: 999px;

  font-size: .57rem;
  font-weight: 900;
}

.sp-nav-link.is-active .sp-nav-badge {
  color: var(--sp-primary);
  background: #fff;
}

.sp-sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: .4rem;

  margin-top: auto;
  padding-top: 1rem;
}

.sp-sidebar-foot a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;

  min-height: 2.5rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;
  box-shadow: var(--sp-shadow-sm);

  font-size: .65rem;
  font-weight: 800;
}

.sp-sidebar-foot a.is-logout {
  color: var(--sp-red);
}

.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;

  display: none;

  background: rgba(31, 37, 51, .32);
  border: 0;
  opacity: 0;
  pointer-events: none;

  backdrop-filter: blur(3px);
  transition: opacity .25s ease;
}

/* =========================================================
   Main / topbar
========================================================= */

.sp-main {
  min-height: 100vh;
  margin-right: 17rem;
}

.sp-topbar {
  position: sticky;
  top: 0;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  min-height: 4.6rem;
  padding: .72rem clamp(1rem, 2vw, 1.6rem);

  background: rgba(248, 248, 248, .9);
  border-bottom: 1px solid rgba(238, 233, 227, .8);

  backdrop-filter: blur(12px);
}

.sp-topbar-start,
.sp-topbar-actions {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.sp-topbar-start > div {
  display: flex;
  flex-direction: column;
}

.sp-topbar-start strong {
  color: var(--sp-text);
  font-size: .88rem;
  font-weight: 900;
}

.sp-topbar-start span {
  color: var(--sp-muted);
  font-size: .61rem;
}

.sp-menu {
  display: none;
  align-items: center;
  justify-content: center;

  width: 2.45rem;
  height: 2.45rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;
  box-shadow: var(--sp-shadow-sm);
}

.sp-round-btn,
.sp-avatar {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.55rem;
  height: 2.55rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  box-shadow: var(--sp-shadow-sm);
}

.sp-round-btn > i {
  position: absolute;
  top: .2rem;
  right: .2rem;

  width: .48rem;
  height: .48rem;

  background: var(--sp-red);
  border: 2px solid var(--sp-surface);
  border-radius: 50%;
}

.sp-avatar {
  overflow: hidden;
}

.sp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-content {
  width: min(100%, 92rem);
  margin: 0 auto;
  padding: 1.1rem clamp(1rem, 2vw, 1.6rem) 2rem;
}

.sp-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1rem;
}

.sp-page-head h1 {
  margin: 0;

  color: var(--sp-text);
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.6;
}

.sp-page-head p {
  margin-top: .16rem;

  color: var(--sp-muted);
  font-size: .68rem;
  line-height: 1.8;
}

.sp-page-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.sp-mobile-nav {
  display: none;
}

/* =========================================================
   Buttons / status / common controls
========================================================= */

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;

  min-height: 2.55rem;
  padding: .56rem .9rem;

  border: 1px solid transparent;
  border-radius: .82rem;

  font-size: .68rem;
  font-weight: 900;
  line-height: 1.4;
  white-space: nowrap;

  transition:
    transform .2s ease,
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

.sp-btn:hover {
  transform: translateY(-1px);
}

.sp-btn:active {
  transform: translateY(0);
}

.sp-btn.is-primary {
  color: #fff;
  background: var(--sp-primary);
  border-color: rgba(255, 255, 255, .36);
  box-shadow: 0 7px 16px rgba(242, 147, 24, .18);
}

.sp-btn.is-primary:hover {
  background: var(--sp-primary-hover);
}

.sp-btn.is-success {
  color: #fff;
  background: var(--sp-green);
  box-shadow: 0 7px 16px rgba(31, 157, 85, .16);
}

.sp-btn.is-danger {
  color: #fff;
  background: var(--sp-red);
  box-shadow: 0 7px 16px rgba(220, 53, 69, .14);
}

.sp-btn.is-soft {
  color: var(--sp-text-2);
  background: var(--sp-surface);
  border-color: var(--sp-border);
  box-shadow: var(--sp-shadow-sm);
}

.sp-btn.is-small {
  min-height: 2.1rem;
  padding: .4rem .68rem;
  border-radius: .7rem;
  font-size: .61rem;
}

.sp-status,
.sp-chip,
.sp-delivery {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: max-content;
  min-height: 1.55rem;
  padding: .24rem .55rem;

  border-radius: 999px;

  font-style: normal;
  font-size: .57rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.sp-status.is-success,
.sp-chip.is-green {
  color: var(--sp-green);
  background: rgba(31, 157, 85, .09);
  border: 1px solid rgba(31, 157, 85, .14);
}

.sp-status.is-warning,
.sp-chip.is-orange {
  color: #B86B09;
  background: rgba(242, 147, 24, .10);
  border: 1px solid rgba(242, 147, 24, .16);
}

.sp-status.is-danger,
.sp-chip.is-red {
  color: var(--sp-red);
  background: rgba(220, 53, 69, .08);
  border: 1px solid rgba(220, 53, 69, .14);
}

.sp-status.is-info {
  color: var(--sp-blue);
  background: rgba(47, 128, 237, .08);
  border: 1px solid rgba(47, 128, 237, .14);
}

.sp-status.is-muted {
  color: var(--sp-muted);
  background: rgba(154, 161, 172, .08);
  border: 1px solid rgba(154, 161, 172, .14);
}

.sp-delivery.is-pickup {
  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
}

.sp-delivery.is-normal {
  color: var(--sp-primary);
  background: rgba(242, 147, 24, .08);
}

.sp-delivery.is-express {
  color: var(--sp-red);
  background: rgba(220, 53, 69, .08);
}

.sp-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;

  margin-bottom: .85rem;
}

.sp-card-head h2 {
  margin: 0;

  color: var(--sp-text);
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.65;
}

.sp-card-head p {
  margin-top: .12rem;

  color: var(--sp-muted);
  font-size: .61rem;
  line-height: 1.75;
}

.sp-card-head > a,
.sp-card-head > button:not(.sp-btn) {
  flex: 0 0 auto;
  color: var(--sp-primary);
  background: transparent;
  border: 0;
  font-size: .62rem;
  font-weight: 900;
}

.sp-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;

  margin-top: .8rem;
}

.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;

  padding: 2rem;
  margin-top: 1rem;

  text-align: center;
}

.sp-empty strong {
  font-size: .85rem;
}

.sp-empty span {
  color: var(--sp-muted);
  font-size: .65rem;
}

.sp-toast {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 10000;

  max-width: min(22rem, calc(100vw - 2rem));
  padding: .72rem .9rem;

  color: #fff;
  background: var(--sp-text);
  border-radius: .8rem;
  box-shadow: 0 12px 30px rgba(31, 37, 51, .22);

  font-size: .66rem;
  font-weight: 800;

  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);

  transition: .25s ease;
}

.sp-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================================
   Stats / grids
========================================================= */

.sp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
}

.sp-stat {
  display: flex;
  align-items: center;
  gap: .75rem;

  min-width: 0;
  padding: .85rem;
}

.sp-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 2.7rem;

  border-radius: .85rem;
}

.sp-stat-icon.is-green {
  color: var(--sp-green) !important;
  background: rgba(31, 157, 85, .08);
}

.sp-stat-icon.is-orange {
  color: var(--sp-primary) !important;
  background: rgba(242, 147, 24, .08);
}

.sp-stat-icon.is-red {
  color: var(--sp-red) !important;
  background: rgba(220, 53, 69, .07);
}

.sp-stat > div {
  min-width: 0;
}

.sp-stat > div > span {
  display: block;

  color: var(--sp-muted);
  font-size: .6rem;
}

.sp-stat strong {
  display: block;

  margin-top: .12rem;

  color: var(--sp-text);
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.55;
}

.sp-stat small {
  display: block;

  margin-top: .1rem;

  color: var(--sp-muted);
  font-size: .56rem;
  line-height: 1.55;
}

.sp-stats.is-compact .sp-stat {
  padding: .72rem;
}

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

/* =========================================================
   Dashboard
========================================================= */

.sp-quick-orders,
.sp-alerts,
.sp-feature-links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-quick-orders > a,
.sp-alerts > div,
.sp-feature-links > a {
  display: flex;
  align-items: center;
  gap: .65rem;

  min-width: 0;
  padding: .65rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .88rem;
}

.sp-quick-orders > a > b,
.sp-alerts > div > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;

  border-radius: .7rem;

  font-size: .68rem;
  font-weight: 900;
}

.sp-quick-orders b.is-pickup {
  color: var(--sp-green);
  background: rgba(31, 157, 85, .09);
}

.sp-quick-orders b.is-normal {
  color: var(--sp-primary);
  background: rgba(242, 147, 24, .09);
}

.sp-quick-orders b.is-express {
  color: var(--sp-red);
  background: rgba(220, 53, 69, .08);
}

.sp-quick-orders span,
.sp-alerts span,
.sp-feature-links span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-quick-orders strong,
.sp-alerts strong,
.sp-feature-links strong {
  overflow: hidden;
  color: var(--sp-text);
  font-size: .69rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-quick-orders small,
.sp-alerts small,
.sp-feature-links small {
  margin-top: .1rem;
  overflow: hidden;

  color: var(--sp-muted);
  font-size: .57rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-quick-orders em {
  margin-right: auto;
}

.sp-alerts > div > b.is-red {
  color: var(--sp-red) !important;
  background: rgba(220, 53, 69, .08);
}

.sp-alerts > div > b.is-orange {
  color: var(--sp-primary) !important;
  background: rgba(242, 147, 24, .08);
}

.sp-alerts > div > b.is-green {
  color: var(--sp-green) !important;
  background: rgba(31, 157, 85, .08);
}

.sp-alerts a {
  margin-right: auto;
  color: var(--sp-primary);
  font-size: .6rem;
  font-weight: 900;
}

.sp-feature-links > a > i {
  width: .55rem;
  height: .55rem;
  flex: 0 0 .55rem;
  border-radius: 50%;
}

.sp-feature-links i.is-green {
  background: var(--sp-green);
}

.sp-feature-links i.is-orange {
  background: var(--sp-primary);
}

.sp-feature-links i.is-red {
  background: var(--sp-red);
}

.sp-feature-links > a {
  font-size: 1rem;
}

.sp-feature-links > a > span + * {
  margin-right: auto;
}

.sp-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .45rem;

  min-height: 13rem;
  padding: 1rem .25rem .25rem;

  border-bottom: 1px solid var(--sp-border);
}

.sp-chart > div {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;

  width: 100%;
  height: 10rem;
}

.sp-chart i {
  display: block;
  width: min(2.2rem, 72%);
  height: var(--v);

  background: linear-gradient(to top, var(--sp-primary), #F8BE6B);
  border-radius: .45rem .45rem .12rem .12rem;

  box-shadow: 0 6px 12px rgba(242, 147, 24, .12);
}

.sp-chart b {
  margin-bottom: .25rem;
  color: var(--sp-text-2);
  font-size: .54rem;
}

.sp-chart span {
  margin-top: .35rem;
  color: var(--sp-muted);
  font-size: .58rem;
}

/* =========================================================
   Order list / toolbar
========================================================= */

.sp-order-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .35rem;

  padding: .45rem;
  margin-bottom: .75rem;
}

.sp-order-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;

  min-width: 0;
  min-height: 2.65rem;
  padding: .45rem .5rem;

  color: var(--sp-text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: .78rem;
}

.sp-order-tabs button strong {
  font-size: .78rem;
  font-weight: 900;
}

.sp-order-tabs button span {
  overflow: hidden;
  font-size: .58rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-order-tabs button.is-active {
  color: #fff;
  background: var(--sp-primary);
  box-shadow: 0 5px 12px rgba(242, 147, 24, .16);
}

.sp-toolbar {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) repeat(2, minmax(9rem, .65fr));
  gap: .5rem;

  padding: .55rem;
  margin-bottom: .75rem;
}

.sp-search {
  display: flex;
  align-items: center;
  gap: .4rem;

  min-width: 0;
  min-height: 2.4rem;
  padding: 0 .65rem;

  color: var(--sp-muted);
  background: var(--sp-bg);
  border: 1px solid var(--sp-border);
  border-radius: .78rem;
  box-shadow: var(--sp-inset);
}

.sp-search input {
  width: 100%;
  min-width: 0;

  color: var(--sp-text);
  background: transparent;
  border: 0;
  outline: 0;

  font-size: .65rem;
}

.sp-toolbar > select,
.sp-field input,
.sp-field select,
.sp-field textarea,
.sp-form-stack input,
.sp-hours-list input,
.sp-pause-box select,
.sp-mini-price input,
.sp-review-reply-form textarea {
  width: 100%;
  min-width: 0;

  color: var(--sp-text);
  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .78rem;
  outline: 0;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.sp-toolbar > select {
  min-height: 2.4rem;
  padding: 0 .58rem;
  font-size: .62rem;
}

.sp-toolbar > select:focus,
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus,
.sp-form-stack input:focus,
.sp-hours-list input:focus,
.sp-pause-box select:focus,
.sp-mini-price input:focus,
.sp-review-reply-form textarea:focus {
  border-color: rgba(242, 147, 24, .52);
  box-shadow: 0 0 0 3px rgba(242, 147, 24, .08);
}

.sp-order-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-order-row {
  display: grid;
  grid-template-columns:
    minmax(6.5rem, .7fr)
    minmax(9rem, 1.1fr)
    minmax(10rem, 1.15fr)
    minmax(9rem, 1fr)
    auto;
  align-items: center;
  gap: .8rem;

  min-width: 0;
  padding: .75rem .85rem;
}

.sp-order-row > div {
  min-width: 0;
}

.sp-order-row > div:not(:last-child) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sp-order-row strong {
  color: var(--sp-text);
  font-size: .69rem;
  font-weight: 900;
}

.sp-order-row small {
  margin-top: .12rem;
  overflow: hidden;

  color: var(--sp-muted);
  font-size: .56rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-order-code {
  color: var(--sp-primary) !important;
  direction: ltr;
}

.sp-order-row .sp-status,
.sp-order-row .sp-delivery {
  margin-bottom: .12rem;
}

/* =========================================================
   Order details
========================================================= */

.sp-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  padding: .8rem;
  margin-bottom: .9rem;
}

.sp-progress > div {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: column;

  padding: .35rem;
  text-align: center;
}

.sp-progress > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  right: calc(50% + 1.25rem);

  width: calc(100% - 2.5rem);
  height: 2px;

  background: var(--sp-border);
}

.sp-progress i {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.05rem;
  height: 2.05rem;

  color: var(--sp-muted);
  background: var(--sp-bg);
  border: 2px solid var(--sp-border);
  border-radius: 50%;

  font-style: normal;
  font-size: .65rem;
  font-weight: 900;
}

.sp-progress span {
  margin-top: .35rem;
  color: var(--sp-text-2);
  font-size: .62rem;
  font-weight: 850;
}

.sp-progress small {
  margin-top: .06rem;
  color: var(--sp-muted);
  font-size: .53rem;
}

.sp-progress .is-done i,
.sp-progress .is-active i {
  color: #fff;
  background: var(--sp-green);
  border-color: var(--sp-green);
}

.sp-progress .is-active i {
  background: var(--sp-primary);
  border-color: var(--sp-primary);
}

.sp-progress .is-done:not(:last-child)::after {
  background: var(--sp-green);
}

.sp-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .7fr);
  gap: .9rem;
}

.sp-detail-main,
.sp-detail-aside {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}

.sp-order-items {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sp-order-items > div {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;

  padding: .55rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .85rem;
}

.sp-order-items img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: .68rem;
}

.sp-order-items span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-order-items strong {
  color: var(--sp-text);
  font-size: .68rem;
  font-weight: 900;
}

.sp-order-items small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-order-items b {
  color: var(--sp-text);
  font-size: .67rem;
  white-space: nowrap;
}

.sp-order-note {
  margin-top: .65rem;
  padding: .7rem;

  color: var(--sp-text-2);
  background: rgba(242, 147, 24, .055);
  border: 1px solid rgba(242, 147, 24, .13);
  border-radius: .85rem;
}

.sp-order-note strong {
  font-size: .65rem;
  font-weight: 900;
}

.sp-order-note p {
  margin-top: .22rem;
  font-size: .59rem;
  line-height: 1.8;
}

.sp-info-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-info-list > div {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .8rem;
}

.sp-info-list > div > .sp-icon {
  color: var(--sp-primary);
}

.sp-info-list span {
  display: flex;
  flex-direction: column;
}

.sp-info-list small,
.sp-payment span {
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-info-list strong {
  margin-top: .08rem;
  color: var(--sp-text);
  font-size: .66rem;
  font-weight: 900;
}

.sp-payment {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.sp-payment > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;

  padding-bottom: .45rem;
  border-bottom: 1px dashed var(--sp-border);
}

.sp-payment b {
  color: var(--sp-text);
  font-size: .65rem;
}

.sp-payment .is-total {
  padding-top: .2rem;
  border-bottom: 0;
}

.sp-payment .is-total span {
  color: var(--sp-text);
  font-weight: 800;
}

.sp-payment .is-total b {
  color: var(--sp-primary);
  font-size: .82rem;
  font-weight: 900;
}

.sp-wallet-note,
.sp-info-banner {
  margin-top: .7rem;
  padding: .65rem;

  color: var(--sp-text-2);
  background: rgba(242, 147, 24, .055);
  border: 1px solid rgba(242, 147, 24, .13);
  border-radius: .82rem;
}

.sp-wallet-note strong,
.sp-info-banner strong {
  color: var(--sp-primary);
  font-size: .62rem;
  font-weight: 900;
}

.sp-wallet-note p,
.sp-info-banner p {
  margin-top: .16rem;
  font-size: .56rem;
  line-height: 1.75;
}

.sp-info-banner.is-green {
  color: var(--sp-text-2) !important;
  background: rgba(31, 157, 85, .055);
  border-color: rgba(31, 157, 85, .13);
}

.sp-info-banner.is-green strong {
  color: var(--sp-green);
}

.sp-info-banner.is-orange strong {
  color: var(--sp-primary);
}

/* =========================================================
   Forms
========================================================= */

.sp-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .72fr);
  gap: .9rem;
  align-items: start;
}

.sp-form-main,
.sp-form-aside {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}

.sp-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.sp-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-width: 0;
}

.sp-field.is-wide {
  grid-column: span 1;
}

.sp-field.is-full {
  grid-column: 1 / -1;
}

.sp-field > span {
  color: var(--sp-text-2);
  font-size: .6rem;
  font-weight: 800;
}

.sp-field input,
.sp-field select {
  min-height: 2.55rem;
  padding: 0 .68rem;
  font-size: .65rem;
}

.sp-field textarea {
  padding: .65rem .7rem;
  resize: vertical;
  font-size: .65rem;
  line-height: 1.8;
}

.sp-form-stack {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.sp-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.sp-check-grid > label,
.sp-select-products > label {
  display: flex;
  align-items: center;
  gap: .55rem;

  min-width: 0;
  padding: .62rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;

  cursor: pointer;
}

.sp-check-grid input,
.sp-select-products input,
.sp-day-picker input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sp-primary);
}

.sp-check-grid span,
.sp-select-products span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-check-grid strong,
.sp-select-products strong {
  color: var(--sp-text);
  font-size: .64rem;
  font-weight: 900;
}

.sp-check-grid small,
.sp-select-products small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .54rem;
}

.sp-discount-preview {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: .55rem;

  padding: .62rem;

  background: rgba(220, 53, 69, .045);
  border: 1px solid rgba(220, 53, 69, .11);
  border-radius: .82rem;
}

.sp-discount-preview span,
.sp-discount-preview small {
  color: var(--sp-text-2);
  font-size: .57rem;
}

.sp-discount-preview strong {
  color: var(--sp-red);
  font-size: .8rem;
  font-weight: 900;
}

.sp-upload {
  position: relative;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: .4rem;

  min-height: 14rem;
  padding: .65rem;

  background: var(--sp-surface-soft);
  border: 1px dashed rgba(242, 147, 24, .38);
  border-radius: 1rem;

  cursor: pointer;
  overflow: hidden;
}

.sp-upload > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.sp-upload > img:not([hidden]) {
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: .8rem;
}

.sp-upload > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  color: var(--sp-primary);
  font-size: .63rem;
  font-weight: 900;
}

.sp-upload > small {
  color: var(--sp-muted);
  font-size: .52rem;
}

.sp-upload.is-compact {
  min-height: 10rem;
}

.sp-upload-placeholder {
  display: flex !important;
  align-items: center;
  flex-direction: column;
  gap: .3rem !important;
}

.sp-upload-placeholder .sp-icon {
  width: 1.8rem;
  height: 1.8rem;
}

.sp-upload-placeholder strong {
  color: var(--sp-text);
  font-size: .67rem;
}

.sp-upload-placeholder small {
  color: var(--sp-muted);
  font-size: .53rem;
}

.sp-toggle-list {
  display: flex;
  flex-direction: column;
}

.sp-toggle-list > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;

  padding: .65rem 0;
  border-bottom: 1px solid var(--sp-border);
}

.sp-toggle-list > label:first-child {
  padding-top: 0;
}

.sp-toggle-list > label:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.sp-toggle-list > label > span:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-toggle-list strong {
  color: var(--sp-text);
  font-size: .64rem;
  font-weight: 900;
}

.sp-toggle-list small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .53rem;
  line-height: 1.65;
}

.sp-switch {
  position: relative;

  display: inline-flex;
  flex: 0 0 auto;

  width: 2.55rem;
  height: 1.42rem;
}

.sp-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sp-switch > span,
.sp-switch > i {
  position: absolute;
  inset: 0;

  display: block;

  background: #D9DCE1;
  border-radius: 999px;

  transition: background-color .2s ease;
}

.sp-switch > span::after,
.sp-switch > i::after {
  content: "";
  position: absolute;
  top: .2rem;
  right: .2rem;

  width: 1.02rem;
  height: 1.02rem;

  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(31, 37, 51, .18);

  transition: transform .2s ease;
}

.sp-switch input:checked + span,
.sp-switch input:checked + i {
  background: var(--sp-green);
}

.sp-switch input:checked + span::after,
.sp-switch input:checked + i::after {
  transform: translateX(-1.12rem);
}

.sp-switch input:disabled + span,
.sp-switch input:disabled + i {
  opacity: .5;
}

.sp-switch.is-large {
  width: 3rem;
  height: 1.65rem;
}

.sp-switch.is-large > span::after {
  width: 1.2rem;
  height: 1.2rem;
  top: .225rem;
  right: .225rem;
}

.sp-switch.is-large input:checked + span::after {
  transform: translateX(-1.35rem);
}

.sp-sticky-actions {
  position: sticky;
  top: 5.4rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;

  padding: .65rem;
}

.sp-page-save {
  position: sticky;
  bottom: .8rem;
  z-index: 30;

  display: flex;
  justify-content: flex-end;

  margin-top: 1rem;
}

.sp-page-save .sp-btn {
  min-width: 11rem;
}

/* =========================================================
   Products
========================================================= */

.sp-product-toolbar {
  grid-template-columns: minmax(12rem, 1.5fr) repeat(2, minmax(9rem, .65fr));
}

.sp-product-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-product-row {
  display: grid;
  grid-template-columns:
    4.1rem
    minmax(12rem, 1.45fr)
    minmax(7rem, .7fr)
    minmax(6rem, .55fr)
    minmax(7.3rem, .7fr)
    auto
    auto;
  align-items: center;
  gap: .72rem;

  min-width: 0;
  padding: .65rem;
}

.sp-product-row > img {
  width: 4.1rem;
  height: 4.1rem;
  object-fit: cover;
  border-radius: .8rem;
}

.sp-product-main {
  min-width: 0;
}

.sp-product-main > div:first-child {
  display: flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
}

.sp-product-main strong {
  overflow: hidden;
  color: var(--sp-text);
  font-size: .68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-product-main > small {
  display: block;
  margin-top: .12rem;
  color: var(--sp-muted);
  font-size: .54rem;
}

.sp-product-tags {
  display: flex;
  align-items: center;
  gap: .28rem;
  flex-wrap: wrap;
  margin-top: .35rem;
}

.sp-product-tags em {
  padding: .2rem .42rem;

  color: var(--sp-text-2);
  background: var(--sp-bg);
  border-radius: 999px;

  font-style: normal;
  font-size: .49rem;
  font-weight: 800;
}

.sp-product-tags em.is-green {
  background: rgba(31, 157, 85, .08);
}

.sp-product-tags em.is-red {
  background: rgba(220, 53, 69, .08);
}

.sp-product-tags em.is-orange {
  background: rgba(242, 147, 24, .09);
}

.sp-product-metric {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-width: 0;
}

.sp-product-metric small {
  color: var(--sp-muted);
  font-size: .52rem;
}

.sp-product-metric strong {
  margin-top: .08rem;
  color: var(--sp-text);
  font-size: .64rem;
  font-weight: 900;
  white-space: nowrap;
}

.sp-product-metric del {
  color: var(--sp-muted);
  font-size: .48rem;
}

.sp-row-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.sp-row-actions > a,
.sp-row-actions > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.05rem;
  height: 2.05rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: .67rem;
  box-shadow: var(--sp-shadow-sm);
}

.sp-row-actions > button:last-child {
  color: var(--sp-red);
}

.sp-row-actions .sp-icon {
  width: .9rem;
  height: .9rem;
}

/* =========================================================
   Subscriptions
========================================================= */

.sp-subscription-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 1rem;
  margin-bottom: .9rem;

  background:
    linear-gradient(110deg, rgba(31, 157, 85, .085), transparent 45%),
    var(--sp-surface);
}

.sp-subscription-hero > div {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.sp-subscription-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;

  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
  border-radius: .95rem;
}

.sp-subscription-hero h2 {
  color: var(--sp-text);
  font-size: .9rem;
  font-weight: 900;
}

.sp-subscription-hero p {
  margin-top: .12rem;
  color: var(--sp-text-2);
  font-size: .59rem;
  line-height: 1.75;
}

.sp-plan-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.sp-plan-list > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) minmax(9rem, .8fr) auto;
  align-items: center;
  gap: .6rem;

  padding: .65rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .85rem;
}

.sp-plan-list > div.is-active {
  border-color: rgba(31, 157, 85, .18);
}

.sp-plan-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
  border-radius: .65rem;
}

.sp-plan-list > div > div {
  display: flex;
  flex-direction: column;
}

.sp-plan-list strong {
  font-size: .67rem;
  font-weight: 900;
}

.sp-plan-list small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .53rem;
}

.sp-mini-price {
  display: flex;
  align-items: center;
  gap: .25rem;

  min-width: 0;
}

.sp-mini-price > span {
  color: var(--sp-muted);
  font-size: .51rem;
}

.sp-mini-price input {
  width: 6rem;
  height: 2.1rem;
  padding: 0 .45rem;
  font-size: .59rem;
}

.sp-mini-price em {
  color: var(--sp-muted);
  font-style: normal;
  font-size: .51rem;
  white-space: nowrap;
}

.sp-capacity-box {
  display: grid;
  grid-template-columns: minmax(9rem, .75fr) minmax(0, 1.25fr);
  gap: .75rem;
  align-items: end;
}

.sp-capacity-box > div {
  display: flex;
  flex-direction: column;
}

.sp-capacity-box > div > span,
.sp-capacity-box > div > small {
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-capacity-box > div > strong {
  margin: .12rem 0 .35rem;
  font-size: .73rem;
  font-weight: 900;
}

.sp-capacity-box i {
  display: block;
  height: .55rem;
  overflow: hidden;

  background: var(--sp-bg);
  border-radius: 999px;
  box-shadow: var(--sp-inset);
}

.sp-capacity-box i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sp-green), #66C991);
  border-radius: inherit;
}

.sp-capacity-box > div > small {
  margin-top: .25rem;
}

.sp-select-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.sp-select-products img {
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  object-fit: cover;
  border-radius: .65rem;
}

.sp-day-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .42rem;
}

.sp-day-picker label {
  position: relative;
  cursor: pointer;
}

.sp-day-picker input {
  position: absolute;
  opacity: 0;
}

.sp-day-picker span {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2.45rem;

  color: var(--sp-text-2);
  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .75rem;

  font-size: .58rem;
  font-weight: 850;
}

.sp-day-picker input:checked + span {
  color: #fff;
  background: var(--sp-green);
  border-color: var(--sp-green);
}

/* =========================================================
   Stories
========================================================= */

.sp-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(15rem, .55fr);
  gap: .9rem;
  align-items: start;
}

.sp-story-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-story-list > div {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;

  padding: .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .85rem;
}

.sp-story-thumb {
  position: relative;

  width: 4.2rem;
  height: 5.6rem;
  overflow: hidden;

  border-radius: .75rem;
}

.sp-story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-story-thumb span {
  position: absolute;
  bottom: .25rem;
  right: .25rem;

  padding: .17rem .35rem;

  color: #fff;
  background: rgba(31, 37, 51, .68);
  border-radius: 999px;

  font-size: .45rem;
  font-weight: 800;
}

.sp-story-list > div > div:nth-child(2) {
  min-width: 0;
}

.sp-story-list strong {
  display: block;
  overflow: hidden;

  font-size: .67rem;
  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-story-list small {
  display: block;
  margin-top: .1rem;
  color: var(--sp-muted);
  font-size: .52rem;
}

.sp-story-list p {
  margin-top: .35rem;
  color: var(--sp-text-2);
  font-size: .52rem;
}

.sp-story-list p b {
  color: var(--sp-primary);
}

.sp-story-phone {
  padding: .9rem;
  text-align: center;
}

.sp-phone-frame {
  width: min(14rem, 100%);
  margin: 0 auto;
  padding: .38rem;

  background: var(--sp-text);
  border-radius: 1.65rem;
  box-shadow: 0 12px 26px rgba(31, 37, 51, .16);
}

.sp-phone-story {
  position: relative;

  height: 24rem;
  overflow: hidden;

  background: #202632;
  border-radius: 1.35rem;
}

.sp-phone-story > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-phone-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 25%, transparent 65%, rgba(0, 0, 0, .55));
}

.sp-story-bars {
  position: absolute;
  top: .55rem;
  right: .55rem;
  left: .55rem;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .18rem;
}

.sp-story-bars i {
  height: .14rem;
  background: rgba(255, 255, 255, .45);
  border-radius: 999px;
}

.sp-story-bars i:first-child {
  background: #fff;
}

.sp-story-brand {
  position: absolute;
  top: 1.05rem;
  right: .65rem;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  color: #fff;
}

.sp-story-brand b {
  font-size: .62rem;
}

.sp-story-brand small {
  font-size: .46rem;
  opacity: .8;
}

.sp-phone-story > a {
  position: absolute;
  right: .7rem;
  bottom: .75rem;
  left: .7rem;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2.35rem;

  color: var(--sp-text);
  background: #fff;
  border-radius: .75rem;

  font-size: .58rem;
  font-weight: 900;
}

.sp-story-phone > p {
  margin-top: .65rem;
  color: var(--sp-muted);
  font-size: .53rem;
}

.sp-scheduled-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sp-scheduled-list > div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .7rem;

  padding: .62rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;
}

.sp-story-date {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

  min-height: 2.9rem;

  color: var(--sp-primary);
  background: rgba(242, 147, 24, .07);
  border-radius: .68rem;
}

.sp-story-date strong {
  font-size: .59rem;
}

.sp-story-date small {
  font-size: .5rem;
}

.sp-scheduled-list > div > div {
  display: flex;
  flex-direction: column;
}

.sp-scheduled-list > div > div strong {
  font-size: .66rem;
}

.sp-scheduled-list > div > div small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .52rem;
}

.sp-scheduled-list > div > button {
  color: var(--sp-red);
  background: transparent;
  border: 0;
  font-size: .58rem;
  font-weight: 900;
}

/* =========================================================
   Discounts
========================================================= */

.sp-discount-feature {
  position: relative;

  padding: 1rem;
  overflow: hidden;

  background:
    linear-gradient(125deg, rgba(220, 53, 69, .06), transparent 50%),
    var(--sp-surface);
}

.sp-discount-ribbon {
  position: absolute;
  top: .7rem;
  left: .7rem;

  padding: .25rem .55rem;

  color: #fff;
  background: var(--sp-red);
  border-radius: 999px;

  font-size: .54rem;
  font-weight: 900;
}

.sp-discount-product {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sp-discount-product img {
  width: 5.2rem;
  height: 5.2rem;
  object-fit: cover;
  border-radius: 1rem;
}

.sp-discount-product > div {
  min-width: 0;
}

.sp-discount-product em {
  color: var(--sp-red);
  font-style: normal;
  font-size: .56rem;
  font-weight: 900;
}

.sp-discount-product h2 {
  margin-top: .1rem;
  font-size: .9rem;
  font-weight: 900;
}

.sp-discount-product p {
  margin-top: .1rem;
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-discount-numbers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: center;
  gap: .5rem;

  margin-top: .8rem;
  padding: .7rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .85rem;
}

.sp-discount-numbers > span {
  display: flex;
  flex-direction: column;
}

.sp-discount-numbers small {
  color: var(--sp-muted);
  font-size: .5rem;
}

.sp-discount-numbers del {
  margin-top: .1rem;
  color: var(--sp-muted);
  font-size: .62rem;
}

.sp-discount-numbers strong {
  margin-top: .1rem;
  color: var(--sp-red);
  font-size: .73rem;
  font-weight: 900;
}

.sp-discount-numbers > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.8rem;
  height: 2.8rem;

  color: #fff;
  background: var(--sp-red);
  border-radius: .85rem;

  font-size: .78rem;
  font-weight: 900;
}

.sp-firoz-offer {
  display: flex;
  align-items: center;
  gap: .7rem;

  padding: .75rem;

  background: rgba(242, 147, 24, .06);
  border: 1px solid rgba(242, 147, 24, .14);
  border-radius: .9rem;
}

.sp-firoz-offer > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;

  color: var(--sp-primary);
  background: rgba(242, 147, 24, .09);
  border-radius: .85rem;
}

.sp-firoz-offer strong {
  font-size: .65rem;
  font-weight: 900;
}

.sp-firoz-offer p {
  margin-top: .12rem;
  color: var(--sp-text-2);
  font-size: .54rem;
  line-height: 1.75;
}

.sp-offer-checks {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;

  margin: .65rem 0;
}

.sp-offer-checks span {
  padding: .25rem .48rem;

  color: var(--sp-text-2);
  background: var(--sp-bg);
  border-radius: 999px;

  font-size: .51rem;
  font-weight: 800;
}

.sp-offer-checks span.is-done {
  color: var(--sp-green) !important;
  background: rgba(31, 157, 85, .07);
}

.sp-discount-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sp-discount-list > div {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(9rem, .8fr) auto auto;
  align-items: center;
  gap: .65rem;

  padding: .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;
}

.sp-discount-list img {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: cover;
  border-radius: .65rem;
}

.sp-discount-list > div > span:not(.sp-status) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-discount-list strong {
  font-size: .64rem;
  font-weight: 900;
}

.sp-discount-list small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .52rem;
}

/* =========================================================
   Tables
========================================================= */

.sp-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.sp-table {
  width: 100%;
  min-width: 48rem;

  border-collapse: collapse;
}

.sp-table th,
.sp-table td {
  padding: .65rem .6rem;
  border-bottom: 1px solid var(--sp-border);
  text-align: right;
  vertical-align: middle;
}

.sp-table th {
  color: var(--sp-muted);
  background: var(--sp-surface-soft);
  font-size: .54rem;
  font-weight: 850;
  white-space: nowrap;
}

.sp-table td {
  color: var(--sp-text-2);
  font-size: .58rem;
}

.sp-table tbody tr:last-child td {
  border-bottom: 0;
}

.sp-table td > strong,
.sp-table td > small {
  display: block;
}

.sp-table td > strong {
  color: var(--sp-text);
  font-size: .62rem;
  font-weight: 900;
}

.sp-table td > small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .5rem;
}

/* =========================================================
   Finance
========================================================= */

.sp-finance-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 1rem;
  margin-bottom: .9rem;

  color: #fff;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .14), transparent 50%),
    linear-gradient(135deg, #187D47, var(--sp-green));
  border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 12px 24px rgba(31, 157, 85, .17);
}

.sp-finance-balance > div,
.sp-balance-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sp-balance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 3.2rem;

  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem;
}

.sp-finance-balance small,
.sp-finance-balance p {
  color: rgba(255, 255, 255, .76);
  font-size: .55rem;
}

.sp-finance-balance strong {
  display: block;
  margin: .1rem 0;
  font-size: 1.05rem;
  font-weight: 900;
}

.sp-balance-actions > span {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.sp-finance-balance .sp-btn {
  color: var(--sp-green);
  background: #fff;
  box-shadow: none;
}

.sp-donut-layout {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

.sp-donut {
  position: relative;

  display: grid;
  place-items: center;

  width: 9rem;
  height: 9rem;
  margin: 0 auto;

  background:
    conic-gradient(
      var(--sp-primary) 0 calc(var(--a) * 1%),
      var(--sp-green) calc(var(--a) * 1%) calc((var(--a) + var(--b)) * 1%),
      var(--sp-red) calc((var(--a) + var(--b)) * 1%) 100%
    );
  border-radius: 50%;
}

.sp-donut::after {
  content: "";
  position: absolute;
  inset: 1.25rem;
  background: var(--sp-surface);
  border-radius: 50%;
}

.sp-donut > span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.sp-donut strong {
  font-size: .92rem;
  font-weight: 900;
}

.sp-donut small {
  color: var(--sp-muted);
  font-size: .5rem;
}

.sp-donut-legend {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sp-donut-legend > span {
  display: grid;
  grid-template-columns: .6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .45rem;

  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--sp-border);
}

.sp-donut-legend > span:last-child {
  border-bottom: 0;
}

.sp-donut-legend i {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
}

.sp-donut-legend i.is-orange {
  background: var(--sp-primary);
}

.sp-donut-legend i.is-green {
  background: var(--sp-green);
}

.sp-donut-legend i.is-red {
  background: var(--sp-red);
}

.sp-donut-legend b {
  color: var(--sp-text-2);
  font-size: .59rem;
}

.sp-donut-legend em {
  color: var(--sp-text);
  font-style: normal;
  font-size: .62rem;
  font-weight: 900;
}

.sp-bank-card {
  position: relative;

  padding: .85rem;

  color: #fff;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, .18), transparent 35%),
    linear-gradient(135deg, #303847, #1F2533);
  border-radius: 1rem;
  box-shadow: 0 10px 22px rgba(31, 37, 51, .15);
}

.sp-bank-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.sp-bank-card > div span,
.sp-bank-card > div b,
.sp-bank-card p span,
.sp-bank-card p b {
  font-size: .55rem;
}

.sp-bank-card > strong {
  display: block;
  margin: 1.1rem 0;
  font-size: .72rem;
  letter-spacing: .08em;
}

.sp-bank-card p {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sp-bank-card .sp-status {
  position: absolute;
  top: .75rem;
  left: .75rem;
}

.sp-finance-tabs {
  display: flex;
  align-items: center;
  gap: .35rem;
  overflow-x: auto;
  margin-bottom: .55rem;
}

.sp-finance-tabs button {
  flex: 0 0 auto;
  padding: .38rem .65rem;

  color: var(--sp-text-2);
  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: 999px;

  font-size: .55rem;
  font-weight: 850;
}

.sp-finance-tabs button.is-active {
  color: #fff;
  background: var(--sp-primary);
  border-color: var(--sp-primary);
}

.sp-payout-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sp-payout-list > div {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;

  padding: .6rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .82rem;
}

.sp-payout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;

  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
  border-radius: .72rem;
}

.sp-payout-list strong {
  display: block;
  font-size: .65rem;
  font-weight: 900;
}

.sp-payout-list small {
  display: block;
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .51rem;
}

.sp-payout-list button {
  color: var(--sp-primary);
  background: transparent;
  border: 0;
  font-size: .55rem;
  font-weight: 900;
}

.sp-payout-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: .7rem;
  padding: .7rem;

  color: var(--sp-green);
  background: rgba(31, 157, 85, .07);
  border: 1px solid rgba(31, 157, 85, .13);
  border-radius: .82rem;
}

.sp-payout-summary span {
  font-size: .57rem;
}

.sp-payout-summary strong {
  font-size: .76rem;
  font-weight: 900;
}

/* =========================================================
   Reviews
========================================================= */

.sp-review-overview {
  display: grid;
  grid-template-columns: minmax(12rem, .6fr) minmax(16rem, 1fr) minmax(14rem, .8fr);
  gap: .8rem;
}

.sp-review-score-card,
.sp-review-bars,
.sp-review-metrics {
  padding: .9rem;
}

.sp-review-score-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.sp-review-score-card > div {
  display: flex;
  align-items: baseline;
  gap: .25rem;
}

.sp-review-score-card > div strong {
  font-size: 2.25rem;
  font-weight: 900;
}

.sp-review-score-card > div span {
  color: var(--sp-muted);
  font-size: .58rem;
}

.sp-stars,
.sp-review-stars {
  color: #F5B51B;
  letter-spacing: .08em;
}

.sp-stars {
  margin-top: .05rem;
  font-size: .95rem;
}

.sp-review-score-card > small {
  margin: .1rem 0 .45rem;
  color: var(--sp-muted);
  font-size: .52rem;
}

.sp-review-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .5rem;
}

.sp-review-bars > div {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: .45rem;
}

.sp-review-bars span,
.sp-review-bars em {
  color: var(--sp-muted);
  font-style: normal;
  font-size: .52rem;
}

.sp-review-bars i {
  display: block;
  height: .48rem;
  overflow: hidden;

  background: var(--sp-bg);
  border-radius: 999px;
  box-shadow: var(--sp-inset);
}

.sp-review-bars b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F5B51B, var(--sp-primary));
  border-radius: inherit;
}

.sp-review-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.sp-review-metrics > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;

  padding: .6rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .8rem;
}

.sp-review-metrics span {
  color: var(--sp-text-2);
  font-size: .54rem;
}

.sp-review-metrics strong {
  color: var(--sp-green);
  font-size: .72rem;
  font-weight: 900;
}

.sp-review-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.sp-review-card {
  min-width: 0;
  padding: .85rem;
}

.sp-review-head {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.sp-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;

  color: var(--sp-primary);
  background: rgba(242, 147, 24, .08);
  border-radius: .75rem;

  font-size: .72rem;
  font-weight: 900;
}

.sp-review-head > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-review-head strong {
  font-size: .64rem;
  font-weight: 900;
}

.sp-review-head small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .5rem;
}

.sp-review-stars {
  margin-right: auto;
  font-size: .72rem;
  white-space: nowrap;
}

.sp-review-stars.is-mid {
  color: var(--sp-primary);
}

.sp-review-product {
  display: flex;
  align-items: center;
  gap: .5rem;

  margin-top: .65rem;
  padding: .48rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .75rem;
}

.sp-review-product img {
  width: 2.45rem;
  height: 2.45rem;
  object-fit: cover;
  border-radius: .6rem;
}

.sp-review-product span {
  display: flex;
  flex-direction: column;
}

.sp-review-product small {
  color: var(--sp-muted);
  font-size: .48rem;
}

.sp-review-product strong {
  margin-top: .05rem;
  font-size: .59rem;
  font-weight: 900;
}

.sp-review-card h3 {
  margin-top: .65rem;
  font-size: .7rem;
  font-weight: 900;
}

.sp-review-card > p {
  margin-top: .28rem;
  color: var(--sp-text-2);
  font-size: .58rem;
  line-height: 1.9;
}

.sp-review-tags {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;

  margin-top: .5rem;
}

.sp-review-tags span {
  padding: .2rem .42rem;
  border-radius: 999px;
  font-size: .48rem;
  font-weight: 800;
}

.sp-review-tags span.is-green {
  background: rgba(31, 157, 85, .07);
}

.sp-review-tags span.is-red {
  background: rgba(220, 53, 69, .07);
}

.sp-reply-toggle {
  margin-top: .6rem;
  padding: .38rem .6rem;

  color: var(--sp-primary);
  background: transparent;
  border: 1px solid rgba(242, 147, 24, .22);
  border-radius: .7rem;

  font-size: .55rem;
  font-weight: 900;
}

.sp-review-reply-form {
  margin-top: .55rem;
}

.sp-review-reply-form textarea {
  padding: .55rem;
  resize: vertical;
  font-size: .58rem;
  line-height: 1.8;
}

.sp-review-reply-form > div {
  display: flex;
  justify-content: flex-end;
  gap: .4rem;
  margin-top: .4rem;
}

.sp-official-reply {
  margin-top: .6rem;
  padding: .62rem;

  color: var(--sp-text-2);
  background: rgba(31, 157, 85, .045);
  border: 1px solid rgba(31, 157, 85, .12);
  border-radius: .78rem;
}

.sp-official-reply strong {
  color: var(--sp-green);
  font-size: .55rem;
  font-weight: 900;
}

.sp-official-reply p {
  margin-top: .18rem;
  font-size: .54rem;
  line-height: 1.8;
}

/* =========================================================
   Profile
========================================================= */

.sp-profile-hero {
  overflow: hidden;
}

.sp-profile-cover {
  position: relative;
  height: 12.5rem;
}

.sp-profile-cover > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sp-profile-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(31, 37, 51, .2), transparent);
}

.sp-profile-cover > label {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: .32rem;

  padding: .42rem .65rem;

  color: #fff;
  background: rgba(31, 37, 51, .68);
  border-radius: .72rem;

  font-size: .55rem;
  font-weight: 850;

  cursor: pointer;
  backdrop-filter: blur(6px);
}

.sp-profile-cover input,
.sp-profile-logo input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sp-profile-identity {
  display: flex;
  align-items: center;
  gap: .75rem;

  padding: .85rem 1rem 1rem;
}

.sp-profile-logo {
  position: relative;

  width: 4.8rem;
  height: 4.8rem;
  flex: 0 0 4.8rem;

  margin-top: -2.2rem;
  padding: .2rem;

  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 1.2rem;
  box-shadow: var(--sp-shadow-sm);
}

.sp-profile-logo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1rem;
}

.sp-profile-logo > label {
  position: absolute;
  left: -.25rem;
  bottom: -.25rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 1.85rem;
  height: 1.85rem;

  color: var(--sp-primary);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  box-shadow: var(--sp-shadow-sm);

  cursor: pointer;
}

.sp-profile-logo .sp-icon {
  width: .82rem;
  height: .82rem;
}

.sp-profile-identity > div:nth-child(2) {
  min-width: 0;
}

.sp-profile-identity > div:nth-child(2) > div {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.sp-profile-identity h2 {
  font-size: .9rem;
  font-weight: 900;
}

.sp-profile-identity p {
  margin-top: .12rem;
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-profile-identity > .sp-status {
  margin-right: auto;
}

.sp-verified {
  display: inline-flex;
  align-items: center;
  gap: .2rem;

  color: var(--sp-blue);
  font-size: .52rem;
  font-weight: 900;
}

.sp-verified .sp-icon {
  width: .85rem;
  height: .85rem;
}

.sp-map-placeholder {
  display: flex;
  align-items: center;
  gap: .65rem;

  margin-top: .7rem;
  padding: .7rem;

  background:
    radial-gradient(circle at 20% 20%, rgba(31, 157, 85, .07), transparent 30%),
    var(--sp-surface-soft);
  border: 1px dashed rgba(31, 157, 85, .24);
  border-radius: .9rem;
}

.sp-map-placeholder > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.7rem;
  height: 2.7rem;
  flex: 0 0 2.7rem;

  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
  border-radius: .8rem;
}

.sp-map-placeholder > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-map-placeholder strong {
  font-size: .62rem;
  font-weight: 900;
}

.sp-map-placeholder small {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .51rem;
}

.sp-map-placeholder .sp-btn {
  margin-right: auto;
}

.sp-hours-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.sp-hours-list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) 7rem auto 7rem;
  align-items: center;
  gap: .45rem;

  padding: .5rem .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .75rem;
}

.sp-hours-list label {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.sp-hours-list label input {
  width: .95rem;
  height: .95rem;
  accent-color: var(--sp-green);
}

.sp-hours-list label span {
  font-size: .59rem;
  font-weight: 850;
}

.sp-hours-list > div > input {
  height: 2rem;
  padding: 0 .4rem;
  font-size: .56rem;
}

.sp-hours-list i {
  color: var(--sp-muted);
  font-style: normal;
  font-size: .5rem;
}

.sp-verify-list {
  display: flex;
  flex-direction: column;
  gap: .48rem;
}

.sp-verify-list > div {
  display: flex;
  align-items: center;
  gap: .55rem;

  padding: .55rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .78rem;
}

.sp-verify-list > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;

  color: var(--sp-primary);
  background: rgba(242, 147, 24, .08);
  border-radius: .65rem;

  font-size: .7rem;
  font-weight: 900;
}

.sp-verify-list > div.is-done > span {
  color: var(--sp-green);
  background: rgba(31, 157, 85, .08);
}

.sp-verify-list > div > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-verify-list strong {
  font-size: .59rem;
  font-weight: 900;
}

.sp-verify-list small {
  margin-top: .05rem;
  color: var(--sp-muted);
  font-size: .49rem;
}

.sp-verify-list button {
  margin-right: auto;
  color: var(--sp-primary);
  background: transparent;
  border: 0;
  font-size: .53rem;
  font-weight: 900;
}

.sp-inline-status {
  margin-top: .6rem;
}

/* =========================================================
   Settings
========================================================= */

.sp-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  align-items: start;
}

.sp-pause-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem auto;
  align-items: center;
  gap: .6rem;

  margin-top: .75rem;
  padding: .7rem;

  background: rgba(220, 53, 69, .045);
  border: 1px solid rgba(220, 53, 69, .12);
  border-radius: .85rem;
}

.sp-pause-box strong {
  display: block;
  font-size: .62rem;
  font-weight: 900;
}

.sp-pause-box p {
  margin-top: .08rem;
  color: var(--sp-muted);
  font-size: .5rem;
}

.sp-pause-box select {
  height: 2.2rem;
  padding: 0 .45rem;
  font-size: .55rem;
}

.sp-delivery-settings,
.sp-security-box {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.sp-delivery-settings > div {
  display: grid;
  grid-template-columns: auto 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;

  padding: .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .8rem;
}

.sp-setting-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.4rem;
  height: 2.4rem;

  border-radius: .72rem;
}

.sp-setting-icon.is-green {
  color: var(--sp-green) !important;
  background: rgba(31, 157, 85, .08);
}

.sp-setting-icon.is-orange {
  color: var(--sp-primary) !important;
  background: rgba(242, 147, 24, .08);
}

.sp-setting-icon.is-red {
  color: var(--sp-red) !important;
  background: rgba(220, 53, 69, .07);
}

.sp-delivery-settings > div > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sp-delivery-settings strong,
.sp-security-box strong {
  font-size: .61rem;
  font-weight: 900;
}

.sp-delivery-settings small,
.sp-security-box small {
  margin-top: .06rem;
  color: var(--sp-muted);
  font-size: .49rem;
  line-height: 1.6;
}

.sp-delivery-settings > div > em {
  color: var(--sp-green);
  font-style: normal;
  font-size: .58rem;
  font-weight: 900;
}

.sp-security-box > div {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;

  padding: .58rem;

  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .8rem;
}

.sp-security-box > div > div {
  display: flex;
  flex-direction: column;
}

.sp-security-box button {
  color: var(--sp-primary);
  background: transparent;
  border: 0;
  font-size: .52rem;
  font-weight: 900;
}

/* =========================================================
   Modal
========================================================= */

.sp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 1rem;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .24s ease,
    visibility .24s ease;
}

.sp-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sp-modal-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: rgba(31, 37, 51, .34);
  border: 0;

  backdrop-filter: blur(4px);
}

.sp-modal-dialog {
  position: relative;
  z-index: 1;

  width: min(34rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;

  padding: 1rem;

  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 1.35rem;
  box-shadow: 0 20px 55px rgba(31, 37, 51, .18);

  transform: translateY(1rem) scale(.985);
  transition: transform .24s ease;
}

.sp-modal.is-open .sp-modal-dialog {
  transform: translateY(0) scale(1);
}

.sp-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;

  margin-bottom: .75rem;
}

.sp-modal-head h2 {
  font-size: .9rem;
  font-weight: 900;
}

.sp-modal-head p {
  margin-top: .12rem;
  color: var(--sp-muted);
  font-size: .55rem;
}

.sp-modal-head > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.15rem;
  height: 2.15rem;

  color: var(--sp-text-2);
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: 50%;
  box-shadow: var(--sp-shadow-sm);

  font-size: 1.2rem;
  line-height: 1;
}

.sp-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;

  margin-top: .8rem;
}

/* =========================================================
   Seller login
========================================================= */

.seller-login-page {
  overflow-x: hidden;
}

.sp-login-layout {
  display: grid;
  grid-template-columns: minmax(24rem, 1.05fr) minmax(24rem, .95fr);
  min-height: 100dvh;
}

.sp-login-visual {
  position: relative;

  display: flex;
  flex-direction: column;

  padding: clamp(1.5rem, 4vw, 3rem);

  color: #fff;
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 255, 255, .16), transparent 28%),
    radial-gradient(circle at 85% 78%, rgba(31, 157, 85, .24), transparent 28%),
    linear-gradient(135deg, #E58A13, var(--sp-primary));

  overflow: hidden;
}

.sp-login-visual::before,
.sp-login-visual::after {
  content: "";
  position: absolute;

  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}

.sp-login-visual::before {
  width: 22rem;
  height: 22rem;
  top: -9rem;
  left: -7rem;
}

.sp-login-visual::after {
  width: 16rem;
  height: 16rem;
  right: -5rem;
  bottom: -4rem;
}

.sp-login-brand {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  width: max-content;
}

.sp-login-brand span {
  font-size: 1.5rem;
  font-weight: 900;
}

.sp-login-brand small {
  margin-top: .1rem;
  color: rgba(255, 255, 255, .72);
  font-size: .62rem;
}

.sp-login-art {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;

  width: min(100%, 36rem);
  margin: auto;
}

.sp-login-art-card {
  grid-column: 1 / -1;

  display: flex;
  align-items: center;
  gap: .8rem;

  padding: 1rem;

  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 1.2rem;

  backdrop-filter: blur(10px);
}

.sp-login-art-icon,
.sp-login-feature > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;

  color: var(--sp-primary);
  background: #fff;
  border-radius: .95rem;
}

.sp-login-art-card > div,
.sp-login-feature > div {
  display: flex;
  flex-direction: column;
}

.sp-login-art-card small,
.sp-login-feature small {
  color: rgba(255, 255, 255, .72);
  font-size: .52rem;
}

.sp-login-art-card strong {
  margin-top: .15rem;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.7;
}

.sp-login-feature {
  display: flex;
  align-items: center;
  gap: .55rem;

  min-width: 0;
  padding: .7rem;

  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 1rem;

  backdrop-filter: blur(8px);
}

.sp-login-feature > span {
  width: 2.4rem;
  height: 2.4rem;
  flex-basis: 2.4rem;

  color: #fff;
  background: rgba(255, 255, 255, .16);
}

.sp-login-feature strong {
  font-size: .62rem;
  font-weight: 900;
}

.sp-login-visual > p {
  position: relative;
  z-index: 1;

  color: rgba(255, 255, 255, .7);
  font-size: .53rem;
  text-align: center;
}

.sp-login-form-side {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: clamp(1rem, 3vw, 2rem);
  background: var(--sp-bg);
}

.sp-login-card {
  width: min(100%, 25rem);
  padding: 1.4rem;
}

.sp-login-mobile-brand {
  display: none;
}

.sp-login-step {
  text-align: center;
}

.sp-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3.3rem;
  height: 3.3rem;

  color: var(--sp-primary);
  background: rgba(242, 147, 24, .08);
  border-radius: 1rem;
}

.sp-login-icon.is-green {
  color: var(--sp-green) !important;
  background: rgba(31, 157, 85, .08);
}

.sp-login-icon .sp-icon {
  width: 1.55rem;
  height: 1.55rem;
}

.sp-login-step h1 {
  margin-top: .8rem;

  font-size: 1.05rem;
  font-weight: 900;
}

.sp-login-step > p {
  margin-top: .25rem;

  color: var(--sp-text-2);
  font-size: .62rem;
  line-height: 1.85;
}

.sp-login-step form {
  display: flex;
  flex-direction: column;
  gap: .75rem;

  margin-top: 1rem;
  text-align: right;
}

.sp-login-step form .sp-btn {
  width: 100%;
}

.sp-login-step > small {
  display: block;
  margin-top: .7rem;

  color: var(--sp-muted);
  font-size: .5rem;
  line-height: 1.8;
}

.sp-login-back {
  display: inline-flex;
  align-items: center;
  gap: .25rem;

  margin-bottom: .75rem;

  color: var(--sp-muted);
  background: transparent;
  border: 0;

  font-size: .54rem;
}

.sp-login-back .sp-icon {
  width: .75rem;
  height: .75rem;
}

.sp-otp {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;

  width: 100%;
}

.sp-otp input {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;

  color: var(--sp-text);
  background: var(--sp-surface-soft);
  border: 1px solid var(--sp-border);
  border-radius: .78rem;
  outline: 0;

  font-size: 1rem;
  font-weight: 900;
  text-align: center;

  box-shadow: var(--sp-inset);
}

.sp-otp input:focus {
  border-color: rgba(242, 147, 24, .55);
  box-shadow: 0 0 0 3px rgba(242, 147, 24, .09);
}

.sp-resend {
  margin-top: .65rem;

  color: var(--sp-primary);
  background: transparent;
  border: 0;

  font-size: .55rem;
  font-weight: 900;
}

/* =========================================================
   Responsive
========================================================= */

@media screen and (max-width: 1279px) {
  .sp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-product-row {
    grid-template-columns:
      4rem
      minmax(10rem, 1.3fr)
      minmax(6.5rem, .65fr)
      minmax(5.5rem, .5fr)
      minmax(6.8rem, .65fr)
      auto
      auto;
  }

  .sp-order-row {
    grid-template-columns:
      minmax(6rem, .65fr)
      minmax(8rem, 1fr)
      minmax(9rem, 1fr)
      minmax(8rem, .9fr)
      auto;
  }
}

@media screen and (max-width: 1100px) {
  .sp-detail-layout,
  .sp-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-form-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-form-aside > .sp-sticky-actions {
    grid-column: 1 / -1;
  }

  .sp-sticky-actions {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-story-layout {
    grid-template-columns: minmax(0, 1fr) 14rem;
  }

  .sp-review-overview {
    grid-template-columns: minmax(11rem, .65fr) minmax(0, 1fr);
  }

  .sp-review-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media screen and (max-width: 1023px) {
  .sp-sidebar {
    right: 0;
    width: min(18rem, calc(100vw - 3rem));

    transform: translateX(105%);
    box-shadow: -14px 0 32px rgba(31, 37, 51, .12);

    transition: transform .25s ease;
  }

  .seller-panel-page.sp-sidebar-open {
    overflow: hidden;
  }

  .seller-panel-page.sp-sidebar-open .sp-sidebar {
    transform: translateX(0);
  }

  .seller-panel-page.sp-sidebar-open .sp-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  .sp-sidebar-close,
  .sp-menu {
    display: inline-flex;
  }

  .sp-main {
    margin-right: 0;
  }

  .sp-content {
    padding-top: .85rem;
  }

  .sp-toolbar,
  .sp-product-toolbar {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(8rem, .7fr));
  }

  .sp-order-row {
    grid-template-columns:
      minmax(6rem, .65fr)
      minmax(8rem, 1fr)
      minmax(8.5rem, 1fr)
      minmax(7.5rem, .9fr)
      auto;
    gap: .6rem;
  }

  .sp-product-row {
    grid-template-columns: 3.8rem minmax(9rem, 1.2fr) repeat(3, minmax(5.5rem, .58fr)) auto auto;
    gap: .55rem;
  }

  .sp-story-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-story-phone {
    display: none;
  }

  .sp-login-layout {
    grid-template-columns: minmax(21rem, .85fr) minmax(22rem, 1fr);
  }
}

@media screen and (max-width: 900px) {
  .sp-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-order-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
    align-items: start;
  }

  .sp-order-row > div:nth-child(3),
  .sp-order-row > div:nth-child(4) {
    padding-top: .35rem;
    border-top: 1px dashed var(--sp-border);
  }

  .sp-order-row > .sp-btn,
  .sp-order-row > button.sp-btn {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .sp-product-row {
    grid-template-columns: 3.7rem repeat(3, minmax(0, 1fr)) auto;
    align-items: center;
  }

  .sp-product-row > img {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .sp-product-main {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .sp-product-row > .sp-product-metric {
    grid-row: 2;
    padding-top: .3rem;
    border-top: 1px dashed var(--sp-border);
  }

  .sp-product-row > .sp-product-metric:nth-of-type(2) {
    grid-column: 2;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(3) {
    grid-column: 3;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(4) {
    grid-column: 4;
  }

  .sp-product-row > .sp-switch {
    grid-column: 5;
    grid-row: 2;
  }

  .sp-product-row > .sp-row-actions {
    grid-column: 5;
    grid-row: 1;
  }

  .sp-review-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-login-visual {
    display: none;
  }

  .sp-login-layout {
    display: block;
  }

  .sp-login-form-side {
    position: relative;
    min-height: 100dvh;
    padding: 4.5rem 1rem 1rem;
  }

  .sp-login-mobile-brand {
    position: absolute;
    top: 1.1rem;
    right: 1rem;

    display: block;

    color: var(--sp-primary);
    font-size: 1.2rem;
    font-weight: 900;
  }
}

@media screen and (max-width: 767px) {
  .seller-panel-page {
    overflow-x: hidden;
  }

  .sp-topbar {
    min-height: 4.1rem;
    padding: .55rem .7rem;
  }

  .sp-topbar-start {
    min-width: 0;
  }

  .sp-topbar-start > div {
    min-width: 0;
  }

  .sp-topbar-start strong,
  .sp-topbar-start span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp-topbar-start strong {
    font-size: .76rem;
  }

  .sp-topbar-start span {
    font-size: .53rem;
  }

  .sp-topbar-actions {
    gap: .35rem;
  }

  .sp-round-btn {
    display: none;
  }

  .sp-avatar {
    width: 2.35rem;
    height: 2.35rem;
  }

  .sp-content {
    width: 100%;
    padding: .72rem .7rem calc(5.8rem + env(safe-area-inset-bottom));
  }

  .sp-page-head {
    align-items: flex-start;
    flex-direction: column;
    gap: .55rem;

    margin-bottom: .75rem;
  }

  .sp-page-head h1 {
    font-size: 1.05rem;
  }

  .sp-page-head p {
    font-size: .58rem;
  }

  .sp-page-actions {
    width: 100%;
  }

  .sp-page-actions .sp-btn {
    flex: 1 1 auto;
  }

  .sp-mobile-nav {
    position: fixed;
    right: .6rem;
    bottom: calc(.55rem + env(safe-area-inset-bottom));
    left: .6rem;
    z-index: 100;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    min-height: 4rem;
    padding: .42rem .35rem;

    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--sp-border);
    border-radius: 1.15rem;
    box-shadow: 0 10px 30px rgba(31, 37, 51, .13);

    backdrop-filter: blur(12px);
  }

  .sp-mobile-nav a {
    position: relative;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: .18rem;

    min-width: 0;

    color: var(--sp-muted);
    border-radius: .75rem;
  }

  .sp-mobile-nav a.is-active {
    color: var(--sp-primary);
    background: rgba(242, 147, 24, .07);
  }

  .sp-mobile-nav .sp-icon {
    width: 1.15rem;
    height: 1.15rem;
  }

  .sp-mobile-nav span {
    overflow: hidden;

    max-width: 100%;

    font-size: .48rem;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp-panel {
    padding: .78rem;
  }

  .sp-card {
    border-radius: 1.05rem;
    box-shadow:
      -3px -3px 8px rgba(255, 255, 255, .94),
      3px 3px 8px rgba(218, 213, 206, .19);
  }

  .sp-card-head h2 {
    font-size: .76rem;
  }

  .sp-card-head p {
    font-size: .53rem;
  }

  .sp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .sp-stat {
    align-items: flex-start;
    gap: .5rem;
    padding: .65rem;
  }

  .sp-stat-icon {
    width: 2.2rem;
    height: 2.2rem;
    flex-basis: 2.2rem;
    border-radius: .7rem;
  }

  .sp-stat-icon .sp-icon {
    width: 1rem;
    height: 1rem;
  }

  .sp-stat strong {
    font-size: .72rem;
  }

  .sp-stat > div > span,
  .sp-stat small {
    font-size: .5rem;
  }

  .sp-grid-2 {
    gap: .65rem;
  }

  .sp-chart {
    min-height: 11rem;
  }

  .sp-chart > div {
    height: 8.5rem;
  }

  .sp-order-tabs {
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: .38rem;

    scrollbar-width: none;
  }

  .sp-order-tabs::-webkit-scrollbar {
    display: none;
  }

  .sp-order-tabs button {
    flex: 0 0 auto;
    min-width: 5.4rem;
    min-height: 2.3rem;
  }

  .sp-toolbar,
  .sp-product-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    padding: .45rem;
  }

  .sp-toolbar .sp-search,
  .sp-product-toolbar .sp-search {
    grid-column: 1 / -1;
  }

  .sp-toolbar > select,
  .sp-search {
    min-height: 2.25rem;
  }

  .sp-order-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
    padding: .65rem;
  }

  .sp-order-row > div:nth-child(3),
  .sp-order-row > div:nth-child(4) {
    padding-top: .4rem;
  }

  .sp-order-row > .sp-btn,
  .sp-order-row > button.sp-btn {
    grid-column: 1 / -1;
    grid-row: auto;

    width: 100%;
    margin-top: .1rem;
  }

  .sp-progress {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: .55rem;
  }

  .sp-progress > div {
    flex: 0 0 6.4rem;
  }

  .sp-detail-layout {
    gap: .65rem;
  }

  .sp-order-items > div {
    grid-template-columns: 3rem minmax(0, 1fr);
  }

  .sp-order-items img {
    width: 3rem;
    height: 3rem;
  }

  .sp-order-items b {
    grid-column: 2;
  }

  .sp-form-layout {
    gap: .65rem;
  }

  .sp-form-aside {
    display: flex;
  }

  .sp-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
  }

  .sp-field.is-full,
  .sp-field.is-wide {
    grid-column: auto;
  }

  .sp-check-grid,
  .sp-select-products {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-discount-preview {
    grid-template-columns: auto auto;
  }

  .sp-discount-preview small {
    grid-column: 1 / -1;
  }

  .sp-sticky-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-product-row {
    grid-template-columns: 3.45rem repeat(3, minmax(0, 1fr)) auto;
    gap: .4rem;
    padding: .55rem;
  }

  .sp-product-row > img {
    width: 3.45rem;
    height: 3.45rem;
  }

  .sp-product-main strong {
    font-size: .61rem;
  }

  .sp-product-main > small {
    font-size: .48rem;
  }

  .sp-product-tags {
    margin-top: .25rem;
  }

  .sp-product-tags em {
    font-size: .43rem;
  }

  .sp-product-metric small {
    font-size: .44rem;
  }

  .sp-product-metric strong {
    font-size: .54rem;
  }

  .sp-product-row > .sp-switch {
    transform: scale(.86);
    transform-origin: left center;
  }

  .sp-row-actions > a,
  .sp-row-actions > button {
    width: 1.85rem;
    height: 1.85rem;
  }

  .sp-subscription-hero {
    align-items: flex-start;
    padding: .75rem;
  }

  .sp-subscription-icon {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
  }

  .sp-subscription-hero h2 {
    font-size: .75rem;
  }

  .sp-plan-list > div {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
  }

  .sp-plan-list .sp-mini-price {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .sp-plan-list > div > .sp-switch {
    grid-column: 3;
    grid-row: 1;
  }

  .sp-capacity-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-day-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sp-story-list > div {
    grid-template-columns: 3.8rem minmax(0, 1fr) auto;
    gap: .5rem;
  }

  .sp-story-thumb {
    width: 3.8rem;
    height: 5rem;
  }

  .sp-story-list > div > .sp-row-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }

  .sp-scheduled-list > div {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  }

  .sp-scheduled-list > div > button {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .sp-discount-list > div {
    grid-template-columns: 3rem minmax(0, 1fr) auto;
  }

  .sp-discount-list img {
    width: 3rem;
    height: 3rem;
  }

  .sp-discount-list > div > span:nth-of-type(2) {
    grid-column: 2 / -1;
  }

  .sp-discount-list > div > .sp-row-actions {
    grid-column: 2 / -1;
    justify-content: flex-end;
  }

  .sp-finance-balance {
    align-items: flex-start;
    flex-direction: column;
    padding: .8rem;
  }

  .sp-balance-actions {
    width: 100%;
    justify-content: space-between;
  }

  .sp-donut-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-payout-list > div {
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  }

  .sp-payout-list > div > button {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .sp-review-overview {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-review-metrics {
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp-profile-cover {
    height: 9rem;
  }

  .sp-profile-identity {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: .65rem .75rem .8rem;
  }

  .sp-profile-logo {
    width: 4rem;
    height: 4rem;
    flex-basis: 4rem;
    margin-top: -1.8rem;
  }

  .sp-profile-identity > .sp-status {
    width: max-content;
    margin-right: 4.75rem;
    margin-top: -1rem;
  }

  .sp-map-placeholder {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .sp-map-placeholder .sp-btn {
    width: 100%;
    margin-right: 0;
  }

  .sp-hours-list > div {
    grid-template-columns: minmax(5rem, 1fr) minmax(5.5rem, .75fr) auto minmax(5.5rem, .75fr);
  }

  .sp-pause-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-delivery-settings > div {
    grid-template-columns: auto 2.2rem minmax(0, 1fr);
  }

  .sp-delivery-settings > div > em,
  .sp-delivery-settings > div > .sp-mini-price {
    grid-column: 2 / -1;
    justify-self: end;
  }

  .sp-page-save {
    bottom: calc(4.9rem + env(safe-area-inset-bottom));
  }

  .sp-page-save .sp-btn {
    width: 100%;
  }

  .sp-modal {
    align-items: flex-end;
    padding: 0;
  }

  .sp-modal-dialog {
    width: 100%;
    max-height: 88dvh;

    padding: .85rem;
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom));

    border-radius: 1.25rem 1.25rem 0 0;

    transform: translateY(100%);
  }

  .sp-modal.is-open .sp-modal-dialog {
    transform: translateY(0);
  }

  .sp-login-form-side {
    padding-right: .75rem;
    padding-left: .75rem;
  }

  .sp-login-card {
    padding: 1rem;
    border-radius: 1.15rem;
  }
}

@media screen and (max-width: 480px) {
  .sp-stats {
    gap: .45rem;
  }

  .sp-stat {
    flex-direction: column;
  }

  .sp-stat-icon {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  .sp-stat strong {
    font-size: .66rem;
  }

  .sp-quick-orders > a,
  .sp-alerts > div,
  .sp-feature-links > a {
    padding: .52rem;
  }

  .sp-quick-orders em {
    display: none;
  }

  .sp-order-row {
    gap: .35rem;
  }

  .sp-product-row {
    grid-template-columns: 3.2rem repeat(3, minmax(0, 1fr));
  }

  .sp-product-row > img {
    width: 3.2rem;
    height: 3.2rem;
  }

  .sp-product-row > .sp-row-actions {
    grid-column: 4;
  }

  .sp-product-row > .sp-switch {
    grid-column: 4;
    justify-self: start;
    margin-left: 2.1rem;
  }

  .sp-product-metric strong {
    white-space: normal;
  }

  .sp-story-list > div {
    grid-template-columns: 3.4rem minmax(0, 1fr);
  }

  .sp-story-thumb {
    width: 3.4rem;
    height: 4.6rem;
  }

  .sp-story-list > div > .sp-status {
    grid-column: 2;
  }

  .sp-story-list > div > .sp-row-actions {
    grid-column: 2;
  }

  .sp-discount-product img {
    width: 4rem;
    height: 4rem;
  }

  .sp-discount-numbers {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sp-discount-numbers > span:first-child {
    display: none;
  }

  .sp-review-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-profile-identity > .sp-status {
    margin-right: 0;
    margin-top: 0;
  }

  .sp-hours-list > div {
    grid-template-columns: minmax(4.8rem, 1fr) repeat(2, minmax(4.3rem, .75fr));
  }

  .sp-hours-list > div > i {
    display: none;
  }

  .sp-security-box > div {
    grid-template-columns: 2.2rem minmax(0, 1fr);
  }

  .sp-security-box button {
    grid-column: 2;
    justify-self: start;
  }

  .sp-otp {
    gap: .34rem;
  }

  .sp-otp input {
    border-radius: .65rem;
    font-size: .9rem;
  }
}

@media screen and (max-width: 390px) {
  .sp-content {
    padding-right: .55rem;
    padding-left: .55rem;
  }

  .sp-topbar {
    padding-right: .55rem;
    padding-left: .55rem;
  }

  .sp-mobile-nav {
    right: .45rem;
    left: .45rem;
  }

  .sp-card {
    border-radius: .95rem;
  }

  .sp-panel {
    padding: .65rem;
  }

  .sp-btn {
    min-height: 2.35rem;
    padding-right: .65rem;
    padding-left: .65rem;
    font-size: .6rem;
  }

  .sp-stat {
    padding: .55rem;
  }

  .sp-toolbar,
  .sp-product-toolbar {
    gap: .32rem;
    padding: .38rem;
  }

  .sp-order-row {
    padding: .55rem;
  }

  .sp-order-row strong {
    font-size: .62rem;
  }

  .sp-order-row small {
    font-size: .49rem;
  }

  .sp-product-row {
    padding: .46rem;
  }

  .sp-product-main strong {
    font-size: .56rem;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(4) {
    display: none;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(2) {
    grid-column: 2;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(3) {
    grid-column: 3 / 5;
  }

  .sp-product-row > .sp-switch {
    display: none;
  }

  .sp-plan-list > div {
    padding: .52rem;
  }

  .sp-day-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sp-payout-list > div {
    grid-template-columns: 2.1rem minmax(0, 1fr);
  }

  .sp-payout-list > div > .sp-status {
    grid-column: 2;
  }

  .sp-login-card {
    padding: .85rem;
  }

  .sp-login-step h1 {
    font-size: .92rem;
  }

  .sp-login-step > p {
    font-size: .56rem;
  }
}

@media screen and (max-width: 350px) {
  .sp-topbar-start span {
    display: none;
  }

  .sp-topbar-start strong {
    max-width: 10rem;
  }

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

  .sp-stat {
    align-items: center;
    flex-direction: row;
  }

  .sp-order-tabs button {
    min-width: 4.9rem;
  }

  .sp-product-row {
    grid-template-columns: 3rem repeat(2, minmax(0, 1fr));
  }

  .sp-product-row > img {
    width: 3rem;
    height: 3rem;
  }

  .sp-product-main {
    grid-column: 2 / -1;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(2) {
    grid-column: 2;
  }

  .sp-product-row > .sp-product-metric:nth-of-type(3) {
    grid-column: 3;
  }

  .sp-product-row > .sp-row-actions {
    grid-column: 3;
  }

  .sp-discount-preview {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-discount-preview small {
    grid-column: auto;
  }

  .sp-sticky-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-finance-balance > div:first-child {
    align-items: flex-start;
  }

  .sp-balance-icon {
    width: 2.7rem;
    height: 2.7rem;
    flex-basis: 2.7rem;
  }

  .sp-finance-balance strong {
    font-size: .85rem;
  }

  .sp-balance-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .sp-balance-actions > span {
    align-items: flex-start;
  }

  .sp-review-head {
    flex-wrap: wrap;
  }

  .sp-review-stars {
    width: 100%;
    margin-right: 2.9rem;
  }

  .sp-profile-identity {
    gap: .55rem;
  }

  .sp-profile-identity h2 {
    font-size: .75rem;
  }

  .sp-hours-list > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .sp-hours-list > div > input,
  .sp-hours-list > div > i {
    display: none;
  }

  .sp-delivery-settings > div {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sp-delivery-settings .sp-setting-icon {
    display: none;
  }

  .sp-delivery-settings > div > div {
    grid-column: 2;
  }

  .sp-delivery-settings > div > em,
  .sp-delivery-settings > div > .sp-mini-price {
    grid-column: 2;
  }

  .sp-otp {
    gap: .25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seller-panel-page *,
  .seller-panel-page *::before,
  .seller-panel-page *::after,
  .seller-login-page *,
  .seller-login-page *::before,
  .seller-login-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}