/* StakeAlix UI refresh - customer account, auth, order track, contact, CMS pages.
   Uses tokens from sa-theme.css. Every rule is scoped under .sa-acct (the page root)
   so it outranks legacy element selectors such as `.auth-section input` or `li {display:inline-block}`. */

/* =====================================================================
   1. Page scope
   ===================================================================== */

.sa-acct {
    padding-block: 36px 56px;
    color: var(--sa-ink);
    font-family: var(--sa-font);
}

.sa-acct p {
    color: inherit;
    text-align: inherit;
}

.sa-acct li {
    display: block;
}

.sa-acct svg.feather {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.sa-acct h1,
.sa-acct h2,
.sa-acct h3 {
    font-family: var(--sa-font);
}

/* number inputs hold phone numbers here: no spinners */
.sa-acct input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.sa-acct input[type="number"]::-webkit-inner-spin-button,
.sa-acct input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* =====================================================================
   2. Fields (on top of .sa-field / .sa-label / .sa-input from sa-theme)
   ===================================================================== */

.sa-acct .sa-input,
.sa-acct .sa-input.form-control {
    border: 1.5px solid var(--sa-line-strong);
    border-radius: var(--sa-r-md);
    background: var(--sa-card);
    color: var(--sa-ink);
    font-size: 16px;
    min-height: 48px;
    height: auto;
    box-shadow: none !important;
}

.sa-acct .sa-input::placeholder {
    color: var(--sa-muted);
    opacity: 0.8;
    font-size: 15px;
}

.sa-acct .sa-input:hover {
    border-color: var(--sa-muted);
}

.sa-acct .sa-input:focus,
.sa-acct .sa-input.form-control:focus {
    border-color: var(--sa-ember);
    box-shadow: var(--sa-focus-ring) !important;
    outline: 0;
}

.sa-acct .sa-input.is-invalid,
.sa-acct .sa-input.parsley-error {
    border-color: var(--sa-danger) !important;
    background-image: none;
}

.sa-acct textarea.sa-input {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.sa-acct .sa-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--sa-ink-2);
    font-size: 14px;
    font-weight: 600;
}

.sa-acct .sa-label__hint {
    color: var(--sa-muted);
    font-size: 13px;
    font-weight: 400;
}

.sa-acct .sa-label .sa-link {
    font-size: 13px;
}

.sa-acct .invalid-feedback {
    display: block;
    margin-top: 6px;
    color: var(--sa-danger);
    font-size: 13px;
}

.sa-acct .invalid-feedback strong {
    font-weight: 500;
}

/* input with a leading icon and optional trailing button */
.sa-acct-control {
    position: relative;
}

.sa-acct-control__icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 48px;
    color: var(--sa-muted);
    font-size: 15px;
    pointer-events: none;
    z-index: 2;
}

.sa-acct-control .sa-input {
    padding-left: 44px;
}

.sa-acct-control--trail .sa-input {
    padding-right: 52px;
}

.sa-acct-control:focus-within .sa-acct-control__icon {
    color: var(--sa-ember-ink);
}

.sa-acct-reveal {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 40px;
    border: 0;
    border-radius: var(--sa-r-sm);
    background: transparent;
    color: var(--sa-muted);
    font-size: 15px;
    cursor: pointer;
    z-index: 2;
}

.sa-acct-reveal:hover {
    background: var(--sa-surface);
    color: var(--sa-ink);
}

/* =====================================================================
   3. Auth panel (login, register, forgot, reset, verify, order track)
   ===================================================================== */

.sa-auth {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    box-shadow: var(--sa-shadow-2);
    overflow: hidden;
}

.sa-auth--wide {
    max-width: 520px;
}

.sa-auth__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 24px;
    background: var(--sa-glow-ember), var(--sa-grad-night);
    color: #fff;
    isolation: isolate;
}

.sa-auth__badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--sa-r-md);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    color: var(--sa-ember);
    font-size: 20px;
}

.sa-auth__title {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.2;
}

.sa-auth__sub {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px;
    line-height: 1.45;
}

.sa-auth__body {
    padding: 24px;
}

.sa-auth__body .sa-btn--charge {
    margin-top: 8px;
}

.sa-auth__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--sa-line);
    background: var(--sa-surface);
    color: var(--sa-muted);
    font-size: 15px;
}

.sa-auth__foot form {
    display: inline;
    margin: 0;
}

.sa-auth__foot .sa-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    font-size: 15px;
    cursor: pointer;
}

.sa-auth__note {
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--sa-r-md);
    background: var(--sa-ember-soft);
    color: var(--sa-ink-2) !important;
    font-size: 14px;
    line-height: 1.55;
}

.sa-auth-help {
    max-width: 440px;
    margin: 16px auto 0;
    color: var(--sa-muted) !important;
    font-size: 14px;
    text-align: center !important;
}

.sa-auth--wide + .sa-auth-help {
    max-width: 520px;
}

.sa-auth-help a {
    white-space: nowrap;
}

/* the one prominent field on the track page */
.sa-acct .sa-input--xl {
    min-height: 56px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.sa-acct-control--xl .sa-acct-control__icon {
    height: 56px;
    width: 50px;
    font-size: 17px;
}

.sa-acct-control--xl .sa-input {
    padding-left: 48px;
}

/* =====================================================================
   4. Account area layout: sidebar nav + content cards
   ===================================================================== */

.sa-acct-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.sa-acct-main {
    min-width: 0;
}

.sa-acct .sa-btn--sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: 14px;
}

/* sidebar */
.sa-acct-nav {
    position: sticky;
    top: 16px;
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    box-shadow: var(--sa-shadow-1);
    overflow: hidden;
}

.sa-acct-nav__profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--sa-glow-ember), var(--sa-grad-night);
    color: #fff;
}

.sa-acct-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sa-grad-charge);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
}

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

.sa-acct-nav__who {
    min-width: 0;
}

.sa-acct-nav__hello,
.sa-acct-nav__phone {
    margin: 0;
    color: rgba(255, 255, 255, 0.74) !important;
    font-size: 13px;
    line-height: 1.4;
}

.sa-acct-nav__phone {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.sa-acct-nav__name {
    margin: 0;
    color: #fff !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sa-acct-nav__menu ul {
    margin: 0;
    padding: 10px;
    list-style: none;
}

.sa-acct-nav .sa-acct-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: var(--sa-r-md);
    color: var(--sa-ink-2);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
}

.sa-acct-nav .sa-acct-nav__link svg {
    flex: 0 0 auto;
    color: var(--sa-muted);
}

.sa-acct-nav .sa-acct-nav__link:hover {
    background: var(--sa-surface);
    color: var(--sa-ink);
}

.sa-acct-nav .sa-acct-nav__link.active {
    background: var(--sa-ember-soft);
    color: var(--sa-ember-ink);
    font-weight: 600;
}

.sa-acct-nav .sa-acct-nav__link.active svg {
    color: var(--sa-ember);
}

.sa-acct-nav .sa-acct-nav__link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: var(--sa-grad-charge);
}

.sa-acct-nav .sa-acct-nav__sep {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--sa-line);
}

.sa-acct-nav .sa-acct-nav__link--out:hover {
    background: color-mix(in srgb, var(--sa-danger) 8%, var(--sa-card));
    color: var(--sa-danger);
}

.sa-acct-nav .sa-acct-nav__link--out:hover svg {
    color: var(--sa-danger);
}

/* content cards */
.sa-acct-card {
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    box-shadow: var(--sa-shadow-1);
}

.sa-acct-card + .sa-acct-card,
.sa-acct-card + .sa-acct-tiles,
.sa-acct-tiles + .sa-acct-card {
    margin-top: 20px;
}

.sa-acct-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--sa-line);
}

.sa-acct-card__title {
    margin: 0;
    color: var(--sa-ink);
    font-size: 24px;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.2;
}

.sa-acct-card__sub {
    margin: 4px 0 0;
    color: var(--sa-muted) !important;
    font-size: 14px;
}

.sa-acct-card__body {
    padding: 24px;
}

.sa-acct-card__body--flush {
    padding: 0;
}

/* account overview: labelled details */
.sa-acct-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.sa-acct-info__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--sa-r-md);
    background: var(--sa-surface);
}

.sa-acct-info__item--wide {
    grid-column: 1 / -1;
}

.sa-acct-info__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--sa-r-sm);
    background: var(--sa-card);
    box-shadow: inset 0 0 0 1px var(--sa-line);
    color: var(--sa-navy);
    font-size: 14px;
}

.sa-acct-info__text {
    min-width: 0;
}

.sa-acct .sa-acct-info__label {
    margin: 0 0 2px;
    color: var(--sa-muted);
    font-size: 13px;
    font-weight: 500;
}

.sa-acct .sa-acct-info__value {
    margin: 0;
    color: var(--sa-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.sa-acct-info .sa-acct-missing {
    color: var(--sa-muted);
    font-weight: 400;
}

/* shortcut tiles */
.sa-acct-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.sa-acct .sa-acct-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    background: var(--sa-card);
    box-shadow: var(--sa-shadow-1);
    color: var(--sa-ink);
    text-decoration: none;
    transition: transform 0.15s var(--sa-ease), box-shadow 0.2s var(--sa-ease);
}

.sa-acct .sa-acct-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--sa-shadow-2);
    color: var(--sa-ink);
}

.sa-acct-tile__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--sa-r-md);
    background: var(--sa-ember-soft);
    color: var(--sa-ember-ink);
    font-size: 18px;
}

.sa-acct-tile__text {
    min-width: 0;
}

.sa-acct-tile__label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

.sa-acct-tile__meta {
    display: block;
    margin-top: 2px;
    color: var(--sa-muted);
    font-size: 13px;
}

.sa-acct-tile__chev {
    margin-left: auto;
    color: var(--sa-muted);
    font-size: 13px;
}

/* =====================================================================
   5. Orders table, status chips, empty state
   ===================================================================== */

.sa-acct-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
}

.sa-acct-table th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sa-line);
    background: var(--sa-surface);
    color: var(--sa-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.sa-acct-table th:first-child {
    padding-left: 24px;
}

.sa-acct-table th:last-child {
    padding-right: 24px;
}

.sa-acct-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sa-line);
    color: var(--sa-ink-2);
    vertical-align: middle;
}

.sa-acct-table td:first-child {
    padding-left: 24px;
}

.sa-acct-table td:last-child {
    padding-right: 24px;
}

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

.sa-acct-table tbody tr:hover td {
    background: color-mix(in srgb, var(--sa-surface) 55%, var(--sa-card));
}

.sa-acct-table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sa-acct-table .is-end {
    text-align: right;
}

.sa-acct-table .sa-acct-sl {
    color: var(--sa-muted);
    font-variant-numeric: tabular-nums;
}

.sa-acct-inv {
    color: var(--sa-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sa-acct-date {
    white-space: nowrap;
}

.sa-acct-table .sa-price {
    font-size: 16px;
}

.sa-acct-disc-m {
    display: none;
}

.sa-acct-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sa-acct .sa-btn.invoice_btn,
.sa-acct .sa-btn.invoice_btn:focus {
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--sa-r-pill);
    background: var(--sa-card);
    color: var(--sa-ink);
    box-shadow: inset 0 0 0 1.5px var(--sa-line-strong);
    font-size: 14px;
    font-weight: 600;
}

.sa-acct .sa-btn.invoice_btn:hover {
    color: var(--sa-ink);
    box-shadow: inset 0 0 0 1.5px var(--sa-ink);
}

.sa-acct .sa-btn.invoice_btn i {
    font-size: 13px;
}

/* status chips, keyed by order_statuses.slug; unknown slugs stay neutral */
.sa-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: var(--sa-r-sm);
    background: var(--sa-surface-2);
    color: var(--sa-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.sa-status::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.sa-status--pending {
    background: var(--sa-ember-soft);
    color: var(--sa-ember-ink);
}

.sa-status--processing,
.sa-status--on-the-way,
.sa-status--in-courier {
    background: var(--sa-surface-2);
    color: var(--sa-navy);
}

.sa-status--on-hold {
    background: var(--sa-surface);
    color: var(--sa-muted);
    box-shadow: inset 0 0 0 1px var(--sa-line-strong);
}

.sa-status--completed {
    background: var(--sa-success-soft);
    color: var(--sa-success);
}

.sa-status--cancelled {
    background: color-mix(in srgb, var(--sa-danger) 9%, var(--sa-card));
    color: color-mix(in srgb, var(--sa-danger) 78%, var(--sa-ink));
}

.sa-status--lg {
    padding: 7px 14px;
    font-size: 15px;
}

.sa-status--lg::before {
    width: 8px;
    height: 8px;
}

.sa-acct-empty {
    padding: 48px 24px 52px;
    text-align: center;
}

.sa-acct-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--sa-grad-stage);
    box-shadow: inset 0 0 0 1px var(--sa-line);
    color: var(--sa-navy);
    font-size: 28px;
}

.sa-acct-empty__title {
    margin: 0 0 6px;
    color: var(--sa-ink);
    font-size: 18px;
    font-weight: 700;
}

.sa-acct-empty__text {
    max-width: 38ch;
    margin: 0 auto 22px !important;
    color: var(--sa-muted) !important;
    text-align: center !important;
    font-size: 15px;
}

/* =====================================================================
   6. Account forms: profile edit, change password
   ===================================================================== */

.sa-acct-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
}

.sa-acct-form-grid .is-full {
    grid-column: 1 / -1;
}

.sa-acct-form-narrow {
    max-width: 460px;
}

.sa-acct-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--sa-line);
}

.sa-acct-form-actions .sa-btn--charge {
    min-width: 220px;
}

.sa-acct-upload {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1.5px dashed var(--sa-line-strong);
    border-radius: var(--sa-r-md);
    background: var(--sa-surface);
}

.sa-acct-upload .sa-acct-avatar {
    width: 60px;
    height: 60px;
    box-shadow: none;
}

.sa-acct-upload input[type="file"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--sa-muted);
    font-size: 14px;
}

.sa-acct-upload input[type="file"]::file-selector-button {
    margin-right: 12px;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--sa-r-pill);
    background: var(--sa-card);
    box-shadow: inset 0 0 0 1.5px var(--sa-line-strong);
    color: var(--sa-ink);
    font-family: var(--sa-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.sa-acct-upload input[type="file"]:hover::file-selector-button {
    box-shadow: inset 0 0 0 1.5px var(--sa-ink);
}

/* select2 (district/area) matched to .sa-input; legacy uses !important */
.sa-acct .select2-container {
    width: 100% !important;
}

.sa-acct .select2-container--default .select2-selection--single {
    height: 48px !important;
    border: 1.5px solid var(--sa-line-strong) !important;
    border-radius: var(--sa-r-md) !important;
    background: var(--sa-card);
}

.sa-acct .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 14px;
    padding-right: 40px;
    color: var(--sa-ink);
    font-size: 16px;
    line-height: 45px !important;
}

.sa-acct .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 10px;
    height: 45px !important;
}

.sa-acct .select2-container--default.select2-container--focus .select2-selection--single,
.sa-acct .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sa-ember) !important;
    box-shadow: var(--sa-focus-ring);
}

/* the dropdown is appended to <body>; this file only loads on account pages */
.select2-dropdown {
    border: 1.5px solid var(--sa-line-strong) !important;
    border-radius: var(--sa-r-md) !important;
    box-shadow: var(--sa-shadow-2);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--sa-ember-soft) !important;
    color: var(--sa-ink) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 40px;
    border: 1.5px solid var(--sa-line-strong);
    border-radius: var(--sa-r-sm);
}

/* order note */
.sa-acct-note {
    padding: 18px 20px;
    border-radius: var(--sa-r-md);
    background: var(--sa-surface);
    color: var(--sa-ink-2);
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.sa-acct-note p {
    margin: 0 0 0.8em;
}

.sa-acct-note > :last-child {
    margin-bottom: 0;
}

/* =====================================================================
   7. Responsive: auth + account area
   ===================================================================== */

@media (max-width: 1199.98px) {
    .sa-acct-table .c-sl,
    .sa-acct-table .c-disc {
        display: none;
    }

    .sa-acct-disc-m {
        display: block;
        margin-top: 2px;
        color: var(--sa-muted);
        font-size: 12px;
        font-weight: 500;
    }
}

@media (max-width: 991.98px) {
    .sa-acct-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sa-acct-nav {
        position: static;
    }

    .sa-acct-nav__profile {
        padding: 14px 16px;
    }

    .sa-acct-nav .sa-acct-avatar {
        width: 46px;
        height: 46px;
        font-size: 19px;
    }

    .sa-acct-nav__menu ul {
        display: flex;
        gap: 8px;
        padding: 12px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .sa-acct-nav__menu ul::-webkit-scrollbar {
        display: none;
    }

    .sa-acct-nav__menu li {
        flex: 0 0 auto;
    }

    .sa-acct-nav .sa-acct-nav__link {
        min-height: 40px;
        gap: 8px;
        padding: 0 14px;
        border-radius: var(--sa-r-pill);
        box-shadow: inset 0 0 0 1px var(--sa-line);
        font-size: 14px;
        white-space: nowrap;
    }

    .sa-acct-nav .sa-acct-nav__link svg {
        width: 16px;
        height: 16px;
    }

    .sa-acct-nav .sa-acct-nav__link.active {
        box-shadow: inset 0 0 0 1.5px var(--sa-ember);
    }

    .sa-acct-nav .sa-acct-nav__link.active::before {
        display: none;
    }

    .sa-acct-nav .sa-acct-nav__sep {
        margin: 0;
        padding: 0;
        border: 0;
    }
}

@media (max-width: 767.98px) {
    .sa-acct {
        padding-block: 20px 40px;
    }

    .sa-auth__head {
        padding: 18px;
    }

    .sa-auth__badge {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .sa-auth__title {
        font-size: 21px;
    }

    .sa-auth__body {
        padding: 20px 18px;
    }

    .sa-auth__foot {
        padding: 12px 18px;
    }

    .sa-acct-card__head,
    .sa-acct-card__body {
        padding: 16px;
    }

    .sa-acct-card__body--flush {
        padding: 0;
    }

    .sa-acct-card__title {
        font-size: 20px;
    }

    .sa-acct-card + .sa-acct-card,
    .sa-acct-card + .sa-acct-tiles,
    .sa-acct-tiles + .sa-acct-card {
        margin-top: 16px;
    }

    .sa-acct-info {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .sa-acct-tiles {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sa-acct-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sa-acct-form-actions .sa-btn {
        flex: 1 1 100%;
    }

    .sa-acct-upload {
        flex-wrap: wrap;
    }

    /* orders: each row becomes a compact card */
    .sa-acct-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .sa-acct-table,
    .sa-acct-table tbody {
        display: block;
    }

    .sa-acct-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "inv status"
            "date date"
            "amt act";
        gap: 4px 12px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--sa-line);
    }

    .sa-acct-table tbody tr:last-child {
        border-bottom: 0;
    }

    .sa-acct-table td,
    .sa-acct-table tbody tr:hover td {
        display: block;
        padding: 0 !important;
        border: 0;
        background: none;
        text-align: left;
    }

    .sa-acct-table .c-inv {
        grid-area: inv;
        align-self: center;
    }

    .sa-acct-table .c-status {
        grid-area: status;
        justify-self: end;
        align-self: center;
    }

    .sa-acct-table .c-date {
        grid-area: date;
        color: var(--sa-muted);
        font-size: 13px;
    }

    .sa-acct-table .c-amt {
        grid-area: amt;
        align-self: end;
        margin-top: 6px;
    }

    .sa-acct-table .c-act {
        grid-area: act;
        align-self: end;
    }

    .sa-acct-inv {
        font-size: 16px;
    }
}

/* chip row: positioned for offsetLeft, fade hints that it scrolls */
.sa-acct-nav__menu ul {
    position: relative;
}

@media (max-width: 991.98px) {
    .sa-acct-nav__menu ul {
        padding-right: 36px;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    }
}

/* =====================================================================
   8. Tracking result
   ===================================================================== */

.sa-track {
    max-width: 760px;
    margin: 0 auto;
}

.sa-track__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.sa-track-card + .sa-track-card {
    margin-top: 16px;
}

.sa-track-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--sa-line);
}

.sa-acct .sa-track-card__inv {
    margin: 0;
    color: var(--sa-ink);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sa-acct .sa-track-card__date {
    margin: 2px 0 0;
    color: var(--sa-muted);
    font-size: 14px;
}

.sa-track-items {
    margin: 0;
    padding: 6px 24px;
    list-style: none;
}

.sa-acct .sa-track-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--sa-line);
}

.sa-acct .sa-track-item:last-child {
    border-bottom: 0;
}

.sa-track-item__main {
    min-width: 0;
}

.sa-acct .sa-track-item__name {
    margin: 0;
    color: var(--sa-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
}

.sa-acct .sa-track-item__qty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    color: var(--sa-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.sa-track-item__qty .sa-chip {
    padding: 1px 8px;
    font-size: 12px;
}

.sa-track-item__total {
    flex: 0 0 auto;
    font-size: 16px;
}

.sa-track-totals {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--sa-line);
    border-radius: 0 0 var(--sa-r-lg) var(--sa-r-lg);
    background: var(--sa-surface);
}

.sa-track-totals__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 3px 0;
    color: var(--sa-ink-2);
    font-size: 15px;
}

.sa-track-totals__row.is-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--sa-line-strong);
    color: var(--sa-ink);
    font-size: 18px;
    font-weight: 700;
}

.sa-track-totals__row.is-grand .sa-price {
    font-size: 21px;
}

/* =====================================================================
   9. Invoice (screen + print)
   ===================================================================== */

.sa-inv-wrap {
    max-width: 900px;
    margin: 0 auto;
}

.sa-inv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sa-inv {
    position: relative;
    padding: 38px 40px 32px;
    background: var(--sa-card);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-lg);
    box-shadow: var(--sa-shadow-1);
    overflow: hidden;
}

.sa-inv::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--sa-grad-charge);
}

.sa-inv,
.sa-inv * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.sa-inv__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sa-line);
}

.sa-inv__brand img {
    display: block;
    width: 170px;
    max-width: 100%;
    height: auto;
}

.sa-inv__meta {
    text-align: right;
}

.sa-acct .sa-inv__title {
    margin: 0 0 8px;
    color: var(--sa-ink);
    font-size: 30px;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.1;
}

.sa-acct .sa-inv__meta p {
    margin: 0;
    color: var(--sa-muted);
    font-size: 14px;
    line-height: 1.6;
    text-align: right;
}

.sa-inv__meta p strong {
    margin-left: 6px;
    color: var(--sa-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sa-inv__parties {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 24px 0;
}

.sa-acct .sa-inv__party p {
    margin: 0;
    color: var(--sa-ink-2);
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.sa-acct .sa-inv__party .sa-inv__label {
    margin-bottom: 6px;
    color: var(--sa-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.sa-acct .sa-inv__party .sa-inv__name {
    color: var(--sa-ink);
    font-size: 16px;
    font-weight: 700;
}

.sa-inv__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-r-md);
}

.sa-inv__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.sa-inv__table th {
    padding: 12px 16px;
    background: var(--sa-surface-2);
    color: var(--sa-ink-2);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.sa-inv__table td {
    padding: 14px 16px;
    border-top: 1px solid var(--sa-line);
    color: var(--sa-ink);
    vertical-align: top;
}

.sa-inv__table .is-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sa-inv__table .sa-inv__sl {
    width: 52px;
    color: var(--sa-muted);
}

.sa-inv__var {
    display: block;
    margin-top: 2px;
    color: var(--sa-muted);
    font-size: 13px;
}

.sa-inv__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
}

.sa-inv__note {
    flex: 1 1 260px;
}

.sa-acct .sa-inv__note p {
    margin: 0 0 8px;
    color: var(--sa-muted);
    font-size: 13px;
    font-style: italic;
}

.sa-inv__totals {
    flex: 0 1 320px;
    margin-left: auto;
    padding: 16px 18px;
    border-radius: var(--sa-r-md);
    background: var(--sa-surface);
}

.sa-inv__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 4px 0;
    color: var(--sa-ink-2);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.sa-inv__row.is-grand {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--sa-line-strong);
    color: var(--sa-ink);
    font-size: 18px;
    font-weight: 700;
}

@page {
    size: A4;
    margin: 12mm;
}

@media print {
    header,
    footer,
    .footer_nav,
    .whatapp,
    .scrolltop,
    .mobile-menu,
    #page-overlay,
    #loading,
    #custom-modal,
    .no-print {
        display: none !important;
    }

    body {
        background: var(--sa-card) !important;
    }

    .sa-acct--invoice {
        padding: 0 !important;
    }

    .sa-acct--invoice .container {
        max-width: none !important;
        padding: 0 !important;
    }

    .sa-inv {
        padding: 18px 0 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .sa-inv__parties {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sa-inv__table-wrap {
        overflow: visible;
    }

    .sa-inv__table tr,
    .sa-inv__bottom {
        break-inside: avoid;
    }
}

/* =====================================================================
   10. Info pages: sub-nav, contact, CMS article
   ===================================================================== */

.sa-info-nav {
    margin-bottom: 24px;
}

.sa-info-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-acct .sa-info-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--sa-r-pill);
    background: var(--sa-card);
    box-shadow: inset 0 0 0 1px var(--sa-line-strong);
    color: var(--sa-ink-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow 0.15s, color 0.15s;
}

.sa-acct .sa-info-nav__link:hover {
    color: var(--sa-ink);
    box-shadow: inset 0 0 0 1.5px var(--sa-ink);
}

.sa-acct .sa-info-nav__link.active {
    background: var(--sa-grad-night);
    box-shadow: none;
    color: #fff;
    font-weight: 600;
}

/* contact */
.sa-contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 24px;
    align-items: start;
}

.sa-contact-info {
    padding: 28px;
    border-radius: var(--sa-r-xl);
    background: var(--sa-glow-ember), var(--sa-grad-night);
    color: #fff;
    box-shadow: var(--sa-shadow-2);
}

.sa-acct .sa-contact-info__title {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.15;
}

.sa-acct .sa-contact-info__sub {
    margin: 8px 0 22px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}

.sa-contact-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sa-acct .sa-contact-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: var(--sa-r-md);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.15s;
}

.sa-acct a.sa-contact-row:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.sa-contact-row__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--sa-r-sm);
    background: color-mix(in srgb, var(--sa-ember) 18%, transparent);
    color: var(--sa-ember);
    font-size: 16px;
}

.sa-contact-row__text {
    min-width: 0;
}

.sa-contact-row__label {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    line-height: 1.35;
}

.sa-contact-row__value {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sa-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sa-contact-actions .sa-btn {
    flex: 1 1 150px;
}

.sa-acct .sa-btn--onnight,
.sa-acct .sa-btn--onnight:focus {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}

.sa-acct .sa-btn--onnight:hover {
    color: #fff;
    box-shadow: inset 0 0 0 1.5px #fff;
}

/* CMS article */
.sa-article {
    max-width: 880px;
    margin: 0 auto;
    padding: 36px 44px 40px;
}

.sa-acct .sa-article__title {
    margin: 0 0 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--sa-line);
    color: var(--sa-ink);
    font-size: 30px;
    font-weight: 700;
    font-stretch: 112%;
    line-height: 1.2;
}

.sa-article__body {
    max-width: 72ch;
    color: var(--sa-ink-2);
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: break-word;
}

/* CMS HTML arrives with inline Poppins/grey/letter-spacing styles: normalise them */
.sa-article__body * {
    font-family: var(--sa-font) !important;
    letter-spacing: normal !important;
}

.sa-article__body p,
.sa-article__body span,
.sa-article__body li,
.sa-article__body div,
.sa-article__body td {
    color: var(--sa-ink-2) !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.sa-acct .sa-article__body p {
    margin: 0 0 1em;
    text-align: left !important;
}

.sa-article__body h1,
.sa-article__body h2,
.sa-article__body h3,
.sa-article__body h4,
.sa-article__body h5,
.sa-article__body h6 {
    margin: 1.6em 0 0.6em;
    color: var(--sa-ink) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.sa-article__body h1,
.sa-article__body h2 {
    font-size: 21px !important;
}

.sa-article__body h3,
.sa-article__body h4 {
    font-size: 18px !important;
}

.sa-article__body h5,
.sa-article__body h6 {
    font-size: 16px !important;
}

.sa-article__body > :first-child {
    margin-top: 0;
}

.sa-article__body ul,
.sa-article__body ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.sa-acct .sa-article__body ul li {
    display: list-item;
    list-style: disc;
    margin-bottom: 0.35em;
}

.sa-acct .sa-article__body ol li {
    display: list-item;
    list-style: decimal;
    margin-bottom: 0.35em;
}

.sa-article__body li::marker {
    color: var(--sa-ember);
}

.sa-article__body a,
.sa-article__body a span {
    color: var(--sa-ember-ink) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sa-article__body strong,
.sa-article__body b {
    color: var(--sa-ink) !important;
    font-weight: 700;
}

.sa-article__body img {
    height: auto;
    border-radius: var(--sa-r-md);
}

.sa-article__body table {
    width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.sa-article__body th,
.sa-article__body td {
    padding: 8px 12px;
    border: 1px solid var(--sa-line);
}

.sa-acct .sa-article__foot {
    max-width: 72ch;
    margin: 28px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--sa-line);
    color: var(--sa-muted);
    font-size: 15px;
}

/* =====================================================================
   11. Responsive: track, invoice, info pages
   ===================================================================== */

@media (max-width: 991.98px) {
    .sa-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .sa-track-card__head,
    .sa-track-items,
    .sa-track-totals {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sa-inv {
        padding: 28px 18px 22px;
    }

    .sa-acct .sa-inv__title {
        font-size: 24px;
    }

    .sa-inv__brand img {
        width: 130px;
    }

    .sa-inv__parties {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .sa-inv__table {
        font-size: 14px;
    }

    .sa-inv__table th,
    .sa-inv__table td {
        padding: 10px 12px;
    }

    .sa-inv__table th:first-child,
    .sa-inv__table .sa-inv__sl {
        display: none;
    }

    .sa-inv__totals {
        flex-basis: 100%;
    }

    .sa-info-nav {
        margin-bottom: 16px;
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
    }

    .sa-info-nav__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-right: 36px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
    }

    .sa-info-nav__list::-webkit-scrollbar {
        display: none;
    }

    .sa-info-nav__list li {
        flex: 0 0 auto;
    }

    .sa-contact-info {
        padding: 22px 18px;
        border-radius: var(--sa-r-lg);
    }

    .sa-acct .sa-contact-info__title {
        font-size: 24px;
    }

    .sa-article {
        padding: 22px 18px 26px;
    }

    .sa-acct .sa-article__title {
        font-size: 24px;
    }
}

/* =====================================================================
   12. Refinements after review
   ===================================================================== */

/* CMS: sub-nav shares the article column so their left edges line up */
.sa-info-nav--narrow {
    max-width: 880px;
    margin-inline: auto;
}

/* contact: info panel stays in view beside the taller form */
@media (min-width: 992px) {
    .sa-contact-info {
        position: sticky;
        top: 16px;
    }
}

@media (max-width: 991.98px) {
    /* once the chip row is scrolled, fade both edges instead of showing a hard sliver */
    .sa-acct-nav__menu ul.is-scrolled {
        -webkit-mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, transparent, black 28px, black calc(100% - 32px), transparent);
    }
}

@media (max-width: 767.98px) {
    /* order card: amount reads under the date, not pushed against the button */
    .sa-acct-table .c-amt {
        text-align: left;
    }

    .sa-info-nav--narrow {
        max-width: none;
    }
}