/* ==========================================================
   Automotive Super App
   Core Style Sheet
   File: app.css
   ========================================================== */

@import url('app.css');

:root {
    --app-primary: #00CEC8;
    --app-primary-rgb: 15, 118, 110;
    --app-primary-dark: #008985;
    --app-primary-soft: rgba(15, 118, 110, .10);
    --app-secondary: #f59e0b;
    --app-success: #16a34a;
    --app-warning: #d97706;
    --app-danger: #dc2626;
    --app-info: #0284c7;
    --app-bg: #f3f6f7;
    --app-surface: #ffffff;
    --app-surface-2: #f8fafb;
    --app-surface-3: #edf2f4;
    --app-text: #172126;
    --app-text-soft: #435159;
    --app-muted: #78868e;
    --app-border: #dfe7ea;
    --app-border-strong: #c8d4d9;
    --app-radius: 10px;
    --app-card-radius: 4px;
    --app-input-radius: 4px;
    --app-button-radius: 4px;
    --app-popup-radius: 4px;
    --app-shadow-sm: 0 4px 18px rgba(15, 23, 42, .06);
    --app-shadow-md: 0 14px 40px rgba(15, 23, 42, .12);
    --app-shadow-lg: 0 26px 72px rgba(15, 23, 42, .18);
    --app-font: __yekanBakh_8b585f, __yekanBakh_Fallback_8b585f;
    --app-font-size: 14px;
    --app-header-height: 68px;
    --app-bottom-height: 74px;
    --app-max-width: 480px;
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-transition: .22s cubic-bezier(.2, .75, .25, 1);
}

[data-theme="dark"] {
    --app-bg: #0d1519;
    --app-surface: #151f24;
    --app-surface-2: #1b272d;
    --app-surface-3: #223139;
    --app-text: #f1f5f9;
    --app-text-soft: #c5d0d6;
    --app-muted: #8fa1ab;
    --app-border: #2b3a42;
    --app-border-strong: #3b4c55;
    --app-shadow-sm: 0 4px 18px rgba(0, 0, 0, .18);
    --app-shadow-md: 0 14px 40px rgba(0, 0, 0, .28);
    --app-shadow-lg: 0 26px 72px rgba(0, 0, 0, .38);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}


.app-shell {
    height: 100vh;
    overflow: hidden;
}


.page-content {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
html {
    direction: rtl;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(ef8fd7b980eff911-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 100
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(0cd12378511b77c6-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 200
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(a52ed9519e94f900-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 300
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(54f096a7afa8448a-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 600
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(9c90097f74db5e7f-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 700
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(62047917c15a1c99-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 800
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(69082471753f26aa-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 300;
}

@font-face {
    font-family: __yekanBakh_8b585f;
    src: url(3797b5fb59755cf2-s.p.woff2) format("woff2");
    font-display: swap;
    font-weight: 950
}

@font-face {
    font-family: __yekanBakh_Fallback_8b585f;
    src: local("Arial");
    ascent-override: 99.72%;
    descent-override: 54.84%;
    line-gap-override: 0.00%;
    size-adjust: 100.28%
}

* {
    font-family: __yekanBakh_8b585f, __yekanBakh_Fallback_8b585f;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--app-text);
    background: radial-gradient( circle at 10% 0, rgba(var(--app-primary-rgb), .08), transparent 30% ), var(--app-bg);
    font-family: var(--app-font);
    font-size: var(--app-font-size);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

    body.app-lock {
        overflow: hidden !important;
        touch-action: none;
    }

button,
input,
textarea,
select {
    font: inherit;
}

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

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

[hidden],
.app-hidden {
    display: none !important;
}

/* ==========================================================
   Layout
   ========================================================== */

.app-shell {
    position: relative;
    width: 100%;
    max-width: var(--app-max-width);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--app-bg);
    overflow-x: clip;
}

.app-page {
    height: 100vh;
    padding: calc(var(--app-header-height) + var(--app-safe-top) + 16px) 14px calc(var(--app-bottom-height) + var(--app-safe-bottom) + 22px);
    overflow-y: auto;
    font-weight: 200;
    background: radial-gradient( circle at 100% 0, rgba(var(--app-primary-rgb), 0.11), transparent 75% ), var(--app-bg);
}
    .app-page::-webkit-scrollbar {
        -webkit-appearance: none;
    }
    .app-page::-webkit-scrollbar {
        width: 15px;
    }
    .app-page::-webkit-scrollbar-thumb {
        background-color: var(--app-primary-dark);
        width:8px;
    }
    .app-page.no-header {
        padding-top: calc(var(--app-safe-top) + 12px);
    }

    .app-page.no-bottom {
        padding-bottom: calc(var(--app-safe-bottom) + 20px);
    }

.app-container {
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
}

.app-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.app-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .app-row.between {
        justify-content: space-between;
    }

    .app-row.start {
        align-items: flex-start;
    }

.app-grid {
    display: grid;
    gap: 12px;
}

    .app-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .app-grid.cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

.app-scroll-x {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    padding-bottom: 3px;
}

    .app-scroll-x::-webkit-scrollbar {
        display: none;
    }

    .app-scroll-x > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

/* ==========================================================
   Header
   ========================================================== */
.vehicle-form-page {
    --vf-accent: var(--app-primary);
    --vf-dark: #111a2a;
    position: relative;
    min-height: 100%;
    padding: 15px 15px 105px;
    overflow-x: hidden
}

.vf-header {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 11px;
    margin-bottom: 15px
}

.vf-back {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: 0 7px 18px rgba(15,25,40,.06)
}

    .vf-back svg, .vf-action svg, .vf-picker svg, .vf-field-button svg, .vf-date-list svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.vf-header-copy span {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--app-muted)
}

.vf-header-copy h1 {
    margin: 1px 0 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--app-text)
}

.vf-step-count {
    padding: 7px 10px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
    font-size: 12px;
    font-weight: 700;
    color: var(--app-primary-dark);
}

.vf-progress {
    display: flex;
    align-items: flex-start;
    margin: 0 6px 17px
}

    .vf-progress span {
        position: relative;
        width: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        color: var(--app-muted)
    }

        .vf-progress span i {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--app-border);
            border-radius: 50%;
            background: var(--app-surface);
            font-style: normal;
            font-size: 15px;
            font-weight: 800;
            transition: .3s;
        }

        .vf-progress span b {
            font-size: 8px;
            font-weight: 600
        }

        .vf-progress span.active, .vf-progress span.done {
            color: var(--vf-accent)
        }

            .vf-progress span.active i, .vf-progress span.done i {
                border-color: var(--app-primary-soft);
                background: var(--app-primary-dark);
                color: #fff;
                box-shadow: 0 5px 13px rgba(var(--app-primary-rgb),.22);
            }

    .vf-progress em {
        height: 2px;
        flex: 1;
        margin-top: 12px;
        background: var(--app-border);
        transition: .3s
    }

        .vf-progress em.done {
            background: var(--vf-accent)
        }

.vf-preview {
    position: relative;
    min-height: 270px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--app-card-radius);
    color: #fff;
    box-shadow: 0 24px 45px rgba(13,22,36,.19);
    background: linear-gradient(165deg,rgba(0, 137, 133, 1) 50%, rgba(0, 206, 200, 1) 96%);
    color: var(--app-surface);
}

.vf-preview-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 83% 7%,rgba(255,255,255,.17),transparent 29%),linear-gradient(115deg,rgba(255,255,255,.07),transparent 35%)
}

.vf-preview-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 17px 0
}

    .vf-preview-top span, .vf-preview-top small {
        display: block;
        font-size: 9px;
        color: rgba(255,255,255,.56)
    }

    .vf-preview-top strong {
        display: block;
        margin: 2px 0;
        font-size: 18px;
        font-weight: 800
    }

.vf-brand-logo {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(10px)
}

    .vf-brand-logo img {
        max-width: 27px;
        max-height: 27px;
        object-fit: contain
    }

    .vf-brand-logo svg {
        width: 36px;
        height: 36px;
        fill: none;
        stroke: #fff;
        stroke-width: 1.5;
    }

.vf-car-stage {
    position: relative;
    height: 163px;
    margin-top: -2px;
    display: flex;
    align-items: center;
    justify-content: center
}

    .vf-car-stage svg {
        width: 94%;
        height: 100%;
        filter: drop-shadow(0 13px 10px rgba(0,0,0,.24))
    }

.vf-car-body {
    transition: fill .35s
}

.vf-preview-chips {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 6px;
    padding: 0 14px 14px;
    overflow-x: auto;
    scrollbar-width: none
}

    .vf-preview-chips::-webkit-scrollbar {
        display: none
    }

    .vf-preview-chips span {
        white-space: nowrap;
        padding: 6px 9px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: var(--app-card-radius);
        background: rgb(255 255 255 / 23%);
        font-size: 10px;
        color: #ffffff;
    }

.vehicle-step {
    display: none;
    animation: vfStepIn .34s ease both
}

    .vehicle-step.active {
        display: block
    }

@keyframes vfStepIn {
    from {
        opacity: 0;
        transform: translateX(-14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.vf-section-title {
    margin-bottom: 13px
}

    .vf-section-title > span {
        font-size: 14px;
        font-weight: 300;
        color: var(--app-primary-dark);
    }

    .vf-section-title h2 {
        margin: 2px 0 3px;
        font-size: 18px;
        font-weight: 800;
        color: var(--app-text)
    }

    .vf-section-title p {
        margin: 0;
        font-size: 10px;
        line-height: 1.8;
        color: var(--app-muted)
    }

.vf-picker {
    width: 100%;
    min-height: 67px;
    display: grid;
    grid-template-columns: 42px 1fr 20px;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    background: var(--app-surface);
    text-align: right;
    color: var(--app-text);
    box-shadow: 0 6px 18px rgba(20,32,52,.045);
    direction: ltr;
}

.vf-picker-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--app-primary-soft);
    color: var(--vf-accent)
}

    .vf-picker-icon svg {
        width: 21px;
        height: 21px
    }

.vf-picker-copy small {
    display: block;
    margin-bottom: 2px;
    font-size: 9px;
    color: var(--app-muted)
}

.vf-picker-copy strong {
    display: block;
    font-size: 12px;
    font-weight: 700
}

.vf-chevron {
    color: var(--app-muted)
}

.vf-two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.vf-field {
    display: block;
    margin-bottom: 10px
}

    .vf-field > span {
        display: block;
        margin: 0 2px 6px;
        font-size: 10px;
        font-weight: 600;
        color: var(--app-text)
    }

        .vf-field > span b {
            color: #d9364f
        }

    .vf-field input, .vf-field-button {
        width: 100%;
        height: 50px;
        padding: 0 13px;
        border: 1px solid var(--app-border);
        border-radius: var(--app-card-radius);
        background: var(--app-surface);
        font-family: inherit;
        font-size: 12px;
        color: var(--app-text);
        outline: none
    }

        .vf-field input:focus {
            border-color: var(--vf-accent);
            box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb),.09)
        }

.vf-field-button {
    display: grid;
    grid-template-columns: 1fr 18px;
    align-items: center;
    text-align: right
}

    .vf-field-button > span {
        position: absolute;
        margin-top: -69px;
        font-size: 10px;
        font-weight: 600
    }

    .vf-field-button strong {
        font-size: 11px
    }

    .vf-field-button svg {
        width: 17px;
        color: var(--app-muted)
    }

.vf-field-wide > div {
    position: relative
}

    .vf-field-wide > div input {
        padding-left: 48px
    }

    .vf-field-wide > div i {
        position: absolute;
        left: 8px;
        top: 8px;
        height: 34px;
        min-width: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--app-primary-soft);
        font-style: normal;
        font-size: 8px;
        font-weight: 800;
        color: var(--vf-accent)
    }

.vf-plate-card {
    margin: 4px 0 12px;
    padding: 13px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-surface)
}

.vf-plate-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

    .vf-plate-label span {
        font-size: 10px;
        font-weight: 700;
        color: var(--app-text)
    }

    .vf-plate-label small {
        font-size: 8px;
        color: var(--app-muted)
    }

.iran-plate-input {
    height: 61px;
    display: grid;
    grid-template-columns: 35px 44px 38px 62px 42px 42px;
    direction: ltr;
    align-items: stretch;
    overflow: hidden;
    border: 2px solid #20242c;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,.08)
}

    .iran-plate-input input {
        width: 100%;
        min-width: 0;
        padding: 0 3px;
        border: 0;
        border-left: 1px solid #d7dae0;
        background: transparent;
        text-align: center;
        font-family: inherit;
        font-size: 16px;
        font-weight: 800;
        color: #171a20;
        outline: none
    }

.vf-plate-iran {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #174b9c;
    color: #fff;
    text-align: center;
    font-size: 6px;
    font-weight: 700;
    line-height: 1.3
}

.vf-plate-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #d7dae0;
    font-size: 9px;
    font-weight: 700;
    color: #171a20
}

.vf-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-bottom: 11px
}

.vf-dashboard-card {
    position: relative;
    min-height: 142px;
    padding: 12px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    background: var(--app-surface);
    box-shadow: 0 7px 20px rgba(20,32,52,.045)
}

.vf-dashboard-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    border-radius: 10px;
    background: var(--app-primary-soft);
    color: var(--vf-accent)
}

    .vf-dashboard-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.vf-dashboard-card small {
    display: block;
    font-size: 9px;
    color: var(--app-muted)
}

.vf-dashboard-card input {
    width: 100%;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    color: var(--app-text);
    outline: none
}

.vf-dashboard-card b {
    display: block;
    font-size: 8px;
    font-weight: 500;
    color: var(--app-muted)
}

.vf-date-list {
    overflow: hidden;
    margin-bottom: 11px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-surface)
}

    .vf-date-list label {
        min-height: 72px;
        display: grid;
        grid-template-columns: 1fr 88px 18px;
        align-items: center;
        gap: 8px;
        padding: 9px 11px
    }

        .vf-date-list label + label {
            border-top: 1px solid var(--app-border)
        }

        .vf-date-list label > span {
            display: grid;
            grid-template-columns: 37px 1fr;
            grid-template-rows: auto auto;
            column-gap: 9px
        }

        .vf-date-list label i {
            grid-row: 1/3;
            width: 37px;
            height: 37px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: var(--app-primary-soft);
            color: var(--vf-accent)
        }

            .vf-date-list label i svg {
                width: 18px;
                height: 18px
            }

        .vf-date-list label b {
            font-size: 10px;
            color: var(--app-text)
        }

        .vf-date-list label small {
            font-size: 8px;
            color: var(--app-muted)
        }

    .vf-date-list input {
        width: 88px;
        border: 0;
        background: transparent;
        text-align: left;
        font-family: inherit;
        font-size: 9px;
        color: var(--vf-accent);
        outline: none
    }

    .vf-date-list > .vf-chevron {
        width: 16px;
        color: var(--app-muted)
    }

.vehicle-active-option {
    position: relative;
    min-height: 75px;
    display: grid;
    grid-template-columns: 40px 1fr 44px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--app-border);
    border-radius: 15px;
    background: var(--app-surface)
}

.vf-active-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff4d7;
    color: #d89a16
}

    .vf-active-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7
    }

.vehicle-active-option > span:nth-child(2) strong, .vehicle-active-option > span:nth-child(2) small {
    display: block
}

.vehicle-active-option strong {
    font-size: 10px;
    color: var(--app-text)
}

.vehicle-active-option small {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.6;
    color: var(--app-muted)
}

.vehicle-active-option input {
    position: absolute;
    opacity: 0
}

.vehicle-active-option > i {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 15px;
    background: #cfd4dc;
    transition: .25s
}

    .vehicle-active-option > i:after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        top: 3px;
        right: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,.16);
        transition: .25s
    }

.vehicle-active-option input:checked + i {
    background: var(--vf-accent)
}

    .vehicle-active-option input:checked + i:after {
        transform: translateX(-18px)
    }

.vehicle-form-actions {
    position: fixed;
    z-index: 30;
    right: max(12px,calc((100vw - var(--app-max-width))/2 + 12px));
    left: max(12px,calc((100vw - var(--app-max-width))/2 + 12px));
    bottom: 72px;
    display: flex;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 17px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(20,31,50,.16)
}

.vf-action {
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--app-card-radius);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    direction: rtl;
}

    .vf-action.primary, .vf-action.save {
        flex: 1;
        background: var(--vf-accent);
        color: #fff;
        box-shadow: 0 8px 18px rgba(var(--app-primary-rgb),.22)
    }

    .vf-action.secondary {
        background: var(--app-surface-2,#f0f2f5);
        color: var(--app-text)
    }

    .vf-action.save {
        background: #16885f
    }

.app-hidden {
    display: none !important
}

@media(min-width:700px) {
    .vehicle-form-page {
        padding: 22px 24px 100px
    }

    .vehicle-form-actions {
        bottom: 22px
    }

    .vf-preview {
        min-height: 290px
    }

    .vf-car-stage {
        height: 180px
    }
}

.app-header {
    position: fixed;
    top: 0;
    right: 50%;
    z-index: 80;
    width: min(100%, var(--app-max-width));
    height: calc(var(--app-header-height) + var(--app-safe-top));
    padding: var(--app-safe-top) 14px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(50%);
    background: color-mix( in srgb, var(--app-surface) 90%, transparent );
    border-bottom: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-header-title {
    min-width: 0;
    flex: 1;
}

    .app-header-title strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-header-title span {
        display: block;
        color: var(--app-muted);
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.app-logo {
    width: 44px;
    height: 44px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    object-fit: contain;
    background: var(--app-surface);
    padding: 4px;
}

/* ==========================================================
   Bottom navigation
   ========================================================== */

.app-bottom-nav {
    position: fixed;
    right: 50%;
    bottom: 0;
    z-index: 80;
    width: min(100%, var(--app-max-width));
    min-height: calc(var(--app-bottom-height) + var(--app-safe-bottom));
    padding: 8px 10px var(--app-safe-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    transform: translateX(50%);
    background: color-mix( in srgb, var(--app-surface) 94%, transparent );
    border-top: 1px solid var(--app-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-nav-item {
    min-width: 0;
    border: 0;
    border-radius: var(--app-button-radius);
    padding: 6px 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--app-muted);
    background: transparent;
    cursor: pointer;
    transition: color var(--app-transition), background var(--app-transition), transform var(--app-transition);
}

    .app-nav-item svg {
        width: 32px;
        height: 32px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .app-nav-item .nocolor {
        stroke: none;
        fill: currentColor;
    }

    .app-nav-item span {
        width: 100%;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-nav-item.active {
        color: var(--app-primary-dark);
        background: var(--app-primary-soft);
    }

    .app-nav-item:active {
        transform: scale(.96);
    }

/* ==========================================================
   Common icon button
   ========================================================== */

.app-icon-btn {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--app-border);
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    color: var(--app-text);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-sm);
    cursor: pointer;
    transition: transform var(--app-transition), border-color var(--app-transition), background var(--app-transition);
}

    .app-icon-btn:active {
        transform: scale(.94);
    }

    .app-icon-btn svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ==========================================================
   Cards and sections
   ========================================================== */

.app-card {
    padding: 10px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    box-shadow: var(--app-shadow-sm);
    height: 60px;
    margin-bottom: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--app-primary-dark);
}

    .app-card.flush {
        padding: 0;
        overflow: hidden;
    }

.app-card-title {
    margin-bottom: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .app-card-title h2,
    .app-card-title h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
    }

    .app-card-title p {
        margin: 3px 0 0;
        color: var(--app-muted);
        font-size: 11px;
    }

.app-section-title {
    margin: 22px 2px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .app-section-title h2 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
    }

    .app-section-title a, .app-section-title button {
        border: 0;
        padding: 0;
        color: var(--app-primary-dark);
        background: transparent;
        font-size: 12px;
        cursor: pointer;
    }

/* ==========================================================
   Service tiles
   ========================================================== */

.app-service-tile {
    min-height: 112px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient( 145deg, var(--app-surface), var(--app-surface-2) );
    cursor: pointer;
    transition: transform var(--app-transition), border-color var(--app-transition), box-shadow var(--app-transition);
}

    .app-service-tile:hover {
        border-color: color-mix( in srgb, var(--app-primary) 35%, var(--app-border) );
        box-shadow: var(--app-shadow-sm);
    }

    .app-service-tile:active {
        transform: scale(.97);
    }

.app-service-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--app-button-radius);
    display: grid;
    place-items: center;
    color: var(--app-primary-dark);
    background: var(--app-primary-soft);
}

    .app-service-icon svg {
        width: 36px;
        height: 36px;
        stroke: currentColor;
        fill: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.app-service-tile strong {
    font-size: 13px;
    font-weight: 600;
}

.app-service-tile small {
    color: var(--app-muted);
    font-size: 10px;
}

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

.app-form-group {
    margin-bottom: 14px;
}

.app-label {
    margin: 0 2px 7px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--app-text-soft);
    font-size: 12px;
}

    .app-label .required {
        color: var(--app-danger);
    }

.app-input-wrap {
    position: relative;
}

.app-input,
.app-textarea,
.app-select-like {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-input-radius);
    padding: 0 13px;
    color: var(--app-text);
    background: var(--app-surface);
    outline: 0;
    transition: border-color var(--app-transition), box-shadow var(--app-transition), background var(--app-transition);
}

.app-textarea {
    min-height: 110px;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
}

    .app-input::placeholder,
    .app-textarea::placeholder {
        color: color-mix( in srgb, var(--app-muted) 76%, transparent );
    }

    .app-input:hover,
    .app-textarea:hover,
    .app-select-like:hover {
        border-color: var(--app-border-strong);
    }

    .app-input:focus,
    .app-textarea:focus,
    .app-select-like:focus-within {
        border-color: var(--app-primary);
        box-shadow: 0 0 0 4px var(--app-primary-soft);
    }

.app-input[readonly] {
    cursor: pointer;
}

.app-input:disabled,
.app-textarea:disabled,
.app-select-like.disabled {
    opacity: .58;
    cursor: not-allowed;
    background: var(--app-surface-2);
}

.app-input.has-icon {
    padding-right: 45px;
}

.app-input-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 21px;
    height: 21px;
    color: var(--app-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.app-input-action {
    position: absolute;
    top: 50%;
    left: 8px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: var(--app-muted);
    background: var(--app-surface-2);
    transform: translateY(-50%);
    cursor: pointer;
}

.app-field-help {
    display: block;
    margin: 5px 3px 0;
    color: var(--app-muted);
    font-size: 10px;
}

.app-field-error {
    display: none;
    margin: 5px 3px 0;
    color: var(--app-danger);
    font-size: 10px;
}

.app-form-group.invalid .app-input,
.app-form-group.invalid .app-textarea,
.app-form-group.invalid .app-select-like {
    border-color: var(--app-danger);
    box-shadow: 0 0 0 4px rgba(220, 38, 38, .08);
}

.app-form-group.invalid .app-field-error {
    display: block;
}

/* ==========================================================
   Buttons
   ========================================================== */

.app-btn {
    min-height: 46px;
    border: 1px solid transparent;
    border-radius: var(--app-button-radius);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: var(--app-primary);
    font-weight: 600;
    cursor: pointer;
    transition: transform var(--app-transition), filter var(--app-transition), box-shadow var(--app-transition);
}

    .app-btn:hover {
        filter: brightness(.98);
        box-shadow: var(--app-shadow-sm);
    }

    .app-btn:active {
        transform: translateY(1px) scale(.99);
    }

    .app-btn:disabled {
        opacity: .56;
        cursor: not-allowed;
        box-shadow: none;
    }

    .app-btn.block {
        width: 100%;
    }

    .app-btn.sm {
        min-height: 36px;
        padding-inline: 12px;
        font-size: 12px;
    }

    .app-btn.lg {
        min-height: 52px;
        font-size: 15px;
    }

    .app-btn.secondary {
        background: var(--app-secondary);
    }

    .app-btn.success {
        background: var(--app-success);
    }

    .app-btn.danger {
        background: var(--app-danger);
    }

    .app-btn.info {
        background: var(--app-info);
    }

    .app-btn.outline {
        color: var(--app-primary);
        background: transparent;
        border-color: color-mix( in srgb, var(--app-primary) 55%, var(--app-border) );
    }

    .app-btn.ghost {
        color: var(--app-text);
        background: var(--app-surface-2);
        border-color: var(--app-border);
    }

.app-btn-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: app-spin .7s linear infinite;
}

/* ==========================================================
   Badges and chips
   ========================================================== */

.app-chip {
    min-height: 34px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--app-text-soft);
    background: var(--app-surface);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--app-transition), background var(--app-transition), border-color var(--app-transition);
}

    .app-chip.active {
        color: var(--app-primary);
        background: var(--app-primary-soft);
        border-color: color-mix( in srgb, var(--app-primary) 35%, var(--app-border) );
    }

.app-badge {
    min-height: 23px;
    border-radius: 999px;
    padding: 2px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
    font-size: 10px;
    white-space: nowrap;
}

    .app-badge.success {
        color: var(--app-success);
        background: rgba(22, 163, 74, .10);
    }

    .app-badge.warning {
        color: var(--app-warning);
        background: rgba(217, 119, 6, .10);
    }

    .app-badge.danger {
        color: var(--app-danger);
        background: rgba(220, 38, 38, .10);
    }

/* ==========================================================
   Avatar and price
   ========================================================== */

.app-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    object-fit: cover;
    background: var(--app-surface-2);
}

.app-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

    .app-price strong {
        font-size: 16px;
        font-weight: 600;
    }

    .app-price small {
        color: var(--app-muted);
        font-size: 10px;
    }

/* ==========================================================
   Empty state
   ========================================================== */

.app-empty {
    padding: 36px 18px;
    color: var(--app-muted);
    text-align: center;
}

.app-empty-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 12px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
}

.app-empty h3 {
    margin: 0 0 5px;
    color: var(--app-text);
    font-size: 15px;
    font-weight: 600;
}

.app-empty p {
    max-width: 280px;
    margin: 0 auto 14px;
    font-size: 11px;
}

/* ==========================================================
   Divider
   ========================================================== */

.app-divider {
    height: 1px;
    margin: 14px 0;
    background: var(--app-border);
}

/* ==========================================================
   Overlay
   ========================================================== */

.app-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    background: rgba(4, 10, 14, .52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity var(--app-transition), visibility var(--app-transition);
}

    .app-overlay.open {
        opacity: 1;
        visibility: visible;
    }

/* ==========================================================
   Bottom sheet
   ========================================================== */

.app-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 210;
    width: min(100%, var(--app-max-width));
    max-height: min(88vh, 860px);
    border-radius: var(--app-popup-radius) var(--app-popup-radius) 0 0;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
    overflow: hidden;
    transform: translate(-50%, 105%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}

    .app-sheet.open {
        transform: translate(-50%, 0);
    }

.app-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 9px auto 2px;
    border-radius: 999px;
    background: var(--app-border-strong);
}

.app-sheet-header {
    min-height: 58px;
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--app-border);
}

.app-sheet-title {
    min-width: 0;
    flex: 1;
}

    .app-sheet-title strong {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .app-sheet-title span {
        display: block;
        color: var(--app-muted);
        font-size: 10px;
    }

.app-sheet-body {
    max-height: calc(88vh - 68px);
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

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

.app-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 220;
    width: min(calc(100% - 28px), 420px);
    max-height: calc(100vh - 42px);
    border: 1px solid var(--app-border);
    border-radius: var(--app-popup-radius);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -46%) scale(.96);
    transition: opacity var(--app-transition), transform var(--app-transition), visibility var(--app-transition);
}

    .app-modal.open {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }

.app-modal-header {
    padding: 16px 16px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.app-modal-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: var(--app-primary);
    background: var(--app-primary-soft);
}

    .app-modal-icon.danger {
        color: var(--app-danger);
        background: rgba(220, 38, 38, .10);
    }

.app-modal-title {
    min-width: 0;
    flex: 1;
}

    .app-modal-title strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
    }

    .app-modal-title span {
        display: block;
        color: var(--app-muted);
        font-size: 11px;
    }

.app-modal-body {
    padding: 0 16px 16px;
    color: var(--app-text-soft);
    font-size: 12px;
}

.app-modal-actions {
    padding: 12px 16px 16px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* ==========================================================
   Toast
   ========================================================== */

.app-toast-host {
    position: fixed;
    top: calc(var(--app-safe-top) + 14px);
    left: 50%;
    z-index: 400;
    width: min(calc(100% - 28px), 420px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    transform: translateX(-50%);
}

.app-toast {
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-text);
    background: color-mix( in srgb, var(--app-surface) 94%, transparent );
    box-shadow: var(--app-shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-12px);
    transition: opacity var(--app-transition), transform var(--app-transition);
}

    .app-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

.app-toast-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: var(--app-info);
    background: rgba(2, 132, 199, .10);
}

.app-toast.success .app-toast-icon {
    color: var(--app-success);
    background: rgba(22, 163, 74, .10);
}

.app-toast.warning .app-toast-icon {
    color: var(--app-warning);
    background: rgba(217, 119, 6, .10);
}

.app-toast.error .app-toast-icon {
    color: var(--app-danger);
    background: rgba(220, 38, 38, .10);
}

.app-toast-text {
    min-width: 0;
    flex: 1;
}

    .app-toast-text strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
    }

    .app-toast-text span {
        display: block;
        color: var(--app-muted);
        font-size: 10px;
    }

/* ==========================================================
   Global loader
   ========================================================== */

.app-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: grid;
    place-items: center;
    background: rgba(4, 10, 14, .48);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--app-transition), visibility var(--app-transition);
}

    .app-loader-overlay.open {
        opacity: 1;
        visibility: visible;
    }

.app-loader-box {
    width: 126px;
    min-height: 112px;
    border-radius: var(--app-card-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-lg);
}

.app-loader-ring {
    width: 38px;
    height: 38px;
    border: 3px solid var(--app-border);
    border-top-color: var(--app-primary);
    border-radius: 50%;
    animation: app-spin .75s linear infinite;
}

.app-loader-text {
    color: var(--app-muted);
    font-size: 11px;
}

/* ==========================================================
   Skeleton
   ========================================================== */

.app-skeleton {
    position: relative;
    color: transparent !important;
    background: var(--app-surface-3);
    overflow: hidden;
    user-select: none;
}

    .app-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .48), transparent );
        transform: translateX(100%);
        animation: app-shimmer 1.25s infinite;
    }

[data-theme="dark"] .app-skeleton::after {
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .06), transparent );
}

.app-skeleton-line {
    height: 12px;
    border-radius: 999px;
}

    .app-skeleton-line.sm {
        width: 40%;
    }

    .app-skeleton-line.md {
        width: 68%;
    }

    .app-skeleton-line.lg {
        width: 100%;
    }

.app-skeleton-circle {
    border-radius: 50%;
}

/* ==========================================================
   Lookup popup
   ========================================================== */

.app-lookup-search {
    position: sticky;
    top: -14px;
    z-index: 2;
    padding: 14px 0 10px;
    background: var(--app-surface);
}

.app-lookup-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-lookup-item {
    width: 100%;
    min-height: 62px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--app-text);
    background: var(--app-surface);
    text-align: right;
    cursor: pointer;
    transition: border-color var(--app-transition), background var(--app-transition), transform var(--app-transition);
}

    .app-lookup-item:hover,
    .app-lookup-item.selected {
        border-color: color-mix( in srgb, var(--app-primary) 40%, var(--app-border) );
        background: var(--app-primary-soft);
    }

    .app-lookup-item:active {
        transform: scale(.99);
    }

.app-lookup-image {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    object-fit: contain;
    background: var(--app-surface-2);
    padding: 4px;
}

.app-lookup-content {
    min-width: 0;
    flex: 1;
}

    .app-lookup-content strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
    }

    .app-lookup-content span {
        display: block;
        color: var(--app-muted);
        font-size: 10px;
    }

/* ==========================================================
   Persian calendar
   ========================================================== */

.app-calendar {
    direction: rtl;
    user-select: none;
}

.app-calendar-toolbar {
    margin-bottom: 12px;
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    gap: 8px;
    align-items: center;
}

.app-calendar-title {
    min-height: 38px;
    border: 0;
    border-radius: var(--app-card-radius);
    color: var(--app-text);
    background: var(--app-surface-2);
    font-weight: 600;
    cursor: pointer;
}

.app-calendar-weekdays,
.app-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.app-calendar-weekdays {
    margin-bottom: 5px;
}

    .app-calendar-weekdays span {
        min-height: 28px;
        display: grid;
        place-items: center;
        color: var(--app-muted);
        font-size: 10px;
    }

.app-calendar-day {
    min-width: 0;
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: var(--app-text);
    background: transparent;
    cursor: pointer;
    transition: color var(--app-transition), background var(--app-transition), transform var(--app-transition);
}

    .app-calendar-day:hover {
        background: var(--app-surface-2);
    }

    .app-calendar-day:active {
        transform: scale(.92);
    }

    .app-calendar-day.today {
        color: var(--app-primary);
        box-shadow: inset 0 0 0 1px var(--app-primary);
    }

    .app-calendar-day.selected {
        color: #ffffff;
        background: var(--app-primary);
    }

    .app-calendar-day:disabled {
        opacity: .20;
        cursor: not-allowed;
    }

.app-calendar-footer {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ==========================================================
   Checkbox, radio and switch
   ========================================================== */

.app-checkbox,
.app-radio {
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--app-border-strong);
    display: inline-grid;
    place-items: center;
    background: var(--app-surface);
    cursor: pointer;
    transition: border-color var(--app-transition), background var(--app-transition);
}

.app-checkbox {
    border-radius: var(--app-card-radius);
}

.app-radio {
    border-radius: 50%;
}

    .app-checkbox:checked,
    .app-radio:checked {
        border-color: var(--app-primary);
        background: var(--app-primary);
    }

        .app-checkbox:checked::after {
            content: "";
            width: 8px;
            height: 4px;
            border: solid #ffffff;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg) translateY(-1px);
        }

        .app-radio:checked::after {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ffffff;
        }

.app-switch {
    width: 48px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    padding: 3px;
    background: var(--app-border-strong);
    cursor: pointer;
    transition: background var(--app-transition);
}

    .app-switch::before {
        content: "";
        display: block;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 2px 7px rgba(0, 0, 0, .20);
        transform: translateX(0);
        transition: transform var(--app-transition);
    }

    .app-switch.active {
        background: var(--app-primary);
    }

        .app-switch.active::before {
            transform: translateX(-20px);
        }

/* ==========================================================
   Progress
   ========================================================== */

.app-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--app-surface-3);
    overflow: hidden;
}

    .app-progress > span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: var(--app-primary-dark);
        transition: width .4s ease;
    }

/* ==========================================================
   File picker
   ========================================================== */

.app-file-picker {
    min-height: 112px;
    border: 1px dashed var(--app-border-strong);
    border-radius: var(--app-card-radius);
    padding: 16px;
    display: grid;
    place-items: center;
    color: var(--app-muted);
    background: var(--app-surface-2);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--app-transition), background var(--app-transition);
}

    .app-file-picker:hover {
        border-color: var(--app-primary);
        background: var(--app-primary-soft);
    }

.app-file-preview {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.app-file-thumb {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    background: var(--app-surface-2);
    overflow: hidden;
}

    .app-file-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.app-file-remove {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(0, 0, 0, .58);
    cursor: pointer;
}

/* ==========================================================
   Offline bar
   ========================================================== */

.app-offline-bar {
    position: fixed;
    right: 50%;
    bottom: calc( var(--app-bottom-height) + var(--app-safe-bottom) + 10px );
    z-index: 150;
    width: min(calc(100% - 28px), 420px);
    min-height: 40px;
    border-radius: var(--app-card-radius);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--app-danger);
    box-shadow: var(--app-shadow-md);
    font-size: 11px;
    transform: translateX(50%) translateY(80px);
    transition: transform var(--app-transition);
}

    .app-offline-bar.show {
        transform: translateX(50%) translateY(0);
    }

/* ==========================================================
   Animations
   ========================================================== */

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

@keyframes app-shimmer {
    100% {
        transform: translateX(-100%);
    }
}

@keyframes app-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }
}

/* ==========================================================
   Desktop
   ========================================================== */

@media (min-width: 720px) {
    body {
        padding: 0px 0px;
    }

    .app-shell {
        min-height: calc(100vh - 44px);
        border: 1px solid var(--app-border);
        box-shadow: var(--app-shadow-lg);
        overflow: hidden;
    }

    .app-header {
        top: 0px;
        border-radius: 0px;
    }

    .app-bottom-nav {
        bottom: 0px;
        border-radius: 0px;
    }
}

@media (max-width: 360px) {
    .app-grid.cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-card {
        padding: 13px;
    }

    .app-page {
        padding-inline: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}
/* =========================================================
   INVOICES PAGE
   ========================================================= */

.invoices-page {
    padding: 14px;
    direction: rtl;
}

    .invoices-page .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
    }

    .invoices-page .page-header-title {
        min-width: 0;
    }

    .invoices-page .page-header h1 {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 600;
        color: #111827;
    }

    .invoices-page .page-header p {
        margin: 0;
        font-size: 12px;
        line-height: 1.8;
        color: #6b7280;
    }

    .invoices-page .invoice-refresh-btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: var(--primary-dark, #b70322);
        cursor: pointer;
    }

        .invoices-page .invoice-refresh-btn:active {
            transform: scale(.97);
        }

    .invoices-page .invoice-filter-box {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 10px;
        margin-bottom: 12px;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
    }

    .invoices-page .invoice-filter-input {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 1px solid #dfe3e8;
        border-radius: var(--app-card-radius);
        outline: none;
        background: #fff;
        color: #111827;
        font-size: 13px;
    }

        .invoices-page .invoice-filter-input:focus {
            border-color: var(--primary-dark, #b70322);
        }

    .invoices-page .invoice-filter-btn {
        min-width: 76px;
        height: 42px;
        padding: 0 14px;
        border: 0;
        border-radius: var(--app-card-radius);
        background: var(--primary-dark, #b70322);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .invoices-page #invoiceList,
    .invoices-page .invoice-list {
        display: grid;
        gap: 10px;
    }

    .invoices-page .invoice-card {
        position: relative;
        display: block;
        padding: 13px;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
        cursor: pointer;
        transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

        .invoices-page .invoice-card:hover {
            border-color: rgba(183, 3, 34, .28);
            box-shadow: 0 6px 18px rgba(17, 24, 39, .06);
        }

        .invoices-page .invoice-card:active {
            transform: scale(.995);
        }

        .invoices-page .invoice-card::before {
            content: "";
            position: absolute;
            top: 12px;
            right: 0;
            width: 3px;
            height: 36px;
            border-radius: 3px 0 0 3px;
            background: var(--primary-dark, #b70322);
        }

    .invoices-page .invoice-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }

    .invoices-page .invoice-card-title-wrap {
        min-width: 0;
    }

    .invoices-page .invoice-card-title {
        margin-bottom: 5px;
        overflow: hidden;
        color: #111827;
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .invoices-page .invoice-card-code {
        color: #6b7280;
        font-size: 11px;
        line-height: 1.8;
    }

.drltr {
    direction: ltr;
    display: inline-block;
}

.invoices-page .invoice-card-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 8px;
    border: 1px solid rgba(16, 185, 129, .18);
    border-radius: var(--app-card-radius);
    background: rgba(16, 185, 129, .08);
    color: #047857;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

    .invoices-page .invoice-card-status.pending {
        border-color: rgba(245, 158, 11, .22);
        background: rgba(245, 158, 11, .09);
        color: #b45309;
    }

    .invoices-page .invoice-card-status.canceled {
        border-color: rgba(239, 68, 68, .2);
        background: rgba(239, 68, 68, .08);
        color: #b91c1c;
    }

.invoices-page .invoice-card-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
}

.invoices-page .invoice-info-item {
    min-width: 0;
}

.invoices-page .invoice-info-label {
    display: block;
    margin-bottom: 3px;
    color: #9ca3af;
    font-size: 10px;
}

.invoices-page .invoice-info-value {
    display: block;
    overflow: hidden;
    color: #374151;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoices-page .invoice-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.invoices-page .invoice-card-amount-wrap {
    min-width: 0;
}

.invoices-page .invoice-card-amount-label {
    display: block;
    margin-bottom: 3px;
    color: #9ca3af;
    font-size: 10px;
}

.invoices-page .invoice-card-amount {
    color: var(--primary-dark, #b70322);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

.invoices-page .invoice-card-arrow {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-card-radius);
    background: rgba(183, 3, 34, .07);
    color: var(--app-primary-dark, #b70322);
}

    .invoices-page .invoice-card-arrow svg {
        fill: var(--app-primary-dark);
        width: 22px;
        height: 22px;
    }
/* =========================================================
   INVOICE DETAILS PAGE
   ========================================================= */
.invoice-details-page {
    padding: 14px;
    padding-bottom: 92px;
    direction: rtl;
}

    .invoice-details-page .invoice-details-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
        flex-direction: row-reverse;
    }

    .invoice-details-page .invoice-back-btn {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #374151;
        cursor: pointer;
    }

    .invoice-details-page .invoice-details-heading {
        min-width: 0;
        flex: 1;
    }

        .invoice-details-page .invoice-details-heading h1 {
            margin: 0 0 3px;
            color: #111827;
            font-size: 17px;
            font-weight: 600;
        }

        .invoice-details-page .invoice-details-heading p {
            margin: 0;
            color: #6b7280;
            font-size: 11px;
        }

    .invoice-details-page .invoice-summary-card {
        position: relative;
        overflow: hidden;
        padding: 14px;
        margin-bottom: 10px;
        border: 1px solid rgba(183, 3, 34, .14);
        border-radius: var(--app-card-radius);
        background: linear-gradient( 135deg, rgba(183, 3, 34, .055), rgba(183, 3, 34, .015) ), #fff;
    }

        .invoice-details-page .invoice-summary-card::after {
            content: "";
            position: absolute;
            top: -35px;
            left: -35px;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(183, 3, 34, .045);
        }

    .invoice-details-page .invoice-summary-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 16px;
    }

    .invoice-details-page .invoice-summary-title {
        margin-bottom: 5px;
        color: #111827;
        font-size: 15px;
        font-weight: 600;
    }

    .invoice-details-page .invoice-summary-code {
        color: #6b7280;
        font-size: 11px;
    }

    .invoice-details-page .invoice-summary-status {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 3px 9px;
        border: 1px solid rgba(16, 185, 129, .2);
        border-radius: var(--app-card-radius);
        background: rgba(16, 185, 129, .08);
        color: #047857;
        font-size: 10px;
        font-weight: 600;
    }

    .invoice-details-page .invoice-summary-amount {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .invoice-details-page .invoice-summary-amount-label {
        display: block;
        margin-bottom: 4px;
        color: #6b7280;
        font-size: 11px;
    }

    .invoice-details-page .invoice-summary-amount-value {
        display: block;
        color: var(--primary-dark, #b70322);
        font-size: 23px;
        font-weight: 600;
        text-align: left;
    }

    .invoice-details-page .invoice-section {
        padding: 13px;
        margin-bottom: 10px;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
    }

    .invoice-details-page .invoice-section-title {
        display: flex;
        align-items: center;
        gap: 7px;
        padding-bottom: 10px;
        margin: 0 0 11px;
        border-bottom: 1px solid #f0f1f3;
        color: #111827;
        font-size: 13px;
        font-weight: 600;
    }

        .invoice-details-page .invoice-section-title svg {
            width: 18px;
            height: 18px;
            color: var(--primary-dark, #b70322);
        }

    .invoice-details-page .invoice-details-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 10px;
        align-items: center;
    }

    .invoice-details-page .invoice-detail-item {
        min-width: 0;
    }

        .invoice-details-page .invoice-detail-item.full {
            grid-column: 1 / -1;
        }

    .invoice-details-page .invoice-detail-label {
        display: block;
        margin-bottom: 4px;
        color: #9ca3af;
        font-size: 10px;
    }

    .invoice-details-page .invoice-detail-value {
        display: block;
        overflow-wrap: anywhere;
        color: #374151;
        font-size: 12px;
        line-height: 1.8;
    }


    /* اقلام فاکتور */

    .invoice-details-page .invoice-items-list {
        display: grid;
        gap: 8px;
    }

    .invoice-details-page .invoice-item {
        padding: 11px;
        border: 1px solid #eceef1;
        border-radius: var(--app-card-radius);
        background: #fafafa;
    }

    .invoice-details-page .invoice-item-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .invoice-details-page .invoice-item-name {
        min-width: 0;
        flex: 1;
        color: #1f2937;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.8;
    }

    .invoice-details-page .invoice-item-type {
        flex: 0 0 auto;
        padding: 2px 7px;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #6b7280;
        font-size: 9px;
        white-space: nowrap;
    }

    .invoice-details-page .invoice-item-info {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .invoice-details-page .invoice-item-info-cell {
        min-width: 0;
    }

    .invoice-details-page .invoice-item-info-label {
        display: block;
        margin-bottom: 3px;
        color: #9ca3af;
        font-size: 9px;
    }

    .invoice-details-page .invoice-item-info-value {
        display: block;
        overflow: hidden;
        color: #374151;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .invoice-details-page .invoice-item-total {
        color: var(--primary-dark, #b70322);
        font-weight: 600;
    }

    .invoice-details-page .invoice-item-description {
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px dashed #e5e7eb;
        color: #6b7280;
        font-size: 10px;
        line-height: 1.9;
    }


    /* پرداخت‌ها */

    .invoice-details-page .invoice-payments-list {
        display: grid;
        gap: 8px;
    }

    .invoice-details-page .invoice-payment {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        align-items: center;
        gap: 9px;
        padding: 10px;
        border: 1px solid #eceef1;
        border-radius: var(--app-card-radius);
        background: #fff;
    }

    .invoice-details-page .invoice-payment-icon {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--app-card-radius);
        background: rgba(16, 185, 129, .08);
        color: #047857;
    }

    .invoice-details-page .invoice-payment-content {
        min-width: 0;
    }

    .invoice-details-page .invoice-payment-title {
        margin-bottom: 3px;
        overflow: hidden;
        color: #1f2937;
        font-size: 11px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .invoice-details-page .invoice-payment-date {
        color: #9ca3af;
        font-size: 9px;
    }

    .invoice-details-page .invoice-payment-amount {
        color: #047857;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }


    /* جمع‌بندی مبالغ */

    .invoice-details-page .invoice-totals {
        display: grid;
        gap: 8px;
    }

    .invoice-details-page .invoice-total-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 30px;
        color: #4b5563;
        font-size: 11px;
    }

        .invoice-details-page .invoice-total-row strong {
            color: #1f2937;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
        }

        .invoice-details-page .invoice-total-row.discount strong {
            color: #dc2626;
        }

        .invoice-details-page .invoice-total-row.paid strong {
            color: #059669;
        }

        .invoice-details-page .invoice-total-row.remaining strong {
            color: #d97706;
        }

        .invoice-details-page .invoice-total-row.final {
            padding-top: 11px;
            margin-top: 3px;
            border-top: 1px solid #e5e7eb;
            color: #111827;
            font-size: 13px;
            font-weight: 600;
        }

            .invoice-details-page .invoice-total-row.final strong {
                color: var(--primary-dark, #b70322);
                font-size: 17px;
            }


    /* نوار پایین جزئیات */

    .invoice-details-page .invoice-details-bottom {
        right: 50%;
        bottom: 0;
        z-index: 30;
        width: min(100%, 520px);
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        padding: 10px 14px;
        border-top: 1px solid #e5e7eb;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
    }

.invoice_rse {
    gap: 5px;
    grid-column: 1 / span 4;
    display: flex;
    flex-direction: column;
}

.fkey6 {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.invoice-details-page .invoice-payment-btn {
    height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--primary-dark, #b70322);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.invoice-details-page .invoice-download-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dfe3e8;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #374151;
    cursor: pointer;
}


/* حالت خالی و لودینگ */

.invoices-page .app-empty,
.invoice-details-page .app-empty {
    padding: 32px 16px;
    border: 1px dashed #dfe3e8;
    border-radius: var(--app-card-radius);
    background: #fff;
    text-align: center;
}

    .invoices-page .app-empty h3,
    .invoice-details-page .app-empty h3 {
        margin: 0 0 6px;
        color: #1f2937;
        font-size: 14px;
        font-weight: 600;
    }

    .invoices-page .app-empty p,
    .invoice-details-page .app-empty p {
        margin: 0;
        color: #9ca3af;
        font-size: 11px;
        line-height: 1.9;
    }


/* موبایل کوچک */

@media (max-width: 380px) {
    .invoices-page .invoice-card-info,
    .invoice-details-page .invoice-details-grid {
        grid-template-columns: 1fr;
    }

    .invoice-details-page .invoice-detail-item.full {
        grid-column: auto;
    }

    .invoice-details-page .invoice-item-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* دسکتاپ */

@media (min-width: 768px) {
    .invoices-page,
    .invoice-details-page {
        max-width: 900px;
        margin: 0 auto;
        padding: 18px;
    }

        .invoices-page #invoiceList,
        .invoices-page .invoice-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .invoice-details-page_old .invoice-details-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .invoice-details-page .invoice-detail-item.full {
        grid-column: 1 / 2;
    }

    .invoice-details-page .invoice-details-bottom {
        width: min(calc(100% - 40px), 900px);
    }
}

.invoice-details-page .invoice-refresh-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--primary-dark, #b70322);
    cursor: pointer;
    align-content: center;
}
.invoice-details-page .invoice-refresh-btn svg {
    width: 32px;
    height: 36px;
    position: relative;
    top: -4px;
    left: -3px;
}
.invoice-details-page .invoice-section-count {
    margin-right: auto;
    padding: 2px 7px;
    border-radius: var(--app-card-radius);
    background: rgba(183, 3, 34, .07);
    color: var(--primary-dark, #b70322);
    font-size: 9px;
    font-weight: 300;
}

.invoice-details-page .invoice-details-loading {
    display: grid;
    gap: 10px;
}

.invoice-details-page .invoice-loading-card {
    padding: 14px;
    border: 1px solid #eceef1;
    border-radius: var(--app-card-radius);
    background: #fff;
}

.invoice-details-page .invoice-loading-line {
    height: 11px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: linear-gradient( 90deg, #f1f3f5 25%, #e5e7eb 50%, #f1f3f5 75% );
    background-size: 200% 100%;
    animation: invoiceSkeleton 1.2s infinite linear;
}

    .invoice-details-page .invoice-loading-line:last-child {
        margin-bottom: 0;
    }

    .invoice-details-page .invoice-loading-line.large {
        width: 82%;
    }

    .invoice-details-page .invoice-loading-line.medium {
        width: 58%;
    }

    .invoice-details-page .invoice-loading-line.small {
        width: 34%;
    }

.invoice-details-page .invoice-empty-icon {
    margin-bottom: 10px;
    color: #dc2626;
}

@keyframes invoiceSkeleton {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}

.invoice-vehicle-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 3px 0 8px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .invoice-vehicle-tabs::-webkit-scrollbar {
        display: none;
    }

.invoice-vehicle-tab {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #4b5563;
    font-family: inherit;
    font-size: 13px;
    font-weight: 300;
    white-space: nowrap;
    cursor: pointer;
    transition: .2s ease;
}

    .invoice-vehicle-tab:hover {
        border-color: var(--primary-dark);
        color: var(--primary-dark);
    }

    .invoice-vehicle-tab.active {
        border-color: var(--app-primary-dark);
        background: var(--app-primary-dark);
        color: #fff;
    }

.invoice-vehicle-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-right: 6px;
    padding: 0 5px;
    border-radius: var(--app-card-radius);
    background: #f3f4f6;
    color: #6b7280;
    font-size: 10px;
}

.invoice-vehicle-tab.active .invoice-vehicle-tab-count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.service-appointment-page {
    min-height: 100%;
    padding-bottom: 96px;
    background: #f7f8fa;
}

    .service-appointment-page .service-appointment-header {
        position: sticky;
        top: 0;
        z-index: 20;
        min-height: 68px;
        padding: 12px 14px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, .97);
        border-bottom: 1px solid #e8ebf0;
        direction: ltr;
    }

    .service-appointment-page .service-appointment-back,
    .service-appointment-page .service-appointment-history {
        width: 40px;
        height: 40px;
        padding: 0;
        display: grid;
        place-items: center;
        border: 1px solid #e5e8ee;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #202636;
    }

        .service-appointment-page .service-appointment-back svg,
        .service-appointment-page .service-appointment-history svg {
            width: 21px;
            height: 21px;
        }

    .service-appointment-page .service-appointment-heading {
        min-width: 0;
        text-align: center;
    }

        .service-appointment-page .service-appointment-heading h1 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
            color: #1c2333;
        }

        .service-appointment-page .service-appointment-heading p {
            margin: 5px 0 0;
            font-size: 10px;
            color: #7a8497;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .service-appointment-page .service-appointment-content {
        padding: 14px;
    }

    .service-appointment-page .service-appointment-section,
    .service-appointment-page .service-appointment-summary {
        margin-bottom: 12px;
        padding: 14px;
        background: #fff;
        border: 1px solid #e8ebf0;
        border-radius: var(--app-card-radius);
    }

    .service-appointment-page .service-appointment-section-title {
        margin-bottom: 13px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .service-appointment-page .service-appointment-section-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: grid;
        place-items: center;
        border-radius: var(--app-card-radius);
        background: var(--primary-soft);
        color: var(--primary-dark);
    }

        .service-appointment-page .service-appointment-section-icon svg {
            width: 21px;
            height: 21px;
        }

    .service-appointment-page .service-appointment-section-title h2 {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #202636;
    }

    .service-appointment-page .service-appointment-section-title p {
        margin: 5px 0 0;
        font-size: 10px;
        color: #8790a2;
    }

    .service-appointment-page .service-appointment-select-card {
        width: 100%;
        min-height: 68px;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        text-align: right;
        border: 1px solid #e4e7ed;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #202636;
    }

        .service-appointment-page .service-appointment-select-card.selected {
            border-color: var(--primary-border);
            background: var(--primary-soft);
        }

    .service-appointment-page .service-appointment-select-main {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .service-appointment-page .service-appointment-select-image {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: var(--app-card-radius);
        background: #f2f4f7;
        color: var(--primary-dark);
    }

        .service-appointment-page .service-appointment-select-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .service-appointment-page .service-appointment-select-image svg {
            width: 27px;
            height: 27px;
        }

    .service-appointment-page .service-appointment-select-text {
        min-width: 0;
    }

        .service-appointment-page .service-appointment-select-text strong,
        .service-appointment-page .service-appointment-select-text span {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .service-appointment-page .service-appointment-select-text strong {
            font-size: 12px;
            font-weight: 600;
        }

        .service-appointment-page .service-appointment-select-text span {
            margin-top: 6px;
            font-size: 10px;
            color: #7f899b;
        }

    .service-appointment-page .service-appointment-chevron {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        color: #9aa2b1;
    }

    .service-appointment-page .service-appointment-days {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

        .service-appointment-page .service-appointment-days::-webkit-scrollbar {
            display: none;
        }

    .service-appointment-page .service-appointment-day {
        min-width: 78px;
        min-height: 76px;
        padding: 8px 6px;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 5px;
        border: 1px solid #e4e7ed;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #222a39;
    }

        .service-appointment-page .service-appointment-day span {
            font-size: 9px;
            color: #858fa1;
        }

        .service-appointment-page .service-appointment-day strong {
            font-size: 15px;
            font-weight: 600;
        }

        .service-appointment-page .service-appointment-day small {
            font-size: 9px;
            color: #858fa1;
        }

        .service-appointment-page .service-appointment-day.active {
            border-color: var(--primary-dark);
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

            .service-appointment-page .service-appointment-day.active span,
            .service-appointment-page .service-appointment-day.active small {
                color: var(--primary-dark);
            }

    .service-appointment-page .service-appointment-slots {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .service-appointment-page .service-appointment-slot {
        min-height: 52px;
        padding: 7px;
        display: grid;
        place-items: center;
        gap: 3px;
        border: 1px solid #e4e7ed;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #222a39;
    }

        .service-appointment-page .service-appointment-slot strong {
            font-size: 12px;
            font-weight: 600;
        }

        .service-appointment-page .service-appointment-slot span {
            font-size: 8px;
            color: #8992a3;
        }

        .service-appointment-page .service-appointment-slot.active {
            border-color: var(--primary-dark);
            background: var(--primary-soft);
            color: var(--primary-dark);
        }

    .service-appointment-page .service-appointment-field {
        display: block;
        margin-top: 13px;
    }

        .service-appointment-page .service-appointment-field > span {
            display: block;
            margin-bottom: 7px;
            font-size: 11px;
            color: #303748;
        }

        .service-appointment-page .service-appointment-field input,
        .service-appointment-page .service-appointment-field textarea {
            width: 100%;
            border: 1px solid #e3e6ec;
            border-radius: var(--app-card-radius);
            background: #fff;
            outline: none;
            color: #202636;
            font-size: 11px;
        }

        .service-appointment-page .service-appointment-field input {
            height: 44px;
            padding: 0 12px 0 62px;
        }

        .service-appointment-page .service-appointment-field textarea {
            padding: 11px 12px;
            resize: none;
            line-height: 1.9;
        }

            .service-appointment-page .service-appointment-field input:focus,
            .service-appointment-page .service-appointment-field textarea:focus {
                border-color: var(--primary-dark);
            }

    .service-appointment-page .service-appointment-input-wrap {
        position: relative;
    }

        .service-appointment-page .service-appointment-input-wrap small {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 9px;
            color: #8a93a4;
        }

    .service-appointment-page .service-appointment-counter {
        margin-top: 5px;
        text-align: left;
        font-size: 9px;
        color: #929aaa;
    }

    .service-appointment-page .service-appointment-summary-title {
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
    }

    .service-appointment-page .service-appointment-summary-row {
        min-height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid #edf0f4;
    }

        .service-appointment-page .service-appointment-summary-row:last-child {
            border-bottom: 0;
        }

        .service-appointment-page .service-appointment-summary-row span {
            font-size: 10px;
            color: #858fa1;
        }

        .service-appointment-page .service-appointment-summary-row strong {
            max-width: 65%;
            font-size: 10px;
            font-weight: 600;
            text-align: left;
        }

    .service-appointment-page .service-appointment-bottom-bar {
        width: min(100%, 760px);
        min-height: 72px;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: minmax(0, 1fr) 128px;
        align-items: center;
        gap: 10px;
        border-top: 1px solid #e4e7ed;
        background: rgba(255, 255, 255, .98);
    }

    .service-appointment-page .service-appointment-bottom-info {
        min-width: 0;
    }

        .service-appointment-page .service-appointment-bottom-info span,
        .service-appointment-page .service-appointment-bottom-info strong {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .service-appointment-page .service-appointment-bottom-info span {
            font-size: 9px;
            color: #8a93a3;
        }

        .service-appointment-page .service-appointment-bottom-info strong {
            margin-top: 5px;
            font-size: 11px;
            font-weight: 600;
        }

    .service-appointment-page .service-appointment-submit-btn,
    .service-appointment-page .service-appointment-primary-btn {
        min-height: 44px;
        border: 0;
        border-radius: var(--app-card-radius);
        background: var(--app-primary-dark);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
    }

        .service-appointment-page .service-appointment-submit-btn:disabled {
            opacity: .55;
        }

    .service-appointment-page .service-appointment-picker {
        position: fixed;
        inset: 0;
        z-index: 100;
    }

    .service-appointment-page .service-appointment-picker-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(17, 24, 39, .45);
    }

    .service-appointment-page .service-appointment-picker-sheet {
        position: absolute;
        right: 50%;
        bottom: 0;
        width: min(100%, 760px);
        max-height: 78vh;
        padding: 15px;
        transform: translateX(50%);
        display: flex;
        flex-direction: column;
        border-radius: 5px 5px 0 0;
        background: #fff;
    }

    .service-appointment-page .service-appointment-picker-header {
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

        .service-appointment-page .service-appointment-picker-header h3 {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
        }

        .service-appointment-page .service-appointment-picker-header p {
            margin: 5px 0 0;
            font-size: 9px;
            color: #8a93a3;
        }

        .service-appointment-page .service-appointment-picker-header button {
            width: 34px;
            height: 34px;
            border: 1px solid #e4e7ed;
            border-radius: var(--app-card-radius);
            background: #fff;
            font-size: 22px;
        }

    .service-appointment-page .service-appointment-search {
        height: 43px;
        padding: 0 10px;
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr);
        align-items: center;
        gap: 7px;
        border: 1px solid #e4e7ed;
        border-radius: var(--app-card-radius);
    }

        .service-appointment-page .service-appointment-search svg {
            width: 19px;
            height: 19px;
            color: #8b94a4;
        }

        .service-appointment-page .service-appointment-search input {
            min-width: 0;
            height: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            font-size: 11px;
        }

    .service-appointment-page .service-appointment-picker-list {
        margin-top: 10px;
        overflow-y: auto;
    }

    .service-appointment-page .service-appointment-picker-item {
        width: 100%;
        min-height: 64px;
        padding: 9px 2px;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 9px;
        text-align: right;
        border: 0;
        border-bottom: 1px solid #edf0f4;
        background: #fff;
    }

    .service-appointment-page .service-appointment-picker-item-image {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: var(--app-card-radius);
        background: #f2f4f7;
        color: var(--primary-dark);
    }

        .service-appointment-page .service-appointment-picker-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .service-appointment-page .service-appointment-picker-item-text {
        min-width: 0;
    }

        .service-appointment-page .service-appointment-picker-item-text strong,
        .service-appointment-page .service-appointment-picker-item-text span {
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .service-appointment-page .service-appointment-picker-item-text strong {
            font-size: 11px;
            font-weight: 600;
        }

        .service-appointment-page .service-appointment-picker-item-text span {
            margin-top: 6px;
            font-size: 9px;
            color: #8992a3;
        }

    .service-appointment-page .service-appointment-picker-check {
        width: 17px;
        height: 17px;
        border: 1px solid #d8dce4;
        border-radius: 50%;
    }

    .service-appointment-page .service-appointment-picker-item.active .service-appointment-picker-check {
        border: 5px solid var(--primary-dark);
    }

    .service-appointment-page .service-appointment-loading {
        padding: 14px;
    }

    .service-appointment-page .service-appointment-skeleton {
        height: 92px;
        margin-bottom: 12px;
        border-radius: var(--app-card-radius);
        background: linear-gradient(90deg, #eef0f3 25%, #f7f8fa 50%, #eef0f3 75%);
        background-size: 200% 100%;
        animation: serviceAppointmentSkeleton 1.2s infinite;
    }

        .service-appointment-page .service-appointment-skeleton.medium {
            height: 74px;
        }

        .service-appointment-page .service-appointment-skeleton.small {
            height: 54px;
        }

@keyframes serviceAppointmentSkeleton {
    to {
        background-position: -200% 0;
    }
}

.service-appointment-page .service-appointment-inline-loading {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .service-appointment-page .service-appointment-inline-loading span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--primary-dark);
        animation: serviceAppointmentDots .8s infinite alternate;
    }

        .service-appointment-page .service-appointment-inline-loading span:nth-child(2) {
            animation-delay: .15s;
        }

        .service-appointment-page .service-appointment-inline-loading span:nth-child(3) {
            animation-delay: .3s;
        }

@keyframes serviceAppointmentDots {
    to {
        transform: translateY(-6px);
        opacity: .45;
    }
}

.service-appointment-page .service-appointment-empty-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 12px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary-dark);
}

    .service-appointment-page .service-appointment-empty-icon svg {
        width: 32px;
        height: 32px;
    }

@media (max-width: 410px) {
    .service-appointment-page .service-appointment-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.auth-page * {
    box-sizing: border-box;
}

.auth-header {
    min-height: 64px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid var(--app-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row-reverse;
}

.auth-header-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--auth-text);
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

    .auth-header-btn svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-header-content {
    flex: 1;
    min-width: 0;
}

    .auth-header-content h1 {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.7;
    }

    .auth-header-content span {
        display: block;
        color: var(--auth-muted);
        font-size: 11px;
        line-height: 1.6;
    }

.auth-content {
    padding: 14px;
}

.auth-intro-card,
.auth-search-card,
.auth-state-card,
.auth-result-card,
.auth-result-skeleton {
    background: #fff;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
}

.auth-intro-card {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}

.auth-intro-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--app-card-radius);
    background: var(--auth-primary-soft);
    color: var(--auth-primary);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

    .auth-intro-icon svg {
        width: 37px;
        height: 37px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-intro-text {
    min-width: 0;
}

    .auth-intro-text h2 {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 600;
    }

    .auth-intro-text p {
        margin: 0;
        color: var(--auth-muted);
        font-size: 12px;
        line-height: 1.9;
    }

.auth-search-card {
    padding: 15px;
    margin-bottom: 12px;
}

.auth-field-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
}

.auth-input-wrap {
    height: 50px;
    border: 1px solid #d9dde5;
    border-radius: var(--app-card-radius);
    background: #fff;
    display: flex;
    align-items: center;
    transition: border-color .2s, box-shadow .2s;
}

    .auth-input-wrap_old:focus-within {
        border-color: var(--auth-primary);
        box-shadow: 0 0 0 3px var(--auth-primary-soft);
    }

.auth-input-icon {
    width: 44px;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--auth-muted);
}

    .auth-input-icon svg,
    .auth-clear-btn svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-input {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--auth-text);
    padding: 0 2px;
    font: inherit;
    font-size: 13px;
    direction: ltr;
    text-align: right;
}

    .auth-input::placeholder {
        direction: rtl;
        text-align: right;
        color: #a0a6b0;
    }

.auth-clear-btn {
    width: 42px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #959ca8;
    display: none;
    place-items: center;
    cursor: pointer;
}

.auth-input-wrap.has-value .auth-clear-btn {
    display: grid;
}

.auth-scan-actions {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.auth-scan-btn {
    min-height: 58px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 8px;
    color: var(--auth-text);
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: right;
    cursor: pointer;
}

    .auth-scan-btn:active {
        background: #f8f9fb;
    }

.auth-scan-icon {
    width: 34px;
    height: 34px;
    background: #f2f4f7;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

    .auth-scan-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-scan-btn strong,
.auth-scan-btn small {
    display: block;
}

.auth-scan-btn strong {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 2px;
}

.auth-scan-btn small {
    color: var(--auth-muted);
    font-size: 9px;
    font-weight: 300;
}

.auth-submit-btn {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--auth-primary);
    color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .auth-submit-btn:disabled {
        opacity: .68;
        cursor: default;
    }

.auth-submit-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-submit-loader {
    width: 19px;
    height: 19px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: authSpin .8s linear infinite;
}

.auth-submit-btn.is-loading .auth-submit-loader {
    display: block;
}

.auth-submit-btn.is-loading .auth-submit-icon {
    display: none;
}

.auth-state-card {
    padding: 26px 18px;
    text-align: center;
}

.auth-state-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 12px;
    border-radius: var(--app-card-radius);
    background: #f3f5f8;
    color: #7a8494;
    display: grid;
    place-items: center;
}

    .auth-state-icon svg {
        width: 44px;
        height: 44px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-state-card h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
}

.auth-state-card p {
    margin: 0 auto;
    max-width: 290px;
    color: var(--auth-muted);
    font-size: 11px;
    line-height: 1.9;
}

.auth-result-skeleton {
    padding: 16px;
}

.auth-skeleton {
    position: relative;
    overflow: hidden;
    background: #edf0f4;
    border-radius: var(--app-card-radius);
}

    .auth-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, .72), transparent );
        animation: authSkeleton 1.1s infinite;
    }

.auth-skeleton-status {
    height: 74px;
    margin-bottom: 16px;
}

.auth-skeleton-title {
    height: 18px;
    width: 58%;
    margin-bottom: 8px;
}

.auth-skeleton-subtitle {
    height: 13px;
    width: 35%;
    margin-bottom: 18px;
}

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

.auth-skeleton-item {
    height: 64px;
}

.auth-result-card {
    overflow: hidden;
    animation: authSlideUp .25s ease;
}

.auth-result-banner {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid transparent;
}

.auth-result-card.is-success .auth-result-banner {
    background: var(--auth-success-soft);
    color: var(--auth-success);
    border-bottom-color: rgba(24, 134, 75, .15);
}

.auth-result-card.is-warning .auth-result-banner {
    background: var(--auth-warning-soft);
    color: var(--auth-warning);
    border-bottom-color: rgba(183, 121, 0, .16);
}

.auth-result-card.is-error .auth-result-banner {
    background: var(--auth-danger-soft);
    color: var(--auth-danger);
    border-bottom-color: rgba(215, 45, 63, .15);
}

.auth-result-status-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--app-card-radius);
    background: rgba(255, 255, 255, .72);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

    .auth-result-status-icon svg {
        width: 34px;
        height: 34px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: none;
    }

.auth-result-card.is-success .auth-success-svg,
.auth-result-card.is-warning .auth-warning-svg,
.auth-result-card.is-error .auth-error-svg {
    display: block;
}

.auth-result-status-text h2 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
}

.auth-result-status-text p {
    margin: 0;
    color: #525b68;
    font-size: 11px;
    line-height: 1.8;
}

.auth-product-content {
    padding: 15px;
}

.auth-product-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-product-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--app-card-radius);
    background: var(--auth-primary-soft);
    color: var(--auth-primary);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

    .auth-product-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-product-heading h3 {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
}

.auth-product-heading p {
    margin: 0;
    color: var(--auth-muted);
    font-size: 10px;
    direction: ltr;
    text-align: right;
}

.auth-match-badge {
    margin-top: 12px;
    display: flex;
}

    .auth-match-badge span {
        display: inline-flex;
        min-height: 26px;
        padding: 4px 9px;
        border: 1px solid var(--auth-border);
        border-radius: var(--app-card-radius);
        background: #f7f8fa;
        color: #576170;
        font-size: 10px;
        align-items: center;
    }

.auth-info-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.auth-info-item {
    min-height: 61px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 9px 10px;
}

.auth-info-wide {
    grid-column: 1 / -1;
}

.auth-info-item > span {
    display: block;
    margin-bottom: 5px;
    color: var(--auth-muted);
    font-size: 9px;
}

.auth-info-item strong {
    display: block;
    color: var(--auth-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    overflow-wrap: anywhere;
    direction: ltr;
    text-align: right;
}

.auth-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .auth-copy-row strong {
        flex: 1;
    }

.auth-copy-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--auth-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .auth-copy-btn svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-description-box,
.auth-dimensions-box {
    margin-top: 10px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    padding: 11px;
}

    .auth-description-box > span {
        display: block;
        margin-bottom: 5px;
        color: var(--auth-muted);
        font-size: 9px;
    }

    .auth-description-box p {
        margin: 0;
        font-size: 11px;
        line-height: 1.9;
    }

.auth-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    font-size: 11px;
    font-weight: 600;
}

    .auth-section-title svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: var(--auth-primary);
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.auth-dimension-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

    .auth-dimension-list div {
        background: #f7f8fa;
        border-radius: var(--app-card-radius);
        padding: 8px 5px;
        text-align: center;
    }

    .auth-dimension-list span,
    .auth-dimension-list strong {
        display: block;
    }

    .auth-dimension-list span {
        color: var(--auth-muted);
        font-size: 8px;
        margin-bottom: 3px;
    }

    .auth-dimension-list strong {
        font-size: 9px;
        font-weight: 600;
        direction: ltr;
    }

.auth-sync-note {
    margin-top: 10px;
    padding: 9px 10px;
    border-radius: var(--app-card-radius);
    background: #f7f8fa;
    color: var(--auth-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
}

    .auth-sync-note svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .auth-sync-note strong {
        color: var(--auth-text);
        font-weight: 600;
    }

.auth-result-actions {
    padding: 0 15px 15px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.auth-secondary-btn,
.auth-report-btn {
    min-height: 43px;
    border-radius: var(--app-card-radius);
    padding: 9px 12px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.auth-secondary-btn {
    border: 1px solid var(--auth-border);
    background: #fff;
    color: var(--auth-text);
}

.auth-report-btn {
    border: 1px solid rgba(215, 45, 63, .22);
    background: var(--auth-danger-soft);
    color: var(--auth-danger);
}

.auth-scanner-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.auth-scanner-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 17, 27, .66);
}

.auth-scanner-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 5px 5px 0 0;
    padding: 15px;
    animation: authSlideUp .25s ease;
}

.auth-scanner-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

    .auth-scanner-header > div {
        flex: 1;
    }

    .auth-scanner-header h3 {
        margin: 0 0 3px;
        font-size: 14px;
        font-weight: 600;
    }

    .auth-scanner-header p {
        margin: 0;
        color: var(--auth-muted);
        font-size: 10px;
    }

.auth-scanner-close {
    width: 35px;
    height: 35px;
    border: 1px solid var(--auth-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--auth-text);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .auth-scanner-close svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
    }

.auth-camera-box {
    position: relative;
    aspect-ratio: 3 / 4;
    max-height: 65vh;
    overflow: hidden;
    border-radius: var(--app-card-radius);
    background: #111827;
}

    .auth-camera-box video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.auth-camera-frame {
    position: absolute;
    width: min(78%, 310px);
    height: 145px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .auth-camera-frame > span {
        position: absolute;
        width: 35px;
        height: 35px;
        border-color: #fff;
        border-style: solid;
    }

        .auth-camera-frame > span:nth-child(1) {
            top: 0;
            right: 0;
            border-width: 3px 3px 0 0;
        }

        .auth-camera-frame > span:nth-child(2) {
            top: 0;
            left: 0;
            border-width: 3px 0 0 3px;
        }

        .auth-camera-frame > span:nth-child(3) {
            right: 0;
            bottom: 0;
            border-width: 0 3px 3px 0;
        }

        .auth-camera-frame > span:nth-child(4) {
            left: 0;
            bottom: 0;
            border-width: 0 0 3px 3px;
        }

.auth-camera-line {
    position: absolute;
    right: 4px;
    left: 4px;
    height: 2px;
    background: var(--auth-primary);
    box-shadow: 0 0 9px rgba(217, 4, 41, .65);
    animation: authScanLine 1.8s ease-in-out infinite;
}

.auth-camera-message {
    position: absolute;
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 9px;
    border-radius: var(--app-card-radius);
    background: rgba(0, 0, 0, .58);
    color: #fff;
    text-align: center;
    font-size: 10px;
}

.auth-scanner-cancel {
    width: 100%;
    margin-top: 10px;
}

[hidden] {
    display: none !important;
}

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

@keyframes authSkeleton {
    to {
        transform: translateX(-100%);
    }
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes authScanLine {
    0%, 100% {
        top: 4px;
    }

    50% {
        top: calc(100% - 6px);
    }
}

@media (min-width: 768px) {
    .auth-content {
        max-width: 680px;
        margin: 0 auto;
    }

    .auth-scanner-sheet {
        width: 460px;
        right: 50%;
        left: auto;
        transform: translateX(50%);
        bottom: 20px;
        border-radius: var(--app-card-radius);
    }
}

.vehicle-tracking-page {
    min-height: 100%;
    padding: 0 0 90px;
    direction: rtl;
}

.vehicle-tracking-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 10px 14px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    grid-auto-flow: column;
    direction: ltr;
    text-align: right;
}

    .vehicle-tracking-header > div {
        min-width: 0;
    }

    .vehicle-tracking-header strong {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--app-text);
    }

    .vehicle-tracking-header span {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        color: var(--app-muted);
    }

    .vehicle-tracking-header svg,
    .vehicle-tracking-empty svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vehicle-tracking-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 14px 4px;
    scrollbar-width: none;
}

    .vehicle-tracking-tabs::-webkit-scrollbar {
        display: none;
    }

.vehicle-tracking-tab {
    flex: 0 0 auto;
    min-width: 150px;
    padding: 10px;
    text-align: right;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
    color: var(--app-text);
}

    .vehicle-tracking-tab.active {
        border-color: var(--app-primary);
        box-shadow: 0 0 0 2px var(--app-primary-soft);
    }

    .vehicle-tracking-tab strong,
    .vehicle-tracking-tab span {
        display: block;
    }

    .vehicle-tracking-tab strong {
        font-size: 13px;
        font-weight: 600;
    }

    .vehicle-tracking-tab span {
        margin-top: 5px;
        font-size: 10px;
        color: var(--app-muted);
    }

.vehicle-tracking-hero,
.vehicle-tracking-card {
    margin: 12px 14px 0;
    padding: 14px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-card-radius);
}

.vehicle-tracking-hero {
    position: relative;
    overflow: hidden;
}

    .vehicle-tracking-hero::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--app-primary);
    }

.vehicle-tracking-vehicle {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 10px;
}

.vehicle-tracking-car-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

    .vehicle-tracking-car-icon svg {
        width: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
    }

.vehicle-tracking-vehicle h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.vehicle-tracking-vehicle p {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--app-muted);
}

.vehicle-tracking-status {
    padding: 6px 8px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
    color: var(--app-primary-dark);
    font-size: 10px;
    font-weight: 600;
}

.vehicle-tracking-progress {
    margin-top: 16px;
}

.vehicle-tracking-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--app-muted);
}

.vehicle-tracking-progress-bar {
    height: 7px;
    margin-top: 7px;
    overflow: hidden;
    background: var(--app-surface-2);
    border-radius: var(--app-card-radius);
}

    .vehicle-tracking-progress-bar span {
        display: block;
        height: 100%;
        background: var(--app-primary);
        transition: width .35s ease;
    }

.vehicle-tracking-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.vehicle-tracking-info {
    min-width: 0;
    padding: 9px;
    background: var(--app-surface-2);
    border-radius: var(--app-card-radius);
}

    .vehicle-tracking-info span,
    .vehicle-tracking-info strong {
        display: block;
    }

    .vehicle-tracking-info span {
        font-size: 10px;
        color: var(--app-muted);
    }

    .vehicle-tracking-info strong {
        margin-top: 5px;
        overflow: hidden;
        font-size: 11px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.vehicle-tracking-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

    .vehicle-tracking-card-title strong {
        font-size: 13px;
        font-weight: 600;
    }

    .vehicle-tracking-card-title span {
        font-size: 10px;
        color: var(--app-muted);
    }

.vehicle-tracking-timeline {
    position: relative;
}

.vehicle-tracking-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 9px;
    padding-bottom: 16px;
}

    .vehicle-tracking-step:last-child {
        padding-bottom: 0;
    }

    .vehicle-tracking-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 27px;
        right: 13px;
        bottom: 0;
        width: 2px;
        background: var(--app-border);
    }

    .vehicle-tracking-step.done:not(:last-child)::after {
        background: var(--app-primary);
    }

.vehicle-tracking-step-dot {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 2px solid var(--app-border);
    border-radius: 50%;
    background: var(--app-surface);
    color: var(--app-muted);
    font-size: 10px;
}

.vehicle-tracking-step.done .vehicle-tracking-step-dot,
.vehicle-tracking-step.current .vehicle-tracking-step-dot {
    border-color: var(--app-primary);
    background: var(--app-primary);
    color: white;
}

.vehicle-tracking-step.current .vehicle-tracking-step-dot {
    box-shadow: 0 0 0 5px var(--app-primary-soft);
}

.vehicle-tracking-step-body {
    padding-top: 3px;
}

    .vehicle-tracking-step-body strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
    }

    .vehicle-tracking-step-body span {
        display: block;
        margin-top: 4px;
        font-size: 10px;
        color: var(--app-muted);
    }

.vehicle-tracking-list {
    display: grid;
    gap: 8px;
}

.vehicle-tracking-list-item {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 9px;
    background: var(--app-surface-2);
    border-radius: var(--app-card-radius);
}

.vehicle-tracking-list-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
    color: var(--app-primary);
}

.vehicle-tracking-list-item strong,
.vehicle-tracking-list-item span {
    display: block;
}

.vehicle-tracking-list-item strong {
    font-size: 11px;
    font-weight: 600;
}

.vehicle-tracking-list-item span {
    margin-top: 3px;
    font-size: 9px;
    color: var(--app-muted);
}

.vehicle-tracking-list-price {
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.vehicle-tracking-empty {
    margin: 18px 14px;
    padding: 30px 18px;
    text-align: center;
    background: var(--app-surface);
    border: 1px dashed var(--app-border);
    border-radius: var(--app-card-radius);
}

    .vehicle-tracking-empty svg {
        width: 54px;
        color: var(--app-muted);
    }

    .vehicle-tracking-empty strong,
    .vehicle-tracking-empty span {
        display: block;
    }

    .vehicle-tracking-empty strong {
        margin-top: 12px;
        font-size: 14px;
        font-weight: 600;
    }

    .vehicle-tracking-empty span {
        margin-top: 7px;
        font-size: 11px;
        line-height: 1.9;
        color: var(--app-muted);
    }

.vehicle-tracking-loading {
    margin: 14px;
}

.vehicle-tracking-skeleton {
    height: 110px;
    margin-bottom: 10px;
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg, var(--app-surface-2), var(--app-surface), var(--app-surface-2));
    background-size: 200% 100%;
    animation: vehicleTrackingSkeleton 1.2s infinite;
}

@keyframes vehicleTrackingSkeleton {
    to {
        background-position: -200% 0;
    }
}

.business-profile-page {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f5f6f8;
    direction: rtl;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .22s ease,transform .22s ease
}

    .business-profile-page.is-open {
        opacity: 1;
        transform: translateY(0)
    }

    .business-profile-page.is-closing {
        opacity: 0;
        transform: translateY(14px)
    }

.business-profile-shell {
    width: 100%;
    height: 100%;
    max-width: 720px;
    margin: 0 auto;
    background: #f6f7f9;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 40px rgba(15,23,42,.12)
}

.business-profile-topbar {
    height: 58px;
    min-height: 58px;
    padding: 0 12px;
    display: grid;
    grid-template-columns: 88px 1fr 88px;
    align-items: center;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e8ebef;
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 5;
    direction: ltr;
    text-align: right;
}

.business-profile-topbar-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111827
}

.business-profile-topbar-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-start;
    width: 88px;
}

.business-profile-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #e4e7ec;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #1f2937;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer
}

    .business-profile-icon-btn.active {
        background: rgba(217,4,41,.06);
        border-color: rgba(217,4,41,.2);
        fill: var(--app-danger);
        color: var(--app-danger);
        stroke: var(--app-danger);
    }

.business-profile-content {
    flex: 1;
    overflow: auto;
    padding-bottom: 92px;
    scrollbar-width: none
}

    .business-profile-content::-webkit-scrollbar {
        display: none
    }

.business-profile-hero {
    position: relative;
    height: 300px;
    overflow: hidden;
    background: #dfe3e8
}

.business-profile-main-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.business-profile-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(7,12,22,.84) 100%)
}

.business-profile-badges {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.business-profile-badge {
    height: 30px;
    padding: 0 9px;
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.92);
    color: #111827;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(8px)
}

    .business-profile-badge.verified {
        color: #076c3a
    }

    .business-profile-badge.onsite {
        color: #2453a6
    }

.business-profile-hero-info {
    position: absolute;
    right: 16px;
    left: 16px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff
}

.business-profile-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--app-card-radius);
    background: #fff;
    border: 3px solid rgba(255,255,255,.75);
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    flex: 0 0 64px
}

    .business-profile-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.business-profile-heading {
    min-width: 0
}

    .business-profile-heading h1 {
        margin: 0 0 6px;
        font-size: 22px;
        line-height: 1.4;
        font-weight: 600
    }

    .business-profile-heading p {
        margin: 0;
        font-size: 12px;
        color: rgba(255,255,255,.84)
    }

.business-profile-gallery {
    background: #fff;
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-bottom: 1px solid #e9ecf0;
    scrollbar-width: none
}

    .business-profile-gallery::-webkit-scrollbar {
        display: none
    }

.business-profile-gallery-item {
    width: 72px;
    height: 56px;
    flex: 0 0 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--app-card-radius);
    overflow: hidden;
    background: #eef1f4;
    cursor: pointer
}

    .business-profile-gallery-item.active {
        border-color: var(--primary-dark)
    }

    .business-profile-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.business-profile-summary {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: 12px;
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: var(--app-card-radius);
    overflow: hidden
}

.business-profile-summary-item {
    padding: 14px 8px;
    text-align: center;
    min-width: 0
}

    .business-profile-summary-item + .business-profile-summary-item {
        border-right: 1px solid #edf0f3
    }

    .business-profile-summary-item strong {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

        .business-profile-summary-item strong.is-open {
            color: #08783f
        }

        .business-profile-summary-item strong.is-closed {
            color: #b42318
        }

    .business-profile-summary-item span {
        font-size: 10px;
        color: #7b8492;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        line-height: 1.6
    }

.business-profile-actions {
    margin: 0 12px 12px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

.business-profile-action {
    min-width: 0;
    padding: 12px 8px;
    border: 1px solid #e5e8ed;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #283142;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    cursor: pointer
}

    .business-profile-action.primary {
        color: var(--primary-dark);
        background: rgba(217,4,41,.04);
        border-color: rgba(217,4,41,.18)
    }

    .business-profile-action:disabled, .business-profile-action[data-disabled] {
        opacity: .45;
        pointer-events: none
    }

    .business-profile-action > span {
        min-width: 0
    }

    .business-profile-action strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 3px
    }

    .business-profile-action small {
        display: block;
        font-size: 9px;
        color: #8b94a2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px
    }

.business-profile-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: #fff;
    border-top: 1px solid #e9ecf0;
    border-bottom: 1px solid #e9ecf0;
    padding: 0 8px
}

    .business-profile-tabs button {
        height: 48px;
        border: 0;
        background: none;
        color: #77808e;
        font-size: 12px;
        position: relative;
        cursor: pointer
    }

        .business-profile-tabs button.active {
            color: var(--primary-dark);
            font-weight: 600
        }

            .business-profile-tabs button.active:after {
                content: "";
                position: absolute;
                right: 16%;
                left: 16%;
                bottom: 0;
                height: 3px;
                background: var(--primary-dark);
                border-radius: 3px 3px 0 0
            }

        .business-profile-tabs button span {
            font-size: 9px;
            background: #f0f2f5;
            padding: 1px 5px;
            border-radius: var(--app-card-radius);
            margin-right: 3px
        }

.business-profile-tab-panels {
    padding: 12px
}

.business-profile-panel {
    display: none
}

    .business-profile-panel.active {
        display: block;
        animation: businessFade .18s ease
    }

@keyframes businessFade {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.business-profile-section {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: var(--app-card-radius);
    padding: 14px;
    margin-bottom: 10px
}

.business-profile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px
}

    .business-profile-section-title > div {
        display: flex;
        align-items: center;
        gap: 7px
    }

    .business-profile-section-title h2 {
        font-size: 14px;
        font-weight: 600;
        margin: 0;
        color: #182131
    }

.business-profile-description {
    margin: 0;
    color: #586273;
    font-size: 12px;
    line-height: 2;
    text-align: justify
}

.business-profile-facilities {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px
}

.business-profile-facility {
    min-height: 42px;
    border: 1px solid #edf0f3;
    background: #fafbfc;
    border-radius: var(--app-card-radius);
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #3d4757;
    font-size: 11px
}

.business-profile-service-grid {
    display: grid;
    gap: 4px
}

.business-profile-service-card {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: var(--app-card-radius);
    padding: 5px 5px;
    display: flex;
    gap: 11px;
    align-items: flex-start;
}

.business-profile-service-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: var(--app-card-radius);
    background: rgba(217,4,41,.07);
    color: var(--primary-dark);
    display: grid;
    place-items: center
}

.business-profile-service-content {
    min-width: 0;
    flex: 1
}

    .business-profile-service-content h3 {
        margin: 0 0 5px;
        font-size: 13px;
        font-weight: 600;
        color: #17202e
    }

    .business-profile-service-content p {
        margin: 0;
        color: #7d8694;
        font-size: 10px;
        line-height: 1.7
    }

    .business-profile-service-content span {
        display: inline-block;
        margin-top: 7px;
        color: var(--primary-dark);
        font-size: 10px;
        font-weight: 600
    }

.business-profile-hours {
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: var(--app-card-radius);
    overflow: hidden
}

.business-profile-hour-row {
    min-height: 54px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f3
}

    .business-profile-hour-row:last-child {
        border-bottom: 0
    }

    .business-profile-hour-row.today {
        background: rgba(217,4,41,.035)
    }

    .business-profile-hour-row div {
        display: flex;
        align-items: center;
        gap: 7px
    }

    .business-profile-hour-row strong {
        font-size: 12px;
        font-weight: 300;
        color: #2a3444
    }

    .business-profile-hour-row span {
        font-size: 9px;
        color: var(--primary-dark);
        background: rgba(217,4,41,.08);
        padding: 3px 6px;
        border-radius: 5px
    }

    .business-profile-hour-row p {
        margin: 0;
        font-size: 11px;
        color: #5e6877
    }

        .business-profile-hour-row p.closed {
            color: #b42318
        }

.business-profile-contact-list {
    display: grid;
    gap: 8px
}

.business-profile-contact-item {
    width: 100%;
    min-height: 64px;
    background: #fff;
    border: 1px solid #e7eaf0;
    border-radius: var(--app-card-radius);
    padding: 10px 12px;
    color: #293344;
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    gap: 9px;
    align-items: center;
    text-align: right;
    text-decoration: none;
    cursor: pointer
}

    .business-profile-contact-item:disabled {
        opacity: .5
    }

    .business-profile-contact-item > div {
        min-width: 0
    }

    .business-profile-contact-item strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px
    }

    .business-profile-contact-item span {
        display: block;
        font-size: 10px;
        color: #7a8492;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.business-profile-empty {
    background: #fff;
    border: 1px dashed #d9dde4;
    border-radius: var(--app-card-radius);
    padding: 28px 16px;
    text-align: center;
    color: #7c8593;
    font-size: 12px
}

.business-profile-bottom {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 74px;
    background: rgba(255,255,255,.96);
    border-top: 1px solid #e4e7ec;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 8px;
    backdrop-filter: blur(12px);
    z-index: 6
}

    .business-profile-bottom button {
        border-radius: var(--app-card-radius);
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        cursor: pointer
    }

.business-profile-bottom-secondary {
    background: var(--app-secondary);
    border: 1px solid #dfe3e8;
    color: #293344;
}

.business-profile-bottom-primary {
    background: var(--primary-dark);
    border: 1px solid var(--primary-dark);
    color: #fff
}

.business-profile-bottom button:disabled {
    opacity: .45
}

.business-svg {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 20px
}

    .business-svg svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.business-profile-summary-item .business-svg {
    width: 14px;
    height: 14px
}

.business-profile-badge .business-svg {
    width: 15px;
    height: 15px
}

.business-profile-icon-btn .business-svg {
    width: 19px;
    height: 19px
}

.business-profile-action > .business-svg, .business-profile-bottom .business-svg {
    width: 22px;
    height: 22px
}

.business-profile-service-icon .business-svg {
    width: 23px;
    height: 23px
}

.business-profile-loading {
    height: 100%;
    background: #fff
}

.business-profile-loading-cover {
    height: 300px;
    background: linear-gradient(90deg,#eef0f3 25%,#f7f8fa 37%,#eef0f3 63%);
    background-size: 400% 100%;
    animation: businessShimmer 1.3s infinite
}

.business-profile-loading-body {
    padding: 18px
}

    .business-profile-loading-body span {
        display: block;
        height: 58px;
        margin-bottom: 12px;
        border-radius: var(--app-card-radius);
        background: linear-gradient(90deg,#eef0f3 25%,#f7f8fa 37%,#eef0f3 63%);
        background-size: 400% 100%;
        animation: businessShimmer 1.3s infinite
    }

@keyframes businessShimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

.business-profile-error {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: #fff
}

    .business-profile-error > .business-svg {
        width: 54px;
        height: 54px;
        color: #b42318;
        margin-bottom: 12px
    }

    .business-profile-error h3 {
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 8px;
        color: #1b2432
    }

    .business-profile-error p {
        font-size: 11px;
        line-height: 1.8;
        color: #788291;
        max-width: 380px;
        margin: 0 0 16px
    }

@media(min-width:721px) {
    .business-profile-page {
        padding: 18px
    }

    .business-profile-shell {
        height: calc(100vh - 36px);
        border-radius: var(--app-card-radius);
        overflow: hidden
    }

    .business-profile-hero {
        height: 330px
    }
}

@media(max-width:420px) {
    .business-profile-hero {
        height: 270px
    }

    .business-profile-summary {
        grid-template-columns: 1fr
    }

    .business-profile-summary-item + .business-profile-summary-item {
        border-right: 0;
        border-top: 1px solid #edf0f3
    }

    .business-profile-actions {
        grid-template-columns: 1fr 1fr
    }

        .business-profile-actions .business-profile-action:last-child {
            grid-column: 1/-1
        }

    .business-profile-facilities {
        grid-template-columns: 1fr
    }
}

.sa-page {
    --sa-primary: var(--primary-dark,#b70322);
    --sa-soft: rgba(217,4,41,.07);
    --sa-border: #e5e7eb;
    --sa-text: #111827;
    --sa-muted: #6b7280;
    min-height: 100%;
    padding-bottom: 104px;
    background: #f8fafc;
    color: var(--sa-text)
}

    .sa-page * {
        box-sizing: border-box
    }

    .sa-page button, .sa-page input, .sa-page textarea {
        font: inherit
    }

.sa-hidden {
    display: none !important
}

.sa-page svg {
    width: 22px;
    height: 22px;
    display: block
}

.sa-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--sa-border);
    backdrop-filter: blur(12px)
}

.sa-header-title {
    text-align: center;
    min-width: 0
}

    .sa-header-title strong {
        display: block;
        font-size: 15px;
        font-weight: 600
    }

    .sa-header-title span {
        display: block;
        margin-top: 2px;
        font-size: 10px;
        color: var(--sa-muted)
    }

.sa-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #374151;
    display: grid;
    place-items: center;
    cursor: pointer
}

.sa-progress {
    max-width: 760px;
    margin: 18px auto 12px;
    padding: 0 18px;
    display: flex;
    align-items: center
}

    .sa-progress > span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #9ca3af;
        white-space: nowrap
    }

        .sa-progress > span b {
            width: 28px;
            height: 28px;
            border: 1px solid #d1d5db;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 11px;
            font-weight: 600;
            background: #fff
        }

        .sa-progress > span em {
            font-style: normal;
            font-size: 11px
        }

    .sa-progress > i {
        height: 1px;
        flex: 1;
        background: #e5e7eb;
        margin: 0 10px
    }

    .sa-progress > span.active {
        color: var(--sa-primary)
    }

        .sa-progress > span.active b {
            border-color: var(--sa-primary);
            background: var(--sa-soft)
        }

    .sa-progress > span.current b {
        background: var(--sa-primary);
        color: #fff
    }

.sa-content, .sa-loading, .sa-error {
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 14px
}

.sa-selection-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px
}

.sa-select-card {
    position: relative;
    width: 100%;
    min-height: 104px;
    padding: 14px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    text-align: right;
    display: grid;
    grid-template-columns: 48px 1fr 22px;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: .18s ease
}

    .sa-select-card:hover {
        border-color: rgba(217,4,41,.32);
        box-shadow: 0 10px 24px rgba(15,23,42,.06);
        transform: translateY(-1px)
    }

    .sa-select-card.selected {
        border-color: rgba(217,4,41,.45);
        background: linear-gradient(180deg,var(--sa-soft),#fff)
    }

.sa-select-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--app-card-radius);
    background: var(--sa-soft);
    color: var(--sa-primary);
    display: grid;
    place-items: center;
    overflow: hidden
}

    .sa-select-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sa-select-text {
    min-width: 0
}

    .sa-select-text small {
        display: block;
        color: var(--sa-muted);
        font-size: 10px;
        margin-bottom: 5px
    }

    .sa-select-text strong {
        display: block;
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .sa-select-text em {
        display: block;
        margin-top: 5px;
        font-size: 10px;
        color: var(--sa-muted);
        font-style: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.sa-select-arrow {
    color: #9ca3af
}

.sa-panel {
    background: #fff;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    padding: 16px;
    margin-bottom: 12px
}

.sa-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px
}

    .sa-panel-head small {
        display: block;
        color: var(--sa-primary);
        font-size: 10px;
        margin-bottom: 3px
    }

    .sa-panel-head h2 {
        font-size: 14px;
        font-weight: 600;
        margin: 0
    }

.sa-panel-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--app-card-radius);
    background: var(--sa-soft);
    color: var(--sa-primary);
    display: grid;
    place-items: center
}

    .sa-panel-icon svg {
        width: 19px;
        height: 19px
    }

.sa-days {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 2px 1px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none
}

    .sa-days::-webkit-scrollbar {
        display: none
    }

.sa-day {
    position: relative;
    min-width: 104px;
    min-height: 134px;
    padding: 25px 10px 10px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    scroll-snap-align: start;
    color: var(--sa-text)
}

    .sa-day:hover {
        border-color: rgba(217,4,41,.35)
    }

    .sa-day.active {
        border-color: var(--sa-primary);
        background: linear-gradient(180deg,var(--sa-soft),#fff);
        box-shadow: 0 0 0 2px rgba(217,4,41,.06)
    }

.sa-day-week {
    font-size: 10px;
    color: var(--sa-muted)
}

.sa-day > strong {
    font-size: 27px;
    line-height: 1.1;
    font-weight: 600
}

.sa-day > span:not(.sa-day-week):not(.sa-best-badge) {
    font-size: 10px;
    color: #4b5563
}

.sa-day > em {
    font-style: normal;
    font-size: 9px;
    color: #059669;
    margin-top: 8px
}

    .sa-day > em i {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #10b981;
        margin-left: 4px
    }

.sa-day > b {
    position: absolute;
    left: 7px;
    bottom: 7px;
    width: 18px;
    height: 18px;
    color: var(--sa-primary)
}

    .sa-day > b svg {
        width: 18px;
        height: 18px
    }

.sa-best-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    padding: 5px;
    border-radius: 5px 5px 0 0;
    background: #111827;
    color: #fff !important;
    font-size: 8px !important
}

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

.sa-slot {
    position: relative;
    min-height: 76px;
    padding: 12px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    display: grid;
    grid-template-columns: 38px 1fr 22px;
    align-items: center;
    gap: 10px;
    text-align: right;
    cursor: pointer;
    color: var(--sa-text)
}

    .sa-slot:hover {
        border-color: rgba(217,4,41,.32)
    }

    .sa-slot.active {
        border-color: var(--sa-primary);
        background: var(--sa-soft)
    }

    .sa-slot > span {
        width: 38px;
        height: 38px;
        border-radius: var(--app-card-radius);
        background: #f3f4f6;
        color: #4b5563;
        display: grid;
        place-items: center
    }

    .sa-slot.active > span {
        background: #fff;
        color: var(--sa-primary)
    }

    .sa-slot > div strong {
        display: block;
        font-size: 12px;
        font-weight: 600
    }

    .sa-slot > div small {
        display: block;
        color: var(--sa-muted);
        font-size: 9px;
        margin-top: 4px
    }

    .sa-slot > em {
        position: absolute;
        top: 5px;
        left: 7px;
        font-size: 8px;
        font-style: normal;
        color: var(--sa-primary)
    }

    .sa-slot > b {
        color: #9ca3af
    }

    .sa-slot.active > b {
        color: var(--sa-primary)
    }

 

.sa-field > span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 7px
}

    .sa-field > span small {
        font-weight: 300;
        color: var(--sa-muted)
    }

.sa-input-wrap {
    position: relative
}

    .sa-input-wrap input, .sa-field textarea {
        width: 100%;
        border: 1px solid var(--sa-border);
        border-radius: var(--app-card-radius);
        background: #fff;
        color: var(--sa-text);
        outline: none
    }

    .sa-input-wrap input {
        height: 46px;
        padding: 0 12px 0 62px
    }

    .sa-input-wrap em {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-style: normal;
        font-size: 9px;
        color: var(--sa-muted)
    }

.sa-field textarea {
    resize: vertical;
    padding: 11px 12px;
    min-height: 96px
}

    .sa-input-wrap input:focus, .sa-field textarea:focus {
        border-color: rgba(217,4,41,.55);
        box-shadow: 0 0 0 3px rgba(217,4,41,.06)
    }

.sa-field > b {
    display: block;
    text-align: left;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 9px;
    font-weight: 400
}

.sa-summary {
    background: #111827;
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 15px;
    margin-bottom: 8px
}

.sa-summary-head {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .sa-summary-head > span {
        width: 34px;
        height: 34px;
        border-radius: var(--app-card-radius);
        background: rgba(255,255,255,.1);
        display: grid;
        place-items: center
    }

    .sa-summary-head > div small {
        display: block;
        color: #9ca3af;
        font-size: 9px
    }

    .sa-summary-head > div strong {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        font-weight: 600
    }

.sa-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 8px;
    padding-top: 12px
}

    .sa-summary-grid > div {
        min-width: 0
    }

    .sa-summary-grid small {
        display: block;
        color: #9ca3af;
        font-size: 8px;
        margin-bottom: 4px
    }

    .sa-summary-grid strong {
        display: block;
        font-size: 10px;
        font-weight: 300;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

.sa-bottom-bar {
    position: absolute;
    z-index: 9999;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--sa-border);
    box-shadow: 0 -8px 24px rgba(15,23,42,.06);
    transform: translateX(0%);
    width: auto;
}
    .sa-bottom-bar > div {
        min-width: 0
    }

    .sa-bottom-bar small {
        display: block;
        font-size: 9px;
        color: var(--sa-muted)
    }

    .sa-bottom-bar strong {
        display: block;
        font-size: 11px;
        font-weight: 600;
        margin-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.sa-primary-btn {
    height: 46px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--sa-primary);
    color: #fff;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap
}

    .sa-primary-btn:disabled {
        opacity: .65;
        cursor: default
    }

    .sa-primary-btn svg {
        width: 17px;
        height: 17px
    }

.sa-picker {
    position: fixed;
    inset: 0;
    z-index: 999999
}

.sa-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.48);
    backdrop-filter: blur(3px)
}

.sa-picker-card {
    position: absolute;
    right: 50%;
    transform: translateX(50%);
    bottom: 0;
    width: min(680px,100%);
    max-height: 88vh;
    border-radius: 5px 5px 0 0;
    background: #fff;
    padding: 8px 14px 18px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -20px 50px rgba(15,23,42,.18)
}

.sa-picker-handle {
    width: 44px;
    height: 4px;
    border-radius: var(--app-card-radius);
    background: #d1d5db;
    margin: 0 auto 10px
}

.sa-picker-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px
}

    .sa-picker-head strong {
        display: block;
        font-size: 14px;
        font-weight: 600
    }

    .sa-picker-head span {
        display: block;
        font-size: 10px;
        color: var(--sa-muted);
        margin-top: 3px
    }

.sa-picker-search {
    height: 44px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 11px;
    margin-bottom: 10px
}

    .sa-picker-search svg {
        width: 18px;
        height: 18px;
        color: #9ca3af
    }

    .sa-picker-search input {
        border: 0;
        outline: 0;
        width: 100%;
        height: 100%;
        background: transparent
    }

.sa-picker-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sa-picker-item {
    width: 100%;
    min-height: 72px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 9px;
    display: grid;
    grid-template-columns: 52px 1fr 28px;
    align-items: center;
    gap: 10px;
    text-align: right;
    cursor: pointer
}

    .sa-picker-item:hover, .sa-picker-item.active {
        border-color: rgba(217,4,41,.4);
        background: var(--sa-soft)
    }

.sa-picker-image {
    width: 52px;
    height: 52px;
    border-radius: var(--app-card-radius);
    background: #f3f4f6;
    color: #4b5563;
    display: grid;
    place-items: center;
    overflow: hidden
}

    .sa-picker-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sa-picker-text {
    min-width: 0
}

    .sa-picker-text strong {
        display: block;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .sa-picker-text em {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 6px;
        font-size: 9px;
        color: var(--sa-muted);
        font-style: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

        .sa-picker-text em svg {
            width: 14px;
            height: 14px;
            flex: 0 0 auto
        }

.sa-picker-state {
    color: #9ca3af
}

.sa-picker-item.active .sa-picker-state {
    color: var(--sa-primary)
}

.sa-loading {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sa-skeleton, .sa-inline-loading span {
    background: linear-gradient(90deg,#eef1f5 25%,#f8fafc 37%,#eef1f5 63%);
    background-size: 400% 100%;
    animation: saShimmer 1.25s infinite
}

.sa-skeleton {
    height: 105px;
    border-radius: 5px
}

.sa-skeleton-wide {
    height: 112px
}

.sa-skeleton-tall {
    height: 220px
}

.sa-skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.sa-inline-loading {
    display: flex;
    gap: 8px
}

    .sa-inline-loading span {
        height: 120px;
        min-width: 100px;
        flex: 0 0 100px;
        border-radius: 5px
    }

.sa-error, .sa-empty {
    text-align: center;
    background: #fff;
    border: 1px solid var(--sa-border);
    border-radius: 5px
}

.sa-error {
    padding: 34px 18px;
    margin-top: 20px
}

.sa-error-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--sa-soft);
    color: var(--sa-primary);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-weight: 600
}

.sa-error strong, .sa-empty strong {
    font-size: 13px;
    font-weight: 600
}

.sa-error p, .sa-empty p {
    font-size: 10px;
    color: var(--sa-muted);
    line-height: 1.8
}

.sa-empty {
    grid-column: 1/-1;
    width: 100%;
    padding: 24px 12px
}

    .sa-empty > span {
        width: 42px;
        height: 42px;
        border-radius: var(--app-card-radius);
        background: #f3f4f6;
        color: #9ca3af;
        display: grid;
        place-items: center;
        margin: 0 auto 10px
    }

.sa-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: saSpin .7s linear infinite
}

@keyframes saShimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}

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

@media(max-width:640px) {
    .sa-selection-grid {
        grid-template-columns: 1fr
    }

    .sa-fields {
        grid-template-columns: 1fr
    }

    .sa-summary-grid {
        grid-template-columns: 1fr 1fr
    }

        .sa-summary-grid > div:last-child {
            grid-column: 1/-1
        }

    .sa-slots {
        grid-template-columns: 1fr
    }

    .sa-content, .sa-loading, .sa-error {
        padding-left: 10px;
        padding-right: 10px
    }

    .sa-progress > span em {
        display: none
    }

    .sa-progress > i {
        margin: 0 6px
    }

    .sa-bottom-bar {
        padding-left: 10px;
        padding-right: 10px
    }

    .sa-primary-btn {
        padding: 0 14px
    }
}

@media(min-width:900px) {
    .sa-page {
        min-height: 100vh
    }

    .sa-picker-card {
        bottom: 50%;
        transform: translate(50%,50%);
        border-radius: var(--app-card-radius);
        max-height: 78vh
    }

    .sa-bottom-bar {
        left: 50%;
        right: auto;
        width: 760px;
        transform: translateX(-50%);
        border: 1px solid var(--sa-border);
        border-bottom: 0;
        border-radius: 5px 5px 0 0
    }
}

.my-appointments-page {
    direction: rtl;
    min-height: 100%;
    padding-bottom: 88px;
    color: #172033;
    background: radial-gradient(circle at 92% 5%, rgba(217, 4, 41, .055), transparent 24%), linear-gradient(180deg, #fff 0, #f8fafc 260px, #f6f8fb 100%);
}

    .my-appointments-page *,
    .my-appointments-page *::before,
    .my-appointments-page *::after {
        box-sizing: border-box;
    }

    .my-appointments-page button,
    .my-appointments-page input {
        font: inherit;
    }

.my-appointments-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(16px);
}

    .my-appointments-header > div {
        min-width: 0;
        text-align: center;
    }

    .my-appointments-header h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .my-appointments-header p {
        margin: 4px 0 0;
        color: #718096;
        font-size: 11px;
    }

.my-appointments-icon-btn {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #e6eaf0;
    border-radius: var(--app-card-radius);
    color: #334155;
    background: #fff;
    cursor: pointer;
}

    .my-appointments-icon-btn svg,
    .my-appointments-primary-action svg,
    .my-appointments-floating svg,
    .my-appointments-search svg,
    .my-appointments-sheet button svg {
        width: 21px;
        height: 21px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-content {
    width: min(100%, 1120px);
    margin: 0 auto;
    padding: 16px;
}

.my-appointments-overview {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(220px, .7fr);
    align-items: stretch;
    min-height: 245px;
    overflow: hidden;
    border: 1px solid rgba(217, 4, 41, .12);
    border-radius: var(--app-card-radius);
    background: linear-gradient(125deg, #fff 0%, #fff 52%, rgba(217, 4, 41, .04) 100%);
    box-shadow: 0 22px 60px rgba(15, 23, 42, .08);
}

    .my-appointments-overview::after {
        content: "";
        position: absolute;
        inset: auto -70px -90px auto;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(217, 4, 41, .045);
    }

.my-appointments-overview-copy {
    position: relative;
    z-index: 2;
    padding: 32px;
}

.my-appointments-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-dark, #b70322);
    font-size: 11px;
    font-weight: 600;
}

    .my-appointments-eyebrow::before {
        content: "";
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }

.my-appointments-overview h2 {
    max-width: 590px;
    margin: 13px 0 10px;
    font-size: clamp(22px, 3vw, 33px);
    line-height: 1.55;
    font-weight: 600;
}

.my-appointments-overview p {
    max-width: 600px;
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 2;
}

.my-appointments-primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    margin-top: 20px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--app-card-radius);
    color: #fff;
    background: linear-gradient(135deg, var(--primary-dark, #b70322), #e31536);
    box-shadow: 0 12px 28px rgba(217, 4, 41, .23);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.my-appointments-overview-art {
    position: relative;
    min-height: 245px;
}

.my-appointments-art-orbit {
    position: absolute;
    border: 1px dashed rgba(217, 4, 41, .22);
    border-radius: 50%;
}

    .my-appointments-art-orbit.orbit-one {
        width: 230px;
        height: 230px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .my-appointments-art-orbit.orbit-two {
        width: 168px;
        height: 168px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.my-appointments-art-car {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 145px;
    height: 145px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(217, 4, 41, .12);
    border-radius: 50%;
    color: var(--primary-dark, #b70322);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 20px 50px rgba(15, 23, 42, .11);
}

    .my-appointments-art-car svg {
        width: 108px;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-art-badge {
    position: absolute;
    left: 16px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    color: #475569;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .09);
    font-size: 10px;
    font-weight: 600;
}

    .my-appointments-art-badge span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #16a34a;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, .10);
    }

.my-appointments-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 14px;
}

    .my-appointments-stats article {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 80px;
        padding: 14px;
        border: 1px solid #e8ebf0;
        border-radius: var(--app-card-radius);
        background: #fff;
    }

.my-appointments-stat-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--app-card-radius);
}

    .my-appointments-stat-icon svg {
        width: 23px;
        height: 23px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .my-appointments-stat-icon.active {
        color: #2563eb;
        background: #eff6ff;
    }

    .my-appointments-stat-icon.completed {
        color: #15803d;
        background: #f0fdf4;
    }

    .my-appointments-stat-icon.cancelled {
        color: #b91c1c;
        background: #fef2f2;
    }

.my-appointments-stats strong {
    display: block;
    font-size: 21px;
    font-weight: 600;
}

.my-appointments-stats span:not(.my-appointments-stat-icon) {
    display: block;
    margin-top: 3px;
    color: #788395;
    font-size: 10px;
}

.my-appointments-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.5fr);
    gap: 12px;
    margin: 18px 0 12px;
}

.my-appointments-search {
    display: grid;
    grid-template-columns: 22px 1fr 30px;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid #e2e7ee;
    border-radius: var(--app-card-radius);
    background: #fff;
}

    .my-appointments-search > svg {
        color: #8b96a8;
    }

    .my-appointments-search input {
        width: 100%;
        height: 46px;
        padding: 0 9px;
        border: 0;
        outline: 0;
        color: #1f2937;
        background: transparent;
        font-size: 12px;
    }

    .my-appointments-search button {
        display: none;
        place-items: center;
        width: 29px;
        height: 29px;
        padding: 0;
        border: 0;
        border-radius: var(--app-card-radius);
        color: #94a3b8;
        background: #f3f4f6;
        cursor: pointer;
    }

    .my-appointments-search.has-value button {
        display: grid;
    }

.my-appointments-filter-row {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding: 4px;
    border: 1px solid #e2e7ee;
    border-radius: var(--app-card-radius);
    background: #fff;
    scrollbar-width: none;
}

    .my-appointments-filter-row::-webkit-scrollbar {
        display: none;
    }

    .my-appointments-filter-row button {
        flex: 1 0 auto;
        min-width: 78px;
        height: 38px;
        padding: 0 13px;
        border: 0;
        border-radius: var(--app-card-radius);
        color: #64748b;
        background: transparent;
        cursor: pointer;
        font-size: 11px;
        font-weight: 300;
    }

        .my-appointments-filter-row button.active {
            color: #fff;
            background: var(--primary-dark, #b70322);
            box-shadow: 0 7px 18px rgba(217, 4, 41, .18);
        }

.my-appointments-notice {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(234, 179, 8, .25);
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg, #fffdf3, #fff);
}

.my-appointments-notice-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--app-card-radius);
    color: #b7791f;
    background: #fef3c7;
}

    .my-appointments-notice-icon svg {
        width: 21px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-notice strong,
.my-appointments-notice span {
    display: block;
}

.my-appointments-notice strong {
    font-size: 12px;
    font-weight: 600;
}

.my-appointments-notice div span {
    margin-top: 4px;
    color: #7c6b45;
    font-size: 10px;
}

.my-appointments-notice button {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid #e5c768;
    border-radius: var(--app-card-radius);
    color: #7c5d00;
    background: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
}

.my-appointments-list {
    display: grid;
    gap: 13px;
}

.my-appointment-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: var(--app-card-radius);
    background: #fff;
    box-shadow: 0 13px 34px rgba(15, 23, 42, .055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .my-appointment-card:hover {
        transform: translateY(-2px);
        border-color: rgba(217, 4, 41, .18);
        box-shadow: 0 18px 42px rgba(15, 23, 42, .085);
    }

    .my-appointment-card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: var(--status-color, #64748b);
    }

.my-appointment-card-main {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 178px;
    gap: 16px;
    padding: 17px;
}

.my-appointment-brand {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border: 1px solid #e6eaf0;
    border-radius: var(--app-card-radius);
    color: var(--status-color, #64748b);
    background: #f8fafc;
}

    .my-appointment-brand img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .my-appointment-brand svg {
        width: 42px;
        height: 42px;
        stroke: currentColor;
        stroke-width: 1.55;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .my-appointment-heading h3 {
        margin: 0;
        font-size: 15px;
        line-height: 1.75;
        font-weight: 600;
    }

.my-appointment-code {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    color: #64748b;
    background: #fafafa;
    font-size: 9px;
}

.my-appointment-location {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #7a8699;
    font-size: 10px;
}

    .my-appointment-location svg,
    .my-appointment-meta svg,
    .my-appointment-action svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointment-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.my-appointment-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid #edf0f4;
    border-radius: var(--app-card-radius);
    color: #4b5563;
    background: #fafbfc;
    font-size: 10px;
}

.my-appointment-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding-right: 15px;
    border-right: 1px solid #edf0f4;
}

.my-appointment-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--status-color) 22%, white);
    border-radius: var(--app-card-radius);
    color: var(--status-color);
    background: color-mix(in srgb, var(--status-color) 8%, white);
    font-size: 10px;
    font-weight: 600;
}

    .my-appointment-status::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: currentColor;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--status-color) 11%, transparent);
    }

.my-appointment-date {
    text-align: left;
}

    .my-appointment-date strong {
        display: block;
        font-size: 16px;
        font-weight: 600;
    }

    .my-appointment-date span {
        display: block;
        margin-top: 5px;
        color: #718096;
        font-size: 10px;
    }

.my-appointment-progress {
    padding: 0 17px 15px;
}

.my-appointment-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #64748b;
    font-size: 9px;
}

    .my-appointment-progress-head strong {
        color: var(--status-color);
        font-weight: 600;
    }

.my-appointment-progress-track {
    height: 5px;
    overflow: hidden;
    border-radius: var(--app-card-radius);
    background: #edf0f4;
}

    .my-appointment-progress-track span {
        display: block;
        width: var(--progress, 0%);
        height: 100%;
        border-radius: inherit;
        background: var(--status-color);
        transition: width .45s ease;
    }

.my-appointment-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 17px;
    border-top: 1px solid #edf0f4;
    background: #fcfcfd;
}

.my-appointment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e2e7ee;
    border-radius: var(--app-card-radius);
    color: #475569;
    background: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 300;
}

    .my-appointment-action.primary {
        margin-right: auto;
        border-color: var(--primary-dark, #b70322);
        color: #fff;
        background: var(--primary-dark, #b70322);
    }

.my-appointments-state {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 320px;
    padding: 30px;
    text-align: center;
}

.my-appointments-skeleton-card {
    width: 100%;
    height: 190px;
    border: 1px solid #e8ebef;
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg, #f1f3f6 25%, #fafafa 38%, #f1f3f6 63%);
    background-size: 400% 100%;
    animation: myAppointmentsSkeleton 1.25s ease infinite;
}

@keyframes myAppointmentsSkeleton {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: 0 0;
    }
}

.my-appointments-empty-illustration {
    display: grid;
    place-items: center;
    width: 190px;
    height: 150px;
    color: #b8c0cc;
}

    .my-appointments-empty-illustration svg {
        width: 175px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-state h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.my-appointments-state p {
    max-width: 430px;
    margin: 0;
    color: #718096;
    font-size: 11px;
    line-height: 1.9;
}

.my-appointments-state button {
    min-height: 42px;
    margin-top: 6px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--app-card-radius);
    color: #fff;
    background: var(--primary-dark, #b70322);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}

.my-appointments-error-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: var(--app-card-radius);
    color: #dc2626;
    background: #fef2f2;
}

    .my-appointments-error-icon svg {
        width: 30px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-floating {
    position: fixed;
    z-index: 18;
    left: max(18px, calc((100vw - 1120px) / 2 + 18px));
    bottom: 82px;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 47px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--app-card-radius);
    color: #fff;
    background: var(--primary-dark, #b70322);
    box-shadow: 0 15px 32px rgba(217, 4, 41, .27);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
}

.my-appointments-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
}

.my-appointments-sheet-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(3px);
}

.my-appointments-sheet-panel {
    position: absolute;
    inset: auto 0 0;
    max-height: min(88vh, 820px);
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, .18);
    animation: myAppointmentsSheetIn .23s ease;
}

@keyframes myAppointmentsSheetIn {
    from {
        transform: translateY(35px);
        opacity: 0;
    }

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

.my-appointments-sheet-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px 18px;
    border-bottom: 1px solid #e9edf2;
}

    .my-appointments-sheet-panel > header span,
    .my-appointments-sheet-panel > header strong {
        display: block;
    }

    .my-appointments-sheet-panel > header span {
        color: #8a94a4;
        font-size: 9px;
    }

    .my-appointments-sheet-panel > header strong {
        margin-top: 4px;
        font-size: 14px;
        font-weight: 600;
    }

    .my-appointments-sheet-panel > header button {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid #e5e7eb;
        border-radius: var(--app-card-radius);
        color: #64748b;
        background: #fff;
        cursor: pointer;
    }

.my-appointments-sheet-body {
    max-height: calc(min(88vh, 820px) - 68px);
    overflow-y: auto;
    padding: 18px;
}

.my-appointments-detail-hero {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid #e6eaf0;
    border-radius: var(--app-card-radius);
    background: #fafbfc;
}

.my-appointments-detail-logo {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    overflow: hidden;
    border: 1px solid #e4e8ee;
    border-radius: var(--app-card-radius);
    color: var(--status-color, #64748b);
    background: #fff;
}

    .my-appointments-detail-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .my-appointments-detail-logo svg {
        width: 34px;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.my-appointments-detail-hero h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.my-appointments-detail-hero p {
    margin: 6px 0 0;
    color: #718096;
    font-size: 10px;
}

.my-appointments-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-top: 12px;
}

.my-appointments-detail-item {
    padding: 12px;
    border: 1px solid #e8ebef;
    border-radius: var(--app-card-radius);
    background: #fff;
}

    .my-appointments-detail-item span,
    .my-appointments-detail-item strong {
        display: block;
    }

    .my-appointments-detail-item span {
        color: #8a94a4;
        font-size: 9px;
    }

    .my-appointments-detail-item strong {
        margin-top: 6px;
        font-size: 11px;
        line-height: 1.7;
        font-weight: 600;
    }

.my-appointments-timeline {
    margin-top: 16px;
    padding: 15px;
    border: 1px solid #e6eaf0;
    border-radius: var(--app-card-radius);
}

    .my-appointments-timeline h4 {
        margin: 0 0 14px;
        font-size: 12px;
        font-weight: 600;
    }

.my-appointments-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 10px;
    min-height: 56px;
}

    .my-appointments-timeline-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: 11px;
        top: 26px;
        bottom: 0;
        width: 2px;
        background: #e7eaf0;
    }

.my-appointments-timeline-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid #d9dee6;
    border-radius: 50%;
    color: #fff;
    background: #fff;
}

.my-appointments-timeline-item.done .my-appointments-timeline-dot,
.my-appointments-timeline-item.current .my-appointments-timeline-dot {
    border-color: var(--status-color, #16a34a);
    background: var(--status-color, #16a34a);
}

.my-appointments-timeline-dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.my-appointments-timeline-item strong {
    display: block;
    padding-top: 2px;
    font-size: 10px;
    font-weight: 600;
}

.my-appointments-timeline-item span {
    display: block;
    margin-top: 4px;
    color: #8a94a4;
    font-size: 9px;
}

.my-appointments-timeline-item time {
    padding-top: 3px;
    color: #8a94a4;
    font-size: 9px;
}

.my-appointments-detail-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

    .my-appointments-detail-actions button,
    .my-appointments-detail-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 41px;
        padding: 0 10px;
        border: 1px solid #e2e7ee;
        border-radius: var(--app-card-radius);
        color: #475569;
        background: #fff;
        text-decoration: none;
        cursor: pointer;
        font-size: 10px;
        font-weight: 600;
    }

.app-hidden {
    display: none !important;
}

@media (max-width: 760px) {
    .my-appointments-content {
        padding: 12px;
    }

    .my-appointments-overview {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .my-appointments-overview-copy {
        padding: 22px 18px;
    }

    .my-appointments-overview-art {
        min-height: 190px;
    }

    .my-appointments-art-orbit.orbit-one {
        width: 180px;
        height: 180px;
    }

    .my-appointments-art-orbit.orbit-two {
        width: 128px;
        height: 128px;
    }

    .my-appointments-art-car {
        width: 112px;
        height: 112px;
    }

        .my-appointments-art-car svg {
            width: 85px;
        }

    .my-appointments-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

        .my-appointments-stats article {
            display: grid;
            justify-items: center;
            gap: 7px;
            min-height: 102px;
            padding: 10px 5px;
            text-align: center;
        }

    .my-appointments-stat-icon {
        width: 40px;
        height: 40px;
    }

    .my-appointments-stats strong {
        font-size: 18px;
    }

    .my-appointments-toolbar {
        grid-template-columns: 1fr;
    }

    .my-appointment-card-main {
        grid-template-columns: 65px minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .my-appointment-brand {
        width: 65px;
        height: 65px;
    }

    .my-appointment-side {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        padding: 11px 0 0;
        border-top: 1px solid #edf0f4;
        border-right: 0;
    }

    .my-appointment-date {
        text-align: right;
    }

        .my-appointment-date strong {
            font-size: 14px;
        }

    .my-appointment-actions {
        overflow-x: auto;
    }

    .my-appointment-action {
        flex: 0 0 auto;
    }

        .my-appointment-action.primary {
            margin-right: 0;
            margin-left: auto;
        }

    .my-appointments-floating {
        display: flex;
    }

    .my-appointments-primary-action {
        display: none;
    }

    .my-appointments-detail-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 900px) {
    .my-appointments-sheet-panel {
        top: 50%;
        right: 50%;
        bottom: auto;
        width: min(720px, calc(100vw - 40px));
        max-height: 86vh;
        transform: translate(50%, -50%);
        border-radius: var(--app-card-radius);
        animation: myAppointmentsModalIn .22s ease;
    }

    @keyframes myAppointmentsModalIn {
        from {
            transform: translate(50%, calc(-50% + 20px));
            opacity: 0;
        }

        to {
            transform: translate(50%, -50%);
            opacity: 1;
        }
    }
}

/* فروشگاه قطعات - Page level only */
.store-page,
.store-product-page,
.store-cart-page,
.store-checkout-page,
.store-orders-page {
    direction: rtl;
    padding: 14px 14px 96px;
    color: var(--app-text, #18212f);
}

    .store-page *,
    .store-product-page *,
    .store-cart-page *,
    .store-checkout-page *,
    .store-orders-page * {
        box-sizing: border-box;
    }

.store-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.store-toolbar-title {
    flex: 1;
    min-width: 0;
}

    .store-toolbar-title h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .store-toolbar-title span {
        display: block;
        margin-top: 3px;
        color: var(--app-muted, #667085);
        font-size: 10px;
    }

.store-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--app-text, #18212f);
    display: grid;
    place-items: center;
    cursor: pointer;
}

    .store-icon-btn svg {
        width: 20px;
        height: 20px;
    }

.store-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--app-card-radius);
    padding: 18px;
    color: #fff;
    background: radial-gradient(circle at 8% 18%, rgba(255,255,255,.14), transparent 26%), linear-gradient(135deg, #111827 0%, #263b55 100%);
    box-shadow: 0 15px 35px rgba(17,24,39,.16);
}

.store-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 105px;
    align-items: center;
    gap: 10px;
}

.store-hero-badge {
    display: inline-flex;
    width: max-content;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--app-card-radius);
    color: #eaf2ff;
    font-size: 9px;
}

.store-hero h2 {
    margin: 9px 0 4px;
    font-size: 21px;
    line-height: 1.7;
    font-weight: 600;
}

.store-hero p {
    margin: 0;
    max-width: 430px;
    color: #dbe6f5;
    font-size: 10px;
    line-height: 1.9;
}

.store-hero-art {
    height: 94px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.08);
    display: grid;
    place-items: center;
}

    .store-hero-art svg {
        width: 78px;
        height: 78px;
    }

.store-active-vehicle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    margin-top: 10px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15,23,42,.045);
}

.store-active-vehicle-art {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft, rgba(217,4,41,.08));
    display: grid;
    place-items: center;
}

    .store-active-vehicle-art svg {
        width: 31px;
        height: 31px;
    }

.store-active-vehicle-info {
    flex: 1;
    min-width: 0;
}

    .store-active-vehicle-info small {
        display: block;
        color: var(--app-muted, #667085);
        font-size: 9px;
    }

    .store-active-vehicle-info strong {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.store-link-btn {
    border: 0;
    border-radius: var(--app-card-radius);
    padding: 8px 10px;
    background: #f2f4f7;
    color: #344054;
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
}

.store-search {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid var(--app-border, #dfe6ee);
    border-radius: var(--app-card-radius);
    background: #fff;
    box-shadow: 0 7px 20px rgba(15,23,42,.05);
}

.store-search-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--app-muted, #667085);
}

    .store-search-icon svg {
        width: 21px;
        height: 21px;
    }

.store-search input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 11px;
}

.store-search button {
    min-width: 70px;
    height: 38px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-dark, #b70322);
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.store-compatibility {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid #d7eee0;
    border-radius: var(--app-card-radius);
    background: #f0faf4;
    color: #28623c;
    font-size: 9px;
}

    .store-compatibility i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22a559;
        box-shadow: 0 0 0 4px rgba(34,165,89,.11);
    }

    .store-compatibility button {
        margin-right: auto;
        border: 0;
        background: #fff;
        color: inherit;
        border-radius: var(--app-card-radius);
        padding: 6px 8px;
        font-family: inherit;
        font-size: 9px;
    }

.store-category-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 12px 0 4px;
    scrollbar-width: none;
}

    .store-category-list::-webkit-scrollbar {
        display: none;
    }

.store-category {
    flex: 0 0 auto;
    min-width: 76px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    padding: 9px 10px;
    background: #fff;
    color: #475467;
    font-family: inherit;
    font-size: 9px;
    text-align: center;
    cursor: pointer;
}

    .store-category.active {
        border-color: var(--app-primary-dark, #b70322);
        background: var(--app-primary-soft, rgba(217,4,41,.08));
        color: var(--app-primary-dark, #b70322);
    }

.store-section {
    margin-top: 14px;
}

.store-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.store-section-title small {
    color: var(--app-primary-dark, #b70322);
    font-size: 9px;
}

.store-section-title h2 {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.store-filter-btn {
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    padding: 8px 10px;
    background: #fff;
    color: #475467;
    font-family: inherit;
    font-size: 9px;
}

    .store-filter-btn.active {
        border-color: #18212f;
        background: #18212f;
        color: #fff;
    }

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

.store-product-card {
    overflow: hidden;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
    box-shadow: 0 7px 19px rgba(15,23,42,.04);
    cursor: pointer;
}

.store-product-image {
    position: relative;
    height: 137px;
    background: linear-gradient(145deg, #f8fafc, #edf2f7);
    display: grid;
    place-items: center;
}

    .store-product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.store-product-placeholder {
    width: 78px;
    height: 78px;
}

    .store-product-placeholder svg {
        width: 100%;
        height: 100%;
    }

.store-product-state,
.store-product-compatible {
    position: absolute;
    border-radius: var(--app-card-radius);
    padding: 5px 6px;
    font-size: 8px;
}

.store-product-state {
    top: 7px;
    right: 7px;
    border: 1px solid #e4e7ec;
    background: rgba(255,255,255,.94);
    color: #344054;
}

.store-product-compatible {
    left: 7px;
    bottom: 7px;
    background: #dcfce7;
    color: #166534;
}

.store-product-body {
    padding: 9px;
}

.store-product-code {
    color: #98a2b3;
    font-size: 8px;
}

.store-product-title {
    height: 40px;
    margin-top: 4px;
    color: #1d2939;
    font-size: 11px;
    line-height: 1.8;
    font-weight: 600;
    overflow: hidden;
}

.store-product-meta {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px dashed #e5e7eb;
    color: #667085;
    font-size: 8px;
}

.store-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
}

.store-product-price strong {
    font-size: 12px;
    font-weight: 600;
}

.store-product-price small {
    color: #667085;
    font-size: 8px;
}

.store-add-btn {
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-dark, #b70322);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

    .store-add-btn:disabled {
        background: #d0d5dd;
        cursor: default;
    }

.store-load-more {
    width: 100%;
    margin-top: 11px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    padding: 11px;
    background: #fff;
    color: #344054;
    font-family: inherit;
    font-size: 10px;
}

.store-empty {
    grid-column: 1 / -1;
    padding: 28px 15px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #667085;
    text-align: center;
    font-size: 10px;
    line-height: 2;
}

.store-skeleton-card {
    height: 245px;
    border-radius: var(--app-card-radius);
}

/* product details */
.store-product-gallery {
    position: relative;
    height: 265px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: linear-gradient(145deg,#f8fafc,#edf2f7);
    display: grid;
    place-items: center;
    overflow: hidden;
}

    .store-product-gallery img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .store-product-gallery svg {
        width: 155px;
        height: 155px;
    }

.store-detail-card,
.store-detail-section,
.store-cart-summary,
.store-order-card,
.store-address-card {
    margin-top: 10px;
    padding: 13px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
}

.store-detail-label {
    color: var(--app-primary-dark, #b70322);
    font-size: 9px;
}

.store-detail-card h2 {
    margin: 5px 0;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 600;
}

.store-detail-code {
    color: #667085;
    font-size: 10px;
}

.store-match-box {
    margin-top: 11px;
    padding: 10px;
    border: 1px solid #d7eee0;
    border-radius: var(--app-card-radius);
    background: #f0faf4;
    color: #28623c;
    font-size: 10px;
}

    .store-match-box.not-compatible {
        border-color: #f3d6d8;
        background: #fff4f4;
        color: #b42318;
    }

.store-detail-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    margin-top: 10px;
}

.store-detail-metric {
    padding: 9px 5px;
    border-radius: var(--app-card-radius);
    background: #f8fafc;
    text-align: center;
}

    .store-detail-metric strong {
        display: block;
        font-size: 10px;
        font-weight: 600;
    }

    .store-detail-metric span {
        display: block;
        margin-top: 3px;
        color: #667085;
        font-size: 8px;
    }

.store-detail-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #edf0f4;
}

    .store-detail-price strong {
        font-size: 19px;
        font-weight: 600;
    }

    .store-detail-price small {
        color: #667085;
        font-size: 9px;
    }

.store-stock-ok {
    color: #15803d;
    font-size: 9px;
}

.store-action-row {
    position: sticky;
    bottom: 70px;
    z-index: 8;
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 7px;
    margin-top: 10px;
    padding: 7px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 30px rgba(15,23,42,.12);
}

.store-main-action {
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-dark, #b70322);
    color: #fff;
    min-height: 43px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
}

.store-detail-section h3 {
    margin: 0 0 9px;
    font-size: 13px;
    font-weight: 600;
}

.store-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.store-chip {
    padding: 7px 8px;
    border-radius: var(--app-card-radius);
    background: #f2f4f7;
    color: #475467;
    font-size: 9px;
}

/* cart */
.store-cart-item {
    display: grid;
    grid-template-columns: 72px minmax(0,1fr);
    gap: 10px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    background: #fff;
}

.store-cart-image {
    height: 72px;
    border-radius: var(--app-card-radius);
    background: #f3f6f9;
    display: grid;
    place-items: center;
}

    .store-cart-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .store-cart-image svg {
        width: 44px;
        height: 44px;
    }

.store-cart-content h3 {
    margin: 0;
    font-size: 11px;
    line-height: 1.8;
    font-weight: 600;
}

.store-cart-content small {
    color: #667085;
    font-size: 8px;
}

.store-cart-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.store-quantity {
    display: flex;
    overflow: hidden;
    border: 1px solid #e1e7ef;
    border-radius: var(--app-card-radius);
}

    .store-quantity button,
    .store-quantity span {
        width: 29px;
        height: 29px;
        border: 0;
        display: grid;
        place-items: center;
        background: #fff;
        font-family: inherit;
        font-size: 10px;
    }

    .store-quantity button {
        background: #f7f9fc;
        cursor: pointer;
    }

.store-cart-line strong {
    font-size: 11px;
    font-weight: 600;
}

.store-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #475467;
    font-size: 10px;
}

    .store-summary-row.total {
        margin-top: 5px;
        padding-top: 11px;
        border-top: 1px solid #e5e7eb;
        color: #18212f;
        font-size: 13px;
        font-weight: 600;
    }

/* checkout and orders */
.store-address-card {
    cursor: pointer;
}

    .store-address-card.active {
        border-color: var(--app-primary-dark, #b70322);
        box-shadow: 0 0 0 2px var(--app-primary-soft, rgba(217,4,41,.08));
    }

    .store-address-card h3 {
        margin: 0;
        font-size: 11px;
        font-weight: 600;
    }

    .store-address-card p {
        margin: 6px 0 0;
        color: #667085;
        font-size: 9px;
        line-height: 1.9;
    }

.store-note {
    width: 100%;
    min-height: 80px;
    border: 1px solid var(--app-border, #e2e8f0);
    border-radius: var(--app-card-radius);
    padding: 10px;
    outline: 0;
    resize: vertical;
    font-family: inherit;
    font-size: 10px;
}

.store-order-card {
    cursor: pointer;
}

.store-order-head,
.store-order-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .store-order-head strong {
        font-size: 11px;
        font-weight: 600;
    }

.store-order-status {
    padding: 5px 7px;
    border-radius: var(--app-card-radius);
    background: #eef4ff;
    color: #3448a1;
    font-size: 8px;
}

.store-order-info {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 7px;
    margin: 11px 0;
}

    .store-order-info div {
        padding: 8px 5px;
        border-radius: var(--app-card-radius);
        background: #f8fafc;
        text-align: center;
    }

    .store-order-info span,
    .store-order-info strong {
        display: block;
    }

    .store-order-info span {
        color: #667085;
        font-size: 8px;
    }

    .store-order-info strong {
        margin-top: 4px;
        font-size: 9px;
        font-weight: 600;
    }

.store-order-footer {
    padding-top: 9px;
    border-top: 1px dashed #e5e7eb;
    font-size: 9px;
}

@media (min-width: 760px) {
    .store-page,
    .store-product-page,
    .store-cart-page,
    .store-checkout-page,
    .store-orders-page {
        max-width: 980px;
        margin: 0 auto;
    }

    .store-product-grid {
        grid-template-columns: repeat(4,minmax(0,1fr));
    }

    .store-product-page {
        max-width: 760px;
    }

    .store-cart-page,
    .store-checkout-page,
    .store-orders-page {
        max-width: 720px;
    }
}

/* =====================================
   STORE PAGE
===================================== */

.store-page {
    padding: 12px;
    direction: rtl;
}



/* =====================================
   BANNER
===================================== */

.store-banner {
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px;
}


.store-banner-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}


    .store-banner-slider::-webkit-scrollbar,
    .store-product-scroll::-webkit-scrollbar,
    .store-category-scroll::-webkit-scrollbar {
        display: none;
    }



.store-banner-item {
    min-width: 100%;
    height: 180px;
    border-radius: var(--app-card-radius);
    overflow: hidden;
    position: relative;
    scroll-snap-align: start;
    background: #f3f4f6;
}



    .store-banner-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



.banner-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 16px;
    background: linear-gradient( transparent, rgba(0,0,0,.65) );
    color: white;
}



    .banner-overlay strong {
        display: block;
        font-size: 18px;
        font-weight: 600;
    }


    .banner-overlay small {
        display: block;
        margin-top: 5px;
        opacity: .9;
    }







/* =====================================
   SECTION
===================================== */


.store-section {
    margin-bottom: 22px;
}



.store-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}



    .store-section-title span {
        font-size: 16px;
        font-weight: 600;
        color: #111827;
    }



    .store-section-title button {
        border: 0;
        background: none;
        color: var(--primary-dark);
        font-size: 12px;
    }







/* =====================================
   CATEGORY
===================================== */


.store-category-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
}



.store-category {
    min-width: 82px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    padding: 12px 8px;
    text-align: center;
}



.category-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 22px;
}



.store-category span {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #374151;
}







/* =====================================
   CAMPAIGN
===================================== */


.store-campaign {
    background: linear-gradient( 135deg, #fff7ed, #ffffff );
    border: 1px solid #fed7aa;
    border-radius: var(--app-card-radius);
    padding: 14px;
    margin-bottom: 20px;
}



.campaign-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}



.campaign-title {
    font-size: 18px;
    font-weight: 600;
    color: #c2410c;
}



.campaign-subtitle {
    margin-top: 5px;
    font-size: 13px;
    color: #6b7280;
}





.campaign-timer {
    background: #111827;
    color: white;
    padding: 8px 10px;
    border-radius: var(--app-card-radius);
    font-size: 15px;
    direction: ltr;
}



    .campaign-timer span {
        font-weight: 600;
    }








/* =====================================
   PRODUCTS
===================================== */


.store-product-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
}




.store-product-card {
    min-width: 150px;
    max-width: 150px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    padding: 8px;
    position: relative;
}



.product-image {
    height: 120px;
    background: #f9fafb;
    border-radius: var(--app-card-radius);
    position: relative;
    overflow: hidden;
}



    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }





.discount {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #dc2626;
    color: white;
    padding: 3px 6px;
    border-radius: var(--app-card-radius);
    font-size: 11px;
}





.product-title {
    margin-top: 10px;
    height: 40px;
    overflow: hidden;
    font-size: 13px;
    color: #111827;
    line-height: 20px;
}





.product-price {
    margin-top: 8px;
}



    .product-price del {
        display: block;
        font-size: 11px;
        color: #9ca3af;
    }



    .product-price strong {
        color: #111827;
        font-size: 14px;
        font-weight: 600;
    }




.store-product-card button {
    width: 100%;
    margin-top: 10px;
    height: 32px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--primary-dark);
    color: white;
    font-size: 12px;
}







/* =====================================
   DESKTOP
===================================== */


@media(min-width:768px) {


    .store-page {
        max-width: 1200px;
        margin: auto;
    }



    .store-banner-item {
        height: 260px;
    }



    .store-product-card {
        min-width: 190px;
        max-width: 190px;
    }
}

.shop-premium {
    padding: 12px;
    direction: rtl;
    background: #f8fafc
}

.shop-head {
    background: #111827;
    color: #fff;
    padding: 18px;
    border-radius: var(--app-card-radius);
}

.shop-logo {
    font-size: 22px;
    font-weight: 600
}

.shop-search {
    margin-top: 12px;
    background: #fff;
    color: #666;
    padding: 12px;
    border-radius: 8px
}

.premium-slider {
    margin-top: 15px;
    position: relative
}

.slides {
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: var(--app-card-radius);
}

.slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: .5s
}

    .slide.active {
        opacity: 1
    }

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

.slide-text {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: #fff;
    background: #0008;
    padding: 12px;
    border-radius: 8px
}

.dots {
    text-align: center;
    margin-top: 8px
}

    .dots i {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #ccc;
        border-radius: 50%;
        margin: 3px
    }

        .dots i.active {
            background: #d90429
        }

.car-suggest, .campaign {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--app-card-radius);
    padding: 15px;
    margin-top: 15px
}

.horizontal {
    display: flex;
    gap: 12px;
    overflow-x: auto
}

.category, .product-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--app-card-radius);
    padding: 12px;
    min-width: 150px
}

.category {
    text-align: center;
    min-width: 90px
}

.product-card img {
    width: 100%;
    height: 120px;
    object-fit: contain
}

.product-card strong, .product-card b {
    display: block;
    margin-top: 8px
}

.discount {
    color: #d90429
}

.product-card button {
    width: 100%;
    margin-top: 8px;
    background: #d90429;
    color: #fff;
    border: 0;
    padding: 8px;
    border-radius: 6px
}

.countdown {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0
}

.shop-page {
    direction: rtl;
    background: #f8fafc
}

.shop-header {
    background: #111827;
    color: white;
    padding: 18px;
    border-radius: var(--app-card-radius);
}

.shop-title {
    font-size: 22px
}

.shop-search {
    background: white;
    color: #777;
    padding: 12px;
    border-radius: var(--app-card-radius);
    margin-top: 12px
}

.shop-slider {
    margin-top: 15px
}

.slide {
    display: none;
    position: relative;
    height: 210px;
    border-radius: var(--app-card-radius);
    overflow: hidden
}

    .slide.active {
        display: block
    }

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

.overlay {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #0008;
    color: white;
    padding: 12px;
    border-radius: 8px
}

.horizontal {
    display: flex;
    gap: 12px;
    overflow-x: auto
}

.category-card, .brand-card, .product-card {
    min-width: 150px;
    background: white;
    border: 1px solid #eee;
    border-radius: var(--app-card-radius);
    padding: 12px;
    text-align: center
}

    .category-card img, .brand-card img, .product-card img {
        width: 100%;
        height: 100px;
        object-fit: contain
    }

.campaign {
    margin-top: 20px;
    background: #fff1f2;
    padding: 15px;
    border-radius: var(--app-card-radius);
}

.timer {
    font-size: 24px;
    font-weight: 600
}
.shop-page {
    --sp-primary: var(--app-primary,#d90429);
    --sp-dark: var(--app-primary-dark,#b70322);
    --sp-soft: var(--app-primary-soft,rgba(217,4,41,.08));
    --sp-text: #111827;
    --sp-muted: #6b7280;
    --sp-border: #e5e7eb;
    --sp-bg: #f7f8fa;
    min-height: 100%;
    background: var(--sp-bg);
    color: var(--sp-text);
    direction: rtl
}

    .shop-page * {
        box-sizing: border-box
    }

    .shop-page button, .shop-page input {
        font: inherit
    }

    .shop-page button {
        cursor: pointer
    }

    .shop-page img {
        display: block;
        max-width: 100%
    }

.shop-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--sp-border);
    backdrop-filter: blur(10px)
}

.shop-header-row {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px
}

.shop-icon-btn, .shop-cart-btn {
    width: 42px;
    height: 42px;
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--sp-text);
    display: grid;
    place-items: center;
    position: relative
}

.shop-page svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.shop-icon-btn svg, .shop-cart-btn svg, .shop-search svg, .shop-state-icon svg {
    width: 21px;
    height: 21px
}

.shop-cart-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--app-card-radius);
    background: var(--sp-primary);
    color: #fff;
    border: 2px solid #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600
}

.shop-search {
    min-width: 0;
    height: 42px;
    display: grid;
    grid-template-columns: 22px minmax(0,1fr) 28px;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #f9fafb;
    color: var(--sp-muted)
}

    .shop-search:focus-within {
        border-color: var(--sp-primary);
        background: #fff;
        box-shadow: 0 0 0 3px var(--sp-soft)
    }

    .shop-search input {
        min-width: 0;
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--sp-text);
        font-size: 13px
    }

.shop-search-clear {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #9ca3af;
    display: none;
    place-items: center
}

    .shop-search-clear.show {
        display: grid
    }

    .shop-search-clear svg {
        width: 17px;
        height: 17px
    }

.shop-vehicle-strip {
    padding: 0 12px 10px
}

.shop-vehicle-card {
    width: 100%;
    border: 1px solid rgba(217,4,41,.18);
    border-radius: var(--app-card-radius);
    padding: 9px 10px;
    background: linear-gradient(135deg,rgba(217,4,41,.06),#fff);
    display: grid;
    grid-template-columns: 38px minmax(0,1fr) 20px;
    align-items: center;
    gap: 9px;
    text-align: right
}

.shop-vehicle-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--sp-primary);
    border: 1px solid rgba(217,4,41,.12)
}

    .shop-vehicle-icon svg {
        width: 22px;
        height: 22px
    }

.shop-vehicle-text {
    min-width: 0;
    display: grid;
    gap: 2px
}

    .shop-vehicle-text strong {
        font-size: 12px;
        font-weight: 600
    }

    .shop-vehicle-text small {
        font-size: 10px;
        color: var(--sp-muted);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

.shop-vehicle-arrow {
    width: 18px;
    height: 18px;
    color: var(--sp-muted)
}

.shop-content {
    max-width: 1220px;
    margin: 0 auto;
    padding: 12px 0 88px
}

.shop-sections {
    display: grid;
    gap: 14px
}

.shop-section {
    background: #fff;
    border-top: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
    overflow: hidden
}

.shop-section-head {
    min-height: 54px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.shop-section-title {
    min-width: 0;
    display: grid;
    gap: 3px
}

    .shop-section-title h2 {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        font-weight: 600
    }

    .shop-section-title p {
        margin: 0;
        color: var(--sp-muted);
        font-size: 10px;
        line-height: 1.7
    }

.shop-section-more {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--sp-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 6px
}

    .shop-section-more svg {
        width: 16px;
        height: 16px
    }

.shop-hero {
    border: 0;
    background: transparent
}

.shop-hero-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 8px;
    padding: 0 12px
}

    .shop-hero-track::-webkit-scrollbar, .shop-horizontal::-webkit-scrollbar, .shop-category-grid::-webkit-scrollbar, .shop-brand-row::-webkit-scrollbar {
        display: none
    }

.shop-hero-slide {
    min-width: calc(100% - 22px);
    aspect-ratio: 2.25/1;
    border: 0;
    border-radius: var(--app-card-radius);
    overflow: hidden;
    position: relative;
    scroll-snap-align: center;
    background: #e5e7eb;
    padding: 0;
    text-align: right
}

    .shop-hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.shop-hero-overlay {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: #fff;
    background: linear-gradient(0deg,rgba(0,0,0,.55),transparent 62%)
}

    .shop-hero-overlay strong {
        font-size: 17px;
        font-weight: 600
    }

    .shop-hero-overlay span {
        margin-top: 4px;
        font-size: 11px
    }

.shop-hero-dots {
    min-height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px
}

.shop-hero-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--app-card-radius);
    background: #d1d5db;
    transition: .2s
}

    .shop-hero-dot.active {
        width: 18px;
        background: var(--sp-primary)
    }

.shop-banner-grid {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px
}

    .shop-banner-grid.cols-1 {
        grid-template-columns: 1fr
    }

    .shop-banner-grid.cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .shop-banner-grid.cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }

.shop-banner {
    min-width: 0;
    border: 0;
    padding: 0;
    border-radius: var(--app-card-radius);
    overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 1.8/1;
    position: relative
}

    .shop-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.shop-banner-caption {
    position: absolute;
    inset: auto 0 0;
    padding: 9px;
    color: #fff;
    background: linear-gradient(0deg,rgba(0,0,0,.55),transparent);
    text-align: right
}

    .shop-banner-caption strong {
        font-size: 11px;
        font-weight: 600
    }

.shop-category-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 76px;
    gap: 10px;
    overflow-x: auto;
    padding: 0 12px 12px
}

.shop-category {
    border: 0;
    background: transparent;
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 7px;
    min-width: 0
}

.shop-category-image {
    width: 62px;
    height: 62px;
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #f9fafb;
    overflow: hidden;
    display: grid;
    place-items: center
}

    .shop-category-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .shop-category-image span {
        font-size: 23px
    }

.shop-category strong {
    width: 100%;
    font-size: 10px;
    line-height: 1.5;
    font-weight: 300;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.shop-brand-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 12px 12px
}

.shop-brand {
    flex: 0 0 96px;
    min-height: 70px;
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 8px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 6px
}

    .shop-brand img {
        width: 46px;
        height: 30px;
        object-fit: contain
    }

    .shop-brand strong {
        font-size: 10px;
        font-weight: 500
    }

.shop-horizontal {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 0 12px 12px;
    scroll-snap-type: x proximity
}

.shop-products-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 9px;
    padding: 0 12px 12px
}

.shop-product-card {
    min-width: 0;
    position: relative;
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.shop-horizontal .shop-product-card {
    flex: 0 0 162px;
    scroll-snap-align: start
}

.shop-product-image {
    position: relative;
    aspect-ratio: 1/1;
    background: #f8f9fb;
    overflow: hidden
}

    .shop-product-image > button[data-shop-product] {
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        background: transparent;
    }

    .shop-product-image > .shop-product-favorite {
        position: absolute;
        top: 7px;
        left: 7px;
        z-index: 3;
        width: 31px;
        height: 31px;
        border: 1px solid rgba(17, 24, 39, 0.08);
        border-radius: var(--app-card-radius);
        background: rgba(255, 255, 255, 0.93);
        color: #6b7280;
        display: grid;
        place-items: center;
    }

    .shop-product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 9px
    }

.shop-product-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #c4c9d1
}

    .shop-product-placeholder svg {
        width: 44px;
        height: 44px
    }

.shop-product-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    border-radius: var(--app-card-radius);
    padding: 4px 10px;
    background: var(--app-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
}

.shop-product-favorite {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 3;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(17,24,39,.08);
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.93);
    color: #6b7280;
    display: grid;
    place-items: center
}

    .shop-product-favorite.active {
        color: var(--sp-primary)
    }

    .shop-product-favorite svg {
        width: 18px;
        height: 18px
    }

    .shop-product-favorite.active svg {
        fill: currentColor
    }

.shop-product-body {
    min-width: 0;
    padding: 9px;
    display: flex;
    flex: 1;
    flex-direction: column
}

.shop-product-brand {
    min-height: 18px;
    color: var(--sp-muted);
    font-size: 9px
}

.shop-product-title {
    margin: 1px 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: right;
    min-height: 38px;
    color: var(--sp-text);
    font-size: 11px;
    line-height: 1.8;
    font-weight: 300;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.shop-product-meta {
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 7px
}

.shop-product-stock {
    font-size: 9px;
    color: #059669
}

    .shop-product-stock.out {
        color: #9ca3af
    }

.shop-product-rating {
    font-size: 9px;
    color: #6b7280
}

    .shop-product-rating b {
        font-weight: 600;
        color: #f59e0b
    }

.shop-product-price {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 7px;
    align-items: end;
    margin-top: auto
}

.shop-price-text {
    min-width: 0;
    display: grid;
    justify-items: end;
    gap: 2px
}

.shop-old-price {
    min-height: 15px;
    color: #9ca3af;
    font-size: 9px;
    text-decoration: line-through
}

.shop-final-price {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap
}

    .shop-final-price small {
        font-size: 8px;
        color: var(--sp-muted);
        font-weight: 500
    }

.shop-product-action {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--sp-primary);
    color: #fff;
    display: grid;
    place-items: center
}

    .shop-product-action svg {
        width: 20px;
        height: 20px
    }

    .shop-product-action:disabled {
        background: #e5e7eb;
        color: #9ca3af;
        cursor: default
    }

    .shop-product-action.loading {
        pointer-events: none;
        opacity: .75
    }

        .shop-product-action.loading svg {
            animation: shopSpin .8s linear infinite
        }

.shop-flash {
    background: linear-gradient(135deg,var(--sp-dark),var(--sp-primary));
    border: 0;
    color: #fff;
    padding: 12px 0
}

    .shop-flash .shop-section-head {
        padding-top: 0
    }

    .shop-flash .shop-section-title h2, .shop-flash .shop-section-title p, .shop-flash .shop-section-more {
        color: #fff
    }

.shop-countdown {
    display: flex;
    direction: ltr;
    align-items: center;
    gap: 3px
}

.shop-countdown-box {
    min-width: 27px;
    height: 27px;
    padding: 0 4px;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: var(--sp-dark);
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 600
}

.shop-service-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 8px;
    padding: 0 12px 12px
}

.shop-service {
    border: 1px solid var(--sp-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 9px 5px;
    display: grid;
    justify-items: center;
    gap: 6px
}

.shop-service-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--app-card-radius);
    background: var(--sp-soft);
    color: var(--sp-primary);
    display: grid;
    place-items: center;
    overflow: hidden
}

    .shop-service-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.shop-service strong {
    font-size: 9px;
    font-weight: 300;
    text-align: center
}

.shop-text-block {
    padding: 0 12px 12px;
    color: #374151;
    font-size: 11px;
    line-height: 2
}

.shop-divider {
    height: 1px;
    margin: 2px 12px;
    background: var(--sp-border)
}

.shop-state {
    min-height: 360px;
    padding: 50px 22px;
    text-align: center;
    display: grid;
    place-items: center;
    align-content: center
}

.shop-state-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--app-card-radius);
    background: var(--sp-soft);
    color: var(--sp-primary);
    display: grid;
    place-items: center;
    margin-bottom: 14px
}

    .shop-state-icon svg {
        width: 30px;
        height: 30px
    }

.shop-state h3 {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 600
}

.shop-state p {
    margin: 0 0 16px;
    max-width: 420px;
    color: var(--sp-muted);
    font-size: 11px;
    line-height: 1.9
}

.shop-primary-btn {
    min-width: 120px;
    height: 40px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--sp-primary);
    color: #fff;
    padding: 0 18px;
    font-weight: 600;
    font-size: 12px
}

.shop-loading {
    padding: 0 12px 50px
}

.shop-skeleton-banner, .shop-skeleton-title, .shop-skeleton-product {
    position: relative;
    overflow: hidden;
    background: #eceff3
}

    .shop-skeleton-banner:after, .shop-skeleton-title:after, .shop-skeleton-product:after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(100%);
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
        animation: shopSkeleton 1.2s infinite
    }

.shop-skeleton-banner {
    aspect-ratio: 2.25/1;
    border-radius: var(--app-card-radius);
    margin-bottom: 20px
}

.shop-skeleton-title {
    width: 130px;
    height: 18px;
    border-radius: var(--app-card-radius);
    margin-bottom: 12px
}

.shop-skeleton-row {
    display: flex;
    gap: 9px;
    overflow: hidden
}

.shop-skeleton-product {
    flex: 0 0 162px;
    height: 260px;
    border-radius: 5px
}

.shop-toast {
    position: fixed;
    z-index: 80;
    right: 50%;
    bottom: 84px;
    transform: translateX(50%) translateY(20px);
    width: calc(100% - 32px);
    max-width: 420px;
    min-height: 44px;
    border-radius: var(--app-card-radius);
    padding: 10px 14px;
    background: rgba(17,24,39,.96);
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
    font-size: 11px;
    text-align: center;
    opacity: 0;
    transition: .2s
}

    .shop-toast.show {
        opacity: 1;
        transform: translateX(50%) translateY(0)
    }

@keyframes shopSkeleton {
    100% {
        transform: translateX(-100%)
    }
}

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

@media(min-width:768px) {
    .shop-page {
        min-height: 100vh
    }

    .shop-header-row, .shop-vehicle-strip {
        max-width: 1220px;
        margin: auto
    }

    .shop-content {
        padding-top: 16px
    }

    .shop-section {
        border: 1px solid var(--sp-border);
        border-radius: 5px
    }

    .shop-hero {
        border: 0
    }

    .shop-hero-slide {
        min-width: calc(68% - 8px)
    }

    .shop-products-grid {
        grid-template-columns: repeat(4,minmax(0,1fr))
    }

    .shop-horizontal .shop-product-card {
        flex-basis: 190px
    }

    .shop-service-grid {
        grid-template-columns: repeat(8,minmax(0,1fr))
    }
}

@media(min-width:1100px) {
    .shop-products-grid {
        grid-template-columns: repeat(5,minmax(0,1fr))
    }

    .shop-hero-slide {
        min-width: calc(55% - 8px)
    }
}
.product-details-page {
    direction: rtl;
    background: #f6f7f9;
    color: #151922;
    min-height: 100%;
    padding-bottom: 82px
}

    .product-details-page * {
        box-sizing: border-box
    }

    .product-details-page button, .product-details-page input {
        font: inherit
    }

.product-details-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #e6e8ec
}

.product-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #e4e7eb;
    background: #fff;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer
}

    .product-icon-btn svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.product-header-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column
}

    .product-header-title strong {
        font-size: 14px;
        font-weight: 600
    }

    .product-header-title span {
        font-size: 10px;
        color: #707782;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.product-header-actions {
    display: flex;
    gap: 7px
}

.product-cart-badge {
    position: absolute;
    top: -5px;
    left: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: var(--app-card-radius);
    background: var(--primary-dark,#b70322);
    color: #fff;
    font-size: 9px;
    display: grid;
    place-items: center;
    border: 2px solid #fff
}

.product-state {
    padding: 12px
}

.product-skeleton {
    background: linear-gradient(90deg,#edf0f3 25%,#f7f8fa 50%,#edf0f3 75%);
    background-size: 200% 100%;
    animation: productShimmer 1.2s infinite
}

    .product-skeleton.gallery {
        height: 370px;
        border-radius: 5px
    }

    .product-skeleton.line {
        height: 15px;
        margin-top: 14px;
        border-radius: 3px
    }

        .product-skeleton.line.w80 {
            width: 80%
        }

        .product-skeleton.line.w55 {
            width: 55%
        }

    .product-skeleton.card {
        height: 140px;
        margin-top: 12px;
        border-radius: 5px
    }

@keyframes productShimmer {
    to {
        background-position: -200% 0
    }
}

.product-error {
    text-align: center;
    padding: 55px 18px
}

.product-error-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff0f1;
    color: var(--primary-dark,#b70322);
    font-size: 27px;
    margin: 0 auto 12px
}

.product-error strong {
    display: block;
    font-weight: 600
}

.product-error p {
    color: #777;
    font-size: 12px
}

.product-primary-btn {
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--primary-dark,#b70322);
    color: #fff;
    height: 42px;
    padding: 0 24px;
    font-weight: 600
}

.product-gallery-card, .product-main-card, .product-accordion-card, .product-related-section {
    background: #fff;
    margin: 10px;
    border: 1px solid #e6e8ec;
    border-radius: 5px
}

.product-gallery-card {
    overflow: hidden
}

.product-gallery-main {
    position: relative;
    height: min(72vw,430px);
    background: #fff;
    overflow: hidden
}

.product-gallery-track {
    height: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    direction: ltr
}

    .product-gallery-track::-webkit-scrollbar {
        display: none
    }

.product-gallery-slide {
    min-width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
    padding: 10px;
    scroll-snap-align: center;
    cursor: zoom-in
}

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

.product-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: 1px solid #e3e6ea;
    background: rgba(255,255,255,.9);
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center
}

    .product-gallery-arrow.prev {
        right: 10px
    }

    .product-gallery-arrow.next {
        left: 10px
    }

    .product-gallery-arrow svg {
        width: 18px;
        fill: none;
        stroke: #232831;
        stroke-width: 2
    }

.product-gallery-counter {
    position: absolute;
    bottom: 10px;
    left: 12px;
    background: rgba(20,24,31,.72);
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 5px 9px;
    font-size: 10px
}

.product-favorite-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 39px;
    height: 39px;
    border: 1px solid #e3e6ea;
    background: #fff;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center
}

    .product-favorite-btn svg {
        width: 21px;
        fill: none;
        stroke: #303742;
        stroke-width: 1.8
    }

    .product-favorite-btn.active svg {
        fill: var(--primary-dark,#b70322);
        stroke: var(--primary-dark,#b70322)
    }

.product-gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 10px;
    overflow-x: auto;
    border-top: 1px solid #eef0f2;
    scrollbar-width: none
}

    .product-gallery-thumbs::-webkit-scrollbar {
        display: none
    }

.product-gallery-thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border: 1px solid #e1e4e8;
    background: #fff;
    border-radius: var(--app-card-radius);
    padding: 4px
}

    .product-gallery-thumb.active {
        border-color: var(--primary-dark,#b70322);
        box-shadow: 0 0 0 1px var(--primary-dark,#b70322)
    }

    .product-gallery-thumb img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.product-main-card {
    padding: 15px
}

.product-brand-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #737a84;
    font-size: 11px
}

.product-stock {
    padding: 4px 8px;
    border-radius: var(--app-card-radius);
    background: #edf8f1;
    color: #168646
}

    .product-stock.out {
        background: #fff0f1;
        color: #c5283d
    }

.product-main-card h1 {
    font-size: 18px;
    line-height: 1.8;
    margin: 9px 0 4px;
    font-weight: 600
}

.product-code-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #8a9099;
    font-size: 10px
}

.product-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 11px
}

.product-rating b {
    color: #f3a800
}

.product-rating-row button {
    border: 0;
    background: none;
    color: #3769b0;
    padding: 0
}

.product-original-badge {
    margin-right: auto;
    background: #f0f6ff;
    color: #225da8;
    padding: 4px 7px;
    border-radius: 4px
}

.product-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding: 13px;
    background: #f8f9fb;
    border: 1px solid #eceef1;
    border-radius: 5px
}

.product-old-price {
    display: block;
    min-height: 18px;
    color: #999;
    text-decoration: line-through;
    font-size: 11px
}

.product-final-price {
    display: block;
    font-size: 21px;
    font-weight: 600
}

    .product-final-price small {
        font-size: 10px;
        font-weight: 500
    }

.product-discount-badge {
    background: var(--primary-dark,#b70322);
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 5px 8px;
    font-size: 11px
}

.product-vehicle-fit {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--app-card-radius);
    background: #edf8f1;
    border: 1px solid #ccebd7
}

    .product-vehicle-fit.not-fit {
        background: #fff7e8;
        border-color: #f5d89a
    }

.fit-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: #168646
}

.product-vehicle-fit strong {
    font-size: 12px;
    font-weight: 600
}

.product-vehicle-fit p {
    margin: 3px 0 0;
    font-size: 10px;
    color: #68716d
}

.product-variants {
    margin-top: 15px
}

.product-variant-group {
    padding-top: 13px;
    border-top: 1px solid #eef0f2;
    margin-top: 13px
}

.product-variant-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 12px
}

    .product-variant-title strong {
        font-weight: 600
    }

    .product-variant-title span {
        color: #777
    }

.product-variant-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.product-variant-option {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #dfe3e8;
    background: #fff;
    border-radius: var(--app-card-radius);
    display: flex;
    align-items: center;
    gap: 7px
}

    .product-variant-option.active {
        border-color: var(--primary-dark,#b70322);
        background: rgba(183,3,34,.04);
        color: var(--primary-dark,#b70322)
    }

.product-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.15)
}

.product-quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #eef0f2
}

    .product-quantity-row > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .product-quantity-row strong {
        font-size: 12px;
        font-weight: 600
    }

    .product-quantity-row span {
        font-size: 10px;
        color: #7d848d
    }

.product-stepper {
    display: flex;
    align-items: center;
    border: 1px solid #dfe3e8;
    border-radius: var(--app-card-radius);
    overflow: hidden
}

    .product-stepper button {
        width: 38px;
        height: 38px;
        border: 0;
        background: #f7f8fa;
        font-size: 19px
    }

    .product-stepper input {
        width: 45px;
        height: 38px;
        border: 0;
        text-align: center;
        outline: 0;
        font-weight: 600
    }

.product-benefits {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-top: 16px
}

    .product-benefits div {
        text-align: center;
        padding: 9px 3px;
        background: #fafbfc;
        border: 1px solid #edf0f2;
        border-radius: 5px
    }

    .product-benefits span {
        display: block;
        font-size: 17px
    }

    .product-benefits strong {
        display: block;
        font-size: 8px;
        margin-top: 4px;
        font-weight: 500
    }

.product-accordion-card {
    overflow: hidden
}

.product-accordion-item + .product-accordion-item {
    border-top: 1px solid #eceef1
}

.product-accordion-toggle {
    width: 100%;
    border: 0;
    background: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: right
}

    .product-accordion-toggle strong {
        font-size: 13px;
        font-weight: 600
    }

    .product-accordion-toggle span {
        font-size: 18px;
        transition: .2s
    }

.product-accordion-item.open .product-accordion-toggle span {
    transform: rotate(45deg)
}

.product-accordion-content {
    display: none;
    padding: 0 15px 15px;
    color: #555d67;
    font-size: 12px;
    line-height: 2
}

.product-accordion-item.open .product-accordion-content {
    display: block
}

.product-spec-table {
    width: 100%;
    border-collapse: collapse
}

    .product-spec-table tr + tr {
        border-top: 1px solid #eef0f2
    }

    .product-spec-table th, .product-spec-table td {
        padding: 10px 5px;
        text-align: right
    }

    .product-spec-table th {
        width: 38%;
        color: #737b85;
        font-weight: 500
    }

.product-feature-list {
    display: grid;
    gap: 8px
}

    .product-feature-list div {
        display: flex;
        gap: 8px
    }

    .product-feature-list b {
        color: #168646
    }

.product-related-section {
    padding: 14px
}

.product-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

    .product-section-head h2 {
        font-size: 14px;
        margin: 0;
        font-weight: 600
    }

    .product-section-head p {
        font-size: 10px;
        color: #7a818b;
        margin: 3px 0 0
    }

    .product-section-head button {
        border: 0;
        background: none;
        color: var(--primary-dark,#b70322);
        font-size: 10px
    }

.product-horizontal-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 3px
}

    .product-horizontal-list::-webkit-scrollbar {
        display: none
    }

.product-mini-card {
    flex: 0 0 158px;
    border: 1px solid #e6e8ec;
    border-radius: var(--app-card-radius);
    background: #fff;
    overflow: hidden
}

.product-mini-image {
    height: 130px;
    background: #fafbfc;
    border: 0;
    width: 100%;
    padding: 7px
}

    .product-mini-image img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.product-mini-body {
    padding: 9px
}

    .product-mini-body strong {
        display: block;
        font-size: 11px;
        line-height: 1.7;
        height: 38px;
        overflow: hidden;
        font-weight: 600
    }

.product-mini-price {
    font-size: 12px;
    margin-top: 8px;
    color: #151922
}

    .product-mini-price small {
        font-size: 8px
    }

.product-bottom-space {
    height: 12px
}

.product-sticky-buy {
    position: fixed;
    z-index: 40;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255,255,255,.98);
    border-top: 1px solid #dfe3e8;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -5px 18px rgba(0,0,0,.06)
}

.product-sticky-price {
    flex: 1;
    display: flex;
    flex-direction: column
}

    .product-sticky-price span {
        font-size: 9px;
        color: #777
    }

    .product-sticky-price strong {
        font-size: 15px;
        font-weight: 600
    }

    .product-sticky-price small {
        font-size: 8px
    }

.product-add-cart-btn {
    height: 46px;
    min-width: 165px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: var(--primary-dark,#b70322);
    color: #fff;
    font-weight: 600;
    display: flex;
    gap: 7px;
    align-items: center;
    justify-content: center
}

    .product-add-cart-btn svg {
        width: 19px;
        fill: none;
        stroke: #fff;
        stroke-width: 2
    }

    .product-add-cart-btn:disabled {
        opacity: .55
    }

.product-toast {
    position: fixed;
    z-index: 100;
    right: 50%;
    bottom: 84px;
    transform: translateX(50%) translateY(15px);
    background: #242a32;
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 10px 15px;
    font-size: 11px;
    opacity: 0;
    transition: .22s;
    max-width: 86%;
    text-align: center
}

    .product-toast.show {
        opacity: 1;
        transform: translateX(50%) translateY(0)
    }

.product-lightbox {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: rgba(8,10,14,.96);
    direction: ltr
}

.product-lightbox-top {
    height: 58px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    direction: rtl
}

    .product-lightbox-top button {
        height: 38px;
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(255,255,255,.08);
        color: #fff;
        border-radius: var(--app-card-radius);
        padding: 0 12px
    }

.product-lightbox-stage {
    position: absolute;
    top: 58px;
    bottom: 82px;
    left: 0;
    right: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    touch-action: none
}

    .product-lightbox-stage img {
        max-width: 92%;
        max-height: 92%;
        object-fit: contain;
        transform-origin: center;
        user-select: none;
        -webkit-user-drag: none
    }

.product-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 54px;
    border: 0;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 34px
}

    .product-lightbox-nav.prev {
        left: 10px
    }

    .product-lightbox-nav.next {
        right: 10px
    }

.product-lightbox-thumbs {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
    height: 62px;
    display: flex;
    justify-content: center;
    gap: 7px;
    overflow-x: auto
}

    .product-lightbox-thumbs button {
        width: 58px;
        min-width: 58px;
        height: 58px;
        border: 1px solid rgba(255,255,255,.25);
        background: #fff;
        border-radius: var(--app-card-radius);
        padding: 3px
    }

        .product-lightbox-thumbs button.active {
            border-color: #fff;
            box-shadow: 0 0 0 2px var(--primary-dark,#b70322)
        }

    .product-lightbox-thumbs img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

@media(min-width:900px) {
    .product-details-page {
        max-width: 1180px;
        margin: auto;
        padding-bottom: 90px
    }

        .product-details-page main {
            display: grid;
            grid-template-columns: minmax(0,1.1fr) minmax(360px,.9fr);
            gap: 0 0
        }

    .product-gallery-card {
        grid-column: 1;
        grid-row: 1
    }

    .product-main-card {
        grid-column: 2;
        grid-row: 1
    }

    .product-accordion-card, .product-related-section, .product-bottom-space {
        grid-column: 1/3
    }

    .product-gallery-main {
        height: 510px
    }

    .product-sticky-buy {
        right: 50%;
        left: auto;
        width: 600px;
        transform: translateX(50%);
        border: 1px solid #dfe3e8;
        border-bottom: 0;
        border-radius: 5px 5px 0 0
    }
}
.profile-page {
    padding: 14px 14px 90px;
    background: #f7f8fa;
    min-height: 100%;
    color: #111827
}

.profile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

    .profile-topbar div {
        display: flex;
        flex-direction: column;
        gap: 2px
    }

    .profile-topbar span {
        font-size: 18px;
        font-weight: 600
    }

    .profile-topbar strong {
        font-size: 11px;
        color: #6b7280;
        font-weight: 500
    }

.profile-icon-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    background: #fff
}

.profile-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,var(--primary-dark,#0f766e),#134e4a);
    border-radius: var(--app-card-radius);
    color: #fff;
    padding: 18px;
    box-shadow: 0 8px 28px rgba(15,118,110,.16)
}

.profile-cover-pattern {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 10%,rgba(255,255,255,.14),transparent 36%),linear-gradient(120deg,transparent 50%,rgba(255,255,255,.05));
    pointer-events: none
}

.profile-main-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px
}

.profile-avatar-wrap {
    position: relative;
    flex: 0 0 70px
}

    .profile-avatar-wrap img {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: var(--app-card-radius);
        border: 3px solid rgba(255,255,255,.85);
        background: #fff
    }

    .profile-avatar-wrap button {
        position: absolute;
        left: -3px;
        bottom: -3px;
        width: 27px;
        height: 27px;
        border: 0;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #0f766e
    }

.profile-identity {
    min-width: 0;
    flex: 1
}

    .profile-identity h1 {
        margin: 0 0 5px;
        font-size: 18px;
        font-weight: 600
    }

    .profile-identity p {
        margin: 0;
        font-size: 13px;
        opacity: .88
    }

.profile-status-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 10px
}

    .profile-status-row span {
        padding: 4px 7px;
        border-radius: var(--app-card-radius);
        background: rgba(255,255,255,.14)
    }

.profile-edit-btn {
    align-self: flex-start;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1);
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 8px 10px;
    font-size: 11px
}

.profile-completion {
    position: relative;
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,.18)
}

    .profile-completion > div:first-child {
        display: flex;
        justify-content: space-between;
        font-size: 11px
    }

.profile-progress {
    height: 5px;
    margin: 8px 0;
    background: rgba(255,255,255,.18);
    border-radius: 3px;
    overflow: hidden
}

    .profile-progress i {
        display: block;
        height: 100%;
        background: #fff
    }

.profile-completion small {
    font-size: 10px;
    opacity: .78
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin: 10px 0
}

    .profile-stats div {
        background: #fff;
        border: 1px solid #eceff3;
        border-radius: var(--app-card-radius);
        padding: 11px 5px;
        text-align: center
    }

    .profile-stats strong {
        display: block;
        font-size: 17px;
        font-weight: 600
    }

    .profile-stats span {
        font-size: 10px;
        color: #6b7280
    }

.profile-active-vehicle, .profile-menu-section {
    background: #fff;
    border: 1px solid #e8ebef;
    border-radius: var(--app-card-radius);
    margin-top: 10px;
    padding: 13px
}

.profile-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .profile-section-head div {
        display: flex;
        flex-direction: column
    }

    .profile-section-head strong, .profile-section-title {
        font-size: 14px;
        font-weight: 600
    }

    .profile-section-head span {
        font-size: 10px;
        color: #6b7280
    }

    .profile-section-head button {
        border: 0;
        background: #ecfdf5;
        color: #047857;
        border-radius: var(--app-card-radius);
        padding: 7px 8px;
        font-size: 10px
    }

.profile-vehicle-body {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid #f0f1f3
}

    .profile-vehicle-body img {
        width: 72px;
        height: 50px;
        object-fit: contain;
        background: #f8fafc;
        border-radius: 4px
    }

    .profile-vehicle-body div {
        display: flex;
        flex: 1;
        flex-direction: column
    }

    .profile-vehicle-body strong {
        font-size: 13px
    }

    .profile-vehicle-body span {
        font-size: 10px;
        color: #6b7280
    }

.profile-vehicle-active {
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 4px 7px;
    border-radius: 4px
}

.profile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 11px
}

.profile-menu-card {
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: right;
    border: 1px solid #edf0f3;
    background: #fbfcfd;
    border-radius: var(--app-card-radius);
    padding: 11px
}

    .profile-menu-card i {
        font-style: normal;
        font-size: 20px;
        color: var(--app-primary-dark);
    }

    .profile-menu-card span {
        display: flex;
        flex: 1;
        flex-direction: column
    }

    .profile-menu-card strong {
        font-size: 12px;
        font-weight: 600
    }

    .profile-menu-card small {
        font-size: 9px;
        color: #6b7280;
        margin-top: 3px
    }

    .profile-menu-card b, .profile-list-row b {
        color: #9ca3af;
        font-size: 26px;
        direction: ltr;
        font-family: tahoma;
    }

.profile-menu-section.compact {
    padding: 0 13px
}

.profile-list-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f1f3;
    cursor: pointer
}

    .profile-list-row > span {
        font-size: 18px
    }

    .profile-list-row div {
        display: flex;
        flex: 1;
        flex-direction: column
    }

    .profile-list-row strong {
        font-size: 12px;
        font-weight: 600
    }

    .profile-list-row small {
        font-size: 9px;
        color: #6b7280
    }

.profile-logout {
    width: 100%;
    border: 0;
    background: transparent;
    color: #dc2626;
    padding: 14px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-skeleton {
    background: linear-gradient(90deg,#eee,#f7f7f7,#eee);
    background-size: 200% 100%;
    animation: profileShimmer 1.2s infinite;
    border-radius: var(--app-card-radius);
    margin-bottom: 10px
}

    .profile-skeleton.hero {
        height: 175px
    }

    .profile-skeleton.stats {
        height: 65px
    }

    .profile-skeleton.list {
        height: 280px
    }

@keyframes profileShimmer {
    to {
        background-position: -200% 0
    }
}

.profile-error {
    text-align: center;
    padding: 70px 20px
}

    .profile-error strong {
        display: block;
        margin-bottom: 12px
    }

    .profile-error button {
        border: 0;
        background: var(--primary-dark,#0f766e);
        color: #fff;
        border-radius: var(--app-card-radius);
        padding: 9px 18px
    }

.profile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15,23,42,.45);
    display: flex;
    align-items: flex-end
}

.profile-sheet {
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border-radius: 5px 5px 0 0;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom))
}

.profile-sheet-handle {
    width: 42px;
    height: 4px;
    background: #d1d5db;
    border-radius: 3px;
    margin: 0 auto 10px
}

.profile-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px
}

    .profile-sheet-head strong {
        font-size: 15px
    }

    .profile-sheet-head button {
        border: 0;
        background: #f3f4f6;
        width: 31px;
        height: 31px;
        border-radius: 5px
    }

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

    .profile-form-grid label {
        display: flex;
        flex-direction: column;
        gap: 5px
    }

        .profile-form-grid label.full {
            grid-column: 1/-1
        }

    .profile-form-grid span {
        font-size: 10px;
        color: #4b5563
    }

    .profile-form-grid input, .profile-form-grid select {
        height: 42px;
        border: 1px solid #dfe3e8;
        border-radius: var(--app-card-radius);
        padding: 0 10px;
        background: #fff;
        font: inherit
    }

.profile-save-btn {
    width: 100%;
    height: 45px;
    border: 0;
    border-radius: var(--app-card-radius);
    margin-top: 14px;
    background: var(--primary-dark,#0f766e);
    color: #fff;
    font-weight: 600
}

@media(min-width:760px) {
    .profile-page {
        max-width: 860px;
        margin: auto
    }

    .profile-sheet {
        max-width: 560px;
        margin: auto;
        border-radius: 5px 5px 0 0
    }
}
.auth-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 22px 18px 28px;
    color: #111827;
    background: url(/assets/images/topbg.gif);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fafcfc;
}

.auth-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden
}

    .auth-background:before, .auth-background:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        filter: blur(1px)
    }
 

    .auth-background:after {
        width: 220px;
        height: 220px;
        bottom: -110px;
        left: -100px;
        background: rgba(15,23,42,.04)
    }

.auth-road-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .08
}

    .auth-road-lines path {
        fill: none;
        stroke: var(--primary-dark,#b70322);
        stroke-width: 2;
        stroke-dasharray: 9 12
    }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    background: transparent;
    left: 30px;
    top: 115px;
}

.auth-logo {
    width: 143px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: var(--app-card-radius);
}

    .auth-logo svg {
        width: 31px;
        height: 31px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.auth-brand strong {
    display: block;
    font-size: 17px;
    font-weight: 600
}

.auth-brand span {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500
}

.auth-shell {
    position: absolute;
    z-index: 2;
    max-width: 430px;
    margin: auto;
    bottom: 15px;
    left: 20px;
    right: 20px;
    background: transparent;
    padding-bottom: 20px;
}

.auth-visual {
    position: relative;
    width: 100%;
    height: 235px;
    display: grid;
    place-items: center;
    margin-top: 8px
}

    .auth-visual > svg {
        position: relative;
        z-index: 2;
        width: 92%;
        max-width: 350px
    }

.auth-visual-ring {
    position: absolute;
    width: 208px;
    height: 208px;
    border-radius: 50%;
    background: radial-gradient(circle,#fff 0 43%,var(--primary-soft,rgba(217,4,41,.08)) 44% 62%,transparent 63%);
    filter: drop-shadow(0 18px 30px rgba(15,23,42,.07))
}

.auth-car-shadow {
    fill: rgba(15,23,42,.08)
}

.auth-car-body {
    fill: #fff;
    stroke: var(--primary-dark,#b70322);
    stroke-width: 3
}

.auth-car-glass {
    fill: #e9eef4;
    stroke: #94a3b8;
    stroke-width: 1.5
}

.auth-car-line {
    stroke: #cbd5e1;
    stroke-width: 1.5
}

.auth-wheel {
    fill: #1f2937;
    stroke: #0f172a;
    stroke-width: 2
}

.auth-wheel-core {
    fill: #cbd5e1
}

.auth-light {
    fill: var(--primary-dark,#b70322);
    opacity: .85
}

.auth-card {
    padding: 20px;
    backdrop-filter: blur(12px);
}

.auth-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    justify-content: center;
}

.auth-step-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: var(--app-card-radius);
    background: var(--primary-soft,rgba(217,4,41,.08));
    color: var(--primary-dark,#b70322)
}

    .auth-step-icon svg {
        width: 23px;
        height: 23px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }
.auth-card-head h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--app-primary-dark);
    text-shadow: 0px 0px 8px var(--app-primary-soft);
    font-family: __yekanBakh_8b585f, __yekanBakh_Fallback_8b585f;
}

.auth-card-head p {
    margin: 5px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.7
}

.auth-field {
    display: block
}

    .auth-field > span {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600
    }

.auth-input-wrap {
    height: 52px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #ffffff;
    border-radius: var(--app-card-radius);
    background: #fff;
    transition: .2s;
    box-shadow: 0 0 20px 0px rgb(179 255 250);
    direction: ltr;
    text-align: center;
}

    .auth-input-wrap_old:focus-within {
        border-color: var(--primary-dark,#b70322);
        box-shadow: 0 0 0 3px var(--primary-soft,rgba(217,4,41,.08))
    }

    .auth-input-wrap svg {
        width: 21px;
        height: 21px;
        color: #94a3b8;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .auth-input-wrap input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 16px;
        direction: ltr;
        text-align: left;
        font-family: inherit
    }

.auth-field small, .auth-code-meta > small {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: #dc2626;
    font-size: 11px
}

.auth-primary-btn {
    width: 100%;
    height: 52px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: linear-gradient(135deg, var(--app-primary-dark), #07d7cb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    box-shadow: 0 12px 26px var(--primary-soft,rgba(217,4,41,.18));
    cursor: pointer;
    direction: ltr;
}

    .auth-primary-btn svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .auth-primary-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
        box-shadow: none
    }

    .auth-primary-btn.is-loading span {
        opacity: .7
    }

.auth-change-mobile {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: #f8fafc47;
    padding: 10px;
    border-radius: var(--app-card-radius);
    color: #475569;
    font-family: inherit;
    cursor: pointer;
    backdrop-filter: blur(12px);
    flex-direction: row-reverse;
}

    .auth-change-mobile svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .auth-change-mobile span {
        direction: ltr;
        margin-left: auto;
        font-size: 12px
    }

    .auth-change-mobile strong {
        font-size: 11px;
        color: var(--app-primary-dark);
        font-weight: 600;
    }

.auth-code-boxes {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin: 18px 0 8px
}

    .auth-code-boxes input {
        width: 100%;
        height: 58px;
        border: 1px solid #dbe1e8;
        border-radius: var(--app-card-radius);
        background: #fff;
        text-align: center;
        font-family: inherit;
        font-size: 24px;
        font-weight: 600;
        outline: 0;
        caret-color: var(--primary-dark,#b70322);
        transition: .18s
    }

        .auth-code-boxes input:focus, .auth-code-boxes input.has-value {
            border-color: var(--app-primary,00cec8);
            box-shadow: 0 0 20px 0px rgb(179 255 250);
        }

.auth-code-meta {
    min-height: 44px;
    text-align: center
}

    .auth-code-meta > div {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #64748b;
        font-size: 11px
    }

    .auth-code-meta svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .auth-code-meta strong {
        direction: ltr;
        color: #111827;
        font-weight: 600
    }

    .auth-code-meta button {
        background: transparent;
        border: 0;
        color: var(--app-primary-dark);
        font-size: 14px;
        line-height: 8px;
        font-weight: bold;
    }

.auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed #e2e8f0;
    color: #64748b;
    font-size: 10px
}

    .auth-security svg {
        width: 17px;
        height: 17px;
        color: #16a34a;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.auth-footer {
    text-align: center;
    padding: 18px 10px 0;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.8
}

.auth-toast {
    position: fixed;
    z-index: 1000;
    right: 18px;
    left: 18px;
    bottom: 24px;
    max-width: 394px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--app-card-radius);
    background: #111827;
    color: #fff;
    box-shadow: 0 15px 40px rgba(15,23,42,.25);
    font-size: 12px
}

    .auth-toast svg {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

[hidden] {
    display: none !important
}

@media(min-width:760px) {
    .auth-page23=2 {
        display: flex;
        align-items: center
    }

    .auth-shell {
        width: 430px
    }

 

    .auth-visual {
        height: 210px;
        margin-top: 0
    }

    .auth-card {
        padding: 8px
    }
}
body.hide-app-navigation .app-bottom-nav {
    display: none !important;
}
body.hide-app-navigation .app-shell,
body.hide-app-navigation .app-content,
body.hide-app-navigation .page-page {
    padding-bottom: 0 !important;
}
body.hide-app-navigation .app-bottom-nav,
body.hide-app-navigation .app-header {
    display: none !important;
}
body.hide-app-navigation .app-shell {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.hide-app-navigation .app-page {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding: 0;
}
body.hide-app-navigation .sos-button {
    display: none !important;
}
.sa-page {
    --sa-primary: var(--primary,#00bfb4);
    --sa-primary-dark: var(--primary-dark,#008f88);
    --sa-soft: rgba(0,191,180,.09);
    --sa-border: rgba(15,23,42,.09);
    min-height: 100%;
    background: linear-gradient(180deg,#f3fbfa 0,#f7f8fa 230px,#f7f8fa 100%);
    color: #172033;
    padding: 0 0 96px;
    direction: rtl
}

.sa-hidden {
    display: none !important
}

.sa-header {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 14px;
    background: linear-gradient(135deg,#fff 0,#e6faf8 58%,#d6f6f3 100%);
    border-bottom: 1px solid rgba(0,143,136,.12);
    overflow: hidden
}

    .sa-header:after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border: 24px solid rgba(0,191,180,.08);
        border-radius: 50%;
        left: -55px;
        top: -75px
    }

.sa-header-title {
    position: relative;
    text-align: center;
    z-index: 1
}

    .sa-header-title strong {
        display: block;
        font-size: 17px;
        font-weight: 600
    }

    .sa-header-title span {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        color: #64748b
    }

.sa-icon-btn {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: rgba(255,255,255,.82);
    display: grid;
    place-items: center;
    color: #334155;
    box-shadow: 0 6px 18px rgba(15,23,42,.05)
}

    .sa-icon-btn svg {
        width: 21px;
        height: 21px
    }

.sa-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px 8px
}

    .sa-progress > span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #94a3b8;
        font-size: 11px;
        white-space: nowrap
    }

    .sa-progress b {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid #dbe2ea;
        background: #fff;
        font-size: 11px;
        font-weight: 600
    }

    .sa-progress em {
        font-style: normal;
        font-weight: 500
    }

    .sa-progress i {
        height: 1px;
        min-width: 28px;
        max-width: 70px;
        flex: 1;
        background: #dbe2ea;
        margin: 0 7px
    }

    .sa-progress span.active {
        color: var(--sa-primary-dark)
    }

        .sa-progress span.active b {
            background: var(--sa-primary);
            border-color: var(--sa-primary);
            color: #fff
        }

    .sa-progress span.current em {
        font-weight: 600
    }

.sa-content, .sa-loading, .sa-error {
    padding: 12px 14px
}

.sa-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.sa-select-card {
    width: 100%;
    display: grid;
    grid-template-columns: 50px 1fr 25px;
    align-items: center;
    gap: 11px;
    text-align: right;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(15,23,42,.045);
    transition: .2s
}

    .sa-select-card:active {
        transform: scale(.99)
    }

    .sa-select-card.selected {
        border-color: rgba(0,191,180,.35);
        box-shadow: 0 9px 26px rgba(0,143,136,.09)
    }

.sa-select-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: var(--sa-soft);
    color: var(--sa-primary-dark);
    overflow: hidden
}

    .sa-select-icon svg {
        width: 27px
    }

    .sa-select-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.sa-select-text small, .sa-select-text em {
    display: block;
    font-style: normal
}

.sa-select-text small {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 3px
}

.sa-select-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b
}

.sa-select-text em {
    font-size: 11px;
    color: #64748b;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sa-select-arrow {
    color: #94a3b8
}

    .sa-select-arrow svg {
        width: 18px
    }

.sa-panel {
    margin-top: 12px;
    border: 1px solid var(--sa-border);
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 14px;
    box-shadow: 0 8px 24px rgba(15,23,42,.04)
}

.sa-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px
}

    .sa-panel-head small {
        font-size: 10px;
        color: var(--sa-primary-dark);
        font-weight: 600
    }

    .sa-panel-head h2 {
        font-size: 14px;
        margin: 3px 0 0;
        font-weight: 600
    }

.sa-panel-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--app-card-radius);
    background: var(--sa-soft);
    color: var(--sa-primary-dark);
    display: grid;
    place-items: center
}

    .sa-panel-icon svg {
        width: 20px
    }

.sa-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 1px 7px;
    scrollbar-width: none
}

    .sa-days::-webkit-scrollbar {
        display: none
    }

.sa-day {
    position: relative;
    flex: 0 0 89px;
    min-height: 116px;
    border: 1px solid #e5eaf0;
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 12px 8px 9px;
    text-align: center;
    color: #475569;
    transition: .2s
}

    .sa-day .sa-best-badge {
        position: absolute;
        top: -7px;
        right: 7px;
        left: 7px;
        background: #172033;
        color: #fff;
        border-radius: var(--app-card-radius);
        font-size: 8px;
        padding: 3px
    }

.sa-day-week {
    display: block;
    font-size: 10px;
    margin-top: 4px
}

.sa-day strong {
    display: block;
    font-size: 25px;
    line-height: 1.25;
    margin: 5px 0 1px;
    font-weight: 600;
    color: #172033
}

.sa-day > span:not(.sa-best-badge):last-of-type {
    font-size: 10px
}

.sa-day em {
    display: block;
    font-style: normal;
    font-size: 9px;
    color: #16a085;
    margin-top: 8px
}

    .sa-day em i {
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #20c997;
        margin-left: 4px
    }

.sa-day.active {
    background: linear-gradient(150deg,var(--sa-primary),var(--sa-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,143,136,.21)
}

    .sa-day.active strong, .sa-day.active em {
        color: #fff
    }

.sa-day b {
    position: absolute;
    left: 6px;
    bottom: 6px;
    width: 16px;
    color: #fff
}

.sa-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.sa-slot {
    position: relative;
    min-height: 88px;
    display: grid;
    grid-template-columns: 34px 1fr 18px;
    align-items: center;
    gap: 8px;
    border: 1px solid #e4e9ef;
    border-radius: var(--app-card-radius);
    background: #fff;
    padding: 11px;
    text-align: right;
    color: #334155;
    transition: .18s
}

    .sa-slot:not(:disabled):active {
        transform: scale(.985)
    }

.sa-slot-clock {
    width: 32px;
    height: 32px;
    border-radius: var(--app-card-radius);
    background: #f1f5f9;
    display: grid;
    place-items: center;
    color: #64748b
}

    .sa-slot-clock svg {
        width: 18px
    }

.sa-slot-main strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    direction: ltr;
    text-align: right
}

.sa-slot-main small {
    display: block;
    font-size: 9px;
    color: #16a085;
    margin-top: 5px
}

.sa-slot-badge {
    position: absolute;
    top: -6px;
    right: 8px;
    background: #172033;
    color: #fff;
    border-radius: var(--app-card-radius);
    font-size: 8px;
    font-style: normal;
    padding: 3px 5px
}

.sa-slot b {
    width: 17px;
    color: #94a3b8
}

.sa-slot.active {
    border-color: var(--sa-primary);
    background: var(--sa-soft);
    box-shadow: 0 8px 20px rgba(0,143,136,.1)
}

    .sa-slot.active .sa-slot-clock {
        background: var(--sa-primary);
        color: #fff
    }

    .sa-slot.active b {
        color: var(--sa-primary-dark)
    }

.sa-slot.last {
    border-color: #f6c453;
    background: #fffaf0
}

    .sa-slot.last .sa-slot-main small {
        color: #b7791f
    }

.sa-slot.full, .sa-slot:disabled {
    opacity: .63;
    background: #f4f6f8;
    border-style: dashed;
    cursor: not-allowed
}

    .sa-slot.full .sa-slot-main small {
        color: #ef4444
    }

.sa-fields {
    display: grid;
    gap: 12px
}

.sa-field > span {
    display: block;
    font-size: 11px;
    font-weight: 300;
    margin-bottom: 6px
}

    .sa-field > span small {
        font-weight: 300;
        color: #94a3b8
    }

.sa-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dfe5eb;
    border-radius: var(--app-card-radius);
    background: #fbfcfd;
    overflow: hidden
}

    .sa-input-wrap input {
        flex: 1;
        border: 0;
        background: transparent;
        min-width: 0;
        padding: 12px;
        font-size: 13px;
        outline: 0
    }

    .sa-input-wrap em {
        font-style: normal;
        font-size: 10px;
        color: #64748b;
        padding: 0 11px;
        border-right: 1px solid #e5e7eb
    }

.sa-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #dfe5eb;
    border-radius: var(--app-card-radius);
    background: #fbfcfd;
    padding: 11px;
    font: inherit;
    font-size: 12px;
    resize: vertical;
    outline: 0
}

    .sa-field textarea:focus, .sa-input-wrap:focus-within {
        border-color: var(--sa-primary)
    }

.sa-field > b {
    display: block;
    text-align: left;
    font-size: 9px;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 500
}

.sa-summary {
    margin-top: 12px;
    border-radius: var(--app-card-radius);
    background: linear-gradient(145deg,#172033,#25324a);
    color: #fff;
    padding: 14px;
    box-shadow: 0 12px 28px rgba(15,23,42,.18)
}

.sa-summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .sa-summary-head > span {
        width: 34px;
        height: 34px;
        color: #5eead4
    }

    .sa-summary-head small, .sa-summary-head strong {
        display: block
    }

    .sa-summary-head small {
        font-size: 9px;
        color: #cbd5e1
    }

    .sa-summary-head strong {
        font-size: 12px;
        font-weight: 600;
        margin-top: 3px
    }

.sa-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px
}

    .sa-summary-grid > div:last-child {
        grid-column: 1/-1
    }

    .sa-summary-grid small {
        display: block;
        font-size: 9px;
        color: #94a3b8
    }

    .sa-summary-grid strong {
        display: block;
        font-size: 11px;
        font-weight: 300;
        margin-top: 4px
    }

 

.sa-primary-btn {
    border: 0;
    border-radius: var(--app-card-radius);
    background: linear-gradient(135deg,var(--sa-primary),var(--sa-primary-dark));
    color: #fff;
    min-height: 43px;
    padding: 0 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0,143,136,.2)
}

    .sa-primary-btn svg {
        width: 17px
    }

.sa-picker {
    position: fixed;
    inset: 0;
    z-index: 9999
}

.sa-picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.48);
    backdrop-filter: blur(2px)
}
 

.sa-picker-handle {
    width: 44px;
    height: 4px;
    border-radius: var(--app-card-radius);
    background: #d5dbe2;
    margin: 0 auto 12px
}

.sa-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .sa-picker-head strong, .sa-picker-head span {
        display: block
    }

    .sa-picker-head strong {
        font-size: 14px;
        font-weight: 600
    }

    .sa-picker-head span {
        font-size: 10px;
        color: #64748b;
        margin-top: 3px
    }

.sa-picker-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    border: 1px solid #e1e6eb;
    border-radius: var(--app-card-radius);
    padding: 0 10px;
    background: #f8fafc
}

    .sa-picker-search svg {
        width: 18px;
        color: #94a3b8
    }

    .sa-picker-search input {
        flex: 1;
        border: 0;
        background: transparent;
        padding: 11px 0;
        outline: 0;
        font-size: 12px
    }

.sa-picker-list {
    overflow-y: auto;
    max-height: 55vh
}

.sa-picker-item {
    width: 100%;
    display: grid;
    grid-template-columns: 45px 1fr 22px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid #eef1f4;
    background: #fff;
    padding: 10px 2px;
    text-align: right
}

    .sa-picker-item.active {
        background: var(--sa-soft)
    }

.sa-picker-image {
    width: 43px;
    height: 43px;
    border-radius: var(--app-card-radius);
    background: #f1f5f9;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--sa-primary-dark)
}

    .sa-picker-image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .sa-picker-image svg {
        width: 24px
    }

.sa-picker-text strong, .sa-picker-text em {
    display: block
}

.sa-picker-text strong {
    font-size: 12px;
    font-weight: 600
}

.sa-picker-text em {
    font-size: 9px;
    color: #64748b;
    font-style: normal;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 3px
}

    .sa-picker-text em svg {
        width: 13px
    }

.sa-picker-state {
    color: #94a3b8
}

    .sa-picker-state svg {
        width: 19px
    }

.sa-inline-loading {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 18px
}

    .sa-inline-loading span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sa-primary);
        animation: saPulse 1s infinite alternate
    }

        .sa-inline-loading span:nth-child(2) {
            animation-delay: .2s
        }

        .sa-inline-loading span:nth-child(3) {
            animation-delay: .4s
        }

.sa-empty, .sa-error {
    text-align: center;
    padding: 28px 16px
}

    .sa-empty > span, .sa-error-icon {
        width: 46px;
        height: 46px;
        border-radius: var(--app-card-radius);
        background: var(--sa-soft);
        color: var(--sa-primary-dark);
        display: grid;
        place-items: center;
        margin: 0 auto 10px
    }

    .sa-empty svg {
        width: 25px
    }

    .sa-empty strong, .sa-error strong {
        display: block;
        font-size: 13px;
        font-weight: 600
    }

    .sa-empty p, .sa-error p {
        font-size: 10px;
        color: #64748b;
        line-height: 1.8
    }

.sa-skeleton {
    height: 76px;
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg,#edf1f4 25%,#f8fafb 50%,#edf1f4 75%);
    background-size: 200% 100%;
    animation: saShimmer 1.4s infinite;
    margin-bottom: 10px
}

.sa-skeleton-wide {
    height: 100px
}

.sa-skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.sa-skeleton-tall {
    height: 170px
}

.sa-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: saSpin .7s linear infinite
}

@keyframes saPulse {
    to {
        transform: translateY(-5px);
        opacity: .35
    }
}

@keyframes saShimmer {
    to {
        background-position: -200% 0
    }
}

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

@media(min-width:760px) {
    .sa-page {
        max-width: 500px;
        margin: 0 auto;
        min-height: 100vh;
        box-shadow: 0 0 40px rgba(15,23,42,.08)
    }

    .sa-bottom-bar {
        max-width: 500px;
        margin: auto
    }
 

    .sa-slots {
        grid-template-columns: repeat(3,1fr)
    }
}
.business-cover-wrapper {
    position: relative;
}


.business-open, .business-close, .business-verified {
    position: absolute;
    padding: 4px 10px;
    border-radius: var(--app-card-radius);
    font-size: 11px;
    color: #fff;
}
.business-cover-wrapper {
    position: relative;
    overflow: hidden;
}


    .business-cover-wrapper .business-verified {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 5;
        background: #007bff;
        color: #fff;
        padding: 4px 10px;
        border-radius: var(--app-card-radius);
        font-size: 11px;
        line-height: 1;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        gap: 4px;
    }

.business-open {
    right: 10px;
    bottom: 10px;
    background: #00a878;
}

.business-close {
    left: 5px;
    bottom: 5px;
    background: #e74c3c;
}


.business-verified {
    top: 10px;
    right: 10px;
    background: #007bff;
}


.business-parent-info {
    margin-top: 8px;
    background: #eef7ff;
    color: #0066cc;
    padding: 6px 10px;
    border-radius: var(--app-card-radius);
    font-size: 12px;
}


    .business-parent-info.main {
        background: #fff7e6;
        color: #b26a00;
    }


/* Service Appointment UI Extension */
.sa-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid #e8e8e8;
    border-radius: var(--app-card-radius);
    background: #fff;
    cursor: pointer;
}

    .sa-service-card strong {
        display: block
    }

    .sa-service-card small {
        color: #777
    }

.sa-service-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--app-card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eefdfa;
}


.vehicle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 3px;
    font-size: 14px;
    color: #444;
    line-height: 32px;
    max-height: 200px;
    overflow: auto;
}
.vehicle-tag {
    background: var(--app-primary-dark);
    padding: 2px 3px;
    color: var(--app-bg);
    border-radius: var(--app-card-radius);
    font-size: 9px;
    line-height: 20px;
    height: 24px;
}
 
    .business-type-list {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .business-type-list::-webkit-scrollbar {
        display: none;
    }

.business-status-filter {
    padding: 10px;
    background: #fff;
    border: 1px solid #eceff1;
    border-radius: var(--app-card-radius);
    display: flex;
    gap: 10px;
    align-content: center;
    align-items: center;
}

.business-status-filter-title {
    display: block;
    margin-bottom: 8px;
    color: #707780;
    font-size: 12px;
    font-weight: 600;
}

.business-status-list {
    display: flex;
    align-items: center;
    gap: 7px;
}

.business-status-chip {
    min-height: 34px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #e3e6e8;
    border-radius: var(--app-card-radius);
    background: #f7f8f8;
    color: #555d66;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

    .business-status-chip.active {
        background: var(--primary-dark);
        border-color: var(--primary-dark);
        color: #fff;
    }

.business-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
}

.business-status-chip.active-status:not(.active) {
    color: #15945c;
    background: #f0fbf5;
    border-color: #ccefdc;
}

.business-status-chip.suspended-status:not(.active) {
    color: #d98716;
    background: #fff8eb;
    border-color: #f4dfb9;
}

.business-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.business-activity-status {
    flex: 0 0 auto;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: var(--app-card-radius);
    font-size: 10px;
    font-weight: 700;
}

    .business-activity-status > span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

    .business-activity-status.active {
        color: #118552;
        background: #eaf9f1;
    }

    .business-activity-status.suspended {
        color: #c57609;
        background: #fff3de;
    }

/* ===========================================
   Cms Viewer
=========================================== */

.cms-viewer-page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - var(--app-header-height,70px) - var(--app-bottom-nav-height,72px));
    overflow: hidden;
    background: #ffffff;
}


/* ---------- Header ---------- */

.cms-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.05);
    z-index: 5;
}


.cms-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ---------- Iframe ---------- */

.cms-content {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}


 

/* ---------- Menu ---------- */

.cms-menu {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.05);
}


    .cms-menu::-webkit-scrollbar {
        display: none;
    }


    .cms-menu button {
        flex: 0 0 auto;
        height: 38px;
        padding: 0 16px;
        border: 0;
        border-radius: var(--app-card-radius);
        background: #f3f5f6;
        color: #444;
        font-size: 13px;
        font-weight: 600;
    }


        .cms-menu button.active {
            background: #00ded1;
            color: #fff;
        }


/* ---------- Loading ---------- */

.cms-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    z-index: 20;
}


    .cms-loading.hide {
        display: none;
    }
/* صفحه */
.cms-viewer-page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* قسمت نمایش */
.cms-content {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
}


#cmsFrame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: stretch;
    border: 0;
    display: block;
    bottom: 86px;
    overflow-x: hidden;
}
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.home-header-profile {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
}

.home-header-profile-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-menu-button {
    flex: 0 0 auto;
}

    .header-menu-button svg {
        width: 25px;
        height: 25px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

/* =====================================================
           Drawer Overlay
        ===================================================== */

.app-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(9, 20, 24, 0.52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}

    .app-drawer-overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* =====================================================
           Drawer
        ===================================================== */

.app-side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: min(86vw, 340px);
    background: var(--app-surface, #ffffff);
    color: var(--app-text, #172427);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    visibility: hidden;
    box-shadow: -16px 0 45px rgba(8, 33, 35, 0.18);
    transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.25, 1), visibility 0.32s ease;
    overflow: hidden;
}

    .app-side-drawer.is-open {
        transform: translateX(0);
        visibility: visible;
    }

.drawer-header {
    position: relative;
    padding: calc(22px + env(safe-area-inset-top)) 18px 22px;
    overflow: hidden;
    background: linear-gradient( 145deg, #007d79 0%, #009f99 55%, #00c4bc 100% );
    color: #ffffff;
}

    .drawer-header::before {
        content: "";
        position: absolute;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        top: -90px;
        left: -60px;
        background: rgba(255, 255, 255, 0.12);
    }

    .drawer-header::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        bottom: -75px;
        right: -35px;
        background: rgba(255, 255, 255, 0.1);
    }

.drawer-close-button {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
}

    .drawer-close-button svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.drawer-profile {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 20px;
}

.drawer-avatar-wrapper {
    position: relative;
    flex: 0 0 auto;
}

.drawer-avatar {
    width: 64px;
    height: 64px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.88);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 54, 52, 0.22);
}

.drawer-avatar-status {
    position: absolute;
    bottom: 1px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #35d375;
}

.drawer-user-info {
    min-width: 0;
}

    .drawer-user-info strong {
        display: block;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .drawer-user-info span {
        display: block;
        font-size: 12px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.84);
    }

.drawer-summary {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 20px;
}

.drawer-summary-item {
    min-width: 0;
    padding: 9px 4px;
    text-align: center;
    border-radius: var(--app-card-radius);
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

    .drawer-summary-item strong {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        font-weight: 700;
    }

    .drawer-summary-item span {
        display: block;
        font-size: 10px;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.82);
    }

/* =====================================================
           Drawer Menu
        ===================================================== */

.drawer-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 13px 12px 22px;
}

.drawer-section-title {
    padding: 8px 12px;
    margin-bottom: 2px;
    color: #809092;
    font-size: 11px;
    font-weight: 600;
}

.drawer-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drawer-menu-item {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 11px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: transparent;
    color: inherit;
    text-align: right;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .drawer-menu-item:active {
        transform: scale(0.985);
    }

    .drawer-menu-item:hover {
        background: rgba(0, 137, 133, 0.08);
    }

    .drawer-menu-item.active {
        color: #008985;
        background: rgba(0, 137, 133, 0.1);
    }

.drawer-menu-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-card-radius);
    background: #f1f7f7;
    color: #247b78;
}

.drawer-menu-item.active .drawer-menu-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #008985, #00b5af);
}

.drawer-menu-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drawer-menu-text {
    min-width: 0;
    flex: 1;
}

    .drawer-menu-text strong {
        display: block;
        font-size: 13px;
        font-weight: 650;
    }

    .drawer-menu-text span {
        display: block;
        margin-top: 2px;
        color: #8a989a;
        font-size: 10px;
        font-weight: 300;
    }

.drawer-menu-arrow {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #9eaaac;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drawer-menu-badge {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: var(--app-card-radius);
    color: #ffffff;
    background: #ed3d55;
    font-size: 10px;
    font-weight: 700;
}

.drawer-divider {
    height: 1px;
    margin: 10px 6px;
    background: rgba(70, 92, 95, 0.1);
}

.drawer-menu-item.danger {
    color: #d64052;
}

    .drawer-menu-item.danger .drawer-menu-icon {
        color: #d64052;
        background: rgba(214, 64, 82, 0.09);
    }

/* =====================================================
           Drawer Footer
        ===================================================== */

.drawer-footer {
    padding: 11px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(70, 92, 95, 0.08);
    text-align: center;
    color: #93a0a2;
    font-size: 10px;
    font-weight: 300;
}

/* =====================================================
           Body Lock
        ===================================================== */

body.drawer-open {
    overflow: hidden;
    touch-action: none;
}

/* =====================================================
           Dark Mode Support
        ===================================================== */

body.dark-mode .app-side-drawer,
[data-theme="dark"] .app-side-drawer {
    background: #142023;
    color: #edf5f5;
}

body.dark-mode .drawer-menu-icon,
[data-theme="dark"] .drawer-menu-icon {
    background: #203033;
}

body.dark-mode .drawer-menu-item:hover,
[data-theme="dark"] .drawer-menu-item:hover {
    background: rgba(0, 222, 209, 0.08);
}

body.dark-mode .drawer-menu-text span,
[data-theme="dark"] .drawer-menu-text span {
    color: #829194;
}

/* =====================================================
           Desktop
        ===================================================== */

@media (min-width: 700px) {
    .app-side-drawer {
        width: 360px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-side-drawer,
    .app-drawer-overlay {
        transition: none;
    }
}
/* =====================================================
   Notifications Page
===================================================== */

.notifications-page {
    position: relative;
    min-height: 100%;
    padding: 0 0 96px;
    background: linear-gradient( 180deg, rgba(0, 222, 209, 0.055) 0, rgba(0, 222, 209, 0) 210px ), var(--app-background, #f7f9f9);
}


/* =====================================================
   Header
===================================================== */

.notifications-header {
    padding: 17px 15px 8px;
}

.notifications-header-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.notifications-heading {
    min-width: 0;
    flex: 1;
}

.notifications-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .notifications-title-row h1 {
        margin: 0;
        color: var(--app-text, #172427);
        font-size: 20px;
        font-weight: 750;
        line-height: 1.5;
    }

.notifications-heading p {
    margin: 3px 0 0;
    color: var(--app-text-muted, #7d8a8d);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.9;
}

.notifications-count {
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-card-radius);
    color: #ffffff;
    background: var(--primary-dark, #008985);
    font-size: 11px;
    font-weight: 700;
}

.notifications-read-all {
    min-height: 37px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--app-card-radius);
    color: var(--primary-dark, #008985);
    background: rgba(0, 137, 133, 0.09);
    font-family: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

    .notifications-read-all:active {
        transform: scale(0.97);
    }

    .notifications-read-all:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .notifications-read-all svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =====================================================
   Filters
===================================================== */

.notifications-filter {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px 11px;
    overflow-x: auto;
    background: linear-gradient( 180deg, rgba(247, 249, 249, 0.97), rgba(247, 249, 249, 0.91) );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    scrollbar-width: none;
}

    .notifications-filter::-webkit-scrollbar {
        display: none;
    }

.notifications-filter-item {
    height: 35px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    border: 1px solid rgba(65, 87, 90, 0.09);
    border-radius: var(--app-card-radius);
    color: var(--app-text-muted, #6f7e80);
    background: rgba(255, 255, 255, 0.84);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(22, 60, 62, 0.035);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .notifications-filter-item:active {
        transform: scale(0.96);
    }

    .notifications-filter-item.active {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient( 135deg, var(--primary-dark, #008985), #00b7ae );
        box-shadow: 0 7px 18px rgba(0, 137, 133, 0.2);
    }

.notifications-filter-badge {
    min-width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: var(--app-card-radius);
    color: #ffffff;
    background: #ef4058;
    font-size: 9px;
    font-weight: 700;
}

.notifications-filter-item.active
.notifications-filter-badge {
    color: var(--primary-dark, #008985);
    background: #ffffff;
}


/* =====================================================
   Notifications List
===================================================== */

.notifications-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 3px 13px 18px;
}


/* =====================================================
   Notification Item
===================================================== */

.notification-item {
    position: relative;
    width: 100%;
    min-height: 94px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 12px;
    border: 1px solid rgba(54, 78, 81, 0.075);
    border-radius: var(--app-card-radius);
    color: inherit;
    background: rgba(255, 255, 255, 0.94);
    text-align: right;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(22, 61, 63, 0.045);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .notification-item:active {
        transform: scale(0.985);
    }

    .notification-item:hover {
        border-color: rgba(0, 137, 133, 0.16);
        box-shadow: 0 8px 22px rgba(22, 61, 63, 0.075);
    }


    /* خط کنار اعلان خوانده‌نشده */

    .notification-item.unread::before {
        content: "";
        position: absolute;
        top: 13px;
        right: 0;
        bottom: 13px;
        width: 3px;
        border-radius: 3px 0 0 3px;
        background: linear-gradient( 180deg, #00ded1, var(--primary-dark, #008985) );
    }

    .notification-item.unread {
        border-color: rgba(0, 137, 133, 0.13);
        background: linear-gradient( 105deg, rgba(0, 222, 209, 0.055), rgba(255, 255, 255, 0.98) 50% );
    }


/* =====================================================
   Notification Icon
===================================================== */

.notification-icon {
    position: relative;
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-card-radius);
}

    .notification-icon svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.notification-icon-dot {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 11px;
    height: 11px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ef4058;
}


/* انواع اعلان */

.notification-icon.financial {
    color: #108566;
    background: rgba(20, 170, 127, 0.1);
}

.notification-icon.service {
    color: #2379cf;
    background: rgba(35, 121, 207, 0.1);
}

.notification-icon.warning {
    color: #dc8a12;
    background: rgba(231, 150, 27, 0.12);
}

.notification-icon.success {
    color: #248c4c;
    background: rgba(36, 140, 76, 0.11);
}

.notification-icon.system {
    color: #7556c7;
    background: rgba(117, 86, 199, 0.11);
}

.notification-icon.order {
    color: #d45b48;
    background: rgba(212, 91, 72, 0.11);
}


/* =====================================================
   Notification Content
===================================================== */

.notification-content {
    min-width: 0;
    flex: 1;
}

.notification-title-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.notification-title {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: var(--app-text, #172427);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.7;
}

.notification-new-badge {
    flex: 0 0 auto;
    margin-top: 2px;
    padding: 2px 6px;
    border-radius: var(--app-card-radius);
    color: #ffffff;
    background: #ef4058;
    font-size: 8px;
    font-weight: 700;
}

.notification-message {
    display: -webkit-box;
    margin: 3px 0 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--app-text-muted, #748184);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.85;
}

.notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    margin-top: 8px;
}

.notification-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #9aa5a7;
    font-size: 9px;
    font-weight: 300;
}

    .notification-time svg {
        width: 13px;
        height: 13px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.notification-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--primary-dark, #008985);
    font-size: 9px;
    font-weight: 650;
}

    .notification-action svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* =====================================================
   Date Group
===================================================== */

.notifications-date-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 3px 1px;
    color: #8a9799;
    font-size: 10px;
    font-weight: 600;
}

    .notifications-date-title::after {
        content: "";
        height: 1px;
        flex: 1;
        background: linear-gradient( 90deg, transparent, rgba(73, 95, 98, 0.09) );
    }


/* =====================================================
   Empty State
===================================================== */

.notifications-empty {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px 25px;
    text-align: center;
}

    .notifications-empty[hidden] {
        display: none;
    }

.notifications-empty-illustration {
    width: 115px;
    height: 115px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
}

    .notifications-empty-illustration svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke: var(--primary-dark, #008985);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .notifications-empty-illustration circle {
        fill: rgba(0, 222, 209, 0.075);
        stroke: none;
    }

    .notifications-empty-illustration
    .notifications-empty-spark {
        stroke: #00b9b0;
    }

.notifications-empty strong {
    color: var(--app-text, #172427);
    font-size: 15px;
    font-weight: 700;
}

.notifications-empty p {
    max-width: 260px;
    margin: 6px 0 0;
    color: var(--app-text-muted, #7d8b8e);
    font-size: 11px;
    font-weight: 300;
    line-height: 1.9;
}


/* =====================================================
   Loading Skeleton
===================================================== */

.notification-skeleton {
    height: 94px;
    padding: 13px 12px;
    display: flex;
    gap: 11px;
    border-radius: var(--app-card-radius);
    background: #ffffff;
}

.notification-skeleton-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 auto;
    border-radius: var(--app-card-radius);
    background: #edf2f2;
}

.notification-skeleton-content {
    flex: 1;
}

.notification-skeleton-line {
    height: 10px;
    margin-bottom: 9px;
    border-radius: var(--app-card-radius);
    background: #edf2f2;
}

    .notification-skeleton-line.title {
        width: 56%;
    }

    .notification-skeleton-line.text {
        width: 91%;
    }

    .notification-skeleton-line.short {
        width: 35%;
    }

.notification-skeleton-icon,
.notification-skeleton-line {
    background: linear-gradient( 90deg, #edf2f2 25%, #f7f9f9 50%, #edf2f2 75% );
    background-size: 200% 100%;
    animation: notificationSkeleton 1.3s infinite linear;
}

@keyframes notificationSkeleton {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/* =====================================================
   Dark Mode
===================================================== */

body.dark-mode .notifications-page,
[data-theme="dark"] .notifications-page {
    background: linear-gradient( 180deg, rgba(0, 222, 209, 0.045), transparent 210px ), #10191b;
}

body.dark-mode .notifications-filter,
[data-theme="dark"] .notifications-filter {
    background: rgba(16, 25, 27, 0.92);
}

body.dark-mode .notifications-filter-item,
[data-theme="dark"] .notifications-filter-item {
    color: #b5c1c3;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.045);
}

body.dark-mode .notification-item,
[data-theme="dark"] .notification-item {
    border-color: rgba(255, 255, 255, 0.06);
    background: #172326;
}

    body.dark-mode .notification-item.unread,
    [data-theme="dark"] .notification-item.unread {
        background: linear-gradient( 105deg, rgba(0, 222, 209, 0.075), #172326 55% );
    }

body.dark-mode .notification-icon-dot,
[data-theme="dark"] .notification-icon-dot {
    border-color: #172326;
}


/* =====================================================
   Desktop
===================================================== */

@media (min-width: 700px) {

    .notifications-page {
        max-width: 760px;
        min-height: 100%;
        margin: 0 auto;
    }

    .notifications-list {
        padding-right: 16px;
        padding-left: 16px;
    }
}
.business-service-search {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.business-service-search-box {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    background: var(--app-surface, #fff);
    border: 1px solid var(--app-border, #e4e7eb);
    border-radius: var(--app-card-radius);
}

    .business-service-search-box .business-svg {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        color: var(--primary-dark, #008985);
    }

    .business-service-search-box input {
        flex: 1;
        min-width: 0;
        height: 46px;
        padding: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 14px;
        color: var(--app-text, #222);
    }

        .business-service-search-box input::placeholder {
            color: var(--app-muted, #8a9199);
        }

.business-service-search-clear {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: #f0f2f3;
    font-size: 22px;
    line-height: 1;
    color: #667078;
    cursor: pointer;
}

.business-service-search-hint {
    min-height: 22px;
    font-size: 12px;
    font-weight: 300;
    color: var(--app-muted, #7b838b);
}

.business-service-search-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-dark, #008985);
}

.business-service-initial {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 220px;
    padding: 24px;
    text-align: center;
    color: var(--app-muted, #747d85);
}

    .business-service-initial .business-svg {
        width: 44px;
        height: 44px;
        color: var(--primary-dark, #008985);
    }

    .business-service-initial strong {
        color: var(--app-text, #222);
        font-size: 15px;
    }

    .business-service-initial p {
        margin: 0;
        font-size: 13px;
    }

.business-service-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--app-muted, #717981);
}

    .business-service-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .business-service-meta .business-svg {
        width: 15px;
        height: 15px;
    }

.business-service-price {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dark, #008985);
}

    .business-service-price small {
        margin-right: 4px;
        font-size: 11px;
        font-weight: 300;
    }

.business-service-load-more {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--primary-dark, #008985);
    border-radius: var(--app-card-radius);
    background: transparent;
    color: var(--primary-dark, #008985);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .business-service-load-more:disabled {
        opacity: .55;
        cursor: wait;
    }
.global-search-result {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--app-card-radius);
    box-shadow: 0 10px 30px #0002;
    overflow: hidden;
    z-index: 1000;
}


.search-item {
    display: flex;
    padding: 14px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}


    .search-item:hover {
        background: #f5fafa;
    }


    .search-item small {
        display: block;
        color: #00a99d;
        margin-top: 5px;
    }
/* ==============================
   Global Search
================================ */

.global-search-wrapper {
    position: relative;
    width: 100%;
}


#globalSearchResult {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: #fff;
    border-radius: var(--app-card-radius);
    box-shadow: 0 12px 35px rgba(0,0,0,.12);
    border: 1px solid #eeeeee;
    overflow: hidden;
    max-height: 420px;
    overflow-y: auto;
    z-index: 9999;
    display: none;
}



/* هر نتیجه */

.search-item {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    cursor: pointer;
    transition: .2s;
    border-bottom: 1px solid #f1f1f1;
    direction: rtl;
    flex-direction: column;
    position: relative;
    padding-right: 20px !important;
}



    .search-item:last-child {
        border-bottom: none;
    }



    .search-item:hover {
        background: #f6fbfa;
    }



    .search-item b {
        display: block;
        font-size: 14px;
        color: #222;
        font-weight: 700;
        line-height: 24px;
    }



    .search-item small {
        display: block;
        margin-top: 3px;
        color: #00a99d;
        font-size: 12px;
        font-weight: 600;
    }



    /* آیکون نوع نتیجه */

    .search-item::before {
        content: "";
        width: 5px;
        height: 38px;
        margin-left: 12px;
        border-radius: 0;
        background: var(--app-info);
        flex-shrink: 0;
        position: absolute;
        right: 5px;
    }



/* حالت خالی */

.search-empty {
    padding: 25px;
    text-align: center;
    color: #888;
    font-size: 14px;
}



/* موبایل */

@media(max-width:600px) {

    #globalSearchResult {
        border-radius: var(--app-card-radius);
        max-height: 350px;
    }


    .search-item {
        padding: 12px;
    }
}
.search-type {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}


    .search-type svg {
        width: 16px;
        height: 16px;
        stroke: var(--app-primary-dark);
        fill: none;
        stroke-width: 1;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    .search-type small {
        color: #00a99d;
        font-size: 12px;
        font-weight: 600;
    }

 

    /*map --------------------*//**/


.roadside-header {
    padding: 20px;
}



.roadside-map {
    position: relative;
    height: 100%;
    overflow: hidden;
}


.roadside-page {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}



#roadsideMap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.map-status {
    position: absolute;
    bottom: 15px;
    right: 15px;
    left: 15px;
    background: white;
    border-radius: var(--app-card-radius);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
    z-index: 500;
}


    .map-status svg {
        width: 22px;
        height: 22px;
        stroke: #d90429;
        fill: none;
    }



.radar {
    position: relative;
    width: 90px;
    height: 90px;
}



    .radar div {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid #d90429;
        animation: pulse 2s infinite;
    }



        .radar div:nth-child(2) {
            animation-delay: .6s;
        }


        .radar div:nth-child(3) {
            animation-delay: 1.2s;
        }



@keyframes pulse {

    from {
        transform: scale(.4);
        opacity: 1;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}




.problem-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.problem-card {
    border: 0;
    background: white;
    padding: 3px;
    border-radius: var(--app-card-radius);
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 10px;
    font-weight: 300;
    align-items: center;
}

    .problem-card.active {
        background: var(--app-primary-dark);
        color: white;
    }



.vehicle-box {
    background: white;
    padding: 15px;
    border-radius: var(--app-card-radius);
    margin-top: 20px;
}



.roadside-submit {
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
    height: 62px;
    border: none;
    border-radius: var(--app-card-radius);
    background: linear-gradient( 135deg, #d90429, #ff334f );
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(217,4,41,.35);
    transition: .3s;
    z-index: 999;
}

    .roadside-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(217,4,41,.45);
    }



    .roadside-submit:active {
        transform: scale(.97);
    }




/* موج اطراف دکمه */

.roadside-btn-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--app-card-radius);
    animation: roadsidePulse 2s infinite;
    border: 2px solid rgba(255,255,255,.5);
}




@keyframes roadsidePulse {


    0% {
        transform: scale(1);
        opacity: .8;
    }


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




/* نور متحرک روی دکمه */

.roadside-submit::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255,255,255,.5), transparent );
    transform: skewX(-25deg);
    animation: roadsideShine 3s infinite;
}



@keyframes roadsideShine {


    0% {
        left: -120%;
    }


    40% {
        left: 140%;
    }


    100% {
        left: 140%;
    }
}

.roadside-btn-icon svg {
    width: 51px;
    height: 46px;
    fill: white;
    animation: emergencyBeat 1.8s infinite;
    stroke: rebeccapurple;
    top: 2px;
    left: 11px;
    position: relative;
}


@keyframes emergencyBeat {


    0%,100% {
        transform: scale(0.7);
    }


    50% {
        transform: scale(1.48);
    }
}

.roadside-title {
    margin-top: 10px;
    padding-bottom: 14px;
    font-weight: 700;
    color: #fa2d4a;
}

.problem-card svg {
    width: 26px;
    height: 26px;
    display: block;
    stroke: var(--app-primary-dark);
}


.problem-card.active svg {
    stroke: white;
}

.sosBtnMenu {
    background: var(--app-primary-dark);
    border-radius: 100%;
    width: 81px;
    height: 81px;
    position: absolute;
    bottom: 12px;
    border: 5px solid #fff;
    box-shadow: 0 0 20px 1px var(--app-primary-soft);
    fill: #fff;
    color: #fff;
}

    .sosBtnMenu svg {
        width: 50px;
        height: 50px;
        position: relative;
        top: 3px;
        left: 1px;
    }

.app-page:has(.roadside-map) {
    padding-bottom: 10px !important;
}

    .app-page:has(.roadside-map) #appPageHost {
        height: 100%;
    }
.center-marker {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-100%);
    z-index: 999;
    pointer-events: none;
}


.marker-pin {
    width: 55px;
    height: 55px;
    background: #d90429;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
    transition: .25s;
}



    .marker-pin svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: white;
        stroke-width: 2;
        transform: rotate(45deg);
    }



.marker-shadow {
    width: 20px;
    height: 8px;
    background: rgba(0,0,0,.25);
    border-radius: 50%;
    margin: 15px auto 0;
    filter: blur(2px);
    transition: .25s;
}



/* وقتی نقشه حرکت می‌کند */

.roadside-map.moving .marker-pin {
    transform: translateY(-15px) rotate(-45deg);
}



.roadside-map.moving .marker-shadow {
    width: 12px;
    opacity: .4;
}



@keyframes markerDrop {


    0% {
        transform: translateY(-25px) rotate(-45deg);
    }


    70% {
        transform: translateY(5px) rotate(-45deg);
    }


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



.center-marker.drop .marker-pin {
    animation: markerDrop .35s ease;
}
.map-search {
    position: absolute;
    top: 18px;
    left: 15px;
    right: 15px;
    height: 50px;
    background: #fff;
    border-radius: var(--app-card-radius);
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    z-index: 900;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}



    .map-search input {
        flex: 1;
        border: none;
        outline: none;
        font-size: 14px;
        background: transparent;
    }



.map-search-icon {
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    cursor: pointer;
}
.map-tools {
    position: absolute;
    right: 15px;
    bottom: 102px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 900;
}



.map-tool {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0,0,0,.18);
    transition: .2s;
    color: red;
    fill: #fff;
}



    .map-tool:hover {
        transform: scale(1.08);
    }
.map-search-result {
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
    display: none;
}



.map-search-item {
    padding: 14px;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}



    .map-search-item strong {
        font-size: 14px;
    }



    .map-search-item span {
        color: #777;
        font-size: 12px;
    }
.maintenance-page {
    min-height: 100%;
    padding: 0 16px 110px;
    background: linear-gradient(180deg,#f5fbfa 0,#f7f8fa 250px,#f7f8fa 100%);
    color: #162326
}

    .maintenance-page svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.maintenance-header {
    height: 78px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    direction: ltr;
}

.maintenance-heading {
    text-align: center
}

    .maintenance-heading h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 800
    }

    .maintenance-heading p {
        margin: 5px 0 0;
        font-size: 11px;
        color: #758184
    }

.maintenance-icon-btn {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,137,133,.12);
    background: rgba(255,255,255,.9);
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: #163d3c;
    box-shadow: 0 7px 22px rgba(12,56,55,.07)
}

    .maintenance-icon-btn svg {
        width: 21px
    }

.maintenance-content {
    display: grid;
    gap: 14px
}

.maintenance-vehicle-card {
    position: relative;
    display: grid;
    grid-template-columns: 62px 1fr 24px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: #fff;
    border: 1px solid rgba(13,95,92,.09);
    border-radius: var(--app-card-radius);
    box-shadow: 0 12px 35px rgba(24,63,62,.08);
    cursor: pointer;
    overflow: hidden
}

    .maintenance-vehicle-card:before {
        content: "";
        position: absolute;
        right: -30px;
        top: -45px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(0,137,133,.07)
    }

.maintenance-vehicle-visual {
    width: 62px;
    height: 58px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: #008985;
    background: linear-gradient(145deg,#e8f8f6,#d8f1ee)
}

    .maintenance-vehicle-visual svg {
        width: 46px
    }

.maintenance-vehicle-info {
    min-width: 0;
    position: relative
}

    .maintenance-vehicle-info span, .maintenance-eyebrow {
        display: block;
        font-size: 10px;
        color: #839092;
        margin-bottom: 5px
    }

    .maintenance-vehicle-info strong {
        display: block;
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .maintenance-vehicle-info small {
        display: block;
        margin-top: 5px;
        color: #768184;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.maintenance-chevron {
    color: #97a4a5
}

    .maintenance-chevron svg {
        width: 18px
    }

.maintenance-mileage-panel {
    background: linear-gradient(145deg,#073f3d,#0a6b67);
    color: #fff;
    padding: 19px;
    border-radius: var(--app-card-radius);
    box-shadow: 0 16px 38px rgba(3,79,76,.22);
    position: relative;
    overflow: hidden
}

    .maintenance-mileage-panel:before, .maintenance-mileage-panel:after {
        content: "";
        position: absolute;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%
    }

    .maintenance-mileage-panel:before {
        width: 190px;
        height: 190px;
        left: -105px;
        top: -115px
    }

    .maintenance-mileage-panel:after {
        width: 120px;
        height: 120px;
        right: -60px;
        bottom: -70px
    }

.maintenance-mileage-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.maintenance-mileage-panel .maintenance-eyebrow {
    color: rgba(255,255,255,.66)
}

.maintenance-mileage-top h2 {
    margin: 0;
    font-size: 29px;
    letter-spacing: -1px
}

    .maintenance-mileage-top h2 small {
        font-size: 11px;
        font-weight: 300;
        color: rgba(255,255,255,.65)
    }

.maintenance-gauge {
    position: relative;
    width: 70px;
    height: 70px;
    display: grid;
    place-items: center
}

    .maintenance-gauge svg {
        position: absolute;
        width: 70px;
        height: 70px;
        transform: rotate(-90deg)
    }

    .maintenance-gauge circle {
        fill: none;
        stroke-width: 7
    }

.gauge-track {
    stroke: rgba(255,255,255,.12)
}

.gauge-value {
    stroke: #53e1d7;
    stroke-dasharray: 214;
    stroke-dashoffset: 171;
    transition: .4s
}

.maintenance-gauge span {
    font-size: 12px;
    font-weight: 800
}

.maintenance-range {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 19px 0 13px;
    accent-color: #53e1d7
}

.maintenance-mileage-input-wrap {
    position: relative;
    z-index: 1
}

    .maintenance-mileage-input-wrap label {
        display: block;
        font-size: 10px;
        color: rgba(255,255,255,.65);
        margin-bottom: 7px
    }

.maintenance-mileage-input {
    height: 48px;
    display: grid;
    grid-template-columns: 1fr 28px auto;
    align-items: center;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--app-card-radius);
    padding: 4px 5px 4px 12px
}

    .maintenance-mileage-input input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
        font-size: 17px;
        font-weight: 800;
        text-align: left;
        padding-left: 10px;
    }

    .maintenance-mileage-input > span {
        font-size: 10px;
        color: rgba(255,255,255,.6)
    }

    .maintenance-mileage-input button {
        height: 38px;
        border: 0;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #07524f;
        font-size: 11px;
        font-weight: 800;
        padding: 0 14px
    }

.maintenance-quick-mileages {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 7px;
    overflow: auto;
    margin-top: 12px;
    padding-bottom: 2px;
    scrollbar-width: none
}

    .maintenance-quick-mileages::-webkit-scrollbar {
        display: none
    }

    .maintenance-quick-mileages button {
        flex: 0 0 auto;
        border: 1px solid rgba(255,255,255,.12);
        background: rgba(255,255,255,.08);
        color: rgba(255,255,255,.78);
        height: 30px;
        padding: 0 11px;
        border-radius: var(--app-card-radius);
        font-size: 10px
    }

        .maintenance-quick-mileages button.active {
            background: #53e1d7;
            color: #073f3d;
            border-color: #53e1d7;
            font-weight: 800
        }

.maintenance-result {
    background: #fff;
    border: 1px solid rgba(16,67,65,.08);
    border-radius: var(--app-card-radius);
    padding: 17px;
    box-shadow: 0 12px 32px rgba(34,61,60,.06)
}

.maintenance-result-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

    .maintenance-result-head h2 {
        font-size: 16px;
        margin: 0;
        font-weight: 850
    }

    .maintenance-result-head p {
        font-size: 10px;
        color: #7c8789;
        margin: 6px 0 0
    }

.maintenance-status-badge {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: var(--app-card-radius);
    background: #e8f8f6;
    color: #007b77;
    font-size: 9px;
    font-weight: 800
}

.maintenance-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px;
    margin: 16px 0
}

    .maintenance-summary-grid > div {
        padding: 11px 8px;
        background: #f7f9f9;
        border-radius: var(--app-card-radius);
        text-align: center
    }

    .maintenance-summary-grid span {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: 4px
    }

.inspect-dot {
    background: #2e87d3
}

.replace-dot {
    background: #ef7658
}

.conditional-dot {
    background: #e4ae38
}

.maintenance-summary-grid strong {
    font-size: 16px
}

.maintenance-summary-grid small {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    color: #7a8587
}

.maintenance-tabs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 5px;
    padding: 4px;
    background: #f2f5f5;
    border-radius: var(--app-card-radius);
    margin-bottom: 12px
}

    .maintenance-tabs button {
        height: 36px;
        border: 0;
        background: transparent;
        border-radius: var(--app-card-radius);
        color: #748082;
        font-size: 10px
    }

        .maintenance-tabs button span {
            display: inline-grid;
            place-items: center;
            min-width: 18px;
            height: 18px;
            margin-right: 3px;
            border-radius: var(--app-card-radius);
            background: rgba(0,0,0,.04);
            font-size: 9px
        }

        .maintenance-tabs button.active {
            background: #fff;
            color: #075c59;
            font-weight: 800;
            box-shadow: 0 4px 14px rgba(17,52,51,.08)
        }

.maintenance-items {
    display: grid;
    gap: 8px
}

.maintenance-item {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid #edf0f0;
    border-radius: var(--app-card-radius);
    transition: .2s
}

.maintenance-item-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center
}

    .maintenance-item-icon svg {
        width: 17px
    }

.maintenance-item.inspect .maintenance-item-icon {
    background: #eaf4fd;
    color: #2678bd
}

.maintenance-item.replace .maintenance-item-icon {
    background: #fff0ec;
    color: #df6345
}

.maintenance-item strong {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.7
}

.maintenance-item small {
    display: block;
    font-size: 9px;
    color: #939c9e;
    margin-top: 2px
}

.maintenance-condition {
    padding: 5px 7px;
    border-radius: var(--app-card-radius);
    background: #fff7df;
    color: #a9790d;
    font-size: 8px;
    font-weight: 700
}

.maintenance-primary-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: linear-gradient(135deg,#008985,#006f6b);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    box-shadow: 0 10px 25px rgba(0,137,133,.2)
}

    .maintenance-primary-btn svg {
        width: 18px
    }

    .maintenance-primary-btn.compact {
        width: auto;
        padding: 0 24px;
        height: 42px;
        margin: 12px auto 0
    }

.maintenance-state {
    text-align: center;
    padding: 55px 20px
}

    .maintenance-state.compact-state {
        padding: 25px 20px
    }

.maintenance-state-icon {
    width: 58px;
    height: 58px;
    border-radius: var(--app-card-radius);
    background: #fff0ec;
    color: #df6345;
    display: grid;
    place-items: center;
    margin: 0 auto 12px
}

    .maintenance-state-icon.soft {
        background: #eaf7f5;
        color: #008985
    }

    .maintenance-state-icon svg {
        width: 27px
    }

.maintenance-state h3 {
    font-size: 14px;
    margin: 0
}

.maintenance-state p {
    font-size: 10px;
    color: #7d888a;
    line-height: 1.8
}

.maintenance-loading {
    display: grid;
    gap: 13px
}

.maintenance-skeleton {
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg,#edf1f1 25%,#f7f9f9 50%,#edf1f1 75%);
    background-size: 200% 100%;
    animation: maintenanceShimmer 1.3s infinite
}

    .maintenance-skeleton.hero {
        height: 88px
    }

    .maintenance-skeleton.card {
        height: 190px
    }

@keyframes maintenanceShimmer {
    to {
        background-position: -200% 0
    }
}

@media(min-width:700px) {
    .maintenance-page {
        max-width: 480px;
        margin: 0 auto;
        min-height: 100vh
    }
}





.faq-page {
    min-height: 100%;
    padding: 0 14px 110px;
    background: #f7faf9;
    color: #12211f;
    direction: rtl
}

    .faq-page * {
        box-sizing: border-box
    }

    .faq-page svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.faq-header {
    height: 72px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(247,250,249,.92);
    backdrop-filter: blur(14px);
    direction: ltr;
}

.faq-header-title {
    text-align: right
}

    .faq-header-title h1 {
        margin: 0;
        font-size: 18px;
        font-weight: 800
    }

    .faq-header-title p {
        margin: 3px 0 0;
        font-size: 11px;
        color: #72807e
    }

.faq-header-btn {
    width: 42px;
    height: 42px;
    border: 1px solid #e3ecea;
    background: #fff;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    color: #153c38
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.faq-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--app-card-radius);
    padding: 24px 18px 18px;
    background: linear-gradient(145deg,var(--app-primary-dark),var(--app-primary-dark) 58%,var(--app-primary));
    color: #fff;
    box-shadow: 0 18px 45px rgba(4,86,80,.2);
    color: var(--app-primary-dark);
    color: var(--app-primary);
}

.faq-hero-orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    pointer-events: none
}

.faq-hero .orb-one {
    width: 160px;
    height: 160px;
    left: -70px;
    top: -85px
}

.faq-hero .orb-two {
    width: 110px;
    height: 110px;
    right: -40px;
    bottom: -52px
}

.faq-hero-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.16);
    margin-bottom: 16px
}

    .faq-hero-icon svg {
        width: 27px;
        height: 27px
    }

.faq-hero-text {
    position: relative;
    z-index: 1
}

    .faq-hero-text > span {
        font-size: 11px;
        font-weight: 700;
        color: #aef4ef
    }

    .faq-hero-text h2 {
        font-size: 15px;
        line-height: 1.4;
        margin: 5px 0 7px;
        font-weight: 300;
    }

    .faq-hero-text p {
        font-size: 12px;
        line-height: 1.9;
        margin: 0;
        color: rgba(255,255,255,.78)
    }

.faq-search-box {
    height: 54px;
    margin-top: 20px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #24504c;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 25px rgba(0,0,0,.12)
}

    .faq-search-box input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 13px;
        color: #12211f
    }

        .faq-search-box input::placeholder {
            color: #9aacab
        }

    .faq-search-box > button {
        width: 30px;
        height: 30px;
        border: 0;
        border-radius: 9px;
        background: #edf6f5;
        color: #54706d;
        display: grid;
        place-items: center
    }

        .faq-search-box > button svg {
            width: 17px;
            height: 17px
        }

.faq-section {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.faq-section-heading, .faq-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 3px
}

    .faq-section-heading h2, .faq-results-header h2 {
        font-size: 16px;
        margin: 3px 0 0;
        font-weight: 300;
    }

.faq-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: #13867e
}

.faq-text-btn {
    border: 0;
    background: transparent;
    color: #14877f;
    font: inherit;
    font-size: 11px;
    font-weight: 800
}

.faq-popular-list {
    display: grid;
    gap: 9px
}

.faq-popular-item {
    width: 100%;
    display: grid;
    grid-template-columns: 42px 1fr 24px;
    align-items: center;
    gap: 10px;
    text-align: right;
    padding: 13px;
    border: 1px solid #e2ecea;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #142522;
    box-shadow: 0 5px 18px rgba(20,73,68,.045)
}

.faq-popular-number {
    width: 38px;
    height: 38px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: #eaf7f5;
    color: #0a8279;
    font-size: 18px;
    font-weight: 300;
}

.faq-popular-item strong {
    font-size: 12px;
    line-height: 1.8;
    font-weight: 800
}

.faq-popular-item small {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: #82908e
}

.faq-popular-item > svg {
    width: 18px;
    height: 18px;
    color: #9aacab
}

.faq-category-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.faq-category-card {
    min-height: 116px;
    text-align: right;
    padding: 14px;
    border: 1px solid #e1ece9;
    border-radius: var(--app-card-radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #172724;
    position: relative;
    overflow: hidden
}

    .faq-category-card:after {
        content: "";
        position: absolute;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        left: -25px;
        bottom: -30px;
        background: var(--faq-color,var(--app-primary));
        opacity: .07
    }

.faq-category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: color-mix(in srgb,var(--faq-color,var(--app-primary)) 12%,white);
    color: var(--faq-color,var(--app-primary))
}

    .faq-category-icon svg {
        width: 22px;
        height: 22px
    }

.faq-category-card strong {
    font-size: 12px;
    font-weight: 300;
    display: inline-block;
    margin-left: 5px;
}

.faq-category-card small {
    font-size: 10px;
    color: #879492;
    margin-top: 3px
}

.faq-count-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: var(--app-card-radius);
    background: #eaf5f3;
    color: #20756f
}

.faq-list {
    display: grid;
    gap: 9px
}

.faq-item {
    border: 1px solid #e2ebe9;
    background: #fff;
    border-radius: var(--app-card-radius);
    overflow: hidden
}

.faq-item-button {
    width: 100%;
    border: 0;
    background: transparent;
    display: grid;
    grid-template-columns: 32px 1fr 22px;
    align-items: center;
    gap: 9px;
    padding: 14px;
    text-align: right;
    color: #152623
}

.faq-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: #eef7f6;
    color: #15877f;
    display: grid;
    place-items: center
}

    .faq-item-icon svg {
        width: 32px;
        height: 32px
    }

.faq-item-button strong {
    font-size: 12px;
    line-height: 1.9;
    font-weight: 800
}

.faq-item-button small {
    display: block;
    font-size: 10px;
    color: #81908e;
    margin-top: 2px
}

.faq-item-button > svg {
    width: 17px;
    height: 17px;
    color: #9badaa
}

.faq-state {
    padding: 50px 22px;
    text-align: center
}

.faq-state-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: #eaf5f3;
    color: #177b74
}

.faq-state h3 {
    font-size: 15px;
    margin: 0 0 7px
}

.faq-state p {
    font-size: 11px;
    color: #7e8c8a;
    line-height: 1.9
}

.faq-primary-btn {
    border: 0;
    background: var(--app-primary-dark);
    color: #fff;
    border-radius: var(--app-card-radius);
    height: 48px;
    padding: 0 20px;
    font: inherit;
    font-size: 12px;
    font-weight: 800
}

    .faq-primary-btn.compact {
        height: 42px
    }

.faq-support-card {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 11px;
    padding: 15px;
    background: #102f2c;
    color: #fff;
    border-radius: var(--app-card-radius);
    align-items: center
}

.faq-support-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--app-card-radius);
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.1);
    color: #7ee4dc
}

.faq-support-card strong {
    font-size: 12px;
    display: block
}

.faq-support-card span {
    font-size: 10px;
    color: rgba(255,255,255,.62);
    line-height: 1.8;
    font-weight: 300;
}

.faq-support-card button {
    grid-column: 1/-1;
    height: 42px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #105f59;
    font: inherit;
    font-size: 11px;
    font-weight: 300;
}

.faq-loading {
    display: grid;
    gap: 12px
}

.faq-skeleton {
    border-radius: var(--app-card-radius);
    background: linear-gradient(90deg,#edf2f1 25%,#f7f9f9 45%,#edf2f1 65%);
    background-size: 220% 100%;
    animation: faqShimmer 1.25s linear infinite
}

    .faq-skeleton.hero {
        height: 240px;
        border-radius: var(--app-card-radius);
    }

    .faq-skeleton.cards {
        height: 120px
    }

    .faq-skeleton.row {
        height: 68px
    }

.faq-answer-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end
}

.faq-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(5,25,23,.56);
    backdrop-filter: blur(4px)
}

.faq-answer-panel {
    position: relative;
    width: 100%;
    max-height: 88vh;
    overflow: auto;
    background: #fff;
    border-radius: 28px 28px 0 0;
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom));
    animation: faqSheetUp .28s ease
}

.faq-sheet-handle {
    width: 42px;
    height: 5px;
    border-radius: 5px;
    background: #dce5e3;
    margin: 0 auto 14px
}

.faq-answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.faq-answer-category {
    font-size: 10px;
    font-weight: 800;
    padding: 7px 10px;
    border-radius: var(--app-card-radius);
    background: #eaf6f4;
    color: #147e76
}

.faq-answer-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--app-card-radius);
    background: #f1f5f4;
    color: #536764;
    display: grid;
    place-items: center
}

    .faq-answer-close svg {
        width: 18px;
        height: 18px
    }

.faq-answer-panel h2 {
    font-size: 18px;
    line-height: 1.8;
    margin: 17px 0 12px;
    font-weight: 300;
}

.faq-answer-body {
    font-size: 12px;
    line-height: 2.15;
    color: #455653
}

    .faq-answer-body p {
        margin: 0 0 11px
    }

    .faq-answer-body ul {
        padding-right: 18px
    }

    .faq-answer-body img {
        max-width: 100%;
        height: auto;
        border-radius: var(--app-card-radius);
    }

.faq-related-action {
    width: 100%;
    margin-top: 18px;
    padding: 13px 14px;
    border: 1px solid #cfe4e1;
    border-radius: var(--app-card-radius);
    background: #eff9f7;
    color: #116f68;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: right
}

    .faq-related-action small {
        display: block;
        font-size: 9px;
        color: #5b8d88
    }

    .faq-related-action strong {
        font-size: 12px
    }

    .faq-related-action svg {
        width: 20px;
        height: 20px
    }

.faq-feedback {
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid #edf1f0;
    text-align: center
}

    .faq-feedback > span {
        font-size: 11px;
        font-weight: 800
    }

    .faq-feedback > div {
        display: flex;
        justify-content: center;
        gap: 9px;
        margin-top: 11px
    }

    .faq-feedback button {
        height: 40px;
        min-width: 90px;
        border: 1px solid #dce7e5;
        border-radius: var(--app-card-radius);
        background: #fff;
        color: #41605c;
        font: inherit;
        font-size: 11px;
        font-weight: 800;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px
    }

        .faq-feedback button svg {
            width: 17px;
            height: 17px
        }

        .faq-feedback button.active {
            border-color: #0e8c83;
            background: #ecf8f6;
            color: #08786f
        }

    .faq-feedback p {
        font-size: 10px;
        color: #138078;
        margin: 10px 0 0
    }

.faq-empty {
    padding: 34px 18px;
    text-align: center;
    border: 1px dashed #d9e5e3;
    border-radius: var(--app-card-radius);
    background: #fbfdfd
}

    .faq-empty strong {
        display: block;
        font-size: 13px
    }

    .faq-empty span {
        display: block;
        margin-top: 6px;
        font-size: 10px;
        color: #879391;
        line-height: 1.8
    }

@keyframes faqShimmer {
    to {
        background-position: -220% 0
    }
}

@keyframes faqSheetUp {
    from {
        transform: translateY(100%);
        opacity: .3
    }

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

@media(min-width:700px) {
    .faq-page {
        max-width: 520px;
        margin: 0 auto;
        border-left: 1px solid #edf1f0;
        border-right: 1px solid #edf1f0
    }

    .faq-answer-panel {
        max-width: 520px;
        margin: 0 auto
    }

    .faq-category-grid {
        grid-template-columns: repeat(3,minmax(0,1fr))
    }
}


.ticket-page, .ticket-create-page, .ticket-details-page {
    direction: rtl;
    min-height: 100%;
    padding: 18px 16px 110px;
    background: radial-gradient(circle at top right,rgba(0,222,209,.14),transparent 32%),linear-gradient(180deg,#f8fbfc,#f4f7f9);
    color: #17202a
}

.ticket-page-header, .ticket-simple-header, .ticket-details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    flex-direction: row-reverse;
}

    .ticket-page-header h1, .ticket-simple-header h1 {
        margin: 4px 0;
        font-size: 24px
    }

    .ticket-page-header p, .ticket-simple-header p {
        margin: 0;
        color: #73808c;
        font-size: 13px
    }

    .ticket-page-header button {
        border: 0;
        border-radius: var(--app-card-radius);
        background: var(--app-primary-dark);
        color: var(--app-surface);
        padding: 12px 15px;
        font-weight: 800;
    }

.ticket-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 9px;
    margin: 20px 0 14px
}

.ticket-summary-card, .ticket-card, .ticket-create-card {
    background: #fff;
    border: 1px solid #e5ecef;
    border-radius: var(--app-card-radius);
    padding: 15px;
    box-shadow: 0 10px 30px rgba(28,54,65,.06)
}

    .ticket-summary-card strong {
        display: block;
        font-size: 22px
    }

    .ticket-summary-card span {
        font-size: 11px;
        color: #74808a
    }

.ticket-filter-bar {
    display: flex;
    gap: 7px;
    overflow: auto;
    margin-bottom: 11px
}

    .ticket-filter-bar button {
        white-space: nowrap;
        border: 1px solid #dde6e9;
        border-radius: var(--app-card-radius);
        background: #fff;
        padding: 9px 13px
    }

        .ticket-filter-bar button.active {
            background: #172f39;
            color: #fff
        }

.ticket-list {
    display: grid;
    gap: 10px
}

.ticket-card h3 {
    margin: 12px 0
}

.ticket-card-head, .ticket-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.ticket-card-no, .ticket-card-time {
    font-size: 11px;
    color: #849099;
    display: inline;
    direction: ltr;
}

.ticket-status {
    font-size: 11px;
    font-weight: 800;
    padding: 6px 9px;
    border-radius: var(--app-card-radius);
    background: #edf3f5
}

.ticket-unread {
    background: #ff4d67;
    color: #fff;
    border-radius: var(--app-card-radius);
    padding: 3px 7px
}

.ticket-create-card {
    display: grid;
    gap: 9px;
    margin-top: 20px
}

    .ticket-create-card input, .ticket-create-card textarea, .ticket-select-button {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dce6e9;
        border-radius: var(--app-card-radius);
        background: #f9fbfc;
        padding: 13px;
        font: inherit
    }

.ticket-select-button {
    display: flex;
    justify-content: space-between
}

.ticket-priority-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 8px
}

    .ticket-priority-options button {
        border: 1px solid #dce6e9;
        border-radius: var(--app-card-radius);
        background: #fff;
        padding: 11px
    }

        .ticket-priority-options button.active {
            border-color: #00bdb3;
            background: #e9fffd;
            color: #007f78
        }

.ticket-submit-button {
    border: 0;
    border-radius: var(--app-card-radius);
    background: #172f39;
    color: #fff;
    padding: 14px;
    font-weight: 800
}

.ticket-category-sheet, .ticket-actions-sheet {
    position: fixed;
    inset: 0;
    z-index: 900
}

.ticket-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4,18,24,.45)
}

.ticket-sheet-panel {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    background: #fff;
    border-radius: 25px 25px 0 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
    .ticket-sheet-panel button {
        background: var(--app-primary-soft);
        border: 2px solid var(--app-primary-dark);
        padding: 8px;
        border-radius: var(--app-button-radius);
        text-align: center;
    }
    .ticket-sheet-header {
        display: flex;
        justify-content: space-between
    }

.ticket-category-option {
    display: flex;
    gap: 10px;
    width: 100%;
    border: 1px solid #e2eaed;
    background: #fff;
    border-radius: var(--app-card-radius);
    padding: 12px;
    margin-top: 8px;
    text-align: right
}

.ticket-category-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%
}

.ticket-timeline {
    display: flex;
    overflow: auto;
    gap: 8px;
    margin: 12px 0
}

.ticket-timeline-item {
    min-width: 125px;
    background: #fff;
    border: 1px solid #e1e9ec;
    border-radius: var(--app-card-radius);
    padding: 10px;
    font-size: 11px;
    display: flex;
    flex-direction: column;
}

.ticket-messages {
    display: grid;
    gap: 10px;
    padding-bottom: 90px
}

.ticket-message {
    max-width: 84%;
    border-radius: var(--app-card-radius);
    background: var(--app-primary-soft);
    color: var(--app-text);
    padding: 11px 13px;
    line-height: 1.8;
}
    .ticket-message small {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        align-items: center;
        direction: ltr;
        flex-direction: row-reverse;
    }
    .ticket-message i {
        display: inline-block;
        direction: ltr;
        font-style: normal;
        font-size: 9px;
        color: #686868;
    }
        .ticket-message.support {
        justify-self: end;
        background: #fff;
        color: #1d2d34;
        border: 1px solid #e1e9ec;
        border-radius: 18px 18px 18px 5px
    }

.ticket-reply-box {
    position: fixed;
    right: 12px;
    left: 12px;
    bottom: 12px;
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid #dde7ea;
    border-radius: var(--app-card-radius);
    padding: 8px
}

    .ticket-reply-box textarea {
        flex: 1;
        border: 0;
        outline: 0
    }

    .ticket-reply-box button {
        border: 0;
        border-radius: var(--app-card-radius);
        background: var(--app-primary-dark);
        color: var(--app-surface);
        padding: 7px 17px;
    }

.ticket-empty, .ticket-loading, .ticket-error {
    text-align: center;
    background: #fff;
    border-radius: var(--app-card-radius);
    padding: 32px;
    color: #73808a
}

@media(min-width:720px) {
    .ticket-page, .ticket-create-page, .ticket-details-page {
        max-width: 720px;
        margin: auto
    }
}


.ticket-details-header button, .ticket-simple-header button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: var(--app-card-radius);
    background: #fff;
    color: #374151;
    cursor: pointer;
}


#appView:has(.ticket-details-page) .app-bottom-nav {
    display: none !important;
}