.service-appointment-route {
    min-height: 100%;
    position: relative;
    direction: rtl;
    color: var(--app-text);
}

    .service-appointment-route .wrap {
        max-width: 520px;
        margin: 0 auto;
        padding: 10px 12px 112px
    }

    .service-appointment-route .head {
        position: relative;
        background: linear-gradient(130deg,var(--app-primary-dark),var(--app-primary));
        color: #fff;
        padding: 22px 18px;
        border-radius: 13px;
        margin-bottom: 14px;
        overflow: hidden
    }

        .service-appointment-route .head:before {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            border: 1px solid #ffffff35;
            border-radius: 50%;
            left: -55px;
            top: -70px
        }

        .service-appointment-route .head h1 {
            font-size: 19px;
            font-weight: 700;
            margin: 0 0 6px
        }

        .service-appointment-route .head p {
            font-size: 11px;
            opacity: .9;
            margin: 0;
            line-height: 1.9
        }

    .service-appointment-route .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 1
    }

    .service-appointment-route .tag {
        font-size: 9px;
        white-space: nowrap;
        background: #ffffff24;
        padding: 5px 7px;
        border-radius: 5px
    }

    .service-appointment-route .steps {
        display: flex;
        gap: 5px;
        overflow: auto;
        scrollbar-width: none;
        padding: 1px 0 12px;
        margin-bottom: 3px
    }

        .service-appointment-route .steps::-webkit-scrollbar {
            display: none
        }

    .service-appointment-route .step {
        flex: 1;
        min-width: 76px;
        padding: 10px 4px;
        text-align: center;
        border-radius: 6px;
        background: var(--app-surface);
        border: 1px solid var(--app-border);
        font-size: 9px;
        color: var(--app-muted);
        font-weight: 600;
        line-height: 1.7
    }

        .service-appointment-route .step.active {
            color: var(--app-primary-dark);
            border-color: var(--app-primary);
            background: var(--app-primary-soft);
            font-weight: 700
        }

    .service-appointment-route .panel {
        background: var(--app-surface);
        border: 1px solid var(--app-border);
        border-radius: 9px;
        padding: 18px 14px;
        margin: 0 0 12px;
        box-shadow: var(--app-shadow-sm)
    }

        .service-appointment-route .panel h2 {
            font-size: 16px;
            margin: 0 0 5px;
            font-weight: 700
        }

    .service-appointment-route .sub {
        color: var(--app-muted);
        font-size: 11px;
        line-height: 1.9;
        margin: 0 0 16px
    }

    .service-appointment-route .grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 13px 10px
    }

    .service-appointment-route .field {
        min-width: 0
    }

        .service-appointment-route .field.full {
            grid-column: 1/-1
        }

        .service-appointment-route .field label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            margin-bottom: 5px
        }

        .service-appointment-route .field input, .service-appointment-route .field select, .service-appointment-route .field textarea {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            min-height: 45px;
            background: var(--app-surface);
            color: var(--app-text);
            border: 1px solid var(--app-border-strong);
            border-radius: 5px;
            padding: 10px;
            font-size: 13px;
            outline: none;
            box-sizing: border-box
        }

        .service-appointment-route .field textarea {
            resize: vertical;
            min-height: 85px
        }

            .service-appointment-route .field input:focus, .service-appointment-route .field select:focus, .service-appointment-route .field textarea:focus {
                border-color: var(--app-primary);
                box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb),.1)
            }

        .service-appointment-route .field input:disabled, .service-appointment-route .field select:disabled {
            background: var(--app-surface-3);
            opacity: .65
        }

        .service-appointment-route .field small {
            display: block;
            color: var(--app-muted);
            font-size: 10px;
            margin-top: 5px;
            line-height: 1.7
        }

    .service-appointment-route .actions {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        margin-top: 18px
    }

    .service-appointment-route button {
        font-family: inherit;
        cursor: pointer;
        touch-action: manipulation
    }

    .service-appointment-route .actions button, .service-appointment-route #lookup, .service-appointment-route #submit {
        min-height: 44px;
        padding: 10px 13px;
        background: var(--app-primary-dark);
        color: #fff;
        border: 0;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 700
    }

        .service-appointment-route .actions button.secondary {
            background: var(--app-surface-3);
            color: var(--app-text-soft)
        }

        .service-appointment-route .actions button:not(.secondary) {
            flex: 1
        }

    .service-appointment-route button:disabled {
        opacity: .45;
        cursor: not-allowed
    }

    .service-appointment-route .choice-list {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 8px;
        margin-top: 10px
    }

    .service-appointment-route .choice {
        min-height: 48px;
        background: var(--app-surface);
        color: var(--app-text);
        border: 1px solid var(--app-border-strong);
        border-radius: 5px;
        padding: 8px 5px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.6
    }

        .service-appointment-route .choice.selected {
            border-color: var(--app-primary);
            background: var(--app-primary-soft);
            color: var(--app-primary-dark)
        }

    .service-appointment-route .summary {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 7px
    }

        .service-appointment-route .summary div {
            background: var(--app-surface-2);
            border: 1px solid var(--app-border);
            border-radius: 5px;
            padding: 9px;
            overflow-wrap: anywhere;
            font-size: 11px
        }

        .service-appointment-route .summary b {
            display: block;
            font-size: 10px;
            color: var(--app-muted);
            font-weight: 600;
            margin-bottom: 3px
        }

    .service-appointment-route .checkrow {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 16px 0;
        font-size: 11px;
        line-height: 1.9
    }

        .service-appointment-route .checkrow input {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            accent-color: var(--app-primary)
        }

    .service-appointment-route .notice {
        border: 1px solid var(--app-border);
        border-radius: 6px;
        padding: 11px 12px;
        margin: 9px 0;
        background: var(--app-primary-soft);
        color: var(--app-text);
        font-size: 11px;
        line-height: 1.9;
        overflow-wrap: anywhere
    }

        .service-appointment-route .notice.error {
            background: #fff0f1;
            color: #a62031;
            border-color: #f5c4cb
        }

        .service-appointment-route .notice.ok {
            background: #eaf8ef;
            color: #14764e;
            border-color: #bce4cc
        }

    .service-appointment-route .hidden {
        display: none !important
    }

    .service-appointment-route .busy {
        position: fixed;
        z-index: 500;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #07151c99;
        backdrop-filter: blur(2px)
    }

        .service-appointment-route .busy > div {
            width: min(84vw,320px);
            padding: 25px 18px;
            background: var(--app-surface);
            border-radius: 9px;
            text-align: center;
            box-shadow: var(--app-shadow-lg);
            font-size: 12px
        }

    .service-appointment-route .spinner {
        width: 28px;
        height: 28px;
        margin: 0 auto 12px;
        border: 3px solid var(--app-border);
        border-top-color: var(--app-primary);
        border-radius: 50%;
        animation: sa-spin .7s linear infinite
    }

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

.service-appointment-route .foot {
    font-size: 10px;
    color: var(--app-muted);
    text-align: center;
    margin-top: 15px;
    line-height: 1.8
}

.service-appointment-route .result {
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-top: 9px
}

@media(max-width:360px) {
    .service-appointment-route .grid {
        grid-template-columns: 1fr
    }

    .service-appointment-route .choice-list {
        grid-template-columns: repeat(2,1fr)
    }

    .service-appointment-route .step {
        min-width: 67px;
        font-size: 8px
    }
}

@media(max-width:420px) {
    .service-appointment-route #lookup {
        width: 100%
    }
}

/* Mobile redesign scoped exclusively to service appointment route */
.service-appointment-route {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: var(--app-bg,#f7f8fa)
}

    .service-appointment-route *, .service-appointment-route *::before, .service-appointment-route *::after {
        box-sizing: border-box
    }

    .service-appointment-route .wrap {
        width: 100%;
        max-width: 520px;
        margin: auto;
        padding: 12px 12px 110px;
        overflow: hidden
    }

    .service-appointment-route .head {
        padding: 20px 17px;
        border-radius: 12px;
        margin-bottom: 15px
    }

    .service-appointment-route .tag {
        white-space: normal;
        line-height: 1.7;
        text-align: center;
        max-width: 100px
    }

    .service-appointment-route .steps {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none
    }

    .service-appointment-route .step {
        flex: 0 0 auto;
        min-width: 91px;
        max-width: 115px
    }

    .service-appointment-route .panel {
        padding: 17px 14px;
        border-radius: 12px;
        overflow: hidden
    }

    .service-appointment-route .grid {
        grid-template-columns: 1fr 1fr
    }

    .service-appointment-route .section-heading {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 4px 0 15px
    }

        .service-appointment-route .section-heading h2 {
            margin: 0 0 3px
        }

        .service-appointment-route .section-heading .sub {
            margin: 0
        }

    .service-appointment-route .section-icon {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        background: var(--app-primary-soft,#e8f2f3);
        border-radius: 10px;
        font-size: 19px;
        flex-shrink: 0
    }

    .service-appointment-route .profile-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        background: var(--app-surface-2,#f8f9fa);
        border: 1px solid var(--app-border,#e6e8ea);
        padding: 13px;
        border-radius: 10px
    }

        .service-appointment-route .profile-card input[readonly] {
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--app-border,#ddd);
            border-radius: 0;
            padding: 7px 2px;
            min-height: 37px;
            font-size: 12px;
            font-weight: 600;
            color: var(--app-text,#222)
        }

    .service-appointment-route .vehicle-heading {
        margin-top: 25px
    }

    .service-appointment-route .vehicle-list {
        display: grid;
        gap: 9px
    }

    .service-appointment-route .vehicle-card {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 13px;
        border: 1px solid var(--app-border,#e4e7e9);
        border-radius: 10px;
        background: var(--app-surface,#fff);
        text-align: right;
        color: var(--app-text,#222);
        min-height: 78px
    }

        .service-appointment-route .vehicle-card.selected {
            border: 2px solid var(--app-primary,#16837d);
            background: var(--app-primary-soft,#eaf6f4)
        }

    .service-appointment-route .vehicle-emoji {
        font-size: 26px;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        background: var(--app-surface-2,#f4f5f6);
        border-radius: 9px;
        flex-shrink: 0
    }

    .service-appointment-route .vehicle-info {
        display: grid;
        gap: 6px;
        min-width: 0;
        flex: 1
    }

        .service-appointment-route .vehicle-info strong {
            font-size: 13px;
            font-weight: 700;
            overflow-wrap: anywhere
        }

        .service-appointment-route .vehicle-info small {
            font-size: 10px;
            line-height: 1.8;
            color: var(--app-muted,#777);
            overflow-wrap: anywhere;
            direction: rtl
        }

    .service-appointment-route .vehicle-details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        margin-top: 10px;
        border: 1px dashed var(--app-border,#ddd);
        border-radius: 9px;
        font-size: 11px
    }

        .service-appointment-route .vehicle-details strong {
            overflow-wrap: anywhere;
            text-align: left;
            font-size: 12px
        }

    .service-appointment-route .empty-vehicles {
        padding: 20px;
        text-align: center;
        background: var(--app-surface-2,#f6f7f8);
        border-radius: 10px;
        font-size: 12px;
        line-height: 2
    }

    .service-appointment-route .actions button {
        min-width: 0
    }

@media(max-width:420px) {
    .service-appointment-route .wrap {
        padding: 10px 10px 100px
    }

    .service-appointment-route .panel {
        padding: 15px 12px
    }

    .service-appointment-route .grid {
        grid-template-columns: 1fr
    }

    .service-appointment-route .profile-card {
        gap: 9px
    }

    .service-appointment-route .head h1 {
        font-size: 17px
    }

    .service-appointment-route .choice-list {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* SPA layout isolation and mobile hardening */
.service-appointment-route {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: both !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    direction: rtl !important;
}

    .service-appointment-route .wrap {
        display: block !important;
        float: none !important;
        max-width: 520px !important;
        width: 100% !important;
        margin-inline: auto !important;
    }

    .service-appointment-route .panel {
        display: block;
        position: relative;
        max-width: 100%;
        height: auto;
    }

        .service-appointment-route .panel.hidden, .service-appointment-route .hidden {
            display: none !important;
        }

    .service-appointment-route .field input, .service-appointment-route .field select, .service-appointment-route .field textarea {
        display: block;
        max-width: 100%;
        box-sizing: border-box;
        appearance: auto;
    }

    .service-appointment-route .profile-card .field, .service-appointment-route .grid .field {
        width: 100%;
        min-width: 0;
    }

    .service-appointment-route .actions button {
        white-space: normal;
        line-height: 1.65;
    }

@media(max-width:480px) {
    .service-appointment-route .profile-card {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .service-appointment-route .grid {
        grid-template-columns: minmax(0,1fr);
    }

    .service-appointment-route .topbar {
        align-items: flex-start;
    }

    .service-appointment-route .head {
        max-width: 100%;
    }
}

.service-appointment-route .sa-offscreen {
    display: none !important
}

.service-appointment-route .sa-block {
    margin: 0 0 20px
}

.service-appointment-route .sa-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 9px;
    font-size: 12px
}

    .service-appointment-route .sa-row b {
        font-size: 13px
    }

    .service-appointment-route .sa-row span {
        color: var(--app-muted,#788);
        font-size: 10px
    }

.service-appointment-route .sa-strip {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 3px 2px 12px;
    min-height: 55px
}

    .service-appointment-route .sa-strip::-webkit-scrollbar {
        display: none
    }

.service-appointment-route .sa-card, .service-appointment-route .sa-date {
    flex: 0 0 auto;
    min-width: 110px;
    max-width: 200px;
    min-height: 55px;
    padding: 12px;
    border: 1px solid var(--app-border,#ddd);
    border-radius: 11px;
    background: var(--app-surface,#fff);
    color: var(--app-text,#222);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    scroll-snap-align: start;
    white-space: normal;
    line-height: 1.8
}

.service-appointment-route .sa-date {
    min-width: 120px;
    min-height: 78px
}

    .service-appointment-route .sa-card.selected, .service-appointment-route .sa-date.selected, .service-appointment-route .sa-hour.selected {
        border-color: var(--app-primary,#188b85);
        background: var(--app-primary-soft,#eaf7f5);
        color: var(--app-primary-dark,#11625d);
        box-shadow: inset 0 0 0 1px var(--app-primary,#188b85)
    }

.service-appointment-route .sa-times {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 9px;
    margin: 12px 0 20px
}

.service-appointment-route .sa-hour {
    min-height: 47px;
    border: 1px solid var(--app-border,#ddd);
    border-radius: 9px;
    background: var(--app-surface,#fff);
    color: var(--app-text,#222);
    font-size: 13px;
    font-weight: 700;
    direction: ltr
}

.service-appointment-route #adviserSection {
    margin-top: 16px
}

@media(max-width:360px) {
    .service-appointment-route .sa-times {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

/* Two-row horizontally scrollable appointment dates */
.service-appointment-route .sa-days {
    display: grid !important;
    grid-template-rows: repeat(2,minmax(86px,auto));
    grid-auto-flow: column;
    grid-auto-columns: 124px;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
    scroll-snap-type: x proximity;
    padding: 4px 3px 12px;
    min-height: 0
}

    .service-appointment-route .sa-days .sa-date {
        min-width: 0 !important;
        max-width: none !important;
        width: 100%;
        min-height: 86px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 7px;
        padding: 10px 8px;
        scroll-snap-align: start
    }

.service-appointment-route .sa-date .sa-choice-icon, .service-appointment-route .sa-hour .sa-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none
}

.service-appointment-route .sa-date .sa-choice-label {
    font-size: 11px;
    line-height: 1.7;
    overflow-wrap: anywhere
}

.service-appointment-route .sa-hour {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 5px
}

    .service-appointment-route .sa-hour .sa-choice-label {
        direction: ltr;
        font-variant-numeric: tabular-nums
    }

    .service-appointment-route .sa-date.selected .sa-choice-icon, .service-appointment-route .sa-hour.selected .sa-choice-icon {
        color: var(--app-primary,#188b85)
    }

@media(max-width:360px) {
    .service-appointment-route .sa-days {
        grid-auto-columns: 112px
    }
}


#vehicleDetails{
    display:none !important;
}