/* =========================
   PWA UI KIT — FLAT STICKY (DEDUPED)
   - No borders, no shadows
   - Works in light/dark
   - Uses surface levels + soft separators
   - Keeps Bootstrap layout/components
   Requires DB vars:
   --pwa-primary, --pwa-primary-rgb
   ========================= */

/* =========================
   Tokens
   ========================= */
:root {
    --pwa-radius: 18px;
    --pwa-radius-lg: 24px;

    --pwa-sep: color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    --pwa-tap: rgba(var(--pwa-primary-rgb), .12);

    --pwa-surface-1: var(--bs-body-bg);
    --pwa-surface-2: color-mix(in srgb, var(--bs-body-bg) 94%, #000);
    --pwa-surface-3: color-mix(in srgb, var(--bs-body-bg) 88%, #000);

    --pwa-group-radius: 22px;
    --pwa-single-radius: 18px;

    --pwa-on-primary: #111;
    --pwa-on-primary-muted: rgba(0, 0, 0, .7);

    --pwa-app-bg: var(--pwa-bg-light);

    --iti-sep: rgba(0, 0, 0, .18);
    --iti-dd-bg: #fff;
    --iti-dd-text: #111;
    --iti-dd-border: rgba(0, 0, 0, .15);
    --iti-dd-hover: rgba(0, 0, 0, .06);
    --iti-dd-search-bg: #f6f6f6;
}

[data-bs-theme="dark"] {
    --pwa-surface-1: var(--bs-body-bg);
    --pwa-surface-2: color-mix(in srgb, var(--bs-body-bg) 88%, #fff);
    --pwa-surface-3: color-mix(in srgb, var(--bs-body-bg) 80%, #fff);
    --pwa-app-bg: var(--pwa-bg-dark);
}

html[data-bs-theme="dark"] {
    --iti-sep: rgba(255, 255, 255, .28);
    --iti-dd-bg: #1f2328;
    --iti-dd-text: rgba(255, 255, 255, .92);
    --iti-dd-border: rgba(255, 255, 255, .12);
    --iti-dd-hover: rgba(255, 255, 255, .08);
    --iti-dd-search-bg: rgba(255, 255, 255, .06);
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   Utilities
   ========================= */
.pwa-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    /* ← add this to the existing rule */
}

.pwa-muted {
    color: var(--bs-secondary-color) !important;
}

.pwa-rounded-4 {
    border-radius: 1rem;
}

.pwa-divider {
    height: 1px;
    background: var(--pwa-sep);
    opacity: 1;
}

.pwa-sticky-top {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* =========================
   Flat surfaces
   ========================= */
.pwa-surface {
    background: var(--pwa-surface-1);
}

.pwa-surface-soft {
    background: var(--pwa-surface-2);
}

.pwa-card {
    background: var(--pwa-surface-1);
    border-radius: var(--pwa-radius-lg);
    border: 0 !important;
    box-shadow: none !important;
}

.pwa-soft {
    background: var(--pwa-surface-2);
    border-radius: var(--pwa-radius);
}

.pwa-hover {
    transition: background .12s ease, transform .08s ease;
}

.pwa-hover:hover {
    background: rgba(0, 0, 0, .03);
}

[data-bs-theme="dark"] .pwa-hover:hover {
    background: rgba(255, 255, 255, .05);
}

.pwa-hover:active {
    transform: scale(.995);
}

/* =========================
   Buttons
   ========================= */
.pwa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .72rem 1.1rem;
    font-weight: 700;
    text-decoration: none;
    user-select: none;
}

.pwa-btn:active {
    transform: translateY(1px);
}

.pwa-btn-primary {
    background: var(--pwa-primary);
    border: 1px solid var(--pwa-primary);
    color: #111;
}

.pwa-btn-outline {
    background: transparent;
    border: 1px solid var(--pwa-sep);
    color: var(--bs-body-color);
}

.pwa-btn-outline:hover {
    background: color-mix(in srgb, var(--bs-body-bg) 85%, var(--bs-tertiary-bg));
}

.pwa-iconbtn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--pwa-sep);
    background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}

.pwa-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 0;
    background: var(--bs-tertiary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pwa-icon-btn:active {
    transform: scale(.99);
}

/* =========================
   Pills / Carousels
   ========================= */
.pwa-filters-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.pwa-pill-carousel {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1 1 auto;
    padding-bottom: .25rem;
    cursor: grab;
    user-select: none;
}

.pwa-pill-carousel::-webkit-scrollbar {
    display: none;
}

.pwa-pill-carousel:active {
    cursor: grabbing;
}

.btn.pwa-pill,
.pwa-pill {
    white-space: nowrap;
    flex-shrink: 0;
    border: 0 !important;
    box-shadow: none !important;
}

.btn.pwa-pill.btn-light {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}

.btn.pwa-pill.btn-dark {
    background: rgba(var(--pwa-primary-rgb), .18) !important;
    color: var(--bs-body-color) !important;
}

.pwa-pill-count {
    font-size: .75rem;
    font-weight: 800;
    border-radius: 999px;
    padding: .22rem .5rem;
    background: color-mix(in srgb, var(--bs-secondary) 20%, transparent);
}

.pwa-filter-search-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--pwa-surface-2) !important;
    color: var(--bs-body-color) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pwa-filter-search-btn:active {
    transform: scale(.99);
}

/* =========================
   Badges
   ========================= */
.pwa-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
    border: 0 !important;
    color: var(--bs-body-color);
}

/* =========================
   Tiles / grids
   ========================= */
.pwa-grid-2 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width:380px) {
    .pwa-grid-2 {
        grid-template-columns: 1fr;
    }
}

.pwa-tile,
.card.pwa-tile {
    background: var(--pwa-surface-1) !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: var(--pwa-radius);
    padding: 14px;
    cursor: pointer;
    user-select: none;
}

.card.pwa-tile .card-body {
    background: transparent !important;
}

.pwa-tile:active,
.card.pwa-tile:active {
    transform: scale(.995);
}

.pwa-tile:focus-visible,
.card.pwa-tile:focus-visible {
    outline: 2px solid rgba(var(--pwa-primary-rgb), .28);
    outline-offset: 2px;
    border-radius: var(--pwa-radius);
}

.pwa-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    font-size: 18px;
    background: rgba(var(--pwa-primary-rgb), .10) !important;
    color: var(--bs-body-color);
}

/* tile color system */
.pwa-tile .pwa-tile-icon,
.pwa-tile .pwa-tile-title {
    color: var(--pwa-primary);
}

.pwa-tile .pwa-tile-icon i {
    color: inherit !important;
}

.pwa-tile .pwa-muted,
.pwa-tile .pwa-tile-sub,
.pwa-tile .small,
.pwa-tile .form-text {
    color: var(--bs-secondary-color);
}

.pwa-tile:hover .pwa-tile-icon {
    background: rgba(var(--pwa-primary-rgb), .16) !important;
}

.pwa-tile:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 92%, var(--pwa-primary) 8%) !important;
}

.pwa-tile.pwa-tile-color {
    --tile-color: var(--pwa-primary);
}

.pwa-tile.pwa-tile-color .pwa-tile-icon,
.pwa-tile.pwa-tile-color .pwa-tile-title {
    color: var(--tile-color);
}

.pwa-tile.pwa-tile-color .pwa-tile-icon {
    background: color-mix(in srgb, var(--tile-color) 12%, transparent) !important;
}

/* =========================
   List rows
   ========================= */
.pwa-row {
    padding: .85rem .9rem;
    border-radius: 16px;
    background: transparent;
}

.pwa-row+.pwa-row {
    margin-top: .25rem;
}

.pwa-row:active {
    background: rgba(0, 0, 0, .03);
}

[data-bs-theme="dark"] .pwa-row:active {
    background: rgba(255, 255, 255, .05);
}

.pwa-date-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .55rem .9rem;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.pwa-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--bs-body-color);
    opacity: .7;
    margin-top: 6px;
}

/* =========================
   Accordion clean
   ========================= */
.pwa-accordion-clean .accordion-item {
    border: 0 !important;
    background: transparent !important;
}

.pwa-accordion-clean .accordion-button {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: .25rem 0 .6rem 0;
    font-weight: 800;
}

.pwa-accordion-clean .accordion-body {
    padding: 0 0 1rem 0;
}

/* =========================
   Forms
   ========================= */
.form-label {
    font-weight: 700;
    margin-bottom: .35rem;
}

.form-text {
    color: var(--bs-secondary-color) !important;
}

.form-control,
textarea.form-control {
    border-radius: 14px !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--pwa-surface-2) !important;
    color: var(--bs-body-color) !important;
    padding: .80rem .95rem;
    transition: border-color .18s ease, background-color .18s ease;
}

.form-select {
    border-radius: 14px !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    outline: none !important;
    background-color: var(--pwa-surface-2) !important;
    color: var(--bs-body-color) !important;
    padding: .80rem 2.6rem .80rem .95rem;
    font-weight: 700;
    transition: border-color .18s ease, background-color .18s ease;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.937a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    background-size: 18px;
}

[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ccc'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.937a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0l-4.24-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: color-mix(in srgb, var(--bs-secondary-color) 85%, transparent) !important;
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
    opacity: .65;
    background: color-mix(in srgb, var(--pwa-surface-2) 75%, transparent) !important;
}

.input-group .form-control,
.input-group .form-select {
    border-radius: 14px !important;
}

.input-group .btn {
    border-radius: 14px !important;
    box-shadow: none !important;
}

.form-check-input {
    box-shadow: none !important;
    border: 0 !important;
    background-color: var(--pwa-surface-2) !important;
}

.form-check-input:checked {
    background-color: var(--pwa-primary) !important;
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid {
    outline: 2px solid rgba(220, 53, 69, .35) !important;
    outline-offset: 2px;
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid {
    outline: 2px solid rgba(25, 135, 84, .30) !important;
    outline-offset: 2px;
}

.pwa-panel {
    background: var(--pwa-surface-1);
    border-radius: var(--pwa-radius-lg);
    padding: 16px;
}

.pwa-block {
    background: var(--pwa-surface-2);
    border-radius: 16px;
    padding: 14px;
}

.pwa-dashed-btn {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 2px dashed color-mix(in srgb, var(--bs-border-color) 75%, transparent);
    background: transparent;
    color: var(--bs-secondary-color);
    font-weight: 700;
}

.pwa-dashed-btn:hover {
    background: color-mix(in srgb, var(--bs-body-bg) 70%, var(--bs-tertiary-bg));
    color: var(--bs-body-color);
}

.pwa-picker-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 14px;
    border: 0 !important;
    background: var(--pwa-surface-2);
    color: var(--bs-body-color);
    text-decoration: none;
}

.pwa-picker-field .value {
    font-weight: 650;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pwa-picker-field .hint {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.pwa-picker-field .chev {
    opacity: .55;
}

.pwa-picker-field[disabled],
.pwa-picker-field:disabled {
    opacity: .55;
    pointer-events: none;
}

/* =========================
   Language switcher
   ========================= */
.pwa-lang-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--pwa-surface-1);
    color: var(--bs-body-color);
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    position: relative;
    overflow: visible;
    transition: background .12s ease, transform .08s ease;
}

.pwa-lang-btn:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 86%, #000 14%);
}

[data-bs-theme="dark"] .pwa-lang-btn:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 78%, #fff 22%);
}

.pwa-flag-circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
}

.pwa-lang-flag {
    width: 22px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
    display: block;
}

.pwa-lang-chev {
    font-size: 12px;
    opacity: .65;
    transition: transform .15s ease;
}

.show>.pwa-lang-btn .pwa-lang-chev {
    transform: rotate(180deg);
}

.pwa-lang-menu {
    min-width: 190px;
    padding: .4rem;
    border: 0 !important;
    border-radius: 16px;
    background: color-mix(in srgb, var(--pwa-surface-2) 82%, transparent 18%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, .18);
    right: 0;
    left: auto;
}

.pwa-lang-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .65rem;
    border-radius: 12px;
}

.pwa-lang-item:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 86%, #000 14%);
}

[data-bs-theme="dark"] .pwa-lang-item:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 78%, #fff 22%);
}

.pwa-lang-item.active {
    background: rgba(var(--pwa-primary-rgb), .16);
}

.pwa-lang-label {
    font-weight: 600;
    font-size: .92rem;
}

/* =========================
   Bell button
   ========================= */
.pwa-bell-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--pwa-surface-1);
    color: var(--bs-body-color);
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    position: relative;
    overflow: visible;
    transition: background .12s ease, transform .08s ease;
}

.pwa-bell-btn::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 999px;
    background: rgba(var(--pwa-primary-rgb), .18);
    filter: blur(10px);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.pwa-bell-btn::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgba(var(--pwa-primary-rgb), .0);
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}

.pwa-bell-btn:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 86%, #000 14%);
}

[data-bs-theme="dark"] .pwa-bell-btn:hover {
    background: color-mix(in srgb, var(--pwa-surface-2) 78%, #fff 22%);
}

.pwa-bell-btn:active {
    transform: scale(.96);
}

.pwa-bell-btn i {
    font-size: 17px;
    opacity: .9;
    transform-origin: 50% 10%;
}

.pwa-bell-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #dc3545;
    box-shadow: 0 0 0 2px var(--pwa-surface-2);
}

.pwa-bell-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 999px;
    border: 2px solid rgba(220, 53, 69, .55);
    opacity: 0;
    transform: scale(.7);
    animation: pwaDotPulse 1.25s ease-out infinite;
}

@keyframes pwaDotPulse {
    0% {
        opacity: 0;
        transform: scale(.7);
    }

    20% {
        opacity: .55;
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

.pwa-bell-btn.is-new i {
    animation: pwaBellRing .55s ease-in-out 2;
}

.pwa-bell-btn.is-new::before {
    opacity: 1;
}

.pwa-bell-btn.is-new::after {
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(var(--pwa-primary-rgb), .22), 0 0 18px rgba(var(--pwa-primary-rgb), .26);
}

@keyframes pwaBellRing {
    0% {
        transform: rotate(0deg);
    }

    18% {
        transform: rotate(-12deg);
    }

    36% {
        transform: rotate(12deg);
    }

    54% {
        transform: rotate(-9deg);
    }

    72% {
        transform: rotate(9deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@media (prefers-reduced-motion:reduce) {

    .pwa-bell-dot::after,
    .pwa-bell-btn.is-new i {
        animation: none !important;
    }
}

/* =========================
   Alerts / Toasts
   ========================= */
.pwa-alert,
.alert.pwa-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .9rem 2.6rem .9rem 1rem;
    border-radius: 14px;
    background: var(--pwa-surface-2);
    border: 0 !important;
    font-size: .92rem;
}

.pwa-alert::before,
.alert.pwa-alert::before {
    content: "";
    width: 4px;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
    align-self: stretch;
    background: var(--bs-secondary);
}

.pwa-alert-success::before,
.alert.pwa-alert.alert-success::before {
    background: #198754;
}

.pwa-alert-danger::before,
.alert.pwa-alert.alert-danger::before {
    background: #dc3545;
}

.pwa-alert-warning::before,
.alert.pwa-alert.alert-warning::before {
    background: #ffc107;
}

.pwa-alert-info::before,
.alert.pwa-alert.alert-info::before {
    background: #0dcaf0;
}

.pwa-alert .pwa-alert-close {
    position: absolute;
    right: .55rem;
    top: .55rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    cursor: pointer;
}

.pwa-alert .pwa-alert-close:hover {
    background: color-mix(in srgb, var(--bs-body-bg) 70%, transparent);
    color: var(--bs-body-color);
}

.pwa-alert .pwa-alert-close:active {
    transform: scale(.96);
}

.pwa-alert .pwa-alert-close:focus-visible {
    outline: 2px solid rgba(var(--pwa-primary-rgb), .55);
    outline-offset: 2px;
}

@keyframes pwa-slide-in {
    from {
        transform: translateY(-8px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pwa-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

.pwa-alert.is-animate {
    animation: pwa-slide-in .22s ease-out both;
}

.pwa-alert.is-hiding {
    animation: pwa-fade-out .18s ease-in both;
}

.pwa-toast-wrap {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 12px;
    width: min(520px, calc(100% - 24px));
    z-index: 1100;
    pointer-events: none;
}

.pwa-toast-wrap .pwa-alert {
    pointer-events: auto;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--bs-body-bg) 85%, var(--pwa-surface-2));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
}

[data-bs-theme="dark"] .pwa-toast-wrap .pwa-alert {
    background: rgba(20, 20, 20, .72);
}

.pwa-alert .pwa-toast-progress {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 8px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-border-color) 55%, transparent);
    opacity: .75;
}

.pwa-alert .pwa-toast-progress>span {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 999px;
    background: rgba(var(--pwa-primary-rgb), .45);
    transform-origin: left center;
    transform: scaleX(1);
}

.pwa-alert.is-timing .pwa-toast-progress>span {
    animation: pwa-toast-progress linear forwards;
    animation-duration: var(--pwa-toast-ms, 6000ms);
}

@keyframes pwa-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

.pwa-alert:hover .pwa-toast-progress>span {
    animation-play-state: paused;
}

@media (prefers-reduced-motion:reduce) {
    .pwa-alert .pwa-toast-progress>span {
        animation: none !important;
    }
}

/* =========================
   Ads carousel
   ========================= */
.pwa-ads-carousel {
    position: relative;
    border-radius: var(--pwa-radius-lg);
    overflow: hidden;
}

.pwa-ads-carousel .carousel-indicators {
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

.pwa-ads-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 0;
    background-color: rgba(0, 0, 0, .25);
    opacity: 1;
    transition: width .3s ease, background-color .3s ease, transform .2s ease;
}

.pwa-ads-carousel .carousel-indicators .active {
    width: 26px;
    height: 8px;
    border-radius: 999px;
    background-color: var(--pwa-primary);
    transform: none;
    animation: pwa-indicator-grow .3s ease;
}

@keyframes pwa-indicator-grow {
    from {
        width: 8px;
    }

    to {
        width: 26px;
    }
}

.pwa-ad-close-btn,
.pwa-ads-carousel .ad-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 22px;
    line-height: 1;
    font-weight: 500;
    color: var(--bs-body-color);
    cursor: pointer;
    z-index: 10;
    transition: opacity .15s ease;
}

.pwa-ads-carousel .ad-close-btn:hover,
.pwa-ad-close-btn:hover {
    opacity: .7;
}

.pwa-ad-title {
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
}

.pwa-ad-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 45%, transparent 70%);
}

/* =========================
   Intl Tel Input
   ========================= */
.iti {
    width: 100%;
    position: relative;
}

.phone-flat {
    height: 54px;
    border-radius: 14px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    padding-left: var(--iti-input-pad, 150px) !important;
    font-size: 18px;
}

.iti__selected-flag {
    min-height: 54px;
    display: flex;
    align-items: center;
    padding: 0 14px !important;
}

.iti__flag {
    transform: scale(1.15);
    transform-origin: left center;
}

.iti__selected-dial-code {
    margin-left: 10px !important;
    font-size: 18px;
}

.iti .iti-sep {
    position: absolute;
    top: 12px;
    height: 30px;
    width: 2px;
    background: var(--iti-sep);
    left: var(--iti-sep-left, 120px);
    border-radius: 2px;
    pointer-events: none;
}

.iti__country-list {
    background: var(--iti-dd-bg) !important;
    color: var(--iti-dd-text) !important;
    border: 1px solid var(--iti-dd-border) !important;
}

.iti__country-name,
.iti__dial-code {
    color: var(--iti-dd-text) !important;
}

.iti__country:hover,
.iti__country.iti__highlight {
    background: var(--iti-dd-hover) !important;
}

.iti__search-input {
    background: var(--iti-dd-search-bg) !important;
    color: var(--iti-dd-text) !important;
    border: 1px solid var(--iti-dd-border) !important;
}

.iti__arrow {
    display: none !important;
}

.iti__flag-container {
    position: relative;
}

.iti__flag-container::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .85;
    transition: transform .25s ease, opacity .2s ease;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23ffffff'/%3E%3C/svg%3E");
}

html[data-bs-theme="light"] .iti__flag-container::after {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23111111'/%3E%3C/svg%3E");
    opacity: .75;
}

.iti--open .iti__flag-container::after {
    transform: translateY(-50%) rotate(180deg);
    opacity: 1;
}

/* =========================
   Global loader
   ========================= */
.pwa-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(2px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility .18s ease;
}

html[data-bs-theme="light"] .pwa-loader {
    background: rgba(255, 255, 255, .55);
}

.pwa-loader.is-show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.pwa-loader-card {
    min-width: 180px;
    padding: 18px;
    border-radius: 18px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-loader-text {
    font-size: 14px;
    color: var(--bs-secondary-color);
    user-select: none;
}

.pwa-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(var(--ui-primary-rgb, 221, 159, 0), .20);
    border-top-color: rgba(var(--ui-primary-rgb, 221, 159, 0), 1);
    animation: pwaSpin .9s linear infinite;
}

@keyframes pwaSpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================
   Button loader animation
   ========================= */
.pwa-btn-loading {
    position: relative;
    pointer-events: none;
}

.pwa-btn-loading .pwa-btn-text {
    display: inline-block;
    transition: opacity .18s ease, transform .18s ease;
}

.pwa-btn-loading.is-loading .pwa-btn-text {
    opacity: 0;
    transform: translateY(-4px);
}

.pwa-btn-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .18s ease, transform .18s ease;
}

.pwa-btn-loading.is-loading .pwa-btn-spinner {
    opacity: 1;
    transform: scale(1);
}

.pwa-btn-spinner .spinner-border {
    border-color: rgba(var(--pwa-primary-rgb), .25);
    border-top-color: var(--pwa-primary);
}

.btn-with-loader {
    position: relative;
}

.btn-with-loader.loading {
    pointer-events: none;
}

.btn-with-loader .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 3px solid #ccc;
    border-top: 3px solid var(--pwa-primary);
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* =========================
   Success check overlay
   ========================= */
.pwa-success-pop {
    position: fixed;
    left: 50%;
    top: 16px;
    transform: translateX(-50%);
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-body-bg) 85%, transparent);
    border: 1px solid var(--bs-border-color);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.pwa-success-pop.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pwa-success-check {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(var(--pwa-primary-rgb), .15);
    display: grid;
    place-items: center;
}

.pwa-success-check svg {
    width: 18px;
    height: 18px;
    stroke: var(--pwa-primary);
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: pwaCheckDraw .45s ease forwards;
}

@keyframes pwaCheckDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.pwa-success-text {
    font-weight: 800;
    font-size: .92rem;
}

/* =========================
   Offcanvas menu (grouped rows)
   ========================= */
.pwa-offcanvas {
    background-color: var(--pwa-app-bg) !important;
    background-image: var(--pwa-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.pwa-offcanvas .offcanvas-header {
    background: transparent !important;
}

.pwa-offcanvas hr {
    opacity: 1;
    border: 0;
    height: 1px;
    background: var(--pwa-sep);
}

/* =============================================================================
   PWA UI KIT — Menu System (final, replaces existing pwa-uikit.css menu section)
   All tokens: --pwa-primary, --pwa-primary-rgb, --pwa-surface-1/2,
                --pwa-app-bg, --pwa-group-radius, --pwa-single-radius
   ============================================================================= */

/* =========================
   Menu Stack / Group
   ========================= */

.pwa-menu-stack {
    display: grid;
    gap: 12px;
    width: 100%;
}

.pwa-menu-group {
    width: 100%;
    position: relative;
    border-radius: 0;
    overflow: visible;
    background: transparent;
}

/* =========================
   Base Menu Item
   ========================= */

.pwa-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    /* ← default: vertically centred */
    gap: .75rem;
    padding: .75rem .95rem;
    text-decoration: none;
    color: var(--bs-body-color);
    background: var(--pwa-surface-1);
    border: 0 !important;
    box-shadow: none !important;
    margin: 0;
    position: relative;
    transition: background .12s ease, transform .08s ease;
    border-radius: 0;
    text-align: left;
    min-height: 56px;
    /* ensures consistent tap target */
}

/* When item HAS a subtitle, switch to flex-start so icon aligns top */
.pwa-menu-item:has(.pwa-menu-sub) {
    align-items: flex-start;
}

/* Fallback for browsers without :has() */
.pwa-menu-item.has-sub {
    align-items: flex-start;
}

.pwa-menu-item:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 90%, #000 10%);
    text-decoration: none;
}

[data-bs-theme="dark"] .pwa-menu-item:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 78%, #fff 22%);
}

.pwa-menu-item:active {
    transform: scale(.995);
}

/* Separator line between items */
.pwa-menu-group>.pwa-menu-item:not(:last-of-type)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--pwa-app-bg);
}

/* Top / bottom radius */
.pwa-menu-group>.pwa-menu-item:first-child {
    border-radius: var(--pwa-group-radius) var(--pwa-group-radius) 0 0;
}

.pwa-menu-group>.pwa-menu-item:last-child {
    border-radius: 0 0 var(--pwa-group-radius) var(--pwa-group-radius);
}

/* Single-item group */
.pwa-menu-group>.pwa-menu-item:only-child,
.pwa-menu-group.is-single .pwa-menu-item {
    border-radius: var(--pwa-single-radius);
}

.pwa-menu-group.is-single .pwa-menu-item::after {
    display: none !important;
    content: none !important;
}

/* =========================
   Icon / Thumb
   ========================= */

.pwa-menu-ico {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pwa-surface-2);
    color: var(--bs-body-color);
    flex: 0 0 auto;
    /* Keep icon vertically centered regardless of item alignment */
    align-self: center;
}

.pwa-menu-ico.pwa-menu-thumb {
    background: var(--pwa-surface-2);
    overflow: hidden;
}

.pwa-menu-ico.pwa-menu-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.pwa-menu-ico.pwa-menu-thumb.is-square {
    border-radius: 14px;
}

/* =========================
   Text block
   ========================= */

.pwa-menu-text {
    line-height: 1.1;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
    display: block;
    /* Centre vertically when item has no subtitle */
    align-self: center;
}

/* When subtitle present, snap to top */
.pwa-menu-item:has(.pwa-menu-sub) .pwa-menu-text,
.pwa-menu-item.has-sub .pwa-menu-text {
    align-self: flex-start;
    padding-top: 2px;
}

.pwa-menu-title {
    font-weight: 500;
    text-align: left !important;
    min-width: 0;
}

.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* Right-side value in title row */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-menu-sub {
    margin-top: .14rem;
    font-size: .84rem;
    color: var(--bs-secondary-color);
    text-align: left !important;
}

/* =========================
   Right slot
   ========================= */

.pwa-menu-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
    align-self: center;
    /* always centred regardless of item height */
}

.pwa-menu-chevron {
    opacity: .55;
    font-size: 18px;
    transition: transform .18s ease, opacity .18s ease;
}

/* =========================
   Colour system
   ========================= */

/* Primary tint on icon, title, right, chevron */
.pwa-menu-item .pwa-menu-ico,
.pwa-menu-item .pwa-menu-title,
.pwa-menu-item .pwa-menu-right,
.pwa-menu-item .pwa-menu-chevron,
.pwa-menu-item .pwa-menu-right i {
    color: var(--pwa-primary);
}

.pwa-menu-item .pwa-menu-ico i,
.pwa-menu-item .pwa-menu-right i {
    color: inherit !important;
}

.pwa-menu-item .pwa-muted,
.pwa-menu-item .pwa-menu-sub,
.pwa-menu-item .small,
.pwa-menu-item .form-text {
    color: var(--bs-secondary-color);
}

/* Status variants */
.pwa-menu-item.is-danger,
.pwa-menu-item.is-danger .pwa-menu-title,
.pwa-menu-item.is-danger .pwa-menu-sub,
.pwa-menu-item.is-danger .pwa-menu-ico {
    color: #dc3545 !important;
}

.pwa-menu-item.is-danger:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 86%, #dc3545 14%);
}

.pwa-menu-item.is-success,
.pwa-menu-item.is-success .pwa-menu-title,
.pwa-menu-item.is-success .pwa-menu-sub,
.pwa-menu-item.is-success .pwa-menu-ico {
    color: #198754 !important;
}

.pwa-menu-item.is-success:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 86%, #198754 14%);
}

.pwa-menu-item.is-warning,
.pwa-menu-item.is-warning .pwa-menu-title,
.pwa-menu-item.is-warning .pwa-menu-sub,
.pwa-menu-item.is-warning .pwa-menu-ico {
    color: #ff9900 !important;
}

.pwa-menu-item.is-warning:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 86%, #DD9F00 14%);
}

.pwa-menu-item.is-info,
.pwa-menu-item.is-info .pwa-menu-title,
.pwa-menu-item.is-info .pwa-menu-sub,
.pwa-menu-item.is-info .pwa-menu-ico {
    color: #54B4D3 !important;
}

.pwa-menu-item.is-info:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 86%, #54B4D3 14%);
}

/* =========================
   Group Label
   ========================= */

.pwa-group-label {
    margin: 14px 4px 8px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--bs-secondary-color);
}

/* Notification category label — floats above cards like a date heading */
.pwa-notif-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* =========================
   Inline Group (pill buttons)
   ========================= */

.pwa-menu-group.is-inline {
    display: flex;
    background: var(--pwa-surface-2);
    border-radius: 30px;
    overflow: hidden;
}

.pwa-menu-group.is-inline .pwa-menu-item {
    flex: 1 1 0;
    border-radius: 0;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .65rem .95rem;
    text-align: center;
    min-height: 44px;
}

.pwa-menu-group.is-inline .pwa-menu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    left: auto;
    height: auto;
    background: var(--pwa-app-bg);
}

/* Inline button label */
.pwa-menu-group.is-inline .pwa-menu-title {
    font-size: .83rem;
    font-weight: 600;
}

.pwa-menu-group.is-inline .pwa-menu-ico {
    width: 24px;
    height: 24px;
    background: transparent;
    font-size: .8rem;
}

/* =========================
   Submenu / Accordion System
   ========================= */

.pwa-menu-item.has-submenu {
    cursor: pointer;
}

.pwa-menu-item.has-submenu.is-open {
    border-radius: var(--pwa-group-radius) var(--pwa-group-radius) 0 0 !important;
}

.pwa-menu-group>.pwa-menu-item.has-submenu.is-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--pwa-app-bg);
    display: block !important;
}

.pwa-menu-item.has-submenu.is-open .pwa-menu-chevron,
.pwa-menu-item.has-submenu[aria-expanded="true"] .pwa-menu-chevron {
    transform: rotate(180deg);
    opacity: .9;
}

/* Submenu container */
.pwa-submenu {
    width: 100%;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: height .26s ease, opacity .18s ease;
}

.pwa-submenu.is-open {
    visibility: visible;
    opacity: 1;
}

.pwa-submenu-inner {
    width: 100%;
}

.pwa-submenu .pwa-submenu-item {
    background: var(--pwa-surface-1);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0 !important;
}

.pwa-submenu .pwa-submenu-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--pwa-app-bg);
    display: block !important;
}

.pwa-submenu .pwa-submenu-item:last-child {
    border-radius: 0 0 var(--pwa-group-radius) var(--pwa-group-radius) !important;
}

.pwa-submenu .pwa-submenu-item .pwa-menu-text {
    width: 100%;
}

/* Last submenu trigger in group */
.pwa-menu-group>.pwa-menu-item.has-submenu:last-of-type {
    border-bottom-left-radius: var(--pwa-group-radius) !important;
    border-bottom-right-radius: var(--pwa-group-radius) !important;
    border-bottom: 0 !important;
}

.pwa-menu-group>.pwa-menu-item.has-submenu.is-open:last-of-type,
.pwa-menu-group>.pwa-menu-item.has-submenu[aria-expanded="true"]:last-of-type {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.pwa-menu-group>.pwa-submenu:last-child:not(.is-open) {
    display: none !important;
}

.pwa-menu-group>.pwa-submenu.is-open:last-child .pwa-menu-item:last-child {
    border-bottom-left-radius: var(--pwa-group-radius) !important;
    border-bottom-right-radius: var(--pwa-group-radius) !important;
    border-bottom: 0 !important;
}

.pwa-menu-group>.pwa-submenu+.pwa-menu-item::after {
    display: none;
}

/* Reshape classes for items around open submenus */
.pwa-menu-item.before-open-end {
    border-radius: 0 0 var(--pwa-group-radius) var(--pwa-group-radius) !important;
}

.pwa-menu-item.before-open-single {
    border-radius: var(--pwa-single-radius) !important;
}

.pwa-menu-item.after-open-start {
    border-radius: var(--pwa-group-radius) var(--pwa-group-radius) 0 0 !important;
}

.pwa-menu-item.after-open-single {
    border-radius: var(--pwa-single-radius) !important;
}

.pwa-menu-group .pwa-menu-item.before-open-end::after,
.pwa-menu-group .pwa-menu-item.before-open-single::after,
.pwa-menu-group .pwa-menu-item.after-open-start::after,
.pwa-menu-group .pwa-menu-item.after-open-single::after {
    display: none !important;
    content: none !important;
}

/* =========================
   Details Accordion
   ========================= */

.pwa-details-accordion>.pwa-menu-item.has-submenu:not(:last-of-type)::after {
    display: none !important;
    content: none !important;
}

.pwa-details-accordion>.pwa-menu-item.has-submenu:not(:first-of-type)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--pwa-app-bg);
    display: block;
}

.pwa-details-accordion>.pwa-menu-item.has-submenu.is-open::before,
.pwa-details-accordion>.pwa-menu-item.has-submenu[aria-expanded="true"]::before {
    display: none !important;
    content: none !important;
}

.pwa-details-accordion>.pwa-submenu.is-open::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--pwa-app-bg);
}

.pwa-details-accordion>.pwa-submenu+.pwa-menu-item::after {
    display: block !important;
}

.pwa-details-accordion .pwa-submenu-item {
    padding: 1rem;
    align-items: flex-start;
    background: color-mix(in srgb, var(--pwa-surface-1) 94%, #000 6%);
    border-radius: 0 !important;
}

.pwa-details-accordion .pwa-submenu-item::after {
    display: none !important;
    content: none !important;
}

.pwa-details-accordion .pwa-menu-title {
    font-weight: 700;
    letter-spacing: -.01em;
}

.pwa-details-accordion .pwa-menu-sub {
    margin-top: .2rem;
    font-size: .88rem;
    line-height: 1.35;
}

.pwa-details-accordion .pwa-menu-chevron {
    opacity: .82;
}

.pwa-details-accordion .pwa-menu-ico {
    width: 44px;
    height: 44px;
    background: color-mix(in srgb, var(--pwa-surface-2) 88%, transparent);
}

.pwa-details-accordion>.pwa-menu-item.has-submenu.is-open,
.pwa-details-accordion>.pwa-menu-item.has-submenu[aria-expanded="true"] {
    background: color-mix(in srgb, var(--pwa-surface-1) 92%, var(--pwa-primary) 8%);
    border-radius: var(--pwa-group-radius) var(--pwa-group-radius) 0 0 !important;
}

.pwa-details-accordion>.pwa-menu-item.has-submenu:last-of-type:not(.is-open):not([aria-expanded="true"]) {
    border-bottom-left-radius: var(--pwa-group-radius) !important;
    border-bottom-right-radius: var(--pwa-group-radius) !important;
}

.pwa-details-accordion>.pwa-submenu:last-child .pwa-submenu-item:last-child {
    border-bottom-left-radius: var(--pwa-group-radius) !important;
    border-bottom-right-radius: var(--pwa-group-radius) !important;
}

/* Accordion content */
.pwa-acc-list {
    display: grid;
    gap: 10px;
    width: 100%;
}

.pwa-acc-row {
    position: relative;
    padding: .15rem 0;
}

.pwa-acc-row:not(:last-child) {
    border-bottom: 1px dashed color-mix(in srgb, var(--bs-secondary-color) 26%, transparent);
    padding-bottom: .9rem;
}

.pwa-acc-row .fw-semibold {
    font-weight: 650;
}

.pwa-acc-row .small {
    line-height: 1.4;
}

.pwa-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pwa-primary);
    margin-top: .35rem;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pwa-primary) 18%, transparent);
}

.pwa-details-accordion .font-monospace {
    word-break: break-all;
    letter-spacing: .01em;
}

.pwa-details-accordion .badge {
    border-radius: 999px;
    font-weight: 600;
}

.pwa-details-accordion .pwa-submenu-item .pwa-muted {
    display: block;
}

/* Dark mode */
[data-bs-theme="dark"] .pwa-details-accordion .pwa-submenu-item {
    background: color-mix(in srgb, var(--pwa-surface-1) 88%, #000 12%);
}

[data-bs-theme="dark"] .pwa-acc-row:not(:last-child) {
    border-bottom-color: rgba(255, 255, 255, .08);
}

[data-bs-theme="dark"] .pwa-details-accordion>.pwa-menu-item.has-submenu.is-open,
[data-bs-theme="dark"] .pwa-details-accordion>.pwa-menu-item.has-submenu[aria-expanded="true"] {
    background: color-mix(in srgb, var(--pwa-surface-1) 88%, var(--pwa-primary) 12%);
}

/* Mobile */
@media (max-width: 576px) {
    .pwa-details-accordion>.pwa-menu-item.has-submenu {
        min-height: 72px;
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .pwa-details-accordion .pwa-submenu-item {
        padding: .9rem .9rem .95rem;
    }

    .pwa-details-accordion .pwa-menu-title {
        font-size: .98rem;
    }

    .pwa-details-accordion .pwa-menu-sub {
        font-size: .82rem;
    }
}

/* =============================================================================
   DEVICE REGISTRATION  —  append to pwa-uikit.css
   All tokens use existing kit variables (--pwa-primary-rgb, --pwa-surface-*, etc.)
   ============================================================================= */

/* ── 1. Device type chips — replaced by .pwa-pill (existing kit class) ── */

/* ── 2. Confirmed device chip ─────────────────────────────────────────────── */
.pwa-confirmed-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(25, 135, 84, .07);
    border-radius: 16px;
    border: 1.5px solid rgba(25, 135, 84, .22);
    animation: pwaConfirmIn .22s ease-out both;
}

@keyframes pwaConfirmIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-confirmed-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 135, 84, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pwa-confirmed-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-confirmed-brand {
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.pwa-confirmed-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-confirmed-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 3. Condition toggle — replaced by .pwa-pill (existing kit class) ── */

/* ── 4. IMEI / identifier card validation states ──────────────────────────── */
.pwa-ident-card {
    transition: border .2s ease, background .2s ease;
    border: 1.5px solid transparent;
}

.pwa-ident-card.is-valid {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .28) !important;
}

.pwa-ident-card.is-error {
    background: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .28) !important;
}

.pwa-ident-card.is-checking {
    opacity: .75;
}

/* IMEI digit counter badge */
.pwa-imei-counter {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pwa-surface-2);
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s;
}

.pwa-imei-counter.is-done {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.pwa-imei-counter.is-short {
    background: rgba(255, 193, 7, .18);
    color: #856404;
}

.pwa-imei-counter.is-long {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

/* ── 5. Contextual tip banner ─────────────────────────────────────────────── */
.pwa-tip-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--pwa-primary-rgb), .07);
    border-left: 3px solid var(--pwa-primary);
    animation: pwaConfirmIn .2s ease-out both;
}

.pwa-tip-banner-ico {
    font-size: 14px;
    color: var(--pwa-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.pwa-tip-banner-text {
    font-size: 12px;
    color: var(--bs-body-color);
    line-height: 1.55;
}

/* ── 6. Save button summary badges ───────────────────────────────────────── */
.pwa-save-wrap {
    position: relative;
}

.pwa-save-summary {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 20px;
    transition: opacity .2s ease;
}

.pwa-save-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(var(--pwa-primary-rgb), .14);
    color: var(--pwa-primary);
    animation: pwaConfirmIn .18s ease-out both;
}

.pwa-save-badge.is-ready {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

/* ── 7. Drop zone drag-over state ─────────────────────────────────────────── */
.pwa-dropzone.is-dragover {
    border-color: var(--pwa-primary);
    background: rgba(var(--pwa-primary-rgb), .05);
    transform: scale(1.01);
}

.pwa-dropzone.has-file .pwa-drop-ico {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

/* ── 8. Identifiers menu item live state ──────────────────────────────────── */
.pwa-ident-menu-status {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pwa-ident-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease;
}

.pwa-ident-dot.is-done {
    background: #198754;
}

.pwa-ident-dot.is-error {
    background: #dc3545;
}

/* ── FIX: flex truncation inside .pwa-menu-title ──────────────────────────────
   Root cause: flex children have implicit min-width:auto — they refuse to shrink
   below their text content width, so overflow:hidden never fires.
   Three rules together solve it completely, no HTML changes needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. The title row itself must be able to shrink (it lives inside .pwa-menu-text
      which already has min-width:0, but the title div also needs it) */
.pwa-menu-title {
    min-width: 0;
}

/* 2. The left label span: flex:1 1 0 means "take all available space AND shrink
      below content width". min-width:0 removes the auto floor. */
.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* 3. The right value span (inline-view / summary text): never shrink it so it
      stays readable, but cap at 48% so a very long value can't squeeze the label
      to nothing. Also truncate the value itself if it gets too long. */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar stepper — custom CSS removed; uses existing pwa-menu-group ── */


/* ── Device flag dots (index tile + show banners) ─────────────────────────── */

.pwa-flag {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}

.pwa-flag i {
    font-size: 9px;
}

/* colour variants */
.pwa-flag--blue {
    background: rgba(13, 110, 253, .15);
    border: 1.5px solid rgba(13, 110, 253, .50);
}

.pwa-flag--blue i {
    color: #0a58ca;
}

.pwa-flag--yellow {
    background: rgba(255, 193, 7, .18);
    border: 1.5px solid rgba(255, 193, 7, .65);
}

.pwa-flag--yellow i {
    color: #856404;
}

.pwa-flag--grey {
    background: rgba(108, 117, 125, .12);
    border: 1.5px solid rgba(108, 117, 125, .40);
}

.pwa-flag--grey i {
    color: #6c757d;
}

.pwa-flag--red {
    background: rgba(220, 53, 69, .10);
    border: 1.5px solid rgba(220, 53, 69, .40);
}

.pwa-flag--red i {
    color: #dc3545;
}

/* Popovers handled by Bootstrap — no custom ::after tooltip needed */


/* ── Flag popover skin ───────────────────────────────────────────────────────
   Bootstrap's default popover works fine; this just makes it feel native
   to the PWA theme. The .pwa-flag-popover customClass is set in the JS init.  */
.pwa-flag-popover .popover-body {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    color: var(--bs-body-color);
}

.pwa-flag-popover.bs-popover-top>.popover-arrow::after {
    border-top-color: var(--pwa-sep, #dee2e6);
}

.pwa-flag-popover.bs-popover-bottom>.popover-arrow::after {
    border-bottom-color: var(--pwa-sep, #dee2e6);
}

.pwa-flag-popover {
    border-color: var(--pwa-sep, #dee2e6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}




/* =============================================================================
   NOTIFICATION OFFCANVAS + PUSHER TOAST
   ============================================================================= */

/* ── Unread dot ──────────────────────────────────────────────────────────── */
.pwa-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.pwa-notif-dot.is-unread {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .18);
}

.pwa-notif-dot.is-read {
    background: rgba(var(--bs-secondary-rgb), .3);
}

/* ── Group label above cards ─────────────────────────────────────────────── */
.pwa-notif-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}

.pwa-notif-group-label:hover {
    opacity: .75;
}

.pwa-notif-group-label .notif-label-chevron {
    margin-left: auto;
}

/* ── Unread count badge ───────────────────────────────────────────────────── */
.pwa-notif-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pwa-primary);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Category stacked shadow ──────────────────────────────────────────────── */
.pwa-notif-category {
    position: relative;
    margin-bottom: 20px;
}

.pwa-notif-expanded-group {
    margin-bottom: 20px;
}

.pwa-notif-group-label {
    margin-bottom: 8px;
}

.pwa-notif-category[data-stack="2"]::before,
.pwa-notif-category[data-stack="3"]::before {
    content: '';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -4px;
    height: 8px;
    background: var(--pwa-surface-1);
    border-radius: 0 0 var(--pwa-group-radius) var(--pwa-group-radius);
    opacity: .55;
    z-index: -1;
}

.pwa-notif-category[data-stack="3"]::after {
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: -7px;
    height: 8px;
    background: var(--pwa-surface-1);
    border-radius: 0 0 var(--pwa-group-radius) var(--pwa-group-radius);
    opacity: .3;
    z-index: -2;
}

/* ── Unread item left accent ──────────────────────────────────────────────── */
.pwa-menu-item.has-submenu.fw-semibold,
.pwa-notif-sub-trigger.fw-semibold {
    border-left: 3px solid var(--pwa-primary) !important;
}

/* ── Group body (expanded, contains sub-items) ────────────────────────────── */
.pwa-notif-group-body {
    background: var(--pwa-surface-1);
    border-radius: 0 0 var(--pwa-single-radius) var(--pwa-single-radius);
    overflow: hidden;
    margin-top: -2px;
    /* attach flush to the trigger card */
}

/* ── Sub-item row (inside expanded group) ─────────────────────────────────── */
.pwa-notif-sub-item {
    overflow: hidden;
    transition: height .22s ease, opacity .22s ease;
}

.pwa-notif-sub-item:not(:last-child) {
    border-bottom: 1px solid rgba(var(--bs-secondary-rgb), .08);
}

.pwa-notif-sub-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .65rem .95rem;
    cursor: pointer;
    transition: background .12s ease;
}

.pwa-notif-sub-trigger:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 90%, #000 10%);
}

[data-bs-theme="dark"] .pwa-notif-sub-trigger:hover {
    background: color-mix(in srgb, var(--pwa-surface-1) 78%, #fff 22%);
}

.pwa-notif-sub-trigger.is-open {
    background: color-mix(in srgb, var(--pwa-surface-1) 90%, var(--pwa-primary) 10%);
}

.pwa-notif-sub-ico {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pwa-surface-2);
    color: var(--pwa-primary);
    flex-shrink: 0;
    font-size: .85rem;
}

.pwa-notif-sub-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
}

.pwa-notif-sub-title {
    flex: 1;
    min-width: 0;
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--bs-body-color);
}

.pwa-notif-sub-item.is-unread .pwa-notif-sub-title {
    font-weight: 700;
}

.pwa-notif-sub-time {
    flex-shrink: 0;
    font-size: .7rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.pwa-notif-sub-chev {
    flex-shrink: 0;
    color: var(--bs-secondary-color);
    margin-left: 4px;
}

.pwa-notif-sub-trigger.is-open .pwa-notif-sub-chev i {
    transform: rotate(180deg);
}

/* Sub-item expanded body */
.pwa-notif-sub-body {
    padding: 0 14px;
    background: color-mix(in srgb, var(--pwa-surface-1) 94%, #000 6%);
}

[data-bs-theme="dark"] .pwa-notif-sub-body {
    background: color-mix(in srgb, var(--pwa-surface-1) 88%, #000 12%);
}

.pwa-notif-sub-msg {
    font-size: .84rem;
    line-height: 1.5;
    padding: 10px 0 6px;
    margin: 0;
    white-space: pre-line;
}

/* ── Action row ───────────────────────────────────────────────────────────── */
.pwa-notif-actions {
    display: flex;
    align-items: center;
    width: 100%;
    border-top: 1px solid rgba(var(--bs-secondary-rgb), .12);
    padding: 9px 0 10px;
}

.pwa-notif-action-btn {
    flex: 1;
    text-align: center;
    font-size: .83rem;
    font-weight: 700;
    color: var(--pwa-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: none;
    display: block;
    transition: opacity .15s;
}

.pwa-notif-action-btn:hover {
    opacity: .75;
}

.pwa-notif-action-btn.is-read {
    color: var(--bs-secondary-color);
    cursor: default;
}

.pwa-notif-action-btn.is-loading {
    color: var(--bs-secondary-color);
    cursor: wait;
    pointer-events: none;
}

.pwa-notif-action-btn.is-loading .fa-circle-notch {
    animation: fa-spin .6s linear infinite;
}

/* Pusher toast action button loading state */
.pusher-toast-card .pwa-notif-action-btn.is-loading {
    color: var(--bs-secondary-color);
    cursor: wait;
}

.pwa-notif-action-divider {
    width: 1px;
    height: 18px;
    background: rgba(var(--bs-secondary-rgb), .2);
    flex-shrink: 0;
}

/* Accordion body for single-item card */
.pwa-notif-acc-body {
    background: var(--pwa-surface-1);
    border-radius: 0 0 var(--pwa-single-radius) var(--pwa-single-radius);
    overflow: hidden;
}

/* ── Text constraints ─────────────────────────────────────────────────────── */
#notifOffcanvas .pwa-menu-text {
    min-width: 0;
    flex: 1 1 auto;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════════
   PUSHER TOAST v3 — flat, semi-transparent, no borders/shadows, no color text
   ══════════════════════════════════════════════════════════════════════════ */

.pusher-toast-wrap {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: min(480px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

/* FLAT card — no border, no shadow, just semi-transparent blur */
.pusher-toast-card {
    pointer-events: all;
    border-radius: 16px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(240, 240, 245, .82);
    border: none;
    box-shadow: none;
    animation: pusherSlideIn .25s ease;
}

[data-bs-theme="dark"] .pusher-toast-card {
    background: rgba(28, 28, 36, .85);
}

/* Header — collapsed view */
.pusher-toast-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 40px 12px 12px;
    cursor: pointer;
    position: relative;
}

.pusher-toast-logo {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
    display: block;
    align-self: flex-start;
    margin-top: 1px;
}

.pusher-toast-collapsed-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Collapsed: title + time on same row */
.pusher-toast-collapsed-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pusher-toast-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: .93rem;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pusher-toast-time-el {
    flex-shrink: 0;
    font-size: .78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* Subtitle — message preview below title (collapsed state) */
.pusher-toast-subtitle {
    font-size: .80rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.35;
}

/* Expanded rows — hidden by default */
.pusher-toast-expanded-row {
    display: none;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.pusher-toast-appname {
    font-size: .78rem;
    font-weight: 600;
    color: var(--bs-body-color);
    white-space: nowrap;
}

.pusher-toast-time-el2 {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.pusher-toast-title-row {
    display: none;
}

.pusher-toast-title-exp {
    font-weight: 700;
    font-size: .93rem;
    color: var(--bs-body-color);
    display: block;
    word-break: break-word;
}

/* Chevron — absolute top-right, centered vertically in header */
.pusher-toast-chevron {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: var(--bs-secondary-color);
    font-size: 10px;
    transition: transform .25s ease;
}

.pusher-toast-card.is-expanded .pusher-toast-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* Expandable body */
.pusher-toast-body-expand {
    height: 0;
    overflow: hidden;
    transition: height .28s ease;
}

/* Body inner — NO top divider line */
.pusher-toast-body-inner {
    padding: 0 12px 12px;
}

.pusher-toast-full-msg {
    font-size: .84rem;
    color: var(--bs-body-color);
    line-height: 1.5;
    margin: 8px 0 10px;
    white-space: pre-line;
}

/* Action row — divider ONLY above the buttons, no vertical divider between buttons */
.pusher-toast-card .pwa-notif-actions {
    border-top: 1px solid rgba(var(--bs-secondary-rgb), .15);
    padding-top: 8px;
}

/* Keep action button colors normal (no tinted text) */
.pusher-toast-card .pwa-notif-action-btn {
    color: var(--bs-body-color);
    font-weight: 600;
}

.pusher-toast-card .pwa-notif-action-btn:hover {
    opacity: .7;
}

/* Remove the vertical divider between toast action buttons */
.pusher-toast-card .pwa-notif-action-divider {
    display: none;
}

/* Animations */
@keyframes pusherSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================
   Global sheet
   ========================= */
.pwa-sheet.offcanvas-bottom {
    border-top-left-radius: 24px !important;
    border-top-right-radius: 24px !important;
    overflow: hidden !important;
}

.pwa-sheet.offcanvas {
    border: 0 !important;
    background: var(--pwa-surface-1, var(--pwa-surface-1)) !important;
}

.pwa-sheet .pwa-sheet-card {
    border-radius: 24px 24px 0 0 !important;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
}

.pwa-sheet .pwa-sheet-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--pwa-surface-1, var(--pwa-surface-1)) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 0 !important;
}

.pwa-sheet .pwa-sheet-handle-wrap {
    background: var(--pwa-surface-1, var(--pwa-surface-1)) !important;
    position: sticky;
    top: 0;
    z-index: 6;
    padding-top: 8px;
}

.pwa-sheet .pwa-sheet-handle {
    background: var(--pwa-sep) !important;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    margin: 0 auto 6px;
}

.pwa-sheet .pwa-sheet-scroll {
    padding-top: 8px;
}

.pwa-sheet .pwa-menu-stack {
    gap: 12px;
}

#pwaGlobalSheetBody .pwa-menu-item {
    background: var(--pwa-surface-2) !important;
    border-radius: 18px !important;
}

#pwaGlobalSheet .pwa-sheet-card {
    transform: translateY(14px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
}

#pwaGlobalSheet.show .pwa-sheet-card {
    transform: translateY(0);
    opacity: 1;
}

.pwa-sheet.offcanvas {
    transition: transform .26s ease, opacity .26s ease;
}

.pwa-sheet.offcanvas:not(.show) {
    opacity: 0;
}

.pwa-sheet.offcanvas.show {
    opacity: 1;
}

#pwaGlobalSheet .offcanvas-body {
    overflow-x: visible !important;
}

#pwaGlobalSheet .offcanvas-body * {
    overscroll-behavior: contain;
}

.pwa-sheet-msg {
    position: relative;
    background: var(--pwa-surface-1);
    border-radius: 18px;
    padding: 8px 14px;
    overflow: hidden;
}

[data-bs-theme="dark"] .pwa-sheet-msg {
    background: var(--pwa-surface-2);
}

.pwa-sheet-msg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: var(--pwa-sep);
}

.pwa-sheet-msg.is-success::before {
    background: #198754;
}

.pwa-sheet-msg.is-failed::before {
    background: #dc3545;
}

.pwa-sheet-msg.is-warning::before {
    background: #ffc107;
}

.pwa-sheet-msg.is-info::before {
    background: #0dcaf0;
}

.pwa-sheet-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    position: relative;
}

.pwa-sheet-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(127, 127, 127, .22);
}

[data-bs-theme="dark"] .pwa-sheet-row:not(:last-child)::after {
    opacity: .55;
}

.pwa-sheet-row .pwa-k {
    color: var(--bs-secondary-color);
    font-weight: 500;
    font-size: .88rem;
    flex: 0 0 auto;
}

.pwa-sheet-row .pwa-v {
    font-weight: 750;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.pwa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .2px;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 0;
}

.pwa-status-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--bs-body-color);
    opacity: .75;
}

.pwa-status-badge.is-success {
    background: rgba(25, 135, 84, .12);
}

.pwa-status-badge.is-success .dot {
    background: #198754;
    opacity: 1;
}

.pwa-status-badge.is-failed {
    background: rgba(220, 53, 69, .12);
}

.pwa-status-badge.is-failed .dot {
    background: #dc3545;
    opacity: 1;
}

.pwa-status-badge.is-warning {
    background: rgba(255, 193, 7, .16);
}

.pwa-status-badge.is-warning .dot {
    background: #ffc107;
    opacity: 1;
}

.pwa-status-badge.is-info {
    background: rgba(13, 202, 240, .14);
}

.pwa-status-badge.is-info .dot {
    background: #0dcaf0;
    opacity: 1;
}

.pwa-sheet-actions {
    margin-top: 12px;
}

.pwa-action-group {
    background: var(--pwa-surface-1);
    border-radius: 18px;
    overflow: hidden;
}

.pwa-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    text-decoration: none;
    color: var(--bs-body-color);
    background: transparent;
    border: 0;
    width: 100%;
    cursor: pointer;
}

.pwa-action-row:active {
    background: rgba(0, 0, 0, .03);
}

[data-bs-theme="dark"] .pwa-action-row:active {
    background: rgba(255, 255, 255, .05);
}

.pwa-action-row:not(:last-child) {
    box-shadow: inset 0 -1px 0 var(--pwa-sep);
}

.pwa-action-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.pwa-action-ico {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pwa-surface-2);
    flex: 0 0 auto;
}

.pwa-action-text {
    min-width: 0;
}

.pwa-action-title {
    font-weight: 750;
    line-height: 1.1;
}

.pwa-action-sub {
    margin-top: .14rem;
    font-size: .84rem;
    color: var(--bs-secondary-color);
}

.pwa-action-right {
    opacity: .55;
    font-size: 18px;
}

.js-plan-pick.is-active {
    background: var(--pwa-surface-3);
    border-left: 4px solid var(--pwa-primary);
}

.js-plan-pick.is-active .pwa-menu-ico i {
    color: var(--pwa-primary);
}

.pwa-btn-viewplan {
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    flex: 0 0 auto;
}

/* =========================
   Page header / transitions
   ========================= */
.pwa-page-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--pwa-app-bg);
    opacity: .98;
}

.pwa-page-header:not(.is-scrolled) {
    border-bottom: 1px solid transparent;
    box-shadow: none;
}

.pwa-page-header.is-scrolled {
    opacity: 1;
}

.pwa-back-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pwa-page {
    min-height: 100vh;
}

body.pwa-enter .pwa-page {
    will-change: opacity, transform;
    animation: pwaEnter .18s ease-out both;
}

@keyframes pwaEnter {
    from {
        opacity: .6;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

body.pwa-leave-back .pwa-page {
    will-change: opacity, transform;
    animation: pwaLeaveBack .18s ease-in both;
}

@keyframes pwaLeaveBack {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: .6;
        transform: translateX(22px);
    }
}

body.is-sheet-open .pwa-page {
    animation: none !important;
    transform: none !important;
}

@media (prefers-reduced-motion:reduce) {

    body.pwa-enter .pwa-page,
    body.pwa-leave-back .pwa-page {
        animation: none !important;
    }
}

/* =========================
   Focus handling (NO RING)
   ========================= */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible,
textarea.form-control:focus,
textarea.form-control:focus-visible {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--pwa-primary) !important;
    background: color-mix(in srgb, rgba(var(--pwa-primary-rgb), .05) 25%, var(--pwa-surface-2)) !important;
}

.iti,
.iti * {
    box-shadow: none !important;
}

.iti:focus-within {
    box-shadow: none !important;
    outline: none !important;
}

.phone-flat:focus,
.phone-flat:focus-visible,
.iti input.phone-flat:focus,
.iti input.phone-flat:focus-visible {
    box-shadow: none !important;
    outline: none !important;
    border-color: var(--pwa-primary) !important;
}

/* =========================
   Market / product details
   ========================= */
.pwa-fav-btn.is-on {
    background: rgba(var(--pwa-primary-rgb), .18);
}

.pwa-fav-btn.is-on i {
    color: rgba(var(--pwa-primary-rgb), 1);
}

.pwa-photo-stage {
    border-radius: 18px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width:768px) {
    .pwa-photo-stage {
        height: 360px;
    }
}

.pwa-photo-stage--empty {
    flex-direction: column;
    color: var(--bs-secondary-color);
}

.pwa-product-hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pwa-price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 1rem;
}

.pwa-old-price {
    text-decoration: line-through;
    color: var(--bs-secondary-color);
}

.pwa-main-price {
    font-weight: 600;
    font-size: 1.05rem;
}

.pwa-product-title {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.15;
}

.pwa-product-subtitle {
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
}

.pwa-rating-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}

.pwa-rating-star {
    color: rgba(var(--pwa-primary-rgb), 1);
}

.pwa-rating-count {
    color: var(--bs-secondary-color);
    opacity: .85;
}

.pwa-product-desc {
    margin-top: 1rem;
    color: var(--bs-secondary-color);
    line-height: 1.55;
}

.pwa-qty {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--bs-tertiary-bg);
}

.pwa-qty-btn {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--bs-body-color);
}

.pwa-qty-btn:active {
    transform: scale(.98);
}

.pwa-qty-input {
    width: 34px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 700;
    color: var(--bs-body-color);
    outline: none;
}

.pwa-bottom-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.pwa-bottom-actions-inner {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 0 auto;
}

.pwa-hscroll {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .35rem;
}

.pwa-hscroll::-webkit-scrollbar {
    display: none;
}

/* product card */
.pwa-product-card {
    position: relative;
    background: var(--pwa-surface-1);
    border: 0 !important;
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .06);
    overflow: hidden;
}

.pwa-product-card a {
    color: inherit;
    text-decoration: none;
}

.pwa-product-top {
    position: relative;
    padding: 14px 14px 0 14px;
}

.pwa-product-media {
    position: relative;
    border-radius: 14px;
    background: var(--bs-tertiary-bg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pwa-product-media .pwa-product-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: 22px;
}

.pwa-product-fav {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--pwa-sep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
    cursor: pointer;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.pwa-product-fav i {
    font-size: 15px;
    color: #777;
    transition: color .2s ease, transform .2s ease;
}

.pwa-product-fav:hover {
    background: rgba(var(--pwa-primary-rgb), .12);
}

.pwa-product-fav:hover i {
    color: var(--pwa-primary);
}

.pwa-product-fav.is-active {
    background: var(--pwa-primary);
    box-shadow: 0 6px 18px rgba(var(--pwa-primary-rgb), .35);
}

.pwa-product-fav.is-active i {
    color: #fff;
}

.pwa-product-fav:active {
    transform: scale(.9);
}

.pwa-product-fav.pop i {
    animation: pwa-heart-pop .25s ease;
}

@keyframes pwa-heart-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

.pwa-product-body {
    padding: 12px 14px 14px 14px;
}

.pwa-product-name {
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.15;
    max-width: calc(100% - 56px);
}

.pwa-product-price {
    margin-top: 6px;
    font-size: 1.15rem;
    font-weight: 800;
}

.pwa-product-cart {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: rgba(var(--pwa-primary-rgb), .22);
    color: var(--bs-body-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pwa-product-cart i {
    font-size: 16px;
}

.pwa-product-card:active {
    transform: scale(.995);
}

.pwa-product-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.pwa-product-strip::-webkit-scrollbar {
    display: none;
}

.pwa-product-strip .pwa-product-card {
    flex: 0 0 210px;
}

@media (max-width:380px) {
    .pwa-product-strip .pwa-product-card {
        flex-basis: 190px;
    }
}

/* =========================
   Photos upload + grid
   ========================= */
.pwa-photo-upload {
    margin: 0;
}

.pwa-dropzone {
    display: block;
    width: 100%;
    border-radius: var(--pwa-radius);
    background: var(--pwa-surface-1);
    border: 1px dashed rgba(0, 0, 0, .12);
    padding: 14px;
    cursor: pointer;
    user-select: none;
}

.pwa-dropzone:active {
    transform: scale(.995);
}

.pwa-dropzone-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pwa-drop-ico {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pwa-surface-2);
    font-size: 18px;
    color: var(--pwa-primary);
}

.pwa-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width:420px) {
    .pwa-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pwa-photo-card {
    background: var(--pwa-surface-1);
    border-radius: var(--pwa-radius);
    overflow: hidden;
    border: 0;
    box-shadow: none;
}

.pwa-photo-card.is-dragging {
    opacity: .65;
}

.pwa-photo-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--pwa-surface-2);
}

.pwa-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pwa-photo-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.pwa-photo-drag {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    backdrop-filter: blur(6px);
    cursor: grab;
}

.pwa-photo-del {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 0;
    background: color-mix(in srgb, var(--bs-body-bg) 82%, transparent);
    backdrop-filter: blur(6px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pwa-photo-del:active,
.pwa-photo-drag:active {
    transform: scale(.98);
}

.pwa-photo-badges {
    position: absolute;
    left: 8px;
    top: 8px;
}


/* =========================
   Premium Modern Stepper
   Reusable: horizontal + vertical
   Primary color: #FFB81C
   ========================= */

.pwa-stepper {
    --step-size: 42px;
    --step-line: 3px;
    --step-gap: 1rem;

    --step-bg: var(--bs-body-bg, #fff);
    --step-surface: var(--pwa-surface-2, #f8fafc);
    --step-border: rgba(255, 184, 28, .20);
    --step-muted: #94a3b8;
    --step-text: #0f172a;
    --step-soft-text: #64748b;

    --step-active: #FFB81C;
    --step-done: #FFB81C;
    --step-lock: #cbd5e1;

    width: 100%;
}

/* wrapper */
.pwa-stepper-track {
    display: flex;
    width: 100%;
}

/* -------------------------
   Horizontal
   ------------------------- */
.pwa-stepper.is-horizontal {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .35rem 0 .5rem;
}

.pwa-stepper.is-horizontal::-webkit-scrollbar {
    display: none;
}

.pwa-stepper.is-horizontal .pwa-stepper-track {
    align-items: flex-start;
    min-width: max-content;
    width: 100%;
    gap: 0;
}

/* -------------------------
   Vertical
   ------------------------- */
.pwa-stepper.is-vertical .pwa-stepper-track {
    flex-direction: column;
    gap: 0;
}

/* -------------------------
   Item
   ------------------------- */
.pwa-step-item {
    position: relative;
    min-width: 0;
}

.pwa-stepper.is-horizontal .pwa-step-item {
    flex: 1 1 0;
}

.pwa-step-link,
.pwa-step-static {
    position: relative;
    display: flex;
    gap: .85rem;
    text-decoration: none;
    color: inherit;
}

.pwa-step-link:hover {
    text-decoration: none;
}

.pwa-step-static {
    cursor: default;
}

.pwa-stepper.is-horizontal .pwa-step-link,
.pwa-stepper.is-horizontal .pwa-step-static {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 .6rem;
}

.pwa-stepper.is-vertical .pwa-step-link,
.pwa-stepper.is-vertical .pwa-step-static {
    align-items: flex-start;
    padding: 0 0 1.1rem 0;
}

/* -------------------------
   Connector
   ------------------------- */
.pwa-step-connector {
    position: absolute;
    background: rgba(148, 163, 184, .22);
    overflow: hidden;
}

.pwa-step-connector-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #FFB81C 0%, #f59e0b 100%);
    transition: width .35s ease, height .35s ease;
}

.pwa-stepper.is-horizontal .pwa-step-connector {
    top: calc(var(--step-size) / 2 - var(--step-line) / 2);
    left: calc(50% + var(--step-size) / 2 + .35rem);
    right: calc(-50% + var(--step-size) / 2 + .35rem);
    height: var(--step-line);
    border-radius: 999px;
}

.pwa-stepper.is-vertical .pwa-step-connector {
    top: calc(var(--step-size) + .3rem);
    left: calc(var(--step-size) / 2 - var(--step-line) / 2);
    width: var(--step-line);
    height: calc(100% - var(--step-size) - .1rem);
    border-radius: 999px;
}

.pwa-stepper.is-vertical .pwa-step-connector-fill {
    width: 100%;
    height: 0%;
    inset: 0 0 auto 0;
    background: linear-gradient(180deg, #FFB81C 0%, #f59e0b 100%);
}

/* completed connector */
.pwa-step-item.is-done .pwa-step-connector-fill {
    width: 100%;
}

.pwa-stepper.is-vertical .pwa-step-item.is-done .pwa-step-connector-fill {
    height: 100%;
}

/* partially filled connector before active step */
.pwa-step-item.is-active .pwa-step-connector-fill {
    width: 45%;
}

.pwa-stepper.is-vertical .pwa-step-item.is-active .pwa-step-connector-fill {
    width: 100%;
    height: 45%;
}

/* -------------------------
   Step circle
   ------------------------- */
.pwa-step-badge {
    position: relative;
    width: var(--step-size);
    height: var(--step-size);
    flex: 0 0 var(--step-size);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--step-bg);
    border: 1.5px solid rgba(148, 163, 184, .35);
    color: var(--step-soft-text);
    font-weight: 700;
    font-size: .95rem;
    z-index: 2;
    transition:
        transform .2s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}

.pwa-step-badge::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
}

/* done */
.pwa-step-item.is-done .pwa-step-badge {
    background: linear-gradient(135deg, #FFB81C 0%, #f59e0b 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 24px rgba(255, 184, 28, .30);
}

.pwa-step-item.is-done .pwa-step-badge::after {
    border-color: rgba(255, 255, 255, .24);
}

/* active */
.pwa-step-item.is-active .pwa-step-badge {
    color: #b77900;
    border-color: rgba(255, 184, 28, .65);
    box-shadow:
        0 0 0 5px rgba(255, 184, 28, .14),
        0 8px 20px rgba(255, 184, 28, .16);
    transform: translateY(-1px);
}

.pwa-step-item.is-active .pwa-step-badge::after {
    border-color: rgba(255, 184, 28, .28);
}

/* locked */
.pwa-step-item.is-locked .pwa-step-badge {
    background: #f8fafc;
    border-color: rgba(203, 213, 225, .7);
    color: #cbd5e1;
    box-shadow: none;
}

/* -------------------------
   Content
   ------------------------- */
.pwa-step-content {
    min-width: 0;
}

.pwa-stepper.is-horizontal .pwa-step-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    max-width: 180px;
}

.pwa-stepper.is-vertical .pwa-step-content {
    padding-top: .2rem;
}

.pwa-step-title {
    font-size: .96rem;
    font-weight: 600;
    color: var(--step-soft-text);
    line-height: 1.25;
}

.pwa-step-subtitle {
    font-size: .78rem;
    color: var(--step-muted);
    line-height: 1.3;
}

.pwa-step-meta {
    margin-top: .15rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: #d97706;
}

/* states on text */
.pwa-step-item.is-active .pwa-step-title,
.pwa-step-item.is-done .pwa-step-title {
    color: var(--step-text);
}

.pwa-step-item.is-locked .pwa-step-title,
.pwa-step-item.is-locked .pwa-step-subtitle {
    color: #94a3b8;
}

/* custom state colors */
.pwa-step-item.has-state-success .pwa-step-title,
.pwa-step-item.has-state-success .pwa-step-meta {
    color: #16a34a;
}

.pwa-step-item.has-state-warning .pwa-step-title,
.pwa-step-item.has-state-warning .pwa-step-meta {
    color: #d97706;
}

.pwa-step-item.has-state-danger .pwa-step-title,
.pwa-step-item.has-state-danger .pwa-step-meta {
    color: #dc2626;
}

.pwa-step-item.has-state-info .pwa-step-title,
.pwa-step-item.has-state-info .pwa-step-meta {
    color: #2563eb;
}

/* -------------------------
   Optional marker bubble
   ------------------------- */
.pwa-step-marker {
    position: absolute;
    top: -10px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #FFB81C 0%, #f59e0b 100%);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(255, 184, 28, .25);
    z-index: 3;
}

/* check icon inside done badge */
.pwa-step-check {
    font-size: .95rem;
    line-height: 1;
}

/* disabled cursor */
.pwa-step-item.is-locked .pwa-step-link {
    pointer-events: none;
    cursor: not-allowed;
}

/* optional style */
.pwa-step-title em {
    margin-left: .3rem;
    font-style: italic;
    opacity: .8;
}

/* compact */
@media (max-width: 640px) {
    .pwa-stepper {
        --step-size: 36px;
    }

    .pwa-stepper.is-horizontal .pwa-step-link,
    .pwa-stepper.is-horizontal .pwa-step-static {
        padding: 0 .35rem;
    }

    .pwa-step-title {
        font-size: .86rem;
    }

    .pwa-step-subtitle,
    .pwa-step-meta {
        display: none;
    }

    .pwa-stepper.is-horizontal .pwa-step-content {
        max-width: 110px;
    }
}

/* =========================
   Tracking menu timeline
   ========================= */

/* =========================
   Premium Order Tracking
   ========================= */

.pwa-track-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: .35rem;
}

.pwa-track-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .95rem;
    align-items: stretch;
}

.pwa-track-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 72px;
    position: relative;
}

.pwa-track-node {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-body-bg, #fff);
    border: 1.5px solid rgba(148, 163, 184, .35);
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    flex: 0 0 auto;
    z-index: 2;
    transition:
        transform .2s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}

.pwa-track-node::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    border: 1px solid transparent;
    pointer-events: none;
}

.pwa-track-line {
    position: relative;
    width: 3px;
    flex: 1 1 auto;
    margin-top: .45rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .16);
    overflow: hidden;
}

.pwa-track-line-fill {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #FFB81C 0%, #f59e0b 100%);
    transition: height .35s ease;
}

/* done */
.pwa-track-step.is-done .pwa-track-node {
    background: linear-gradient(135deg, #FFB81C 0%, #f59e0b 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(255, 184, 28, .22);
}

.pwa-track-step.is-done .pwa-track-node::after {
    border-color: rgba(255, 255, 255, .22);
}

.pwa-track-step.is-done .pwa-track-line-fill {
    height: 100%;
}

/* active */
.pwa-track-step.is-active .pwa-track-node {
    color: #b77900;
    border-color: rgba(255, 184, 28, .72);
    box-shadow:
        0 0 0 5px rgba(255, 184, 28, .12),
        0 8px 20px rgba(255, 184, 28, .14);
    animation: pwaTrackPulse 1.8s ease-in-out infinite;
}

.pwa-track-step.is-active .pwa-track-node::after {
    border-color: rgba(255, 184, 28, .28);
}

.pwa-track-step.is-active .pwa-track-line-fill {
    height: 45%;
}

.pwa-track-step.is-active .pwa-track-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(255, 184, 28, .08) 0%,
            rgba(245, 158, 11, .55) 50%,
            rgba(255, 184, 28, .08) 100%);
    animation: pwaTrackShimmer 1.6s linear infinite;
}

/* locked */
.pwa-track-step.is-locked .pwa-track-node {
    background: #f8fafc;
    border-color: rgba(203, 213, 225, .75);
    color: #cbd5e1;
    box-shadow: none;
}

/* clickable */
.pwa-track-step.is-clickable .pwa-menu-item,
.pwa-track-step.is-clickable button.pwa-menu-item {
    cursor: pointer;
}

.pwa-track-step.is-clickable .pwa-menu-title {
    transition: color .2s ease, transform .2s ease;
}

.pwa-track-step.is-clickable:hover .pwa-menu-title {
    color: #b77900;
    transform: translateX(2px);
}

button.pwa-menu-item {
    font: inherit;
}

/* compact mobile */
@media (max-width: 640px) {
    .pwa-track-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: .8rem;
    }

    .pwa-track-rail {
        min-height: 64px;
    }

    .pwa-track-node {
        width: 28px;
        height: 28px;
        font-size: .76rem;
    }
}

/* animations */
@keyframes pwaTrackPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 184, 28, .22);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 0 9px rgba(255, 184, 28, .05);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 184, 28, 0);
    }
}

@keyframes pwaTrackShimmer {
    0% {
        transform: translateY(-100%);
        opacity: .12;
    }

    50% {
        opacity: .72;
    }

    100% {
        transform: translateY(100%);
        opacity: .12;
    }
}

@media (prefers-reduced-motion: reduce) {

    .pwa-track-node,
    .pwa-track-line-fill,
    .pwa-track-line::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================
   Reusable Payment Status UI (Premium)
   ========================================= */

.pwa-status-wrap {
    position: relative;
}

/* Icon container */
.pwa-status-icon {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    isolation: isolate;
}

/* Rings */
.pwa-status-icon .ring,
.pwa-status-icon .ring2 {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(var(--bs-primary-rgb), .22);
    opacity: .9;
    animation: pwaRingPulse 1.2s ease-in-out infinite;
    pointer-events: none;
}

.pwa-status-icon .ring2 {
    inset: -8px;
    opacity: .55;
    animation-duration: 1.45s;
    animation-delay: .10s;
}

/* Core (round) */
.pwa-status-icon .core {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow:
        0 14px 34px rgba(var(--bs-primary-rgb), .18),
        0 3px 10px rgba(0, 0, 0, .12);
    border: 1px solid rgba(255, 255, 255, .20);
}

/* Default icons hidden */
.pwa-status-icon .icon-success,
.pwa-status-icon .icon-failed,
.pwa-status-icon .icon-processing {
    display: none;
}

/* Spinner */
.pwa-status-icon .spinner {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 3px solid rgba(var(--bs-primary-rgb), .25);
    border-top-color: rgba(var(--bs-primary-rgb), 1);
    animation: pwaSpin .9s linear infinite;
}

/* ---------- PROCESSING ---------- */
.pwa-status-icon.is-processing .core {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .92), rgba(var(--bs-primary-rgb), .62));
}

.pwa-status-icon.is-processing .icon-processing {
    display: inline-block;
}

.pwa-status-icon.is-processing::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 999px;
    background: rgba(var(--bs-primary-rgb), .16);
    filter: blur(18px);
    opacity: .85;
    z-index: -1;
}

/* ---------- SUCCESS ---------- */
.pwa-status-icon.is-success .core {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), 1), rgba(var(--bs-primary-rgb), .78));
    animation: pwaSuccessBounce .55s cubic-bezier(.2, .85, .25, 1.25) both;
}

.pwa-status-icon.is-success .icon-success {
    display: block;
    color: #fff;
    font-size: 28px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
    transform: translateY(1px);
}

/* Shine sweep */
.pwa-status-icon.is-success .core::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, .28) 45%,
            rgba(255, 255, 255, .50) 55%,
            transparent 100%);
    transform: rotate(22deg) translateX(-55%);
    animation: pwaShine 1.05s ease-out .15s both;
    pointer-events: none;
}

/* Success rings pulse stronger */
.pwa-status-icon.is-success .ring,
.pwa-status-icon.is-success .ring2 {
    border-color: rgba(var(--bs-primary-rgb), .28);
    filter: drop-shadow(0 10px 22px rgba(var(--bs-primary-rgb), .18));
}

/* ---------- FAILED ---------- */
.pwa-status-icon.is-failed .core {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, rgba(220, 53, 69, 1), rgba(220, 53, 69, .72));
    /* bootstrap danger */
    animation: pwaFailPop .35s ease-out both;
}

.pwa-status-icon.is-failed .icon-failed {
    display: block;
    color: #fff;
    font-size: 26px;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}

.pwa-status-icon.is-failed .ring,
.pwa-status-icon.is-failed .ring2 {
    border-color: rgba(220, 53, 69, .30);
    filter: drop-shadow(0 10px 22px rgba(220, 53, 69, .18));
}

/* ---------- WARNING ---------- */
.pwa-status-icon.is-warning .core {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%),
        linear-gradient(135deg, rgba(255, 193, 7, 1), rgba(255, 193, 7, .72));
    /* bootstrap warning */
}

/* Animations */
@keyframes pwaSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pwaRingPulse {
    0% {
        transform: scale(1);
        opacity: .95;
    }

    60% {
        transform: scale(1.10);
        opacity: .30;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes pwaSuccessBounce {
    0% {
        transform: scale(.75);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pwaShine {
    0% {
        transform: rotate(22deg) translateX(-65%);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: rotate(22deg) translateX(65%);
        opacity: 0;
    }
}

@keyframes pwaFailPop {
    0% {
        transform: scale(.85);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .pwa-status-icon .ring,
    .pwa-status-icon .ring2,
    .pwa-status-icon.is-success .core,
    .pwa-status-icon.is-success .core::after,
    .pwa-status-icon .spinner {
        animation: none !important;
    }
}


.pwa-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    color: #5b4100;
    background: rgba(255, 184, 28, .92);
    box-shadow: 0 8px 18px rgba(255, 184, 28, .22);
    backdrop-filter: blur(6px);
}

.pwa-crop-stage {
    border-radius: 20px;
    overflow: hidden;
    background: #f8fafc;
    min-height: 320px;
}

.pwa-crop-stage img {
    display: block;
    max-width: 100%;
}

.pwa-photo-stage--editor {
    min-height: 280px;
    border-radius: 22px;
    overflow: hidden;
    background: var(--pwa-surface-2, #f8fafc);
}

.pwa-photo-stage--editor .pwa-product-hero-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.pwa-photo-stage--editor .pwa-photo-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
}

.pwa-photo-grid--thumbs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pwa-photo-card--thumb {
    position: relative;
    border-radius: 24px;
    transition: transform .16s ease, box-shadow .16s ease;
}

.pwa-photo-card--thumb .pwa-photo-thumb {
    position: relative;
    aspect-ratio: 4 / 4;
    border-radius: 22px;
    overflow: hidden;
    background: var(--pwa-surface-2, #f8fafc);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 0 rgba(255, 184, 28, 0);
    transition: outline-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.pwa-photo-card--thumb .pwa-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pwa-photo-card--thumb.is-previewing .pwa-photo-thumb,
.pwa-photo-card--thumb.is-hovered .pwa-photo-thumb,
.pwa-photo-card--thumb.is-focused .pwa-photo-thumb,
.pwa-photo-card--thumb.is-touched .pwa-photo-thumb,
.pwa-photo-card--thumb:active .pwa-photo-thumb {
    outline-color: #FFB81C;
    box-shadow: 0 0 0 3px rgba(255, 184, 28, .14);
}

.pwa-photo-thumb-hit {
    position: absolute;
    inset: 0;
    border: 0;
    background: transparent;
    z-index: 1;
}

.pwa-photo-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
}

.pwa-photo-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 3;
}

.pwa-photo-edit,
.pwa-photo-make-cover,
.pwa-photo-del {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .78);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}

html[data-bs-theme="light"] .pwa-photo-edit,
html[data-bs-theme="light"] .pwa-photo-make-cover,
html[data-bs-theme="light"] .pwa-photo-del {
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
}

.pwa-photo-edit:hover,
.pwa-photo-make-cover:hover,
.pwa-photo-del:hover {
    transform: translateY(-1px);
}

.pwa-photo-editor-shell {
    width: 100%;
}

.pwa-photo-editor-stage {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--pwa-editor-bg, var(--pwa-surface-2, #f8fafc));
    border: 1px solid var(--pwa-editor-border, rgba(15, 23, 42, .08));
    min-height: 260px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .06);
}

.pwa-photo-editor-preview {
    display: block;
    width: 100%;
    max-height: 340px;
    min-height: 260px;
    object-fit: contain;
    background: transparent;
}

.pwa-photo-toolbar {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 18px;
    background: var(--pwa-toolbar-bg, rgba(255, 255, 255, .72));
    border: 1px solid var(--pwa-toolbar-border, rgba(15, 23, 42, .08));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 24px rgba(2, 6, 23, .14);
    max-width: calc(100% - 20px);
    overflow-x: auto;
}

.pwa-photo-toolbar::-webkit-scrollbar {
    display: none;
}

.pwa-photo-tool {
    border: 0;
    background: transparent;
    color: var(--pwa-toolbar-text, #0f172a);
    min-width: 64px;
    padding: 8px 10px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background .2s ease, transform .2s ease, color .2s ease;
}

.pwa-photo-tool i {
    font-size: 17px;
    line-height: 1;
}

.pwa-photo-tool span {
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.1;
}

.pwa-photo-tool:hover,
.pwa-photo-tool:focus-visible {
    background: var(--pwa-toolbar-hover, rgba(255, 184, 28, .16));
    color: var(--pwa-toolbar-accent, #b77900);
    transform: translateY(-1px);
    outline: none;
}

.pwa-photo-tool.is-disabled,
.pwa-photo-tool[disabled] {
    opacity: .45;
    pointer-events: none;
}

html[data-bs-theme="dark"] .pwa-photo-editor-stage {
    --pwa-editor-bg: #0f172a;
    --pwa-editor-border: rgba(255, 255, 255, .08);
}

html[data-bs-theme="dark"] .pwa-photo-toolbar {
    --pwa-toolbar-bg: rgba(15, 23, 42, .76);
    --pwa-toolbar-border: rgba(255, 255, 255, .08);
    --pwa-toolbar-text: #e5e7eb;
    --pwa-toolbar-hover: rgba(255, 184, 28, .18);
    --pwa-toolbar-accent: #FFB81C;
}

html[data-bs-theme="light"] .pwa-photo-editor-stage {
    --pwa-editor-bg: #f8fafc;
    --pwa-editor-border: rgba(15, 23, 42, .08);
}

html[data-bs-theme="light"] .pwa-photo-toolbar {
    --pwa-toolbar-bg: rgba(255, 255, 255, .78);
    --pwa-toolbar-border: rgba(15, 23, 42, .08);
    --pwa-toolbar-text: #0f172a;
    --pwa-toolbar-hover: rgba(255, 184, 28, .16);
    --pwa-toolbar-accent: #b77900;
}

/* thumbnail carousel controls */
/* thumbnail carousel controls */
.pwa-thumb-carousel {
    position: relative;
}

.pwa-thumb-carousel .pwa-thumb-control {
    width: 52px;
    opacity: 0;
    transition: opacity .18s ease;
}

.pwa-thumb-carousel:hover .pwa-thumb-control,
.pwa-thumb-carousel:focus-within .pwa-thumb-control,
.pwa-thumb-carousel:active .pwa-thumb-control,
.pwa-thumb-carousel.touch-active .pwa-thumb-control {
    opacity: 1;
}

.pwa-thumb-carousel .carousel-control-prev {
    justify-content: flex-start;
    padding-left: 8px;
}

.pwa-thumb-carousel .carousel-control-next {
    justify-content: flex-end;
    padding-right: 8px;
}

.pwa-thumb-control-icon {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

.pwa-thumb-control-icon::before {
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2.5px solid currentColor;
    border-right: 2.5px solid currentColor;
    display: block;
}

.pwa-thumb-control-icon-prev::before {
    transform: rotate(-135deg);
    margin-left: 3px;
}

.pwa-thumb-control-icon-next::before {
    transform: rotate(45deg);
    margin-right: 3px;
}

/* light mode */
html[data-bs-theme="light"] .pwa-thumb-control-icon {
    background-color: rgba(255, 255, 255, .96);
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .14);
}

/* dark mode */
html[data-bs-theme="dark"] .pwa-thumb-control-icon {
    background-color: rgba(15, 23, 42, .84);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
}

@media (max-width: 480px) {
    .pwa-photo-editor-preview {
        min-height: 220px;
        max-height: 280px;
    }

    .pwa-photo-toolbar {
        gap: 8px;
        padding: 7px;
        border-radius: 16px;
        bottom: 10px;
    }

    .pwa-photo-tool {
        min-width: 58px;
        padding: 7px 8px;
    }

    .pwa-photo-tool i {
        font-size: 16px;
    }

    .pwa-photo-tool span {
        font-size: .68rem;
    }
}

/* =============================================================================
   PHONE FIELD VALIDATOR  —  paste into pwa-uikit.css
   ============================================================================= */

.pwa-field-validate {
    position: relative;
}

/* Icon sits inside the input on the right */
.pwa-field-validate .pwa-field-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.pwa-field-validate .pwa-field-icon.is-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Spinner */
.pwa-field-validate .pwa-field-icon.is-checking {
    opacity: 1;
    background: transparent;
    transform: translateY(-50%);
}

.pwa-field-validate .pwa-field-icon.is-checking::after {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid var(--bs-border-color);
    border-top-color: var(--bs-secondary);
    border-radius: 50%;
    animation: pwa-spin 0.6s linear infinite;
}

/* ✓ valid */
.pwa-field-validate .pwa-field-icon.is-valid {
    background-color: #d1fae5;
    color: #059669;
    border: 1.5px solid #6ee7b7;
}

.pwa-field-validate .pwa-field-icon.is-valid::after {
    content: '✓';
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 1;
}

/* ✕ invalid (wrong digits or phone taken/not found) */
.pwa-field-validate .pwa-field-icon.is-invalid {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1.5px solid #fca5a5;
}

.pwa-field-validate .pwa-field-icon.is-invalid::after {
    content: '✕';
    font-weight: 800;
    font-size: 0.75rem;
    line-height: 1;
}

/* ⚠ warning (network error, unknown country) */
.pwa-field-validate .pwa-field-icon.is-warning {
    background-color: #fef3c7;
    color: #d97706;
    border: 1.5px solid #fcd34d;
}

.pwa-field-validate .pwa-field-icon.is-warning::after {
    content: '!';
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
}

/* Right padding so text doesn't run under the icon */
.pwa-field-validate input {
    padding-right: 2.5rem !important;
}

/* Hint line below the field */
.pwa-field-hint {
    font-size: 0.78rem;
    min-height: 1.1rem;
    margin-top: 4px;
    transition: color 0.15s ease;
    display: block;
}

.pwa-field-hint.is-valid {
    color: #059669;
}

.pwa-field-hint.is-invalid {
    color: #dc2626;
}

.pwa-field-hint.is-warning {
    color: #d97706;
}

.pwa-field-hint.is-checking {
    color: var(--bs-secondary);
}

@keyframes pwa-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =============================================================================
   PWA TOUR SYSTEM  —  paste into pwa-uikit.css
   ============================================================================= */

/* ── Backdrop (full screen, darkens everything) ──────────────────── */
.pwa-tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: all;
    transition: opacity 0.2s ease;
}

/* ── Cutout (glowing border around highlighted element) ──────────── */
.pwa-tour-cutout {
    position: fixed;
    z-index: 1061;
    border-radius: 10px;
    box-shadow:
        0 0 0 3px var(--pwa-primary, var(--bs-primary)),
        0 0 0 6px rgba(var(--pwa-primary-rgb, var(--bs-primary-rgb)), 0.25);
    pointer-events: none;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pwa-tour-pulse 2s ease infinite;
}

@keyframes pwa-tour-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px var(--pwa-primary, var(--bs-primary)), 0 0 0 6px rgba(var(--pwa-primary-rgb, 221, 159, 0), 0.25);
    }

    50% {
        box-shadow: 0 0 0 3px var(--pwa-primary, var(--bs-primary)), 0 0 0 10px rgba(var(--pwa-primary-rgb, 221, 159, 0), 0.10);
    }
}

/* ── Popover card ────────────────────────────────────────────────── */
.pwa-tour-popover {
    position: fixed;
    z-index: 1062;
    width: min(320px, calc(100vw - 32px));
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .18);
    padding: 20px;
    pointer-events: all;
    animation: pwa-tour-pop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes pwa-tour-pop {
    from {
        opacity: 0;
        transform: scale(0.90) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ── Arrow ───────────────────────────────────────────────────────── */
.pwa-tour-popover::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
    transform: rotate(45deg);
}

.pwa-tour-popover[data-arrow="top"]::before {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-bottom: none;
    border-right: none;
}

.pwa-tour-popover[data-arrow="bottom"]::before {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-top: none;
    border-left: none;
}

.pwa-tour-popover[data-arrow="left"]::before {
    left: -7px;
    top: 24px;
    border-right: none;
    border-bottom: none;
}

.pwa-tour-popover[data-arrow="right"]::before {
    right: -7px;
    top: 24px;
    border-left: none;
    border-top: none;
}

.pwa-tour-popover[data-arrow="none"]::before {
    display: none;
}

/* ── Popover content ─────────────────────────────────────────────── */
.pwa-tour-step-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--pwa-primary, var(--bs-primary));
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pwa-tour-name {
    opacity: 0.75;
}

.pwa-tour-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color);
    margin-bottom: 7px;
    line-height: 1.3;
}

.pwa-tour-body {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    line-height: 1.55;
    margin-bottom: 16px;
}

/* ── Progress dots ───────────────────────────────────────────────── */
.pwa-tour-dots {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.pwa-tour-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pwa-tour-dot.is-active {
    background: var(--pwa-primary, var(--bs-primary));
    width: 20px;
    border-radius: 3px;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.pwa-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.pwa-tour-btn-skip {
    font-size: 0.78rem;
    color: var(--bs-secondary-color);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.pwa-tour-btn-skip:hover {
    color: var(--bs-body-color);
}

.pwa-tour-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .pwa-tour-popover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
}

/* =============================================================================
   DEVICE REGISTRATION  —  append to pwa-uikit.css
   All tokens use existing kit variables (--pwa-primary-rgb, --pwa-surface-*, etc.)
   ============================================================================= */

/* ── 1. Device type chips — replaced by .pwa-pill (existing kit class) ── */

/* ── 2. Confirmed device chip ─────────────────────────────────────────────── */
.pwa-confirmed-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(25, 135, 84, .07);
    border-radius: 16px;
    border: 1.5px solid rgba(25, 135, 84, .22);
    animation: pwaConfirmIn .22s ease-out both;
}

@keyframes pwaConfirmIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-confirmed-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 135, 84, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pwa-confirmed-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-confirmed-brand {
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.pwa-confirmed-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-confirmed-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 3. Condition toggle — replaced by .pwa-pill (existing kit class) ── */

/* ── 4. IMEI / identifier card validation states ──────────────────────────── */
.pwa-ident-card {
    transition: border .2s ease, background .2s ease;
    border: 1.5px solid transparent;
}

.pwa-ident-card.is-valid {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .28) !important;
}

.pwa-ident-card.is-error {
    background: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .28) !important;
}

.pwa-ident-card.is-checking {
    opacity: .75;
}

/* IMEI digit counter badge */
.pwa-imei-counter {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pwa-surface-2);
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s;
}

.pwa-imei-counter.is-done {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.pwa-imei-counter.is-short {
    background: rgba(255, 193, 7, .18);
    color: #856404;
}

.pwa-imei-counter.is-long {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

/* ── 5. Contextual tip banner ─────────────────────────────────────────────── */
.pwa-tip-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--pwa-primary-rgb), .07);
    border-left: 3px solid var(--pwa-primary);
    animation: pwaConfirmIn .2s ease-out both;
}

.pwa-tip-banner-ico {
    font-size: 14px;
    color: var(--pwa-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.pwa-tip-banner-text {
    font-size: 12px;
    color: var(--bs-body-color);
    line-height: 1.55;
}

/* ── 6. Save button summary badges ───────────────────────────────────────── */
.pwa-save-wrap {
    position: relative;
}

.pwa-save-summary {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 20px;
    transition: opacity .2s ease;
}

.pwa-save-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(var(--pwa-primary-rgb), .14);
    color: var(--pwa-primary);
    animation: pwaConfirmIn .18s ease-out both;
}

.pwa-save-badge.is-ready {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

/* ── 7. Drop zone drag-over state ─────────────────────────────────────────── */
.pwa-dropzone.is-dragover {
    border-color: var(--pwa-primary);
    background: rgba(var(--pwa-primary-rgb), .05);
    transform: scale(1.01);
}

.pwa-dropzone.has-file .pwa-drop-ico {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

/* ── 8. Identifiers menu item live state ──────────────────────────────────── */
.pwa-ident-menu-status {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pwa-ident-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease;
}

.pwa-ident-dot.is-done {
    background: #198754;
}

.pwa-ident-dot.is-error {
    background: #dc3545;
}

/* ── FIX: flex truncation inside .pwa-menu-title ──────────────────────────────
   Root cause: flex children have implicit min-width:auto — they refuse to shrink
   below their text content width, so overflow:hidden never fires.
   Three rules together solve it completely, no HTML changes needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. The title row itself must be able to shrink (it lives inside .pwa-menu-text
      which already has min-width:0, but the title div also needs it) */
.pwa-menu-title {
    min-width: 0;
}

/* 2. The left label span: flex:1 1 0 means "take all available space AND shrink
      below content width". min-width:0 removes the auto floor. */
.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* 3. The right value span (inline-view / summary text): never shrink it so it
      stays readable, but cap at 48% so a very long value can't squeeze the label
      to nothing. Also truncate the value itself if it gets too long. */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar stepper — custom CSS removed; uses existing pwa-menu-group ── */


/* =============================================================================
   DEVICE REGISTRATION  —  append to pwa-uikit.css
   All tokens use existing kit variables (--pwa-primary-rgb, --pwa-surface-*, etc.)
   ============================================================================= */

/* ── 1. Device type chips — replaced by .pwa-pill (existing kit class) ── */

/* ── 2. Confirmed device chip ─────────────────────────────────────────────── */
.pwa-confirmed-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(25, 135, 84, .07);
    border-radius: 16px;
    border: 1.5px solid rgba(25, 135, 84, .22);
    animation: pwaConfirmIn .22s ease-out both;
}

@keyframes pwaConfirmIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-confirmed-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 135, 84, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pwa-confirmed-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-confirmed-brand {
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.pwa-confirmed-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-confirmed-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 3. Condition toggle — replaced by .pwa-pill (existing kit class) ── */

/* ── 4. IMEI / identifier card validation states ──────────────────────────── */
.pwa-ident-card {
    transition: border .2s ease, background .2s ease;
    border: 1.5px solid transparent;
}

.pwa-ident-card.is-valid {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .28) !important;
}

.pwa-ident-card.is-error {
    background: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .28) !important;
}

.pwa-ident-card.is-checking {
    opacity: .75;
}

/* IMEI digit counter badge */
.pwa-imei-counter {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pwa-surface-2);
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s;
}

.pwa-imei-counter.is-done {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.pwa-imei-counter.is-short {
    background: rgba(255, 193, 7, .18);
    color: #856404;
}

.pwa-imei-counter.is-long {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

/* ── 5. Contextual tip banner ─────────────────────────────────────────────── */
.pwa-tip-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--pwa-primary-rgb), .07);
    border-left: 3px solid var(--pwa-primary);
    animation: pwaConfirmIn .2s ease-out both;
}

.pwa-tip-banner-ico {
    font-size: 14px;
    color: var(--pwa-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.pwa-tip-banner-text {
    font-size: 12px;
    color: var(--bs-body-color);
    line-height: 1.55;
}

/* ── 6. Save button summary badges ───────────────────────────────────────── */
.pwa-save-wrap {
    position: relative;
}

.pwa-save-summary {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 20px;
    transition: opacity .2s ease;
}

.pwa-save-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(var(--pwa-primary-rgb), .14);
    color: var(--pwa-primary);
    animation: pwaConfirmIn .18s ease-out both;
}

.pwa-save-badge.is-ready {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

/* ── 7. Drop zone drag-over state ─────────────────────────────────────────── */
.pwa-dropzone.is-dragover {
    border-color: var(--pwa-primary);
    background: rgba(var(--pwa-primary-rgb), .05);
    transform: scale(1.01);
}

.pwa-dropzone.has-file .pwa-drop-ico {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

/* ── 8. Identifiers menu item live state ──────────────────────────────────── */
.pwa-ident-menu-status {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pwa-ident-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease;
}

.pwa-ident-dot.is-done {
    background: #198754;
}

.pwa-ident-dot.is-error {
    background: #dc3545;
}

/* ── FIX: flex truncation inside .pwa-menu-title ──────────────────────────────
   Root cause: flex children have implicit min-width:auto — they refuse to shrink
   below their text content width, so overflow:hidden never fires.
   Three rules together solve it completely, no HTML changes needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. The title row itself must be able to shrink (it lives inside .pwa-menu-text
      which already has min-width:0, but the title div also needs it) */
.pwa-menu-title {
    min-width: 0;
}

/* 2. The left label span: flex:1 1 0 means "take all available space AND shrink
      below content width". min-width:0 removes the auto floor. */
.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* 3. The right value span (inline-view / summary text): never shrink it so it
      stays readable, but cap at 48% so a very long value can't squeeze the label
      to nothing. Also truncate the value itself if it gets too long. */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar stepper — custom CSS removed; uses existing pwa-menu-group ── */


/* ── Device flag dots (index tile + show banners) ─────────────────────────── */
/* =============================================================================
   DEVICE REGISTRATION  —  append to pwa-uikit.css
   All tokens use existing kit variables (--pwa-primary-rgb, --pwa-surface-*, etc.)
   ============================================================================= */

/* ── 1. Device type chips — replaced by .pwa-pill (existing kit class) ── */

/* ── 2. Confirmed device chip ─────────────────────────────────────────────── */
.pwa-confirmed-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(25, 135, 84, .07);
    border-radius: 16px;
    border: 1.5px solid rgba(25, 135, 84, .22);
    animation: pwaConfirmIn .22s ease-out both;
}

@keyframes pwaConfirmIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-confirmed-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 135, 84, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pwa-confirmed-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-confirmed-brand {
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.pwa-confirmed-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-confirmed-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 3. Condition toggle — replaced by .pwa-pill (existing kit class) ── */

/* ── 4. IMEI / identifier card validation states ──────────────────────────── */
.pwa-ident-card {
    transition: border .2s ease, background .2s ease;
    border: 1.5px solid transparent;
}

.pwa-ident-card.is-valid {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .28) !important;
}

.pwa-ident-card.is-error {
    background: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .28) !important;
}

.pwa-ident-card.is-checking {
    opacity: .75;
}

/* IMEI digit counter badge */
.pwa-imei-counter {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pwa-surface-2);
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s;
}

.pwa-imei-counter.is-done {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.pwa-imei-counter.is-short {
    background: rgba(255, 193, 7, .18);
    color: #856404;
}

.pwa-imei-counter.is-long {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

/* ── 5. Contextual tip banner ─────────────────────────────────────────────── */
.pwa-tip-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--pwa-primary-rgb), .07);
    border-left: 3px solid var(--pwa-primary);
    animation: pwaConfirmIn .2s ease-out both;
}

.pwa-tip-banner-ico {
    font-size: 14px;
    color: var(--pwa-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.pwa-tip-banner-text {
    font-size: 12px;
    color: var(--bs-body-color);
    line-height: 1.55;
}

/* ── 6. Save button summary badges ───────────────────────────────────────── */
.pwa-save-wrap {
    position: relative;
}

.pwa-save-summary {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 20px;
    transition: opacity .2s ease;
}

.pwa-save-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(var(--pwa-primary-rgb), .14);
    color: var(--pwa-primary);
    animation: pwaConfirmIn .18s ease-out both;
}

.pwa-save-badge.is-ready {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

/* ── 7. Drop zone drag-over state ─────────────────────────────────────────── */
.pwa-dropzone.is-dragover {
    border-color: var(--pwa-primary);
    background: rgba(var(--pwa-primary-rgb), .05);
    transform: scale(1.01);
}

.pwa-dropzone.has-file .pwa-drop-ico {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

/* ── 8. Identifiers menu item live state ──────────────────────────────────── */
.pwa-ident-menu-status {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pwa-ident-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease;
}

.pwa-ident-dot.is-done {
    background: #198754;
}

.pwa-ident-dot.is-error {
    background: #dc3545;
}

/* ── FIX: flex truncation inside .pwa-menu-title ──────────────────────────────
   Root cause: flex children have implicit min-width:auto — they refuse to shrink
   below their text content width, so overflow:hidden never fires.
   Three rules together solve it completely, no HTML changes needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. The title row itself must be able to shrink (it lives inside .pwa-menu-text
      which already has min-width:0, but the title div also needs it) */
.pwa-menu-title {
    min-width: 0;
}

/* 2. The left label span: flex:1 1 0 means "take all available space AND shrink
      below content width". min-width:0 removes the auto floor. */
.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* 3. The right value span (inline-view / summary text): never shrink it so it
      stays readable, but cap at 48% so a very long value can't squeeze the label
      to nothing. Also truncate the value itself if it gets too long. */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar stepper — custom CSS removed; uses existing pwa-menu-group ── */


/* ── Device flag dots (index tile + show banners) ─────────────────────────── */
/* =============================================================================
   DEVICE REGISTRATION  —  append to pwa-uikit.css
   All tokens use existing kit variables (--pwa-primary-rgb, --pwa-surface-*, etc.)
   ============================================================================= */

/* ── 1. Device type chips — replaced by .pwa-pill (existing kit class) ── */

/* ── 2. Confirmed device chip ─────────────────────────────────────────────── */
.pwa-confirmed-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(25, 135, 84, .07);
    border-radius: 16px;
    border: 1.5px solid rgba(25, 135, 84, .22);
    animation: pwaConfirmIn .22s ease-out both;
}

@keyframes pwaConfirmIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pwa-confirmed-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(25, 135, 84, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pwa-confirmed-meta {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-confirmed-brand {
    font-size: 11px;
    color: var(--bs-secondary-color);
    font-weight: 600;
}

.pwa-confirmed-name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-confirmed-check {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #198754;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── 3. Condition toggle — replaced by .pwa-pill (existing kit class) ── */

/* ── 4. IMEI / identifier card validation states ──────────────────────────── */
.pwa-ident-card {
    transition: border .2s ease, background .2s ease;
    border: 1.5px solid transparent;
}

.pwa-ident-card.is-valid {
    background: rgba(25, 135, 84, .06) !important;
    border-color: rgba(25, 135, 84, .28) !important;
}

.pwa-ident-card.is-error {
    background: rgba(220, 53, 69, .06) !important;
    border-color: rgba(220, 53, 69, .28) !important;
}

.pwa-ident-card.is-checking {
    opacity: .75;
}

/* IMEI digit counter badge */
.pwa-imei-counter {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--pwa-surface-2);
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s;
}

.pwa-imei-counter.is-done {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

.pwa-imei-counter.is-short {
    background: rgba(255, 193, 7, .18);
    color: #856404;
}

.pwa-imei-counter.is-long {
    background: rgba(220, 53, 69, .14);
    color: #dc3545;
}

/* ── 5. Contextual tip banner ─────────────────────────────────────────────── */
.pwa-tip-banner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--pwa-primary-rgb), .07);
    border-left: 3px solid var(--pwa-primary);
    animation: pwaConfirmIn .2s ease-out both;
}

.pwa-tip-banner-ico {
    font-size: 14px;
    color: var(--pwa-primary);
    margin-top: 1px;
    flex-shrink: 0;
}

.pwa-tip-banner-text {
    font-size: 12px;
    color: var(--bs-body-color);
    line-height: 1.55;
}

/* ── 6. Save button summary badges ───────────────────────────────────────── */
.pwa-save-wrap {
    position: relative;
}

.pwa-save-summary {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
    min-height: 20px;
    transition: opacity .2s ease;
}

.pwa-save-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(var(--pwa-primary-rgb), .14);
    color: var(--pwa-primary);
    animation: pwaConfirmIn .18s ease-out both;
}

.pwa-save-badge.is-ready {
    background: rgba(25, 135, 84, .12);
    color: #198754;
}

/* ── 7. Drop zone drag-over state ─────────────────────────────────────────── */
.pwa-dropzone.is-dragover {
    border-color: var(--pwa-primary);
    background: rgba(var(--pwa-primary-rgb), .05);
    transform: scale(1.01);
}

.pwa-dropzone.has-file .pwa-drop-ico {
    background: rgba(25, 135, 84, .14);
    color: #198754;
}

/* ── 8. Identifiers menu item live state ──────────────────────────────────── */
.pwa-ident-menu-status {
    display: flex;
    gap: 4px;
    align-items: center;
}

.pwa-ident-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bs-border-color);
    transition: background .2s ease;
}

.pwa-ident-dot.is-done {
    background: #198754;
}

.pwa-ident-dot.is-error {
    background: #dc3545;
}

/* ── FIX: flex truncation inside .pwa-menu-title ──────────────────────────────
   Root cause: flex children have implicit min-width:auto — they refuse to shrink
   below their text content width, so overflow:hidden never fires.
   Three rules together solve it completely, no HTML changes needed.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. The title row itself must be able to shrink (it lives inside .pwa-menu-text
      which already has min-width:0, but the title div also needs it) */
.pwa-menu-title {
    min-width: 0;
}

/* 2. The left label span: flex:1 1 0 means "take all available space AND shrink
      below content width". min-width:0 removes the auto floor. */
.pwa-menu-title>.pwa-ellipsis {
    flex: 1 1 0;
    min-width: 0;
}

/* 3. The right value span (inline-view / summary text): never shrink it so it
      stays readable, but cap at 48% so a very long value can't squeeze the label
      to nothing. Also truncate the value itself if it gets too long. */
.pwa-menu-title>.pwa-inline-view,
.pwa-menu-title>span:last-child:not(.pwa-ellipsis) {
    flex: 0 0 auto;
    max-width: 48%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Progress bar stepper — custom CSS removed; uses existing pwa-menu-group ── */


/* ── Device flag dots (index tile + show banners) ─────────────────────────── */

.pwa-flag {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    flex-shrink: 0;
}

.pwa-flag i {
    font-size: 9px;
}

/* colour variants */
.pwa-flag--blue {
    background: rgba(13, 110, 253, .15);
    border: 1.5px solid rgba(13, 110, 253, .50);
}

.pwa-flag--blue i {
    color: #0a58ca;
}

.pwa-flag--yellow {
    background: rgba(255, 193, 7, .18);
    border: 1.5px solid rgba(255, 193, 7, .65);
}

.pwa-flag--yellow i {
    color: #856404;
}

.pwa-flag--grey {
    background: rgba(108, 117, 125, .12);
    border: 1.5px solid rgba(108, 117, 125, .40);
}

.pwa-flag--grey i {
    color: #6c757d;
}

.pwa-flag--red {
    background: rgba(220, 53, 69, .10);
    border: 1.5px solid rgba(220, 53, 69, .40);
}

.pwa-flag--red i {
    color: #dc3545;
}

/* Popovers handled by Bootstrap — no custom ::after tooltip needed */


/* ── Flag popover skin ───────────────────────────────────────────────────────
   Bootstrap's default popover works fine; this just makes it feel native
   to the PWA theme. The .pwa-flag-popover customClass is set in the JS init.  */
.pwa-flag-popover .popover-body {
    font-size: 12px;
    font-weight: 500;
    padding: 6px 10px;
    color: var(--bs-body-color);
}

.pwa-flag-popover.bs-popover-top>.popover-arrow::after {
    border-top-color: var(--pwa-sep, #dee2e6);
}

.pwa-flag-popover.bs-popover-bottom>.popover-arrow::after {
    border-bottom-color: var(--pwa-sep, #dee2e6);
}

.pwa-flag-popover {
    border-color: var(--pwa-sep, #dee2e6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}