/* =====================================================================
   SV EVIDENCIJA PRISUSTVA — FRONT AUTH SKETCH 4 / V21
   Scope: ONLY Front Login, ChangePin and Exit.
   Loaded after each page-specific stylesheet.
   ===================================================================== */

:root {
    --auth-red: #ed1c24;
    --auth-red-dark: #b70e16;
    --auth-text: #101828;
    --auth-muted: #667085;
    --auth-page: #eef2f7;
    --auth-frame: #ffffff;
    --auth-panel: rgba(255, 255, 255, .82);
    --auth-panel-strong: rgba(255, 255, 255, .94);
    --auth-input: #f7f9fc;
    --auth-border: #e1e7ef;
    --auth-line: rgba(148, 163, 184, .22);
    --auth-shadow: 0 28px 76px rgba(15, 23, 42, .13);
    --auth-card-shadow: 0 16px 38px rgba(15, 23, 42, .08);
    --auth-success: #087443;
    --auth-success-soft: #ecfdf3;
    --auth-danger: #c91d2e;
    --auth-danger-soft: #fff1f3;
}

html[data-sv-theme="dark"] {
    color-scheme: dark;
    --auth-text: #f8fafc;
    --auth-muted: #a9b5c7;
    --auth-page: #070c14;
    --auth-frame: #0d1522;
    --auth-panel: rgba(15, 24, 38, .78);
    --auth-panel-strong: rgba(16, 25, 40, .94);
    --auth-input: #0b1421;
    --auth-border: #2d394c;
    --auth-line: rgba(148, 163, 184, .16);
    --auth-shadow: 0 30px 82px rgba(0, 0, 0, .46);
    --auth-card-shadow: 0 18px 42px rgba(0, 0, 0, .28);
    --auth-success: #63e6a2;
    --auth-success-soft: rgba(8, 122, 72, .16);
    --auth-danger: #ff727a;
    --auth-danger-soft: rgba(237, 28, 36, .15);
}

/* ---------------------------------------------------------------------
   Shared physical frame — same 430px Front model as Profile.
   --------------------------------------------------------------------- */

.login-shell,
.change-shell,
.exit-shell {
    width: 100% !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(circle at 88% 2%, rgba(237, 28, 36, .10), transparent 31%),
        linear-gradient(180deg, #ffffff 0%, var(--auth-page) 100%) !important;
}

html[data-sv-theme="dark"] .login-shell,
html[data-sv-theme="dark"] .change-shell,
html[data-sv-theme="dark"] .exit-shell {
    background:
        radial-gradient(circle at 92% 0%, rgba(237, 28, 36, .20), transparent 34%),
        radial-gradient(circle at 8% 12%, rgba(255, 255, 255, .035), transparent 24%),
        linear-gradient(180deg, #060a11 0%, var(--auth-page) 100%) !important;
}

.login-frame,
.change-frame,
.exit-frame {
    width: 100% !important;
    max-width: 430px !important;
    min-height: 100dvh !important;
    height: auto !important;
    margin: 0 !important;
    padding:
        max(20px, env(safe-area-inset-top))
        20px
        max(18px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: var(--auth-text) !important;
    background:
        radial-gradient(circle at top right, rgba(237, 28, 36, .065), transparent 32%),
        var(--auth-frame) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html[data-sv-theme="dark"] .login-frame,
html[data-sv-theme="dark"] .change-frame,
html[data-sv-theme="dark"] .exit-frame {
    background:
        radial-gradient(circle at top right, rgba(237, 28, 36, .15), transparent 34%),
        linear-gradient(180deg, #0a111c 0%, var(--auth-frame) 100%) !important;
}

/* Subtle Sketch-4 orbital light, always behind content. */
.login-frame::before,
.change-frame::before,
.exit-frame::before {
    content: "" !important;
    position: absolute !important;
    z-index: -2 !important;
    width: 300px !important;
    height: 300px !important;
    top: 34px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(237, 28, 36, .09) !important;
    box-shadow:
        0 0 0 34px rgba(237, 28, 36, .020),
        0 0 76px rgba(237, 28, 36, .085) !important;
    pointer-events: none !important;
}

.login-frame::after,
.change-frame::after,
.exit-frame::after {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 8px !important;
    height: 8px !important;
    top: 128px !important;
    right: 46px !important;
    border-radius: 50% !important;
    background: var(--auth-red) !important;
    box-shadow:
        -270px 96px 0 -2px rgba(237, 28, 36, .40),
        -44px 248px 0 -3px rgba(237, 28, 36, .34),
        0 0 22px rgba(237, 28, 36, .52) !important;
    pointer-events: none !important;
}

.login-frame > *,
.change-frame > *,
.exit-frame > * {
    position: relative;
    z-index: 1;
}

@media (min-width: 521px) {
    .login-shell,
    .change-shell,
    .exit-shell {
        padding: 12px !important;
        align-items: center !important;
    }

    .login-frame,
    .change-frame,
    .exit-frame {
        min-height: calc(100dvh - 24px) !important;
        border: 1px solid var(--auth-border) !important;
        border-radius: 30px !important;
        box-shadow: var(--auth-shadow) !important;
    }
}

/* ---------------------------------------------------------------------
   Shared top row.
   --------------------------------------------------------------------- */

.sv-auth-header,
.login-auth-header,
.change-frame > .sv-mobile-header,
.exit-frame > .exit-brand {
    width: 100% !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
}

.login-language-control {
    grid-column: 1 !important;
    width: 46px !important;
    height: 46px !important;
    position: relative !important;
    justify-self: start !important;
}

.login-language-toggle,
.login-theme-toggle,
.change-frame .sv-theme-button,
.exit-theme-toggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(237, 28, 36, .22) !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: var(--auth-red) !important;
    box-shadow: 0 12px 26px rgba(15, 23, 42, .09) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.login-theme-toggle,
.change-frame .sv-theme-button,
.exit-theme-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
}

.login-language-toggle:hover,
.login-language-toggle:focus-visible,
.login-language-toggle.is-open,
.login-theme-toggle:hover,
.login-theme-toggle:focus-visible,
.change-frame .sv-theme-button:hover,
.change-frame .sv-theme-button:focus-visible,
.exit-theme-toggle:hover,
.exit-theme-toggle:focus-visible {
    border-color: rgba(237, 28, 36, .48) !important;
    box-shadow:
        0 0 0 3px rgba(237, 28, 36, .08),
        0 13px 30px rgba(237, 28, 36, .15) !important;
    outline: 0 !important;
}

html[data-sv-theme="dark"] .login-language-toggle,
html[data-sv-theme="dark"] .login-theme-toggle,
html[data-sv-theme="dark"] .change-frame .sv-theme-button,
html[data-sv-theme="dark"] .exit-theme-toggle {
    background: #111b2a !important;
    border-color: #303d50 !important;
    color: #ff6c74 !important;
    box-shadow: 0 13px 30px rgba(0, 0, 0, .34) !important;
}

.login-language-current-flag {
    width: 25px !important;
    height: auto !important;
    display: block !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .14) !important;
}

html[data-sv-theme="dark"] .login-language-current-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

.login-language-popup {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    left: 0 !important;
    right: auto !important;
    width: 184px !important;
    max-width: calc(100vw - 44px) !important;
    z-index: 1200 !important;
    margin: 0 !important;
    padding: 7px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .20) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html[data-sv-theme="dark"] .login-language-popup {
    background: rgba(15, 24, 38, .98) !important;
    border-color: #303d50 !important;
    box-shadow: 0 26px 66px rgba(0, 0, 0, .50) !important;
}

.login-language-popup-option {
    min-height: 50px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
}

.login-language-popup-option.is-active {
    background: rgba(237, 28, 36, .08) !important;
}

html[data-sv-theme="dark"] .login-language-popup-option.is-active {
    background: rgba(255, 70, 78, .13) !important;
}

/* Login brand centered between controls. */
.login-auth-header > .login-brand-row {
    grid-column: 2 !important;
    width: min(100%, 232px) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.login-auth-header .login-brand-logo,
.change-frame .sv-header-logo,
.exit-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 5px !important;
    object-fit: contain !important;
    border: 1px solid rgba(237, 28, 36, .18) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 11px 24px rgba(15, 23, 42, .08) !important;
}

html[data-sv-theme="dark"] .login-auth-header .login-brand-logo,
html[data-sv-theme="dark"] .change-frame .sv-header-logo,
html[data-sv-theme="dark"] .exit-logo {
    background: #111b2a !important;
    border-color: #303d50 !important;
    box-shadow: 0 13px 28px rgba(0, 0, 0, .32) !important;
}

.login-auth-header .login-brand-copy,
.exit-brand-text,
.change-frame .sv-header-title {
    min-width: 0 !important;
}

.login-auth-header .login-brand-copy {
    text-align: left !important;
}

.login-auth-header .login-brand-copy b,
.exit-brand-text b,
.change-frame .sv-header-title h1 {
    color: var(--auth-text) !important;
    font-size: 16px !important;
    line-height: 1.12 !important;
    font-weight: 950 !important;
    letter-spacing: -.02em !important;
}

.login-auth-header .login-brand-copy span,
.exit-brand-text span,
.change-frame .sv-header-title p {
    color: var(--auth-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

/* ---------------------------------------------------------------------
   Login.
   --------------------------------------------------------------------- */

.login-auth-body {
    width: 100% !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 8px 0 10px !important;
}

.login-hero {
    width: 100% !important;
    display: block !important;
    margin: 0 0 18px !important;
    text-align: center !important;
}

.login-heading h1 {
    margin: 0 !important;
    color: var(--auth-text) !important;
    font-size: clamp(40px, 11vw, 50px) !important;
    line-height: .98 !important;
    font-weight: 950 !important;
    letter-spacing: -.055em !important;
}

.login-heading p {
    max-width: 340px !important;
    margin: 10px auto 0 !important;
    color: var(--auth-muted) !important;
    font-size: 13.5px !important;
    line-height: 1.36 !important;
    font-weight: 750 !important;
}

.login-message {
    width: 100% !important;
    margin: 0 0 12px !important;
    padding: 12px 13px !important;
    border-radius: 16px !important;
    border: 1px solid var(--auth-border) !important;
    background: var(--auth-panel-strong) !important;
    box-shadow: var(--auth-card-shadow) !important;
}

.login-message.success {
    color: var(--auth-success) !important;
    background: var(--auth-success-soft) !important;
}

.login-message.error {
    color: var(--auth-danger) !important;
    background: var(--auth-danger-soft) !important;
}

.login-form,
.login-form.sv-auth-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.login-field {
    gap: 7px !important;
}

.login-field label {
    color: var(--auth-text) !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
}

.login-input-wrap,
html[data-sv-theme="dark"] .login-input-wrap {
    height: 58px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 16px !important;
    background: var(--auth-panel) !important;
    box-shadow: var(--auth-card-shadow) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

.login-input-wrap:focus-within {
    border-color: rgba(237, 28, 36, .62) !important;
    box-shadow: 0 0 0 3px rgba(237, 28, 36, .08) !important;
}

.login-input-wrap input,
html[data-sv-theme="dark"] .login-input-wrap input {
    color: var(--auth-text) !important;
    background: transparent !important;
}

.login-input-icon {
    color: var(--auth-red) !important;
}

.login-primary-button {
    min-height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff3039 0%, var(--auth-red-dark) 100%) !important;
    box-shadow: 0 16px 34px rgba(237, 28, 36, .24) !important;
}

.forgot-password-link,
.forgot-password-link.sv-auth-action {
    width: auto !important;
    min-height: 38px !important;
    margin: 10px auto 0 !important;
    padding: 7px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--auth-red) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

.login-info-card,
.login-info-card.sv-auth-info-card {
    width: 100% !important;
    min-height: 64px !important;
    margin: 11px 0 0 !important;
    padding: 11px 12px !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 17px !important;
    background: var(--auth-panel-strong) !important;
    box-shadow: var(--auth-card-shadow) !important;
}

.login-info-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
    background: rgba(237, 28, 36, .09) !important;
    color: var(--auth-red) !important;
}

.login-info-card b {
    color: var(--auth-text) !important;
}

.login-info-card span {
    color: var(--auth-muted) !important;
}

.login-footer {
    margin-top: 0 !important;
    padding-top: 10px !important;
    color: var(--auth-muted) !important;
    font-size: 10px !important;
    text-align: center !important;
}

/* Forgot password modal: profile-style sheet on mobile. */
.forgot-modal-overlay {
    padding: 18px !important;
    align-items: center !important;
}

.forgot-modal-card {
    width: min(100%, 382px) !important;
    max-height: min(88dvh, 680px) !important;
    overflow-y: auto !important;
    padding: 23px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 26px !important;
    background: var(--auth-frame) !important;
    color: var(--auth-text) !important;
    box-shadow: 0 32px 92px rgba(15, 23, 42, .28) !important;
}

.forgot-modal-copy h2,
.forgot-field label {
    color: var(--auth-text) !important;
}

.forgot-modal-copy p {
    color: var(--auth-muted) !important;
}

.forgot-input-wrap,
html[data-sv-theme="dark"] .forgot-input-wrap {
    border-color: var(--auth-border) !important;
    background: var(--auth-input) !important;
}

/* ---------------------------------------------------------------------
   Change PIN.
   --------------------------------------------------------------------- */

.change-frame > .sv-mobile-header {
    margin-bottom: 16px !important;
}

.change-frame .sv-header-logo {
    grid-column: 1 !important;
    justify-self: start !important;
}

.change-frame .sv-header-title {
    grid-column: 2 !important;
    text-align: center !important;
}

.change-frame .sv-header-title > span {
    display: none !important;
}

.change-frame .sv-header-title h1 {
    margin: 0 !important;
    font-size: 21px !important;
}

.change-frame .sv-header-title p {
    margin: 5px 0 0 !important;
}

.change-message {
    width: 100% !important;
    margin: 0 0 12px !important;
    border-radius: 16px !important;
    box-shadow: var(--auth-card-shadow) !important;
}

.change-card,
.change-card.sv-auth-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 22px !important;
    background: var(--auth-panel) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        var(--auth-card-shadow) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

.change-card-title {
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.change-card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 17px !important;
    box-shadow: 0 12px 28px rgba(237, 28, 36, .13) !important;
}

.change-card-title h2 {
    color: var(--auth-text) !important;
    font-size: 19px !important;
}

.change-card-title p {
    color: var(--auth-muted) !important;
    font-size: 12px !important;
}

.change-form {
    gap: 13px !important;
}

.change-input-wrap,
html[data-sv-theme="dark"] .change-input-wrap,
.password-rules {
    border-color: var(--auth-border) !important;
    background: var(--auth-input) !important;
}

.change-primary-button {
    min-height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff3039 0%, var(--auth-red-dark) 100%) !important;
    box-shadow: 0 16px 34px rgba(237, 28, 36, .23) !important;
}

/* ---------------------------------------------------------------------
   Exit / close app.
   --------------------------------------------------------------------- */

.exit-frame > .exit-brand {
    grid-template-columns: 52px minmax(0, 1fr) 46px !important;
    margin-bottom: 18px !important;
}

.exit-brand-text {
    grid-column: 2 !important;
}

.exit-theme-toggle {
    grid-column: 3 !important;
}

.exit-card,
.exit-card.sv-auth-card {
    width: 100% !important;
    margin: auto 0 !important;
    padding: 28px 20px !important;
    display: grid !important;
    gap: 18px !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 24px !important;
    background: var(--auth-panel) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .50),
        0 20px 48px rgba(15, 23, 42, .10) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
}

.exit-icon {
    width: 88px !important;
    height: 88px !important;
    border-radius: 50% !important;
    box-shadow:
        0 0 0 12px rgba(237, 28, 36, .055),
        0 0 0 24px rgba(237, 28, 36, .025),
        0 16px 38px rgba(237, 28, 36, .16) !important;
}

.exit-copy h1 {
    color: var(--auth-text) !important;
    font-size: clamp(31px, 8vw, 39px) !important;
}

.exit-copy p {
    color: var(--auth-muted) !important;
    font-size: 13px !important;
    line-height: 1.44 !important;
}

.exit-button {
    min-height: 56px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff3039 0%, var(--auth-red-dark) 100%) !important;
    box-shadow: 0 16px 34px rgba(237, 28, 36, .23) !important;
}

.login-link {
    color: var(--auth-red) !important;
    font-weight: 900 !important;
}

/* ---------------------------------------------------------------------
   Narrow and short screens — preserve full-screen size, compact internals.
   --------------------------------------------------------------------- */

@media (max-width: 360px) {
    .login-frame,
    .change-frame,
    .exit-frame {
        padding:
            max(16px, env(safe-area-inset-top))
            15px
            max(15px, env(safe-area-inset-bottom)) !important;
    }

    .sv-auth-header,
    .login-auth-header,
    .change-frame > .sv-mobile-header,
    .exit-frame > .exit-brand {
        grid-template-columns: 40px minmax(0, 1fr) 40px !important;
        min-height: 46px !important;
        gap: 8px !important;
        margin-bottom: 15px !important;
    }

    .login-language-control,
    .login-language-toggle,
    .login-theme-toggle,
    .change-frame .sv-theme-button,
    .exit-theme-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        border-radius: 13px !important;
    }

    .login-auth-header > .login-brand-row {
        width: min(100%, 210px) !important;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .login-auth-header .login-brand-logo,
    .change-frame .sv-header-logo,
    .exit-logo {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
        border-radius: 15px !important;
    }

    .login-auth-header .login-brand-copy b,
    .exit-brand-text b {
        font-size: 14px !important;
    }

    .login-auth-header .login-brand-copy span,
    .exit-brand-text span {
        font-size: 10px !important;
    }

    .login-heading h1 {
        font-size: 38px !important;
    }

    .login-heading p {
        font-size: 12.5px !important;
    }

    .login-form,
    .login-form.sv-auth-card,
    .change-card,
    .change-card.sv-auth-card {
        padding: 14px !important;
    }
}

@media (max-height: 760px) {
    .login-auth-body {
        justify-content: flex-start !important;
        padding-top: 0 !important;
    }

    .login-frame,
    .change-frame,
    .exit-frame {
        padding-top: max(15px, env(safe-area-inset-top)) !important;
        padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    }

    .login-frame::before,
    .change-frame::before,
    .exit-frame::before {
        width: 300px !important;
        height: 300px !important;
        top: 44px !important;
        opacity: .68 !important;
    }

    .sv-auth-header,
    .login-auth-header,
    .change-frame > .sv-mobile-header,
    .exit-frame > .exit-brand {
        margin-bottom: 12px !important;
    }

    .login-heading h1 {
        font-size: 36px !important;
    }

    .login-heading p {
        margin-top: 7px !important;
        font-size: 12px !important;
    }

    .login-form,
    .login-form.sv-auth-card,
    .change-card,
    .change-card.sv-auth-card {
        padding: 14px !important;
    }

    .login-input-wrap,
    html[data-sv-theme="dark"] .login-input-wrap {
        height: 54px !important;
    }

    .login-primary-button,
    .change-primary-button,
    .exit-button {
        min-height: 53px !important;
    }

    .forgot-password-link,
    .forgot-password-link.sv-auth-action,
    .login-info-card,
    .login-info-card.sv-auth-info-card {
        margin-top: 8px !important;
    }

    .login-footer {
        padding-top: 9px !important;
    }

    .exit-card,
    .exit-card.sv-auth-card {
        padding: 22px 18px !important;
        gap: 14px !important;
    }
}

@media (max-width: 520px) {
    .forgot-modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .forgot-modal-card {
        width: 100% !important;
        max-width: 430px !important;
        max-height: 88dvh !important;
        padding: 23px 20px max(20px, env(safe-area-inset-bottom)) !important;
        border-radius: 28px 28px 0 0 !important;
    }
}

@media print {
    .login-language-control,
    .login-theme-toggle,
    .change-frame .sv-theme-button,
    .exit-theme-toggle {
        display: none !important;
    }
}

/* =====================================================================
   SV EP FRONT LOGIN — SKETCH 4 FINAL / V22
   Scope: ONLY Front Login. ChangePin and Exit retain V21 styling.
   ===================================================================== */

/* Full-screen frame like the other Front screens, but visually compact. */
.login-shell {
    padding: 5px !important;
    align-items: stretch !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(237, 28, 36, .09), transparent 34%),
        var(--auth-page) !important;
}

.login-frame {
    min-height: calc(100dvh - 10px) !important;
    padding:
        max(22px, env(safe-area-inset-top))
        20px
        max(16px, env(safe-area-inset-bottom)) !important;
    border: 1px solid var(--auth-border) !important;
    border-radius: 23px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 50% 6%, rgba(237, 28, 36, .065), transparent 31%),
        linear-gradient(180deg, var(--auth-frame) 0%, color-mix(in srgb, var(--auth-frame) 92%, var(--auth-page)) 100%) !important;
    box-shadow: var(--auth-shadow) !important;
}

html[data-sv-theme="dark"] .login-frame {
    background:
        radial-gradient(circle at 50% 5%, rgba(237, 28, 36, .15), transparent 33%),
        linear-gradient(180deg, #09111d 0%, #0d1726 100%) !important;
}

/* Sketch-4 orbital ring behind the brand and heading. */
.login-frame::before {
    width: 290px !important;
    height: 290px !important;
    top: 66px !important;
    border: 1px solid rgba(237, 28, 36, .18) !important;
    background: transparent !important;
    box-shadow:
        0 0 0 30px rgba(237, 28, 36, .022),
        0 0 72px rgba(237, 28, 36, .11) !important;
    opacity: 1 !important;
}

html[data-sv-theme="dark"] .login-frame::before {
    border-color: rgba(237, 28, 36, .25) !important;
    box-shadow:
        0 0 0 32px rgba(237, 28, 36, .025),
        0 0 84px rgba(237, 28, 36, .16) !important;
}

.login-frame::after {
    top: 132px !important;
    right: 34px !important;
    width: 6px !important;
    height: 6px !important;
    box-shadow:
        -300px 106px 0 -2px rgba(237, 28, 36, .42),
        -38px 250px 0 -2px rgba(237, 28, 36, .34),
        0 0 18px rgba(237, 28, 36, .50) !important;
}

/* Top row: language left, centered stacked brand, theme right. */
.login-auth-header {
    min-height: 132px !important;
    grid-template-columns: 74px minmax(0, 1fr) 46px !important;
    align-items: start !important;
    gap: 8px !important;
    margin: 0 0 14px !important;
    z-index: 30 !important;
}

.login-language-control {
    grid-column: 1 !important;
    width: auto !important;
    height: auto !important;
    position: relative !important;
    justify-self: start !important;
    z-index: 80 !important;
}

.login-language-control > summary {
    list-style: none !important;
}

.login-language-control > summary::-webkit-details-marker {
    display: none !important;
}

.login-language-toggle {
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 10px !important;
    gap: 7px !important;
    border-radius: 14px !important;
    overflow: visible !important;
}

.login-language-code {
    color: var(--auth-text) !important;
    font-size: 12px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: .02em !important;
}

.login-language-current-flag {
    width: 25px !important;
    flex: 0 0 25px !important;
}

.login-language-control:not([open]) > .login-language-popup {
    display: none !important;
}

.login-language-control[open] > .login-language-popup {
    display: block !important;
}

.login-language-popup {
    top: calc(100% + 9px) !important;
    left: 0 !important;
    width: 184px !important;
    z-index: 3000 !important;
}

.login-brand-stack {
    grid-column: 2 !important;
    justify-self: center !important;
    width: min(100%, 214px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center !important;
}

.login-brand-emblem {
    width: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 23px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid rgba(237, 28, 36, .22) !important;
    box-shadow:
        0 0 0 10px rgba(237, 28, 36, .03),
        0 15px 30px rgba(237, 28, 36, .13) !important;
}

html[data-sv-theme="dark"] .login-brand-emblem {
    background: #101a2a !important;
    border-color: rgba(255, 79, 87, .34) !important;
    box-shadow:
        0 0 0 10px rgba(237, 28, 36, .035),
        0 16px 34px rgba(0, 0, 0, .34),
        0 0 34px rgba(237, 28, 36, .17) !important;
}

.login-brand-stack .login-brand-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

.login-brand-stack .login-brand-copy {
    text-align: center !important;
}

.login-brand-stack .login-brand-copy b {
    display: block !important;
    color: var(--auth-text) !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
}

.login-brand-stack .login-brand-copy span {
    display: block !important;
    margin-top: 3px !important;
    color: var(--auth-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
    font-weight: 750 !important;
}

.login-theme-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: start !important;
}

/* Main content follows the exact Sketch-4 rhythm. */
.login-auth-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.login-hero {
    margin: 0 0 25px !important;
}

.login-heading h1 {
    font-size: clamp(39px, 10.5vw, 47px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
}

.login-heading p {
    max-width: 300px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
    font-weight: 650 !important;
}

.login-message {
    margin-bottom: 14px !important;
}

.login-form,
.login-form.sv-auth-card {
    gap: 14px !important;
}

.login-field {
    position: relative !important;
    gap: 0 !important;
}

/* Keep labels accessible but visually match the selected sketch. */
.login-field > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.login-input-wrap,
html[data-sv-theme="dark"] .login-input-wrap {
    height: 62px !important;
    border-radius: 15px !important;
    background: var(--auth-panel) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 10px 24px rgba(15, 23, 42, .06) !important;
}

.login-input-wrap input,
html[data-sv-theme="dark"] .login-input-wrap input {
    height: 100% !important;
    padding-left: 54px !important;
    padding-right: 56px !important;
    font-size: 14px !important;
    font-weight: 720 !important;
}

.login-input-icon {
    left: 18px !important;
    right: auto !important;
    width: 22px !important;
    height: 22px !important;
}

.login-input-lock-icon {
    stroke-width: 1.8 !important;
}

.password-toggle {
    right: 8px !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
}

.login-primary-button {
    min-height: 56px !important;
    margin-top: 2px !important;
    border-radius: 15px !important;
    font-size: 15px !important;
}

.forgot-password-link,
.forgot-password-link.sv-auth-action {
    margin-top: 9px !important;
    min-height: 36px !important;
    font-size: 12.5px !important;
}

/* Flexible space is placed before the info card, not below it. */
.login-info-card,
.login-info-card.sv-auth-info-card {
    margin-top: auto !important;
    min-height: 72px !important;
    padding: 12px 13px !important;
    border-radius: 16px !important;
}

.login-info-card b {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}

.login-info-card span {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

.login-footer {
    margin-top: 18px !important;
    padding-top: 0 !important;
    font-size: 9.5px !important;
}

/* Logout/error states keep the same screen size without overflowing. */
.login-frame.has-message .login-auth-header {
    min-height: 116px !important;
    margin-bottom: 10px !important;
}

.login-frame.has-message .login-brand-emblem {
    width: 64px !important;
    height: 64px !important;
}

.login-frame.has-message .login-brand-stack .login-brand-logo {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
}

.login-frame.has-message .login-hero {
    margin-bottom: 14px !important;
}

.login-frame.has-message .login-heading h1 {
    font-size: 38px !important;
}

.login-frame.has-message .login-info-card,
.login-frame.has-message .login-info-card.sv-auth-info-card {
    margin-top: 16px !important;
}

@media (max-width: 360px) {
    .login-frame {
        padding:
            max(16px, env(safe-area-inset-top))
            14px
            max(14px, env(safe-area-inset-bottom)) !important;
    }

    .login-auth-header {
        min-height: 118px !important;
        grid-template-columns: 64px minmax(0, 1fr) 40px !important;
        margin-bottom: 10px !important;
    }

    .login-language-toggle {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        padding: 0 8px !important;
    }

    .login-brand-emblem {
        width: 62px !important;
        height: 62px !important;
        border-radius: 20px !important;
    }

    .login-brand-stack .login-brand-logo {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }

    .login-brand-stack .login-brand-copy b {
        font-size: 14px !important;
    }

    .login-brand-stack .login-brand-copy span {
        font-size: 9.5px !important;
    }

    .login-heading h1 {
        font-size: 37px !important;
    }

    .login-heading p {
        max-width: 272px !important;
        font-size: 12px !important;
    }

    .login-input-wrap,
    html[data-sv-theme="dark"] .login-input-wrap {
        height: 57px !important;
    }

    .login-primary-button {
        min-height: 53px !important;
    }
}

@media (max-height: 760px) {
    .login-auth-header {
        min-height: 108px !important;
        margin-bottom: 8px !important;
    }

    .login-brand-emblem {
        width: 58px !important;
        height: 58px !important;
    }

    .login-brand-stack .login-brand-logo {
        width: 47px !important;
        height: 47px !important;
        min-width: 47px !important;
        min-height: 47px !important;
    }

    .login-hero {
        margin-bottom: 15px !important;
    }

    .login-heading h1 {
        font-size: 35px !important;
    }

    .login-heading p {
        margin-top: 7px !important;
        font-size: 11.5px !important;
    }

    .login-form,
    .login-form.sv-auth-card {
        gap: 10px !important;
    }

    .login-input-wrap,
    html[data-sv-theme="dark"] .login-input-wrap {
        height: 53px !important;
    }

    .login-primary-button {
        min-height: 51px !important;
    }

    .forgot-password-link,
    .forgot-password-link.sv-auth-action {
        margin-top: 5px !important;
    }

    .login-info-card,
    .login-info-card.sv-auth-info-card {
        min-height: 62px !important;
        padding: 9px 11px !important;
    }

    .login-footer {
        margin-top: 10px !important;
    }
}
/* ===== SV EP FRONT LOGIN — SKETCH 4 FINAL / V22 END ===== */

/* =====================================================================
   SV EP FRONT LOGIN - FINAL VERTICAL FLOW / V23
   Scope: ONLY Front Login.
   Controls stay at top. Brand, orbit and heading are independent and
   centered below them. The full-height frame is preserved.
   ===================================================================== */

.login-frame::before,
.login-frame::after {
    content: none !important;
    display: none !important;
}

.login-auth-header {
    width: 100% !important;
    min-height: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 100 !important;
}

.login-language-control,
.login-theme-toggle {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    align-self: flex-start !important;
}

.login-language-control {
    order: 1 !important;
}

.login-theme-toggle {
    order: 2 !important;
    margin-left: auto !important;
}

.login-language-popup {
    top: calc(100% + 9px) !important;
    left: 0 !important;
    right: auto !important;
}

.login-auth-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

.login-sketch4-hero {
    width: 100% !important;
    min-height: clamp(282px, 36.5svh, 320px) !important;
    margin: 0 0 18px !important;
    padding: clamp(24px, 4.6svh, 42px) 0 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    isolation: isolate !important;
    text-align: center !important;
}

.login-orbit {
    position: absolute !important;
    z-index: -1 !important;
    top: clamp(12px, 2.2svh, 20px) !important;
    left: 50% !important;
    width: clamp(270px, 72vw, 300px) !important;
    height: clamp(270px, 72vw, 300px) !important;
    transform: translateX(-50%) !important;
    border: 1px solid rgba(237, 28, 36, .19) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow:
        0 0 0 28px rgba(237, 28, 36, .020),
        0 0 78px rgba(237, 28, 36, .10) !important;
    pointer-events: none !important;
}

.login-orbit::before,
.login-orbit::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: var(--auth-red) !important;
    pointer-events: none !important;
}

.login-orbit::before {
    width: 6px !important;
    height: 6px !important;
    top: 54px !important;
    right: -34px !important;
    box-shadow: 0 0 18px rgba(237, 28, 36, .52) !important;
}

.login-orbit::after {
    width: 4px !important;
    height: 4px !important;
    left: 18px !important;
    bottom: 48px !important;
    opacity: .55 !important;
}

html[data-sv-theme="dark"] .login-sketch4-hero .login-brand-emblem {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-sv-theme="dark"] .login-sketch4-hero .login-brand-logo {
    filter: drop-shadow(0 12px 20px rgba(237, 28, 36, .34)) !important;
}

html[data-sv-theme="dark"] .login-orbit {
    border-color: rgba(237, 28, 36, .27) !important;
    box-shadow:
        0 0 0 30px rgba(237, 28, 36, .025),
        0 0 86px rgba(237, 28, 36, .16) !important;
}

.login-sketch4-hero .login-brand-stack {
    width: min(100%, 220px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
}

.login-sketch4-hero .login-brand-emblem {
    width: 88px !important;
    height: 88px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.login-sketch4-hero .login-brand-logo {
    width: 82px !important;
    height: 82px !important;
    min-width: 82px !important;
    min-height: 82px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 12px 18px rgba(237, 28, 36, .24)) !important;
}

.login-sketch4-hero .login-brand-copy b {
    font-size: 16px !important;
    line-height: 1.08 !important;
}

.login-sketch4-hero .login-brand-copy span {
    margin-top: 4px !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

.login-sketch4-hero .login-heading {
    margin-top: clamp(34px, 5.2svh, 46px) !important;
    position: relative !important;
    z-index: 2 !important;
}

.login-sketch4-hero .login-heading h1 {
    margin: 0 !important;
    font-size: clamp(40px, 10.8vw, 48px) !important;
    line-height: .98 !important;
}

.login-sketch4-hero .login-heading p {
    max-width: 300px !important;
    margin: 10px auto 0 !important;
    font-size: 13px !important;
    line-height: 1.42 !important;
}

.login-form,
.login-form.sv-auth-card {
    flex: 0 0 auto !important;
}

.forgot-password-link,
.forgot-password-link.sv-auth-action {
    flex: 0 0 auto !important;
}

.login-info-card,
.login-info-card.sv-auth-info-card {
    margin-top: auto !important;
}

.login-footer {
    flex: 0 0 auto !important;
}

/* Message states use a slightly tighter hero and still keep full height. */
.login-frame.has-message .login-auth-header {
    min-height: 46px !important;
    height: 46px !important;
    margin: 0 !important;
}

.login-frame.has-message .login-sketch4-hero {
    min-height: clamp(224px, 29svh, 252px) !important;
    padding-top: clamp(15px, 2.5svh, 24px) !important;
    margin-bottom: 12px !important;
}

.login-frame.has-message .login-sketch4-hero .login-brand-emblem {
    width: 64px !important;
    height: 64px !important;
}

.login-frame.has-message .login-sketch4-hero .login-brand-logo {
    width: 55px !important;
    height: 55px !important;
    min-width: 55px !important;
    min-height: 55px !important;
}

.login-frame.has-message .login-sketch4-hero .login-heading {
    margin-top: 24px !important;
}

.login-frame.has-message .login-orbit {
    width: 244px !important;
    height: 244px !important;
    top: 44px !important;
}

.login-frame.has-message .login-info-card,
.login-frame.has-message .login-info-card.sv-auth-info-card {
    margin-top: 18px !important;
}

@media (max-width: 360px) {
    .login-sketch4-hero {
        min-height: 274px !important;
        padding-top: 22px !important;
    }

    .login-orbit {
        width: 262px !important;
        height: 262px !important;
        top: 10px !important;
    }

    .login-sketch4-hero .login-brand-emblem {
        width: 74px !important;
        height: 74px !important;
    }

    .login-sketch4-hero .login-brand-logo {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
    }

    .login-sketch4-hero .login-heading {
        margin-top: 34px !important;
    }
}

@media (max-height: 760px) {
    .login-sketch4-hero {
        min-height: 238px !important;
        padding-top: 14px !important;
        margin-bottom: 12px !important;
    }

    .login-orbit {
        width: 238px !important;
        height: 238px !important;
        top: 6px !important;
    }

    .login-sketch4-hero .login-brand-emblem {
        width: 62px !important;
        height: 62px !important;
    }

    .login-sketch4-hero .login-brand-logo {
        width: 53px !important;
        height: 53px !important;
        min-width: 53px !important;
        min-height: 53px !important;
    }

    .login-sketch4-hero .login-heading {
        margin-top: 24px !important;
    }

    .login-sketch4-hero .login-heading h1 {
        font-size: 36px !important;
    }

    .login-sketch4-hero .login-heading p {
        margin-top: 7px !important;
        font-size: 11.5px !important;
    }

    .login-info-card,
    .login-info-card.sv-auth-info-card {
        margin-top: 20px !important;
    }
}
/* ===== SV EP FRONT LOGIN - FINAL VERTICAL FLOW / V23 END ===== */

/* =====================================================================
   SV EP FRONT LOGIN FLAG + CENTERED INFO / V23.1
   Scope: ONLY Front Login.
   ===================================================================== */

/* Official Montenegro flag asset supplied for the project. */
.login-language-current-flag {
    width: 27px !important;
    height: 17px !important;
    flex: 0 0 27px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 3px !important;
}

.login-language-popup-option > .login-language-popup-flag {
    width: 36px !important;
    height: 24px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, .14) !important;
}

html[data-sv-theme="dark"] .login-language-popup-option > .login-language-popup-flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) !important;
}

/* Symmetric three-column layout keeps the info copy centered in the card. */
.login-info-card,
.login-info-card.sv-auth-info-card {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    column-gap: 10px !important;
    text-align: center !important;
}

.login-info-card::after,
.login-info-card.sv-auth-info-card::after {
    content: "" !important;
    width: 42px !important;
    height: 42px !important;
    display: block !important;
    grid-column: 3 !important;
}

.login-info-card > .login-info-icon {
    grid-column: 1 !important;
    justify-self: center !important;
}

.login-info-card > div:not(.login-info-icon) {
    grid-column: 2 !important;
    min-width: 0 !important;
    text-align: center !important;
}

.login-info-card b,
.login-info-card span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

@media (max-width: 350px) {
    .login-info-card,
    .login-info-card.sv-auth-info-card {
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        column-gap: 8px !important;
        padding-inline: 10px !important;
    }

    .login-info-card::after,
    .login-info-card.sv-auth-info-card::after {
        width: 38px !important;
        height: 38px !important;
    }

    .login-info-icon {
        width: 38px !important;
        height: 38px !important;
    }
}
/* ===== SV EP FRONT LOGIN FLAG + CENTERED INFO / V23.1 - END ===== */


/* =====================================================================
   SV EP FRONT LOGIN LANGUAGE POPUP COMPACT / V23.2
   Scope: ONLY Front Login language popup.
   ===================================================================== */
.login-language-popup {
    width: 158px !important;
    padding: 5px !important;
    border-radius: 14px !important;
}

.login-language-popup-option {
    min-height: 42px !important;
    padding: 6px 8px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 8px !important;
    border-radius: 10px !important;
}

.login-language-popup-option > .login-language-popup-flag,
.login-language-popup-option > svg {
    width: 30px !important;
    height: 20px !important;
    flex: 0 0 30px !important;
    border-radius: 3px !important;
}

.login-language-popup-option b {
    font-size: 12px !important;
    line-height: 1.05 !important;
}

.login-language-popup-option small {
    margin-top: 2px !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
}

@media (max-width: 350px) {
    .login-language-popup {
        width: 150px !important;
    }

    .login-language-popup-option {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    .login-language-popup-option > .login-language-popup-flag,
    .login-language-popup-option > svg {
        width: 28px !important;
        height: 19px !important;
        flex-basis: 28px !important;
    }
}
/* ===== SV EP FRONT LOGIN LANGUAGE POPUP COMPACT / V23.2 - END ===== */