/* Light operations login, scoped to the admin authentication page. */
.marceen-login-page {
    --auth-bg: #fbfcfd;
    --auth-bg-deep: #f5f7fa;
    --auth-surface: rgba(255, 255, 255, 0.9);
    --auth-white: #ffffff;
    --auth-primary: #11233b;
    --auth-primary-dark: #09182a;
    --auth-text: #11233b;
    --auth-muted: #5f6d82;
    --auth-border: #d8e0e8;
    --auth-focus-ring: rgba(17, 35, 59, 0.16);
    --auth-card-shadow: 0 24px 70px rgba(17, 35, 59, 0.09);
    background: var(--auth-bg);
    font-family: "Cairo", "Roboto", sans-serif;
}

.marceen-login-page .auth-wrapper {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 42%);
    background:
        radial-gradient(circle at 33% 38%, rgba(255, 255, 255, 0.98), transparent 31%),
        linear-gradient(rgba(17, 35, 59, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 35, 59, 0.022) 1px, transparent 1px),
        linear-gradient(145deg, var(--auth-bg), var(--auth-bg-deep));
    background-size: auto, 72px 72px, 72px 72px, auto;
}

.marceen-login-page .auth-wrapper-left {
    align-items: center;
    padding: clamp(44px, 5vw, 88px);
}

.marceen-login-page .auth-wrapper-left::before {
    background: radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.5), transparent 52%);
}

.marceen-login-page .auth-wrapper-left .auth-left-cont {
    width: min(100%, 690px);
}

.marceen-login-page .marceen-operations-copy {
    color: var(--auth-text);
}

.marceen-login-page .marceen-brand-logo {
    max-width: 110px;
    height: 56px;
    margin-bottom: 12px;
    filter: none;
}

.marceen-login-page .marceen-eyebrow,
.marceen-login-page .marceen-auth-kicker {
    color: var(--auth-muted);
    letter-spacing: 0;
    text-transform: none;
}

.marceen-login-page .marceen-eyebrow {
    margin-bottom: clamp(44px, 7vh, 72px);
}

.marceen-login-page .marceen-operations-copy h1 {
    color: var(--auth-text);
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.35;
}

.marceen-login-page .marceen-operations-description {
    color: #526279;
}

.marceen-login-page .marceen-operation-steps li {
    color: #42536a;
}

.marceen-login-page .marceen-operation-steps li:not(:last-child)::after {
    border-color: #d4dce5;
}

.marceen-login-page .marceen-step-icon {
    border-color: #d5dde6;
    background: rgba(255, 255, 255, 0.78);
    color: var(--auth-text);
    box-shadow: 0 7px 24px rgba(17, 35, 59, 0.06);
}

.marceen-login-page .marceen-route-map {
    opacity: 0.62;
    fill: #dce3ea;
}

.marceen-login-page .marceen-route-map path {
    stroke: #dce3ea;
}

.marceen-login-page .auth-wrapper-right {
    padding: clamp(36px, 4vw, 72px);
}

.marceen-login-page .auth-wrapper-right .auth-wrapper-form {
    display: flex;
    width: min(100%, 552px);
    min-height: min(740px, calc(100vh - 80px));
    flex-direction: column;
    justify-content: center;
    padding: clamp(44px, 4vw, 54px);
    border-color: rgba(17, 35, 59, 0.11);
    border-radius: 28px;
    backdrop-filter: blur(14px);
}

.marceen-login-page .auth-wrapper-right .auth-header {
    margin-bottom: 44px;
}

.marceen-login-page .auth-wrapper-right .auth-header .title {
    font-size: clamp(36px, 3vw, 46px);
}

.marceen-login-page .auth-wrapper-right .form-control {
    height: 62px !important;
    border-radius: 10px !important;
    line-height: 62px;
}

.marceen-login-page .auth-wrapper-right .form-control::placeholder {
    color: #66758a;
}

.marceen-login-page .marceen-password-toggle:hover {
    background: rgba(17, 35, 59, 0.07);
}

.marceen-login-page .auth-wrapper-right .marceen-submit-button {
    height: 60px !important;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(17, 35, 59, 0.16);
}

.marceen-login-page .auth-wrapper-right .marceen-submit-button:hover {
    box-shadow: 0 15px 32px rgba(17, 35, 59, 0.21);
}

.marceen-login-page .auth-wrapper-right .marceen-submit-button:focus-visible {
    outline-color: rgba(17, 35, 59, 0.34);
}

.marceen-login-page .auth-wrapper-right .marceen-submit-button:disabled {
    border-color: #8793a3 !important;
    background: #8793a3;
}

@media (max-width: 1199px) {
    .marceen-login-page .auth-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(480px, 47%);
    }
}

@media (max-width: 991px) {
    .marceen-login-page {
        background:
            linear-gradient(rgba(17, 35, 59, 0.022) 1px, transparent 1px),
            linear-gradient(90deg, rgba(17, 35, 59, 0.022) 1px, transparent 1px),
            var(--auth-bg);
        background-size: 64px 64px;
    }

    .marceen-login-page .auth-wrapper-right .auth-wrapper-form {
        min-height: auto;
    }
}

@media (max-width: 575px) {
    .marceen-login-page,
    .marceen-login-page .auth-wrapper {
        background: var(--auth-bg);
    }

    .marceen-login-page .auth-wrapper-right .auth-wrapper-form {
        backdrop-filter: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .marceen-login-page .auth-wrapper-right .auth-wrapper-form {
        background: var(--auth-white);
        backdrop-filter: none;
    }
}