/* ============================================================
   PROBAHOK OPERATOR AUTHENTICATION
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --orange:
        #ff7417;

    --orange-dark:
        #ec6509;

    --orange-soft:
        rgba(255, 116, 23, 0.09);

    --dark:
        #1d2026;

    --dark-soft:
        #24272e;

    --text:
        #252931;

    --muted:
        #747b87;

    --border:
        rgba(25, 30, 40, 0.10);

    --success:
        #16945d;

    --danger:
        #c74343;

    --card-radius:
        22px;

    --font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

}


/* ============================================================
   RESET
   ============================================================ */

* {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    min-height:
        100%;

}


body {

    font-family:
        var(--font-family);

    color:
        var(--text);

    background:
        #f5f6f7;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

}


button,
input,
select,
textarea {

    font-family:
        inherit;

}


button {

    cursor:
        pointer;

}


a {

    color:
        inherit;

}


/* ============================================================
   PAGE
   ============================================================ */

.operator-auth-page {

    position:
        relative;

    min-height:
        100vh;

    display:
        grid;

    grid-template-rows:
        72px minmax(0, 1fr) 38px;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #faf8f6 0%,
            #f4f5f6 50%,
            #f8f9fa 100%
        );

}


/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */

.auth-ambient {

    position:
        fixed;

    inset:
        0;

    z-index:
        0;

    overflow:
        hidden;

    pointer-events:
        none;

}


.ambient-ring {

    position:
        absolute;

    border:
        1px solid
        rgba(255, 116, 23, 0.18);

    border-radius:
        50%;

}


.ambient-ring-one {

    width:
        430px;

    height:
        430px;

    right:
        -180px;

    top:
        -30px;

}


.ambient-ring-two {

    width:
        260px;

    height:
        260px;

    left:
        -160px;

    bottom:
        -110px;

}


.ambient-grid {

    position:
        absolute;

    inset:
        72px 0 38px;

    opacity:
        0.13;

    background-image:
        linear-gradient(
            rgba(30, 35, 45, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(30, 35, 45, 0.025) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

}


/* ============================================================
   HEADER
   ============================================================ */

.auth-topbar {

    position:
        relative;

    z-index:
        20;

    height:
        72px;

    border-bottom:
        1px solid
        rgba(20, 25, 35, 0.08);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(15px);

}


.auth-header-container {

    width:
        min(1180px, calc(100% - 48px));

    height:
        100%;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

}


.topbar-brand {

    display:
        inline-flex;

    width:
        max-content;

    align-items:
        center;

    text-decoration:
        none;

}


.topbar-brand img {

    display:
        block;

    width:
        auto;

    height:
        38px;

}


.topbar-center {

    text-align:
        center;

}


.topbar-label {

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    color:
        #5d636d;

}


.topbar-security {

    justify-self:
        end;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        11px;

    font-weight:
        700;

    color:
        #636a75;

}


.security-dot,
.status-indicator,
.workspace-status-dot,
.mode-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px
        rgba(22, 148, 93, 0.09);

}


/* ============================================================
   BODY
   ============================================================ */

.auth-body {

    position:
        relative;

    z-index:
        5;

    min-height:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        14px 24px;

}


.auth-workspace {

    width:
        min(1050px, 100%);

    height:
        500px;

    display:
        grid;

    grid-template-columns:
        0.92fr 1.08fr;

    gap:
        22px;

}


/* ============================================================
   LEFT WORKSPACE PANEL
   ============================================================ */

.workspace-panel {

    position:
        relative;

    height:
        500px;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    border-radius:
        var(--card-radius);

    color:
        #fff;

    background:
        linear-gradient(
            145deg,
            #202329 0%,
            #181b20 100%
        );

    box-shadow:
        0 20px 55px
        rgba(20, 24, 30, 0.13);

}


.workspace-panel::before {

    content:
        "";

    position:
        absolute;

    width:
        250px;

    height:
        250px;

    top:
        -100px;

    right:
        -90px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 116, 23, 0.13),
            transparent 68%
        );

}


.workspace-visual {

    position:
        relative;

    z-index:
        1;

    height:
        185px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding-top:
        12px;

}


.workspace-image-shell {

    width:
        145px;

    height:
        145px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 116, 23, 0.12),
            transparent 68%
        );

}


.workspace-image {

    display:
        block;

    width:
        126px;

    height:
        126px;

    object-fit:
        contain;

}


.workspace-panel-content {

    position:
        relative;

    z-index:
        1;

    padding:
        0 38px 20px;

}


.workspace-kicker {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--orange);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.workspace-panel h2 {

    margin:
        0;

    font-size:
        29px;

    line-height:
        1.1;

    font-weight:
        700;

    letter-spacing:
        -0.03em;

}


.workspace-panel h2 span {

    color:
        var(--orange);

}


.workspace-panel-description {

    max-width:
        360px;

    margin:
        11px 0 0;

    color:
        #aeb3bc;

    font-size:
        12px;

    line-height:
        1.65;

}


.workspace-capabilities {

    display:
        grid;

    gap:
        9px;

    margin-top:
        18px;

}


.workspace-capability {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        9px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius:
        13px;

    background:
        rgba(255, 255, 255, 0.025);

}


.capability-icon {

    width:
        36px;

    height:
        36px;

    flex:
        0 0 36px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    color:
        var(--orange);

    background:
        rgba(255, 116, 23, 0.10);

}


.capability-icon svg {

    width:
        18px;

    height:
        18px;

}


.workspace-capability strong,
.workspace-capability span {

    display:
        block;

}


.workspace-capability strong {

    color:
        #f3f4f5;

    font-size:
        11px;

    font-weight:
        700;

}


.workspace-capability span {

    margin-top:
        2px;

    color:
        #9298a2;

    font-size:
        9px;

}


.workspace-panel-bottom {

    position:
        relative;

    z-index:
        1;

    margin-top:
        auto;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 38px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);

    color:
        #858b94;

    font-size:
        9px;

}


/* ============================================================
   AUTHENTICATION CARD
   ============================================================ */

.auth-card {

    position:
        relative;

    height:
        500px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(20, 25, 35, 0.09);

    border-radius:
        var(--card-radius);

    background:
        rgba(255, 255, 255, 0.98);

    box-shadow:
        0 22px 55px
        rgba(20, 25, 35, 0.08);

}


.auth-step {

    position:
        absolute;

    inset:
        0;

    display:
        none;

    padding:
        40px 42px 30px;

    animation:
        authStepIn
        0.36s
        cubic-bezier(.22, .61, .36, 1);

}


.auth-step.active {

    display:
        block;

}


@keyframes authStepIn {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* ============================================================
   AUTHENTICATION HEADINGS
   ============================================================ */

.auth-heading-row {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

}


.auth-eyebrow {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--orange);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.auth-step h1 {

    margin:
        0;

    color:
        #262a31;

    font-size:
        29px;

    line-height:
        1.18;

    font-weight:
        700;

    letter-spacing:
        -0.035em;

}


.auth-step h1 span {

    color:
        var(--orange);

}


.auth-description {

    margin:
        20px 0 24px;

    max-width:
        470px;

    color:
        #747b86;

    font-size:
        12px;

    line-height:
        1.65;

}


.secure-badge {

    width:
        43px;

    height:
        43px;

    flex:
        0 0 43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    color:
        var(--orange);

    background:
        rgba(255, 116, 23, 0.10);

}


.secure-badge svg {

    width:
        19px;

    height:
        19px;

}


/* ============================================================
   PHONE FIELD
   ============================================================ */

.field-group {

    position:
        relative;

}


.field-label-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        7px;

}


.field-label-row label {

    font-size:
        10px;

    font-weight:
        700;

}


.field-label-row span {

    color:
        #a0a5ae;

    font-size:
        8px;

}


.phone-field {

    height:
        54px;

    display:
        flex;

    overflow:
        hidden;

    border:
        1px solid
        rgba(20, 25, 35, 0.12);

    border-radius:
        15px;

    background:
        #fff;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.phone-field:focus-within {

    border-color:
        rgba(255, 116, 23, 0.65);

    box-shadow:
        0 0 0 4px
        rgba(255, 116, 23, 0.07);

}


.country-trigger {

    height:
        100%;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        0 13px;

    border:
        0;

    border-right:
        1px solid
        rgba(20, 25, 35, 0.10);

    background:
        #fafafa;

    color:
        #383d45;

}


.country-flag {

    font-size:
        17px;

}


.country-code {

    font-size:
        11px;

    font-weight:
        600;

}


.country-trigger svg {

    width:
        12px;

    color:
        #8a9099;

}


.phone-field input {

    min-width:
        0;

    flex:
        1;

    border:
        0;

    outline:
        0;

    padding:
        0 15px;

    color:
        #292d34;

    background:
        transparent;

    font-size:
        13px;

    letter-spacing:
        0.02em;

}


.phone-field input::placeholder {

    color:
        #a5a9b0;

}


.field-hint {

    margin-top:
        7px;

    color:
        #9ca1a9;

    font-size:
        8px;

}


/* ============================================================
   COUNTRY MENU
   ============================================================ */

.country-menu {

    position:
        absolute;

    z-index:
        50;

    top:
        82px;

    left:
        0;

    width:
        255px;

    max-height:
        280px;

    overflow:
        hidden;

    visibility:
        hidden;

    opacity:
        0;

    transform:
        translateY(-5px);

    border:
        1px solid
        rgba(20, 25, 35, 0.10);

    border-radius:
        14px;

    background:
        #fff;

    box-shadow:
        0 16px 45px
        rgba(20, 25, 35, 0.15);

    transition:
        0.18s ease;

}


.country-menu.open {

    visibility:
        visible;

    opacity:
        1;

    transform:
        translateY(0);

}


.country-menu-header {

    padding:
        11px 13px;

    border-bottom:
        1px solid
        var(--border);

    font-size:
        10px;

}


.country-list {

    max-height:
        230px;

    overflow-y:
        auto;

}


.country-option {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        25px 1fr auto;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 12px;

    border:
        0;

    background:
        #fff;

    text-align:
        left;

    transition:
        background 0.15s ease;

}


.country-option:hover,
.country-option.active {

    background:
        #fff7f1;

}


.country-option-name {

    font-size:
        10px;

    font-weight:
        600;

}


.country-option-code {

    color:
        #8b919a;

    font-size:
        9px;

}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.primary-button {

    min-width:
        150px;

    height:
        46px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    padding:
        0 18px;

    border:
        0;

    border-radius:
        13px;

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #ff7417,
            #ff620c
        );

    box-shadow:
        0 10px 24px
        rgba(255, 116, 23, 0.18);

    font-size:
        10px;

    font-weight:
        700;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        opacity 0.18s ease;

}


.primary-button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    box-shadow:
        0 13px 27px
        rgba(255, 116, 23, 0.24);

}


.primary-button:disabled {

    cursor:
        default;

    opacity:
        0.65;

}


.button-arrow {

    width:
        15px;

    height:
        15px;

}


.button-loader {

    display:
        none;

    width:
        14px;

    height:
        14px;

    border:
        2px solid
        rgba(255, 255, 255, 0.45);

    border-top-color:
        #fff;

    border-radius:
        50%;

    animation:
        buttonSpin 0.7s linear infinite;

}


.primary-button.loading
.button-loader {

    display:
        block;

}


.primary-button.loading
.button-arrow {

    display:
        none;

}


@keyframes buttonSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* ============================================================
   FORM ACTIONS
   ============================================================ */

.form-action-row,
.otp-action-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-top:
        23px;

}


.auth-mode {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        #858b95;

    font-size:
        9px;

}


/* ============================================================
   ERROR MESSAGE
   ============================================================ */

.form-error {

    min-height:
        18px;

    margin-top:
        8px;

    color:
        var(--danger);

    font-size:
        9px;

    line-height:
        1.4;

    opacity:
        0;

    transform:
        translateY(-3px);

    transition:
        0.18s ease;

}


.form-error.show {

    opacity:
        1;

    transform:
        translateY(0);

}


/* ============================================================
   CARD FOOTER
   ============================================================ */

.auth-card-footer {

    position:
        absolute;

    left:
        42px;

    right:
        42px;

    bottom:
        18px;

    color:
        #a3a7ae;

    font-size:
        8px;

}


.auth-card-footer a {

    color:
        #626872;

    font-weight:
        600;

    text-decoration:
        none;

}


/* ============================================================
   OTP
   ============================================================ */

.otp-top-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.back-button,
.registration-back-button {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        #747b85;

    font-size:
        9px;

    font-weight:
        700;

}


.back-button svg,
.registration-back-button svg {

    width:
        14px;

    height:
        14px;

}


.verification-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #7a818b;

    font-size:
        9px;

}


.verification-status span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--success);

}


.otp-heading-row {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        36px;

}


.otp-symbol {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        14px;

    color:
        var(--orange);

    background:
        var(--orange-soft);

}


.otp-symbol svg {

    width:
        23px;

    height:
        23px;

}


.otp-heading-row
.auth-eyebrow {

    margin-bottom:
        5px;

}


.otp-title {

    font-size:
        26px !important;

}


.otp-description {

    margin:
        18px 0 20px;

}


.otp-description strong {

    color:
        #42474f;

}


.otp-inputs {

    display:
        grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap:
        9px;

}


.otp-input {

    width:
        100%;

    height:
        54px;

    border:
        1px solid
        rgba(20, 25, 35, 0.13);

    border-radius:
        13px;

    outline:
        0;

    text-align:
        center;

    color:
        #2b3037;

    background:
        #fff;

    font-size:
        19px;

    font-weight:
        700;

    transition:
        0.18s ease;

}


.otp-input:focus {

    border-color:
        rgba(255, 116, 23, 0.70);

    box-shadow:
        0 0 0 4px
        rgba(255, 116, 23, 0.07);

}


.otp-input.filled {

    border-color:
        rgba(255, 116, 23, 0.35);

    background:
        #fffaf6;

}


.resend-row {

    color:
        #8c929b;

    font-size:
        9px;

}


.resend-button {

    margin-left:
        4px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--orange);

    font-size:
        9px;

    font-weight:
        700;

}


.resend-button:disabled {

    color:
        #a7abb2;

    cursor:
        default;

}


/* ============================================================
   REGISTRATION
   ============================================================ */

.registration-step {

    padding:
        25px 34px 21px;

}


.registration-step.active {

    display:
        flex;

    flex-direction:
        column;

}


.registration-header {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        18px;

}


.registration-header
.auth-eyebrow {

    margin-bottom:
        5px;

}


.registration-header h1 {

    font-size:
        24px;

}


.registration-verified {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    max-width:
        145px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(22, 148, 93, 0.15);

    border-radius:
        11px;

    background:
        rgba(22, 148, 93, 0.055);

}


.registration-verified-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px
        rgba(22, 148, 93, 0.08);

}


.registration-verified small,
.registration-verified strong {

    display:
        block;

}


.registration-verified small {

    color:
        var(--success);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;

}


.registration-verified strong {

    max-width:
        100px;

    overflow:
        hidden;

    margin-top:
        1px;

    color:
        #555b64;

    font-size:
        8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ============================================================
   REGISTRATION PROGRESS
   ============================================================ */

.registration-progress-area {

    flex:
        0 0 auto;

    margin-top:
        13px;

}


.registration-progress-text {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        6px;

    color:
        #777e88;

    font-size:
        8px;

    font-weight:
        700;

}


#registrationStepCounter {

    color:
        #a1a6ae;

}


.registration-progress-track {

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #eceef1;

}


.registration-progress-track span {

    display:
        block;

    width:
        25%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--orange);

    transition:
        width 0.45s
        cubic-bezier(.22, .61, .36, 1);

}


/* ============================================================
   REGISTRATION FORM
   ============================================================ */

.registration-form {

    flex:
        1;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

}


.registration-stage {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

}


/* ============================================================
   REGISTRATION PANELS
   ============================================================ */

.registration-panel {

    position:
        absolute;

    inset:
        0;

    visibility:
        hidden;

    opacity:
        0;

    pointer-events:
        none;

}


.registration-panel.active {

    visibility:
        visible;

    opacity:
        1;

    pointer-events:
        auto;

}


.registration-panel.enter-forward {

    animation:
        registrationForward
        0.32s
        cubic-bezier(.22, .61, .36, 1);

}


.registration-panel.enter-backward {

    animation:
        registrationBackward
        0.32s
        cubic-bezier(.22, .61, .36, 1);

}


@keyframes registrationForward {

    from {

        opacity:
            0;

        transform:
            translateX(30px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}


@keyframes registrationBackward {

    from {

        opacity:
            0;

        transform:
            translateX(-30px);

    }

    to {

        opacity:
            1;

        transform:
            translateX(0);

    }

}


/* ============================================================
   REGISTRATION PANEL HEADING
   ============================================================ */

.registration-panel-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin:
        16px 0 15px;

}


.registration-panel-icon {

    width:
        37px;

    height:
        37px;

    flex:
        0 0 37px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    color:
        var(--orange);

    background:
        var(--orange-soft);

}


.registration-panel-icon svg {

    width:
        18px;

    height:
        18px;

}


.registration-panel-heading strong,
.registration-panel-heading span {

    display:
        block;

}


.registration-panel-heading strong {

    color:
        #30353c;

    font-size:
        11px;

}


.registration-panel-heading span {

    margin-top:
        2px;

    color:
        #8d939c;

    font-size:
        8px;

}


/* ============================================================
   REGISTRATION FIELDS
   ============================================================ */

.wizard-fields {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        12px;

}


.wizard-fields-three {

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

}


.wizard-field {

    min-width:
        0;

}


.wizard-field-wide {

    grid-column:
        1 / -1;

}


.wizard-field label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #484e57;

    font-size:
        9px;

    font-weight:
        800;

}


.wizard-field label span {

    color:
        var(--orange);

}


.wizard-field input,
.wizard-field select {

    width:
        100%;

    height:
        43px;

    padding:
        0 11px;

    border:
        1px solid
        rgba(25, 30, 40, 0.12);

    border-radius:
        11px;

    outline:
        none;

    color:
        #292e35;

    background:
        #fff;

    font-size:
        10px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;

}


.wizard-field input:focus,
.wizard-field select:focus {

    border-color:
        rgba(255, 116, 23, 0.70);

    box-shadow:
        0 0 0 4px
        rgba(255, 116, 23, 0.07);

    background:
        #fffdfb;

}


.wizard-field
.field-invalid {

    border-color:
        rgba(199, 67, 67, 0.65);

    box-shadow:
        0 0 0 4px
        rgba(199, 67, 67, 0.06);

}


.wizard-field > small {

    display:
        block;

    margin-top:
        4px;

    color:
        #a0a5ad;

    font-size:
        7px;

}


/* ============================================================
   PREFERENCE GRID
   ============================================================ */

.preference-grid {

    display:
        grid;

    grid-template-columns:
        0.85fr 1.35fr;

    gap:
        12px;

}


.preference-card {

    padding:
        13px;

    border:
        1px solid
        rgba(25, 30, 40, 0.09);

    border-radius:
        14px;

    background:
        #fafbfc;

}


.preference-card > label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        #4b515a;

    font-size:
        9px;

    font-weight:
        800;

}


/* ============================================================
   COLOR PICKER
   ============================================================ */

.color-picker-row {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

}


.color-preview {

    --selected-color:
        #ff7417;

    position:
        relative;

    width:
        53px;

    height:
        53px;

    flex:
        0 0 53px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        5px solid #fff;

    border-radius:
        15px;

    background:
        var(--selected-color);

    box-shadow:
        0 0 0 1px
        rgba(20, 25, 35, 0.10),
        0 7px 18px
        rgba(20, 25, 35, 0.09);

    cursor:
        pointer;

    transition:
        transform 0.18s ease;

}


.color-preview:hover {

    transform:
        scale(1.04);

}


.color-preview input {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    opacity:
        0;

    cursor:
        pointer;

}


.color-preview-inner {

    width:
        13px;

    height:
        13px;

    border:
        3px solid
        rgba(255, 255, 255, 0.9);

    border-radius:
        50%;

    pointer-events:
        none;

}


.color-information strong,
.color-information span {

    display:
        block;

}


.color-information strong {

    color:
        #363b43;

    font-size:
        11px;

    font-weight:
        700;

}


.color-information span {

    margin-top:
        3px;

    color:
        #969ba3;

    font-size:
        7px;

    line-height:
        1.45;

}


/* ============================================================
   FAVORITE HOURS
   ============================================================ */

.preference-card select {

    width:
        100%;

    height:
        41px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(25, 30, 40, 0.11);

    border-radius:
        10px;

    outline:
        0;

    color:
        #3c424a;

    background:
        #fff;

    font-size:
        9px;

}


.preference-card select:focus {

    border-color:
        rgba(255, 116, 23, 0.70);

    box-shadow:
        0 0 0 4px
        rgba(255, 116, 23, 0.07);

}


.favorite-hours-preview {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        8px;

    padding:
        7px 9px;

    border-radius:
        9px;

    background:
        rgba(255, 116, 23, 0.055);

}


#favoriteHoursIcon {

    font-size:
        17px;

}


.favorite-hours-preview strong,
.favorite-hours-preview small {

    display:
        block;

}


.favorite-hours-preview strong {

    color:
        #4a5058;

    font-size:
        8px;

}


.favorite-hours-preview small {

    margin-top:
        1px;

    color:
        #969ba3;

    font-size:
        7px;

}


/* ============================================================
   REGISTRATION ERROR
   ============================================================ */

.registration-error {

    flex:
        0 0 auto;

    min-height:
        15px;

    margin:
        3px 0 0;

}


/* ============================================================
   REGISTRATION NAVIGATION
   ============================================================ */

.registration-navigation {

    flex:
        0 0 auto;

    display:
        grid;

    grid-template-columns:
        110px 1fr 145px;

    align-items:
        center;

    gap:
        10px;

    padding-top:
        7px;

    border-top:
        1px solid
        rgba(25, 30, 40, 0.07);

}


.registration-back-button {

    justify-self:
        start;

}


.registration-dots {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

}


.registration-dots span {

    width:
        6px;

    height:
        6px;

    border-radius:
        999px;

    background:
        #d8dadd;

    transition:
        width 0.25s ease,
        background 0.25s ease;

}


.registration-dots span.complete {

    background:
        rgba(255, 116, 23, 0.42);

}


.registration-dots span.active {

    width:
        19px;

    background:
        var(--orange);

}


.registration-navigation
.primary-button {

    justify-self:
        end;

    min-width:
        140px;

    height:
        42px;

}


.registration-submit-button {

    display:
        none;

}


/* ============================================================
   SUCCESS
   ============================================================ */

.success-step.active {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.success-layout {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.success-icon {

    width:
        64px;

    height:
        64px;

    flex:
        0 0 64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        20px;

    color:
        var(--success);

    background:
        rgba(22, 148, 93, 0.08);

    animation:
        successPop
        0.5s
        cubic-bezier(.22, .61, .36, 1);

}


.success-icon svg {

    width:
        31px;

    height:
        31px;

}


@keyframes successPop {

    from {

        transform:
            scale(0.7);

        opacity:
            0;

    }

    to {

        transform:
            scale(1);

        opacity:
            1;

    }

}


.success-layout
.auth-eyebrow {

    margin-bottom:
        5px;

}


.success-layout h1 {

    font-size:
        25px;

}


.success-layout p {

    margin:
        7px 0 0;

    color:
        #818792;

    font-size:
        10px;

}


.redirect-loader {

    position:
        absolute;

    left:
        42px;

    right:
        42px;

    bottom:
        32px;

    height:
        3px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #eceef0;

}


.redirect-loader span {

    display:
        block;

    width:
        40%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--orange);

    animation:
        redirectLoading
        1.5s ease-in-out infinite;

}


@keyframes redirectLoading {

    from {

        transform:
            translateX(-120%);

    }

    to {

        transform:
            translateX(350%);

    }

}


/* ============================================================
   BOTTOM STATUS BAR
   ============================================================ */

.auth-statusbar {

    position:
        relative;

    z-index:
        20;

    height:
        38px;

    border-top:
        1px solid
        rgba(20, 25, 35, 0.08);

    background:
        rgba(255, 255, 255, 0.92);

}


.auth-footer-container {

    width:
        min(1180px, calc(100% - 48px));

    height:
        100%;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        center;

    color:
        #8c929b;

    font-size:
        8px;

}


.statusbar-left {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.statusbar-center {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.statusbar-center span {

    color:
        #c4c7cc;

}


.statusbar-right {

    justify-self:
        end;

    color:
        #a0a5ad;

    letter-spacing:
        0.08em;

}


/* ============================================================
   SHORT DESKTOP / LAPTOP
   ============================================================ */

@media
(min-width: 901px)
and (max-height: 760px) {

    .operator-auth-page {

        grid-template-rows:
            64px minmax(0, 1fr) 34px;

    }


    .auth-topbar {

        height:
            64px;

    }


    .auth-body {

        padding:
            9px 22px;

    }


    .auth-workspace,
    .workspace-panel,
    .auth-card {

        height:
            465px;

    }


    .workspace-visual {

        height:
            155px;

    }


    .workspace-image-shell {

        width:
            125px;

        height:
            125px;

    }


    .workspace-image {

        width:
            108px;

        height:
            108px;

    }


    .workspace-panel-content {

        padding:
            0 34px 14px;

    }


    .workspace-panel h2 {

        font-size:
            26px;

    }


    .workspace-capabilities {

        margin-top:
            12px;

    }


    .workspace-capability {

        padding:
            7px 10px;

    }


    .auth-step {

        padding-top:
            30px;

    }


    .registration-step {

        padding:
            21px 31px 17px;

    }


    .registration-panel-heading {

        margin:
            12px 0;

    }


    .auth-statusbar {

        height:
            34px;

    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media
(max-width: 900px) {

    .operator-auth-page {

        min-height:
            100vh;

        overflow:
            auto;

        grid-template-rows:
            68px auto 38px;

    }


    .auth-body {

        padding:
            24px 20px;

    }


    .auth-workspace {

        height:
            auto;

        grid-template-columns:
            1fr;

        max-width:
            620px;

    }


    .workspace-panel {

        display:
            none;

    }


    .auth-card {

        height:
            500px;

    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media
(max-width: 620px) {

    .auth-header-container {

        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr 1fr;

    }


    .topbar-center {

        display:
            none;

    }


    .topbar-security {

        font-size:
            9px;

    }


    .auth-body {

        padding:
            15px 12px;

    }


    .auth-card {

        height:
            535px;

        border-radius:
            18px;

    }


    .auth-step {

        padding:
            28px 21px 22px;

    }


    .auth-step h1 {

        font-size:
            25px;

    }


    .auth-description {

        margin:
            16px 0 20px;

    }


    .auth-card-footer {

        left:
            21px;

        right:
            21px;

    }


    .form-action-row,
    .otp-action-row {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .primary-button {

        width:
            100%;

    }


    .otp-inputs {

        gap:
            5px;

    }


    .otp-input {

        height:
            49px;

        border-radius:
            10px;

    }


    /* Registration */

    .registration-step {

        padding:
            20px 18px 16px;

    }


    .registration-header h1 {

        font-size:
            21px;

    }


    .registration-verified {

        display:
            none;

    }


    .wizard-fields,
    .wizard-fields-three,
    .preference-grid {

        grid-template-columns:
            1fr;

    }


    .wizard-field-wide {

        grid-column:
            auto;

    }


    .registration-panel {

        overflow-y:
            auto;

        padding-right:
            3px;

    }


    .registration-panel-heading {

        margin:
            12px 0;

    }


    .preference-grid {

        gap:
            8px;

    }


    .preference-card {

        padding:
            10px;

    }


    .registration-navigation {

        grid-template-columns:
            62px 1fr 120px;

    }


    .registration-navigation
    .primary-button {

        width:
            120px;

        min-width:
            120px;

        padding:
            0 10px;

    }


    .registration-back-button {

        font-size:
            8px;

    }


    .auth-footer-container {

        width:
            calc(100% - 28px);

        grid-template-columns:
            1fr auto;

    }


    .statusbar-center {

        display:
            none;

    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media
(max-width: 390px) {

    .auth-card {

        height:
            550px;

    }


    .registration-navigation {

        grid-template-columns:
            52px 1fr 110px;

    }


    .registration-navigation
    .primary-button {

        width:
            110px;

        min-width:
            110px;

        font-size:
            9px;

    }


    .registration-dots {

        gap:
            4px;

    }

}