/* ==========================================================================
   Settings pages — page-specific styles on top of the app skin (pages-m2.css).
   Every rule is scoped to its page: body[data-app-page="x"] or a page class.
   ==========================================================================

   The Settings hub (More), My Profile, Delete Account, Subscription, Business
   Settings, Notification Settings, Verification, Payment Gateways, Branches,
   SMS, Menu Items and Add Business. Each page wraps its content in
   <div class="sx-wrap lp2 lp2-tone-X lp2-st st-…"> (the .lp2 kit gives the
   headline card, captions, notes and list rows) and adds the settings kit
   below: .st-head (header with back button), .st-link rows (grouped lists),
   .st-sec (section cards) with .st-savebar (save state), .st-chip, .st-field.
   Pop-ups these pages open carry .st-form / .st-m-* classes, so they are
   styled here without touching other pages' pop-ups.
   ========================================================================== */

/* ---- Variables the old inline styles still name --------------------------- */
/* --card-bg, --text-1, --text-muted, --accent-light and --surface-2 are not
   defined anywhere in the app; give them values on these pages (their pop-ups
   inherit from <body>). */
body[data-app-page="settings"], body[data-app-page="edit-profile"], body[data-app-page="profile"],
body[data-app-page="delete-account"], body[data-app-page="subscription"], body[data-app-page="edit-business"],
body[data-app-page="notification-settings"], body[data-app-page="verification"], body[data-app-page="payment-gateways"],
body[data-app-page="branches"], body[data-app-page="sms"], body[data-app-page="menu-items"], body[data-app-page="add-business"] {
    --card-bg: #fff; --text-1: #000; --text-muted: #475569; --accent-light: #ecfdf5; --surface-2: #f8fafc;
}

/* ---- Kit: header ---------------------------------------------------------- */

.lp2-st { --st-line: #e7ebf1; --st-line-2: #eef1f5; --st-soft: #f6f8fb; }
.lp2-st .st-head { align-items: center; }
.lp2-st .page-header > .st-head-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; flex-shrink: 1 !important; }
.lp2-st .st-head-t { min-width: 0; }
.lp2-st .st-head-t .page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp2-st .st-back {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--st-line); background: #fff; color: #0f172a; font-size: 1.05rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, background .15s ease;
}
.lp2-st .st-back:hover { border-color: #94a3b8; background: #f8fafc; }
.lp2-st .st-head-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--st-line); background: #fff; color: #0f172a;
    font: inherit; font-size: .8rem; font-weight: 750; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2-st .st-head-btn:hover { border-color: #94a3b8; }
.lp2-st .st-head-btn i { color: color-mix(in srgb, var(--lp2-h3) 80%, #000); }
@media (max-width: 480px) {
    .lp2-st .st-head-btn .st-hide-sm { display: none; }
    .lp2-st .st-head-btn { width: 38px; padding: 0; justify-content: center; }
}

/* ---- Kit: headline card extras --------------------------------------------- */

.lp2-st .sx-hero-chip { color: #fff; }
.lp2-st .lp2-hero-val { overflow-wrap: anywhere; }
.lp2-st .st-hero-link { cursor: pointer; border-radius: 22px; }
.lp2-st .st-hero-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--lp2-h3) 45%, transparent); outline-offset: 3px; }
.lp2-st .st-hero-link .sx-hero { transition: transform .15s ease, box-shadow .15s ease; }
.lp2-st .st-hero-link:hover .sx-hero { transform: translateY(-1px); }
.lp2-st .st-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lp2-st .st-ava {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
    background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .5);
    font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: 0;
}
.lp2-st .st-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp2-st .st-person-name { min-width: 0; font-size: clamp(1.2rem, 4.6vw, 1.6rem); line-height: 1.15; overflow-wrap: anywhere; }
.lp2-st .lp2-stat b { overflow: hidden; text-overflow: ellipsis; }

/* ---- Kit: grouped list rows ------------------------------------------------- */

.lp2-st .st-list {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--st-line);
    border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2-st .st-link {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 11px 14px;
    background: transparent; border: 0; border-top: 1px solid var(--st-line-2); text-align: left; cursor: pointer;
    font: inherit; color: inherit; transition: background .12s ease;
}
.lp2-st .st-list > .st-link:first-child { border-top: 0; }
.lp2-st .st-link:hover { background: #fafbfd; }
.lp2-st .st-link:active { background: #f4f6fa; }
.lp2-st .st-link:focus-visible { outline: 2px solid var(--sx-c); outline-offset: -2px; }
.lp2-st .st-link-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1rem;
    color: color-mix(in srgb, var(--sx-c) 80%, #000);
    background: color-mix(in srgb, var(--sx-c) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--sx-c) 20%, #fff);
}
.lp2-st .st-link-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp2-st .st-link-body b { font-size: .9rem; font-weight: 750; color: #000; line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp2-st .st-link-body > span { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp2-st .st-link-chev { color: #94a3b8; font-size: .85rem; flex-shrink: 0; }
.lp2-st .st-link.is-danger .st-link-body b { color: #9f1239; }
.lp2-st .st-tag, .st-m .st-tag {
    display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-style: normal;
    font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6;
    color: color-mix(in srgb, var(--t, #334155) 78%, #000);
    background: color-mix(in srgb, var(--t, #334155) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--t, #334155) 24%, #fff);
}

/* ---- Kit: section cards ------------------------------------------------------- */

.lp2-st .st-sec {
    --sx-c: var(--lp2-h3);
    background: #fff; border: 1px solid var(--st-line); border-radius: 20px; margin: 0 0 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.lp2-st .st-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 11px; padding: 14px 16px 0; }
.lp2-st .st-sec-head > .st-chip { margin-left: auto; }
.lp2-st .st-sec-ic {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem;
    color: color-mix(in srgb, var(--sx-c) 82%, #000);
    background: color-mix(in srgb, var(--sx-c) 11%, #fff);
    border: 1px solid color-mix(in srgb, var(--sx-c) 22%, #fff);
}
.lp2-st .st-sec-t { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; }
.lp2-st .st-sec-t b { font-size: .95rem; font-weight: 800; color: #000; letter-spacing: -.01em; line-height: 1.25; }
.lp2-st .st-sec-t span { font-size: .74rem; font-weight: 600; color: #475569; margin-top: 1px; line-height: 1.4; }
.lp2-st .st-sec-body { padding: 14px 16px 16px; }
.lp2-st .st-sec-body > .form-stack { gap: 14px; }

/* status chips */
.lp2-st .st-chip, .st-m .st-chip {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; white-space: nowrap;
    padding: 3px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; line-height: 1.5;
    border: 1px solid transparent;
}
.lp2-st .st-chip i, .st-m .st-chip i { font-size: .72rem; }
.lp2-st .st-chip.is-ok,   .st-m .st-chip.is-ok   { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.lp2-st .st-chip.is-warn, .st-m .st-chip.is-warn { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.lp2-st .st-chip.is-bad,  .st-m .st-chip.is-bad  { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.lp2-st .st-chip.is-info, .st-m .st-chip.is-info { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
.lp2-st .st-chip.is-off,  .st-m .st-chip.is-off  { color: #334155; background: #f1f5f9; border-color: #e2e8f0; }

/* the save bar at the foot of a section */
.lp2-st .st-savebar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0; padding: 10px 12px 10px 16px; border-top: 1px solid var(--st-line-2); background: #fafbfd;
    transition: background .15s ease;
}
.lp2-st .st-save-txt { min-width: 0; display: flex; flex-direction: column; }
.lp2-st .st-save-txt b { font-size: .8rem; font-weight: 800; color: #000; }
.lp2-st .st-save-state { font-size: .72rem; font-weight: 700; color: #475569; display: inline-flex; align-items: center; gap: 5px; }
.lp2-st .st-save-state i { font-size: .8rem; }
.lp2-st .st-savebar .st-save-btn { flex-shrink: 0; min-height: 38px; padding: 0 16px; }
.lp2-st .st-savebar:not(.is-dirty) .st-save-btn { background: #fff !important; color: #0f172a !important; border-color: #dbe2ea !important; box-shadow: none !important; }
.lp2-st .st-savebar.is-dirty { background: #fffbeb; border-top-color: #fde68a; }
.lp2-st .st-savebar.is-dirty .st-save-state { color: #92400e; }
.lp2-st .st-savebar.is-dirty .st-save-state i { font-size: .45rem; color: #d97706; }
.lp2-st .st-savebar.is-saved .st-save-state { color: #166534; }
/* in a section card the bar closes the card; once something changes it
   follows you down the screen (#page-content is the scroller) so the unsaved
   state and the Save button stay in reach */
.lp2-st .st-sec > .st-savebar { border-radius: 0 0 19px 19px; }
.lp2-st .st-sec > .st-savebar.is-dirty {
    position: sticky; bottom: 10px; z-index: 20; margin: 0 -1px -1px; border-radius: 16px;
    border: 1px solid #fcd34d; box-shadow: 0 16px 34px -14px rgba(146, 64, 14, .45);
}
/* fields */
.lp2-st .st-sec .input-group label { font-size: .76rem; font-weight: 750; color: #334155; }
.lp2-st .st-hint { font-size: .72rem; font-weight: 600; color: #475569; margin-top: 5px; line-height: 1.45; }
.lp2-st .st-lock {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
    background: var(--st-soft); border: 1px solid var(--st-line);
}
.lp2-st .st-lock-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp2-st .st-lock-t small { font-size: .68rem; font-weight: 750; color: #475569; text-transform: uppercase; letter-spacing: .05em; }
.lp2-st .st-lock-t b { font-size: .88rem; font-weight: 750; color: #000; overflow-wrap: anywhere; }
.lp2-st .st-lock > i { color: #64748b; font-size: .9rem; }
.lp2-st .st-locks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .lp2-st .st-locks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* segmented tabs inside a page */
.lp2-st .st-tabs { margin-bottom: 14px; }
.lp2-st .st-tabs .doc-tab { position: relative; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 6px; }
.lp2-st .st-tabs .doc-tab.active i { color: var(--lp2-h3); }
.lp2-st .st-tabs .doc-tab.st-has-dirty::after {
    content: ""; position: absolute; top: 5px; right: 6px; width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; box-shadow: 0 0 0 2px #eef2f6;
}
@media (max-width: 400px) { .lp2-st .st-tabs .doc-tab i { display: none; } }
.lp2-st [data-st-panel][hidden] { display: none !important; }

/* notes inside section cards read quieter */
.lp2-st .st-sec .lp2-note { margin-bottom: 0; }
.lp2-st .st-foot-note { margin-top: 12px; font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.5; }

/* the sign-out button at the foot of the hub */
.lp2-st .st-signout { margin-top: 6px; color: #b91c1c !important; border-color: #fecaca !important; }
.lp2-st .st-signout:hover { background: #fef2f2 !important; }

/* ---- Pop-ups these pages open ---------------------------------------------------- */
/* The shared pop-up form is a two-column grid that leaves a lone field half
   wide; in these pop-ups every field gets the full width (input-row keeps its pair). */
body.lp2-app .modal .form-stack.st-form > .input-group,
body.lp2-app .modal .form-stack:has(#invite-code-input) > .input-group { grid-column: 1 / -1; }
body.lp2-app .modal .st-form .st-m-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px;
    background: #f8fafc; border: 1px solid #e2e8f0; font-size: .78rem; line-height: 1.45; color: #334155;
}
body.lp2-app .modal .st-form .st-m-note > i { color: #475569; font-size: .95rem; line-height: 1.3; }
body.lp2-app .modal .st-form .st-m-note b { color: #000; }
body.lp2-app .modal .st-form .st-m-note.is-warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
body.lp2-app .modal .st-form .st-m-note.is-warn > i { color: #b45309; }
body.lp2-app .modal .st-form .st-m-note.is-bad { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
body.lp2-app .modal .st-form .st-m-note.is-bad > i { color: #b91c1c; }
body.lp2-app .modal .st-form .st-m-hint { font-size: .72rem; font-weight: 600; color: #475569; margin-top: 4px; }

/* in-app confirm */
body.lp2-app .modal .st-confirm { text-align: left; }
body.lp2-app .modal .st-confirm-ic {
    width: 58px; height: 58px; margin: 4px auto 0; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem;
    color: #047857; background: #ecfdf5;
}
body.lp2-app .modal .st-confirm-ic.is-danger { color: #b91c1c; background: #fef2f2; }
body.lp2-app .modal .st-confirm-text { margin: 2px 0 0; font-size: .92rem; line-height: 1.6; color: #1e293b; }
body.lp2-app .modal .st-confirm-text b { color: #000; }

/* ==========================================================================
   Settings hub (More) — slate
   ========================================================================== */

.st-hub .st-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.st-hub .st-group .lp2-cap { margin-bottom: 8px; }
@media (min-width: 1000px) {
    .st-hub .st-groups { display: block; columns: 2; column-gap: 18px; }
    .st-hub .st-group { break-inside: avoid; margin-bottom: 16px; }
}
.st-hub .st-signout { margin-top: 14px; }

/* ---- Kit: small pieces shared by several settings pages ------------------------- */

.lp2-st .st-mt { margin-top: 12px; }
.lp2-st .st-opt { font-weight: 600; color: #64748b; font-size: .7rem; margin-left: 4px; }
.lp2-st .st-note-btn { margin-top: 8px; }
.lp2-st .lp2-note a { color: color-mix(in srgb, var(--lp2-h3) 80%, #000); font-weight: 750; }
.lp2-st .st-check {
    display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
    font-size: .84rem; font-weight: 600; color: #1e293b; line-height: 1.45;
}
.lp2-st .st-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--lp2-h3); }
.lp2-st .st-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lp2-st .st-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; font-weight: 600; color: #1e293b; line-height: 1.45; }
.lp2-st .st-facts li i { color: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 80%, #000); font-size: .95rem; margin-top: 1px; }
.lp2-st .st-quote { margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: var(--st-soft); border: 1px solid var(--st-line); }
.lp2-st .st-quote small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.lp2-st .st-quote p { margin: 4px 0 0; font-size: .86rem; color: #0f172a; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.lp2-st .st-quote.is-admin { background: #fff7ed; border-color: #fed7aa; }
.lp2-st .st-quote.is-admin small { color: #9a3412; }
.lp2-st .st-steps-v { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lp2-st .st-steps-v li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 0 0 12px; }
.lp2-st .st-steps-v li:last-child { padding-bottom: 0; }
.lp2-st .st-steps-v li > i {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem;
    background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; position: relative; z-index: 1;
}
.lp2-st .st-steps-v li.is-done > i { background: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 12%, #fff); color: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 80%, #000); border-color: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 25%, #fff); }
.lp2-st .st-steps-v li:not(:last-child)::before { content: ""; position: absolute; left: 14.5px; top: 30px; bottom: 0; width: 1px; background: #e2e8f0; }
.lp2-st .st-steps-v li div { display: flex; flex-direction: column; padding-top: 4px; min-width: 0; }
.lp2-st .st-steps-v li b { font-size: .84rem; font-weight: 750; color: #000; }
.lp2-st .st-steps-v li span { font-size: .74rem; font-weight: 600; color: #475569; }
.lp2-st .st-sec.st-danger { border-color: #fecaca; }
.lp2-st .st-sec.st-danger .st-sec-head { padding-bottom: 2px; }

/* ==========================================================================
   My Profile — blue
   ========================================================================== */

.st-profile .st-ava-wrap { position: relative; width: 60px; height: 60px; flex: 0 0 60px; }
.st-profile .st-ava { width: 60px; height: 60px; border-radius: 18px; }
.st-profile .st-ava-cam {
    position: absolute; right: -5px; bottom: -5px; width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center; background: #fff; color: #1e40af; font-size: .78rem;
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .6); border: 2px solid rgba(255, 255, 255, .9);
}
.st-profile .st-ava-cam:hover { background: #eff6ff; }
.st-profile .st-ava-cam:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.st-profile .lp2-cap { margin-top: 4px; }
@media (min-width: 1000px) {
    .st-profile { max-width: 780px; }
}

/* ==========================================================================
   Delete account — rose
   ========================================================================== */

.st-del .lp2-hero-val { font-size: clamp(1.25rem, 4.6vw, 1.6rem); }
@media (min-width: 1000px) { .st-del { max-width: 780px; } }

/* a button inside an empty state keeps its own icon size (the generic
   ".empty-state i" rule is meant for the big illustration icon) */
.lp2-st .empty-state .btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; width: auto; min-height: 42px; padding: 0 16px; }
.lp2-st .empty-state .btn i { font-size: 1rem; margin: 0; width: auto; height: auto; display: inline; opacity: 1; background: none; color: inherit; }

/* ==========================================================================
   Subscription — violet
   ========================================================================== */

.st-sub .lp2-hero-val small { font-size: .5em; }
.st-sub .st-sub-bar { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 16px; flex-wrap: wrap; }
.st-sub .st-sub-bar .lp2-note { flex: 1 1 260px; margin: 0; }
.st-sub .st-sub-bar > .btn { flex-shrink: 0; min-height: 40px; }
.lp2-st .st-cap-link {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800;
    color: var(--lp2-deep); display: inline-flex; align-items: center; gap: 3px; text-transform: none; letter-spacing: 0;
}
.lp2-st .st-cap-link i { font-size: .62rem; }

/* usage meters */
.st-sub .st-usage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 720px) { .st-sub .st-usage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; } }
.st-sub .st-use-top { display: flex; align-items: center; gap: 10px; }
.st-sub .st-use-ic {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 10px; display: grid; place-items: center; font-size: .85rem;
    color: color-mix(in srgb, var(--sx-c) 80%, #000); background: color-mix(in srgb, var(--sx-c) 11%, #fff);
}
.st-sub .st-use-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-sub .st-use-t b { font-size: .84rem; font-weight: 750; color: #000; }
.st-sub .st-use-t span { font-size: .68rem; font-weight: 600; color: #475569; }
.st-sub .st-use-n { font-size: .78rem; font-weight: 650; color: #334155; white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-sub .st-use-n b { color: #000; font-weight: 800; }
.st-sub .st-use-bar { margin: 8px 0 0 40px; height: 7px; border-radius: 99px; background: #eef2f6; overflow: hidden; }
.st-sub .st-use-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--sx-c); }
.st-sub .st-use-note { margin: 4px 0 0 40px; font-size: .7rem; font-weight: 650; color: #475569; }
.st-sub .st-use-note .is-bad { color: #b91c1c; font-weight: 750; }
.st-sub .st-use.is-off .st-use-t b { color: #475569; }
/* A few meters show (what needs attention first); the rest open from a
   bright View more button. */
.st-sub .st-usage.is-collapsed .st-use.is-extra { display: none; }
.st-sub .st-use-more {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 18px auto 2px; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .86rem; font-weight: 800; letter-spacing: .01em; color: #fff;
    background: linear-gradient(135deg, #7c3aed 0%, #a21caf 55%, #db2777 100%);
    box-shadow: 0 10px 22px -10px rgba(162, 28, 175, .65), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.st-sub .st-use-more:hover { filter: brightness(1.07); box-shadow: 0 14px 28px -10px rgba(162, 28, 175, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.st-sub .st-use-more:active { transform: scale(.97); }
.st-sub .st-use-more:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; }
.st-sub .st-use-more i { font-size: .8rem; transition: transform .2s ease; }
.st-sub .st-use-more.is-open i { transform: rotate(180deg); }
@media (max-width: 719.98px) { .st-sub .st-use-more { width: 100%; } }

/* add-on modules */
.st-sub .st-addon-term { font-size: .76rem; font-weight: 600; color: #334155; line-height: 1.5; }
.st-sub .st-addon-term b { color: #000; }
.st-sub .st-owned { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.st-sub .st-owned-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 750; color: #166534; background: #ecfdf5; border: 1px solid #bbf7d0;
}
.st-sub .st-owned-chip em { font-style: normal; font-weight: 600; color: #15803d; opacity: .9; }
.st-sub .st-addons { margin-top: 12px; border: 1px solid var(--st-line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
    .st-sub .st-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-sub .st-addons .st-addon:nth-child(2) { border-top: 0; }
    .st-sub .st-addons .st-addon:nth-child(even) { border-left: 1px solid var(--st-line-2); }
}
.st-sub .st-addon {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; text-align: left; cursor: pointer;
    background: #fff; border: 0; border-top: 1px solid var(--st-line-2); font: inherit; color: inherit;
}
.st-sub .st-addon:first-child { border-top: 0; }
.st-sub .st-addon:hover { background: #faf5ff; }
.st-sub .st-addon-ic {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; font-size: .95rem;
    color: #5b21b6; background: #f3e8ff; border: 1px solid #e9d5ff;
}
.st-sub .st-addon-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-sub .st-addon-t b { font-size: .86rem; font-weight: 750; color: #000; display: flex; align-items: center; gap: 6px; }
.st-sub .st-addon-t > span { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.35; }
.st-sub .st-addon-end { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: 1px; }
.st-sub .st-addon-end b { font-size: .86rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-sub .st-addon-end s { font-size: .66rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.st-sub .st-addon-end em {
    margin-top: 3px; font-style: normal; font-size: .66rem; font-weight: 800; white-space: nowrap;
    color: #5b21b6; background: #f3e8ff; border-radius: 999px; padding: 2px 8px;
}

/* plan cards: a row you swipe on phones, a grid from 720px */
.st-sub .st-plans {
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    margin: 0 -16px 16px; padding: 4px 16px 10px; scroll-padding: 0 16px; scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.st-sub .st-plans::-webkit-scrollbar { display: none; }
.st-sub .st-plan {
    flex: 0 0 min(82%, 320px); scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px;
    padding: 16px; border-radius: 20px; background: #fff; border: 1px solid var(--st-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0;
}
.st-sub .st-plan.is-current { border: 2px solid #7c3aed; box-shadow: 0 16px 34px -22px rgba(91, 33, 182, .6); }
.st-sub .st-plan.is-popular { border-color: #c4b5fd; }
@media (min-width: 720px) {
    .st-sub .st-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); overflow: visible; margin: 0 0 16px; padding: 0; }
    .st-sub .st-plan { flex: none; }
}
.st-sub .st-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.st-sub .st-plan-name { font-size: 1.02rem; font-weight: 800; color: #000; letter-spacing: -.01em; overflow-wrap: anywhere; }
.st-sub .st-plan-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    font-size: .64rem; font-weight: 800; color: #5b21b6; background: #f3e8ff; border: 1px solid #e9d5ff;
}
.st-sub .st-plan-badge.is-current { color: #fff; background: #6d28d9; border-color: #6d28d9; }
.st-sub .st-plan-price { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #000; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-sub .st-plan-price span { font-family: var(--font-body, inherit); font-size: .74rem; font-weight: 650; color: #475569; letter-spacing: 0; margin-left: 4px; }
.st-sub .st-plan-desc { margin: 0; font-size: .76rem; font-weight: 600; color: #475569; line-height: 1.45; }
.st-sub .st-plan-feats { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--st-line-2); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.st-sub .st-plan-feats li { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; font-weight: 650; color: #0f172a; line-height: 1.35; }
.st-sub .st-plan-feats li i { font-size: .8rem; margin-top: 1px; color: #059669; }
.st-sub .st-plan-feats li.is-off { color: #64748b; }
.st-sub .st-plan-feats li.is-off span { text-decoration: line-through; text-decoration-color: #cbd5e1; }
.st-sub .st-plan-feats li.is-off i { color: #94a3b8; }
.st-sub .st-plan-more {
    align-self: flex-start; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
    font-size: .76rem; font-weight: 800; color: #5b21b6; display: inline-flex; align-items: center; gap: 3px;
}
.st-sub .st-plan-more i { font-size: .62rem; }
.st-sub .st-plan-act { min-height: 42px; }
.st-sub .st-plan-lock { font-size: .7rem; font-weight: 600; color: #475569; line-height: 1.45; text-align: center; margin-top: -4px; }

/* ---- Subscription pop-ups -------------------------------------------------------- */

body.lp2-app .modal .st-m-desc { margin: 0 0 12px; font-size: .84rem; color: #334155; line-height: 1.55; }
body.lp2-app .modal .st-m-feats { border: 1px solid #e7ebf1; border-radius: 16px; padding: 8px 14px 12px; background: #fafbfd; }
body.lp2-app .modal .st-m-hint { font-size: .74rem; font-weight: 600; color: #475569; margin: 0 0 10px; }
body.lp2-app .modal .st-cmp-wrap { overflow: auto; border: 1px solid #e7ebf1; border-radius: 16px; max-height: 68vh; }
body.lp2-app .modal .st-cmp { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; }
body.lp2-app .modal .st-cmp th, body.lp2-app .modal .st-cmp td {
    padding: 10px 12px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: top; font-size: .8rem; color: #0f172a;
}
body.lp2-app .modal .st-cmp thead th { position: sticky; top: 0; z-index: 2; background: #f6f8fb; min-width: 150px; font-weight: 700; }
body.lp2-app .modal .st-cmp thead th b { display: block; font-size: .86rem; font-weight: 800; color: #000; }
body.lp2-app .modal .st-cmp thead th span { display: block; margin-top: 2px; font-size: .7rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .st-cmp thead th em {
    display: inline-block; margin-top: 3px; font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: #6d28d9; border-radius: 999px; padding: 1px 7px;
}
/* the feature column stays put when you swipe — solid, so cells never show through */
body.lp2-app .modal .st-cmp th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 140px; max-width: 170px; box-shadow: 1px 0 0 #e7ebf1; }
body.lp2-app .modal .st-cmp thead th:first-child { z-index: 3; background: #f6f8fb; }
body.lp2-app .modal .st-cmp tbody th { font-weight: 750; color: #000; }
body.lp2-app .modal .st-cmp tbody th i { margin-right: 8px; color: #6d28d9; }
body.lp2-app .modal .st-cmp tbody tr:nth-child(even) td { background: #fbfcfe; }
body.lp2-app .modal .st-cmp .is-current { background: #faf5ff !important; }
body.lp2-app .modal .st-cmp-yes { color: #15803d; font-weight: 750; white-space: nowrap; }
body.lp2-app .modal .st-cmp-no { color: #64748b; font-weight: 600; white-space: nowrap; }
body.lp2-app .modal .st-cmp-num { color: #000; font-weight: 800; }
body.lp2-app .modal .st-cmp-mods small { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #475569; margin-bottom: 3px; }
body.lp2-app .modal .st-cmp-mod { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; color: #1e293b; }
body.lp2-app .modal .st-cmp-mod.is-off { opacity: .5; }

/* change plan / add a module */
body.lp2-app .modal .st-m-head {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
    background: linear-gradient(135deg, #f5f3ff, #fff); border: 1px solid #e9d5ff;
}
body.lp2-app .modal .st-m-head.is-down { background: linear-gradient(135deg, #fffbeb, #fff); border-color: #fde68a; }
body.lp2-app .modal .st-m-head-ic {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem;
    color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}
body.lp2-app .modal .st-m-head.is-down .st-m-head-ic { background: linear-gradient(135deg, #f59e0b, #b45309); }
body.lp2-app .modal .st-m-head > div { min-width: 0; display: flex; flex-direction: column; }
body.lp2-app .modal .st-m-head small { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5b21b6; }
body.lp2-app .modal .st-m-head.is-down small { color: #92400e; }
body.lp2-app .modal .st-m-head b { font-size: 1.02rem; font-weight: 800; color: #000; overflow-wrap: anywhere; }
body.lp2-app .modal .st-m-head span { font-size: .76rem; font-weight: 650; color: #475569; }
body.lp2-app .modal .st-m-box { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #e7ebf1; border-radius: 16px; background: #fff; }
body.lp2-app .modal .st-m-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .86rem; color: #334155; }
body.lp2-app .modal .st-m-line label { font-size: .86rem; font-weight: 650; color: #334155; margin: 0; }
body.lp2-app .modal .st-m-line b { color: #000; font-weight: 800; text-align: right; }
body.lp2-app .modal .st-m-line select { min-width: 150px; max-width: 60%; height: 42px; }
body.lp2-app .modal .st-m-total { padding-top: 12px; border-top: 1px dashed #e2e8f0; }
body.lp2-app .modal .st-m-total b { font-size: 1.15rem; color: #5b21b6; font-variant-numeric: tabular-nums; }
body.lp2-app .modal .st-m-coupon label { display: block; font-size: .76rem; font-weight: 750; color: #334155; margin-bottom: 5px; }
body.lp2-app .modal .st-m-coupon-row { display: flex; gap: 8px; align-items: stretch; }
body.lp2-app .modal .st-m-coupon-row input { flex: 1; min-width: 0; text-transform: uppercase; height: 42px; }
body.lp2-app .modal .st-m-coupon-row .btn { flex-shrink: 0; min-height: 42px; }
body.lp2-app .modal .st-m-coupon .st-m-hint { margin: 6px 0 0; }
body.lp2-app .modal .st-m-coupon .st-m-hint:empty { display: none; }
body.lp2-app .modal .st-m-breakdown {
    font-size: .78rem; color: #334155; line-height: 1.6; background: #f8fafc; border: 1px solid #e7ebf1; border-radius: 12px; padding: 9px 12px;
}
body.lp2-app .modal .st-m-list { margin: 6px 0 0; padding-left: 18px; }
body.lp2-app .modal .st-m-bad { color: #b91c1c; font-weight: 750; }
body.lp2-app .modal .st-m-head-ic i { color: #fff !important; font-size: 1.3rem !important; opacity: 1 !important; }
@media (max-width: 520px) {
    body.lp2-app .modal .st-cmp th:first-child { min-width: 112px; max-width: 124px; font-size: .74rem; }
    body.lp2-app .modal .st-cmp tbody th i { display: none; }
    body.lp2-app .modal .st-cmp thead th { min-width: 118px; }
    body.lp2-app .modal .st-cmp th, body.lp2-app .modal .st-cmp td { padding: 9px 10px; }
}

/* ==========================================================================
   Business Settings — indigo
   ========================================================================== */

.st-eb .st-sec .lp2-lbl { margin: 6px 0 -4px; }
.st-eb .st-sec .form-stack > .lp2-lbl:first-child { margin-top: 0; }
.st-eb .st-row-2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.st-eb .st-hint-top { margin: 0 0 8px; }
.st-eb .st-btn-row, .st-eb .st-bpa .st-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-eb .st-dispatch .input-group { margin-top: 8px; }
.st-eb .st-loc-status {
    margin-top: 8px; padding: 8px 10px; border-radius: 12px; font-size: .78rem; font-weight: 700; line-height: 1.45;
    color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
}
.st-eb .st-loc-status { color: #92400e !important; }
.st-eb .st-loc-status.is-set { color: #166534 !important; background: #f0fdf4; border-color: #bbf7d0; }
/* the email field gets the full width (it used to share a row and cut long addresses) */
.st-eb #eb-email { width: 100%; }

/* logo: one compact row instead of a tall drop box */
.st-eb .st-logo-up {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 12px; min-height: 0; text-align: left;
    border-radius: 14px; border: 1px dashed #c7d2fe; background: #f8fafc; color: #3730a3; position: relative;
}
.st-eb .st-logo-up.has-file { border-style: solid; border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.st-eb .st-logo-up > img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: 0 0 52px; background: #fff; }
.st-eb .st-logo-up > i { font-size: 1.3rem; margin: 0; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: #fff; }
.st-eb .st-logo-up > span { font-size: .84rem; font-weight: 750; }
.st-eb .st-logo-up .file-previews { margin-top: 0 !important; }
.st-eb .st-logo-up .file-remove-btn { position: relative; z-index: 2; margin-top: 0 !important; }

/* taxes: switch rows and radio cards */
.lp2-st .st-switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
    padding: 11px 0; border-top: 1px solid var(--st-line-2);
}
.lp2-st .st-switch-row.st-switch-main { border-top: 0; padding-top: 0; }
.lp2-st .st-switch-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp2-st .st-switch-t b { font-size: .88rem; font-weight: 750; color: #000; }
.lp2-st .st-switch-t > span { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4; }
.lp2-st .st-rate { font-style: normal; font-weight: 800; color: #5b21b6; margin-left: 4px; }
body[data-app-page] .lp2-st input.st-switch {
    -webkit-appearance: none; appearance: none; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; padding: 0;
    border-radius: 999px; border: 0; background: #cbd5e1; position: relative; cursor: pointer; transition: background .18s ease;
}
body[data-app-page] .lp2-st input.st-switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .18s ease;
}
body[data-app-page] .lp2-st input.st-switch:checked { background: var(--lp2-h3); }
body[data-app-page] .lp2-st input.st-switch:checked::after { transform: translateX(18px); }
body[data-app-page] .lp2-st input.st-switch:disabled { opacity: .5; cursor: not-allowed; }
body[data-app-page] .lp2-st input.st-switch:focus-visible { outline: 2px solid var(--lp2-h3); outline-offset: 2px; }
.lp2-st .st-taxes { transition: opacity .15s ease; }
.lp2-st .st-taxes .lp2-lbl { margin: 4px 0 2px; }
.lp2-st .st-taxmode { display: flex; flex-direction: column; gap: 8px; }
.lp2-st .st-radio-card {
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; cursor: pointer;
    border: 1.5px solid #e2e8f0 !important; background: #fff;
}
.lp2-st .st-radio-card:has(input:checked) { border-color: var(--lp2-h3) !important; background: color-mix(in srgb, var(--lp2-h3) 5%, #fff); }
.lp2-st .st-radio-card input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--lp2-h3); }
.lp2-st .st-radio-card span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp2-st .st-radio-card b { font-size: .86rem; font-weight: 750; color: #000; }
.lp2-st .st-radio-card small { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4; }

/* payment details: two cards side by side where there is room */
.st-eb .st-bpa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .st-eb .st-bpa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.st-eb .st-bpa { border: 1px solid var(--st-line); border-radius: 16px; padding: 12px; background: #fff; display: flex; flex-direction: column; gap: 12px; }
.st-eb .st-bpa.is-form { background: #fafbfd; }
.st-eb .st-bpa-head { display: flex; align-items: center; gap: 10px; }
.st-eb .st-bpa-ic {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: .95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--sx-c) 88%, #fff), color-mix(in srgb, var(--sx-c) 82%, #000));
}
.st-eb .st-bpa-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-eb .st-bpa-t b { font-size: .88rem; font-weight: 800; color: #000; }
.st-eb .st-bpa-t span { font-size: .72rem; font-weight: 600; color: #475569; }
.st-eb .st-bpa-acct { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--st-soft); border: 1px solid var(--st-line-2); }
.st-eb .st-bpa-acct b { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: #000; letter-spacing: .02em; overflow-wrap: anywhere; }
.st-eb .st-bpa-acct span { font-size: .76rem; font-weight: 650; color: #334155; }
.st-eb .st-bpa-acct em { font-style: normal; font-size: .8rem; font-weight: 800; color: #0f172a; }
.st-eb .st-bpa-acct small { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.45; margin-top: 2px; }
.lp2-st .st-btn-danger { color: #b91c1c !important; border-color: #fecaca !important; }
.lp2-st .st-btn-danger:hover { background: #fef2f2 !important; }
.st-eb .st-otp { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 12px; background: #fff; border: 1px dashed #cbd5e1; }

/* invoice look: design gallery (2 a row on phones, 3 on wider screens) */
.st-eb .st-dt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .st-eb .st-dt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; } }
.st-eb .st-dt-card {
    position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; cursor: pointer; overflow: hidden;
    border: 1.5px solid var(--st-line); border-radius: 16px; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.st-eb .st-dt-card:hover { border-color: #cbd5e1; }
.st-eb .st-dt-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.st-eb .st-dt-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--lp2-h3) 45%, transparent); outline-offset: 2px; }
.st-eb .st-dt-card.is-on { border-color: var(--lp2-h3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp2-h3) 16%, transparent); }
.st-eb .st-dt-thumb {
    position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; padding: 9px 9px 0;
    background: var(--st-soft); border-bottom: 1px solid var(--st-line-2);
}
.st-eb .st-dt-thumb .dt-doc { border-radius: 6px 6px 0 0; box-shadow: 0 1px 3px rgba(15, 23, 42, .14), 0 0 0 1px rgba(15, 23, 42, .04); }
.st-eb .st-dt-thumb::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none;
    background: linear-gradient(to bottom, rgba(246, 248, 251, 0), var(--st-soft) 92%);
}
.st-eb .st-dt-check {
    position: absolute; top: 7px; right: 7px; z-index: 2; display: none; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--lp2-h3); color: #fff; font-size: .85rem; box-shadow: 0 1px 4px rgba(15, 23, 42, .25);
}
.st-eb .st-dt-card.is-on .st-dt-check { display: grid; }
.st-eb .st-dt-meta { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px 11px; }
.st-eb .st-dt-meta b { font-size: .86rem; font-weight: 800; color: #000; }
.st-eb .st-dt-meta span { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.38; }
/* the large preview */
.st-eb #eb-doc-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px; border-radius: 16px; background: var(--st-soft); border: 1px solid var(--st-line-2); }
.st-eb .st-dt-live { width: 100%; max-width: 460px; }
.st-eb .st-dt-live .dt-doc { border-radius: 8px; box-shadow: 0 2px 10px rgba(15, 23, 42, .1), 0 0 0 1px rgba(15, 23, 42, .05); }
.st-eb .st-dt-live-note { font-size: .74rem; font-weight: 700; color: #475569; }

/* invoice colours */
.st-eb .eb-color-field { border-radius: 14px; }
.st-eb #eb-doc-c1-hex, .st-eb #eb-doc-c2-hex { text-transform: uppercase; }
.st-eb #eb-doc-c1-hex::placeholder, .st-eb #eb-doc-c2-hex::placeholder { text-transform: none; }

@media (min-width: 1100px) {
    .st-eb .st-tabs { display: inline-flex; }
}

/* ---- Business pop-ups (create business, confirm account name) ------------------- */

body.lp2-app .modal .st-m .file-upload.st-up {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; text-align: left;
    border-radius: 14px; min-height: 0;
}
body.lp2-app .modal .st-m .file-upload.st-up > i { font-size: 1.2rem; margin: 0; }
body.lp2-app .modal .st-m .file-upload.st-up > span { font-size: .84rem; font-weight: 700; }
body.lp2-app .modal .st-m .file-upload.st-up .file-previews,
body.lp2-app .modal .st-m .file-upload.st-up .file-remove-btn { margin-top: 0 !important; position: relative; z-index: 2; }
body.lp2-app .modal .st-m-more > summary { cursor: pointer; font-size: .84rem; font-weight: 800; color: #047857; }
body.lp2-app .modal .st-m-more > summary span { font-weight: 600; color: #475569; margin-left: 4px; }
body.lp2-app .modal .st-m .st-m-hint i { margin-right: 4px; }
body.lp2-app .modal .st-m-name {
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding: 16px 14px;
    border-radius: 16px; background: linear-gradient(160deg, #ecfdf5, #fff); border: 1px solid #a7f3d0;
}
body.lp2-app .modal .st-m-name-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #059669; color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
body.lp2-app .modal .st-m-name small { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #047857; }
body.lp2-app .modal .st-m-name b { font-size: 1.1rem; font-weight: 800; color: #000; overflow-wrap: anywhere; }
body.lp2-app .modal .st-m-name span { font-size: .8rem; font-weight: 700; color: #166534; }
body.lp2-app .modal .st-m-p { margin: 0; font-size: .84rem; line-height: 1.5; color: #334155; text-align: center; }
@media (min-width: 1000px) { .st-eb { max-width: 1000px; } }

/* ==========================================================================
   Notification settings — amber
   ========================================================================== */

.st-nf .lp2-hero-val small { font-size: .5em; }
.st-nf .st-nf-ch { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--st-line-2); flex-wrap: wrap; }
.st-nf .st-nf-ch:first-child { border-top: 0; padding-top: 0; }
.st-nf .st-nf-ch:last-child { padding-bottom: 0; }
.st-nf .st-nf-ch-ic {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; font-size: .95rem;
    color: color-mix(in srgb, var(--sx-c) 80%, #000); background: color-mix(in srgb, var(--sx-c) 11%, #fff);
}
.st-nf .st-nf-ch-t { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-nf .st-nf-ch-t b { font-size: .88rem; font-weight: 750; color: #000; overflow-wrap: anywhere; }
.st-nf .st-nf-ch-t > span { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4; }
.st-nf .st-nf-ch-t .st-nf-warn { color: #92400e; font-weight: 650; }
.st-nf .st-nf-ch .st-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-left: 48px; }
@media (min-width: 560px) { .st-nf .st-nf-ch .st-btn-row { margin-left: 0; } }

/* the grid: one row per message type, one column per channel */
.st-nf .st-nf-grid { margin: -2px -4px 0; }
.st-nf .st-nf-row {
    display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 44px); align-items: center; column-gap: 4px;
    padding: 11px 4px; border-top: 1px solid var(--st-line-2);
}
.st-nf .st-nf-headrow {
    position: sticky; top: 0; z-index: 3; padding: 6px 4px; border-top: 0;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--st-line);
}
.st-nf .st-nf-headrow + .st-nf-row { border-top: 0; }
.st-nf .st-nf-col { display: flex; flex-direction: column; align-items: center; gap: 1px; color: #92400e; }
.st-nf .st-nf-col i { font-size: .95rem; }
.st-nf .st-nf-col small { font-size: .58rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #334155; }
.st-nf .st-nf-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.st-nf .st-nf-t b { font-size: .86rem; font-weight: 750; color: #000; line-height: 1.3; }
.st-nf .st-nf-t > span { font-size: .72rem; font-weight: 600; color: #475569; line-height: 1.4; }
.st-nf .st-nf-always {
    grid-column: 1 / -1; display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; padding: 7px 10px; border-radius: 10px;
    font-style: normal; font-size: .7rem; font-weight: 650; line-height: 1.4; color: #78350f; background: #fffbeb; border: 1px solid #fde68a;
}
.st-nf .st-nf-cell { display: grid; place-items: center; cursor: pointer; margin: 0; }
.st-nf .st-nf-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.st-nf .st-nf-cell > span {
    width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
    background: #fff; border: 1.5px solid #cbd5e1; color: transparent; font-size: .95rem;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.st-nf .st-nf-cell:hover > span { border-color: #d97706; }
.st-nf .st-nf-cell input:checked + span { background: #d97706; border-color: #d97706; color: #fff; }
.st-nf .st-nf-cell input:focus-visible + span { outline: 2px solid #b45309; outline-offset: 2px; }
.st-nf .st-nf-cell input:disabled + span { background: #f1f5f9; border-color: #e2e8f0; color: transparent; cursor: not-allowed; }
.st-nf .st-nf-cell input:disabled:checked + span { background: #e2e8f0; color: #94a3b8; }
@media (min-width: 720px) {
    .st-nf .st-nf-row { grid-template-columns: minmax(0, 1fr) repeat(4, 72px); }
    .st-nf .st-nf-col small { font-size: .62rem; }
}
@media (max-width: 360px) {
    .st-nf .st-nf-row { grid-template-columns: minmax(0, 1fr) repeat(4, 38px); column-gap: 2px; }
    .st-nf .st-nf-cell > span { width: 28px; height: 28px; }
}
@media (min-width: 1000px) { .st-nf { max-width: 860px; } }

/* ==========================================================================
   Verification — teal
   ========================================================================== */

/* step tracker: Pay → Documents → Review → Verified */
.st-vf .st-steps {
    list-style: none; margin: 0 0 16px; padding: 12px 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: #fff; border: 1px solid var(--st-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.st-vf .st-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; min-width: 0; }
.st-vf .st-steps li:not(:first-child)::before {
    content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: #e2e8f0; z-index: 0;
}
.st-vf .st-steps li.is-done:not(:first-child)::before,
.st-vf .st-steps li.is-active:not(:first-child)::before { background: #0d9488; }
.st-vf .st-steps li > span {
    position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem;
    background: #f1f5f9; color: #64748b; border: 2px solid #fff; box-shadow: 0 0 0 1px #e2e8f0;
}
.st-vf .st-steps li.is-done > span { background: #0d9488; color: #fff; box-shadow: 0 0 0 1px #0d9488; }
.st-vf .st-steps li.is-active > span { background: #ccfbf1; color: #115e59; box-shadow: 0 0 0 2px #0d9488; }
.st-vf .st-steps li b { font-size: .68rem; font-weight: 750; color: #475569; }
.st-vf .st-steps li.is-active b, .st-vf .st-steps li.is-done b { color: #000; }

.st-vf .st-perks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 520px) { .st-vf .st-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-vf .st-perks span {
    display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 12px;
    background: #f0fdfa; border: 1px solid #ccfbf1; font-size: .8rem; font-weight: 700; color: #134e4a;
}
.st-vf .st-perks i { color: #0d9488; }
.st-vf .st-facts li span b { color: #000; }
.st-vf .st-pay {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #f0fdfa, #fff); border: 1px solid #99f6e4;
}
.st-vf .st-pay-fee { display: flex; flex-direction: column; min-width: 0; }
.st-vf .st-pay-fee b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: #000; letter-spacing: -.02em; }
.st-vf .st-pay-fee span { font-size: .72rem; font-weight: 650; color: #475569; }
.st-vf .st-pay .btn { flex: 1 1 180px; }

/* documents */
.st-vf .st-drops { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .st-vf .st-drops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-vf .st-drop-wrap .lp2-lbl { margin-bottom: 6px; justify-content: flex-start; gap: 4px; }
.st-vf .st-drop-prev { margin-bottom: 8px; }
.st-vf .upload-drop-zone.st-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
    min-height: 118px; padding: 16px 12px; border-radius: 16px; cursor: pointer;
    border: 2px dashed #99f6e4; background: #f0fdfa; transition: background .15s ease, border-color .15s ease;
}
.st-vf .upload-drop-zone.st-drop:hover, .st-vf .upload-drop-zone.st-drop.is-over { border-color: #0d9488; background: #ccfbf1; }
.st-vf .upload-drop-zone.st-drop:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; }
.st-vf .upload-drop-zone.st-drop > i { font-size: 1.5rem; color: #0f766e; }
.st-vf .upload-drop-zone.st-drop > b { font-size: .86rem; font-weight: 800; color: #134e4a; overflow-wrap: anywhere; }
.st-vf .upload-drop-zone.st-drop > span { font-size: .72rem; font-weight: 600; color: #475569; }
.st-vf .upload-drop-zone.st-drop.has-file { border-style: solid; border-color: #0d9488; background: #fff; }
.st-vf .st-vf-submit { margin: 4px 0 16px; }

/* submitted document tiles: picture, or the file name for a PDF */
.st-vf .st-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.st-vf .st-doc { margin: 0; border: 1px solid var(--st-line); border-radius: 14px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.st-vf .st-doc img { width: 100%; height: 120px; object-fit: cover; display: block; background: #f1f5f9; }
.st-vf .st-doc .st-doc-file { display: none; }
.st-vf .st-doc.is-file .st-doc-file {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 12px;
    background: #f8fafc; text-align: center;
}
.st-vf .st-doc-file i { font-size: 1.8rem; color: #b91c1c; }
.st-vf .st-doc-file b { font-size: .72rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; line-height: 1.35; }
.st-vf .st-doc figcaption { padding: 7px 10px; font-size: .72rem; font-weight: 750; color: #334155; border-top: 1px solid var(--st-line-2); }
.st-vf .st-drop-prev .st-doc { flex-direction: row; align-items: center; }
.st-vf .st-drop-prev .st-doc img, .st-vf .st-drop-prev .st-doc.is-file .st-doc-file { width: 64px; height: 52px; min-height: 0; flex: 0 0 64px; padding: 4px; }
.st-vf .st-drop-prev .st-doc-file b { display: none; }
.st-vf .st-drop-prev .st-doc figcaption { border-top: 0; font-weight: 650; }

/* verified: the badge as buyers see it */
.st-vf .st-badge-demo {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; border-radius: 16px;
    background: #f8fafc; border: 1px dashed #cbd5e1;
}
.st-vf .st-badge-name { font-size: 1rem; font-weight: 800; color: #000; }
.st-vf .verif-badge-large { color: #047857; }
@media (min-width: 1000px) { .st-vf { max-width: 860px; } }

/* ==========================================================================
   Payment gateways — cyan
   ========================================================================== */

.st-pg .lp2-hero-val small { font-size: .5em; }
.st-pg .st-saved-tag { font-weight: 700; color: #15803d; font-size: .7rem; margin-left: 4px; }
.st-pg .st-pg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.st-pg .st-pg-foot .st-hint { margin: 0; flex: 1 1 200px; }
.lp2-st .st-note-warn { background: #fffbeb !important; border-color: #fde68a !important; color: #78350f !important; }
.lp2-st .st-note-warn > i { color: #b45309 !important; }
.st-pg .st-webhook { padding: 12px; border-radius: 14px; background: #f0f9ff; border: 1px solid #bae6fd; display: flex; flex-direction: column; gap: 10px; }
.st-pg .st-webhook-t { display: flex; gap: 8px; align-items: flex-start; }
.st-pg .st-webhook-t > i { color: #0369a1; font-size: 1rem; margin-top: 1px; }
.st-pg .st-webhook-t b { display: block; font-size: .82rem; font-weight: 800; color: #000; }
.st-pg .st-webhook-t span { display: block; font-size: .72rem; font-weight: 600; color: #334155; line-height: 1.45; }
.st-pg .st-webhook-row { display: flex; gap: 8px; align-items: stretch; }
body[data-app-page="payment-gateways"] .st-pg .st-webhook-row input {
    flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .74rem; padding: 8px 10px; height: 38px; background: #fff;
}
.st-pg .st-webhook-row .btn { flex-shrink: 0; width: 42px; padding: 0; justify-content: center; }
@media (min-width: 1100px) {
    .st-pg { max-width: 1040px; }
    .st-pg .st-pg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
}

/* ==========================================================================
   SMS — rose
   ========================================================================== */

.st-sms .lp2-hero-val small { font-size: .5em; }
@media (min-width: 1000px) { .st-sms { max-width: 780px; } }

/* ==========================================================================
   Add Business — emerald
   ========================================================================== */

.st-addbiz .lp2-hero-val small { font-size: .5em; }
.lp2-st .st-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.lp2-st .st-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; text-align: left; cursor: pointer;
    background: #fff; border: 1px solid var(--st-line); border-radius: 18px; font: inherit; color: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, transform .12s ease;
}
.lp2-st .st-tile:hover { border-color: #94a3b8; }
.lp2-st .st-tile:active { transform: scale(.99); }
.lp2-st .st-tile-ic {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; margin-bottom: 4px;
    color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0;
}
.lp2-st .st-tile.is-primary { background: linear-gradient(150deg, #ecfdf5, #fff 70%); border-color: #a7f3d0; }
.lp2-st .st-tile.is-primary .st-tile-ic { color: #fff; background: linear-gradient(135deg, #10b981, #047857); border-color: transparent; }
.lp2-st .st-tile b { font-size: .9rem; font-weight: 800; color: #000; }
.lp2-st .st-tile > span:last-child { font-size: .74rem; font-weight: 600; color: #475569; line-height: 1.4; }
.st-addbiz .st-biz-logo { overflow: hidden; background: var(--sx-c); color: #fff; border: 0; }
.st-addbiz .st-biz-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-addbiz .sx-end .lp2-tag i { font-size: .45rem; }
.lp2-st .sx-act.st-act-danger { color: #b91c1c; border-color: #fecaca; }
.lp2-st .sx-act.st-act-danger:hover { background: #fef2f2; }
@media (max-width: 360px) { .lp2-st .st-tiles { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1000px) { .st-addbiz { max-width: 860px; } }

/* ==========================================================================
   Branches — pink
   ========================================================================== */

.st-br .lp2-hero-val small { font-size: .5em; }
.st-br .st-muted { color: #64748b; font-style: italic; }
.st-br .sx-meta .bi-geo-alt { font-size: .7rem; }
.st-br .lp2-row .sx-ico { font-size: .74rem; }
.st-br .st-on-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
    font: inherit; font-size: .72rem; font-weight: 800; white-space: nowrap;
    color: #fff; background: linear-gradient(135deg, #db2777, #9d174d); border: 0; box-shadow: 0 8px 16px -10px rgba(157, 23, 77, .8);
}
.st-br .st-on-btn:hover { filter: brightness(1.06); }
.st-br .st-on-btn:disabled { opacity: .6; cursor: wait; }
.st-br .lp2-dim .st-on-btn { opacity: 1; }
/* a switched-off row stays readable: only the avatar and figures are muted */
.st-br .lp2-dim { opacity: 1; }
.st-br .lp2-dim .sx-ico { filter: grayscale(1); opacity: .7; }
.st-br .lp2-dim .sx-ref { color: #334155; }
@media (min-width: 1000px) { .st-br { max-width: 980px; } }

/* ---- Branch pop-ups ------------------------------------------------------------ */

body.lp2-app .modal .st-m-btns { display: flex; gap: 8px; flex-wrap: wrap; }
body.lp2-app .modal .st-m-loc .st-m-hint { margin-top: 6px; }
body.lp2-app .modal .st-m-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.lp2-app .modal .st-m-stats > div {
    min-width: 0; padding: 10px 11px; border-radius: 14px; background: #fdf2f8; border: 1px solid #fbcfe8;
    display: flex; flex-direction: column; gap: 2px;
}
body.lp2-app .modal .st-m-stats small { font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #9d174d; }
body.lp2-app .modal .st-m-stats b { font-size: .92rem; font-weight: 800; color: #000; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
@media (max-width: 420px) {
    body.lp2-app .modal .st-m-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.lp2-app .modal .st-m-stats > div:first-child { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; }
}

/* ==========================================================================
   Menu items — blue
   ========================================================================== */

.st-mi .lp2-hero-val small { font-size: .5em; }

/* the phone's bottom bar, drawn as a phone bar */
.st-mi .bottom-menu-preview.st-mi-preview {
    margin: 0 0 14px; padding: 10px 6px 8px; border-radius: 18px; border: 1px solid #1e293b;
    background: linear-gradient(180deg, #fff, #f8fafc); box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .6), inset 0 -3px 0 #e2e8f0;
}
.st-mi .st-mi-preview .bottom-menu-preview-item { color: #475569; font-size: .6rem; font-weight: 750; }
.st-mi .st-mi-preview .bottom-menu-preview-item i { font-size: 1.05rem; color: #334155; }
.st-mi .st-mi-preview .bottom-menu-preview-item.fixed,
.st-mi .st-mi-preview .bottom-menu-preview-item.fixed i { color: #1d4ed8; }

/* shortcut groups: open the ones you use */
.st-mi .st-mi-grp { border-top: 1px solid var(--st-line-2); }
.st-mi .st-mi-grp:first-of-type { border-top: 0; }
.st-mi .st-mi-grp > summary {
    display: flex; align-items: center; gap: 8px; padding: 10px 2px; cursor: pointer; list-style: none;
    font-size: .74rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #334155;
}
.st-mi .st-mi-grp > summary::-webkit-details-marker { display: none; }
.st-mi .st-mi-grp > summary span { flex: 1; min-width: 0; }
.st-mi .st-mi-grp > summary em { font-style: normal; font-size: .68rem; font-weight: 750; letter-spacing: 0; text-transform: none; color: #1e40af; }
.st-mi .st-mi-grp > summary i { font-size: .72rem; color: #64748b; transition: transform .15s ease; }
.st-mi .st-mi-grp[open] > summary i { transform: rotate(180deg); }
.st-mi .st-mi-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 0 12px; }
@media (min-width: 720px) { .st-mi .st-mi-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .st-mi .st-mi-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-mi .bottom-menu-choice-card.st-mi-chip {
    position: relative; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 10px;
    border-radius: 14px; border: 1px solid var(--st-line); background: #fff; box-shadow: none;
}
.st-mi .st-mi-chip > .bi:first-of-type { font-size: 1rem; color: #1e40af; flex-shrink: 0; }
.st-mi .st-mi-chip > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-mi .st-mi-chip b { font-size: .8rem; font-weight: 750; color: #000; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.st-mi .st-mi-chip small { font-size: .64rem; font-weight: 650; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-mi .st-mi-chip .st-mi-tick { font-size: .95rem; color: #2563eb; opacity: 0; transform: scale(.8); transition: opacity .14s ease, transform .14s ease; flex-shrink: 0; }
.st-mi .bottom-menu-choice-card.st-mi-chip.selected { border-color: #93c5fd; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }
.st-mi .st-mi-chip.selected .st-mi-tick { opacity: 1; transform: none; }
.st-mi .st-mi-chip:focus-within { outline: 2px solid #2563eb; outline-offset: 1px; }

/* sidebar groups */
.st-mi .st-mi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 900px) { .st-mi .st-mi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.st-mi .st-mi-card { background: #fff; border: 1px solid var(--st-line); border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); overflow: hidden; }
.st-mi .st-mi-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.st-mi .st-mi-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1rem; color: #1e40af; background: #eff6ff; border: 1px solid #dbeafe; }
.st-mi .st-mi-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.st-mi .st-mi-t b { font-size: .9rem; font-weight: 800; color: #000; }
.st-mi .st-mi-t span { font-size: .72rem; font-weight: 650; color: #475569; }
.st-mi .st-mi-card.is-off .st-mi-ic { filter: grayscale(1); opacity: .6; }
.st-mi .st-mi-card.is-off .st-mi-t b { color: #475569; }
.st-mi .st-mi-more { border-top: 1px solid var(--st-line-2); }
.st-mi .st-mi-more > summary {
    display: flex; align-items: center; justify-content: space-between; padding: 9px 14px; cursor: pointer; list-style: none;
    font-size: .74rem; font-weight: 750; color: #1e40af; background: #fafbfd;
}
.st-mi .st-mi-more > summary::-webkit-details-marker { display: none; }
.st-mi .st-mi-more > summary i { font-size: .72rem; transition: transform .15s ease; }
.st-mi .st-mi-more[open] > summary i { transform: rotate(180deg); }
.st-mi .st-mi-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--st-line-2); min-height: 46px; }
.st-mi .st-mi-row-t { flex: 1; min-width: 0; font-size: .84rem; font-weight: 650; color: #0f172a; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-mi .st-mi-card.is-off .st-mi-row-t { color: #64748b; }
/* the app-wide switch, in this page's colour */
.st-mi .menu-toggle-control input:checked + span { background: #2563eb; box-shadow: none; }
@media (min-width: 1000px) { .st-mi { max-width: 1040px; } }

/* ==========================================================================
   Settings > Printer (printer-settings) — assets/js/app/printer.js
   ========================================================================== */
.st-pr .pr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
@media (min-width: 1100px) { .st-pr .pr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.st-pr .pr-col { min-width: 0; }
.st-pr .st-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-pr .pr-actions { margin-top: 12px; }
.st-pr .pr-dev {
    display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--st-line-2); min-width: 0;
}
.st-pr .pr-dev.is-saved { border-top: 0; padding-top: 0; }
.st-pr .pr-devs { margin-top: 10px; }
.st-pr .pr-devs > .pr-dev:first-child { border-top: 0; }
.st-pr .pr-dev-ic {
    width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem;
    color: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 80%, #000); background: color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--sx-c, var(--lp2-h3)) 22%, #fff);
}
.st-pr .pr-dev-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-pr .pr-dev-t b { font-size: .9rem; font-weight: 750; color: #000; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.st-pr .pr-dev-t > span { font-size: .74rem; font-weight: 600; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-pr .pr-dev > .btn, .st-pr .pr-dev > .st-chip { flex-shrink: 0; }
.st-pr .pr-badge, .st-pr .pr-paired {
    font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px; border: 1px solid; line-height: 1.4;
}
.st-pr .pr-badge { color: #1e40af; background: #eff6ff; border-color: #bfdbfe; }
.st-pr .pr-badge.is-classic { color: #155e75; background: #ecfeff; border-color: #a5f3fc; }
.st-pr .pr-badge.is-builtin { color: #6b21a8; background: #faf5ff; border-color: #e9d5ff; }
.st-pr .pr-badge.is-usb { color: #334155; background: #f1f5f9; border-color: #e2e8f0; }
.st-pr .pr-paired { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
.st-pr .pr-empty { display: flex; gap: 12px; align-items: flex-start; }
.st-pr .pr-empty > i { font-size: 1.4rem; color: #64748b; margin-top: 2px; }
.st-pr .pr-empty b { display: block; font-size: .9rem; font-weight: 750; color: #000; }
.st-pr .pr-empty span { display: block; font-size: .78rem; font-weight: 600; color: #475569; line-height: 1.45; margin-top: 2px; }
.st-pr .pr-none { font-size: .8rem; font-weight: 600; color: #475569; line-height: 1.5; padding: 4px 0; }
.st-pr .st-hint { margin-top: 10px; }
.st-pr .st-m-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 14px; font-size: .8rem; font-weight: 600; line-height: 1.5; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.st-pr .st-m-note > i { color: #b45309; font-size: 1rem; line-height: 1.3; }
.st-pr .st-m-note b { color: #000; }
/* paper width: two-choice segmented control */
.st-pr .lp2-lbl { margin: 0 0 6px; }
.st-pr .pr-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.st-pr .pr-seg-opt { position: relative; cursor: pointer; }
.st-pr .pr-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-pr .pr-seg-opt span {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 8px; border-radius: 14px;
    border: 1px solid var(--st-line); background: #fff; transition: border-color .15s ease, background .15s ease;
}
.st-pr .pr-seg-opt b { font-size: .95rem; font-weight: 800; color: #000; }
.st-pr .pr-seg-opt small { font-size: .7rem; font-weight: 650; color: #475569; }
.st-pr .pr-seg-opt input:checked + span { border-color: var(--lp2-h3); background: color-mix(in srgb, var(--lp2-h3) 7%, #fff); box-shadow: inset 0 0 0 1px var(--lp2-h3); }
.st-pr .pr-seg-opt input:focus-visible + span { outline: 2px solid var(--lp2-h3); outline-offset: 2px; }
.st-pr .pr-copies { margin-top: 10px; }
.st-pr .pr-adv { margin-top: 12px; border-top: 1px solid var(--st-line-2); padding-top: 10px; }
.st-pr .pr-adv > summary { cursor: pointer; list-style: none; font-size: .8rem; font-weight: 750; color: #1e293b; display: inline-flex; align-items: center; gap: 6px; }
.st-pr .pr-adv > summary::-webkit-details-marker { display: none; }
.st-pr .pr-adv > summary i { font-size: .72rem; transition: transform .15s ease; }
.st-pr .pr-adv[open] > summary i { transform: rotate(180deg); }
.st-pr .pr-adv .input-group { margin-top: 10px; }
.st-pr #pr-cut-row:has(input:disabled) { cursor: default; }
.st-pr #pr-cut-row:has(input:disabled) .st-switch-t b { color: #475569; }

/* print buttons while a receipt is on its way */
.pr-print-btn.is-printing, .sx-act.is-printing { opacity: .6; pointer-events: none; }

/* the "receipt not printed" pop-up */
.modal .pr-fail { gap: 12px; }
.modal .pr-fail-head { display: flex; gap: 12px; align-items: flex-start; }
.modal .pr-fail-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; }
.modal .pr-fail-ic.is-warn { color: #92400e; background: #fef3c7; }
.modal .pr-fail-ic.is-bad { color: #991b1b; background: #fee2e2; }
.modal .pr-fail-text { margin: 0; font-size: .9rem; line-height: 1.55; color: #000; font-weight: 600; }
.modal .pr-fail-link { padding: 10px 12px; border-radius: 14px; background: #f6f8fb; border: 1px solid #e7ebf1; min-width: 0; }
.modal .pr-fail-link small { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.modal .pr-fail-link span { display: block; margin-top: 3px; font-size: .84rem; font-weight: 650; color: #000; overflow-wrap: anywhere; }
.modal .pr-fail-send { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal .pr-fail-send .btn { justify-content: center; text-decoration: none; }
.modal .pr-fail-send .pr-wa i { color: #16a34a; }
.modal .pr-fail-send .pr-sms i { color: #2563eb; }
@media (max-width: 360px) { .modal .pr-fail-send { grid-template-columns: 1fr; } }
.modal .pr-fail-pdf { border: 0; background: none; padding: 0; font: inherit; font-size: .8rem; font-weight: 700; color: #1e40af; cursor: pointer; justify-self: start; text-align: left; display: inline-flex; gap: 6px; align-items: center; }
.modal .pr-fail .st-m-note { display: flex; gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: .8rem; font-weight: 600; background: #f6f8fb; border: 1px solid #e7ebf1; color: #1e293b; }
.modal .pr-fail > *, .modal .pr-check > * { grid-column: 1 / -1; }

/* Add-on basket: picked rows, the bar, and the checkout list. */
.st-sub .st-addon.is-picked { background: #faf5ff; }
.st-sub .st-addon-end em.is-on { color: #fff; background: #7c3aed; }
.st-sub .st-basket { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #f5f3ff; border: 1px solid #ddd6fe; flex-wrap: wrap; }
.st-sub .st-basket > div { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.st-sub .st-basket > div b { color: #000; font-size: .9rem; }
.st-sub .st-basket > div span { color: #334155; font-size: .76rem; line-height: 1.35; }
.st-sub .st-basket > strong { color: #000; font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-basket-items { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; }
.st-basket-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #eef2f7; }
.st-basket-item:first-child { border-top: 0; }
.st-basket-item .st-addon-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; color: #5b21b6; background: #f3e8ff; border: 1px solid #e9d5ff; }
.st-basket-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.st-basket-item > div b { color: #000; font-size: .86rem; }
.st-basket-item > div span { color: #475569; font-size: .72rem; line-height: 1.35; }
.st-basket-item > strong { color: #000; font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-basket-x { border: 0; background: transparent; color: #475569; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.st-basket-x:hover { background: #f1f5f9; color: #000; }