:root {
  --sb-font-regular: "mazzardm_regular", sans-serif;
  --sb-font-medium: "mazzardm_medium", sans-serif;
  --sb-font-semibold: "mazzardm_semibold", sans-serif;
  --sb-font-bold: "mazzardm_bold", sans-serif;
  --sb-font-extrabold: "mazzardm_extrabold", sans-serif;
  --sb-teal: #0d7c7f;
  --sb-teal-dark: #0a6568;
  --sb-teal-light: #e8f4f4;
  --sb-blue: #3366cc;
  --sb-text: #1f2937;
  --sb-text-muted: #6b7280;
  --sb-border: #e5e7eb;
  --sb-bg: #f3f4f6;
  --sb-white: #ffffff;
  --sb-green: #22c55e;
  --sb-radius: 12px;
  --sb-radius-lg: 16px;
  --sb-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sb-max-width: 767px;
  --sb-wave-height: clamp(140px, 18vw, 190px);
  --sb-wave-clearance: clamp(72px, 14vw, 150px);
  --sb-sticky-footer-height: 88px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.sales-book-body {
  font-family: var(--sb-font-regular);
  background: var(--sb-bg);
  color: var(--sb-text);
  -webkit-font-smoothing: antialiased;
}

.sales-book-body h1,
.sales-book-body h2,
.sales-book-body h3,
.sales-book-body h4,
.sales-book-body h5,
.sales-book-body h6,
.sales-book-body strong,
.sales-book-body b {
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sales-book-body .sb-btn,
.sales-book-body .sb-landing-btn,
.sales-book-body .sb-title,
.sales-book-body .sb-card-title,
.sales-book-body .sb-section-title,
.sales-book-body .sb-landing-title,
.sales-book-body .sb-landing-divider-text,
.sales-book-body .sb-step-number,
.sales-book-body .sb-label,
.sales-book-body .sb-logo span {
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sales-book-body .sb-subtitle,
.sales-book-body .sb-card-subtitle,
.sales-book-body .sb-feature-text,
.sales-book-body .sb-landing-feature-text,
.sales-book-body .sb-landing-note,
.sales-book-body .sb-landing-pricing,
.sales-book-body .sb-link,
.sales-book-body .sb-help-link,
.sales-book-body .sb-onboarding-step-label {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sales-book-body .sb-landing-subtitle,
.sales-book-body .sb-hint,
.sales-book-body .sb-landing-trust-line,
.sales-book-body .sb-trust p,
.sales-book-body .sb-footer-meta,
.sales-book-body .sb-footer-note,
.sales-book-body .sb-legal {
  font-family: var(--sb-font-regular);
  font-weight: normal;
}

#app {
  min-height: 100vh;
}

.sb-page {
  min-height: 100vh;
  background: var(--sb-bg);
}

.sb-top-header {
  background: var(--sb-blue);
  border-top: 3px solid #1f2937;
  width: 100%;
}

.sb-top-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.sb-top-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.2;
  min-width: 0;
}

.sb-top-header__logo img {
  height: 48px;
  width: auto;
  display: block;
}

.sb-top-header__brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #3b76d4;
  color: #fff;
  flex-shrink: 0;
}

.sb-top-header__brand-text {
  display: inline-flex;
  align-items: center;

  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.sb-top-header__delytt {
  font-size: 22px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #3b76d4;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 4px;
  white-space: nowrap;
}

.sb-top-header__product {
  font-size: 22px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #ef626c;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.sb-top-header--onboarding {
  background: transparent;
  border-top: none;
  width: 100%;
  position: relative;
  z-index: 1;
}

.sb-onboarding-topbar .sb-top-header--onboarding .sb-top-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  max-width: none;
  margin: 0;
  padding: 0 40px;
  width: 100%;
  min-height: 56px;
}

.sb-top-header__center {
  justify-self: center;
  align-self: center;
  min-width: 0;
  z-index: 2;
}

.sb-onboarding-topbar .sb-top-header__actions {
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  z-index: 2;
}

.sb-onboarding-v2 .sb-top-header:not(.sb-top-header--onboarding) {
  background: transparent;
  border-top: none;
}

.sb-onboarding-v2
  .sb-top-header:not(.sb-top-header--onboarding)
  .sb-top-header__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  gap: 12px;
}

.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__delytt {
  font-size: 38px;
  color: #3b76d4;
}

.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__product {
  font-size: 38px;
  color: #ef626c;
  font-family: var(--sb-font-semibold);
}

.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon {
  width: 57.193px;
  height: 57.193px;
  aspect-ratio: 1/1;
  border-radius: 10.999px;
  background: #36c;
}

.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon svg {
}

.sb-onboarding-v2 .sb-top-header__logout {
  border-radius: 10px;
  border: 1px solid #ef626c;
  background: #fff;
  color: #ef626c;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: 28px; /* 140% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  padding: 8px 18px;
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1.2;
}

.sb-onboarding-v2 .sb-top-header__logout:hover:not(:disabled) {
  background: #fff5f5;
  color: #b85555;
  border-color: #b85555;
}

.sb-top-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sb-top-header__logout {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

.sb-top-header__logout:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
}

.sb-top-header__logout:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-container {
  max-width: var(--sb-max-width);
  margin: 0 auto;
  padding: 0 20px 40px;
}

.sb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.sb-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--sb-text);
}

.sb-logo img {
  width: 32px;
  height: 32px;
}

.sb-logo span {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

.sb-tagline {
  font-size: 11px;
  color: var(--sb-text-muted);
  text-align: right;
  line-height: 1.3;
  max-width: 120px;
}

.sb-tagline--landing {
  text-align: center;
  max-width: none;
  margin: 20px 0 0;
}

.sb-hero-image {
  width: 100%;
  border-radius: var(--sb-radius-lg);
  overflow: hidden;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--sb-teal) 0%, #0a5c5f 100%);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.sb-hero-placeholder {
  font-size: 64px;
  line-height: 1;
  padding-bottom: 16px;
}

.sb-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--sb-text);
}

.sb-subtitle {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sb-text-muted);
  margin: 0 0 24px;
}

.sb-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.sb-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 14px 16px;
  box-shadow: var(--sb-shadow);
}

.sb-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.sb-feature-icon--check {
  background: #dcfce7;
  color: var(--sb-green);
}

.sb-feature-icon--chart {
  background: var(--sb-teal-light);
  color: var(--sb-teal);
}

.sb-feature-icon--user {
  background: var(--sb-teal-light);
  color: var(--sb-teal);
}

.sb-feature-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.sb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: var(--sb-radius);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.sb-btn--primary {
  background: var(--sb-teal);
  color: var(--sb-white);
}

.sb-btn--primary:hover {
  background: var(--sb-teal-dark);
}

.sb-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-teal);
  text-decoration: none;
}

.sb-link:hover {
  text-decoration: underline;
}

.sb-trust {
  text-align: center;
  margin: 32px 0;
}

.sb-trust p {
  font-size: 13px;
  color: var(--sb-text-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.sb-trust-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 22px;
}

.sb-section-title {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 20px;
}

.sb-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.sb-step {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 20px;
  text-align: center;
  box-shadow: var(--sb-shadow);
}

.sb-step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sb-teal);
  color: var(--sb-white);
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.sb-step-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.sb-step p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--sb-text-muted);
  margin: 0;
}

.sb-footer {
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--sb-border);
}

.sb-footer a {
  color: var(--sb-teal);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sb-footer a:hover {
  text-decoration: underline;
}

.sb-footer-meta {
  font-size: 12px;
  color: var(--sb-text-muted);
  margin: 16px 0 8px;
}

.sb-footer-meta a {
  font-size: 12px;
  font-weight: 400;
}

.sb-footer-note {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}

/* Onboarding */
.sb-onboarding {
  min-height: 100vh;
  background: var(--sb-bg);
}

.sb-onboarding-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px 0;
  gap: 12px;
}

.sb-onboarding-step-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-text-muted);
  margin: 0;
}

.sb-help-link {
  font-size: 13px;
  color: var(--sb-teal);
  text-decoration: none;
  white-space: nowrap;
}

.sb-onboarding-body {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.sb-onboarding-body--with-sidebar {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  max-width: 1100px;
}

.sb-onboarding-sidebar {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 20px 16px;
  height: -moz-fit-content;
  height: fit-content;
}

.sb-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sb-text-muted);
  margin: 0 0 16px;
}

.sb-sidebar-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sb-sidebar-steps li {
  font-size: 13px;
  color: #9ca3af;
  padding: 8px 0;
  line-height: 1.35;
}

.sb-sidebar-step--active {
  color: var(--sb-teal);
  font-weight: 600;
}

.sb-sidebar-step--done {
  color: var(--sb-text);
}

.sb-sidebar-step-num {
  font-weight: 600;
}

.sb-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 28px 24px 32px;
  box-shadow: var(--sb-shadow);
}

.sb-card--wide {
  width: 100%;
}

.sb-back-link {
  display: inline-block;
  font-size: 14px;
  color: var(--sb-text-muted);
  text-decoration: none;
  margin-bottom: 20px;
}

.sb-card-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.25;
}

.sb-card-subtitle {
  font-size: 15px;
  color: var(--sb-text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

.sb-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sb-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sb-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--sb-text);
}

.sb-required {
  color: #ef4444;
}

.sb-input,
.sb-select {
  width: 100%;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  background: var(--sb-white);
}

.sb-input:focus,
.sb-select:focus {
  outline: none;
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 3px rgba(13, 124, 127, 0.15);
}

.sb-phone-input {
  display: flex;
  gap: 8px;
}

.sb-phone-code {
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 12px 10px;
  font-size: 14px;
  background: #f9fafb;
  min-width: 110px;
}

.sb-hint {
  font-size: 12px;
  color: var(--sb-text-muted);
  margin: 0;
}

.sb-error {
  font-size: 13px;
  color: #dc2626;
  margin: 0;
}

.sb-error--center {
  text-align: center;
}

.sb-btn--outline {
  background: var(--sb-white);
  color: var(--sb-teal);
  border: 1px solid var(--sb-teal);
}

.sb-btn--ghost {
  background: #f3f4f6;
  color: var(--sb-text);
  width: auto;
  padding: 12px 24px;
}

.sb-btn--inline {
  width: auto;
  padding: 12px 28px;
}

.sb-btn--sm {
  width: auto;
  padding: 10px 18px;
  font-size: 14px;
}

.sb-legal {
  font-size: 12px;
  color: var(--sb-text-muted);
  text-align: center;
  line-height: 1.5;
  margin: 8px 0 0;
}

.sb-legal a {
  color: var(--sb-teal);
}

.sb-otp-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 8px 0;
}

.sb-otp-input {
  width: 48px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
}

.sb-otp-input:focus {
  outline: none;
  border-color: var(--sb-teal);
}

.sb-resend {
  text-align: center;
  font-size: 14px;
  color: var(--sb-text-muted);
  margin: 0;
}

.sb-text-btn {
  background: none;
  border: none;
  color: var(--sb-teal);
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.sb-whatsapp-help {
  display: block;
  text-align: center;
  color: var(--sb-green);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.sb-debug-otp {
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.sb-input-icon-wrap {
  position: relative;
}

.sb-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.sb-input--with-icon {
  padding-left: 38px;
}

.sb-verified-phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--sb-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #f9fafb;
  font-size: 15px;
}

.sb-verified-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}

.sb-upload-box {
  border: 2px dashed var(--sb-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sb-upload-icon {
  font-size: 28px;
}

.sb-upload-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.sb-upload-preview img {
  max-width: 120px;
  max-height: 120px;
  border-radius: 8px;
  -o-object-fit: cover;
  object-fit: cover;
}

.sb-file-input {
  display: none;
}

.sb-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.sb-profile-layout {
  display: flex;
  gap: 20px;
  width: 100%;
}

.sb-next-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--sb-radius-lg);
  padding: 20px;
}

.sb-next-box h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.sb-next-box p {
  margin:0 0 3px;
  font-size: 14px;
  color: var(--sb-text-muted);
  line-height: 1.5;
  color: #222;
font-size: 18px;
font-style: normal;
line-height: normal;
}

.sb-flash-success {
  background: #dcfce7;
  color: #166534;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 16px;
  margin-bottom: 16px;
}

.sb-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.sb-category-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  border: 2px solid var(--sb-border);
  border-radius: 12px;
  background: var(--sb-white);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s,
    background 0.15s;
  font-family: inherit;
}

.sb-category-card:hover {
  border-color: #a7d8d9;
}

.sb-category-card--selected {
  border-color: var(--sb-teal);
  background: var(--sb-teal-light);
}

.sb-category-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 4px;
}

.sb-category-icon img {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
}

.sb-category-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--sb-text);
}

.sb-category-desc {
  font-size: 12px;
  color: var(--sb-text-muted);
  line-height: 1.35;
}

.sb-choice-feedback {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.sb-choice-feedback p {
color: #1DA616;
font-size: 18px;
font-style: normal;
line-height: normal;
font-family: var(--sb-font-semibold);
}

.sb-choice-feedback ul {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #047857;
  line-height: 1.6;
}

.sb-skip-link {
  display: block;
  text-align: center;
  margin-bottom: 12px;
  width: 100%;
}

.branch-qr-preview .sb-qr-v2__code-wrap{}

@media (max-width: 900px) {
  .sb-onboarding-body--with-sidebar {
    grid-template-columns: 1fr;
  }

  .sb-onboarding-sidebar {
    display: none;
  }

  .sb-onboarding-step-label {
    display: none;
  }

  .sb-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sb-recommend-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--sb-teal-light);
  border: 1px solid #a7d8d9;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.sb-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.sb-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px;
  border: 2px solid var(--sb-border);
  border-radius: 14px;
  background: var(--sb-white);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.sb-template-card:hover {
  border-color: #a7d8d9;
}

.sb-template-card--selected {
  border-color: var(--sb-teal);
  background: var(--sb-teal-light);
}

.sb-template-icon {
  font-size: 28px;
}

.sb-template-name {
  font-size: 16px;
  font-weight: 700;
}

.sb-template-desc {
  font-size: 13px;
  color: var(--sb-text-muted);
  line-height: 1.4;
}

.sb-template-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sb-template-tag {
  font-size: 11px;
  background: #f3f4f6;
  color: var(--sb-text-muted);
  padding: 4px 8px;
  border-radius: 999px;
}

.sb-template-card--selected .sb-template-tag {
  background: rgba(255, 255, 255, 0.8);
}

.sb-info-box {
  background: #f9fafb;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  font-size: 14px;
}

.sb-info-box ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--sb-text-muted);
  line-height: 1.6;
}

.sb-info-box--lock {
  margin-top: 16px;
  font-size: 13px;
  color: var(--sb-text-muted);
}

.sb-pin-input {
  display: flex;
  gap: 10px;
}

.sb-pin-box {
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
}

.sb-pin-box:focus {
  outline: none;
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 3px rgba(13, 124, 127, 0.15);
}

.sb-owner-card {
  background: var(--sb-teal-light);
  border: 1px solid #a7d8d9;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.sb-owner-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  font-size: 14px;
}

.sb-staff-card {
  position: relative;
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-staff-remove {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--sb-text-muted);
  cursor: pointer;
}

.sb-role-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-role-pill {
  border: 1px solid var(--sb-border);
  background: var(--sb-white);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.sb-role-pill--active {
  background: var(--sb-teal);
  color: var(--sb-white);
  border-color: var(--sb-teal);
}

.sb-add-staff-btn {
  margin-bottom: 16px;
}

.sb-staff-count {
  font-size: 14px;
  color: var(--sb-text-muted);
  margin: 0 0 16px;
}

.sb-template-label {
  font-size: 14px;
  color: var(--sb-text-muted);
  margin: 0 0 16px;
}

.sb-popular-section {
  margin-bottom: 20px;
}

.sb-service-accordion {
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 8px;
}

.sb-service-accordion__item {
  border-bottom: 1px solid var(--sb-border);
}

.sb-service-accordion__item:last-child {
  border-bottom: none;
}

.sb-service-accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: var(--sb-white);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sb-service-accordion__item--open .sb-service-accordion__header {
  background: #f8fafb;
}

.sb-service-accordion__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-text);
}

.sb-service-accordion__icon {
  font-size: 18px;
  line-height: 1;
}

.sb-service-accordion__chevron {
  font-size: 22px;
  color: var(--sb-text-muted);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.sb-service-accordion__item--open .sb-service-accordion__chevron {
  transform: rotate(-90deg);
}

.sb-service-accordion__body {
  padding: 0 16px 0px;
  background: #f8fafb;
}

.sb-service-accordion__empty {
  margin: 0;
  color: #222;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
  color: var(--sb-text-muted);
}

.sb-services-empty {
  border: 1px dashed var(--sb-border);
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--sb-text-muted);
  margin-bottom: 14px;
}

.sb-popular-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sb-chip {
  border: 1px solid var(--sb-border);
  background: var(--sb-white);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.sb-chip--active {
  background: var(--sb-teal);
  color: var(--sb-white);
  border-color: var(--sb-teal);
}

.sb-services-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.sb-services-count {
  font-size: 13px;
  color: var(--sb-text-muted);
}

.sb-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.sb-service-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}

.sb-service-name {
  min-width: 0;
}

.sb-price-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sb-currency {
  font-size: 13px;
  font-weight: 600;
  color: var(--sb-text-muted);
}

.sb-service-price {
  width: 90px;
}

.sb-service-remove {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--sb-text-muted);
  cursor: pointer;
  padding: 4px 8px;
}

.sb-add-service-btn {
  width: 100%;
  margin-bottom: 16px;
}

.sb-tip-box {
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  color: #854d0e;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .sb-template-grid {
    grid-template-columns: 1fr;
  }

  .sb-service-row {
    grid-template-columns: 1fr;
  }

  .sb-channel-grid {
    grid-template-columns: 1fr;
  }
}

.sb-payment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.sb-payment-row {
  border: 1px solid var(--sb-border);
  border-radius: 14px;
  background: var(--sb-white);
  overflow: hidden;
}

.sb-payment-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}

.sb-payment-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.sb-payment-text {
  flex: 1;
  min-width: 0;
}

.sb-payment-name {
  display: block;
  font-weight: 700;
  font-size: 15px;
}

.sb-payment-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--sb-teal);
  margin-left: 6px;
}

.sb-payment-desc {
  display: block;
  font-size: 13px;
  color: var(--sb-text-muted);
  margin-top: 2px;
}

.sb-payment-extra {
  padding: 0 16px 16px;
  border-top: 1px solid var(--sb-border);
  padding-top: 14px;
}

.sb-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex-shrink: 0;
}

.sb-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sb-toggle-slider {
  position: absolute;
  inset: 0;
  background: #d1d5db;
  border-radius: 999px;
  transition: background 0.2s;
  cursor: pointer;
}

.sb-toggle-slider::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}

.sb-toggle input:checked + .sb-toggle-slider {
  background: #36C;
}

.sb-toggle input:checked + .sb-toggle-slider::before {
  transform: translateX(18px);
}

.sb-status-box {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 12px;
}

.sb-status-box--success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.sb-status-box--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.sb-status-box--muted {
  background: #f9fafb;
  border: 1px solid var(--sb-border);
  color: var(--sb-text-muted);
}

.sb-channel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.sb-daily-report-page .sb-card-title,
.sb-daily-report-page .sb-card-subtitle {
  text-align: center;
}

.sb-daily-report-page .sb-section-label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--sb-text);
}

.sb-daily-report-page .sb-section-label--preview {
  margin-bottom: 14px;
}

.sb-channel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px;
  border: 2px solid var(--sb-border);
  border-radius: 14px;
  background: var(--sb-white);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    background 0.2s ease;
}

.sb-channel-card--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f9fafb;
}

.sb-channel-soon {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.sb-channel-card--selected {
  border-color: var(--sb-teal);
  background: var(--sb-teal-light);
}

.sb-channel-icon {
  font-size: 24px;
}

.sb-channel-name {
  font-weight: 700;
  font-size: 15px;
}

.sb-channel-desc {
  font-size: 12px;
  color: var(--sb-text-muted);
}

.sb-time-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}

.sb-custom-time {
  margin: -8px 0 20px;
  max-width: 220px;
}

.sb-time-pill {
  position: relative;
  border: 1px solid var(--sb-border);
  background: var(--sb-white);
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.sb-time-pill--active {
  background: var(--sb-teal);
  color: var(--sb-white);
  border-color: var(--sb-teal);
}

.sb-time-popular {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #f59e0b;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sb-report-preview {
  margin-bottom: 16px;
}

.sb-report-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--sb-shadow);
}

.sb-report-bubble {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 1.7;
}

.sb-report-line {
  margin: 0 0 4px;
}

.sb-report-bubble strong {
  font-weight: 700;
}

.sb-report-meta {
  color: var(--sb-text-muted);
  margin-bottom: 8px !important;
}

.sb-report-footer {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--sb-text-muted);
}

.sb-phone-bar,
.sb-summary-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 12px;
}

.sb-phone-bar {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
}

.sb-phone-bar__icon,
.sb-summary-bar__icon {
  flex-shrink: 0;
  font-size: 18px;
}

.sb-phone-bar__text {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
}

.sb-phone-bar__verified {
  margin-left: 6px;
  color: #15803d;
  font-weight: 600;
  font-size: 13px;
}

.sb-phone-bar__change {
  flex-shrink: 0;
  color: var(--sb-teal);
  font-weight: 600;
  text-decoration: none;
  font-size: 13px;
}

.sb-summary-bar {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}

.sb-next-box--inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (max-width: 720px) {
  .sb-channel-grid {
    grid-template-columns: 1fr;
  }

  .sb-time-pills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sb-phone-bar {
    flex-wrap: wrap;
  }
}

.sb-pwa-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.sb-pwa-phone {
  font-size: 64px;
}

.sb-pwa-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-pwa-feature {
  background: #f9fafb;
  border: 1px solid var(--sb-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

.sb-device-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.sb-device-tab {
  border: 1px solid var(--sb-border);
  background: var(--sb-white);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.sb-device-tab--active {
  background: var(--sb-teal);
  color: var(--sb-white);
  border-color: var(--sb-teal);
}

.sb-pwa-steps {
  margin: 0 0 20px;
  padding-left: 20px;
  line-height: 1.8;
  font-size: 15px;
}

.sb-next-box--inline {
  margin-bottom: 20px;
}

.sb-branch-qr-page .sb-card-title {
  text-align: center;
}

.sb-branch-qr-page .sb-card-subtitle {
  text-align: center;
  margin-bottom: 24px;
}

.sb-qr-card {
  background: var(--sb-white);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  padding: 28px 24px 22px;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: var(--sb-shadow);
}

.sb-qr-image {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto 18px;
}

.sb-qr-business {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sb-text);
}

.sb-qr-url {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--sb-teal);
  word-break: break-all;
}

.sb-qr-location {
  margin: 0;
  font-size: 13px;
  color: var(--sb-text-muted);
}

.sb-qr-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.sb-qr-share-btn {
  text-decoration: none;
  text-align: center;
}

.sb-qr-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.sb-qr-info-card {
  background: #f8fafb;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 16px;
  text-align: center;
}

.sb-qr-info-icon {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.sb-qr-info-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}

.sb-qr-info-card p {
  margin: 0;
  font-size: 13px;
  color: var(--sb-text-muted);
  line-height: 1.5;
}

/* Staff branch PIN — soft card UI (match staff OTP pin screen look, content unchanged) */
.sb-staff-branch-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.sb-staff-branch-page .sb-staff-branch-header {
  border-top: 0;
  flex-shrink: 0;
  background: transparent;
  padding-top: 20px;
}

.sb-staff-branch-page .sb-staff-branch-header .sb-top-header__inner {
  justify-content: center;
  padding: 12px 20px;
}

.sb-staff-branch-page .sb-staff-branch-header .sb-top-header__logo img {
  height: 40px;
  width: auto;
  display: block;
}

.sb-staff-branch-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(1.25rem, 5vw, 2rem) 20px clamp(1.5rem, 5vw, 2.5rem);
  box-sizing: border-box;
}

.sb-staff-branch-card {
  position: relative;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 5vw, 2rem);
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07), 0 18px 40px rgba(51, 102, 204, 0.1);
}

.sb-staff-branch-title {
  margin: 0 0 6px;
  font-size: clamp(22px, 6.5vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  background: linear-gradient(90deg, #3366cc, #ef626c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sb-staff-branch-subtitle {
  margin: 0 0 4px;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: #222222;
}

.sb-staff-branch-location {
  margin: 0;
  font-size: clamp(14px, 3.8vw, 16px);
  color: #64748b;
}

.sb-staff-branch-pin {
  margin-top: 22px;
  text-align: center;
}

.sb-staff-branch-label {
  margin: 0 0 16px;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 400;
  color: #222222;
  text-align: center;
  line-height: 1.5;
}

.sb-staff-branch-pin .sb-pin-input {
  justify-content: center;
  gap: clamp(0.5rem, 3vw, 0.75rem);
}

.sb-staff-branch-pin .sb-pin-box {
  width: 54px;
  height: 54px;
  border: 1.5px solid #dadada;
  border-radius: 10px;
  background: #ffffff;
  color: #1e293b;
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  caret-color: #3366cc;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sb-staff-branch-pin .sb-pin-box:focus {
  outline: none;
  border-color: #3366cc;
  box-shadow: 0 0 0 4px rgba(51, 102, 204, 0.12), 0 2px 8px rgba(51, 102, 204, 0.1);
}

.sb-staff-branch-help {
  margin: 18px 0 0;
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 400;
  color: #222222;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .sb-staff-branch-main {
    padding: 28px 16px 36px;
  }

  .sb-staff-branch-card {
    padding: 28px 18px 26px;
    border-radius: 20px;
  }

  .sb-staff-branch-pin .sb-pin-box {
    width: 50px;
    height: 50px;
  }
}

@media (min-width: 640px) {
  .sb-qr-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  .sb-qr-info-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  .sb-qr-print-area,
  .sb-qr-print-area * {
    visibility: visible;
  }

  .sb-qr-print-area {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    border: none;
    box-shadow: none;
  }
}

.sb-choose-plan-page .sb-card-title,
.sb-choose-plan-page .sb-card-subtitle {
  text-align: center;
}

.sb-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.sb-plan-card {
  position: relative;
  border: 2px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-white);
  padding: 20px 18px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.sb-plan-card--selected {
  border-color: var(--sb-teal);
  box-shadow: 0 0 0 1px var(--sb-teal);
}

.sb-plan-card--popular {
  margin-top: 8px;
}

.sb-plan-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sb-plan-badge--teal {
  background: var(--sb-teal);
  color: var(--sb-white);
}

.sb-plan-badge--gold {
  background: #f59e0b;
  color: #1f2937;
}

.sb-plan-badge--purple {
  position: static;
  transform: none;
  display: inline-block;
  margin-bottom: 8px;
  background: #7c3aed;
  color: var(--sb-white);
}

.sb-plan-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

.sb-plan-name {
  margin: 0 0 8px;
  font-size: 18px;
}

.sb-plan-price {
  margin: 0 0 4px;
  font-size: 14px;
}

.sb-plan-price strong {
  font-size: 24px;
  color: var(--sb-text);
}

.sb-plan-setup {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--sb-text-muted);
}

.sb-plan-desc {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--sb-text-muted);
  line-height: 1.5;
}

.sb-plan-features {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--sb-text);
  line-height: 1.6;
}

.sb-plan-select-label {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--sb-border);
  color: var(--sb-text-muted);
}

.sb-plan-card--selected .sb-plan-select-label {
  background: var(--sb-teal);
  border-color: var(--sb-teal);
  color: var(--sb-white);
}

.sb-plan-info {
  margin-bottom: 22px;
}

.sb-plan-addons-section {
  margin-bottom: 20px;
}

.sb-plan-addons-title {
  margin: 0 0 4px;
  font-size: 20px;
}

.sb-plan-addons-subtitle {
  margin: 0 0 14px;
  color: var(--sb-text-muted);
  font-size: 14px;
}

.sb-plan-addon-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius);
  padding: 16px;
  margin-bottom: 10px;
  background: #fafbfc;
}

.sb-plan-addon-card--selected {
  border-color: var(--sb-teal);
  background: var(--sb-teal-light);
}

.sb-plan-addon-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 4px;
}

.sb-plan-addon-head h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.sb-plan-addon-head p {
  margin: 0;
  font-size: 13px;
  color: var(--sb-text-muted);
  line-height: 1.5;
}

.sb-plan-addon-price {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--sb-text-muted);
}

.sb-plan-addon-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--sb-teal);
  cursor: pointer;
}

.sb-plan-bundled-box {
  margin-bottom: 18px;
}

.sb-plan-bundled-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sb-plan-bundled-chip {
  background: #eef6f6;
  border: 1px solid #c9e3e3;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--sb-teal-dark);
}

@media (min-width: 900px) {
  .sb-plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.sb-price-summary {
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  background: var(--sb-white);
  padding: 18px 20px;
  margin-bottom: 24px;
}

.sb-price-summary__title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.sb-price-summary__lines {
  border-bottom: 1px solid var(--sb-border);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.sb-price-summary__line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--sb-text-muted);
}

.sb-price-summary__label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sb-price-summary__check {
  color: var(--sb-teal);
  font-weight: 700;
}

.sb-price-summary__amount {
  white-space: nowrap;
  color: var(--sb-text);
}

.sb-price-summary__amount--muted {
  color: var(--sb-text-muted);
  font-size: 13px;
}

.sb-price-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sb-text);
}

.sb-price-summary__onetime {
  border-top: 1px solid var(--sb-border);
  padding-top: 12px;
  margin-bottom: 12px;
}

.sb-price-summary__line--onetime {
  padding: 6px 0;
  font-size: 13px;
}

.sb-price-summary__total--sub {
  font-size: 16px;
  margin-bottom: 0;
}

.sb-price-summary__total-amount {
  color: var(--sb-teal);
  white-space: nowrap;
}

.sb-price-summary__setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #f3f4f6;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--sb-text-muted);
  margin-top: 12px;
}

.sb-price-summary__setup span:last-child {
  color: var(--sb-text);
  font-weight: 600;
  white-space: nowrap;
}

.sb-price-summary__final {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--sb-border);
}

.sb-price-summary__final-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--sb-text);
}

.sb-price-summary__final-amount {
  color: var(--sb-teal);
  white-space: nowrap;
}

.sb-price-summary__final-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--sb-text-muted);
  line-height: 1.5;
}

.sb-plan-feature-compare {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

.sb-plan-feature-card {
  border-radius: 15px;
border: 1px solid #FFD9DB;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  overflow: hidden;
  background: var(--sb-white);
}

.sb-plan-v2__feature-card.sb-plan-feature-card.sb-plan-feature-card--included{
  border-radius: 15px;
border: 1px solid #B0E9C9;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-plan-feature-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}

.sb-plan-feature-card__toggle {
  cursor: default;
}

.sb-plan-feature-card__toggle > div {
  flex: 1;
  min-width: 0;
}

.sb-plan-feature-card__chevron {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #15803d;
  transition: transform 0.2s ease;
}

.sb-plan-feature-card--included .sb-plan-feature-card__head {
border-radius: 15px 15px 0 0;
border-bottom: 1px solid #B0E9C9;
background: #F4FFF9;
}

.sb-plan-feature-card--excluded .sb-plan-feature-card__head {
  background: #fef2f2;
  border-bottom: 1px solid #fecaca;
}

.sb-plan-feature-card__head strong {
  display: block;
  font-size: 16px; font-family: var(--sb-font-semibold);
  line-height: 1.3;
}

.sb-plan-feature-card--included .sb-plan-feature-card__head strong {
  color: #222;
font-size: 18px;
font-style: normal;
line-height: normal;
}

.sb-plan-feature-card--excluded .sb-plan-feature-card__head strong {
color: #222;
font-size: 18px;
font-style: normal;
line-height: normal;
}

.sb-plan-feature-card__head p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #222;
font-size: 18px;
  line-height: 1.4;
}

.sb-plan-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.sb-plan-feature-card__icon--included {
  background: #22c55e;
}

.sb-plan-feature-card__icon--excluded {
  background: #ef4444;
}

.sb-plan-feature-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  padding: 16px;
}

.sb-plan-feature-card__intro {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: #222;
  font-size: 16px;
  line-height: 1.4;
  font-family: var(--sb-font-bold);
  font-weight: bold;
}

.sb-plan-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap:3px;
}

.sb-plan-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 187.5% */
  line-height: 1.4;
  color: var(--sb-text);
}

.sb-plan-feature-list--excluded li {
  color: #9ca3af;
}

.sb-plan-feature-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}

.sb-plan-feature-mark--included {
  background: #dcfce7;margin-top: 6px;
  color: #16a34a;
}

.sb-plan-feature-mark--excluded {
	background: #FF4754;
	color: #fff;
	font-size: 10px;
	margin-top: 5px;
}

@media (max-width: 720px) {
  .sb-plan-feature-columns {
    grid-template-columns: 1fr;
  }
}

.sb-payment-confirmed-v2 .sb-profile-card__intro {
  padding-bottom: 8px;
}

.sb-payment-confirmed__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.sb-payment-confirmed__hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #f2fff6;
  border: 1px solid #c6f0d2;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-payment-confirmed__hero-icon svg {
  display: block;
  width: 36px;
  height: 36px;
}

.sb-payment-confirmed__active {
  margin: 0 0 8px;
  color: #2f6fd6;
  text-align: center;
  font-size: 20px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.35;
}

.sb-payment-confirmed__note {
  margin: 0 auto;
  max-width: 420px;
  color: #6b7280;
  font-size: 16px;
  line-height: 1.5;
}

.sb-payment-confirmed-v2__body {
  padding: 20px 40px 36px;
}

.sb-receipt-card {
  text-align: left;
  margin-bottom: 20px;
  padding: 18px 20px;
  border-radius: 15px;
  border: 1px solid #e0e9fb;
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-receipt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #222;
}

.sb-receipt-card__head strong {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-receipt-paid {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #47b975;
  background: #f2fff6;
  color: #168244;
  font-size: 12px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.25;
}

.sb-receipt-card__lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0e9fb;
}

.sb-receipt-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-receipt-line strong {
  color: #222;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  text-align: right;
}

.sb-receipt-line__note {
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-receipt-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #222;
}

.sb-receipt-card__total strong {
  font-size: 22px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #2f6fd6;
}

.sb-payment-confirmed__cta {
  display: inline-flex;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;
}

.sb-onboarding-v2:has(.sb-payment-confirmed-v2) {
  --sb-sticky-footer-height: 24px;
}

@media (max-width: 767px) {
  .sb-payment-confirmed-v2__body {
    padding: 16px 20px 28px;
  }

  .sb-payment-confirmed__active {
    font-size: 17px;
  }

  .sb-payment-confirmed__note {
    font-size: 15px;
  }

  .sb-receipt-card {
    padding: 16px;
  }

  .sb-receipt-card__head {
    font-size: 16px;
  }

  .sb-receipt-line {
    font-size: 14px;
  }

  .sb-receipt-card__total {
    font-size: 16px;
  }

  .sb-receipt-card__total strong {
    font-size: 20px;
  }
}

/* Landing page — approved onboarding card design */
.sb-page--landing {
  background: #eef1f6;
  font-size: clamp(15px, 2.5vw, 17px);
}

.sb-landing {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: clamp(24px, 6vw, 70px) clamp(16px, 4vw, 25px) var(--sb-wave-clearance);
}

.sb-landing-wrap {
  width: 100%;
  max-width: min(660px, 100%);
}

.sb-landing-card {
  width: 100%;
  background: var(--sb-white);
  border-radius: clamp(18px, 4vw, 30px);
  border-top: clamp(4px, 0.8vw, 5px) solid #36c;
  background: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.10);
  padding: clamp(24px, 5vw, 46px) clamp(20px, 8vw, 70px);
  text-align: center;
}

.sb-landing-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vw, 14px);
  margin-bottom: clamp(18px, 3.5vw, 28px);
  text-align: center;
}

.sb-landing-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 57.193px;
  height: 57.193px;
  border-radius: 10.999px;
  background: #36c;
  color: #fff;
  box-shadow: 0 6px 16px rgba(47, 111, 214, 0.28);
}

.sb-landing-brand-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-landing-brand-logo {
  display: block;
  height: clamp(28px, 5.5vw, 52px);
  width: auto;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.sb-landing-title {
  margin: 0 0 clamp(4px, 1vw, 5px);
  font-size: clamp(26px, 5.5vw, 50px);
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.2;
  color: #222;

}

.sb-landing-title-accent {
  color: #EF626C;
}

.sb-landing-subtitle {
  margin: 0 0 clamp(16px, 3vw, 21px);
  color: #222;
  text-align: center;
  
  font-size: clamp(16px, 3.2vw, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: clamp(24px, 4.5vw, 32px);
  max-width: 767px;
  margin-left: auto;
  margin-right: auto;
}

.sb-landing-features {
  display: flex;
  flex-direction: row;
  gap: 0;
  margin-bottom: clamp(16px, 2.5vw, 20px);
  text-align: left;
  background: var(--sb-white);
  border: 1px solid #E0E8FB;
  border-radius: clamp(10px, 2vw, 14px);
  overflow: hidden;
  box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.10);

}

.sb-landing-feature-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex: 1 1 0;
  padding: clamp(12px, 2.5vw, 21px) clamp(14px, 3vw, 30px);
  background: transparent;
  border: none;
  border-right: 1px solid #d8e3f5;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}

.sb-landing-feature-row:last-child {
  border-right: none;
}

.sb-landing-feature-row--highlight {
  background: transparent;
  box-shadow: none;
}

.sb-landing-feature-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 7.5vw, 48px);
  height: clamp(40px, 7.5vw, 48px);
  border-radius: 50%;
  background: #f0f4ff;
  color: #2f6fd6;
}

.sb-landing-feature-icon svg {
  max-width: 70%;
  max-height: 70%;
  width: auto;
  height: auto;
}

.sb-landing-feature-text {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 18px;
  font-family: var(--sb-font-medium) !important;
  font-weight: normal;
  line-height: 1.35;
  color: #111827;
}

.sb-landing-feature-chevron {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #e85d6f;
  line-height: 0;
}

.sb-landing-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}

.sb-landing-cta-group:not(.sb-landing-cta-group--secondary) {
  width: 100%;
}


.sb-landing-cta-group--secondary {
  margin-bottom: clamp(24px, 4.5vw, 40px);
  width: 100%;
}

.sb-landing-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 8px);
  width: 100%;
  min-height: 48px;
  padding: clamp(14px, 2.8vw, 18px) clamp(16px, 3.5vw, 24px);
  border-radius: 0;
  font-size: clamp(17px, 3.5vw, 24px);
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sb-landing-btn--primary {
  background: #EF626C;
  color: #fff;
  border: 1px solid #f2e1e1;
  border-bottom: none;
  border-radius: clamp(10px, 2vw, 13px);
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.sb-landing-btn--primary:hover {
  background: #e8555f;
  color: #fff;
}

.sb-landing-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.sb-landing-btn-icon svg {
  width: clamp(18px, 3.5vw, 22px);
  height: clamp(18px, 3.5vw, 22px);
}

.sb-landing-btn--outline {
  background: var(--sb-white);
  color: #3366cc;
  border: none;
  border-radius: 0;
}

.sb-landing-btn--outline:hover {
  background: #f8fbff;
  color: #3366cc;
}

.sb-landing-note {
  width: 100%;
  padding: clamp(12px, 2.5vw, 16px) clamp(8px, 1.5vw, 12px) clamp(4px, 1vw, 5px);
  border-radius: 0 0 13px 13px;
  font-size: clamp(14px, 2.5vw, 16px);
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
}

.sb-landing-note--pink {
  background: #FFF2F2;
  color: #111827;
  border: 1px solid #FFE6E8;
  border-top: none;
  border-radius: 0 0 13px 13px;
  margin-top: 0;
  font-family: var(--sb-font-medium);
  margin-top: -11px;
}

.sb-landing-note--blue {
  background: #f0f4ff;
  color: #111827;
  border: none;
  border-radius: 0;
  margin-top: 0;
  padding: 10px 16px 12px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
}

.sb-landing-cta-group--secondary .sb-landing-btn--outline {
  background: #fff;
  color: #36C;
  border: none;
  border: 1px solid #36C;
  border-radius: clamp(10px, 2vw, 13px);
  position: relative;
  z-index: 1;
}

.sb-landing-cta-group--secondary .sb-landing-btn--outline:hover {
  background: #f8fbff;
  color: #3366cc;
}

.sb-landing-cta-group--secondary .sb-landing-btn--outline span {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.sb-landing-cta-group--secondary .sb-landing-btn--outline svg path {
  fill: currentColor;
}

.sb-landing-cta-group--secondary .sb-landing-note--blue {
  background: #f0f4ff;
  color: #111827;
  border: none;
  font-weight: 600;
  margin-top: 0;
  font-family: var(--sb-font-regular);
  font-size: clamp(14px, 2.5vw, 16px);
  padding: clamp(12px, 2.5vw, 16px) clamp(8px, 1.5vw, 12px) clamp(4px, 1vw, 5px);
  border-radius: 0 0 13px 13px;
border: 1px solid #E0E9FB;
background: #EFF4FF;
margin-top: -11px;
}

.sb-landing-pricing {
  margin: clamp(8px, 1.5vw, 12px) 0 0;
  width: 100%;
  text-align: center;
  font-size: clamp(14px, 2.5vw, 16px);
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #db5a61;
}

.sb-landing-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: clamp(18px, 3.5vw, 26px) 0 clamp(12px, 2vw, 15px);
}

.sb-landing-divider-text {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 14px);
  width: 100%;
  flex-shrink: 0;
  font-size: clamp(16px, 3.2vw, 24px);
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  white-space: nowrap;
}

.sb-landing-divider-text svg {
  flex: 1 1 0;
  min-width: 24px;
  max-width: 166px;
  width: auto;
  height: 5px;
}

.sb-landing-divider-text-line {
  flex: 1;
  min-width: 0;
  height: 5px;
  display: block;
}

.sb-landing-trust {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3.5vw, 28px);
}

.sb-landing-trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 8px);
  margin: 0;
  font-size: clamp(13px, 2.4vw, 16px);
  line-height: 1.4;
  color: #222;
  text-align: center;
}

.sb-landing-trust-link {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 12px);
  width: 100%;
  padding: clamp(14px, 2.8vw, 19px) clamp(14px, 3vw, 20px);
  background: #fff;
  border: 1px solid #EDEDED;
  border-radius: clamp(10px, 2vw, 13px);
  box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.10);
  color: #222;
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

.sb-landing-trust-link:hover {
  color: #222;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.sb-landing-trust-link-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.sb-landing-trust-link-label {
  font-size: clamp(14px, 2.5vw, 16px);
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #333;
  line-height: 1.3;
}

.sb-landing-trust-link-title {
  font-size: clamp(15px, 2.8vw, 18px);
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-landing-trust-link-chevron {
  flex-shrink: 0;
  color: #111827;
  font-size: clamp(15px, 2.8vw, 18px);
  line-height: 1;
}

.sb-landing-trust-link-chevron svg {
  width: clamp(7px, 1.5vw, 9px);
  height: auto;
}

.sb-landing-trust-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sb-landing-trust-icon--shield {
  color: #3366cc;
}

.sb-whatsapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.sb-setup-help .sb-whatsapp-icon {
  margin-top: 1px;
}

.sb-landing-trust-link .sb-whatsapp-icon {
  width: clamp(24px, 4.5vw, 30px);
  height: clamp(24px, 4.5vw, 30px);
  margin-top: 0;
  border-radius: 50%;
  background: #2AA81A;
}

.sb-landing-trust-link .sb-whatsapp-icon svg {
  width: clamp(14px, 2.8vw, 18px);
  height: clamp(14px, 2.8vw, 18px);
}

.sb-landing-trust-link .sb-whatsapp-icon svg path {
  fill: #fff;
}

.sb-landing-trust-icon--shield svg {
  width: clamp(15px, 3vw, 18px);
  height: clamp(15px, 3vw, 18px);
}

@media (max-width: 1024px) {
  :root {
    --sb-wave-height: clamp(110px, 16vw, 150px);
    --sb-wave-clearance: clamp(90px, 18vw, 140px);
  }
}

@media (max-width: 768px) {
  :root {
    --sb-wave-height: clamp(88px, 18vw, 125px);
    --sb-wave-clearance: clamp(80px, 20vw, 120px);
  }

  .sb-landing-wrap {
    max-width: min(560px, 100%);
  }

  .sb-landing-card {
    padding: clamp(22px, 4.5vw, 32px) clamp(18px, 5vw, 36px);
  }

  .sb-landing-cta-group--secondary .sb-landing-btn--outline span svg {
    width: clamp(8px, 1.8vw, 10px);
    height: auto;
  }
}

@media (max-width: 767px) {
  :root {
    --sb-wave-height: clamp(72px, 20vw, 96px);
    --sb-wave-clearance: clamp(68px, 22vw, 92px);
  }

  .sb-landing-brand-icon {
    width: 47.193px;
    height: 47.193px;
  }

  .sb-landing-brand-icon svg {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .sb-landing {
    padding: 20px 14px var(--sb-wave-clearance);
  }

  .sb-landing-card {
    padding: 22px 16px 24px;
    border-radius: 18px;
  }

  .sb-landing-divider-text {
    gap: 8px;
    font-size: 15px;
  }

  .sb-landing-divider-text svg {
    min-width: 16px;
  }

  .sb-landing-trust-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 4px;
    text-align: left;
  }

  .sb-landing-note--blue {
    padding: 10px 12px 12px;
  }
}

/* Onboarding sidebar — shared Step 1–9 design */
.sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
  grid-template-columns: 400px minmax(0, 1fr);
}

.onboard-sidebar.sb-onboarding-sidebar-v2 {
  display: flex;
  flex-direction: column;
  width: 400px;
  min-height: 795px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(51, 102, 204, 0.08);
}

.onboard-sidebar.sb-onboarding-sidebar-v2.onboard-sidebar--compact {
  min-height: 0;
  height: -moz-fit-content;
  height: fit-content;
  align-self: start;
}

.onboard-sidebar.sb-onboarding-sidebar-v2.onboard-sidebar--compact .sb-onboarding-sidebar-v2__list {
  flex: 0 0 auto;
  padding-bottom: 4px;
}

.onboard-sidebar.sb-onboarding-sidebar-v2.onboard-sidebar--compact .sb-onboarding-sidebar-v2__list::before {
  bottom: 36px;
}

.onboard-sidebar.sb-onboarding-sidebar-v2.onboard-sidebar--compact .onboard-sidebar-help {
  margin: 8px 12px 12px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__list {
  flex: 1;
  gap: 0;
  margin: 0;
  padding: 4px 10px 0;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__list::before {
  left: 41px;
  top: 36px;
  bottom: 58px;
  width: 0;
  border-left: 1px solid #DCDCDC;
  background: none;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item {
  min-height: 61px;
  gap: 12px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
}

.onboard-sidebar li:first-child.sb-onboarding-sidebar-v2__item--active{ margin-top: 10px;}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active {
  min-height: 80px;
  padding: 10px 11px 10px 10px; margin-bottom: 15px;
  border-color: #b9ceff;
  border-left: 3px solid #3366cc;
  background: linear-gradient(90deg, #f4f7ff 0%, #f8faff 100%);
  box-shadow: 0 2px 8px rgba(51, 102, 204, 0.08);
}

.onboard-sidebar .sb-onboarding-sidebar-v2__icon {
  width: 36px;
  height: 36px;
  border: 1px solid #dce2e8;
  background: #fff;
  color: #555;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.onboard-sidebar .sb-onboarding-sidebar-v2__icon svg {
  width: 18px;
  height: 18px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__icon {
  width: 48px;
  height: 48px;
  margin-left: -2px;
  border: 0;
  background: linear-gradient(180deg, #3975e4 0%, #2058cf 100%);
  color: #fff;
  box-shadow: 0 5px 12px rgba(51, 102, 204, 0.24);
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__icon svg {
  width: 22px;
  height: 22px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__icon {
  width: 34px;
  height: 34px;
  margin: 1px;
  border: 0;
  border-radius: 50%;
  background: #16bf35;
  box-shadow: 0 2px 6px rgba(22, 191, 53, 0.18);
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__icon svg {
  width: 18px;
  height: 14px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__content {
  gap: 1px;
  padding-top: 0;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__step {
  color: #667085;
  font-family: var(--sb-font-regular);
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__label,
.onboard-sidebar .sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__label {
  color: #222;
  font-family: var(--sb-font-medium);
  font-size: 18px;
  font-weight: normal;
  line-height: 20px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__step {
  color: #667085;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__label {
  color: #245dcc;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__status {
  margin-top: 1px;
  color: #245dcc;
  font-family: var(--sb-font-medium);
  font-size: 13px;
  font-weight: normal;
  line-height: 17px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__status--done {
  color: #0cb52c;
}

.onboard-sidebar-help {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  margin:15px 12px 15px;
  padding: 15px 15px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafffc 0%, #f7fffa 100%);
  box-shadow: 0 2px 8px rgba(20, 184, 72, 0.05);
  color: #222;
  text-decoration: none;
}

.onboard-sidebar-help:hover {
  color: #222;
  border-color: #a9dcc1;
  box-shadow: 0 4px 12px rgba(20, 184, 72, 0.1);
}

.onboard-sidebar-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #12bd2e;
  box-shadow: 0 2px 7px rgba(18, 189, 46, 0.2);
}

.onboard-sidebar-help__icon .sb-whatsapp-icon {
  margin: 0;
}

.onboard-sidebar-help__icon svg {
  width: 28px;
  height: 28px;
}

.onboard-sidebar-help__icon svg path {
  fill: #fff;
}

.onboard-sidebar-help__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}

.onboard-sidebar-help__title {
  font-family: var(--sb-font-semibold);
  font-size: 16px;
  line-height: 18px;
}

.onboard-sidebar-help__text {
  color: #475467;
  font-family: var(--sb-font-regular);
  font-size: 18px;
  line-height: 24px;
  white-space: normal;
}

.onboard-sidebar-help__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #00af38;
}



/* Phone setup page */
.sb-setup-page {
  position: relative;
  min-height: 100vh;
  background: transparent;
  overflow: hidden;
}

.sb-setup-page::before,
.sb-setup-page::after {
  content: none;
}

.sb-setup-page::before {
  width: 280px;
  height: 280px;
  top: -80px;
  right: -60px;
  background: radial-gradient(
    circle,
    rgba(47, 111, 214, 0.12) 0%,
    rgba(47, 111, 214, 0) 70%
  );
}

.sb-setup-page::after {
  width: 220px;
  height: 220px;
  bottom: 12%;
  left: -50px;
  background: radial-gradient(
    circle,
    rgba(47, 111, 214, 0.08) 0%,
    rgba(47, 111, 214, 0) 70%
  );
}

.sb-setup-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 710px;
  margin: 0 auto;
  padding:clamp(24px, 6vw, 70px) clamp(16px, 4vw, 25px) var(--sb-wave-clearance);
}

.sb-setup-card {
  position: relative;
  background: var(--sb-white);
  border-radius: 30px;
  border-top: 5px solid #36c;
  background: #fff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  padding: 10px 75px 24px;
  text-align: center;
}

.sb-setup-card--accent {
  border-top: 5px solid #2f6fd6;
}

.sb-setup-back {
  position: absolute;
  top: 58px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #2f6fd6;
  text-decoration: none;
  line-height: 0;
}

.sb-setup-back:hover {
  color: #255fc4;
}

.sb-setup-title {
  margin: 26px 0 4px;
  font-size: clamp(28px, 6vw, 40px);
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.2;
  color: #111827;
  letter-spacing: -0.02em;
}

.sb-setup-subtitle {
  margin: 0 0 24px;
  font-family: var(--sb-font-regular);
  color: #222;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 145.455% */

  margin-left: auto;
  margin-right: auto;
}

.sb-setup-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

.sb-setup-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-setup-phone {
  display: flex;
  align-items: stretch;
border-radius: 13px;
border: 1px solid #EDEDED;
background: #FFF;
 
  background: var(--sb-white);
  overflow: hidden;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sb-setup-phone:focus-within {
  border-color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.12);
}

.sb-setup-phone-code {
  flex-shrink: 0;
  border: none;
  background: #f8fafc;
  padding: 25px 16px;
  font-size: 22px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  border-right: 1.5px solid #d8e3f5;
  cursor: default;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 88px;
  text-align: center;
}

.sb-setup-phone-input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 14px 16px;
  font-size:22px;
  font-family: var(--sb-font-regular);
  color: #111827;
  background: transparent;
}

.sb-setup-phone-input:focus {
  outline: none;
}

.sb-setup-phone-input::-moz-placeholder {
  color: #9ca3af;
}

.sb-setup-phone-input::placeholder {
  color: #9ca3af;
}

.sb-setup-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 14px;
  font-size: 24px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.sb-setup-btn--primary {
  background: linear-gradient(180deg, #ef6b7c 0%, #e85d6f 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(232, 93, 111, 0.28);
  margin-top: 4px;
}

.sb-setup-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #e85d6f 0%, #d94f61 100%);
}

.sb-setup-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-setup-legal {
  margin: 0;
 color: #222;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 111.111% */
  line-height: 28px; /* 175% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.5;
  text-align: center;
}

.sb-setup-legal a {
  color: #144EC0;
  font-weight: normal;
  text-decoration: none;
}

.sb-setup-legal a:hover {
  text-decoration: underline;
}

.sb-setup-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 15px;
  color: #222;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
}

.sb-setup-help:hover {
  color: #374151;
}

.sb-setup-help span:last-child {
  color: #25d366;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-setup-page .sb-landing-brand {
  margin-bottom: 28px;
}

.sb-phone-entry-page .sb-landing-brand-icon {
  display: none;
}

.sb-phone-entry-page .sb-setup-back {
  display: none;
}

.sb-phone-entry-page .sb-setup-subtitle {
  max-width: 470px;
  margin-bottom: 12px;
}

.sb-phone-entry-security {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 20px;
  padding: 7px 16px;
 border-radius: 34px;
background: #EEF4FF;
  color: #3366cc;
  font-family: var(--sb-font-regular);
color: #36C;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 177.778% */
}

.sb-phone-entry-security svg {
  flex-shrink: 0;
}

.sb-setup-help--card {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 70px;
  margin:22px 0 34px;
  padding: 12px 20px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
  color: #222;
  text-align: left;
}

.sb-setup-help--card:hover {
  color: #222;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.sb-setup-help--card .sb-setup-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #22a719;
}

.sb-setup-help--card .sb-setup-help__icon .sb-whatsapp-icon {
  margin: 0;
}

.sb-setup-help--card .sb-setup-help__icon svg {
  width: 16px;
  height: 16px;
}

.sb-setup-help--card .sb-setup-help__icon svg path {
  fill: #fff;
}

.sb-setup-help--card .sb-setup-help__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  color: #222;
  line-height: 1.2;
}

.sb-setup-help--card .sb-setup-help__text > span {
  font-size: 15px;
}

.sb-setup-help--card .sb-setup-help__text strong {
  font-family: var(--sb-font-semibold);
  font-size: 17px;
  font-weight: normal;
}

.sb-setup-help--card .sb-setup-help__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #111;
  line-height: 0;
}

@media (max-width: 767px) {
  .sb-phone-entry-security {
    padding: 6px 12px;
    font-size: 14px;
  }

  .sb-setup-help--card {
    min-height: 64px;
    margin-bottom: 20px;
    padding: 10px 14px;
  }

  .sb-setup-help--card .sb-setup-help__text strong {
    font-size: 15px;
  }

  .sb-setup-wrap {
    padding: 20px 16px var(--sb-wave-clearance);
  }

.sb-setup-card {
	padding: 18px 20px 10px;
	border-radius: 17px;
}
  .sb-setup-back {
    top: 16px;
    left: 16px;
  }

  .sb-setup-title {
    margin-top: 1px;
    font-size: 26px;
  }

  .sb-setup-subtitle {
    font-size: 16px;
    line-height: 130%;
  }

  .sb-setup-phone-code,
  .sb-setup-phone-input {
    font-size: 16px;
    line-height: 130%;
    padding: 13px 14px;
  }
  .sb-setup-subtitle {
    margin: 0 0 17px;
  }
  .sb-setup-btn {
    font-size: 18px;
  }
}

/* OTP verify page */
.sb-verify-page .sb-landing-brand-icon {
  display: none;
}

.sb-verify-page .sb-setup-back {
  width: 58px;
  height: 58px;
}

.sb-verify-message-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 30px auto 10px;
  border-radius: 50%;
  background: #eef4ff;
}

.sb-verify-message-icon svg {
  display: block;
}

.sb-verify-page .sb-setup-title {
  margin-top: 0;
}

.sb-verify-subtitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.sb-verify-subtitle > span {
  display: block;color: #484848;
}

.sb-verify-subtitle strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  font-size: 32px;
  line-height: 1.2;
}

.sb-verify-form {
  gap: 18px;
}

.sb-setup-page .sb-otp-row {
  justify-content: center;
  gap: 20px;
  margin: 4px 0 0;
}

.sb-setup-page .sb-otp-input {
  width: 70px;
  height: 70px;
  text-align: center;
  font-size: 24px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
border-radius: 13px;
border: 1px solid #EDEDED;
background: #FFF;
box-shadow: 0 2px 6px 0 rgba(51, 102, 204, 0.10);

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

.sb-setup-page .sb-otp-input:focus {
  outline: none;
  border-color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.12);
}

.sb-verify-resend {
  font-family: var(--sb-font-regular);
  color: #222;
  text-align: center;
  font-size: clamp(22px, 6vw, 22px);
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 145.455% */
  margin: 0;
}

.sb-verify-resend > span:first-child {
  margin-right: 6px;
}

.sb-verify-resend__action {
  color: #3366cc;
}

.sb-verify-resend strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: inherit;
}

.sb-setup-page .sb-text-btn {
  color: #2f6fd6;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-setup-page .sb-debug-otp {
  margin: 0 0 20px;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .sb-verify-message-icon {
    width: 62px;
    height: 62px;
  }

  .sb-verify-subtitle {
    gap: 4px;
  }

  .sb-verify-subtitle strong {
    font-size: 23px;
  }

  .sb-setup-page .sb-otp-row {
    gap: 8px;
  }

  .sb-setup-page .sb-otp-input {
    width: 44px;
    height: 50px;
    font-size: 20px;
    border-radius: 12px;
  }
}

/* Onboarding v2 — Business Profile & multi-step setup */
.sb-onboarding-v2 {
  min-height: 100vh;
  background: #f4f7fb;
  position: relative;
  overflow-x: hidden;
}

.sb-onboarding-topbar {
  position: relative;
  width: 100%;
  background: #fff;
  border-top: none;
  border-bottom: 1px solid #e8edf3;
  box-shadow: none;
  margin: 0;
  padding: 17px 0 17px;
}

.sb-onboarding-progress__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sb-onboarding-topbar .sb-top-header--onboarding .sb-top-header__logo {
  justify-self: start;
  align-self: center;
  z-index: 2;
}

.sb-onboarding-progress__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 520px;
}

.sb-onboarding-progress__line {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  min-width: 248px;
  max-width: 280px;
}

.sb-onboarding-progress__line--left {
  background: linear-gradient(to right, rgba(44, 91, 167, 0), #2c5ba7 70%);
}

.sb-onboarding-progress__line--right {
  background: linear-gradient(to left, rgba(44, 91, 167, 0), #2c5ba7 70%);
}

.sb-onboarding-progress__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2c5ba7;
  flex-shrink: 0;
}

.sb-onboarding-progress__badge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  margin: 0 12px;
  padding: 7px 18px 8px;
  background: #f5f8ff;
  border: 1px solid #d8e3f5;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(47, 111, 214, 0.08);
}

.sb-onboarding-progress__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #36c;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: 22px; /* 110% */
  text-transform: uppercase;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.2;
  white-space: nowrap;
  text-transform: uppercase;
}

.sb-onboarding-progress__name {
  color: #666;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7f9e;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

.sb-onboarding-progress__help {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #36c;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px; /* 140% */
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}

.sb-onboarding-progress__help:hover {
  color: #2c5ba7;
}

.sb-onboarding-progress__help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #3b76d4;
  color: #3b76d4;
  font-size: 11px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1;
  flex-shrink: 0;
}

.sb-onboarding-v2 .sb-onboarding-body {
  position: relative;
  z-index: 1;
  max-width: 1380px;
  margin: 0 auto;
  /* Sticky footer replaces wave clearance at the bottom */
  padding: 28px 32px 16px;
}

.sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.sb-onboarding-v2 .sb-onboarding-main {
  min-width: 0;
  padding-bottom: calc(var(--sb-sticky-footer-height) + env(safe-area-inset-bottom, 0px));
}

.sb-onboarding-sidebar-v2 {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: 16px;
  width: 400px;
  max-width: 100%;
  flex-shrink: 0;
}

.sb-onboarding-sidebar-v2__header {
  background: #f0f4ff;
  border-top: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 20px;
  margin-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.sb-onboarding-sidebar-v2__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  color: #222;
  font-size: 20px;
  font-style: normal;
  line-height: 22px; /* 110% */
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.sb-onboarding-sidebar-v2__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b76d4;
  flex-shrink: 0;
}

.sb-onboarding-sidebar-v2__list {
  list-style: none;
  margin: 0;
  padding: 10px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.sb-onboarding-sidebar-v2__list::before {
  content: "";
  position: absolute;
  left: 43px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: #e2e8f0;
  pointer-events: none;
  z-index: 0;
}

.sb-onboarding-sidebar-v2__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 4px;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

.sb-onboarding-sidebar-v2__item--active {
  background: transparent;
}

.sb-onboarding-sidebar-v2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #d1d9e6;
  background: #fff;
  color: #64748b;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__icon {
  border-color: #3b76d4;
  background: #fff;
  color: #3b76d4;
}

.sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__icon {
  border-radius: 38px;
  background: #38B000;
  border-color: #38B000;
  color: #fff;
}

.sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__icon svg {
  display: block;
  width: 21px;
  height: 16px;
}

.sb-onboarding-sidebar-v2__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}

.sb-onboarding-sidebar-v2__step {
  color: #666;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 122.222% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.3;
}

.sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__step {
  color: #94a3b8;
}

.sb-onboarding-sidebar-v2__label {
  color: #222;
  font-size: 20px;
  font-style: normal;
  line-height: 22px; /* 110% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__label {
  color: #3b76d4;
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sb-onboarding-sidebar-v2__item--done .sb-onboarding-sidebar-v2__label {
  color: #334155;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-onboarding-sidebar-v2__status {
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 137.5% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #ef626c;
  line-height: 1.25;
  margin-top: 2px;
}

.sb-onboarding-wave {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 130% 90% at 12% 100%,
      rgba(47, 111, 214, 0.24) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 100% 75% at 88% 100%,
      rgba(232, 93, 111, 0.2) 0%,
      transparent 52%
    );
}

.sb-landing-wave-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  height: var(--sb-wave-height);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.sb-landing-wave-footer__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sb-profile-v2 {
  position: relative;
  z-index: 1;
}

.sb-profile-card {
  background: var(--sb-white);
border-radius: 15px;
border: 1px solid #E0E9FB;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  padding: 0;
  overflow: hidden;
}

.sb-profile-card--accent {
  border-top: 5px solid #2f6fd6;
}

.sb-profile-card__intro {
  text-align: center;
  padding: 28px 40px 0;
}

.sb-profile-card__badges {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.sb-profile-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.25;
  letter-spacing: 0;
}

.sb-profile-badge--step {
  background: #eef4fd;
  color: #2f6fd6;
}

.sb-profile-badge--name {
  background: #f3f4f6;
  color: #6b7280;
}

.sb-profile-card__title {
  margin: 0 0 4px;
  color: #222;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.sb-profile-card__subtitle {
  margin: 0 auto 0px;
  color: #222;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  max-width: 450px;
}

.sb-profile-card__required {
  margin: 0 auto;
  color: #222;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 100% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.4;
}

.sb-profile-v2 .sb-flash-success {
  margin: 20px 40px 0;
}

.sb-profile-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 20px 60px 36px;
}

.sb-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
border-radius: 15px;
border: 1px solid #EDEDED;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  padding: 20px 30px;
}

.sb-profile-grid__full {
  grid-column: 1 / -1;
}

.sb-profile-v2 .sb-field {
  gap: 6px;
}

.sb-profile-v2 .sb-label {
  color: #222;
  font-size:20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.35;
}

.sb-profile-v2 .sb-required {
  color: #ef4444;
}

.sb-profile-input,
.sb-profile-select {
  border: 1px solid #EDEDED;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 20px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  background: var(--sb-white);
  line-height: 1.4;
}

.sb-profile-input::-moz-placeholder {
  color: #a7a7a7;
  font-size: 18px;
}

.sb-profile-input::placeholder {
  color: #a7a7a7;
  font-size: 18px;
}

.sb-profile-input:focus,
.sb-profile-select:focus {
  outline: none;
  border-color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.1);
}

.sb-profile-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  color: #6b7280;
}

.sb-profile-select:valid,
.sb-profile-select option:not([value=""]) {
  color: #111827;
}

.sb-search-select {
  position: relative;
}

.sb-search-select__input {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  color: #6b7280;
}

.sb-search-select__input--has-value,
.sb-search-select--open .sb-search-select__input {
  color: #111827;
}

.sb-search-select__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  background: var(--sb-white, #fff);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.1);
}

.sb-search-select__option,
.sb-search-select__empty {
  padding: 10px 16px;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  line-height: 1.35;
  color: #222;
  cursor: pointer;
}

.sb-search-select__option--active,
.sb-search-select__option:hover {
  background: #f3f6fb;
}

.sb-search-select__option--selected {
  font-weight: 600;
  color: #1f4f9c;
}

.sb-search-select__empty {
  color: #9ca3af;
  cursor: default;
}

.sb-profile-hint {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 2px;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.4;
}

.sb-profile-hint__icon {
  display: inline-block;
  width: 9px;
  height: 12px;
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='12' viewBox='0 0 9 12' fill='none'%3E%3Cpath d='M6 9C6.225 8.25234 6.69141 7.61484 7.15313 6.97969C7.275 6.81328 7.39688 6.64687 7.51406 6.47812C7.97813 5.81016 8.25 5.00156 8.25 4.12734C8.25 1.84688 6.40312 0 4.125 0C1.84688 0 0 1.84688 0 4.125C0 4.99922 0.271875 5.81016 0.735938 6.47578C0.853125 6.64453 0.975 6.81094 1.09687 6.97734C1.56094 7.6125 2.02734 8.25234 2.25 8.99766H6V9ZM4.125 12C5.16094 12 6 11.1609 6 10.125V9.75H2.25V10.125C2.25 11.1609 3.08906 12 4.125 12ZM2.25 4.125C2.25 4.33125 2.08125 4.5 1.875 4.5C1.66875 4.5 1.5 4.33125 1.5 4.125C1.5 2.67422 2.67422 1.5 4.125 1.5C4.33125 1.5 4.5 1.66875 4.5 1.875C4.5 2.08125 4.33125 2.25 4.125 2.25C3.08906 2.25 2.25 3.08906 2.25 4.125Z' fill='%23D7D7D8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 12px;
}

.sb-profile-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dde4ef;
  border-radius: 10px;
  padding: 13px 14px;
  background: #f9fafb;
  font-size: 18px;
  line-height: 1.4;
}

.sb-profile-phone__prefix {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
  flex-shrink: 0;
}

.sb-profile-phone__number {
  flex: 1;
  min-width: 0;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #111827;
}

.sb-profile-phone__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  border: 1px solid #47b975;
  background: #f2fff6;
  color: #168244;
  font-size: 12px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.25;
}

.sb-profile-phone__verified svg {
  flex-shrink: 0;
}

.sb-profile-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding:30px 20px;
  border-radius: 15px;
  border: 1px solid #ededed;
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  text-align: center;
}

.sb-profile-upload__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
width: 68px;
height: 68px;
border-radius: 68px;
background: #F8F8F8;
  color: #9ca3af;
  margin-bottom: 2px;
}

.sb-profile-upload__title {
  margin: 0;
  color: #222;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
  line-height: 1.35;
}
.sb-profile-upload__title span {font-family: var(--sb-font-regular);}
.sb-profile-upload__hint {
  margin: 0 0 4px;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  text-align: center;
  
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 114.286% */
  line-height: 1.45;
}

.sb-profile-upload__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border: 1.5px solid #2f6fd6;
	border-radius: 10px;
	background: var(--sb-white);
	color: #2f6fd6;
	font-size: 18px;
	font-family: var(--sb-font-semibold);
	font-weight: normal;
	cursor: pointer;
	line-height: 1.2;
	transition: background 0.15s ease;
}

.sb-profile-upload__btn:hover {
  background: #f8fbff;
}

.sb-profile-upload__skip {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  line-height: 1.3;
}

.sb-profile-upload__skip:hover {
  color: #6b7280;
}

.sb-profile-upload__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sb-profile-upload__preview img {
  max-width: 100px;
  max-height: 100px;
  border-radius: 10px;
  -o-object-fit: cover;
  object-fit: cover;
}

.sb-profile-upload__remove {
  background: none;
  border: none;
  color: #e85d6f;
  font-size: 15px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
}

.sb-profile-next {
  border-radius: 15px;
  border: 1px solid #e0e9fb;
  background: #f6f9ff;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  padding: 16px 18px;
}

.sb-profile-next__title {
  margin: 0 0 4px;
  font-size: 18px;
  font-family: var(--sb-font-semibold) !important;
  font-weight: normal !important;
  color: #111827;
  line-height: 1.35;
}

.sb-profile-next__text {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}

.sb-profile-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 6px;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
  text-decoration: none;
  line-height: 1.3;
}

.sb-profile-whatsapp:hover {
  color: #1da851;
}

.sb-profile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 6px;
}

/* Sticky/floating step actions – all onboarding steps, all viewports */
.sb-onboarding-v2 .sb-profile-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 12px 32px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #e0e9fb;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.1);
}

/* Wide screens: align floating strip with the right-side step content panel */
@media (min-width: 1367px) {
  .sb-onboarding-v2 .sb-profile-footer {
    /* Body: max 1380px centered, 32px pad; grid: 400px sidebar + 28px gap + main */
    left: calc(max(0px, (100vw - 1380px) / 2) + 32px + 400px + 28px);
    right: auto;
    width: calc(min(100vw, 1380px) - 64px - 400px - 28px);
    max-width: none;
    padding-left: 60px;
    padding-right: 60px;
  }
}

.sb-profile-footer__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #2f6fd6;
  font-size: 20px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: color 0.15s ease;
}

.sb-profile-footer__back:hover {
  background: transparent;
  color: #255fc4;
}

.sb-profile-footer__continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: inherit;
  height: 54px;
  padding: 0 28px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(180deg, #ef6b7c 0%, #e85d6f 100%);
  color: #fff;
  font-size: 20px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(232, 93, 111, 0.26);
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.sb-profile-footer__continue:hover:not(:disabled) {
  background: linear-gradient(180deg, #e85d6f 0%, #d94f61 100%);
}

.sb-profile-footer__continue:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-footer-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.sb-footer-nav-icon svg {
  display: block;
  width: 7px;
  height: 12px;
}

.sb-profile-footer__back .sb-footer-nav-icon--back {
  margin-right: 8px;
}

.sb-profile-footer__continue .sb-footer-nav-icon--next {
  margin-left: 8px;position: relative;
  top: 2px;
}

@media (max-width: 960px) {
  :root {
    --sb-sticky-footer-height: 88px;
  }

  .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
    grid-template-columns: 1fr;
  }

  .sb-onboarding-sidebar-v2 {
    display: none;
  }

  .sb-onboarding-topbar {
    padding: 14px 0 18px;
  }

  .sb-onboarding-topbar .sb-top-header--onboarding .sb-top-header__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
    padding: 0 20px;
  }

  .sb-onboarding-progress__line,
  .sb-onboarding-progress__dot {
    display: none;
  }

  .sb-onboarding-progress__badge-wrap {
    box-shadow: none;
  }

  .sb-onboarding-topbar .sb-top-header__actions {
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .sb-onboarding-v2 .sb-onboarding-body {
    padding: 15px 15px 12px;
  }

  .sb-profile-card__intro {
    padding: 24px 24px 0;
  }

  .sb-profile-form {
    padding: 20px 24px 28px;
  }

  .sb-profile-v2 .sb-flash-success {
    margin: 16px 24px 0;
  }

  .sb-profile-grid {
    grid-template-columns: 1fr;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }

  .sb-profile-input::-moz-placeholder {
    font-size: 16px;
  }

  .sb-profile-v2 .sb-label,
  .sb-profile-input,
  .sb-profile-select,
  .sb-search-select__input,
  .sb-search-select__option,
  .sb-search-select__empty,
  .sb-profile-input::placeholder,
  .sb-profile-phone {
    font-size: 16px;
  }

  .sb-profile-footer:not(.sb-profile-footer--triple) {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .sb-onboarding-v2 .sb-profile-footer {
    padding: 12px 16px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  .sb-profile-footer:not(.sb-profile-footer--triple) .sb-profile-footer__back {
    flex: 0 0 30%;
    width: 30%;
    min-width: 0;
    justify-content: center;
  }

  .sb-profile-footer:not(.sb-profile-footer--triple) .sb-profile-footer__continue {
    flex: 0 0 70%;
    width: 70%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .sb-onboarding-topbar .sb-top-header--onboarding .sb-top-header__inner {
    padding: 0 16px;
  }

  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__delytt {
    font-size: 18px;
  }

  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__product {
    font-size: 18px;
  }

  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 30px;
    height: 30px;
  }

  .sb-profile-card__intro {
    padding: 20px 20px 0;
  }

  .sb-profile-form {
    padding: 18px 20px 24px;
  }

  .sb-profile-input::-moz-placeholder {
    font-size: 14px;
  }

  .sb-profile-input::placeholder {
    font-size: 14px;
  }
}

@media (max-width: 360px) {
  .sb-profile-card__intro {
    padding: 18px 14px 0;
  }

  .sb-profile-form {
    padding: 16px 10px 20px;
  }

  .sb-profile-v2 .sb-flash-success {
    margin: 14px 10px 0;
  }

  .sb-profile-grid {
    gap: 14px;
    padding: 16px 14px;
  }
}

/* Step 2 — Business Type */
.sb-biztype-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-biztype-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding:0px 60px 36px;
}

.sb-biztype-v2__flash {
  margin: 0 40px;
}

.sb-biztype-v2__error {
  margin: -8px 0 0;
}

.sb-biztype-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding-top:0px;
  overflow: visible;
}

.sb-biztype-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  -moz-column-gap: 14px;
  column-gap: 14px;
  row-gap: 2px;height: 100%;
  align-items: start;
  width: 100%;
  padding: 16px 44px 16px 16px;
border-radius: 15px;
border: 2px solid #EDEDED;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  font-family: inherit;
}

.sb-biztype-card:hover {
  border-color: #b8c9e8;
}

.sb-biztype-card--selected,
.sb-biztype-card.sb-category-card--selected {
border-radius: 15px;
border: 2px solid #36C;
background: #E9EFFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-biztype-card__recommended {
  position: absolute;
  top: 0;
  left: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 12px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
}

.sb-biztype-card__recommended-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
}

.sb-biztype-card__recommended-star svg {
  display: block;
  width: 11px;
  height: 11px;
}

.sb-biztype-card__indicator {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #d1d9e6;
  background: #fff;
  color: #fff;
  flex-shrink: 0;
}

.sb-biztype-card__indicator--checked {
  border-color: #22c55e;
  background: #22c55e;
}

.sb-biztype-card__icon {
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  color: #2f6fd6; border: 1px solid  #E0E9FB;
  font-size: 22px;
  line-height: 1;
  margin: 0;
}

.sb-biztype-card__icon img {
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
}

.sb-business-type-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3366CC;
  line-height: 1;
}
.sb-biztype-card--selected, .sb-biztype-card.sb-category-card--selected .sb-business-type-svg {color: #fff;}
.sb-business-type-svg svg {
  display: block;

}

.sb-service-accordion .sb-business-type-svg svg {
  display: block;
 max-width: 60%; max-height: 60%;
}

.sb-business-type-svg svg path {
  fill: currentColor;
}

.sb-biztype-card--selected .sb-biztype-card__icon {
  background: #36C; border-color: #36C; color: #fff;
}

.sb-biztype-card__content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding-top: 2px;
}

.sb-biztype-card__name {
color: #222;
font-size: 22px;
font-style: normal;
line-height: 22px; /* 100% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.1;
}


.sb-biztype-card__desc {
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.4;
}

.sb-biztype-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
border-radius: 15px;
border: 1px solid #D8F3E4;
background: #F4FFF9;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  margin: 4px 0 0;
}
/* 
.sb-biztype-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  flex-shrink: 0;
  line-height: 1;
} */

.sb-biztype-success__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sb-biztype-success__text {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #1e293b;
  line-height: 1.45;
}

.sb-biztype-success__text strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sb-biztype-features {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding:15px 20px 15px;
}

.sb-biztype-features__title {
  margin: 0 0 7px;
  font-size: 17px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-biztype-features__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-biztype-features__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #374151;
  line-height: 1.45;
}

.sb-biztype-features__check,
.sb-green-check-icon.sb-biztype-features__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 4px;
}

.sb-biztype-features__check svg,
.sb-green-check-icon.sb-biztype-features__check svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sb-biztype-skip {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
color: #222;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 114.286% */
  font-family: var(--sb-font-medium);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.4;
}

.sb-biztype-skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-biztype-skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-biztype-whatsapp {
  margin: 0;
}

.sb-biztype-footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
  .sb-biztype-form {
    padding: 8px 24px 28px;
  }

  .sb-biztype-v2__flash {
    margin: 0 24px;
  }

  .sb-biztype-grid {
    grid-template-columns: 1fr;
  }

  .sb-biztype-card__name {
    font-size: 17px;
  }

  .sb-biztype-card__desc {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .sb-biztype-form {
    padding: 8px 20px 24px;
  }

  .sb-biztype-v2__flash {
    margin: 0 20px;
  }

  .sb-biztype-card {
    padding: 14px 40px 14px 14px;
  }

  .sb-biztype-card__icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}

/* Step 3 — Pick a Template */
.sb-template-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-template-v2__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 40px 36px;
}

.sb-template-v2__flash {
  margin: 20px 40px 32px;
}

.sb-profile-v2.sb-template-v2 .sb-flash-success.sb-template-v2__flash {
  margin: 15px 40px 22px;
}

.sb-template-v2__error {
  margin: -8px 0 0;
}

.sb-template-v2__banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
}

.sb-template-v2__banner-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.sb-template-v2__banner-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fef3c7;
  color: #f59e0b;
  flex-shrink: 0;
}

.sb-template-v2__banner-star svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sb-template-v2__banner-text {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #92400e;
  line-height: 1.45;
}

.sb-template-v2__banner-text strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #78350f;
}

.sb-template-v2__toggle.sb-toggle {
  width: 44px;
  height: 26px;
}

.sb-template-v2__toggle .sb-toggle-slider::before {
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
}

.sb-template-v2__toggle .sb-toggle input:checked + .sb-toggle-slider {
  background: #2f6fd6;
}

.sb-template-v2__toggle .sb-toggle input:checked + .sb-toggle-slider::before {
  transform: translateX(18px);
}

.sb-template-v2__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding-top: 0;
  overflow: visible;
}

.sb-template-v2__card-wrap {
  min-width: 0;
}

.sb-template-v2__card-wrap .sb-template-v2__card {
  height: 100%;
}

.sb-template-v2__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 145px;
  padding: 18px 44px 18px 18px;
  border: 2px solid #ededed;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  font-family: inherit;
}

.sb-template-v2__card:hover {
  border-color: #b8c9e8;
}

.sb-template-v2__card.sb-template-card--selected {
  border-color: #3366CC;
  background: #E9EFFF;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-template-v2__recommended {
  left: 0;
}

.sb-template-v2__card .biztype-recommended-badge.sb-template-v2__recommended {
  top: 15px;
  left: 0;
}

.sb-template-v2__radio {
  top: 14px;
  right: 14px;
  width: 20px;
  height: 20px;
}

.sb-template-v2__card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding-top: 2px;
}

.sb-template-v2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #E0E9FB;
  color: #3366CC;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.sb-template-v2__card.sb-template-card--selected .sb-template-v2__icon {
  background: #3366CC;
  border-color: #3366CC;
  color: #fff;
}

.sb-template-v2__card.sb-template-card--selected .sb-business-type-svg {
  color: #fff;
}

.sb-template-v2__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 2px;
}

.sb-template-v2__name {
color: #222;
font-size: 22px;
font-style: normal;
line-height: 22px; /* 100% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-template-v2__card.sb-template-card--selected .sb-template-v2__name {
  color: #222;
}

.sb-template-v2__desc {
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 16px;
}

.sb-template-v2__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding-left: 62px;
}

.sb-template-v2__tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid #D8E3F5;
  background: #F5F8FF;
  color: #222;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 16px;
}

.sb-template-v2__card.sb-template-card--selected .sb-template-v2__tag {
  background: #F5F8FF;
  color: #222;
  border-color: #D8E3F5;
}

.sb-template-v2__tag--more {
  background: #eef4fd;
  color: #2f6fd6;
  border: 1px solid #d8e3f5;
}

.sb-template-v2__info {
  background: #F5F8FF;
  border: 1px solid #D8E3F5;
  border-radius: 15px;
  box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  padding: 16px 20px;
  margin: 0;
}

.sb-template-v2__info-title {
  margin: 0 0 10px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-template-v2__info-title strong {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #3366CC;
}

.sb-template-v2__info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sb-template-v2__info.sb-info-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
  line-height: inherit;
}

.sb-template-v2__info-list li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 20px;
}

.sb-template-v2__info-check,
.sb-green-check-icon.sb-template-v2__info-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 3px;
}

.sb-template-v2__info-check svg,
.sb-green-check-icon.sb-template-v2__info-check svg {
  display: block;
  width: 14px;
  height: 14px;
}

.sb-template-v2__skip {
  display: block;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
color: #222;
text-align: center;
font-size: 18px;
font-style: normal;
line-height: 16px; /* 114.286% */
  font-family: var(--sb-font-medium);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.4;
}

.sb-template-v2__skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-template-v2__skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-template-v2__whatsapp {
  margin: 0;
}

.sb-template-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
    
  .sb-template-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-template-v2__flash,
  .sb-profile-v2.sb-template-v2 .sb-flash-success.sb-template-v2__flash {
    margin: 16px 24px 10px;
  }

  .sb-template-v2__grid {
    grid-template-columns: 1fr;
  }

  .sb-template-v2__banner {
    flex-wrap: wrap;
  }

  .sb-template-v2__tags {
    padding-left: 53px;
  }

  .sb-template-v2__name {
    font-size: 17px;
  }

  .sb-template-v2__desc {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .sb-template-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-template-v2__flash,
  .sb-profile-v2.sb-template-v2 .sb-flash-success.sb-template-v2__flash {
    margin:0px 20px 0px;
  }

  .sb-template-v2__card {
    padding: 16px 40px 16px 16px;
  }

  .sb-template-v2__icon {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }

  .sb-template-v2__banner-text {
    font-size: 14px;
  }
}

/* Step 4 — Add Staff & PINs */
.sb-staff-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-staff-v2__form {
  display: flex;
  flex-direction: column;margin-top: 10px;
  gap: 20px;
  padding: 8px 60px 36px;
}

.sb-staff-v2__flash {
  margin: 20px 60px 0;
}

.sb-profile-v2.sb-staff-v2 .sb-flash-success.sb-staff-v2__flash {
  margin: 20px 60px 0;
}

.sb-staff-v2__owner {
border-radius: 15px;
border: 1px solid #EDEDED;
background: linear-gradient(
  to bottom,
  #F5F8FF 0,
  #F5F8FF calc(50% - 0.5px),
  #E0E9FB calc(50% - 0.5px),
  #E0E9FB calc(50% + 0.5px),
  #FFF calc(50% + 0.5px),
  #FFF 100%
);
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  padding:17px 24px 17px;
  margin: 0;
  text-align: center;
}

.sb-staff-v2__owner-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.sb-staff-v2__owner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
width: 30px;
height: 30px;
  border-radius: 50%;
  background: #2f6fd6;
  color: #fff;
  flex-shrink: 0;
}

.sb-staff-v2__owner-icon svg {
  display: block;
  width: 30px;
  height: 30px;
}

.sb-staff-v2__owner-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sb-staff-v2__owner-label {
  margin: 0;
  font-size: 18px;
  font-family: var(--sb-font-bold);
color: #36C;
text-align: center;
font-size: 20px;
font-style: normal;
line-height: normal;
  line-height: 1.3;
}

.sb-staff-v2__owner-name {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
color: #222;
text-align: center;
font-weight: 400;
line-height: 16px; /* 114.286% */
  line-height: 1.4;
}

.sb-staff-v2__owner-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.sb-staff-v2__pin-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d8e3f5;
color: #222;
text-align: center;
line-height: 16px; /* 100% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #222222;
  line-height: 1.2;
}

.sb-staff-v2 .sb-pin-input {
  justify-content: center;
  gap: 10px;
}

.sb-staff-v2 .sb-pin-box {
  width: 52px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  border: 1px solid #dde4ef;
  border-radius: 10px;
  background: #fff;
  color: #111827;
}

.sb-staff-v2 .sb-pin-box:focus {
  outline: none;
  border-color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.1);
}

.sb-staff-v2__pin-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 114.286% */
  line-height: 1.4;
}

.sb-staff-v2__pin-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  flex-shrink: 0;
}

.sb-staff-v2__pin-note {
  display: none;
}

.sb-staff-v2__member {
  position: relative;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  padding:30px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
}

.sb-staff-v2__remove {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.sb-staff-v2__remove:hover {
  color: #6b7280;
  background: #f3f4f6;
}

.sb-staff-v2__member-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 18px;
  padding-right: 0;
}

.sb-staff-v2__label {
  font-size: 16px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
}

.sb-staff-v2__input {
  font-size: 16px;
  padding: 12px 14px;
}

.sb-staff-v2__member-grid {
  --sb-staff-control-height: 54px;
}

.sb-staff-v2__member-grid input.sb-staff-v2__input {
  height: var(--sb-staff-control-height);
  padding: 0 14px;
  line-height: calc(var(--sb-staff-control-height) - 2px);
  box-sizing: border-box;
}

.sb-staff-v2__member-grid .sb-setup-phone {
  height: var(--sb-staff-control-height);
  border: 1px solid #dde4ef;
  border-radius: 10px;
  box-sizing: border-box;
}

.sb-staff-v2__member-grid .sb-setup-phone:focus-within {
  border-color: #2f6fd6;
  box-shadow: 0 0 0 3px rgba(47, 111, 214, 0.1);
}

.sb-staff-v2__member-grid .sb-setup-phone-code {
  display: none;
}

.sb-staff-v2__member-grid .sb-setup-phone-input {
  padding: 0 14px;
  font-size: 16px;
  height: 100%;
  line-height: normal;
}

.sb-staff-v2__member .sb-pin-input {
  justify-content: flex-start;
}

.sb-staff-v2__member .sb-pin-box {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.sb-staff-v2__sms-note {
  display: flex;
  align-items: flex-start;
  gap:0px;
  margin: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #2f6fd6;
  line-height: 1.45;
}

.sb-staff-v2__sms-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #2f6fd6;
  flex-shrink: 0;
  margin-top: 1px;
}

.sb-staff-v2__role-field {
  gap: 8px;
}

.sb-staff-v2__role-field .sb-staff-v2__label {
  font-size: 20px;
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-staff-v2__roles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sb-staff-v2__role.sb-role-pill {
  border: 1px solid #d1d9e6;
border-radius: 30px;
border: 1px solid #E0E9FB;
background: #F5F8FF;
  border-radius: 999px;
  padding: 6px 16px 5px;
  font-size: 16px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  color: #222;
  cursor: pointer;
  line-height: 1.25;
  min-height: 32px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sb-staff-v2__role.sb-role-pill:hover:not(.sb-role-pill--active) {
  border-color: #b8c9e8;
  color: #475569;
  background: #fff;
}

.sb-staff-v2__role.sb-role-pill.sb-role-pill--active {
  background: #3b76d4;
  color: #fff;
  border-color: #3b76d4;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  box-shadow: none;
}

.sb-staff-v2__role-empty {
  margin: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #9ca3af;
  line-height: 1.45;
}

.sb-staff-v2__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1.5px solid #2f6fd6;
  border-radius: 10px;
  background: #fff;
 color: #36C;
text-align: center;
font-size: 22px;
font-style: normal;
line-height: 28px; 
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.2;
  margin: 0;
  transition: background 0.15s ease;
}

.sb-staff-v2__add:hover:not(:disabled) {
  background: #f8fbff;
}

.sb-staff-v2__add:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sb-staff-v2__info-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.sb-staff-v2__info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.sb-staff-v2__info-card--privacy {
border-radius: 15px;
border: 1px solid #E0E9FB;
background: #F6F9FF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-staff-v2__info-card--count {
border-radius: 15px;
border: 1px solid #D8F3E4;
background: #F4FFF9;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  align-items: center;
  justify-content: start;
  text-align: center;
}

.sb-staff-v2__info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-staff-v2__info-icon--privacy {
  background: #dbeafe;
  color: #2f6fd6;
}

.sb-staff-v2__info-icon--count {
  background: #D5EBDF;
  color: #16a34a;
}

.sb-staff-v2__info-content {
  min-width: 0;text-align: left;
}

.sb-staff-v2__info-title {
  margin: 0 0 0px;
color: #222;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1.35;
}


.sb-staff-v2__info-text {
  margin: 0;
  font-size: 13px;
  font-family: var(--sb-font-regular);
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
  line-height: 1.3;
}

.sb-staff-v2__info-card--count .sb-staff-v2__info-text{ font-size: 18px;}

.sb-staff-v2__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
color: #222;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 114.286% */
  font-size: 18px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  cursor: pointer;
}

.sb-staff-v2__skip svg {
  display: block;
  flex-shrink: 0;position: relative;
  top: 2px;
}

.sb-staff-v2__skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-staff-v2__skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-staff-v2__whatsapp {
  margin: 0;
}

.sb-staff-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
  .sb-staff-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-staff-v2__flash,
  .sb-profile-v2.sb-staff-v2 .sb-flash-success.sb-staff-v2__flash {
    margin: 16px 24px 0;
  }

  .sb-staff-v2__member-grid {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .sb-staff-v2__info-row {
    grid-template-columns: 1fr;
  }

  .sb-staff-v2__owner {
    padding: 20px 18px;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .sb-staff-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-staff-v2__flash,
  .sb-profile-v2.sb-staff-v2 .sb-flash-success.sb-staff-v2__flash {
    margin: 16px 20px 0;
  }

  .sb-staff-v2__member {
    padding: 18px 16px 16px;
  }

  .sb-staff-v2__member .sb-pin-box {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .sb-staff-v2 .sb-pin-box {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }

  .sb-staff-v2__add {
    font-size: 16px;
  }
}

/* Step 5 — Add Services */
.sb-services-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-services-v2__form {
  display: flex;
  flex-direction: column;
  gap:16px;
  padding: 8px 60px 36px;
}

.sb-services-v2__flash {
  margin: 20px 40px 0;
}

.sb-profile-v2.sb-services-v2 .sb-flash-success.sb-services-v2__flash {
  margin: 20px 40px 0;
}

.sb-services-v2__section-label {
  margin: 0 0 12px;
color: #222; font-size: 20px;
font-weight: 600;
line-height: 28px; /* 140% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-services-v2__popular {
  margin: 0;
}

.sb-services-v2__accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-top: 0;
}

.sb-services-v2__accordion-item {
border-radius: 10px;
border: 1px solid #EDEDED;
background: #FFF;
  overflow: hidden;
}

.sb-services-v2__accordion-item.sb-service-accordion__item {
  border-bottom: 1px solid #e5eaf2;
}

.sb-services-v2__accordion-header {
  padding: 14px 16px;
  background: #fff;
}

.sb-services-v2__accordion-item.sb-service-accordion__item--open
  .sb-services-v2__accordion-header {
  background: #fff;
}

.sb-services-v2__accordion-title {
  color: #222;
font-size: 20px;
font-style: normal;
line-height: 28px; /* 140% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
}

.sb-services-v2__accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
width: 28px;
height: 28px;
  border-radius: 50%;
  background: #36C;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.sb-services-v2__accordion-icon .sb-business-type-svg {
  color: #fff;
}

.sb-services-v2__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
  transform: rotate(180deg);
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.sb-services-v2__chevron svg {
  display: block;
  width: 14px;
  height: 8px;
}

.sb-services-v2__accordion-item.sb-service-accordion__item--open
  .sb-services-v2__chevron {
  transform: none;
}

.sb-services-v2__accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  background: #fff;
  transition: grid-template-rows 0.35s ease;
}

.sb-services-v2__accordion-item.sb-service-accordion__item--open
  .sb-services-v2__accordion-body {
  grid-template-rows: 1fr;
}

.sb-services-v2__accordion-panel {
  overflow: hidden;
  min-height: 0;
  padding: 0 16px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    padding 0.35s ease;
}

.sb-services-v2__accordion-item.sb-service-accordion__item--open
  .sb-services-v2__accordion-panel {
  padding: 0 16px 16px;
  opacity: 1;
  pointer-events: auto;
}

.sb-services-v2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

.sb-services-v2__chip.sb-chip {
border-radius: 30px;
border: 1px solid #E0E9FB;
background: #F5F8FF;
  padding:6px 18px 6px;
color: #222;

font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  color: #1f4fa8;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sb-services-v2__chip.sb-chip:hover {
  background: #dbeafe;
  border-color: #b8c9e8;
}

.sb-services-v2__chip.sb-chip--active {
  background: #3b76d4;
  color: #fff;
  border-color: #3b76d4;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-services-v2__items-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sb-services-v2__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 120px;
border-radius: 10px;
border: 1px solid #EDEDED;
background: #FAFAFA;
  padding: 20px;
  text-align: center;
  margin: 0;
  background: #FAFAFA;
}

.sb-services-v2__empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  color: #3366CC;
  margin-bottom: 1px;
}

.sb-services-v2__empty-icon svg {
  display: block;
  width: 25px;
  height: 27px;
}

.sb-services-v2__empty-title {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 20px;
}

.sb-services-v2__empty-text {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 20px;
}

.sb-services-v2__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.sb-services-v2__row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr) minmax(140px, 0.45fr) 32px;
  gap: 12px;
  align-items: center;
}

.sb-services-v2__category {
  width: 100%;
  height: 52px;
  padding: 0 38px 0 14px;
  border: 1px solid #E0E3E8;
  border-radius: 10px;
  background-color: #fff;
  color: #222;
  font-size: 18px;
  font-family: var(--sb-font-regular);
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M12.8558 7.70049L14 6.55523L7.76423 0.317294C7.66431 0.216742 7.54549 0.136943 7.41461 0.0824884C7.28373 0.0280341 7.14337 3.12247e-07 7.00162 3.06051e-07C6.85986 2.99854e-07 6.71951 0.0280341 6.58863 0.0824883C6.45775 0.136943 6.33893 0.216742 6.23901 0.317294L-2.86538e-07 6.55523L1.14418 7.69941L7 1.84467L12.8558 7.70049Z' fill='%23222222' transform='rotate(180 7 4)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 8px;
}

.sb-services-v2__input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #E0E3E8;
  border-radius: 10px;
  background: #fff;
  color: #222;
  font-size: 16px;
  font-family: var(--sb-font-regular);
}

.sb-services-v2__price-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  gap: 8px;
  padding-left: 12px;
  border: 1px solid #E0E3E8;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.sb-services-v2__price-wrap .sb-currency {
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #64748B;
  flex-shrink: 0;text-transform: uppercase;
}

.sb-services-v2__price {
  width: 100%;
  min-width: 0;
  height: 50px;
  font-size: 16px;
  padding: 0 10px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sb-services-v2__category:focus,
.sb-services-v2__input:focus,
.sb-services-v2__price-wrap:focus-within {
  outline: none;
  border-color: #3366CC;
  box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.1);
}

.sb-services-v2__price:focus {
  outline: none;
  box-shadow: none;
}

.sb-services-v2__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #F0F2F5;
  color: #222;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;padding-bottom: 3px;
}

.sb-services-v2__remove:hover {
  color: #fff;
  background: #EF4444;
}

.sb-services-v2__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border: 1.5px solid #2f6fd6;
  border-radius: 10px;
  background: #fff;
  color: #36C;
text-align: center;
font-size: 22px;
font-style: normal;
line-height: 28px; 
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.2;
  margin: 6px 0;
  transition: background 0.15s ease;
}

.sb-services-v2__add:hover {
  background: #f8fbff;
}

.sb-services-v2__error {
  margin: -8px 0 0;
}

.sb-services-v2__tip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
border-radius: 15px;
border: 1px solid #FFE79F;
background: #FFFAEB;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);

  padding: 14px 20px;
  margin: 0;
}

.sb-services-v2__tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}

.sb-services-v2__tip-icon svg {
  display: block;
  width: 34px;
  height: 34px;
}

.sb-services-v2__tip-text {
  margin: 0;
  color: #222;
font-size: 16px;
font-style: normal;
line-height: 22px; /* 137.5% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
}

.sb-services-v2__tip-text strong {
  display: block;
  margin-bottom: 1px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #222;
  font-size: 18px;
  line-height: 20px;
}

.sb-services-v2__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
color: #222;
font-size: 17px;
font-style: normal;font-family: var(--sb-font-regular);
font-weight: 400;
line-height: 16px; /* 114.286% */
  font-weight: normal;
  cursor: pointer;
  line-height: 1.4;
}

.sb-services-v2__skip svg {
  display: block;
  flex-shrink: 0;
  position: relative;
  top: 1px;
}

.sb-services-v2__skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-services-v2__skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-services-v2__whatsapp {
  margin: 0;
}

.sb-services-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
  .sb-services-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-services-v2__flash,
  .sb-profile-v2.sb-services-v2 .sb-flash-success.sb-services-v2__flash {
    margin: 16px 24px 0;
  }

  .sb-services-v2__row {
    grid-template-columns: minmax(140px, 0.75fr) minmax(180px, 1fr) minmax(120px, 0.5fr) 32px;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .sb-services-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-services-v2__flash,
  .sb-profile-v2.sb-services-v2 .sb-flash-success.sb-services-v2__flash {
    margin: 16px 20px 0;
  }

  .sb-services-v2__section-label {
    font-size: 17px;
  }

  .sb-services-v2__add {
    font-size: 16px;
  }

  .sb-services-v2__chip.sb-chip {
    font-size: 13px;
    padding: 7px 12px;
  }

  .sb-services-v2__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sb-services-v2__remove {
    justify-self: end;
  }
}

/* Step 6 — Payment Methods */
.sb-payment-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-payment-v2__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 60px 36px;
}

.sb-payment-v2__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.sb-payment-v2__card {
  border: 1.5px solid #e5eaf2;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.sb-payment-v2__card--active {
  border-color: #2f6fd6;
  background: #f8fbff; border-width: 2px;
  box-shadow: 0 0 0 1px rgba(47, 111, 214, 0.06);
}

.sb-payment-v2__main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
}

.sb-payment-v2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #EDEDED;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.sb-payment-v2__icon--active {

background: #36C;
}

.sb-payment-v2__icon svg {
  display: block;
  max-width: 22px;
  max-height: 20px;
}

.sb-payment-v2__icon--active svg path {
  fill: #fff;
}

.sb-payment-v2__text {
  flex: 1;
  min-width: 0;
}

.sb-payment-v2__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #222;
font-size: 20px;
font-style: normal;
line-height: 28px; /* 140% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.3;
}

.sb-payment-v2__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 1px 10px 0;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 18px;
  margin-left: 0;
  letter-spacing: 0;
  white-space: nowrap;
}

.sb-payment-v2__badge--common {
  background: #fff;
  color: #3366CC;
  border: 1px solid #CFE0FF;
}

.sb-payment-v2__badge--recommended {
border-radius: 30px;
border: 1px solid #FF8502;
background: #FFF;color: #FF8502;

font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}

.sb-payment-v2__desc {
  display: block;
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
  font-family: var(--sb-font-regular);
  font-weight: normal;

  margin-top: 4px;
}

.sb-payment-v2__toggle.sb-toggle {
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.sb-payment-v2__toggle .sb-toggle-slider::before {
  width: 18px;
  height: 18px;
  left: 1px;
  top: 1px;
}

.sb-payment-v2__toggle .sb-toggle input:checked + .sb-toggle-slider {
  background: #2f6fd6;
}

.sb-payment-v2__toggle .sb-toggle input:checked + .sb-toggle-slider::before {
  transform: translateX(18px);
}

.sb-payment-v2__extra {
  padding: 0 18px 18px;
  border-top: 1px solid #D2E1FF;
  margin-top: 0;
  padding-top: 16px;
}

.sb-payment-v2__extra-label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
  line-height: 1.35;
}

.sb-payment-v2__extra-label-main {
  font-family: var(--sb-font-semibold);
}

.sb-payment-v2__extra-label-optional {
  font-family: var(--sb-font-regular);
}

.sb-payment-v2__extra-input {
  width: 100%;
  font-size: 16px;
  padding: 15px 14px;
}

.sb-payment-v2__error {
  margin: -6px 0 0;
}

.sb-payment-v2__plan {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border: 1px solid #3366CC;
  border-radius: 10px;
  background: #F5F8FF;
  box-shadow: 0 3px 6px rgba(51, 102, 204, 0.05);
}

.sb-payment-v2__plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3366CC;
  color: #fff;
  flex-shrink: 0;
}

.sb-payment-v2__plan-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-payment-v2__plan-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

.sb-payment-v2__plan-label {
  margin: 0;
  color: #222;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.1;
  font-family: var(--sb-font-medium);
}

.sb-payment-v2__plan-name {
  margin: 0;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-payment-v2__plan-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #d8e3f5;
  font-size: 14px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  color: #3366CC;
  font-style: normal;
  line-height: 1.2;
  flex-shrink: 0;
}

.sb-payment-v2__status {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0;
  font-size: 14px;
}

.sb-payment-v2__status-text {
  margin: 0;
  color: #222;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.5;
  font-family: var(--sb-font-regular);
}

.sb-payment-v2__status-text strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sb-payment-v2__status--success {
border-radius: 10px;
border: 1px solid #D8F3E4;
background: #F4FFF9;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}
.sb-payment-v2__status--success .sb-payment-v2__status-text{color: #1DA616;}

.sb-payment-v2__status--warning {


border-radius: 10px;
border: 1px solid #FFE79F;
background: #FFFAEB;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-payment-v2__status--muted {
 border-radius: 10px;
border: 1px solid #DCDCDC;
background: #F8F8FC;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-payment-v2__tip {
  display: none;
  margin: 0;
  color: #6b7280;
  font-size: 16px;
  line-height: 1.35;
  font-family: var(--sb-font-regular);
}

.sb-payment-v2__status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  flex-shrink: 0;
}

.sb-payment-v2__status-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sb-payment-v2__status-icon--warning {
  background: transparent;
}

.sb-payment-v2__status-icon--muted {
  background: transparent;
}

.sb-payment-v2__whatsapp {
  margin: 0;
}

.sb-payment-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
  .sb-payment-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-payment-v2__main {
    padding: 14px 16px;
  }

  .sb-payment-v2__extra {
    padding: 12px 16px 16px;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .sb-payment-v2__form {
    padding: 8px 20px 24px;
    gap: 12px;
  }

  .sb-payment-v2__name {
    font-size: 18px;
  }

  .sb-payment-v2__desc {
    font-size: 13px;
  }

  .sb-payment-v2__icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .sb-payment-v2__plan {
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d5e2fb;
    background: #f7f9ff;
    box-shadow: none;
  }

  .sb-payment-v2__plan-icon {
    width: 28px;
    height: 28px;
  }

  .sb-payment-v2__plan-label {
    color: #64748b;
    font-size: 14px;
  }

  .sb-payment-v2__plan-name {
    font-size: 16px;
    line-height: 1.25;
  }

  .sb-payment-v2__plan-badge {
    margin-left: 0;
    margin-top: 0;
    min-height: 20px;
    padding: 1px 8px;
    border-color: #c9daf8;
    font-size: 14px;
    justify-content: center;
  }

  .sb-payment-v2__status {
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    box-shadow: none;
  }

  .sb-payment-v2__status-text {
    font-size: 16px;
    line-height: 1.35;
  }

  .sb-payment-v2__status--muted {
    display: none;
  }

  .sb-payment-v2__tip {
    display: block;
    margin: -2px 2px 0;
    font-size: 16px;
  }

  .sb-payment-v2__name{
    gap: 4px;
  }
}

/* Step 7 — Daily Report */
.sb-daily-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

/* Neutralize legacy .sb-daily-report-page / channel / time classes inside v2 */
.sb-daily-v2.sb-daily-report-page .sb-section-label {
  margin: 0;
  color: #222;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-daily-v2.sb-daily-report-page .sb-section-label--preview {
  margin-bottom:11px;
}

.sb-daily-v2 .sb-channel-grid {
  margin-bottom: 0;
}

.sb-daily-v2 .sb-channel-card {
  align-items: center;
  text-align: center;
  gap: 0px;
  padding: 18px 14px 16px;
  border-width: 2px;
}

.sb-daily-v2 .sb-channel-card--selected {
  border-color: #3366CC;
  background: #F5F8FF;
}

.sb-daily-v2 .sb-channel-card--disabled {
  opacity: 0.72;
}

.sb-daily-v2 .sb-channel-name {
  color: #222;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: 22px; /* 110% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-daily-v2 .sb-channel-desc {
  font-size: 16px;
  color: #222;
}

.sb-daily-v2 .sb-channel-icon {
  font-size: 22px;
  margin-bottom: 7px;
}

.sb-daily-v2
  .sb-channel-card:not(.sb-channel-card--selected):not(
    .sb-channel-card--disabled
  )
  .sb-daily-v2__channel-icon {
  background: #EDEDED;
}

.sb-daily-v2 .sb-time-pills {
  margin-bottom: 0;
}

.sb-daily-v2 .sb-time-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
border-radius: 12px;
border: 1px solid #E5E5E5;
background: #FFF;
  padding: 12px 16px;
  font-size: 15px;
  text-align: left;
}

.sb-daily-v2 .sb-time-pill--active {
  background: #f8fbff;
  color: #111827;
  border-color: #2f6fd6;
}

.sb-daily-v2 .sb-time-popular {
  top: -8px;
  left: 12px;
  transform: none;
  font-size: 10px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  padding: 3px 8px;
}

.sb-daily-v2 .sb-custom-time {
  margin: 0;
}

.sb-daily-v2 .sb-report-preview {
  margin-bottom: 0;
}

.sb-daily-v2 .sb-report-card {
  padding: 0;
  border: 1.5px solid #d8e3f5;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.sb-daily-v2 .sb-report-footer {
  margin: 0;
}

.sb-daily-v2 .sb-phone-bar,
.sb-daily-v2 .sb-summary-bar {
  margin-bottom: 0;
}

.sb-daily-v2 .sb-phone-bar__verified {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-daily-v2 .sb-phone-bar__change {
  color: #2f6fd6;
  font-family: var(--sb-font-medium);
  font-weight: normal;
}

.sb-daily-v2 .sb-profile-card {
  overflow: visible;
}

.sb-daily-v2__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 60px 36px;
}

.sb-daily-v2__section {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sb-daily-v2__section-label {
  margin: 0;
  font-size: 17px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-daily-v2__channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
}

.sb-daily-v2__channel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 142px;
  padding: 18px 14px 16px;
  border: 2px solid #EDEDED;
  border-radius: 15px;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.sb-daily-v2__channel .d-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-daily-v2__channel .d-flex > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sb-daily-v2__channel .gap-1 {
  gap: 0;
}

.sb-daily-v2__channel:hover:not(:disabled) {
  border-color: #b8c9e8;
}

.sb-daily-v2__channel.sb-channel-card--selected {
  border-color: #3366CC;
  background: #F5F8FF;
  box-shadow: 0 3px 6px rgba(51, 102, 204, 0.05);
}

.sb-daily-v2__channel.sb-channel-card--disabled {
  opacity: 0.72;
  cursor: not-allowed;
  border-radius: 15px;
  background: #FFF;
}

.sb-daily-v2__channel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  line-height: 1.2;
}

.sb-daily-v2__channel-badge--default {
  background: #fff;
  color: #3366CC;
  border: 1px solid #CFE0FF;
}

.sb-daily-v2__channel-badge--soon {
  background: #FFF9E9;
  color: #FF7F00;
  border: 1px solid #FFD875;
}

.sb-daily-v2__channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EDEDED;
  font-size: 22px;
  line-height: 1;
}

.sb-daily-v2__channel.sb-channel-card--disabled .sb-daily-v2__channel-icon {
  background: #EDEDED;
}

.sb-daily-v2__channel.sb-channel-card--selected .sb-daily-v2__channel-icon {
  background: #3366CC;
}

.sb-daily-v2__channel-icon svg {
  display: block;
  max-width: 22px;
  max-height: 21px;
}

.sb-daily-v2__channel:not(.sb-channel-card--selected) .sb-daily-v2__channel-icon svg path {
  fill: #767676;
}

.sb-daily-v2__channel.sb-channel-card--selected .sb-daily-v2__channel-icon svg path {
  fill: #fff;
}

.sb-daily-v2__channel-name {
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-daily-v2__channel-desc {
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.4;
}

.sb-daily-v2__times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:20px;
  margin: 0;
}

.sb-daily-v2__time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px solid #e5eaf2;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  overflow: visible;
}

.sb-daily-v2__time:hover {
  border-color: #b8c9e8;
}

.sb-daily-v2__time.sb-time-pill--active {
  border-color: #2f6fd6;
  background: #f8fbff; border-width: 2px;
  color: #111827;
}

.sb-daily-v2__time-label {
  color: #222;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 100% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-daily-v2__time-popular {
  position: absolute;
  top: -8px;
  left: 12px;
  transform: none;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.sb-daily-v2__radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #d1d9e6;
  background: #fff;
  flex-shrink: 0;
  position: relative;
}

.sb-daily-v2__radio--checked {
  border-color: #2f6fd6;
}

.sb-daily-v2__radio--checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f6fd6;
}

.sb-daily-v2__custom {
  margin: 0;
  max-width: 220px;
}

.sb-daily-v2__preview {
  margin: 0;
}

.sb-daily-v2__preview-card {
  border: 1.5px solid #d8e3f5;
  border-radius: 16px;
  background: #fff;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.sb-daily-v2__preview-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 16px;
  background: #eef4fd;
  border-bottom: 1px solid #dce8f8;
}

.sb-daily-v2__preview-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1e293b;
  color: #fff;
  font-size: 18px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  flex-shrink: 0;
}

.sb-daily-v2__preview-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-daily-v2__preview-date {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.4;
}

.sb-daily-v2__stats-row {
  display: grid;
  gap: 10px;
  padding: 14px 18px 0;
}

.sb-daily-v2__stats-row--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sb-daily-v2__stats-row--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 14px;
}

.sb-daily-v2__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 12px 14px;
  border-radius: 12px;
  min-width: 0;
}

.sb-daily-v2__stat--sales {
  background: #eef4fd;
}

.sb-daily-v2__stat--transactions {
  background: #f3e8ff;
}

.sb-daily-v2__stat--staff {
  background: #fce7f3;
}

.sb-daily-v2__stat--cash,
.sb-daily-v2__stat--mpesa {
  background: #f0fdf4;
}

.sb-daily-v2__stat-icon {
  font-size: 16px;
  line-height: 1;
}

.sb-daily-v2__stat-label {
  font-size: 12px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.35;
}

.sb-daily-v2__stat-value {
  font-size: 15px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-daily-v2__preview-footer {
  margin: 0;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #eef1f6;
  font-size: 12px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #9ca3af;
  text-align: center;
  line-height: 1.4;
}

.sb-daily-v2__phone {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  row-gap: 10px;
  padding: 16px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid #d5e2fb;
  background: linear-gradient(135deg, #f8faff 0%, #f3f7ff 100%);
  box-shadow: 0 4px 12px rgba(51, 102, 204, 0.07);
}

.sb-daily-v2__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e8efff;
  color: #3366cc;
  flex-shrink: 0;
}

.sb-daily-v2__phone-icon svg {
  width: 17px;
  height: 17px;
}

.sb-daily-v2__phone-text {
  min-width: 0;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #111827;
}

.sb-daily-v2__phone-text strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  font-size: 17px;
  line-height: 1.3;
  color: #111827;
}

.sb-phone-bar__eyebrow,
.sb-phone-bar__hint {
  display: block;
  color: #64748b;
  font-size: 14px;
  line-height: 1.35;
}

.sb-phone-bar__eyebrow {
  margin-bottom: 3px;
  font-family: var(--sb-font-medium);
  color: #475569;
}

.sb-phone-bar__hint {
  margin-top: 4px;
}

.sb-phone-bar__recipient {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.sb-daily-v2__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #E8FFF1;
  border: 1px solid #5BA47C;
  color: #15803d;margin-top: -1px;
  font-size: 11px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1;
  vertical-align: middle;
}

.sb-daily-v2__verified svg {
  display: block;
  flex-shrink: 0;
}

.sb-daily-v2__change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  background: #fff;
  color: #2f6fd6;
  font-size: 14px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  text-decoration: none;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid #bcd0fa;
  line-height: 18px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.sb-daily-v2__change:hover {
  border-color: #3366cc;
  background: #edf3ff;
  transform: translateY(-1px);
}

.sb-daily-v2__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 55px;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0;
border-radius: 10px;
border: 1px solid #D8F3E4;
background: #F4FFF9;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  color: #166534;
}

.sb-daily-v2__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  flex-shrink: 0;
}

.sb-daily-v2__summary-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.sb-daily-v2__summary-text {
  margin: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.5;
  color: #1DA616;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.sb-daily-v2__summary-text strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
}

.sb-daily-v2__error {
  margin: -8px 0 0;
}

.sb-daily-v2__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: #222;
font-weight: 400;
line-height: 16px; /* 114.286% */
  font-size: 18px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.4;
}

.sb-daily-v2__skip svg {
  display: block;
  flex-shrink: 0;
}

.sb-daily-v2__skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-daily-v2__skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-daily-v2__whatsapp {
  margin: 0;
}

.sb-daily-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

@media (max-width: 960px) {
    
  .sb-daily-v2__form {
    padding: 8px 24px 28px;
  }


  .sb-daily-v2__stats-row--three {
    grid-template-columns: 1fr;
  }

  .sb-daily-v2__stats-row--two {
    grid-template-columns: 1fr;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
  .sb-daily-v2__time-label{ font-size: 18px;}
}

@media (max-width: 720px) {
  .sb-daily-v2__channels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .sb-daily-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-daily-v2__channels {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sb-daily-v2 .sb-channel-card {
    align-items: center;
    text-align: left;
    gap: 10px;
    padding: 12px 14px;
    padding-right: 80px;
  }

  .sb-daily-v2 .sb-channel-name {
    text-align: left;
    font-size: 16px;
    line-height: 22px;
  }

  .sb-daily-v2 .sb-channel-desc {
    font-size: 13px;
    color: #666;
    text-align: left;
  }

  .sb-daily-v2 .sb-channel-icon {
    margin-bottom: 0;
  }

  .sb-daily-v2__channel {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 58px;
    padding: 12px 14px;
    padding-right: 80px;
    text-align: left;
  }

  .sb-daily-v2__channel .d-flex {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
  }

  .sb-daily-v2__channel .d-flex > div {
    align-items: flex-start;
    gap: 0px;
    min-width: 0;
  }

  .sb-daily-v2__channel .gap-1 {
    gap: 0.50rem;
  }

  .sb-daily-v2__channel-badge {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
  }

  .sb-daily-v2__channel-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .sb-daily-v2__channel-icon svg {
    max-width: 18px;
    max-height: 18px;
  }

  .sb-daily-v2__channel-name {
    font-size: 16px;
    white-space: nowrap;
  }

  .sb-daily-v2__channel-desc {
    font-size: 13px;
    color: #666;
    min-width: 0;
  }

  .sb-daily-v2__change {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 42px;
    justify-content: center;
  }

  .sb-daily-v2__phone {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    padding: 16px;
  }

  .sb-daily-v2__phone-text strong {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .sb-phone-bar__recipient {
    align-items: flex-start;
  }
}

/* Step 8 — Add to Home Screen (PWA) */
.sb-pwa-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-pwa-v2__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 60px 36px;
}

.sb-pwa-v2__hero {
  margin: 10px  0 0 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.sb-pwa-v2__hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
}

.sb-pwa-v2__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.sb-pwa-v2__feature {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 1px;
  min-height: 78px;
  padding: 14px 18px;
border-radius: 15px;
border: 1px solid #E0E9FB;
background: #FFF;
  background: #fff;
  text-align: left;
}

.sb-pwa-v2__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #EFF4FF;
  color: #2f6fd6;
  flex-shrink: 0;
}

.sb-pwa-v2__feature-icon svg {
  display: block;
}

.sb-pwa-v2__feature-title {
  color: #222;
font-size: 20px;
font-style: normal;
line-height: 22px; /* 110% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-pwa-v2__feature-desc {
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #666;
  line-height: 1.4;
}

.sb-pwa-v2__instructions {
  border: 1px solid #D8E3F5;
  border-radius: 15px;
  background: #fff;
  padding: 18px;
  overflow: hidden;
}

.sb-pwa-v2__tabs.sb-device-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 22px;
  padding: 4px;
border-radius: 12px;
border: 1px solid #E0E9FB;
background: #F6F9FF;
}

.sb-pwa-v2 .sb-device-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: none;
  border-radius: 9px;
  background: transparent;

text-align: center;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 22px; /* 100% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.sb-pwa-v2 .sb-device-tab--active {
  background: #2f6fd6;
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(47, 111, 214, 0.28);
}

.sb-pwa-v2__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sb-pwa-v2__tab-icon svg {
  display: block;
}

.sb-pwa-v2__steps.sb-pwa-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sb-pwa-v2__steps li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-pwa-v2__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EF626C;
  color: #fff;
  font-size: 16px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  line-height: 1;
  flex-shrink: 0;
}

.sb-pwa-v2__step-text {
  color: #222;
font-weight: 400;
line-height: 28px; /* 140% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.5;
  padding-top: 0;
  color: #222;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
}

.sb-pwa-v2__step-text strong {
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #111827;
}

.sb-pwa-v2__next.sb-next-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row;
  margin: 0;
  min-height: 79px;
  padding: 14px 18px;
border-radius: 15px;
border: 1px solid #E0E9FB;
background: #F6F9FF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
}

.sb-pwa-v2__next-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E7EFFF;
  color: #3366CC;
  flex-shrink: 0;
}

.sb-pwa-v2__next-icon svg {
  display: block;
}

.sb-pwa-v2__next-text {
  min-width: 0;
}

.sb-pwa-v2__next-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #222;
  line-height: 1.35;
}

.sb-pwa-v2__next-desc {
  margin: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.45;
}

.sb-pwa-v2__skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  color: #222;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 114.286% */
  font-family: var(--sb-font-medium);
  font-weight: normal;
  cursor: pointer;
  line-height: 1.4;
}

.sb-pwa-v2__skip svg {
  display: block;
  flex-shrink: 0;
}

.sb-pwa-v2__skip:hover:not(:disabled) {
  color: #6b7280;
}

.sb-pwa-v2__skip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.sb-pwa-v2__whatsapp {
  margin: 0;
}

.sb-pwa-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

/* Step 8 — Branch QR Code (phase 2) */
.sb-qr-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-qr-v2__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 60px 36px;
}

.sb-qr-v2__display.sb-qr-card {
  margin: 0;
  padding: 28px 24px 22px;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #60a5fa 0%, #a78bfa 45%, #f472b6 100%) border-box;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.sb-qr-v2__code-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.sb-qr-v2__image.sb-qr-image {
  width: 200px;
  height: 200px;
  margin: 0;
}

.sb-qr-v2__business.sb-qr-business {
  margin: 0 0 8px;
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.sb-qr-v2__url.sb-qr-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #2f6fd6;
  word-break: break-all;
}

.sb-qr-v2__location.sb-qr-location {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-qr-v2__actions.sb-qr-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.sb-qr-v2__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-height: 98px;
  padding: 14px 12px;
  border-radius: 15px;
  border: 1px solid #E0E9FB;
  background: #F5F8FF;
  color: #111827;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.sb-qr-v2__action:hover {
  border-color: #b8c9e8;
  background: #f8fbff;
}

.sb-qr-v2__action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E4EDFF;
  color: #3366CC;
}

.sb-qr-v2__action-icon svg {
  display: block;
}

.sb-qr-v2__action-label {
color: #222;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 122.222% */
  font-family: var(--sb-font-medium);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
  text-align: center;
}

.sb-qr-v2__info-grid.sb-qr-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
}

.sb-qr-v2__info-card.sb-qr-info-card {
  margin: 0;
  min-height: 150px;
  padding: 20px;
  border: 1px solid #E5E5E5;
  border-radius: 15px;
  background: #fff;
  text-align: left;
}

.sb-qr-v2__info-content {
  display: block;
  min-width: 0;
}

.sb-qr-v2__info-card strong {
  display: block;
  margin: 3px 0 2px;
  color: #222;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 22px; /* 122.222% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
}

.sb-qr-v2__info-card p {
  margin: 0;
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 20px;
}

.sb-qr-v2__info-icon.sb-qr-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
border-radius: 64.853px;
background: #EFF4FF;
  color: #3366CC;
}

.sb-qr-v2__info-icon svg {
  display: block;
}

.sb-qr-v2__whatsapp {
  margin: 0;
}

.sb-qr-v2__footer {
  margin-top: 4px;
  padding-top: 4px;
}

.sb-qr-v2 .sb-profile-footer__back {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

@media (max-width: 960px) {
  .sb-pwa-v2__form,
  .sb-qr-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-pwa-v2__features {
    grid-template-columns: 1fr;
  }

  .sb-qr-v2__actions,
  .sb-qr-v2__info-grid {
    gap: 12px;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .sb-qr-v2__actions,
  .sb-qr-v2__info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .sb-pwa-v2__form,
  .sb-qr-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-pwa-v2__hero-image {
    max-height: 220px;
  }
}

/* Step 9 — Choose Your Plan */
.sb-plan-v2 .sb-profile-card__intro {
  padding-bottom: 4px;
}

.sb-plan-v2__almost-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #38B000;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 20px; 
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.25;
}

.sb-plan-v2__almost-star {
  color: #22c55e;
  font-size: 12px;
  line-height: 1;
}

.sb-plan-v2__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 60px 36px;
}

.sb-plan-v2__grid.sb-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 10px 0 0 0;
}

.sb-plan-v2__card.sb-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 22px 18px 18px;
  border: 1.5px solid #e5eaf2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.sb-plan-v2__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  text-align: center;
}

.sb-plan-v2__card--blue {
  border-top: 4px solid #2f6fd6;
}

.sb-plan-v2__card--red {
  border-top: 4px solid #e85d6f;
}

.sb-plan-v2__card--gold {
  border-top: 4px solid #f59e0b;
}

.sb-plan-v2__card.sb-plan-card--selected.sb-plan-v2__card--blue {
  border-color: #2f6fd6;
  box-shadow:
    0 0 0 1px rgba(47, 111, 214, 0.12),
    0 4px 16px rgba(47, 111, 214, 0.1);
}

.sb-plan-v2__card.sb-plan-card--selected.sb-plan-v2__card--red {
  border-color: #e85d6f;
  box-shadow:
    0 0 0 1px rgba(232, 93, 111, 0.12),
    0 4px 16px rgba(232, 93, 111, 0.1);
}

.sb-plan-v2__card.sb-plan-card--selected.sb-plan-v2__card--gold {
  border-color: #f59e0b;
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.12),
    0 4px 16px rgba(245, 158, 11, 0.1);
}

.sb-plan-v2__card.sb-plan-card--popular {
  margin-top: 12px;
}

.sb-plan-v2__selected-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #2f6fd6;
  line-height: 1;
}

.sb-plan-v2__card--red.sb-plan-card--selected .sb-plan-v2__selected-mark {
  color: #e85d6f;
}

.sb-plan-v2__card--gold.sb-plan-card--selected .sb-plan-v2__selected-mark {
  color: #f59e0b;
}

.sb-plan-v2__ribbon.sb-plan-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  white-space: nowrap;
  z-index: 2;
}

.sb-plan-v2__ribbon.sb-plan-badge--teal {
  background: #e85d6f;
  color: #fff;
}

.sb-plan-v2__ribbon.sb-plan-badge--gold {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

.sb-plan-v2__icon.sb-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #eef4fd;
  font-size: 24px;
  margin: 0 auto 12px;
  line-height: 1;
}

.sb-plan-v2__name.sb-plan-name {
  margin: 0 0 12px;
  font-size: 16px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-plan-v2__price.sb-plan-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 0 6px;
  line-height: 1.3;
}

.sb-plan-v2__price-amount {
  font-size: 28px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.sb-plan-v2__card--blue .sb-plan-v2__price-amount {
  color: #2f6fd6;
}

.sb-plan-v2__card--red .sb-plan-v2__price-amount {
  color: #e85d6f;
}

.sb-plan-v2__card--gold .sb-plan-v2__price-amount {
  color: #d97706;
}

.sb-plan-v2__price-interval {
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.4;
}

.sb-plan-v2__price strong {
  display: none;
}

.sb-plan-v2__setup.sb-plan-setup {
  margin: 0 0 12px;
  font-size: 13px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #16a34a;
  line-height: 1.4;
}

.sb-plan-v2__desc.sb-plan-desc {
  margin: 0 0 18px;
  flex: 1;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.5;
  max-width: 220px;
}

.sb-plan-v2__select.sb-plan-select-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  align-self: stretch;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid #e5eaf2;
  background: #fff;
  color: #6b7280;
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  text-align: center;
}

.sb-plan-v2__card.sb-plan-card--selected .sb-plan-v2__select {
  background: #2f6fd6;
  border-color: #2f6fd6;
  color: #fff;
}

.sb-plan-v2__card--red.sb-plan-card--selected .sb-plan-v2__select {
  background: #e85d6f;
  border-color: #e85d6f;
}

.sb-plan-v2__card--gold.sb-plan-card--selected .sb-plan-v2__select {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #fff;
}

.sb-plan-v2__select-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sb-plan-v2__select-check svg {
  display: block;
}

.sb-plan-v2__sms.sb-plan-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: inherit;
  margin: 0;
  padding: 16px 20px;
  border-radius: 15px;
  background: #F5F8FF;
  border: 1px solid #D8E3F5;
  color: #374151;
}

.sb-plan-v2__sms-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E4EDFF;
  flex-shrink: 0;
  line-height: 0;
}

.sb-plan-v2__sms-icon svg {
  display: block;
}

.sb-plan-v2__sms-text {
  color: #222;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
 color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
  font-weight: normal;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sb-plan-v2__sms-text strong {
  font-family: var(--sb-font-semibold);
  font-weight: normal; font-size: 18px;
  color: #222;
}

.sb-plan-v2__addons.sb-plan-addons-section {
  margin: 0;
border-radius: 15px;
border: 1px solid #FFE3C6;
background: #FFF;
box-shadow: 0 3px 6px 0 rgba(51, 102, 204, 0.05);
  overflow: hidden;
  background: #fff;
}

.sb-plan-v2__addons-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 15px 15px 0 0;
border: 1px solid #FFE3C6;
background: #FFF5EB;
}

.sb-plan-v2__addons-star {
  color: #f59e0b;
  font-size: 16px;
  line-height: 1.4;
  flex-shrink: 0;
}

.sb-plan-v2__addons-title.sb-plan-addons-title {
  margin: 0 0 2px;
  font-size: 17px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.sb-plan-v2__addons-subtitle.sb-plan-addons-subtitle {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.35;
}

.sb-plan-v2__addon.sb-plan-addon-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  margin: 0;
  padding: 16px 18px;
  border: none;
  border-top: 1px solid #eef1f6;
  border-radius: 0;
  background: #fff;
}

.sb-plan-v2__addon.sb-plan-addon-card--selected {
  background: #f8fbff;
}

.sb-plan-v2__addon-badge.sb-plan-badge--purple {
  position: static;
  transform: none;
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f3e8ff;
  color: #7c3aed;
  border: 1px solid #e9d5ff;
  font-size: 11px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-plan-v2__addon-icon.sb-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eef4fd;
  font-size: 20px;
  margin: 0;
  flex-shrink: 0;
}

.sb-plan-v2__addon-head.sb-plan-addon-head h3 {
  margin: 0 0 4px;
 color: #222;
font-size: 18px;
font-style: normal;
  font-family: var(--sb-font-semibold);
line-height: normal;
  color: #111827;
}

.sb-plan-v2__addon-head.sb-plan-addon-head p {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
color: #222;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}

.sb-plan-v2__addon-price.sb-plan-addon-price {
  margin: 10px 0 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.45;
}

.sb-plan-v2__addon-price strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #D3374E;
}

.sb-plan-v2__card--red .sb-plan-v2__icon {
  background: #fef2f2;
}

.sb-plan-v2__card--gold .sb-plan-v2__icon {
  background: #fffbeb;
}

.sb-plan-v2__check.sb-plan-addon-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

.sb-plan-v2__check-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sb-plan-v2__check-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid #d1d9e6;
  background: #fff;
  color: transparent;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.sb-plan-v2__check-input:checked + .sb-plan-v2__check-box {
  background: #2f6fd6;
  border-color: #2f6fd6;
  color: #fff;
}

.sb-plan-v2__check-box svg {
  display: block;
}

.sb-plan-v2__qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sb-plan-v2__qty-label {
  font-size: 10px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #9ca3af;
  letter-spacing: 0.06em;
  line-height: 1;
}

.sb-plan-v2__qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #e5eaf2;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.sb-plan-v2__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: #f9fafb;
  color: #374151;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  line-height: 1;
}

.sb-plan-v2__qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sb-plan-v2__qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 0 4px;
  font-size: 15px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.sb-plan-v2__bundled.sb-plan-bundled-box {
  margin: 0;
}

.sb-plan-v2__summary.sb-price-summary {
  margin: 0;
  padding: 18px 20px;
  border: 1.5px solid #e5eaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.sb-plan-v2__summary .sb-price-summary__lines {
  border-bottom: 1px solid #e5eaf2;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.sb-plan-v2__summary .sb-price-summary__line {
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-plan-v2__summary .sb-price-summary__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
}

.sb-plan-v2__line-check {
  flex-shrink: 0;
}

.sb-plan-v2__summary .sb-price-summary__amount {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
}

.sb-plan-v2__summary .sb-price-summary__line--onetime {
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-plan-v2__summary
  .sb-price-summary__line--onetime
  .sb-price-summary__amount {
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
}

.sb-plan-v2__summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5eaf2;
}

.sb-plan-v2__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eef4fd;
  color: #2f6fd6;
  flex-shrink: 0;
}

.sb-plan-v2__summary-icon svg {
  display: block;
}

.sb-plan-v2__summary-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.sb-plan-v2__summary-plan-amount {
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
  white-space: nowrap;
}

.sb-plan-v2__summary-total.sb-price-summary__total {
  margin: 0;
  padding-top: 4px;
  font-size: 18px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.sb-plan-v2__summary-total .sb-price-summary__total-amount {
  font-size: 22px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #2f6fd6;
}

.sb-plan-v2__summary .sb-price-summary__final-row {
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.sb-plan-v2__summary .sb-price-summary__final-amount {
  font-size: 24px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #0d7c7f;
}

.sb-plan-v2__summary .sb-price-summary__final-note {
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  text-align: right;
}

.sb-plan-v2__summary-setup.sb-price-summary__setup {
  margin-top: 12px;
  background: #fff;
  border: 1px solid #e5eaf2;
  font-family: var(--sb-font-regular);
  font-weight: normal;
}

.sb-plan-v2__summary-setup span:last-child {
  font-family: var(--sb-font-semibold);
  font-weight: normal;
}

.sb-plan-v2__compare.sb-plan-feature-compare {
  margin: 0;
  gap: 14px;
}

.sb-plan-v2__feature-card.sb-plan-feature-card {
  border-radius: 14px;
  border-width: 1.5px;
}

.sb-plan-v2__feature-card .sb-plan-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 187.5% */
}

.sb-plan-v2__feature-head-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.sb-plan-v2__feature-x {
  display: block;
  width: 40px;
  height: 40px;
  background: transparent;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .sb-plan-feature-card--included .sb-plan-feature-card__toggle,
  .sb-plan-feature-card--excluded .sb-plan-feature-card__toggle {
    cursor: pointer;
  }

  .sb-plan-feature-card--included .sb-plan-feature-card__chevron,
  .sb-plan-feature-card--excluded .sb-plan-feature-card__chevron {
    display: inline-flex;
  }

  .sb-plan-feature-card__chevron--excluded {
    color: #ef626c;
  }

  .sb-plan-feature-card--included.sb-plan-feature-card--open .sb-plan-feature-card__chevron,
  .sb-plan-feature-card--excluded.sb-plan-feature-card--open .sb-plan-feature-card__chevron {
    transform: rotate(180deg);
  }

  .sb-plan-feature-card--included:not(.sb-plan-feature-card--open) .sb-plan-feature-card__head,
  .sb-plan-feature-card--excluded:not(.sb-plan-feature-card--open) .sb-plan-feature-card__head {
    border-radius: 15px;
    border-bottom: 0;
  }

  .sb-plan-feature-card--included:not(.sb-plan-feature-card--open) .sb-plan-feature-card__body,
  .sb-plan-feature-card--excluded:not(.sb-plan-feature-card--open) .sb-plan-feature-card__body {
    display: none;
  }

  .sb-plan-feature-card--included.sb-plan-feature-card--open .sb-plan-feature-card__body,
  .sb-plan-feature-card--excluded.sb-plan-feature-card--open .sb-plan-feature-card__body {
    display: grid;
  }

  .sb-plan-feature-card--included .sb-plan-feature-card__head strong,
  .sb-plan-feature-card--excluded .sb-plan-feature-card__head strong {
    font-size: 18px;
  }

  .sb-plan-feature-card__intro {
    font-size: 16px;
    font-weight: bold;
  }
}

.sb-plan-v2__help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-radius: 14px;
  background: #ecfdf5;
  border: 1.5px solid #bbf7d0;
}

.sb-plan-v2__help-text {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sb-plan-v2__help-text p {
  margin: 0;
color: #222;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.5;
}

.sb-plan-v2__help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 18px;
  border-radius: 30px;
border: 1px solid #38B000;
  background: #fff;
  color: #15803d;
  font-size: 14px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.sb-plan-v2__help-btn:hover {
  background: #f0fdf4;
}

.sb-plan-v2__error {
  margin: 0;
}

.sb-plan-v2__footer.sb-profile-footer--triple {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 20px;
  margin-top: 0;
  padding-top: 12px;
}

.sb-plan-v2__footer .sb-profile-footer__back {
  min-width: 100px;
  padding: 0 16px;
  justify-self: start;
}

.sb-plan-v2__footer .sb-profile-footer__continue {
  min-width: 209px;
}

.sb-plan-v2__help-choose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 209px;
  min-height: 54px;
  padding: 10px 20px;
border-radius: 10px;
border: 1px solid #38B000;
background: #FFF;
  color: #15803d;
  font-size: 15px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  text-decoration: none;
  justify-self: end;
  white-space: nowrap;
  color: #38B000;
text-align: right;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}

.sb-plan-v2__help-choose:hover {
  background: #f0fdf4;
}

.sb-plan-v2__help-choose--in-form {
  display: none;
}

.sb-plan-v2__help-choose-icon {
  font-size: 16px;
  line-height: 1;
}

/* Neutralize legacy plan classes inside v2 */
.sb-plan-v2.sb-choose-plan-page .sb-card-title,
.sb-plan-v2.sb-choose-plan-page .sb-card-subtitle {
  text-align: center;
}

.sb-plan-v2 .sb-plan-card--selected {
  background: #fff;
}

.sb-services-v2__items-section .sb-services-v2__section-label{ margin-bottom: 0;}

@media (max-width: 1199px) {
  .sb-daily-v2__channels, .sb-daily-v2__times{ gap: 10px;}
  .dr-preview .sb-daily-v2__preview-title{ font-size: 18px !important;}
 
  .onboard-header__logo-image {
    width: 170px;
  }

    .sb-onboarding-progress__line, .sb-onboarding-progress__dot {
	display: none;
}
    .sb-services-v2__accordion-title{ font-size: 18px;}
  .sb-profile-form {
    gap: 16px;
  }
  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 40.193px;
    height: 40.193px;
    border-radius: 8px;
  }
  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon svg {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }
  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__product {
    font-size: 30px;
  }
  .sb-top-header__delytt svg {
    max-height: 32px;
    height: auto;
  }
  .sb-template-v2__name{ font-size: 18px; line-height: 120%;}
  .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {

	grid-template-columns: 300px minmax(0, 1fr);

}
.sb-plan-v2__form {
	padding: 8px 30px 36px;
}
}
@media (max-width: 991px) {
  .sb-onboarding-topbar .sb-top-header--onboarding .sb-top-header__logo {
    justify-self: center;
    align-self: center;
    z-index: 2;
  }
      .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
	grid-template-columns: 100% minmax(0, 1fr);
}
/* .sb-qr-v2__action{ min-height: inherit;}
.sb-qr-v2__info-card.sb-qr-info-card{ min-height:  inherit;} */
}

@media (max-width: 960px) {
  .sb-plan-v2__form {
    padding: 8px 24px 28px;
  }

  .sb-plan-v2__grid.sb-plan-grid:not(.plan-cards-ui) {
	grid-template-columns: 1fr;
	max-width: 423px;
	gap: 22px;
	margin: 0 auto;
}
  .sb-plan-v2__card.sb-plan-card--popular {
    margin-top: 12px;
  }

  .sb-profile-card__title {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .sb-onboarding-v2:has(.sb-plan-v2) {
    --sb-sticky-footer-height: 88px;
  }
}
@media (max-width: 767px) {
    .sb-profile-card__subtitle{font-size: 15px;line-height: 21px;margin-bottom:0px;}
    .sb-biztype-form{ gap: 15px;}

    .sb-landing-subtitle{ font-size: 16px; line-height: 120%;}
    .sb-landing-note{ padding: 17px 5px 7px !important;}

    .sb-pwa-v2__step-text{ font-size: 16px;}
    .sb-pwa-v2 .sb-device-tab{ font-size:18px;}

  .sb-profile-footer {
    margin-top: 0;
  }
  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__product {
    font-size: 26px;
  }
  .sb-top-header__delytt svg {
    max-height: 26px;
    height: auto;
  }
  .sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon {
width: 31.193px;
    height: 31.193px;
    border-radius: 8px;
  }
  .sb-onboarding-progress__center{ margin: 5px 0;}
  .sb-onboarding-progress__name{ font-size: 14px;}
  .sb-top-header__logo{ gap: 0;}
  .sb-onboarding-v2 .sb-top-header__logout {
    padding: 7px 19px;
    font-size: 16px;
  }
  .sb-onboarding-progress__badge{ font-size: 16px;}
}

@media (max-width: 767px) {
  .sb-verify-resend {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .sb-plan-v2__form {
    padding: 8px 20px 24px;
  }

  .sb-plan-v2__help-choose--in-form {
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 4px auto 8px;
    align-self: center;
    justify-self: center;
  }

  .sb-plan-v2__help-choose--in-footer {
    display: none !important;
  }

  .sb-plan-v2__footer.sb-profile-footer--triple {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .sb-plan-v2__footer.sb-profile-footer--triple .sb-profile-footer__back {
    flex: 0 0 30%;
    width: 30%;
    min-width: 0;
    justify-content: center;
    justify-self: auto;
    padding: 0;
  }

  .sb-plan-v2__footer.sb-profile-footer--triple .sb-profile-footer__continue {
    flex: 0 0 70%;
    width: 70%;
    min-width: 0;
  }

  .sb-onboarding-v2:has(.sb-plan-v2) {
    --sb-sticky-footer-height: 88px;
  }

  .sb-plan-v2__addon.sb-plan-addon-card {
    grid-template-columns: 1fr;
  }

  .sb-plan-v2__qty,
  .sb-plan-v2__check {
    justify-self: start;
  }

  .sb-plan-v2__help {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-plan-v2__help-btn {
    width: 100%;
  }

  .sb-setup-back {
    left: 5px;
    top: 18px;
  }
  .sb-setup-back svg {
    max-width: 10px;
    height: auto;
  }
}

/* Daily Report preview – Step 7 (isolated dr-preview-* styles) */
.dr-preview {
  width: 100%;
  max-width: 100%;
  overflow: visible;
  padding-bottom: 8px;
}

.dr-preview__heading {
  margin: 0 0 9px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.4;
}

.dr-preview__shell {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dbe4f3;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  max-width: 500px;
}

.dr-preview__card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.dr-preview .sb-daily-v2__preview-card,
.dr-preview .sb-report-card {
  border: 1px solid #dff1e2;
  border-radius: 15px;
  background: #f2fcf4;
  padding: 18px 22px;
  overflow: hidden;
  box-shadow: none;
}

.dr-preview__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dr-preview .sb-daily-v2__preview-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  background: transparent;
  border-bottom: none;
}

.dr-preview__row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.dr-preview__row--title {
  align-items: flex-start;
}

.dr-preview__icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}

.dr-preview .sb-daily-v2__stat-icon,
.dr-preview .sb-daily-v2__preview-date-icon {
  flex-shrink: 0;
  width: 20px;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  display: inline-flex;
  align-items: center;
  line-height: 26px;
}

.dr-preview__title {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
}

.dr-preview .sb-daily-v2__preview-title {
  margin: 0;
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
}

.dr-preview__date {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
}

.dr-preview .sb-daily-v2__preview-date {
  display: block;
  margin: 0;
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
}

.dr-preview__divider {
  height: 1px;
  margin: 11px 0;
  background: #bfeccd;
  border: 0;
}

.dr-preview__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dr-preview .sb-daily-v2__stats-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  grid-template-columns: none;
}

.dr-preview .sb-daily-v2__stats-row--three,
.dr-preview .sb-daily-v2__stats-row--two {
  grid-template-columns: none;
  padding: 0;
}

.dr-preview .sb-daily-v2__stat {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  min-width: 0;
  background: transparent;
}

.dr-preview .sb-daily-v2__stat--sales,
.dr-preview .sb-daily-v2__stat--transactions,
.dr-preview .sb-daily-v2__stat--staff,
.dr-preview .sb-daily-v2__stat--cash,
.dr-preview .sb-daily-v2__stat--mpesa {
  background: transparent;
}

.dr-preview__line {
  margin: 0;
  min-width: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
  word-break: break-word;
}

.dr-preview__label {
  margin: 0;
}

.dr-preview .sb-daily-v2__stat-label {
  display: inline;
  margin: 0;
 color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #1a202c;
}

.dr-preview__value {
  display: inline;
}

.dr-preview .sb-daily-v2__stat-value {
  display: inline;
  font-size: 18px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #1a202c;
  line-height: 1.5;
}

.dr-preview__line--plain .dr-preview__value,
.dr-preview__line--plain .sb-daily-v2__stat-value {
  font-family: var(--sb-font-regular);
  font-weight: normal;
}

.dr-preview__footer {
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: none;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #4a5568;
  text-align: left;
  line-height: 1.5;
}

.dr-preview .sb-daily-v2__preview-footer,
.dr-preview .sb-report-footer {
  margin: 0;
  padding: 0;
  background: transparent;
  border-top: none;
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 200% */
  font-family: var(--sb-font-regular);
  font-weight: normal;
  text-align: left;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .dr-preview__shell {
    padding: 14px;
    border-radius: 16px;
  }

  .dr-preview .sb-daily-v2__preview-card,
  .dr-preview .sb-report-card {
    padding: 20px;
  }

  .dr-preview__heading {
    font-size: 15px;
    margin-bottom: 12px;
  }

  .dr-preview__title,
  .dr-preview .sb-daily-v2__preview-title,
  .dr-preview__date,
  .dr-preview .sb-daily-v2__preview-date,
  .dr-preview__line,
  .dr-preview .sb-daily-v2__stat-label,
  .dr-preview .sb-daily-v2__stat-value,
  .dr-preview__footer,
  .dr-preview .sb-daily-v2__preview-footer {
    font-size: 18px;
  }

  .dr-preview__icon,
  .dr-preview .sb-daily-v2__stat-icon,
  .dr-preview .sb-daily-v2__preview-date-icon {
    font-size: 17px;
    width: 18px;
  }
}

@media (max-width: 767px) {
  .dr-preview__shell {
    padding: 12px;
    border-radius: 14px;
  }

  .dr-preview .sb-daily-v2__preview-card,
  .dr-preview .sb-report-card {
    padding: 16px;
    border-radius: 12px;
  }

  .dr-preview__heading {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .dr-preview__head,
  .dr-preview .sb-daily-v2__preview-head {
    gap: 10px;
  }

  .dr-preview__section,
  .dr-preview .sb-daily-v2__stats-row {
    gap: 10px;
  }

  .dr-preview__row,
  .dr-preview .sb-daily-v2__stat {
    gap: 8px;
  }

  .dr-preview__divider {
    margin: 14px 0;
  }

  .dr-preview__title,
  .dr-preview .sb-daily-v2__preview-title,
  .dr-preview__date,
  .dr-preview .sb-daily-v2__preview-date,
  .dr-preview__line,
  .dr-preview .sb-daily-v2__stat-label,
  .dr-preview .sb-daily-v2__stat-value,
  .dr-preview__footer,
  .dr-preview .sb-daily-v2__preview-footer {
    font-size: 14px;
    line-height: 1.45;
  }

  .dr-preview__icon,
  .dr-preview .sb-daily-v2__stat-icon,
  .dr-preview .sb-daily-v2__preview-date-icon {
    font-size: 16px;
    width: 18px;
  }
}

/* Popular ribbon – time card (isolated sb-popular-ribbon-* styles) */
.sb-popular-ribbon.sb-time-popular,
.sb-popular-ribbon.sb-daily-v2__time-popular {
top: -6px;
  left: -4px;
  width: 52px;
  height: 50px;
  transform: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: transparent;
  font-size: 0;
  font-weight: normal;
  white-space: normal;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.sb-daily-v2__time:has(.sb-popular-ribbon) {
  overflow: visible;
}

.sb-popular-ribbon__svg {
  display: block;
  width: 52px;
  height: 50px;
  pointer-events: none;
}

@media (max-width: 960px) {
  .sb-popular-ribbon.sb-time-popular,
  .sb-popular-ribbon.sb-daily-v2__time-popular {
    width: 48px;
    height: 46px;
  }

  .sb-popular-ribbon__svg {
    width: 48px;
    height: 46px;
  }
}

@media (max-width: 767px) {
  .sb-popular-ribbon.sb-time-popular,
  .sb-popular-ribbon.sb-daily-v2__time-popular {
    width: 44px;
    height: 42px;
  }

  .sb-popular-ribbon__svg {
    width: 44px;
    height: 42px;
  }
}

/* Branch QR preview – Step 8 (isolated branch-qr-preview-* styles) */
.branch-qr-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

.branch-qr-preview__card {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 24px;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #5b9fd8 0%, #c084d8 52%, #f08a9a 100%) border-box;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  text-align: center;
}

.branch-qr-preview .sb-qr-v2__display.sb-qr-card {
  position: relative;
  width: 370px;
  height: 370px;
  max-width: 100%;
  margin: 0;
  padding: 19px;
  border: 4px solid transparent;
  border-radius: 38px;
  background:
    linear-gradient(135deg, #F2F5FC 0%, #F9F2F6 100%) padding-box,
    linear-gradient(155deg, #3366CC 0%, #3366CC 28%, #8D69B0 60%, #F05B70 100%) border-box;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  text-align: center;
  overflow: visible;
  box-sizing: border-box;
}

.branch-qr-preview__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.branch-qr-preview .sb-qr-v2__code-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 22px;
  border-radius: 30px;
  background: #fff;
  box-sizing: border-box;
}

.branch-qr-preview__image {
  display: block;
width: 290px;
  height: 290px;
  max-width: 100%;
  margin: 0;
}

.branch-qr-preview .sb-qr-v2__image.sb-qr-image {
  width: 274px;
  height: 274px;
  max-width: 100%;
  margin: 0;
}

.branch-qr-preview__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: 20px;
  text-align: center;
}

.branch-qr-preview__business {
  margin: 0 0 10px;
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.branch-qr-preview .sb-qr-v2__business.sb-qr-business {
  margin: 0 0 2px;
  color: #222;
text-align: center;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: normal;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.branch-qr-preview__url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
color: #36C;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #3366cc;
  line-height: 1.4;
  word-break: break-all;
}

.branch-qr-preview .sb-qr-v2__url.sb-qr-url {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 18px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #3366cc;
  line-height: 1.4;
  word-break: break-all;
}

.branch-qr-preview__url-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #3366cc;
  line-height: 0;
}

.branch-qr-preview .sb-qr-v2__url-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #3366cc;
  line-height: 0;
  font-size: 0;
}

.branch-qr-preview__url-icon svg,
.branch-qr-preview .sb-qr-v2__url-icon svg {
  display: block;
  width: 10px;
  height: 10px;
}

.branch-qr-preview__badge {
  display: inline-block;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f9fafb;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #4b5563;
  line-height: 1.4;
}

.branch-qr-preview .sb-qr-v2__location.sb-qr-location {
  display: inline-block;
  margin: 0;
  min-height: 30px;
  padding: 4px 20px;
  border: 1px solid #D8E3F5;
  border-radius: 999px;
  background: #F5F8FF;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.4;
}

@media (max-width: 960px) {
  .branch-qr-preview__card,
  .branch-qr-preview .sb-qr-v2__display.sb-qr-card {
    padding: 20px;
    border-radius: 18px;
  }
  .branch-qr-preview .sb-qr-v2__display.sb-qr-card{height: 270px;width: 270px;}

  .branch-qr-preview__image,
  .branch-qr-preview .sb-qr-v2__image.sb-qr-image {
    width: 180px;
    height: 180px;
  }

  .branch-qr-preview__meta {
    margin-top: 18px;
  }

  .branch-qr-preview__business,
  .branch-qr-preview .sb-qr-v2__business.sb-qr-business {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .branch-qr-preview__url,
  .branch-qr-preview .sb-qr-v2__url.sb-qr-url {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

@media (max-width: 767px) {
  .branch-qr-preview__card,
  .branch-qr-preview .sb-qr-v2__display.sb-qr-card {
    padding: 16px;
    border-radius: 16px;
  }

  .branch-qr-preview__image,
  .branch-qr-preview .sb-qr-v2__image.sb-qr-image {
    width: 160px;
    height: 160px;
  }

  .branch-qr-preview__meta {
    margin-top: 16px;
  }

  .branch-qr-preview__business,
  .branch-qr-preview .sb-qr-v2__business.sb-qr-business {
    font-size: 17px;
  }

  .branch-qr-preview__url,
  .branch-qr-preview .sb-qr-v2__url.sb-qr-url {
    font-size: 13px;
    gap: 6px;
  }

  .branch-qr-preview__url-icon,
  .branch-qr-preview .sb-qr-v2__url-icon {
    width: 20px;
    height: 20px;
  }

  .branch-qr-preview__badge,
  .branch-qr-preview .sb-qr-v2__location.sb-qr-location {
    font-size: 12px;
    padding: 5px 12px;
  }
}

/* Plan cards – Step 9 (isolated plan-cards-ui-* styles) */
.plan-cards-ui {
  --plan-badge-height: 33px;
  --plan-badge-overlap: 16px;
  --plan-card-color-block-height: 140px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  overflow: visible;
}

.plan-cards-ui__item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: var(--plan-badge-overlap);
  overflow: visible;
}

.plan-cards-ui__item--popular,
.plan-cards-ui__item--value {
  padding-top: var(--plan-badge-overlap);
}

.plan-cards-ui__badge,
.plan-cards-ui .sb-plan-v2__ribbon.sb-plan-badge {
  position: absolute;
  top:22px;
  left: 50%;
  z-index: 4;
  display: block;
  padding: 0; z-index: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0;
  line-height: 0;
  transform: translate(-50%, -100%);
  pointer-events: none;
}

.plan-cards-ui__badge-svg {
  display: block;
  width: auto;
  height: var(--plan-badge-height);
  max-width: 100%;
}

.plan-cards-ui__badge--popular .plan-cards-ui__badge-svg {
  width: 125px;
}

.plan-cards-ui__badge--value .plan-cards-ui__badge-svg {
  width: 110px;
}

.plan-cards-ui__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 342px;
  padding: 18px 20px 20px;
  border: 2px solid #e5eaf2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  overflow: visible;
}

.plan-cards-ui .sb-plan-v2__card.sb-plan-card {
  min-height: 342px;
  padding: 18px 20px 20px;
  border: 2px solid #e5eaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  border-top-width: 2px;
}

.plan-cards-ui__card--blue,
.plan-cards-ui__card--red,
.plan-cards-ui__card--gold {
  border-color: #e5eaf2;
}

.plan-cards-ui__card--blue,
.plan-cards-ui .sb-plan-v2__card--blue,
.plan-cards-ui .sb-plan-v2__card.sb-plan-card.sb-plan-v2__card--blue { height: 100%;
  background: linear-gradient(
    to bottom,
    #F2F5FC 0 calc(var(--plan-card-color-block-height) - 1px),
    #D8E4FF calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
}

.plan-cards-ui__card--red,
.plan-cards-ui .sb-plan-v2__card--red,
.plan-cards-ui .sb-plan-v2__card.sb-plan-card.sb-plan-v2__card--red { height: 100%; border: 1px solid #FFD6DA;
  background: linear-gradient(
    to bottom,
    #FFF0F2 0 calc(var(--plan-card-color-block-height) - 1px),
    #FFD6DA calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
}

.plan-cards-ui__card--gold,
.plan-cards-ui .sb-plan-v2__card--gold,
.plan-cards-ui .sb-plan-v2__card.sb-plan-card.sb-plan-v2__card--gold { height: 100%;  border: 1px solid #FFE79F;
  background: linear-gradient(
    to bottom,
    #FFFAEA 0 calc(var(--plan-card-color-block-height) - 1px),
    #FFEEBA calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
}

.plan-cards-ui__card--selected.plan-cards-ui__card--blue,
.plan-cards-ui .sb-plan-v2__card--blue.sb-plan-card--selected {
  border-color: #2b60d3;
  background: linear-gradient(
    to bottom,
    #F2F5FC 0 calc(var(--plan-card-color-block-height) - 1px),
    #D8E4FF calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
  box-shadow: 0 2px 12px rgba(43, 96, 211, 0.14);
}

.plan-cards-ui__card--selected.plan-cards-ui__card--red,
.plan-cards-ui .sb-plan-v2__card.sb-plan-card.sb-plan-v2__card--red.sb-plan-card--selected {
  border: 2px solid #ef626c;
  background: linear-gradient(
    to bottom,
    #FFF0F2 0 calc(var(--plan-card-color-block-height) - 1px),
    #FFD6DA calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
  box-shadow: 0 2px 12px rgba(239, 98, 108, 0.14);
}

.plan-cards-ui__card--selected.plan-cards-ui__card--gold,
.plan-cards-ui .sb-plan-v2__card--gold.sb-plan-card--selected {
  border-color: #ff7f00;
  background: linear-gradient(
    to bottom,
    #FFFAEA 0 calc(var(--plan-card-color-block-height) - 1px),
    #FFEEBA calc(var(--plan-card-color-block-height) - 1px) var(--plan-card-color-block-height),
    #fff var(--plan-card-color-block-height)
  );
  box-shadow: 0 2px 12px rgba(255, 127, 0, 0.14);
}

.plan-cards-ui__card--popular,
.plan-cards-ui .sb-plan-card--popular {
  margin-top: 0;
}

.plan-cards-ui__selected-mark,
.plan-cards-ui .sb-plan-v2__selected-mark {
  position: absolute;
  top: 14px;
  right: 14px;
  color: #2b60d3;
  line-height: 0;
  z-index: 2;
}

.plan-cards-ui__card--red.plan-cards-ui__card--selected .plan-cards-ui__selected-mark,
.plan-cards-ui .sb-plan-v2__card--red.sb-plan-card--selected .sb-plan-v2__selected-mark {
  color: #ef626c;
}

.plan-cards-ui__card--gold.plan-cards-ui__card--selected .plan-cards-ui__selected-mark,
.plan-cards-ui .sb-plan-v2__card--gold.sb-plan-card--selected .sb-plan-v2__selected-mark {
  color: #ff7f00;
}

.plan-cards-ui__body,
.plan-cards-ui .sb-plan-v2__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  text-align: center;
}

.plan-cards-ui__icon,
.plan-cards-ui .sb-plan-v2__icon.sb-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef4fd;
  font-size: 24px;
  margin: 0 auto 8px;
  line-height: 1;
}

.plan-cards-ui__card--red .plan-cards-ui__icon,
.plan-cards-ui .sb-plan-v2__card--red .sb-plan-v2__icon {
  background: #ffe4e6;
}

.plan-cards-ui__card--gold .plan-cards-ui__icon,
.plan-cards-ui .sb-plan-v2__card--gold .sb-plan-v2__icon {
  background: #fef3c7;
}

.plan-cards-ui__name,
.plan-cards-ui .sb-plan-v2__name.sb-plan-name {
  margin: 0 0 10px;
  font-size: 18px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.plan-cards-ui__price-box {
  min-width: 162px;
  width: auto;
  margin: 0 0 12px;
  padding: 7px 10px;
  border: 1px solid #e8edf5;
  border-radius: 12px;
  background: #fff;
}

.plan-cards-ui__card--blue .plan-cards-ui__price-box {
  border-color: #c7d9f5;
}

.plan-cards-ui__card--red .plan-cards-ui__price-box {
  border-color: #fecdd3;
}

.plan-cards-ui__card--gold .plan-cards-ui__price-box {
  border-color: #fde68a;
}

.plan-cards-ui__price,
.plan-cards-ui .sb-plan-v2__price.sb-plan-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  line-height: 1.3;
}

.plan-cards-ui__price-amount,
.plan-cards-ui .sb-plan-v2__price-amount {
  font-size: 28px;
  font-family: var(--sb-font-extrabold);
  font-weight: normal;
  color: #111827;
  line-height: 1.0;
  letter-spacing: -0.02em;
}

.plan-cards-ui__card--blue .plan-cards-ui__price-amount,
.plan-cards-ui .sb-plan-v2__card--blue .sb-plan-v2__price-amount {
  color: #2b60d3;
}

.plan-cards-ui__card--red .plan-cards-ui__price-amount,
.plan-cards-ui .sb-plan-v2__card--red .sb-plan-v2__price-amount {
  color: #ef626c;
}

.plan-cards-ui__card--gold .plan-cards-ui__price-amount,
.plan-cards-ui .sb-plan-v2__card--gold .sb-plan-v2__price-amount {
  color: #ff7f00;
}

.plan-cards-ui__price-interval,
.plan-cards-ui .sb-plan-v2__price-interval {
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.0;
}

.plan-cards-ui__features {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  text-align: left;
}

.plan-cards-ui__feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.plan-cards-ui__feature-check {
  flex-shrink: 0;
  margin-top: 2px;
}

.plan-cards-ui__setup,
.plan-cards-ui .sb-plan-v2__setup.sb-plan-setup {
  margin: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  line-height: 1.45;
  text-align: left;
}

.plan-cards-ui__desc,
.plan-cards-ui .sb-plan-v2__desc.sb-plan-desc {
  margin: 0;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #374151;
  line-height: 1.45;
  max-width: 100%;
  text-align: left;
}

.plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__select.sb-plan-select-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  align-self: stretch;
  margin-top: auto;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid #e5eaf2;
  background: #fff;
  color: #6b7280;
  font-size: 18px;
  font-family: var(--sb-font-medium);
  font-weight: normal;
  text-align: center;
}

.plan-cards-ui__card--red:not(.plan-cards-ui__card--selected) .plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__card--red:not(.sb-plan-card--selected) .sb-plan-v2__select {
  background: #fff1f2;
  border-color: #fecdd3;border: none;
  color: #9ca3af;
}

.plan-cards-ui__card--gold:not(.plan-cards-ui__card--selected) .plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__card--gold:not(.sb-plan-card--selected) .sb-plan-v2__select {
  background: #fffbeb;
  border-color: #fde68a;border: none;
  color: #9ca3af;
}

.plan-cards-ui__card--selected.plan-cards-ui__card--blue .plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__card--blue.sb-plan-card--selected .sb-plan-v2__select {
  background: #2b60d3;
  border-color: #2b60d3;border: none;
  color: #fff;
}

.plan-cards-ui__card--selected.plan-cards-ui__card--red .plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__card--red.sb-plan-card--selected .sb-plan-v2__select {
  background: #ef626c;
  border-color: #ef626c;
  color: #fff;
}

.plan-cards-ui__card--selected.plan-cards-ui__card--gold .plan-cards-ui__btn,
.plan-cards-ui .sb-plan-v2__card--gold.sb-plan-card--selected .sb-plan-v2__select {
  background: #ff7f00;
  border-color: #ff7f00;
  color: #fff;
}

.plan-cards-ui__btn-check,
.plan-cards-ui .sb-plan-v2__select-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.plan-cards-ui__btn-check svg,
.plan-cards-ui .sb-plan-v2__select-check svg {
  display: block;
  width: 14px;
  height: 14px;
}

.plan-cards-ui-wrap {
  width: 100%;
}

.plan-cards-ui__dots {
  display: none;
}

@media (max-width: 991px) {
  .sb-plan-v2__grid.sb-plan-grid.plan-cards-ui,
  .plan-cards-ui {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px 0 6px;
    padding-left: max(12px, calc((100% - min(300px, 78vw)) / 2));
    padding-right: max(12px, calc((100% - min(300px, 78vw)) / 2));
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(12px, calc((100% - min(300px, 78vw)) / 2));
    scrollbar-width: none;
    grid-template-columns: none;
  }

  .sb-plan-v2__grid.sb-plan-grid.plan-cards-ui::-webkit-scrollbar,
  .plan-cards-ui::-webkit-scrollbar {
    display: none;
  }

  .sb-plan-v2__grid.sb-plan-grid.plan-cards-ui > .plan-cards-ui__item,
  .plan-cards-ui__item {
    flex: 0 0 min(300px, 78vw);
    flex-shrink: 0;
    width: min(300px, 78vw);
    min-width: min(300px, 78vw);
    max-width: min(300px, 78vw);
    padding-top: 29px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .plan-cards-ui__badge,
  .plan-cards-ui .sb-plan-v2__ribbon.sb-plan-badge {
    top: 34px;
  }

  .plan-cards-ui__item--popular,
  .plan-cards-ui__item--value {
    padding-top: 18px;
  }

  .plan-cards-ui__card,
  .plan-cards-ui .sb-plan-v2__card.sb-plan-card {
    padding: 24px 20px 20px;
  }

  .plan-cards-ui__price-amount,
  .plan-cards-ui .sb-plan-v2__price-amount {
    font-size: 28px;
  }

  .plan-cards-ui__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }

  .plan-cards-ui__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5deef;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
  }

  .plan-cards-ui__dot--active {
    background: #3366cc;
    transform: scale(1.15);
  }
}

@media (max-width: 767px) {
  .plan-cards-ui__card,
  .plan-cards-ui .sb-plan-v2__card.sb-plan-card {
    padding: 20px 16px 16px;
    border-radius: 14px;
  }

  .plan-cards-ui__icon,
  .plan-cards-ui .sb-plan-v2__icon.sb-plan-icon {
    width: 48px;
    height: 48px;
    font-size: 22px;
    margin-bottom: 12px;
  }

  .plan-cards-ui__name,
  .plan-cards-ui .sb-plan-v2__name.sb-plan-name {
    font-size: 19px;
    margin-bottom: 12px;
  }

  .plan-cards-ui__price-box {
    padding: 14px 12px;
    margin-bottom: 12px;
  }

  .plan-cards-ui__price-amount,
  .plan-cards-ui .sb-plan-v2__price-amount {
    font-size: 26px;
  }

  .plan-cards-ui__price-interval,
  .plan-cards-ui .sb-plan-v2__price-interval {
    font-size: 12px;
  }

  .plan-cards-ui__features {
    gap: 8px;
    margin-bottom: 14px;
  }

  .plan-cards-ui__setup,
  .plan-cards-ui .sb-plan-v2__setup.sb-plan-setup,
  .plan-cards-ui__desc,
  .plan-cards-ui .sb-plan-v2__desc.sb-plan-desc {
    font-size: 14px;
  }

  .plan-cards-ui__btn,
  .plan-cards-ui .sb-plan-v2__select.sb-plan-select-label {
    min-height: 42px;
    font-size: 16px;
  }
}

/* Optional Add-Ons – Step 9 (isolated plan-addons-ui-* styles) */
.plan-addons-ui.sb-plan-v2__addons.sb-plan-addons-section {
  margin-top: 0;
  border: 1px solid #ffe3c6;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 3px 6px rgba(51, 102, 204, 0.05);
  overflow: hidden;
}

.plan-addons-ui__head.sb-plan-v2__addons-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 74px;
  padding: 14px 20px;
  border: none;
  border-bottom: 1px solid #ffe3c6;
  border-radius: 0;
  background: #fff5eb;
}

.plan-addons-ui__star.sb-plan-v2__addons-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 1px;
  border-radius: 50%;
  background: #FFF0C5;
  color: #FF7F00;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.plan-addons-ui__title.sb-plan-v2__addons-title.sb-plan-addons-title {
  margin: 0 0 3px;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.plan-addons-ui__subtitle.sb-plan-v2__addons-subtitle.sb-plan-addons-subtitle {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  line-height: 1.35;
}

.plan-addons-ui__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.plan-addons-ui .sb-plan-v2__addon.sb-plan-addon-card.plan-addons-ui__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  margin: 0;
  min-height: 140px;
  padding: 20px 20px 10px 20px;
  border-radius: 10px;
  border: 2px solid #E5E5E5;
  background: #FFF;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.plan-addons-ui__card--clickable {
  cursor: pointer;
}

.plan-addons-ui .sb-plan-v2__addon.sb-plan-addon-card.plan-addons-ui__card:has(.plan-addons-ui__check) {
  grid-template-columns: 1fr;
}

.plan-addons-ui .sb-plan-v2__addon.sb-plan-addon-card--selected.plan-addons-ui__card {
  background: #e9efff;
  border-color: #3366cc;
  box-shadow: 0 3px 6px rgba(51, 102, 204, 0.08);
}

.plan-addons-ui__main.sb-plan-v2__addon-main {
  min-width: 0;
  padding-right: 0;
}

.plan-addons-ui__card-head.sb-plan-v2__addon-head.sb-plan-addon-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.plan-addons-ui__icon.sb-plan-v2__addon-icon.sb-plan-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef4fd;
  font-size: 20px;
  margin: 0;
  flex-shrink: 0;
}

.plan-addons-ui__card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.plan-addons-ui__name {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.3;
}

.plan-addons-ui__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 0;
}

.plan-addons-ui__title-row h3 {
  margin: 0;
  font-size: 16px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.plan-addons-ui__card-content p {
  margin: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.5;
}

.plan-addons-ui__desc {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 0;
  font-size: 15px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.5;
}

.plan-addons-ui__badge.sb-plan-v2__addon-badge {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  line-height: 1.3;
  white-space: nowrap;
}

.plan-addons-ui__badge--purple.sb-plan-badge--purple {
border-radius: 30px;
border: 1px solid #DDD6FE;
background: #F5F3FF;color: #8B5FD9;
font-size: 14px;
font-style: normal;
 font-family: var(--sb-font-medium);
line-height: normal;
}

.plan-addons-ui__badge--blue {
  background: #eef4fd;
  color: #2f6fd6;
  border: 1px solid #c7d9f5;
}

.plan-addons-ui__price.sb-plan-v2__addon-price.sb-plan-addon-price {
  margin: 8px 0 0;
  padding-left: 0;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #6b7280;
  line-height: 1.5;
  text-align: left;
}

.plan-addons-ui__price-line {
  display: inline;
}

.plan-addons-ui__price-main {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #2f6fd6;
  font-size: 22px;
  white-space: nowrap;
}

.plan-addons-ui__price-activation {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #ef626c;
  font-size: 22px;
  white-space: nowrap;
}

.plan-addons-ui__price-text {
  color: #6b7280;
}

.plan-addons-ui__check.sb-plan-v2__check.sb-plan-addon-check {
  position: static;
  top: auto;
  right: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  cursor: pointer;
}

.plan-addons-ui__check-box.sb-plan-v2__check-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #d1d9e6;
  background: #fff;
}

.plan-addons-ui .sb-plan-v2__check-input:checked + .plan-addons-ui__check-box {
  background: #2f6fd6;
  border-color: #2f6fd6;
  color: #fff;
}

.plan-addons-ui__qty.sb-plan-v2__qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 143px;
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid #D6D6D6;
  border-radius: 11px;
  align-self: center;
  flex-shrink: 0;
}

.plan-addons-ui__qty-label.sb-plan-v2__qty-label {
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
  letter-spacing: 0;
  line-height: 1;
}

.plan-addons-ui__qty-controls.sb-plan-v2__qty-controls {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.plan-addons-ui__qty-btn.sb-plan-v2__qty-btn {
  width: 30px;
  height: 36px;
  border: 2px solid #D6D6D6;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  font-size: 18px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  cursor: pointer;
  line-height: 1;
}

.plan-addons-ui__qty-btn--plus.sb-plan-v2__qty-btn {
  color: #2f6fd6;
  border-color: #3366CC;
}

.plan-addons-ui__qty-value.sb-plan-v2__qty-value {
  min-width: 42px;
  height: 36px;
  margin: 0 5px;
  border: 2px solid #D6D6D6;
  border-radius: 6px;
  padding: 0 4px;
  font-size: 15px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

/* Price Summary – Step 9 (isolated plan-summary-ui-* styles) */
.plan-summary-ui.sb-plan-v2__summary.sb-price-summary {
  margin-top: 0;
  padding: 0;
  border: 1px solid #D8E3F5;
  border-radius: 15px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.plan-summary-ui__head.sb-plan-v2__summary-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid #D8E3F5;
  background: #F5F8FF;
}

.plan-summary-ui__icon.sb-plan-v2__summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E4EDFF;
  color: #2f6fd6;
  flex-shrink: 0;
}

.plan-summary-ui__head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.plan-summary-ui__head-label {
color: #36C;
font-size: 16px;
font-style: normal;
line-height: 28px; /* 155.556% */
  
color: #36C;
font-size: 18px;
font-style: normal;
font-family: var(--sb-font-semibold);
  line-height: 1.35;
}

.plan-summary-ui__head-plan.sb-plan-v2__summary-label {
 color: #333;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 127.273% */
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  line-height: 1.35;
}

.plan-summary-ui__head-amount.sb-plan-v2__summary-plan-amount {
color: #333;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 127.273% */
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
  white-space: nowrap;
}

.plan-summary-ui__head-amount strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #333;
}

.plan-summary-ui__head-amount span {
  font-family: var(--sb-font-regular);
  color: #222;
}

.plan-summary-ui__lines.sb-price-summary__lines:not(:empty) {
  border-bottom: 1px solid #e5eaf2;
  padding: 10px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-summary-ui__lines.sb-price-summary__lines {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.plan-summary-ui .sb-price-summary__line {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #D8E3F5;
  border-radius: 6px;
  background: #F5F8FF;
  font-size: 14px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
}

.plan-summary-ui .sb-price-summary__amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #374151;
}

.plan-summary-ui .sb-price-summary__amount strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #3366CC;
}

.plan-summary-ui .sb-price-summary__amount span {
  font-family: var(--sb-font-regular);
  color: #222;
}

.plan-summary-ui__total.sb-plan-v2__summary-total.sb-price-summary__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 47px;
  margin: 0;
  padding: 8px 20px;
 color: #222;

font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 28px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.plan-summary-ui__total-amount.sb-price-summary__total-amount {
  font-size: 25px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #222;
  white-space: nowrap;
}

.plan-summary-ui__total-amount strong {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #3366CC;
}

.plan-summary-ui__total-amount span {
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
}

.plan-summary-ui__onetime.sb-price-summary__onetime {
  display: none;
}

.plan-summary-ui__onetime-line.sb-price-summary__line--onetime {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

.plan-summary-ui__onetime-label.sb-price-summary__label {
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #9ca3af;
}

.plan-summary-ui__onetime-amount.sb-price-summary__amount {
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #9ca3af;
  white-space: nowrap;
}

.plan-summary-ui__setup.sb-plan-v2__summary-setup.sb-price-summary__setup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
  margin: 0 20px 20px;
  padding: 8px 12px;
  border: 1px solid #D8E3F5;
  border-radius: 6px;
  background: #F5F8FF;
  font-size: 16px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #222;
}

.plan-summary-ui__setup-amount {
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
  white-space: nowrap;
}

.plan-summary-ui__final.sb-price-summary__final {
  display: none;
}

.plan-summary-ui__final-row.sb-price-summary__final-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 20px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #111827;
}

.plan-summary-ui__final-amount.sb-price-summary__final-amount {
  font-size: 24px;
  font-family: var(--sb-font-bold);
  font-weight: normal;
  color: #0d9488;
  white-space: nowrap;
}

.plan-summary-ui__final-note.sb-price-summary__final-note {
  margin: 8px 0 0;
  font-size: 13px;
  font-family: var(--sb-font-regular);
  font-weight: normal;
  color: #9ca3af;
  line-height: 1.45;
  text-align: right;
}

@media (max-width: 960px) {
  .plan-addons-ui__body {
    padding: 14px 16px 16px;
    gap: 10px;
  }

  .plan-addons-ui .sb-plan-v2__addon.sb-plan-addon-card.plan-addons-ui__card {
    padding: 14px 16px;
    gap: 12px;
  }

  .plan-addons-ui__price.sb-plan-v2__addon-price.sb-plan-addon-price {
    padding-left: 0;
    margin-top: 8px;
  }

  .plan-addons-ui__main.sb-plan-v2__addon-main {
    padding-right: 0;
  }

  .plan-summary-ui.sb-plan-v2__summary.sb-price-summary {
    padding: 18px 18px;
  }

  .plan-summary-ui__head.sb-plan-v2__summary-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .plan-summary-ui__head-amount.sb-plan-v2__summary-plan-amount {
    width: 100%;
    text-align: left;
    padding-left: 52px;
  }
}

@media (max-width: 767px) {
  .plan-addons-ui__head.sb-plan-v2__addons-head {
    padding: 14px 16px;
  }

  .plan-addons-ui .sb-plan-v2__addon.sb-plan-addon-card.plan-addons-ui__card {
    grid-template-columns: 1fr;
  }

  .plan-addons-ui__price.sb-plan-v2__addon-price.sb-plan-addon-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0px;
    line-height: 1.35;
  }

  .plan-addons-ui__price-line {
    display: block;
  }

  .plan-addons-ui__price-main,
  .plan-addons-ui__price-activation {
    font-size: 18px;
  }

  .plan-addons-ui__qty.sb-plan-v2__qty {
    align-self: flex-end;
    flex-direction: row;
    gap: 10px;
  }

  .plan-addons-ui__icon.sb-plan-v2__addon-icon.sb-plan-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .plan-summary-ui__total-amount.sb-price-summary__total-amount {
    font-size: 18px;
  }

  .plan-summary-ui__final-amount.sb-price-summary__final-amount {
    font-size: 22px;
  }

  .plan-summary-ui__final-row.sb-price-summary__final-row {
    font-size: 18px;
  }
}

/* Sales Book – body background pattern */
.sales-book-body {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #f4f7fb;
  background-image: var(--sb-body-bg-image);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.sales-book-body:has(.sb-onboarding-v2) {
  background-image: none;
}

.sales-book-body .sb-onboarding.sb-onboarding-v2 {
  min-height: 100vh;
  background: #f4f7fb;
}

.sales-book-body #app,
.sales-book-body .sb-page,
.sales-book-body .sb-onboarding,
.sales-book-body .sb-staff-branch-page,
.sales-book-body .sb-page--landing {
  background: transparent;
}

.sales-book-body .sb-onboarding-wave {
  display: none;
}

/* Step 1 – Recommended badge tab (isolated biztype-recommended-badge-* styles) */
.biztype-recommended-badge.sb-biztype-card__recommended {
  position: absolute;
  top:8px;
  left: 14px;
  z-index: 3;
  display: block;
  width: 140px;
  height: 41px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translateY(-100%);
  pointer-events: none;
  font-size: 0;
  line-height: 0;
}

.biztype-recommended-badge__svg {
  display: block;
}

.biztype-recommended-badge__label {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px 7px;
  font-size: 12px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  color: #fff;
  line-height: 1;
  white-space: nowrap;
}

.biztype-recommended-badge__star.sb-biztype-card__recommended-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: #fff;
  flex-shrink: 0;
  line-height: 0;
}

.biztype-recommended-badge__star svg {
  display: block;
  width: 12px;
  height: 12px;
}

.sb-biztype-grid .sb-biztype-card:has(.biztype-recommended-badge) {
  margin-top: 0px;
}

.sb-biztype-card-wrap {
  position: relative;
  min-width: 0;
}

.sb-biztype-card-wrap--recommended-row {
  padding-top: 32px;
}

.sb-biztype-card-wrap > .biztype-recommended-badge.sb-biztype-card__recommended {
	top: 4px;
	left: 0;
	transform: none;
	z-index: 0;
}
@media (max-width: 960px) {
  .sb-biztype-card-wrap--recommended-row:nth-child(2) {
    padding-top: 0;
  }
}



@media (max-width: 767px) {
  .biztype-recommended-badge.sb-biztype-card__recommended {
    left: 12px;
    width: 132px;
    height: 32px;
  }


  .biztype-recommended-badge.sb-biztype-card__recommended{ top:2px}

  .biztype-recommended-badge__label {
    font-size: 11px;
    padding-bottom: 6px;
  }

}

/* QR step – responsive actions/info grid fix */
@media (max-width: 960px) {


  .sb-qr-v2__action {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  .sb-qr-v2__action-label {
    font-size: 16px;
    line-height: 1.35;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .sb-qr-v2__info-card.sb-qr-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 14px 16px;
  }

  .sb-qr-v2__info-icon.sb-qr-info-icon {
    flex-shrink: 0;
  }

  .sb-qr-v2__info-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
  }

  .sb-qr-v2__info-card strong {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
  }

  .sb-qr-v2__info-card p {
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width:767px) {
.sb-setup-page .sb-landing-brand {
	margin-bottom: 18px;
}
.sb-setup-card {
	padding: 18px 20px 10px;
	border-radius: 17px;
}
.sb-verify-message-icon{ margin-top: 0;}
}

@media (max-width: 767px) {
  .sb-qr-v2__form {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sb-qr-v2__action-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .sb-qr-v2__action-label {
    font-size: 15px;
  }
  .sb-verify-resend {
	font-size: 16px;
	display: flex;
	flex-direction: column;
	line-height: 120%;
}
}

/* Keep the shared sidebar column aligned after legacy responsive overrides. */
.sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
  grid-template-columns: 400px minmax(0, 1fr);
}

@media (max-width: 960px) {
  .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
    grid-template-columns: 1fr;
  }
}

.onboard-sidebar .sb-onboarding-sidebar-v2__icon > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__icon > span svg,
.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__icon > span svg {
  width: auto;
  height: auto;
  max-width: 23px;
  max-height: 19px;
}

.onboard-sidebar .sb-onboarding-sidebar-v2__item--active .sb-onboarding-sidebar-v2__icon > span svg path {
  fill: #fff;
}

/* Onboarding header — shared Step 1–9 design */
.onboard-header.sb-onboarding-topbar {
  height: 112px;
  min-height: 112px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f4;
  background: #fff;
}

.onboard-header .sb-top-header--onboarding .sb-top-header__inner {
  grid-template-columns: 0 minmax(0, 1fr) 0;
  gap: 18px;
  min-height: 90px;
  padding: 0 40px 0 20px;
}

.onboard-header .sb-top-header__center {
  width: 100%;
  max-width: 660px;
}

.onboard-header__logo-image {
  display: block;
  width: 190px;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon {
  display: none;
}

.onboard-header-progress {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}

.onboard-header-progress__title {
  color: #222;
  font-family: var(--sb-font-regular);
  font-size: 20px;
  font-weight: normal;
  line-height: 17px;
  white-space: nowrap;
}

.onboard-header-progress__title span:first-child {
  color: #245dcc;
  font-family: var(--sb-font-semibold);
}

.onboard-header-progress__meta {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 10px 26px;
  border: 1px solid #d9dee7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.04);
  color: #222;
  font-family: var(--sb-font-regular);
  font-size: 18px;
  font-weight: normal;
  line-height: 16px;
  white-space: nowrap;
}

.onboard-header-progress__time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.onboard-header-progress__time svg {
  flex-shrink: 0;
  color: #333;
}

.onboard-header-progress__divider {
  width: 1px;
  height: 22px;
  flex-shrink: 0;
  background: #e5e7eb;
}

.onboard-header-progress__percentage {
  flex-shrink: 0;
}

.onboard-header-progress__bar {
  display: block;
  width: 230px;
  height: 10px;
  flex-shrink: 1;
  overflow: hidden;
  border-radius: 999px;
  background: #e7f4e9;
}

.onboard-header-progress__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #20ad35 0%, #17b536 100%);
  transition: width 0.2s ease;
}

.onboard-header .sb-top-header__actions {
  gap: 16px;
}

.onboard-header .sb-onboarding-progress__help {
 display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sb-font-semibold);
  color: rgb(51, 102, 204);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
}

.onboard-header .sb-onboarding-progress__help-icon {
  width: 18px;
  height: 18px;
  border-color: #315b91;
  color: #315b91;
  font-size: 10px;
}

.onboard-header .sb-top-header__logout {
border: 1px solid #ef626c;
  background: #fff;
  color: #ef626c;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: 28px;
  font-family: var(--sb-font-semibold);
  font-weight: normal;
  padding: 8px 18px;
  border-radius: 8px;
  flex-shrink: 0;
  line-height: 1.2;
}

.onboard-header .sb-top-header__logout-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;position: relative;
  top: 3px;
}

.onboard-header-actions__separator {
  display: block;
  width: 1px;
  height: 34px;
  flex-shrink: 0;
  background: #d9dde4;
}
@media (max-width: 1599px) {
.sb-top-header__logo img {
	height: 38px;
}
.onboard-header .sb-top-header__center {
	width: 100%;
	max-width: 560px;
}
.sb-staff-v2__info-row {

	grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);

}
}

@media (max-width: 1365px) {
  .sb-payment-v2__status-text{line-height: 1.1;}
.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__product {
	font-size: 30px;
}
.sb-top-header__delytt{ max-width: 80px; height:auto;}
.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon {
  width: 40.193px;
  height: 40.193px;
}
.sb-onboarding-v2 .sb-top-header--onboarding .sb-top-header__brand-icon svg{ max-width: 60%; max-height: 60%; width: auto; height: auto;}
.onboard-header .sb-top-header__center {
	width: 100%;
	max-width: 520px;
}
.sb-top-header__logo img {
	height: 30px;
}

 }
@media (max-width: 1199px) { 
  .sb-services-v2__row {

	grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.45fr) 32px;

}
   .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
	grid-template-columns: 270px minmax(0, 1fr);
}
  .onboard-header-progress__meta{min-height: 44px;padding: 7px 16px;gap: 12px;}
  .onboard-header .sb-top-header__center {
	width: 100%;
	max-width: 428px;
}
.onboard-header .sb-top-header__actions {
	gap: 10px;
}
  .onboard-header .sb-top-header__logo {
    gap: 9px;
  }

  .onboard-header .sb-top-header__brand-text {
    gap: 6px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 38px;
    height: 38px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt {
    top: 0;
    font-size: 0;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt svg {
    width: 75px;
    height: auto;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__product {
    font-size: 26px;
    line-height: 1;
  }
}

@media (max-width:991px) {
  .onboard-sidebar.sb-onboarding-sidebar-v2 {
    display: none;
  }
.sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
	grid-template-columns: 100% minmax(0, 1fr);
}
  .sb-onboarding-v2 .sb-onboarding-body--with-sidebar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .onboard-header .sb-top-header--onboarding .sb-top-header__inner {
    grid-template-columns: 245px minmax(330px, 1fr) 240px;
    gap: 12px;
  }

  .onboard-header-progress__bar {
    width: 110px;
  }
}

@media (max-width: 990px) {
  .onboard-header.sb-onboarding-topbar {
    height: auto;
    min-height: 124px;
    padding: 10px 0;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    justify-items: stretch;
    min-height: 104px;
    padding: 0 20px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__logo {
    min-width: 0;
    justify-self: start;
  }

  .onboard-header__logo-image {
    width: 160px;
  }

  .onboard-header .sb-top-header__logo {
    gap: 8px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 36px;
    height: 36px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt svg {
    width: 64px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__product {
    font-size: 22px;
  }

  .onboard-header .sb-top-header__center {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: 560px;
    justify-self: center;
  }

  .onboard-header .sb-top-header__actions {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
  }

  .onboard-header-progress {
    gap: 8px;
  }
  .sb-biztype-grid{ gap: 15px;}
}
@media (max-width:767px) {
.sb-top-header__logo img {
	height: 24px;
}
.sb-biztype-grid{ gap: 10px;}
}
@media (max-width: 600px) {
  .onboard-header.sb-onboarding-topbar {
    min-height: 116px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__inner {
    min-height: 96px;
    padding: 0 14px;
  }

  .onboard-header__logo-image {
    width: 135px;
  }

  .onboard-header .sb-top-header__logo {
    gap: 8px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon svg {
    width: 13px;
    height: auto;
  }

  .onboard-header .sb-top-header__brand-text {
    gap: 6px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt {
    top: 0;
    font-size: 0;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt svg {
    width: 52px;
    height: auto;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__product {
    font-size: 20px;
    line-height: 1;
  }

  .onboard-header .sb-onboarding-progress__help {
    display: none;
  }

  .onboard-header-actions__separator {
    display: none;
  }

  .onboard-header-progress__meta {
    gap: 9px;
    min-height: 48px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 11px;
  }

  .onboard-header-progress__time {
    display: none;
  }

  .onboard-header-progress__divider {
    display: none;
  }

  .onboard-header-progress__bar {
    width: min(180px, 52vw);
  }
}

@media (max-width: 430px) {
  .onboard-header .sb-top-header--onboarding .sb-top-header__inner {
    gap: 8px 10px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__brand-icon {
    width: 32px;
    height: 32px;
  }

  .onboard-header__logo-image {
    width: 118px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__delytt svg {
    width: 48px;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__product {
    font-size: 17px;
  }

  .onboard-header .sb-top-header__logout {
    width: 70px;
    height: 38px;
    min-height: 38px;
  }

  .onboard-header .sb-top-header__logout-icon {
    width: 16px;
    height: 16px;
  }
}

/* Mobile onboarding header: keep every control visible without overflow. */
@media (max-width: 767px) {
  .onboard-header.sb-onboarding-topbar {
    height: auto;
    min-height: initial;
    padding: 16px 0;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 20px;
    min-height: 134px;
    padding: 0 14px;
    justify-items: stretch;
  }

  .onboard-header .sb-top-header--onboarding .sb-top-header__logo {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    justify-self: start;
  }

  .onboard-header__logo-image {
    width: clamp(130px, 42vw, 155px);
    max-width: 100%;
  }

  .onboard-header .sb-top-header__center {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 520px;
    justify-self: center;
  }

  .onboard-header-progress {
    gap: 10px;
  }

  .onboard-header-progress__title {
    max-width: 100%;
    font-size: clamp(15px, 3.5vw, 15px);
    line-height: 17px;
    text-align: center;
    white-space: nowrap;
  }

  .onboard-header-progress__meta {
    display: grid;
    grid-template-columns: auto 1px auto;
    gap: 0px 7px;
    width: 100%;
    min-height: 62px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: clamp(15px, 3vw, 15px);
    line-height: 15px;
  }

  .onboard-header-progress__time {
    display: inline-flex;
    justify-self: end;
    gap: 6px;
  }

  .onboard-header-progress__time svg {
    width: 14px;
    height: 14px;
  }

  .onboard-header-progress__divider {
    display: block;
    height: 19px;
  }

  .onboard-header-progress__percentage {
    justify-self: start;
  }

  .onboard-header-progress__bar {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    height: 6px;
  }

  .onboard-header .sb-top-header__actions {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    gap: 10px;
  }

  .onboard-header .sb-onboarding-progress__help {
    display: inline-flex;
    width: 40px;
    height: 32px;
    justify-content: center;
    padding: 0;
    border: 1px solid #d8e3f5;
    border-radius: 8px;
    background: #fff;
  }

  .onboard-header-actions__separator {
    display: block;
    height: 30px;
  }

  .onboard-header-actions__label {
    display: none;
  }

  .onboard-header .sb-top-header__logout {
    width: 40px;
    height: 32px;
    min-height: 32px;
    padding: 0;
  }

  .onboard-header .sb-top-header__logout-icon {
    width: 18px;
    height: 18px;
  }
  .sb-profile-footer__back {
    height: auto;
    font-size: 18px;
  }
  .sb-profile-footer__continue {
    height: 48px;
    font-size: 18px;
  }
  .sb-staff-v2__info-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sb-staff-v2__pin-hint{ align-items: start;}
.sb-staff-v2__pin-hint-icon{margin-top: 3px;}
.sb-staff-v2__owner {
	height: 266px;
}
.sb-services-v2__section-label {
  margin: 0 0 9px;
}
.sb-services-v2__row {
	grid-template-columns: 1fr;
	gap: 10px;
	position: relative;
	padding: 20px;
	border: 1px solid #E0E3E8;
	border-radius: 12px;
	background: #FAFBFD;
	box-shadow: 0 3px 6px rgba(51, 102, 204, 0.05);
}
.sb-services-v2__list {
	gap: 18px;
}
.sb-services-v2__remove {
	position: absolute;
	top: -11px;
	right: -7px;
	width: 30px;
	height: 30px;
	border: 1px solid #E0E3E8;
	background: #fff;
	color: #222;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.sb-services-v2__items-section{ gap: 9px;}
.sb-payment-v2__status-text {
	line-height: 1.2; font-size: 16px;
}
.sb-daily-v2__form,
.sb-pwa-v2__features, .sb-pwa-v2__form{ gap: 15px;}
.sb-daily-v2__summary-text{ line-height: 1.3;}
.sb-daily-v2__phone {
  display: flex;
  align-items: start;
  gap: 12px;
}
.sb-daily-v2__phone-icon{ margin-top: 6px;}
.sb-pwa-v2__step-text{ line-height: 22px;}
  .sb-qr-v2__actions.sb-qr-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .sb-qr-v2__info-grid.sb-qr-info-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .plan-summary-ui__head-label{line-height: 1.15;}
  .plan-summary-ui__head-plan.sb-plan-v2__summary-label {
  color: #333;
  font-size: 18px;
  }
  .plan-summary-ui__head-amount.sb-plan-v2__summary-plan-amount {
  color: #333;
  font-size: 18px;
  }
  .plan-summary-ui.sb-plan-v2__summary.sb-price-summary {
	padding:0;
}
.sb-plan-v2__form{ gap: 15px;}
.sb-landing-feature-text {
    font-size: 16px;
    line-height: 1.25;
}
.sb-plan-v2__footer.sb-profile-footer--triple { gap:10px;}
.sb-profile-upload__btn{ font-size: 16px; padding: 8px 23px;}
.sb-profile-upload{padding: 22px 20px;}
.sb-template-v2__card{ min-height:  inherit;}
.sb-template-v2__tag{padding: 3px 10px;}
.sb-services-v2__accordion-item.sb-service-accordion__item--open .sb-services-v2__accordion-panel{ padding-left: 0;}
.sb-services-v2__tip{ align-items: start;}
.sb-payment-v2__plan-name {
	margin: 0;
	font-size: 16px;
	font-family: var(--sb-font-semibold);
	font-weight: normal;
	color: #111827;
	line-height: 1.25;
}
.sb-payment-v2__plan {
	align-items: center;
}
.sb-daily-v2__time-label {
	font-size: 15px;
}
  .sb-daily-v2__times {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.sb-pwa-v2__step-num {
	width: 20px;
	height: 20px;
	font-size: 11px;
}
.sb-pwa-v2__steps li{ align-items: start;}
.sb-pwa-v2__step-num{ margin-top: 3px;}
.sb-qr-v2__action{ min-height:  inherit;}
.sb-qr-v2__info-card.sb-qr-info-card{ min-height:  inherit;}
.sb-plan-v2__sms.sb-plan-info{ align-items: start;}
.plan-summary-ui__total.sb-plan-v2__summary-total.sb-price-summary__total{ font-size: 18px;}   

.sb-landing-features{
      flex-direction: column;
}
.sb-landing-feature-row{
      flex-direction: row;
      border-bottom: 1px solid #d8e3f5;
      padding: 5px 10px;
      
}
.sb-landing-trust-line{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  font-size: 14px;
  text-align: left;
}
.sb-landing-trust-icon--shield {
  flex-shrink: 0;
  align-self: center;
  line-height: 0;
}
.sb-landing-trust-icon--shield svg{
  width: clamp(16px, 3vw, 18px);
  height: clamp(16px, 3vw, 18px);
  display: block;
}

.sb-setup-subtitle{
  font-size: 15px;
}

.sb-onboarding-v2 .sb-profile-footer{
  bottom: -1px;
}


    .sb-profile-card__title {
        font-size: 24px;
    }
.sb-daily-v2__channel-badge{
      top: 30%;
}
.sb-daily-v2__change{
  padding: 6px 11px;
}

.sb-landing-feature-icon{
      width: clamp(30px, 6.5vw, 48px);
    height: clamp(30px, 6.5vw, 48px);
}
.sb-landing-feature-icon svg {
    max-width: 50%;
    max-height: 70%;
    width: auto;
    height: auto;
}

.sb-setup-legal{
  font-size: 16px;
}
.sb-services-v2__price-wrap .sb-currency{
  font-family: var(--sb-font-regular);
      color: #222;
}
.sb-payment-v2__desc{
      margin-top: 4px;
}
.sb-pwa-v2__feature-title{
  font-size: 18px;
}
.sb-pwa-v2__next.sb-next-box{
  align-items: start;
}
.plan-addons-ui__card-head.sb-plan-v2__addon-head.sb-plan-addon-head{
  align-items: start;
}
}