/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Serepok
 *
 * This block allows you to customize theme colors and styles for the entire Serepok template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

@keyframes mtd-auth-bar-rain {
    0% {
        background-position:
            -280px -560px,
            80px -500px,
            360px -640px,
            520px -460px;
    }

    100% {
        background-position:
            160px 560px,
            520px 620px,
            780px 520px,
            980px 640px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.login .mtd-login-visual .line-bg::before,
    #wrapper.mtd-reset-screen .mtd-reset-visual::after {
        animation: none !important;
    }
}

/* Auth field icon alignment fix */
body.login .mtd-login-input-wrap,
#wrapper.mtd-reset-screen .mtd-reset-input-wrap {
    position: relative;
    display: block !important;
    min-height: 58px;
    padding: 0 !important;
    overflow: visible;
}

body.login .mtd-login-input-icon,
#wrapper.mtd-reset-screen .mtd-reset-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    z-index: 3;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #94a3b8;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

body.login .mtd-login-input-icon i,
#wrapper.mtd-reset-screen .mtd-reset-input-icon i {
    display: block;
    line-height: 1;
}

body.login .mtd-login-input-wrap .form-control,
#wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control {
    display: block;
    width: 100% !important;
    height: 58px;
    min-height: 58px;
    padding: 0 16px 0 52px !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 58px;
}

body.login .mtd-login-password-wrap .form-control {
    padding-right: 68px !important;
}

body.login .mtd-login-reveal i {
    display: block;
    line-height: 1;
}

@media (max-width: 560px) {
    body.login .mtd-login-input-wrap,
    #wrapper.mtd-reset-screen .mtd-reset-input-wrap {
        min-height: 54px;
    }

    body.login .mtd-login-input-icon,
    #wrapper.mtd-reset-screen .mtd-reset-input-icon {
        left: 16px;
    }

    body.login .mtd-login-input-wrap .form-control,
    #wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control {
        height: 54px;
        min-height: 54px;
        padding-left: 48px !important;
        line-height: 54px;
    }

    body.login .mtd-login-password-wrap .form-control {
        padding-right: 62px !important;
    }

    body.login .mtd-login-reveal {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
}

/* Password reset screen rebuild */
#wrapper.mtd-reset-screen {
    min-height: 100vh;
    padding: 42px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(122deg, rgba(238, 246, 255, 0.96) 0 30%, rgba(255, 255, 255, 0.98) 30% 62%, rgba(232, 247, 242, 0.95) 62% 100%),
        url("../images/loginBg.jpg") center / cover no-repeat;
}

#wrapper.mtd-reset-screen .mtd-reset-page-container {
    width: min(1080px, 100%);
    min-height: min(760px, calc(100vh - 84px));
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

#wrapper.mtd-reset-screen .mtd-reset-shell {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(330px, 0.9fr) minmax(390px, 1fr);
    overflow: hidden;
    color: #111827;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 8px;
    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.16);
}

#wrapper.mtd-reset-screen .mtd-reset-visual {
    position: relative;
    min-height: 680px;
    padding: 46px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--mtd-scheme-primary) 42%, transparent) 0 18%, transparent 36%),
        radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--mtd-scheme-accent) 34%, transparent) 0 20%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--mtd-scheme-primary-deep) 68%, #2f6eed) 0%, color-mix(in srgb, var(--mtd-scheme-primary) 70%, #5aa4ff) 52%, color-mix(in srgb, var(--mtd-scheme-accent) 72%, #249bd6) 100%);
}

#wrapper.mtd-reset-screen .mtd-reset-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.22) 18.2% 18.58%, transparent 18.85% 100%),
        linear-gradient(110deg, transparent 0 31%, rgba(255, 255, 255, 0.14) 31.2% 31.55%, transparent 31.85% 100%),
        linear-gradient(110deg, transparent 0 48%, color-mix(in srgb, var(--mtd-scheme-accent) 34%, rgba(255, 255, 255, 0.18)) 48.25% 48.68%, transparent 49% 100%),
        linear-gradient(110deg, transparent 0 64%, rgba(255, 255, 255, 0.16) 64.15% 64.55%, transparent 64.88% 100%),
        linear-gradient(110deg, transparent 0 79%, rgba(255, 255, 255, 0.2) 79.15% 79.5%, transparent 79.8% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 64px);
    opacity: 0.9;
}

#wrapper.mtd-reset-screen .mtd-reset-visual::after {
    content: "";
    position: absolute;
    inset: -36% -28%;
    background:
        linear-gradient(110deg, transparent 0 44%, rgba(255, 255, 255, 0) 44.15%, rgba(255, 255, 255, 0.66) 44.48%, rgba(255, 255, 255, 0.12) 45.25%, transparent 46.05% 100%) -280px -560px / 360px 620px no-repeat,
        linear-gradient(110deg, transparent 0 52%, color-mix(in srgb, var(--mtd-scheme-accent) 44%, rgba(255, 255, 255, 0.35)) 52.32%, rgba(255, 255, 255, 0.08) 53.15%, transparent 54% 100%) 80px -500px / 420px 680px no-repeat,
        linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.48) 38.35%, rgba(255, 255, 255, 0.08) 38.9%, transparent 39.55% 100%) 360px -640px / 300px 620px no-repeat,
        linear-gradient(110deg, transparent 0 58%, rgba(255, 255, 255, 0.36) 58.3%, transparent 59.1% 100%) 520px -460px / 320px 580px no-repeat;
    border: 0;
    opacity: 0.58;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: mtd-auth-bar-rain 4.8s linear infinite;
}

#wrapper.mtd-reset-screen .mtd-reset-visual > * {
    position: relative;
    z-index: 1;
}

#wrapper.mtd-reset-screen .mtd-reset-brand {
    padding: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-logo-link {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    color: inherit;
    text-decoration: none;
}

#wrapper.mtd-reset-screen .mtd-reset-logo-link img {
    width: auto;
    max-width: min(520px, 100%);
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

#wrapper.mtd-reset-screen .mtd-reset-logo-link span {
    color: inherit;
    font-size: 1.65rem;
    font-weight: 900;
}

#wrapper.mtd-reset-screen .mtd-reset-visual .logo-dark {
    display: none;
}

#wrapper.mtd-reset-screen .mtd-reset-visual .logo-light {
    display: inline-block;
}

#wrapper.mtd-reset-screen .mtd-reset-visual-copy {
    margin-top: auto;
    padding-top: 52px;
}

#wrapper.mtd-reset-screen .mtd-reset-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 18px;
    padding: 7px 12px;
    color: #dcfce7;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 900;
    text-transform: uppercase;
}

#wrapper.mtd-reset-screen .mtd-reset-visual h2 {
    max-width: 430px;
    margin: 0 0 14px;
    color: #ffffff;
    font-size: 2.65rem;
    line-height: 1.05;
    font-weight: 900;
}

#wrapper.mtd-reset-screen .mtd-reset-visual-copy p,
#wrapper.mtd-reset-screen .mtd-reset-story p {
    max-width: 420px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.7;
}

#wrapper.mtd-reset-screen .mtd-reset-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 32px;
}

#wrapper.mtd-reset-screen .mtd-reset-step {
    display: flex;
    min-width: 0;
    min-height: 86px;
    padding: 13px;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    text-align: center;
}

#wrapper.mtd-reset-screen .mtd-reset-step i {
    color: #a7f3d0;
    font-size: 1.2rem;
}

#wrapper.mtd-reset-screen .mtd-reset-step strong {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 900;
}

#wrapper.mtd-reset-screen .mtd-reset-security-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
    padding: 15px 16px;
    color: rgba(255, 255, 255, 0.86);
    background: rgba(6, 24, 44, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    font-weight: 750;
}

#wrapper.mtd-reset-screen .mtd-reset-security-note i {
    color: #a7f3d0;
}

#wrapper.mtd-reset-screen .mtd-reset-story {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#wrapper.mtd-reset-screen .mtd-reset-story .swiper-slide {
    height: auto;
}

#wrapper.mtd-reset-screen .mtd-reset-story a {
    color: inherit;
    text-decoration: none;
}

#wrapper.mtd-reset-screen .mtd-reset-story h3 {
    max-width: 420px;
    margin: 12px 0 10px;
    color: #ffffff;
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 900;
}

#wrapper.mtd-reset-screen .mtd-reset-story-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #a7f3d0;
    font-size: 0.82rem;
    font-weight: 850;
}

#wrapper.mtd-reset-screen .mtd-reset-story .swiper-pagination {
    position: static;
    margin-top: 18px;
    text-align: left;
}

#wrapper.mtd-reset-screen .mtd-reset-form-panel {
    display: flex;
    min-width: 0;
    padding: 52px 44px;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.98));
}

#wrapper.mtd-reset-screen .mtd-reset-form-panel .login-container {
    width: 100%;
    max-width: 480px;
    margin: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-box {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#wrapper.mtd-reset-screen .mtd-reset-mobile-brand {
    display: none;
    margin-bottom: 24px;
    padding: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-titlebar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 15px;
    align-items: center;
    margin-bottom: 26px;
}

#wrapper.mtd-reset-screen .mtd-reset-title-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
}

#wrapper.mtd-reset-screen .mtd-reset-titlebar h1 {
    margin: 0 0 5px;
    color: #111827;
    font-size: 1.62rem;
    line-height: 1.18;
    font-weight: 900;
    text-transform: none;
}

#wrapper.mtd-reset-screen .mtd-reset-titlebar p {
    margin: 0;
    color: #64748b;
    font-size: 0.96rem;
    line-height: 1.55;
}

#wrapper.mtd-reset-screen .mtd-reset-content {
    margin: 0;
    padding: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-content .alert {
    margin-bottom: 18px;
    border-radius: 8px;
}

#wrapper.mtd-reset-screen .mtd-reset-intro p,
#wrapper.mtd-reset-screen .mtd-reset-content > p {
    margin: 0 0 18px;
    color: #475569;
    font-size: 1rem;
    line-height: 1.7;
}

#wrapper.mtd-reset-screen .mtd-reset-form,
#wrapper.mtd-reset-screen .mtd-reset-content form {
    display: grid;
    gap: 18px;
    margin: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-field,
#wrapper.mtd-reset-screen .mtd-reset-content .form-group {
    margin: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-field .form-control-label,
#wrapper.mtd-reset-screen .mtd-reset-content label {
    margin: 0 0 8px;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 900;
}

#wrapper.mtd-reset-screen .mtd-reset-input-wrap {
    display: flex;
    min-height: 58px;
    align-items: center;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#wrapper.mtd-reset-screen .mtd-reset-input-wrap:focus-within {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent);
}

#wrapper.mtd-reset-screen .mtd-reset-input-icon {
    display: inline-flex;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

#wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control {
    min-width: 0;
    height: 56px;
    padding: 0 0 0 12px;
    color: #111827;
    background: transparent;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 650;
}

#wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control::placeholder,
#wrapper.mtd-reset-screen .mtd-reset-content .form-control::placeholder {
    color: #94a3b8;
    font-weight: 550;
}

#wrapper.mtd-reset-screen .mtd-reset-content form:not(.mtd-reset-form) .form-control {
    min-height: 54px;
    width: 100%;
    padding: 13px 15px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
    font-size: 1rem;
    font-weight: 650;
}

#wrapper.mtd-reset-screen .mtd-reset-content form:not(.mtd-reset-form) .form-control:focus {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent);
}

#wrapper.mtd-reset-screen .mtd-reset-content .input-icon.right {
    position: relative;
}

#wrapper.mtd-reset-screen .mtd-reset-content .password-strength-meter {
    padding-top: 2px;
}

#wrapper.mtd-reset-screen .mtd-reset-content .password-strength-meter .progress {
    height: 8px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 8px;
}

#wrapper.mtd-reset-screen .mtd-reset-captcha {
    margin: 0;
}

#wrapper.mtd-reset-screen .mtd-reset-submit,
#wrapper.mtd-reset-screen .mtd-reset-content form .btn-primary {
    display: inline-flex;
    min-height: 58px;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 16px 30px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
    font-size: 1.02rem;
    font-weight: 900;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#wrapper.mtd-reset-screen .mtd-reset-submit:hover,
#wrapper.mtd-reset-screen .mtd-reset-submit:focus,
#wrapper.mtd-reset-screen .mtd-reset-content form .btn-primary:hover,
#wrapper.mtd-reset-screen .mtd-reset-content form .btn-primary:focus {
    color: #ffffff;
    background: var(--mtd-scheme-primary-hover);
    box-shadow: 0 18px 34px rgba(21, 87, 219, 0.28);
    transform: translateY(-1px);
}

#wrapper.mtd-reset-screen .mtd-reset-content .btn-group {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#wrapper.mtd-reset-screen .mtd-reset-content .btn-group .btn {
    min-height: 50px;
    border-radius: 8px !important;
    font-weight: 850;
}

#wrapper.mtd-reset-screen .mtd-reset-content form .btn-default {
    color: #334155;
    background: #ffffff;
    border: 1px solid #dbe7f5;
}

#wrapper.mtd-reset-screen .mtd-reset-success-card {
    padding: 18px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
}

#wrapper.mtd-reset-screen .mtd-reset-success-card p {
    margin: 0;
    color: #166534;
    line-height: 1.65;
    font-weight: 650;
}

#wrapper.mtd-reset-screen .mtd-reset-help-links,
#wrapper.mtd-reset-screen .mtd-reset-register-link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    padding: 15px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.98rem;
    font-weight: 650;
}

#wrapper.mtd-reset-screen .mtd-reset-help-links a,
#wrapper.mtd-reset-screen .mtd-reset-register-link a {
    color: var(--mtd-scheme-primary);
    font-weight: 900;
    text-decoration: none;
}

#wrapper.mtd-reset-screen .mtd-reset-help-links a:hover,
#wrapper.mtd-reset-screen .mtd-reset-help-links a:focus,
#wrapper.mtd-reset-screen .mtd-reset-register-link a:hover,
#wrapper.mtd-reset-screen .mtd-reset-register-link a:focus {
    color: var(--mtd-scheme-primary-hover);
    text-decoration: none;
}

#wrapper.mtd-reset-screen .mtd-reset-language {
    margin-top: 18px;
}

#wrapper.mtd-reset-screen .mtd-reset-language .btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    color: #111827;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 8px;
    font-weight: 850;
}

#wrapper.mtd-reset-screen .mtd-reset-language .iti-flag {
    margin: 0;
}

body.dark-mode #wrapper.mtd-reset-screen {
    background:linear-gradient(122deg, rgba(8, 14, 26, 0.98) 0 34%, color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent) 34% 62%, rgba(8, 43, 39, 0.97) 62% 100%),
        url("../images/loginBg.jpg") center / cover no-repeat;
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-shell {
    color:var(--mtd-text,#e5edf7);
    background:var(--mtd-surface,#111c2d);
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 18%, transparent);
    box-shadow:0 26px 70px rgba(0, 0, 0, 0.34);
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-form-panel {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent), color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent));
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-titlebar h1,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-field .form-control-label,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content label {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-titlebar p,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-intro p,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content > p {
    color:#aab6c7;
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-input-wrap,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content form:not(.mtd-reset-form) .form-control,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-help-links,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-register-link,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-language .btn {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface-soft,#17243a);
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 20%, transparent);
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control,
body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content form:not(.mtd-reset-form) .form-control {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content .password-strength-meter .progress {
    background:var(--mtd-soft-line,#223148);
}

body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-success-card {
    background:rgba(20, 83, 45, 0.24);
    border-color:rgba(134, 239, 172, 0.26);
}

@media (max-width: 960px) {
    #wrapper.mtd-reset-screen {
        padding: 18px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-page-container {
        min-height: calc(100vh - 36px);
    }

    #wrapper.mtd-reset-screen .mtd-reset-shell {
        max-width: 620px;
        grid-template-columns: minmax(0, 1fr);
    }

    #wrapper.mtd-reset-screen .mtd-reset-visual {
        display: none;
    }

    #wrapper.mtd-reset-screen .mtd-reset-mobile-brand {
        display: block;
    }

    #wrapper.mtd-reset-screen .mtd-reset-mobile-brand .logo-light {
        display: none;
    }

    #wrapper.mtd-reset-screen .mtd-reset-mobile-brand .logo-dark {
        display: inline-block;
    }
}

@media (max-width: 560px) {
    #wrapper.mtd-reset-screen {
        padding: 10px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-page-container {
        min-height: calc(100vh - 20px);
    }

    #wrapper.mtd-reset-screen .mtd-reset-shell {
        border-radius: 8px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-form-panel {
        padding: 24px 16px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-titlebar {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 22px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-title-icon {
        width: 42px;
        height: 42px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-titlebar h1 {
        font-size: 1.35rem;
    }

    #wrapper.mtd-reset-screen .mtd-reset-input-wrap {
        min-height: 54px;
        padding: 0 13px;
    }

    #wrapper.mtd-reset-screen .mtd-reset-input-wrap .form-control {
        height: 52px;
        font-size: 0.96rem;
    }

    #wrapper.mtd-reset-screen .mtd-reset-content .btn-group {
        grid-template-columns: minmax(0, 1fr);
    }
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
    --mtd-scheme-primary: var(--brand-primary, var(--text-primary-color, var(--btn-primary-bg, #1f6bff)));
    --mtd-scheme-primary-text: var(--btn-primary-color, #ffffff);
    --mtd-scheme-primary-hover: var(--btn-primary-hover-bg, color-mix(in srgb, var(--mtd-scheme-primary) 82%, #07111f));
    --mtd-scheme-primary-deep: color-mix(in srgb, var(--mtd-scheme-primary) 76%, #0f172a);
    --mtd-scheme-primary-dark: color-mix(in srgb, var(--mtd-scheme-primary) 36%, #0f172a);
    --mtd-scheme-primary-soft: color-mix(in srgb, var(--mtd-scheme-primary) 10%, #ffffff);
    --mtd-scheme-primary-surface: color-mix(in srgb, var(--mtd-scheme-primary) 5%, #ffffff);
    --mtd-scheme-primary-border: color-mix(in srgb, var(--mtd-scheme-primary) 26%, transparent);
    --mtd-scheme-primary-focus: color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent);
    --mtd-scheme-primary-shadow: color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
    --mtd-scheme-primary-grid: color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent);
    --mtd-scheme-accent: var(--brand-secondary, var(--brand-info, #0f766e));
    --mtd-scheme-accent-soft: color-mix(in srgb, var(--mtd-scheme-accent) 10%, transparent);
}

/* Keep loading spanner dots aligned with the active theme scheme. */
.spanner {
    --mtd-spanner-color: var(--primary, var(--brand-primary, #1062fe));
}

.spanner > div,
.spanner > span {
    background: var(--mtd-spanner-color) !important;
}

.btn_loader.btn_loading .btn_loading_icon .spanner {
    --mtd-spanner-color: currentColor;
}

.btn_loader.btn_loading.btn-default .btn_loading_icon .spanner {
    --mtd-spanner-color: var(--primary, var(--brand-primary, #1062fe));
}

.wbams_cms-wordmark {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.wbams_cms-home {
    color: var(--text);
    background: var(--bg);
}

.wbams_cms-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    overflow: hidden;
    color: var(--text-inverted);
    background: var(--neutral-950);
}

.wbams_cms-hero__media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 7, 18, 0.92) 0%, rgba(17, 24, 39, 0.72) 46%, rgba(17, 24, 39, 0.18) 100%),
        url("../images/hero-bg1.jpg") center/cover no-repeat;
}

.wbams_cms-hero .container {
    position: relative;
    z-index: 1;
}

.wbams_cms-hero__content {
    max-width: 680px;
    padding: 6rem 0;
}

.wbams_cms-eyebrow {
    margin: 0 0 0.85rem;
    color: var(--teal-300);
    font-size: var(--text-md);
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.wbams_cms-hero h1 {
    margin: 0;
    color: var(--text-inverted);
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.wbams_cms-hero__copy {
    max-width: 560px;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.25rem;
    line-height: 1.65;
}

.wbams_cms-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.wbams_cms-section {
    padding: 4.5rem 0;
}

.wbams_cms-section__header h2 {
    margin: 0;
    color: var(--text);
    font-size: 2.25rem;
    font-weight: 850;
    letter-spacing: 0;
}

.wbams_cms-section--muted {
    background: var(--bg-muted);
}

.wbams_cms-card {
    display: flex;
    flex-direction: column;
    padding: 1.35rem;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    background: var(--bg);
    box-shadow: 0 14px 36px rgba(17, 24, 39, 0.06);
}

.wbams_cms-card h3 {
    margin: 0 0 0.75rem;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.wbams_cms-card p {
    color: var(--text-accented);
}

.wbams_cms-card ul {
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.wbams_cms-card li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.35rem;
    color: var(--text-accented);
}

.wbams_cms-card li::before {
    position: absolute;
    left: 0;
    color: var(--success);
    content: "\2713";
    font-weight: 800;
}

.wbams_cms-card .btn {
    margin-top: auto;
}

.wbams_cms-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.wbams_cms-actions a {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
    min-height: 132px;
    padding: 1rem;
    border: 1px solid var(--border-muted);
    border-radius: 8px;
    color: var(--text);
    background: var(--bg);
    text-align: center;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.wbams_cms-actions a:hover,
.wbams_cms-actions a:focus {
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(17, 24, 39, 0.08);
    color: var(--primary);
    transform: translateY(-2px);
}

.wbams_cms-actions i {
    color: var(--primary);
    font-size: 1.8rem;
}

.wbams_cms-actions span {
    font-weight: 750;
}

@media (max-width: 991.98px) {
    .wbams_cms-hero {
        min-height: 560px;
    }

    .wbams_cms-hero h1 {
        font-size: 3rem;
    }

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

@media (max-width: 575.98px) {
    .wbams_cms-hero {
        min-height: auto;
    }

    .wbams_cms-hero__content {
        padding: 4.5rem 0;
    }

    .wbams_cms-hero h1 {
        font-size: 2.35rem;
    }

    .wbams_cms-hero__copy {
        font-size: 1rem;
    }

    .wbams_cms-section {
        padding: 3rem 0;
    }

    .wbams_cms-actions {
        grid-template-columns: 1fr;
    }
}

/* Client dashboard panels */
body:not(.login) .mtd-global-content-shell .client-home-panels {
    margin-top: 24px;
}

body:not(.login) .mtd-global-content-shell .client-home-panels > .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin: 0;
}

body:not(.login) .mtd-global-content-shell .client-home-panels > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

body:not(.login) .mtd-global-content-shell .client-home-panels > .row > .col-12,
body:not(.login) .mtd-global-content-shell .client-home-panels .mtd-dashboard-panel-services,
body:not(.login) .mtd-global-content-shell .client-home-panels #servicesPanel {
    grid-column: 1 / -1;
}

body:not(.login) .mtd-global-content-shell .client-home-panels > .row > .col-md-6 {
    grid-column: span 6;
    display: grid;
    gap: 20px;
    align-content: start;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--mtd-scheme-primary) 16%, #dbe7f5);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 3px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, var(--mtd-scheme-primary), var(--mtd-scheme-accent));
    opacity: 0;
    transition: opacity 0.18s ease;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel:hover::after {
    opacity: 0.78;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel .panel-heading {
    display: flex;
    min-height: 64px;
    align-items: center;
    padding: 0 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 7%, transparent), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--mtd-scheme-primary-surface));
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-heading-inner {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel .panel-title {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: #0f172a;
    font-size: 0.98rem;
    text-align: left;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-title-text {
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel .panel-title > i {
    width: 36px;
    height: 36px;
    margin: 0 !important;
    font-size: 1rem;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-actions {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-action {
    display: inline-flex;
    margin-left: auto;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-icon-action {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent);
    text-decoration: none;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-icon-action:hover {
    color: #ffffff;
    background: var(--mtd-scheme-primary-hover);
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-body {
    padding: 18px;
    color: #334155;
    line-height: 1.65;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-list {
    display: grid;
    gap: 10px;
    padding: 14px;
    background: linear-gradient(180deg, #fbfdff, var(--mtd-scheme-primary-surface));
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-list .mtd-dashboard-list-item {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 13px 15px;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px !important;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-list .mtd-dashboard-list-item:hover {
    border-color: color-mix(in srgb, var(--mtd-scheme-primary) 28%, #dbe7f5);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

body:not(.login) .mtd-global-content-shell .panel-active-services .mtd-dashboard-services-list {
    gap: 8px;
    padding: 12px;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .mtd-dashboard-service-item {
    display: block !important;
    overflow: hidden;
    min-height: 0;
    padding: 0 !important;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .mtd-dashboard-service-item > i {
    display: none !important;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-content,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-item {
    display: grid !important;
    width: 100% !important;
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-name,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-name,
body:not(.login) .mtd-global-content-shell .panel-active-services .mtd-service-identity {
    display: flex !important;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 2px;
    margin: 0;
    color: #111827;
    line-height: 1.35;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .service-fullname {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 2px;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-group,
body:not(.login) .mtd-global-content-shell .panel-active-services .service-group-name {
    display: inline !important;
    width: auto;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.92rem;
    font-weight: 850;
    letter-spacing: 0;
    line-height: inherit;
    overflow: visible;
    text-overflow: clip;
    text-transform: none;
    white-space: normal;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .service-group-name b {
    font-weight: 850;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-fullname,
body:not(.login) .mtd-global-content-shell .panel-active-services .service-name {
    display: inline !important;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 900;
    white-space: normal;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-status,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-expiry,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-status {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 750;
    justify-self: end;
    margin: 0 !important;
    white-space: nowrap;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .status-expiry,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-expiry span {
    margin: 0;
    color: #64748b;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .label-placeholder {
    display: none !important;
}

body:not(.login) .mtd-global-content-shell .client-home-panels .label,
body:not(.login) .mtd-global-content-shell .client-home-panels .status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .label-success,
body:not(.login) .mtd-global-content-shell .panel-active-services .status-active {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #86efac;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-actions,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-buttons {
    display: flex;
    min-width: 118px;
    justify-content: flex-end;
    justify-self: end;
    margin: 0 !important;
}

body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-actions .btn,
body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-buttons .btn,
body:not(.login) .mtd-global-content-shell .panel-active-services .btn-view-details {
    min-height: 36px;
    min-width: 108px;
    padding: 9px 14px;
    font-size: 0.82rem;
    font-weight: 900;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-overdue .mtd-dashboard-panel-body {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    background: linear-gradient(135deg, #fff7ed, #ffffff 68%);
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-overdue .mtd-dashboard-panel-body::before {
    content: "\f071";
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: #9a3412;
    background: #ffedd5;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-item.mtd-ticket-row-ready {
    grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
    gap: 18px;
    align-items: center;
    padding: 15px 16px;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-item br {
    display: none;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-item .status {
    justify-self: start;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-ticket-summary {
    display: block;
    min-width: 0;
    color: #1f2937;
    font-size: 0.96rem;
    font-weight: 850;
    line-height: 1.45;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-ticket-meta {
    display: flex;
    min-width: 128px;
    align-items: flex-end;
    flex-direction: column;
    gap: 8px;
    justify-self: end;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status {
    display: inline-flex;
    min-width: 82px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 !important;
    padding: 6px 11px;
    border: 1px solid #dbe7f5;
    border-radius: 999px;
    background: #f8fafc;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: currentColor;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status.is-open {
    color: #15803d;
    background: #f0fdf4;
    border-color: #86efac;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status.is-open::before {
    background: #22c55e;
    box-shadow: 0 0 0 4px #dcfce7;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status.is-closed {
    color: #64748b;
    background: #f8fafc;
    border-color: #dbe7f5;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-status.is-closed::before {
    background: #94a3b8;
    box-shadow: 0 0 0 4px #e2e8f0;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .text-last-updated,
body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets small {
    justify-self: end;
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 750;
    text-align: right;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-updated {
    display: block;
    margin: 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.35;
    text-align: right;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-news .mtd-dashboard-news-item {
    justify-content: space-between;
    min-height: 58px;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-news .mtd-dashboard-news-item small,
body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-news .date {
    color: #64748b;
    font-weight: 800;
    white-space: nowrap;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 14px 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), #ffffff);
    border-top: 1px solid #edf2f7;
}

body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-footer .btn {
    min-height: 34px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 900;
}

body.dark-mode:not(.login) .mtd-global-content-shell .mtd-dashboard-panel {
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode:not(.login) .mtd-global-content-shell .mtd-dashboard-panel .panel-heading,
body.dark-mode:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-list,
body.dark-mode:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-footer {
    background:var(--mtd-surface-soft,#17243a);
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-list .mtd-dashboard-list-item {
    color:var(--mtd-text,#e5edf7);
    background:var(--mtd-surface, #111c2f);
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .service-name,
body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-fullname {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .service-group-name, body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-group, body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .div-service-expiry, body.dark-mode:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-status {
    color:var(--mtd-muted, #9fb0c6);
}

@media (max-width: 991.98px) {
    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-content,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-item {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-actions,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-buttons {
        grid-column: 1 / -1;
        justify-content: flex-start;
        justify-self: start;
    }
}

@media (max-width: 1199.98px) {
    body:not(.login) .mtd-global-content-shell .client-home-panels > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.login) .mtd-global-content-shell .client-home-panels > .row > .col-md-6 {
        grid-column: span 1;
    }
}

@media (max-width: 767.98px) {
    body:not(.login) .mtd-global-content-shell .client-home-panels > .row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body:not(.login) .mtd-global-content-shell .client-home-panels > .row > .col-md-6,
    body:not(.login) .mtd-global-content-shell .client-home-panels .mtd-dashboard-panel-services,
    body:not(.login) .mtd-global-content-shell .client-home-panels #servicesPanel {
        grid-column: 1 / -1;
    }

    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-content,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-item,
    body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .mtd-dashboard-ticket-item {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-status,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-expiry,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-status,
    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-actions,
    body:not(.login) .mtd-global-content-shell .panel-active-services .div-service-buttons,
    body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets .text-last-updated,
    body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-tickets small {
        justify-self: start;
        text-align: left;
    }

    body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-heading-inner {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 0;
    }

    body:not(.login) .mtd-global-content-shell .mtd-dashboard-panel-actions {
        justify-content: flex-start;
    }

    body:not(.login) .mtd-global-content-shell .panel-active-services .list-group-item-fullname,
    body:not(.login) .mtd-global-content-shell .panel-active-services .service-fullname,
    body:not(.login) .mtd-global-content-shell .panel-active-services .service-name {
        white-space: normal;
    }
}

.register-wrapper .container {
    height: auto;
    min-height: 100vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
    justify-content: flex-start;
}

.login-container.register-login-container {
    width: 760px;
    max-width: 95vw;
    margin-left: auto;
    margin-right: auto;
}

.register-login-box {
    overflow: visible;
}

.register-login-box #registration h4 {
    margin: 1.5rem 0 0.75rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 800;
}

.register-login-box #registration h4:first-of-type {
    margin-top: 0;
}

.register-login-box #registration .MTD-card {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    box-shadow: none;
}

.register-login-box #registration .form-actions {
    margin-top: 1.5rem;
}

.register-login-box #registration .form-actions .btn {
    width: 100%;
}

.register-login-layout .center-container {
    align-items: stretch;
}

.register-login-layout .center-container .register-login-container {
    width: 100%;
    max-width: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 2rem;
    padding-left: 25px;
}

.register-login-layout .center-container .register-login-box {
    width: 100%;
}

@media (max-width: 575.98px) {
    .register-login-layout .center-container .register-login-container {
        padding-top: 25px;
        padding-right: 25px;
        padding-bottom: 1rem;
        padding-left: 25px;
    }
}

body.login {
    min-height: 100vh;
    background:
        linear-gradient(118deg, rgba(246, 248, 252, 0.96) 0 34%, rgba(232, 240, 253, 0.94) 34% 61%, rgba(239, 247, 243, 0.96) 61% 100%),
        linear-gradient(180deg, #f8fafc, #e8eef7);
}

body.login #wrapper.mtd-login-screen {
    min-height: 100vh;
    padding: clamp(18px, 3vw, 44px);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0 1px, transparent 1px 100%);
    background-size: 72px 72px;
}

body.login #wrapper.mtd-login-screen .mtd-login-page-container {
    display: flex;
    width: min(1160px, 100%);
    min-height: calc(100vh - clamp(36px, 6vw, 88px));
    align-items: center;
    justify-content: center;
    padding: 0;
}

body.login .mtd-login-shell {
    display: grid;
    grid-template-columns: minmax(330px, 0.88fr) minmax(390px, 1fr);
    width: 100%;
    overflow: hidden;
    color: #151b28;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.16);
}

/* Page Type "Default": the login card alone, centred; the visual pane belongs to "Split". */
body.login .mtd-login-screen-basic .mtd-login-shell {
    grid-template-columns: minmax(0, 1fr);
    width: min(520px, 100%);
    margin: 0 auto;
}
body.login .mtd-login-screen-basic .mtd-login-visual {
    display: none;
}

body.login .mtd-login-visual {
    position: relative;
    display: flex;
    min-height: 650px;
    flex-direction: column;
    padding: clamp(28px, 3.2vw, 48px);
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(116deg, transparent 0 27%, rgba(255, 255, 255, 0.15) 27.2% 41%, transparent 41.2% 100%),
        linear-gradient(116deg, transparent 0 64%, color-mix(in srgb, var(--mtd-scheme-accent) 22%, rgba(255, 255, 255, 0.08)) 64.2% 78%, transparent 78.2% 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
        linear-gradient(145deg, color-mix(in srgb, var(--mtd-scheme-primary-deep) 78%, #07111f) 0%, color-mix(in srgb, var(--mtd-scheme-primary) 76%, var(--mtd-scheme-primary-deep)) 52%, color-mix(in srgb, var(--mtd-scheme-accent) 72%, var(--mtd-scheme-primary-deep)) 100%);
    background-size:
        100% 100%,
        100% 100%,
        64px 64px,
        64px 64px,
        100% 100%;
}

body.login .mtd-login-visual > :not(.line-bg) {
    position: relative;
    z-index: 1;
}

.line-bg {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  top: 0;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  transform: rotate(10deg);
}
.line-bg:before {
  position: absolute;
  top: -60%;
  left: 0;
  content: "";
  height: 80px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-animation: run 5s 0s infinite;
  animation: run 5s 0s infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0, 0.98);
  animation-timing-function: cubic-bezier(0.3, 0.27, 0, 0.98);
}

.line-bg0 {
  left: 0%;
}
.line-bg0:before {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.line-bg1 {
  left: 15%;
}
.line-bg1:before {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.line-bg2 {
  left: 30%;
}
.line-bg2:before {
  -webkit-animation-delay: 2.6s;
  animation-delay: 2.6s;
}

.line-bg3 {
  left: 45%;
}
.line-bg3:before {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.line-bg4 {
  left: 60%;
}
.line-bg4:before {
  -webkit-animation-delay: 3.6s;
  animation-delay: 3.6s;
}

.line-bg5 {
  left: 75%;
}
.line-bg5:before {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.line-bg6 {
  left: 90%;
}
.line-bg6:before {
  -webkit-animation-delay: 4.6s;
  animation-delay: 4.6s;
}

/*============== run ==============*/
@-webkit-keyframes run {
  0% {
    top: -60%; }
  100% {
    top: 120%; } }

@-ms-keyframes run {
  0% {
    top: -60%; }
  100% {
    top: 120%; } }

@-o-keyframes run {
  0% {
    top: -60%; }
  100% {
    top: 120%; } }

@keyframes run {
  0% {
    top: -60%; }
  100% {
    top: 120%; } }

@-webkit-keyframes fade-effects {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

body.login .mtd-login-brand {
    padding: 0;
}

body.login .mtd-login-logo-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

body.login .mtd-login-logo-link img {
    width: auto;
    max-width: min(520px, 100%);
    height: auto;
    max-height: 100%;
}

body.login .mtd-login-logo-link span {
    color: inherit;
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

body.login .mtd-login-visual .logo-dark {
    display: none;
}

body.login .mtd-login-visual .logo-light {
    display: inline-block;
}

body.login .mtd-login-visual-copy {
    margin-top: auto;
    padding-top: 48px;
}

body.login .mtd-login-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 10px;
    color: #dff6ff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.login .mtd-login-visual h2 {
    max-width: 460px;
    margin: 0 0 16px;
    color: #ffffff;
    font-size: clamp(2rem, 4vw, 4.25rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: 0;
}

body.login .mtd-login-visual-copy p,
body.login .mtd-login-story p {
    max-width: 420px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.18vw, 1.15rem);
    line-height: 1.6;
}

body.login .mtd-login-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 34px;
}

body.login .mtd-login-feature {
    display: flex;
    min-width: 0;
    min-height: 74px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    text-align: center;
}

body.login .mtd-login-feature i {
    color: #8df1c6;
    font-size: 1.2rem;
}

body.login .mtd-login-feature strong {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.login .mtd-login-security-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.4;
}

body.login .mtd-login-security-note i {
    color: #8df1c6;
}

body.login .mtd-login-story {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.login .mtd-login-story .swiper-slide {
    height: auto;
}

body.login .mtd-login-story a {
    color: inherit;
    text-decoration: none;
}

body.login .mtd-login-story h3 {
    max-width: 430px;
    margin: 12px 0 10px;
    color: #ffffff;
    font-size: clamp(1.25rem, 1.55vw, 1.65rem);
    font-weight: 900;
    line-height: 1.18;
}

body.login .mtd-login-story-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8df1c6;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
}

body.login .mtd-login-story .swiper-pagination {
    position: static;
    margin-top: 18px;
    text-align: left;
}

body.login .mtd-login-form-panel {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4.2vw, 58px);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
}

body.login .mtd-login-form-panel .login-container,
body.login .loginpage-with-sidebar .mtd-login-form-panel .login-container {
    width: 100%;
    max-width: 470px;
    margin: 0;
}

body.login .mtd-login-box {
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

body.login .mtd-login-mobile-brand {
    display: none;
    margin-bottom: 24px;
    padding: 0;
}

body.login .mtd-login-titlebar {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

body.login .mtd-login-title-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--mtd-scheme-primary) 26%, transparent);
    font-size: 1rem;
}

body.login .mtd-login-titlebar h1 {
    margin: 0 0 5px;
    color: #111827;
    font-size: clamp(1.55rem, 2.5vw, 2.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
}

body.login .mtd-login-titlebar p {
    margin: 0;
    color: #64748b;
    font-size: clamp(0.98rem, 1.05vw, 1.08rem);
    line-height: 1.45;
}

body.login .mtd-login-form {
    display: grid;
    gap: 18px;
}

body.login .mtd-login-field {
    margin: 0;
}

body.login .mtd-login-field-top {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

body.login .mtd-login-field .form-control-label,
body.login .mtd-login-field-top .form-control-label {
    margin: 0 0 8px;
    color: #111827;
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.25;
}

body.login .mtd-login-forgot {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

body.login .mtd-login-forgot:hover,
body.login .mtd-login-forgot:focus {
    color: var(--mtd-scheme-primary);
    text-decoration: none;
}

body.login .mtd-login-input-wrap {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

body.login .mtd-login-input-wrap:focus-within {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent);
}

body.login .mtd-login-input-icon {
    display: inline-flex;
    flex: 0 0 22px;
    width: 22px;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.95rem;
}

body.login .mtd-login-input-wrap .form-control {
    min-width: 0;
    height: 54px;
    flex: 1 1 auto;
    padding: 0;
    color: #111827;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1rem;
    font-weight: 650;
}

body.login .mtd-login-input-wrap .form-control::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

body.login .mtd-login-password-wrap {
    padding-right: 6px;
}

body.login .mtd-login-password-wrap .input-group-append {
    display: flex;
    flex: 0 0 auto;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 4;
    width: auto;
    height: auto;
    transform: translateY(-50%);
}

body.login .mtd-login-reveal {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #64748b;
    background: #f1f5f9;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    min-width: 42px;
    min-height: 42px;
    margin: 0;
    line-height: 1;
}

body.login .mtd-login-reveal:hover,
body.login .mtd-login-reveal:focus {
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
}

body.login .mtd-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}

body.login .mtd-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #111827;
    font-size: 0.94rem;
    font-weight: 850;
    line-height: 1.3;
}

body.login .mtd-login-remember .icheckbox_square-blue {
    margin-right: 8px;
}

body.login .mtd-login-captcha {
    margin: 4px 0 0;
}

body.login .btn-login {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 4px 0 0;
    padding: 0 18px;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--mtd-scheme-primary) 28%, transparent);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

body.login .btn-login:hover,
body.login .btn-login:focus {
    color: #ffffff;
    background: var(--mtd-scheme-primary-hover);
    box-shadow: 0 20px 38px color-mix(in srgb, var(--mtd-scheme-primary) 34%, transparent);
    transform: translateY(-1px);
}

body.login .mtd-login-box .alert {
    margin-bottom: 20px;
    border-radius: 8px;
}

body.login .mtd-login-box .social-or-login {
    margin: 24px 0 18px;
}

body.login .mtd-login-box .social-or-login span {
    background: #f8fafc;
    color: #64748b;
    font-weight: 800;
}

body.login .mtd-login-box .login-container-register {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 28px 0 0;
    padding: 18px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.98rem;
    line-height: 1.35;
}

body.login .mtd-login-box .login-container-register a {
    color: var(--mtd-scheme-primary);
    font-weight: 900;
    text-decoration: none;
}

body.login .mtd-login-box .login-container-register a:hover,
body.login .mtd-login-box .login-container-register a:focus {
    color: var(--mtd-scheme-primary-hover);
    text-decoration: none;
}

body.login .mtd-login-language {
    margin-top: 18px;
}

body.login .mtd-login-language .btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    font-weight: 850;
}

body.login .mtd-login-language .iti-flag {
    margin: 0;
}

body.dark-mode.login {
    background:linear-gradient(118deg, rgba(8, 14, 26, 0.98) 0 34%, rgba(15, 30, 54, 0.98) 34% 61%, rgba(10, 40, 36, 0.97) 61% 100%),
        linear-gradient(180deg, #07111f, #101827);
}

body.dark-mode.login .mtd-login-shell {
    color:var(--mtd-text,#e5edf7);
    background:var(--mtd-surface,#111c2d);
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 18%, transparent);
    box-shadow:0 30px 90px rgba(0, 0, 0, 0.36);
}

body.dark-mode.login .mtd-login-form-panel {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent), color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent));
}

body.dark-mode.login .mtd-login-titlebar h1,
body.dark-mode.login .mtd-login-field .form-control-label,
body.dark-mode.login .mtd-login-field-top .form-control-label,
body.dark-mode.login .mtd-login-remember {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode.login .mtd-login-titlebar p,
body.dark-mode.login .mtd-login-forgot {
    color:var(--mtd-muted,#9ba8bb);
}

body.dark-mode.login .mtd-login-input-wrap,
body.dark-mode.login .mtd-login-box .login-container-register,
body.dark-mode.login .mtd-login-box .social-or-login span,
body.dark-mode.login .mtd-login-language .btn {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface-soft,#17243a);
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode.login .mtd-login-input-wrap .form-control {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode.login .mtd-login-reveal {
    color:var(--mtd-muted,#9ba8bb);
    background:var(--mtd-soft-line,#223148);
}

body.dark-mode.login .mtd-login-box .login-container-register {
    color:var(--mtd-text,#dce6f4);
}

@media (max-width: 991.98px) {
    body.login #wrapper.mtd-login-screen {
        padding: 18px;
    }

    body.login #wrapper.mtd-login-screen .mtd-login-page-container {
        min-height: calc(100vh - 36px);
    }

    body.login .mtd-login-shell {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
    }

    body.login .mtd-login-visual {
        display: none;
    }

    body.login .mtd-login-form-panel {
        padding: clamp(24px, 7vw, 42px);
    }

    body.login .mtd-login-mobile-brand {
        display: block;
    }

    body.login .mtd-login-mobile-brand .logo-light {
        display: none;
    }

    body.login .mtd-login-mobile-brand .logo-dark {
        display: inline-block;
    }
}

@media (max-width: 575.98px) {
    body.login #wrapper.mtd-login-screen {
        padding: 10px;
    }

    body.login .mtd-login-shell {
        border-radius: 8px;
    }

    body.login .mtd-login-form-panel {
        padding: 22px 16px;
    }

    body.login .mtd-login-titlebar {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 22px;
    }

    body.login .mtd-login-title-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    body.login .mtd-login-field-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 0;
    }

    body.login .mtd-login-forgot {
        white-space: normal;
    }

    body.login .mtd-login-input-wrap {
        min-height: 52px;
        padding: 0 12px;
    }

    body.login .mtd-login-input-wrap .form-control {
        height: 50px;
        font-size: 0.96rem;
    }

    body.login .btn-login {
        min-height: 52px;
    }

    body.login .mtd-login-box .login-container-register {
        padding: 15px;
    }
}

#wrapper.mtd-register-screen {
    min-height: 100vh;
    padding: clamp(18px, 2.8vw, 42px);
    background:
        linear-gradient(118deg, rgba(246, 248, 252, 0.96) 0 34%, rgba(232, 240, 253, 0.94) 34% 61%, rgba(239, 247, 243, 0.96) 61% 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 7%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0 1px, transparent 1px 100%);
    background-size: auto, 72px 72px, 72px 72px;
}

#wrapper.mtd-register-screen .mtd-register-visual > :not(.line-bg) {
    position: relative;
    z-index: 1;
}

#wrapper.mtd-register-screen .mtd-register-brand,
#wrapper.mtd-register-screen .mtd-register-mobile-brand {
    padding: 0;
}

#wrapper.mtd-register-screen .mtd-register-logo-link {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

#wrapper.mtd-register-screen .mtd-register-logo-link img {
    width: auto;
    max-width: min(520px, 100%);
    height: auto;
    max-height: 100%;
}

#wrapper.mtd-register-screen .mtd-register-logo-link span {
    color: inherit;
    font-size: clamp(1.35rem, 1.7vw, 1.8rem);
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

#wrapper.mtd-register-screen .mtd-register-visual .logo-dark {
    display: none;
}

#wrapper.mtd-register-screen .mtd-register-visual .logo-light {
    display: inline-block;
}

#wrapper.mtd-register-screen .mtd-register-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 8px 10px;
    color: #dff6ff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

#wrapper.mtd-register-screen .mtd-register-security-note i {
    color: #8df1c6;
}

#wrapper.mtd-register-screen .mtd-register-story {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#wrapper.mtd-register-screen .mtd-register-story .swiper-slide {
    height: auto;
}

#wrapper.mtd-register-screen .mtd-register-story a {
    color: inherit;
    text-decoration: none;
}

#wrapper.mtd-register-screen .mtd-register-story h3 {
    max-width: 400px;
    margin: 12px 0 10px;
    color: #ffffff;
    font-size: clamp(1.2rem, 1.4vw, 1.55rem);
    font-weight: 900;
    line-height: 1.18;
}

#wrapper.mtd-register-screen .mtd-register-story-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8df1c6;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.3;
}

#wrapper.mtd-register-screen .mtd-register-story .swiper-pagination {
    position: static;
    margin-top: 18px;
    text-align: left;
}

#wrapper.mtd-register-screen .register-login-container,
#wrapper.mtd-register-screen.loginpage-with-sidebar .register-login-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#wrapper.mtd-register-screen .mtd-register-box {
    padding: 0;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

#wrapper.mtd-register-screen .mtd-register-mobile-brand {
    display: none;
    margin-bottom: 24px;
}

#wrapper.mtd-register-screen .mtd-register-titlebar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 26px;
}

#wrapper.mtd-register-screen .mtd-register-title-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--mtd-scheme-primary) 26%, transparent);
    font-size: 1rem;
}

#wrapper.mtd-register-screen .mtd-register-titlebar h1 {
    margin: 0 0 5px;
    color: #111827;
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: none;
}

#wrapper.mtd-register-screen .mtd-register-titlebar p {
    margin: 0;
    color: #64748b;
    font-size: clamp(0.98rem, 1vw, 1.08rem);
    line-height: 1.45;
}

#wrapper.mtd-register-screen #registration h4::before {
    content: "";
    display: block;
    width: 8px;
    height: 22px;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
}

#wrapper.mtd-register-screen #registration .row {
    margin-right: -8px;
    margin-left: -8px;
}

#wrapper.mtd-register-screen #registration [class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

#wrapper.mtd-register-screen #registration .form-group {
    margin-bottom: 16px;
}

#wrapper.mtd-register-screen #registration .MTD-card .row > [class*="col-"]:last-child .form-group {
    margin-bottom: 0;
}

#wrapper.mtd-register-screen #registration .prepend-icon {
    position: relative;
}

#wrapper.mtd-register-screen #registration .prepend-icon .field-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1;
    transform: translateY(-50%);
}

#wrapper.mtd-register-screen #registration .prepend-icon .input-state-icon + .input-state-icon {
    display: none;
}

#wrapper.mtd-register-screen #registration .field.form-control,
#wrapper.mtd-register-screen #registration select.field.form-control,
#wrapper.mtd-register-screen #registration .form-control {
    min-height: 54px;
    width: 100%;
    padding: 0 16px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #d9e2ef;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.3;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#wrapper.mtd-register-screen #registration .prepend-icon .field.form-control,
#wrapper.mtd-register-screen #registration .prepend-icon select.field.form-control {
    padding-left: 46px;
}

#wrapper.mtd-register-screen #registration .field.form-control:focus,
#wrapper.mtd-register-screen #registration select.field.form-control:focus,
#wrapper.mtd-register-screen #registration .form-control:focus {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent);
}

#wrapper.mtd-register-screen #registration .field.form-control::placeholder {
    color: #64748b;
    font-weight: 550;
}

#wrapper.mtd-register-screen #registration select.field.form-control {
    appearance: auto;
}

#wrapper.mtd-register-screen #registration .field-help-text,
#wrapper.mtd-register-screen #registration .small.text-muted {
    display: block;
    color: #64748b;
    font-size: 0.86rem;
    line-height: 1.45;
}

#wrapper.mtd-register-screen #containerNewUserSecurity .password-strength-meter {
    padding: 4px 0 0;
}

#wrapper.mtd-register-screen #containerNewUserSecurity .password-strength-meter .progress {
    height: 8px;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 8px;
    box-shadow: none;
}

#wrapper.mtd-register-screen #containerNewUserSecurity #passwordStrengthTextLabel {
    margin: 9px 0 0;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 750;
}

#wrapper.mtd-register-screen .generate-password {
    min-height: 42px;
    padding: 8px 13px;
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent);
    border-radius: 8px;
    font-weight: 850;
}

#wrapper.mtd-register-screen .generate-password:hover,
#wrapper.mtd-register-screen .generate-password:focus {
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-color: var(--mtd-scheme-primary);
}

#wrapper.mtd-register-screen #registration .panel-switch {
    width: max-content;
    max-width: 100%;
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 28%, transparent);
    border-radius: 8px;
    box-shadow: none;
}

#wrapper.mtd-register-screen #registration .panel-switch .panel-body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
}

#wrapper.mtd-register-screen .mtd-register-tos {
    margin-top: 22px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

#wrapper.mtd-register-screen .mtd-register-tos .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.45;
}

#wrapper.mtd-register-screen .mtd-register-tos a {
    color: var(--mtd-scheme-primary);
    font-weight: 850;
}

#wrapper.mtd-register-screen #registration .form-actions .mtd-register-submit {
    display: inline-flex;
    min-height: 56px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border: 0;
    border-radius: 8px;
    box-shadow: 0 18px 34px color-mix(in srgb, var(--mtd-scheme-primary) 28%, transparent);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

#wrapper.mtd-register-screen #registration .form-actions .mtd-register-submit:hover,
#wrapper.mtd-register-screen #registration .form-actions .mtd-register-submit:focus {
    color: #ffffff;
    background: var(--mtd-scheme-primary-hover);
    box-shadow: 0 20px 38px color-mix(in srgb, var(--mtd-scheme-primary) 34%, transparent);
}

#wrapper.mtd-register-screen .mtd-register-login-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 28px 0 0;
    padding: 18px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.98rem;
    line-height: 1.35;
}

#wrapper.mtd-register-screen .mtd-register-login-link a {
    color: var(--mtd-scheme-primary);
    font-weight: 900;
    text-decoration: none;
}

#wrapper.mtd-register-screen .mtd-register-login-link a:hover,
#wrapper.mtd-register-screen .mtd-register-login-link a:focus {
    color: var(--mtd-scheme-primary-hover);
    text-decoration: none;
}

#wrapper.mtd-register-screen .mtd-register-language {
    margin-top: 18px;
}

#wrapper.mtd-register-screen .mtd-register-language .btn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    font-weight: 850;
}

#wrapper.mtd-register-screen .mtd-register-language .iti-flag {
    margin: 0;
}

body.dark-mode #wrapper.mtd-register-screen {
    background:linear-gradient(118deg, rgba(8, 14, 26, 0.98) 0 34%, rgba(15, 30, 54, 0.98) 34% 61%, rgba(10, 40, 36, 0.97) 61% 100%),
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 100%);
    background-size:auto, 72px 72px, 72px 72px;
}

body.dark-mode #wrapper.mtd-register-screen .mtd-register-shell {
    color:var(--mtd-text,#e5edf7);
    background:var(--mtd-surface,#111c2d);
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 18%, transparent);
    box-shadow:0 30px 90px rgba(0, 0, 0, 0.36);
}

/* The "Sign Up" divider label is painted white to hide the rule behind it; in dark mode
   it takes the panel's color, and the rule dims to match the panel's border. */
body.dark-mode #wrapper.mtd-register-screen #registration .sub-heading {
    border-top-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 22%, transparent);
}

body.dark-mode #wrapper.mtd-register-screen #registration .sub-heading span {
    color:var(--mtd-muted,#9ba8bb);
    background-color:var(--mtd-surface,#111c2d);
}

body.dark-mode #wrapper.mtd-register-screen .mtd-register-form-panel {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent), color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent));
}

body.dark-mode #wrapper.mtd-register-screen .mtd-register-titlebar h1,
body.dark-mode #wrapper.mtd-register-screen #registration h4 {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode #wrapper.mtd-register-screen .mtd-register-titlebar p,
body.dark-mode #wrapper.mtd-register-screen #registration .field-help-text,
body.dark-mode #wrapper.mtd-register-screen #registration .small.text-muted {
    color:var(--mtd-muted,#9ba8bb);
}

body.dark-mode #wrapper.mtd-register-screen #registration .MTD-card,
body.dark-mode #wrapper.mtd-register-screen #registration .field.form-control,
body.dark-mode #wrapper.mtd-register-screen #registration select.field.form-control,
body.dark-mode #wrapper.mtd-register-screen #registration .form-control,
body.dark-mode #wrapper.mtd-register-screen .mtd-register-tos,
body.dark-mode #wrapper.mtd-register-screen .mtd-register-login-link,
body.dark-mode #wrapper.mtd-register-screen .mtd-register-language .btn {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface-soft,#17243a);
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode #wrapper.mtd-register-screen #registration .field.form-control,
body.dark-mode #wrapper.mtd-register-screen #registration select.field.form-control,
body.dark-mode #wrapper.mtd-register-screen #registration .form-control {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode #wrapper.mtd-register-screen #containerNewUserSecurity .password-strength-meter .progress {
    background:var(--mtd-soft-line,#223148);
}

@media (max-width: 1199.98px) {
    
    
    
    #wrapper.mtd-register-screen .mtd-register-mobile-brand .logo-light {
        display: none;
    }

    #wrapper.mtd-register-screen .mtd-register-mobile-brand .logo-dark {
        display: inline-block;
    }
}

@media (max-width: 767.98px) {
    
    
    
    
    
    
    #wrapper.mtd-register-screen #registration .MTD-card {
        padding: 16px;
    }

    #wrapper.mtd-register-screen #registration .field.form-control,
    #wrapper.mtd-register-screen #registration select.field.form-control,
    #wrapper.mtd-register-screen #registration .form-control {
        min-height: 50px;
        font-size: 0.95rem;
    }

    #wrapper.mtd-register-screen #registration .prepend-icon .field.form-control,
    #wrapper.mtd-register-screen #registration .prepend-icon select.field.form-control {
        padding-left: 42px;
    }

    #wrapper.mtd-register-screen #registration .panel-switch {
        width: 100%;
    }

    #wrapper.mtd-register-screen #registration .panel-switch .panel-body {
        justify-content: space-between;
    }
}

/* Register screen final overrides */
#wrapper.mtd-register-screen.loginpage-with-sidebar,
#wrapper.mtd-register-screen.register-login-layout,
#wrapper.mtd-register-screen.primary-content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

#wrapper.mtd-register-screen .mtd-register-form-panel,
#wrapper.mtd-register-screen .mtd-register-box,
#wrapper.mtd-register-screen #registration,
#wrapper.mtd-register-screen #frmCheckout {
    overflow: visible !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .field-icon {
    display: none !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input.separate-dial-code .selected-flag,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti--separate-dial-code .iti__selected-flag {
    min-width: 106px !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field #inputPhone.field.form-control,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input input#inputPhone,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti input#inputPhone {
    position: relative !important;
    z-index: 1 !important;
    padding-left: 138px !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input:not(.separate-dial-code) input#inputPhone,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti:not(.iti--separate-dial-code) input#inputPhone {
    padding-left: 58px !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-captcha p {
    max-width: 720px;
    margin: 0 auto 18px;
    color: #64748b;
    text-align: center;
    font-size: 0.96rem;
    line-height: 1.55;
}

#wrapper.mtd-register-screen #registration .mtd-register-captcha .form-control,
#wrapper.mtd-register-screen #registration .mtd-register-captcha input[type="text"] {
    max-width: 190px;
    margin: 0 auto;
}

#wrapper.mtd-register-screen #registration .mtd-register-captcha img {
    max-width: 100%;
    height: auto;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input .selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-captcha {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface-soft,#17243a);
    border-color:var(--mtd-line,#2c3b52);
}

@media (max-width: 767.98px) {
    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input .selected-flag,
    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag {
        min-height: 50px;
    }

    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input.separate-dial-code .selected-flag,
    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti--separate-dial-code .iti__selected-flag {
        min-width: 106px !important;
    }

    #wrapper.mtd-register-screen #registration .mtd-register-phone-field #inputPhone.field.form-control,
    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input input#inputPhone,
    #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti input#inputPhone {
        padding-left: 120px !important;
    }

    #wrapper.mtd-register-screen #registration .mtd-register-captcha {
        padding: 18px 14px !important;
    }
}

/* Match register and forgot password backgrounds to login */
#wrapper.mtd-login-background {
    min-height: 100vh;
    padding: clamp(18px, 3vw, 44px);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.05) 0 1px, transparent 1px 100%);
    background-size: 72px 72px;
}

#wrapper.mtd-login-background .mtd-register-visual,
#wrapper.mtd-login-background .mtd-reset-visual {
    min-height: 650px;
    padding: clamp(28px, 3.2vw, 48px);
    background:
        radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--mtd-scheme-primary) 36%, transparent) 0 16%, transparent 34%),
        radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--mtd-scheme-accent) 36%, transparent) 0 18%, transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--mtd-scheme-primary-deep) 84%, #07111f) 0%, color-mix(in srgb, var(--mtd-scheme-primary) 72%, #0f172a) 50%, color-mix(in srgb, var(--mtd-scheme-accent) 74%, #07111f) 100%);
}

#wrapper.mtd-login-background .mtd-reset-visual::before {
    inset: 0;
    background:
        linear-gradient(110deg, transparent 0 18%, rgba(255, 255, 255, 0.22) 18.2% 18.58%, transparent 18.85% 100%),
        linear-gradient(110deg, transparent 0 31%, rgba(255, 255, 255, 0.14) 31.2% 31.55%, transparent 31.85% 100%),
        linear-gradient(110deg, transparent 0 48%, color-mix(in srgb, var(--mtd-scheme-accent) 34%, rgba(255, 255, 255, 0.18)) 48.25% 48.68%, transparent 49% 100%),
        linear-gradient(110deg, transparent 0 64%, rgba(255, 255, 255, 0.16) 64.15% 64.55%, transparent 64.88% 100%),
        linear-gradient(110deg, transparent 0 79%, rgba(255, 255, 255, 0.2) 79.15% 79.5%, transparent 79.8% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 64px);
    opacity: 0.9;
}

#wrapper.mtd-login-background .mtd-reset-visual::after {
    content: "";
    position: absolute;
    inset: -36% -28%;
    background:
        linear-gradient(110deg, transparent 0 44%, rgba(255, 255, 255, 0) 44.15%, rgba(255, 255, 255, 0.66) 44.48%, rgba(255, 255, 255, 0.12) 45.25%, transparent 46.05% 100%) -280px -560px / 360px 620px no-repeat,
        linear-gradient(110deg, transparent 0 52%, color-mix(in srgb, var(--mtd-scheme-accent) 44%, rgba(255, 255, 255, 0.35)) 52.32%, rgba(255, 255, 255, 0.08) 53.15%, transparent 54% 100%) 80px -500px / 420px 680px no-repeat,
        linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.48) 38.35%, rgba(255, 255, 255, 0.08) 38.9%, transparent 39.55% 100%) 360px -640px / 300px 620px no-repeat,
        linear-gradient(110deg, transparent 0 58%, rgba(255, 255, 255, 0.36) 58.3%, transparent 59.1% 100%) 520px -460px / 320px 580px no-repeat;
    border: 0;
    opacity: 0.58;
    pointer-events: none;
    mix-blend-mode: screen;
    animation: mtd-auth-bar-rain 4.8s linear infinite;
}

/* Register polish: even card rhythm, phone country picker, password generator modal */
#wrapper.mtd-register-screen .mtd-register-page-container {
    width: min(1560px, 100%) !important;
    display: flex;
    min-height: calc(100vh - clamp(36px, 5.6vw, 84px));
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: visible !important;
}

#wrapper.mtd-register-screen .mtd-register-shell {
    grid-template-columns: minmax(430px, 0.58fr) minmax(760px, 1fr) !important;
    width: 100% !important;
    max-width: 1560px;
    display: grid;
    overflow: hidden;
    color: #151b28;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.16);
    align-items: stretch !important;
}

#wrapper.mtd-register-screen .mtd-register-form-panel {
    padding: clamp(30px, 3.4vw, 56px) clamp(34px, 3.8vw, 64px) !important;
    min-width: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.98));
}

#wrapper.mtd-register-screen .mtd-register-visual h2 {
    max-width: 460px;
    font-size: clamp(2.25rem, 3.4vw, 4.15rem);
    margin: 0 0 16px;
    color: #ffffff;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0;
}

#wrapper.mtd-register-screen .mtd-register-visual-copy p,
#wrapper.mtd-register-screen .mtd-register-story p {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(0.98rem, 1vw, 1.12rem);
    line-height: 1.6;
}

#wrapper.mtd-register-screen #registration {
    --mtd-register-section-gap: 24px;
    --mtd-register-card-padding: clamp(20px, 2vw, 26px);
    --mtd-register-field-gap: 18px;
    width: 100%;
}

#wrapper.mtd-register-screen #registration h4 {
    margin: var(--mtd-register-section-gap) 0 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

#wrapper.mtd-register-screen #registration h4:first-of-type {
    margin-top: 0 !important;
}

#wrapper.mtd-register-screen #registration .MTD-card {
    padding: var(--mtd-register-card-padding) !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

#wrapper.mtd-register-screen #registration .MTD-card .row {
    margin-right: -10px !important;
    margin-left: -10px !important;
    row-gap: var(--mtd-register-field-gap);
}

#wrapper.mtd-register-screen #registration .MTD-card .row > [class*="col-"] {
    padding-right: 10px !important;
    padding-left: 10px !important;
}

#wrapper.mtd-register-screen #registration .MTD-card .form-group,
#wrapper.mtd-register-screen #registration .MTD-card .prepend-icon {
    margin-bottom: 0 !important;
}

#wrapper.mtd-register-screen #registration .MTD-card p:last-child {
    margin-bottom: 0;
}

#wrapper.mtd-register-screen #registration .mtd-register-captcha {
    margin-top: var(--mtd-register-section-gap) !important;
    margin-bottom: 0 !important;
    display: block;
    padding: 22px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

#wrapper.mtd-register-screen #registration .form-actions {
    margin-top: var(--mtd-register-section-gap) !important;
    display: block !important;
    padding-top: 24px !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input .selected-flag,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 10px;
    box-sizing: border-box;
    min-height: 54px;
    padding-left: 15px;
    padding-right: 12px;
    border-radius: 8px 0 0 8px;
    background: #f8fafc;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .selected-flag .iti-flag,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag .iti__flag {
    flex: 0 0 auto;
    margin-right: 0 !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .selected-dial-code,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-dial-code {
    color: var(--mtd-scheme-primary);
    font-weight: 800;
    letter-spacing: 0;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti-arrow,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__arrow {
    margin-left: auto !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input .flag-container,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__flag-container {
    right: auto !important;
    left: 0 !important;
    width: 126px !important;
    max-width: 126px !important;
    overflow: visible !important;
    z-index: 4 !important;
    border-right: 1px solid #e2e8f0;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-list {
    width: min(460px, calc(100vw - 40px)) !important;
    min-width: 100% !important;
    max-width: min(460px, calc(100vw - 40px)) !important;
    max-height: min(330px, 52vh) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16) !important;
    z-index: 10020;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country {
    display: flex !important;
    min-height: 42px;
    align-items: center !important;
    gap: 10px;
    padding: 8px 10px !important;
    border-radius: 8px;
    color: #111827;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: normal;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country:hover,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.highlight,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country:hover,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__highlight {
    background: var(--mtd-scheme-primary-soft) !important;
    color: #0f172a;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .flag-box,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__flag-box {
    display: inline-flex !important;
    width: 26px !important;
    min-width: 26px !important;
    justify-content: center;
    margin-right: 0 !important;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country-name,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-name {
    margin-right: 10px !important;
    color: inherit;
}

#wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .dial-code,
#wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__dial-code {
    margin-left: auto !important;
    color: #64748b;
    font-weight: 800;
}

/* Signup responsive final pass: keep the late desktop polish from winning on mobile. */
@media (max-width: 1199.98px) {
    #wrapper.mtd-register-screen .mtd-register-page-container {
        width: min(860px, 100%) !important;
    }

    #wrapper.mtd-register-screen .mtd-register-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 860px;
    }

    
    #wrapper.mtd-register-screen .mtd-register-mobile-brand {
        display: block;
    }

    #wrapper.mtd-register-screen .mtd-register-form-panel,
    #wrapper.mtd-register-screen .mtd-register-box,
    #wrapper.mtd-register-screen #registration,
    #wrapper.mtd-register-screen #frmCheckout {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 767.98px) {
    #wrapper.mtd-register-screen {
        padding: 10px;
    }

    #wrapper.mtd-register-screen .mtd-register-page-container {
        min-height: calc(100vh - 20px);
    }

    #wrapper.mtd-register-screen .mtd-register-shell {
        max-width: 100%;
        border-radius: 8px;
    }

    #wrapper.mtd-register-screen .mtd-register-form-panel {
        padding: 22px 16px !important;
    }

    #wrapper.mtd-register-screen .mtd-register-mobile-brand {
        margin-bottom: 20px;
    }

    #wrapper.mtd-register-screen .mtd-register-mobile-brand .mtd-register-logo-link,
    #wrapper.mtd-register-screen .mtd-register-mobile-brand img {
        width: 100%;
        max-width: 100%;
    }

    #wrapper.mtd-register-screen .mtd-register-titlebar {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 22px;
    }

    #wrapper.mtd-register-screen .mtd-register-title-icon {
        width: 40px;
        height: 40px;
    }

    #wrapper.mtd-register-screen #registration {
        --mtd-register-section-gap: 20px;
        --mtd-register-card-padding: 16px;
        --mtd-register-field-gap: 14px;
    }

    #wrapper.mtd-register-screen #registration .MTD-card .row {
        margin-right: -7px !important;
        margin-left: -7px !important;
    }

    #wrapper.mtd-register-screen #registration .MTD-card .row > [class*="col-"] {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }
}

/* Global auth-style surface for the rest of the WBAMS templates */
body:not(.login) {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 7.5%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.045) 0 1px, transparent 1px 100%);
    background-color: var(--mtd-scheme-primary-surface);
    background-size: 72px 72px;
}

body:not(.login) .mtd-site-shell {
    min-height: 100vh;
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent) 0 15%, transparent 15% 64%, color-mix(in srgb, var(--mtd-scheme-accent) 8%, transparent) 64% 100%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(239, 246, 255, 0.92));
}

body:not(.login) .mtd-main-body {
    padding: clamp(22px, 3vw, 46px) 0;
}

body:not(.login) .mtd-page-container {
    width: min(1500px, calc(100% - 28px));
    max-width: none;
}

body:not(.login) .mtd-page-container-fluid {
    width: min(1640px, calc(100% - 28px));
}

body:not(.login) .mtd-global-content-shell {
    position: relative;
    overflow: visible;
    padding: clamp(22px, 2.6vw, 38px);
    color: #111827;
}

body:not(.login) .mtd-global-content-shell-fluid,
body:not(.login) .mtd-global-content-shell-cart {
    padding: clamp(18px, 2vw, 30px);
}

body:not(.login) .mtd-page-heading {
    margin: 0 0 26px;
}

body:not(.login) .header-lined.mtd-global-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 0 0 24px;
    margin: 0;
    border-bottom: 1px solid #dbe7f5;
}

body:not(.login) .mtd-global-page-heading-main {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    min-width: 0;
}

body:not(.login) .mtd-global-page-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
}

body:not(.login) .mtd-global-page-icon i {
    font-size: 1.25rem;
}

body:not(.login) .mtd-global-page-copy {
    min-width: 0;
}

body:not(.login) .header-lined.mtd-global-page-header h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.6rem, 2.2vw, 2.45rem);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: 0;
}

body:not(.login) .mtd-global-page-meta {
    display: grid;
    gap: 8px;
    justify-items: end;
    min-width: 240px;
    color: #64748b;
    text-align: right;
}

body:not(.login) .mtd-global-page-description {
    max-width: 460px;
    color: #64748b;
    font-size: 0.98rem;
    line-height: 1.45;
}

body:not(.login) .mtd-page-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

body:not(.login) .mtd-page-tools .search-group {
    min-width: min(320px, 100%);
}

body:not(.login) .breadcrumb {
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    color: #64748b;
    background: transparent;
}

body:not(.login) .breadcrumb a {
    color: var(--mtd-scheme-primary);
    font-weight: 750;
}

body:not(.login) .mtd-breadcrumb {
    max-width: min(560px, 100%);
}

body:not(.login) .mtd-breadcrumb-list {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 6px;
    margin: 0;
    background: #f8fafc;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
}

body:not(.login) .mtd-breadcrumb-item {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    padding: 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 850;
    line-height: 1;
}

body:not(.login) .mtd-breadcrumb-item + .mtd-breadcrumb-item::before {
	display: inline-flex;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	flex: 0 0 8px;
	align-self: center;
	padding: 0;
	margin: 0 4px;
    border-top: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
    content: "";
    transform: rotate(45deg);
}

body:not(.login) .mtd-breadcrumb-link,
body:not(.login) .mtd-breadcrumb-current {
    display: inline-flex;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: #334155;
    background: #ffffff;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

body:not(.login) .mtd-breadcrumb-link:hover,
body:not(.login) .mtd-breadcrumb-link:focus {
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
    border-color: var(--mtd-scheme-primary-border);
}

body:not(.login) .mtd-breadcrumb-current {
    color: var(--secondary-accented);
    background: var(--mtd-scheme-primary);
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 10px 22px color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent);
}

span.mtd-breadcrumb-current span.mtd-breadcrumb-label {
    color: #fff;
}

body:not(.login) .mtd-breadcrumb-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
}

body:not(.login) .mtd-breadcrumb-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not(.login) .mtd-content-grid {
    display: grid;
    gap: 24px;
}

body:not(.login) .mtd-content-grid.mtd-has-sidebar {
    grid-template-columns: minmax(260px, 0.3fr) minmax(0, 1fr);
    align-items: start;
}

body:not(.login) .mtd-primary-content {
    min-width: 0;
}

body:not(.login) .mtd-primary-content > *:last-child {
    margin-bottom: 0;
}

body:not(.login) .mtd-sidebar-region {
    display: grid;
    gap: 16px;
    align-content: start;
}

body:not(.login) .mtd-sidebar-card, body:not(.login) .mtd-global-content-shell .card, body:not(.login) .mtd-global-content-shell .panel, body:not(.login) .mtd-global-content-shell .mtd-global-card, body:not(.login) .mtd-global-content-shell .mtd-dashboard-stat-card, body:not(.login) .mtd-global-content-shell .list-group-item, body:not(.login) .mtd-global-content-shell .tile, body:not(.login) .mtd-global-content-shell .product-status, body:not(.login) .mtd-global-content-shell .invoice-container, body:not(.login) .mtd-global-content-shell .invoice-summary {
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body:not(.login) .mtd-global-content-shell .card,
body:not(.login) .mtd-global-content-shell .panel,
body:not(.login) .mtd-global-content-shell .mtd-global-card {
    overflow: hidden;
}

body:not(.login) .mtd-global-content-shell .panel {
    margin-bottom: 22px;
}

body:not(.login) .mtd-global-content-shell .panel-heading,
body:not(.login) .mtd-global-content-shell .card-header,
body:not(.login) .mtd-global-card-title,
body:not(.login) .mtd-sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 18px;
    color: #0f172a;
    background: linear-gradient(180deg, #f8fbff, var(--mtd-scheme-primary-surface));
    border-bottom: 1px solid #dbe7f5;
    font-weight: 900;
}

body:not(.login) .mtd-global-content-shell .panel-title,
body:not(.login) .mtd-global-content-shell .card-title {
    margin: 0;
    color: inherit;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

body:not(.login) .mtd-global-content-shell .panel-title i,
body:not(.login) .mtd-sidebar-card-icon,
body:not(.login) .mtd-sidebar-link-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #ffffff!important;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
}

body:not(.login) .mtd-global-content-shell .panel-body,
body:not(.login) .mtd-global-content-shell .card-body,
body:not(.login) .mtd-global-card-body,
body:not(.login) .mtd-sidebar-body,
body:not(.login) .mtd-sidebar-footer {
    padding: 18px;
}

body:not(.login) .mtd-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

body:not(.login) .mtd-dashboard-stat-card {
    display: flex;
    min-height: 112px;
    align-items: center;
    gap: 14px;
    padding: 18px;
    color: #111827;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body:not(.login) .mtd-dashboard-stat-card:hover {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 20px 44px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent);
    transform: translateY(-1px);
}

body:not(.login) .mtd-dashboard-stat-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
}

body:not(.login) .mtd-dashboard-stat-value {
    display: block;
    color: #0f172a;
    font-size: 1.65rem;
    font-weight: 950;
    line-height: 1;
}

body:not(.login) .mtd-dashboard-stat-label {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-weight: 800;
}

body:not(.login) .mtd-global-content-shell .alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-width: 1px;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

body:not(.login) .mtd-global-content-shell .alert-icon,
body:not(.login) .mtd-global-content-shell .alert .icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

body:not(.login) .mtd-global-content-shell .alert-info,
body:not(.login) .mtd-global-content-shell .alert-success {
    color: #164e63;
    background: #eff9ff;
    border-color: #bae6fd;
}

body:not(.login) .mtd-global-content-shell .alert-warning {
    color: #7c3f00;
    background: #fffbeb;
    border-color: #fde68a;
}

body:not(.login) .mtd-global-content-shell .alert-danger {
    color: #7f1d1d;
    background: #fff1f2;
    border-color: #fecdd3;
}

body:not(.login) .mtd-global-content-shell .form-control,
body:not(.login) .mtd-global-content-shell .custom-select,
body:not(.login) .mtd-global-content-shell select,
body:not(.login) .mtd-global-content-shell textarea,
body:not(.login) .mtd-global-content-shell input[type="text"],
body:not(.login) .mtd-global-content-shell input[type="email"],
body:not(.login) .mtd-global-content-shell input[type="password"],
body:not(.login) .mtd-global-content-shell input[type="number"],
body:not(.login) .mtd-global-content-shell input[type="tel"] {
    min-height: 46px;
    color: var(--mtd-ink, #1f2937);
    background-color: var(--mtd-surface, #ffffff);
    border: 1px solid var(--mtd-line, #cfdbec);
    border-radius: var(--mtd-radius, 8px);
    box-shadow: none;
    font-weight: 650;
}

body:not(.login) .mtd-global-content-shell textarea {
    min-height: 120px;
}

body:not(.login) .mtd-global-content-shell .form-control:focus,
body:not(.login) .mtd-global-content-shell .custom-select:focus,
body:not(.login) .mtd-global-content-shell select:focus,
body:not(.login) .mtd-global-content-shell textarea:focus,
body:not(.login) .mtd-global-content-shell input:focus {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent);
}

body:not(.login) .mtd-global-content-shell label,
body:not(.login) .mtd-global-content-shell .control-label {
    color: var(--mtd-ink, #111827);
    font-weight: 850;
}

body:not(.login) .mtd-global-content-shell .btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    font-weight: 900;
    letter-spacing: 0;
}

body:not(.login) .mtd-global-content-shell .btn-primary,
body:not(.login) .mtd-global-content-shell input[type="submit"].btn-primary {
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--mtd-scheme-primary) 20%, transparent);
}

body:not(.login) .mtd-global-content-shell .btn-primary:hover {
    background: var(--mtd-scheme-primary-hover);
    border-color: var(--mtd-scheme-primary-hover);
}

body:not(.login) .mtd-global-content-shell .btn-default,
body:not(.login) .mtd-global-content-shell .btn-light,
body:not(.login) .mtd-global-content-shell .btn-secondary {
    color: #334155;
    background: #f8fafc;
    border-color: #dbe7f5;
}

body:not(.login) .mtd-global-content-shell .table,
body:not(.login) .mtd-global-content-shell table.dataTable {
    margin-bottom: 0;
    color: #1f2937;
    background: #ffffff;
    border-collapse: separate;
    border-spacing: 0;
}

body:not(.login) .mtd-global-content-shell .dataTables_wrapper,
body:not(.login) .mtd-global-content-shell .listtable {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body:not(.login) .mtd-global-content-shell .table-responsive {
    overflow-x: auto;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

body:not(.login) .mtd-global-content-shell .table thead th,
body:not(.login) .mtd-global-content-shell table.dataTable thead th {
    color: #0f172a;
    background: var(--mtd-scheme-primary-surface);
    border-bottom: 1px solid #dbe7f5;
    font-weight: 900;
}

body:not(.login) .mtd-global-content-shell .table td,
body:not(.login) .mtd-global-content-shell .table th,
body:not(.login) .mtd-global-content-shell table.dataTable td,
body:not(.login) .mtd-global-content-shell table.dataTable th {
    padding: 14px 16px;
    border-top: 1px solid #edf2f7;
    vertical-align: middle;
}

body:not(.login) .mtd-global-content-shell .table tbody tr:hover,
body:not(.login) .mtd-global-content-shell table.dataTable tbody tr:hover {
    background: #f8fbff;
}

body:not(.login) .mtd-sidebar-link:hover,
body:not(.login) .mtd-sidebar-link.active {
    color: #0f172a;
    background: var(--mtd-scheme-primary-soft);
}

body:not(.login) .mtd-sidebar-link.active .mtd-sidebar-link-icon,
body:not(.login) .mtd-sidebar-link:hover .mtd-sidebar-link-icon {
    background: var(--mtd-scheme-primary);
}

body:not(.login) .mtd-global-content-shell .nav-tabs {
    gap: 8px;
    border-bottom: 1px solid #dbe7f5;
}

body:not(.login) .mtd-global-content-shell .nav-tabs .nav-link {
    color: #64748b;
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    font-weight: 850;
}

body:not(.login) .mtd-global-content-shell .nav-tabs .nav-link.active,
body:not(.login) .mtd-global-content-shell .nav-tabs .nav-item.show .nav-link {
    color: var(--mtd-scheme-primary);
    background: #ffffff;
    border-color: #dbe7f5 #dbe7f5 #ffffff;
}

body:not(.login) .mtd-global-content-shell .pagination {
    gap: 6px;
}

body:not(.login) .mtd-global-content-shell .page-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    border-color: #dbe7f5;
    border-radius: 8px;
    font-weight: 850;
}

body:not(.login) .mtd-global-content-shell .page-item.active .page-link {
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-color: var(--mtd-scheme-primary);
}

body:not(.login) .badge {
    border-radius: 8px;
    font-weight: 850;
}

body.dark-mode:not(.login) .mtd-site-shell {
    background:linear-gradient(118deg, color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent) 0 15%, transparent 15% 64%, color-mix(in srgb, var(--mtd-scheme-accent) 10%, transparent) 64% 100%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(17, 28, 45, 0.98));
}

body.dark-mode:not(.login) .mtd-global-content-shell,
body.dark-mode:not(.login) .mtd-sidebar-card,
body.dark-mode:not(.login) .mtd-global-content-shell .card,
body.dark-mode:not(.login) .mtd-global-content-shell .panel,
body.dark-mode:not(.login) .mtd-global-content-shell .table-responsive,
body.dark-mode:not(.login) .mtd-global-content-shell .dataTables_wrapper,
body.dark-mode:not(.login) .mtd-global-content-shell .listtable,
body.dark-mode:not(.login) .modal-content {
    color:var(--mtd-text,#e5edf7);
}

body.dark-mode:not(.login) .header-lined.mtd-global-page-header,
body.dark-mode:not(.login) .mtd-global-content-shell .panel-heading,
body.dark-mode:not(.login) .mtd-global-content-shell .card-header,
body.dark-mode:not(.login) .mtd-sidebar-card-header,
body.dark-mode:not(.login) .modal-header,
body.dark-mode:not(.login) .modal-footer {
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode:not(.login) .header-lined.mtd-global-page-header h1,
body.dark-mode:not(.login) .mtd-global-content-shell .panel-title,
body.dark-mode:not(.login) .mtd-global-content-shell .card-title,
body.dark-mode:not(.login) .mtd-global-content-shell label,
body.dark-mode:not(.login) .mtd-global-content-shell .control-label {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) .mtd-global-page-description,
body.dark-mode:not(.login) .mtd-global-page-meta,
body.dark-mode:not(.login) .mtd-dashboard-stat-label,
body.dark-mode:not(.login) .mtd-sidebar-link {
    color:var(--mtd-muted, #9fb0c6);
}

body.dark-mode:not(.login) .mtd-breadcrumb-list {
    background:var(--mtd-surface-soft,#17243a);
    border-color:var(--mtd-line,#2c3b52);
}

body.dark-mode:not(.login) .mtd-breadcrumb-item + .mtd-breadcrumb-item::before {
    border-color:#64748b;
}

body.dark-mode:not(.login) .mtd-breadcrumb-link,
body.dark-mode:not(.login) .mtd-breadcrumb-current {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface, #111c2f);
}

body.dark-mode:not(.login) .mtd-breadcrumb-link:hover,
body.dark-mode:not(.login) .mtd-breadcrumb-link:focus {
    color:var(--mtd-ink, #ffffff);
    background:color-mix(in srgb, var(--mtd-scheme-primary) 20%, transparent);
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 40%, transparent);
}

body.dark-mode:not(.login) .mtd-breadcrumb-current {
    color:var(--mtd-ink, #ffffff);
    background:var(--mtd-scheme-primary);
    border-color:var(--mtd-scheme-primary);
}

@media (max-width: 1199.98px) {
    body:not(.login) .mtd-content-grid.mtd-has-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.login) .mtd-sidebar-region {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:not(.login) .mtd-dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    body:not(.login) .mtd-main-body {
        padding: 16px 0;
    }

    body:not(.login) .mtd-page-container,
    body:not(.login) .mtd-page-container-fluid {
        width: calc(100% - 16px);
    }

    body:not(.login) .mtd-global-content-shell {
        padding: 16px;
    }

    body:not(.login) .header-lined.mtd-global-page-header {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body:not(.login) .mtd-global-page-heading-main {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
    }

    body:not(.login) .mtd-global-page-icon {
        width: 46px;
        height: 46px;
    }

    body:not(.login) .mtd-global-page-meta {
        min-width: 0;
        justify-items: start;
        align-items: start;
        text-align: left;
    }

    body:not(.login) .breadcrumb {
        justify-content: flex-start;
    }

    
    body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }

    
    body:not(.login) .mtd-breadcrumb {
        max-width: 100%;
        width: 100%;
        justify-content: flex-start;
        justify-self: start;
    }

    body:not(.login) .mtd-breadcrumb-list {
        display: flex;
        justify-content: flex-start;
        margin-right: auto;
    }

    body:not(.login) .mtd-breadcrumb-link,
    body:not(.login) .mtd-breadcrumb-current {
        max-width: min(100%, 280px);
    }

    body:not(.login) .mtd-sidebar-region,
    body:not(.login) .mtd-dashboard-stats {
        grid-template-columns: 1fr;
    }

    body:not(.login) .mtd-global-content-shell .table td,
    body:not(.login) .mtd-global-content-shell .table th,
    body:not(.login) .mtd-global-content-shell table.dataTable td,
    body:not(.login) .mtd-global-content-shell table.dataTable th {
        padding: 12px;
    }
}

/* Cart promo code icon alignment */
body:not(.login) .mtd-global-content-shell #applyPromo .prepend-icon {
    position: relative;
}

body:not(.login) .mtd-global-content-shell #applyPromo .prepend-icon .field-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #94a3b8;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

body:not(.login) .mtd-global-content-shell #applyPromo .prepend-icon .field-icon i {
    display: block;
    line-height: 1;
}

body:not(.login) .mtd-global-content-shell #inputPromotionCode.field.form-control {
    min-height: 64px;
    padding-left: 74px;
}

@media (max-width: 575.98px) {
    body:not(.login) .mtd-global-content-shell #inputPromotionCode.field.form-control {
        padding-left: 62px;
    }

    body:not(.login) .mtd-global-content-shell #applyPromo .prepend-icon .field-icon {
        left: 12px;
    }
}

/* View ticket professional layout */
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    margin: 0 0 24px;
    padding: 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 6%, transparent), transparent 42%),
        linear-gradient(180deg, #ffffff, var(--mtd-scheme-primary-surface));
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 16%, #dbe7f5);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 14px 26px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-kicker {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-card h2 {
    margin: 0;
    color: #111827;
    font-weight: 900;
    line-height: 1.25;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-id {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
    border: 1px solid var(--mtd-scheme-primary-border);
    border-radius: 8px;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-thread {
    display: grid;
    gap: 18px;
    margin: 22px 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-card,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #dbe7f5);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-card > .card-body,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card > .card-body {
    padding: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 76px;
    padding: 14px 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 7%, transparent), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--mtd-scheme-primary-surface));
    border-bottom: 1px solid #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-card.is-staff .mtd-ticket-reply-header,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply.staff .mtd-ticket-reply-header {
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-accent) 10%, transparent), transparent 42%),
        linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--mtd-scheme-accent) 5%, #ffffff));
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user {
    display: flex;
    min-width: 0;
    align-items: center;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .user-avatar {
    display: inline-flex;
    width: 46px;
    height: 46px;
    min-width: 46px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 50%;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .name,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .posted-by-name,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .date {
    display: block;
    min-width: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .posted-by-name {
    color: #111827;
    font-size: 0.96rem;
    font-weight: 900;
    line-height: 1.25;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-user .date {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.84rem;
    font-weight: 700;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-badges .label,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-badges .badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-body {
    padding: 20px !important;
    color: #334155;
    font-size: 0.98rem;
    line-height: 1.75;
    background:
        radial-gradient(circle at 18px 18px, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, #fbfdff, #ffffff);
    background-size: 22px 22px, auto;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-surface {
    width: 100%;
    margin: 0;
    padding: 24px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content {
    width: 100%;
    max-width: 940px;
    margin: 0;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.78;
    text-align: left !important;
    word-break: normal;
    overflow-wrap: anywhere;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content *,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content p,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content div {
    text-align: left !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content [align="center"],
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content center {
    text-align: left !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content div,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content table {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content > :first-child {
    margin-top: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content > :last-child {
    margin-bottom: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content p {
    margin: 0 0 12px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content table {
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content td,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-content th {
    padding: 8px 10px;
    border: 1px solid #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-ip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 8px 10px;
    color: #64748b;
    background: #f8fbff;
    border: 1px solid #e5edf6;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 800;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-attachments {
    padding: 18px 24px !important;
    background: #f8fbff;
    border-top: 1px solid #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card {
    margin: 24px 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .card-header {
    padding: 0 18px !important;
    background: linear-gradient(180deg, #ffffff, var(--mtd-scheme-primary-surface)) !important;
    border-bottom: 1px solid #e5edf6 !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .nav-tabs {
    border-bottom: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .nav-link {
    min-height: 54px;
    padding: 17px 4px 14px;
    margin-right: 22px;
    color: #64748b;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .nav-link.active,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .nav-link:hover {
    color: var(--mtd-scheme-primary);
    border-bottom-color: var(--mtd-scheme-primary);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .card-body {
    padding: 22px !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-by {
    background: var(--mtd-scheme-primary-surface) !important;
    border-color: #dbe7f5 !important;
    border-radius: 8px !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card label {
    margin: 0;
    color: #111827;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-field {
    margin-bottom: 22px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-field-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-field-hint {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
    text-align: right;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .form-control,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .custom-file-label {
    min-height: 48px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    box-shadow: none;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card textarea.markdown-editor {
    min-height: 260px;
    padding: 16px;
    line-height: 1.6;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar {
    border-color: #d8e3f0;
    border-radius: 8px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .CodeMirror {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8e3f0;
    border-radius: 8px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor > .md-header,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor .md-header,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    padding: 10px 12px !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 6%, transparent), transparent 44%),
        #f8fbff !important;
    border: 0 !important;
    border-bottom: 1px solid #e5edf6 !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor > textarea,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor > .md-preview,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .CodeMirror {
    min-height: 260px;
    border: 0 !important;
    border-radius: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .CodeMirror-scroll {
    min-height: 260px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor .btn,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor button,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar button,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar a {
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    background: #ffffff !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    line-height: 1;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor .btn:hover,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor button:hover,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar button:hover,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar a:hover {
    color: var(--mtd-scheme-primary) !important;
    background: var(--mtd-scheme-primary-soft) !important;
    border-color: var(--mtd-scheme-primary-border) !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor .btn-primary,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar .active,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar button.active,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar a.active {
    width: auto;
    min-width: 84px;
    padding: 0 12px !important;
    color: #ffffff !important;
    background: var(--mtd-scheme-primary) !important;
    border-color: var(--mtd-scheme-primary) !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .md-editor .btn-group,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .editor-toolbar .separator {
    display: inline-flex;
    gap: 6px;
    margin: 0 4px 0 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field {
    padding: 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 5%, transparent), transparent 42%),
        #fbfdff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .attachment-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    margin: 0 !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file-input,
body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file-label {
    height: 48px;
    min-height: 48px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file {
    min-width: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file-label {
    display: flex;
    align-items: center;
    padding: 0 16px;
    line-height: 48px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .custom-file-label::after {
    display: none;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .input-group-append {
    margin: 0;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .btn-addmore {
    display: inline-flex;
    width: auto;
    min-width: 124px;
    height: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px !important;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field #fileUploadsContainer {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field #fileUploadsContainer .attachment-group {
    grid-template-columns: minmax(0, 1fr);
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachment-note {
    display: none;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .btn,
body[data-templatefile="ticket"]:not(.login) .ticket-actions .btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #dbe7f5);
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar .panel-heading {
    min-height: 56px;
    padding: 13px 16px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 7%, transparent), transparent 40%),
        linear-gradient(180deg, #ffffff, var(--mtd-scheme-primary-surface));
    border-bottom: 1px solid #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar .panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #111827;
    font-weight: 900;
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar .panel-title > i,
body[data-templatefile="ticket"]:not(.login) .panel-sidebar .list-group-item > i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar .list-group-item {
    padding: 14px 16px;
    border-color: #e5edf6;
}

body[data-templatefile="ticket"]:not(.login) .panel-sidebar .btn {
    border-radius: 8px;
    font-weight: 900;
}

body.dark-mode[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-card,
body.dark-mode[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-card,
body.dark-mode[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card,
body.dark-mode[data-templatefile="ticket"]:not(.login) .panel-sidebar {
    color:var(--mtd-text,#dce6f4);
    background:var(--mtd-surface,#111c2d);
    border-color:var(--mtd-line,#2c3b52);
}

@media (max-width: 767.98px) {
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-card {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-icon {
        width: 46px;
        height: 46px;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-subject-meta {
        grid-column: 1 / -1;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-header,
    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-reply-card .form-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-body {
        padding: 14px !important;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-message-surface {
        padding: 18px;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-field-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-field-hint {
        text-align: left;
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .attachment-group {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-templatefile="ticket"]:not(.login) .mtd-ticket-attachments-field .btn-addmore {
        width: 100%;
    }
}

/* Submit ticket form */
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-form {
    display: grid;
    gap: 24px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card {
    padding: 0 !important;
    overflow: visible;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #dbe7f5);
    border-radius: 8px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 18px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 8%, transparent), transparent 46%),
        linear-gradient(180deg, #ffffff, var(--mtd-scheme-primary-surface));
    border-bottom: 1px solid #e5edf6;
    border-radius: 8px 8px 0 0;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-radius: 8px;
    box-shadow: 0 14px 28px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading-text {
    display: grid;
    min-width: 0;
    gap: 4px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading-text strong {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.25;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading-text small {
    color: #64748b;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.45;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-request-card > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 !important;
    padding: 20px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-request-card > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0 !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-request-card .col-sm-12,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-priority-field {
    grid-column: 1 / -1;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .form-group {
    margin-bottom: 0;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card label {
    margin-bottom: 8px;
    color: #111827;
    font-weight: 900;
    line-height: 1.2;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .form-control,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .custom-select {
    min-height: 52px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.035);
    font-weight: 700;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card textarea.form-control {
    min-height: 320px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .form-control:focus,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .custom-select:focus {
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .department-dropdown,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .related-product-dropdown {
    position: relative;
    z-index: 20;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .department-dropdown > button,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .related-product-dropdown > button {
    display: flex !important;
    height: 52px !important;
    min-height: 52px !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px !important;
    text-align: left;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .department-dropdown:not(.show) > .dropdown-menu:not(.show),
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .related-product-dropdown:not(.show) > .dropdown-menu:not(.show) {
    display: none !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .dropdown-menu,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .dropdown-menu {
    z-index: 1050;
    width: 100%;
    min-width: 100%;
    max-height: min(320px, 52vh);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .dropdown-item,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .dropdown-item {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #111827;
    font-weight: 750;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .dropdown-item:hover,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .dropdown-item:hover {
    background: var(--mtd-scheme-primary-soft);
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options {
    display: flex;
    min-height: 68px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 5%, transparent), transparent),
        #fbfdff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options > label:first-child {
    margin: 0 8px 0 0 !important;
    color: #111827;
    font-weight: 900;
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .radio-inline {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .mtd-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .pcb.sm {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #334155;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
    font-weight: 900;
}

body[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .mtd-checkbox:checked + .pcb.sm {
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    border-color: var(--mtd-scheme-primary);
    box-shadow: 0 14px 28px color-mix(in srgb, var(--mtd-scheme-primary) 22%, transparent);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card {
    overflow: hidden;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > .form-group,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > #regularMessageField,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > #sensitiveDataTabs {
    margin: 20px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-editor {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn:hover,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control:hover {
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-input,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field textarea {
    min-height: 340px;
    padding: 16px !important;
    border: 0 !important;
    box-shadow: none !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field {
    margin: 20px !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .attachment-group {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .input-group-append {
    margin-left: 0;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .btn-addmore {
    display: inline-flex;
    height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 900;
}

body[data-templatefile="support-request-step-two"]:not(.login) .form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid #dbe7f5;
}

body[data-templatefile="support-request-step-two"]:not(.login) .form-actions .btn,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-form > .btn,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-form button[type="submit"] {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border-radius: 8px;
    font-weight: 900;
}

@media (max-width: 767.98px) {
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-request-card > .row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-icon {
        width: 46px;
        height: 46px;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > .form-group,
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > #regularMessageField,
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-card > #sensitiveDataTabs,
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field {
        margin: 16px !important;
    }

    
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-group {
        flex-wrap: nowrap;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .attachment-group {
        grid-template-columns: 1fr;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .btn-addmore {
        width: 100%;
        justify-content: center;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .form-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Account details phone picker, email preferences, and invite user modal polish */
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input .flag-container,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__flag-container {
    right: auto !important;
    left: 0 !important;
    z-index: 4 !important;
    width: 118px !important;
    max-width: 118px !important;
    border-right: 1px solid #dbe7f5 !important;
    overflow: visible !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input .selected-flag,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__selected-flag {
    display: flex !important;
    width: 118px !important;
    min-height: 44px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    border-radius: 8px 0 0 8px !important;
    background: #f8fbff !important;
    box-sizing: border-box !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .selected-flag .iti-flag,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__selected-flag .iti__flag {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .selected-dial-code,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__selected-dial-code {
    margin-left: 0 !important;
    color: #0f172a !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti-arrow,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__arrow {
    margin-left: auto !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input.separate-dial-code input#inputPhone,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input.allow-dropdown input#inputPhone,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti input#inputPhone {
    padding-left: 132px !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .intl-tel-input:not(.separate-dial-code) input#inputPhone,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti:not(.iti--separate-dial-code) input#inputPhone {
    padding-left: 58px !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__country-list {
    width: min(520px, calc(100vw - 40px)) !important;
    min-width: 100% !important;
    max-width: min(520px, calc(100vw - 40px)) !important;
    max-height: min(340px, 52vh) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18) !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .country,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__country {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: #111827 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .country:hover,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .country.highlight,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__country:hover,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__country.iti__highlight {
    background: var(--mtd-scheme-primary-soft) !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .flag-box,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__flag-box {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    justify-content: center !important;
    margin-right: 0 !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .country-name,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__country-name {
    margin: 0 10px 0 0 !important;
    color: inherit !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .country-list .dial-code,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-form .mtd-details-phone-field .iti__dial-code {
    margin-left: auto !important;
    color: #64748b !important;
    font-weight: 850 !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone),
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .flag-container,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__flag-container {
    right: auto !important;
    left: 0 !important;
    z-index: 4 !important;
    width: 112px !important;
    max-width: 112px !important;
    border-right: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 16%, #dbe7f5) !important;
    overflow: visible !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .selected-flag,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__selected-flag {
    display: flex !important;
    width: 112px !important;
    min-height: 44px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 12px !important;
    border-radius: 8px 0 0 8px !important;
    background: var(--mtd-scheme-primary-surface) !important;
    box-sizing: border-box !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .selected-flag .iti-flag,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__selected-flag .iti__flag {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .selected-dial-code,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__selected-dial-code {
    margin-left: 0 !important;
    color: var(--mtd-scheme-primary) !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .iti-arrow,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__arrow {
    margin-left: auto !important;
}

body:not(.login) form:not(#registration) .intl-tel-input.separate-dial-code input#inputPhone,
body:not(.login) form:not(#registration) .intl-tel-input.allow-dropdown input#inputPhone,
body:not(.login) form:not(#registration) .iti input#inputPhone {
    padding-left: 126px !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:not(.separate-dial-code) input#inputPhone,
body:not(.login) form:not(#registration) .iti:not(.iti--separate-dial-code) input#inputPhone {
    padding-left: 58px !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country-list {
    width: min(540px, calc(100vw - 40px)) !important;
    min-width: 100% !important;
    max-width: min(540px, calc(100vw - 40px)) !important;
    max-height: min(350px, 52vh) !important;
    overflow-y: auto !important;
    padding: 8px !important;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 18%, #dbe7f5) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18) !important;
    z-index: 10020 !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .country,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country {
    display: flex !important;
    min-height: 42px !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: #111827 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .country:hover,
body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .country.highlight,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country:hover,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country.iti__highlight {
    background: var(--mtd-scheme-primary-soft) !important;
    color: var(--mtd-scheme-primary) !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .flag-box,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__flag-box {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    justify-content: center !important;
    margin-right: 0 !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .country-name,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .dial-code,
body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__dial-code {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-left: 18px !important;
    color: #64748b !important;
    font-weight: 850 !important;
}

@media (max-width: 575.98px) {
    body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list,
    body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country-list {
        width: 100% !important;
        min-width: 100% !important;
        max-width: calc(100vw - 24px) !important;
    }

    body:not(.login) form:not(#registration) .intl-tel-input:has(input#inputPhone) .country-list .country,
    body:not(.login) form:not(#registration) .iti:has(input#inputPhone) .iti__country {
        gap: 8px !important;
        padding: 8px !important;
        font-size: 0.9rem !important;
    }
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-marketing-card {
    padding: 22px !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-marketing-card p {
    max-width: 980px;
    margin-bottom: 18px;
    color: #334155;
    font-weight: 600;
    line-height: 1.55;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-marketing-card .panel-switch {
    width: max-content;
    max-width: 100%;
    margin: 0;
    border-color: #dbe7f5;
    border-radius: 8px;
    background: #fbfdff;
}

/* Language chooser modal */
.mtd-localisation-modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(18px, 3vw, 36px) !important;
}

.mtd-localisation-modal .mtd-localisation-dialog {
    display: flex !important;
    align-items: center !important;
    width: min(980px, calc(100vw - 36px)) !important;
    max-width: min(980px, calc(100vw - 36px)) !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    transform: translateY(18px) scale(0.985) !important;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease !important;
    opacity: 0;
}

.mtd-localisation-modal.show .mtd-localisation-dialog {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
}

.mtd-localisation-modal .mtd-localisation-content {
    width: 100% !important;
    max-height: calc(100vh - 56px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 22%, #dbe7f5) !important;
    border-radius: 18px !important;
    background: linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--mtd-scheme-primary) 6%, #ffffff) 100%) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.24), 0 12px 30px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent) !important;
}

.mtd-localisation-modal .mtd-localisation-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 86px !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #e5edf7) !important;
    background: linear-gradient(120deg, color-mix(in srgb, var(--mtd-scheme-primary) 12%, #ffffff) 0%, #ffffff 62%, color-mix(in srgb, var(--mtd-scheme-accent) 10%, #ffffff) 100%) !important;
}

.mtd-localisation-modal .mtd-localisation-title {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    color: #111827 !important;
    font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
}

.mtd-localisation-modal .mtd-localisation-title-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mtd-scheme-primary), var(--mtd-scheme-accent)) !important;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--mtd-scheme-primary) 30%, transparent) !important;
}

.mtd-localisation-modal .mtd-localisation-title-icon i {
    color: inherit !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

.mtd-localisation-modal .mtd-localisation-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #dbe7f5) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #64748b !important;
    opacity: 1 !important;
    text-shadow: none !important;
    transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease !important;
}

.mtd-localisation-modal .mtd-localisation-close:hover,
.mtd-localisation-modal .mtd-localisation-close:focus {
    transform: rotate(90deg) !important;
    border-color: var(--mtd-scheme-primary) !important;
    background: color-mix(in srgb, var(--mtd-scheme-primary) 9%, #ffffff) !important;
    color: var(--mtd-scheme-primary) !important;
}

.mtd-localisation-modal .mtd-localisation-close .mtd-localisation-close-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

.mtd-localisation-modal .mtd-localisation-close .mtd-localisation-close-icon svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
}

.mtd-localisation-modal .mtd-localisation-body {
    max-height: min(64vh, 640px) !important;
    overflow-y: auto !important;
    padding: 24px !important;
    background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 9%, transparent), transparent 30%), #ffffff !important;
}

.mtd-localisation-modal .mtd-localisation-section + .mtd-localisation-section {
    margin-top: 24px !important;
    padding-top: 22px !important;
    border-top: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 12%, #e5edf7) !important;
}

.mtd-localisation-modal .mtd-localisation-section-title {
    margin: 0 0 14px !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

.mtd-localisation-modal .mtd-localisation-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.mtd-localisation-modal .mtd-localisation-grid > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

.mtd-localisation-modal .mtd-localisation-item {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: auto !important;
    min-height: 62px !important;
    width: 100% !important;
    padding: 13px 46px 13px 16px !important;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 16%, #dbe7f5) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #263244 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease !important;
}

.mtd-localisation-modal .mtd-localisation-item::after {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    content: "" !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    background-color: var(--mtd-scheme-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.3 16.7 4.8 12.2l1.4-1.4 3.1 3.1 8.5-8.5 1.4 1.4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 15px 15px !important;
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.75) !important;
    transition: opacity 160ms ease, transform 160ms ease !important;
}

.mtd-localisation-modal .mtd-localisation-item:hover,
.mtd-localisation-modal .mtd-localisation-item:focus {
    transform: translateY(-2px) !important;
    border-color: color-mix(in srgb, var(--mtd-scheme-primary) 50%, #dbe7f5) !important;
    background: #ffffff !important;
    color: #111827 !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12) !important;
}

.mtd-localisation-modal .mtd-localisation-item.active {
    border-color: color-mix(in srgb, var(--mtd-scheme-primary) 58%, #dbe7f5) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mtd-scheme-primary) 12%, #ffffff), color-mix(in srgb, var(--mtd-scheme-accent) 8%, #ffffff)) !important;
    color: var(--mtd-scheme-primary) !important;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--mtd-scheme-primary) 16%, transparent) !important;
}

.mtd-localisation-modal .mtd-localisation-item.active::after {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
}

.mtd-localisation-modal .mtd-localisation-item .mtd-language-flag-shell {
    display: block !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 22px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}

.mtd-localisation-modal .mtd-localisation-item .mtd-language-flag {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border: 0 !important;
    background: transparent !important;
}

.mtd-localisation-modal .currency .mtd-localisation-item {
    justify-content: center !important;
    padding-right: 46px !important;
}

.mtd-localisation-modal .mtd-localisation-footer {
    display: block !important;
    padding: 20px 24px !important;
    border-top: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 14%, #e5edf7) !important;
    background: color-mix(in srgb, var(--mtd-scheme-primary) 5%, #f8fbff) !important;
}

.mtd-localisation-modal .mtd-localisation-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--mtd-scheme-primary), var(--mtd-scheme-accent)) !important;
    color: #ffffff !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--mtd-scheme-primary) 26%, transparent) !important;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

.mtd-localisation-modal .mtd-localisation-submit:hover,
.mtd-localisation-modal .mtd-localisation-submit:focus {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
    box-shadow: 0 22px 42px color-mix(in srgb, var(--mtd-scheme-primary) 34%, transparent) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-content {
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 22%, transparent) !important;
    background:linear-gradient(145deg, #111827 0%, var(--mtd-surface,#0f172a) 100%) !important;
    box-shadow:0 34px 90px rgba(0, 0, 0, 0.46) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-header,
body.dark-mode .mtd-localisation-modal .mtd-localisation-footer {
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 18%, transparent) !important;
    background:linear-gradient(120deg, rgba(34, 197, 94, 0.12), color-mix(in srgb, var(--mtd-surface, #111c2d) 96%, transparent)) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-body {
    background:radial-gradient(circle at 10% 0%, rgba(34, 197, 94, 0.12), transparent 34%), var(--mtd-surface,#0f172a) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-section-title {
    color:#94a3b8 !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-close,
body.dark-mode .mtd-localisation-modal .mtd-localisation-item {
    border-color:color-mix(in srgb, var(--mtd-muted, #9ba8bb) 20%, transparent) !important;
    background:color-mix(in srgb, var(--mtd-surface, #111c2d) 88%, transparent) !important;
    color:var(--mtd-text,#e5edf7) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-localisation-item:hover,
body.dark-mode .mtd-localisation-modal .mtd-localisation-item:focus,
body.dark-mode .mtd-localisation-modal .mtd-localisation-item.active {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 62%, rgba(148, 163, 184, 0.2)) !important;
    background:rgba(34, 197, 94, 0.14) !important;
    color:var(--mtd-ink, #ffffff) !important;
}

@media (max-width: 767.98px) {
    .mtd-localisation-modal .mtd-localisation-dialog {
        width: min(640px, calc(100vw - 28px)) !important;
        max-width: min(640px, calc(100vw - 28px)) !important;
    }

    .mtd-localisation-modal .mtd-localisation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .mtd-localisation-modal.show {
        padding: 12px !important;
    }

    .mtd-localisation-modal .mtd-localisation-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }

    .mtd-localisation-modal .mtd-localisation-header {
        min-height: 74px !important;
        padding: 16px !important;
    }

    .mtd-localisation-modal .mtd-localisation-title-icon,
    .mtd-localisation-modal .mtd-localisation-close {
        width: 44px !important;
        height: 44px !important;
        flex-basis: 44px !important;
        border-radius: 12px !important;
    }

    .mtd-localisation-modal .mtd-localisation-title {
        gap: 10px !important;
    }

    .mtd-localisation-modal .mtd-localisation-body {
        max-height: calc(100vh - 176px) !important;
        padding: 16px !important;
    }

    .mtd-localisation-modal .mtd-localisation-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .mtd-localisation-modal .mtd-localisation-footer {
        padding: 16px !important;
    }
}
/* Auth visual panels */
body.login .mtd-login-visual,
#wrapper.mtd-register-screen .mtd-register-visual,
#wrapper.mtd-login-background .mtd-register-visual,
#wrapper.mtd-login-background .mtd-reset-visual {
    background:
        linear-gradient(116deg, transparent 0 27%, rgba(255, 255, 255, 0.15) 27.2% 41%, transparent 41.2% 100%),
        linear-gradient(116deg, transparent 0 64%, color-mix(in srgb, var(--mtd-scheme-accent) 23%, rgba(255, 255, 255, 0.08)) 64.2% 78%, transparent 78.2% 100%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(145deg, color-mix(in srgb, var(--mtd-scheme-primary-deep) 76%, #07111f) 0%, color-mix(in srgb, var(--mtd-scheme-primary) 74%, var(--mtd-scheme-primary-deep)) 54%, color-mix(in srgb, var(--mtd-scheme-accent) 62%, var(--mtd-scheme-primary-deep)) 100%) !important;
    background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px, 100% 100% !important;
}

body.login .mtd-login-visual::before,
body.login .mtd-login-visual::after,
#wrapper.mtd-reset-screen .mtd-reset-visual::before,
#wrapper.mtd-reset-screen .mtd-reset-visual::after,
#wrapper.mtd-login-background .mtd-reset-visual::before,
#wrapper.mtd-login-background .mtd-reset-visual::after {
    content: none !important;
    display: none !important;
}

body.login .mtd-login-visual > .line-bg,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg {
    position: absolute !important;
    top: 0 !important;
    display: block !important;
    width: 1px !important;
    height: 100% !important;
    z-index: 0 !important;
    background-color: transparent !important;
    opacity: 0.72 !important;
    pointer-events: none !important;
    transform: rotate(10deg) !important;
}

body.login .mtd-login-visual > .line-bg::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg::before {
    content: "" !important;
    position: absolute !important;
    top: -60%;
    left: 0 !important;
    width: 2px !important;
    height: 92px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.58) 48%, transparent 100%) !important;
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
    animation-name: run !important;
    animation-duration: 5s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: cubic-bezier(0.3, 0.27, 0, 0.98) !important;
    animation-fill-mode: forwards !important;
}

body.login .mtd-login-visual > .line-bg0::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg0::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg0::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg0::before {
    animation-delay: -0.2s !important;
}

body.login .mtd-login-visual > .line-bg1::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg1::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg1::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg1::before {
    animation-delay: -1.1s !important;
}

body.login .mtd-login-visual > .line-bg2::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg2::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg2::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg2::before {
    animation-delay: -2s !important;
}

body.login .mtd-login-visual > .line-bg3::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg3::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg3::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg3::before {
    animation-delay: -2.9s !important;
}

body.login .mtd-login-visual > .line-bg4::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg4::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg4::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg4::before {
    animation-delay: -3.8s !important;
}

body.login .mtd-login-visual > .line-bg5::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg5::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg5::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg5::before {
    animation-delay: -4.6s !important;
}

body.login .mtd-login-visual > .line-bg6::before,
#wrapper.mtd-register-screen .mtd-register-visual > .line-bg6::before,
#wrapper.mtd-login-background .mtd-register-visual > .line-bg6::before,
#wrapper.mtd-login-background .mtd-reset-visual > .line-bg6::before {
    animation-delay: -5.4s !important;
}

body.login .mtd-login-visual > :not(.line-bg),
#wrapper.mtd-register-screen .mtd-register-visual > :not(.line-bg),
#wrapper.mtd-login-background .mtd-register-visual > :not(.line-bg),
#wrapper.mtd-login-background .mtd-reset-visual > :not(.line-bg) {
    position: relative;
    z-index: 1 !important;
}

/* Account details email preferences */
body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-section-title {
    margin: 20px 0 8px !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-details-email-preferences-card {
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary-border) 54%, #dbe7f5) !important;
    background:
        linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--mtd-scheme-primary-surface) 74%, #ffffff) 100%) !important;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: clamp(16px, 2vw, 22px);
    border-bottom: 1px solid #e5edf7;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary-surface) 82%, transparent) 0 34%, transparent 35%),
        linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--mtd-scheme-primary-surface) 70%, #ffffff) 100%);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-card-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mtd-scheme-primary-border);
    border-radius: 8px;
    color: var(--mtd-scheme-primary-text);
    background: var(--mtd-scheme-primary);
    box-shadow: 0 12px 28px var(--mtd-scheme-primary-shadow);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-card-head strong {
    display: block;
    color: #111827;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-card-head small {
    display: block;
    margin-top: 2px;
    color: #718096;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    padding: clamp(16px, 2vw, 22px);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile {
    position: relative;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) 52px;
    gap: 12px;
    min-height: 104px;
    align-items: center;
    margin: 0 !important;
    padding: 15px !important;
    border: 1px solid #dbe7f5;
    border-radius: 8px;
    color: #263143;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile:hover {
    transform: translateY(-2px);
    border-color: var(--mtd-scheme-primary-border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile.is-enabled,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile:has(.mtd-email-preference-input:checked) {
    border-color: var(--mtd-scheme-primary-border);
    background: linear-gradient(135deg, color-mix(in srgb, var(--mtd-scheme-primary-surface) 80%, #ffffff) 0%, #ffffff 100%);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--mtd-scheme-primary-shadow) 45%, transparent);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mtd-scheme-primary-border);
    border-radius: 8px;
    color: var(--mtd-scheme-primary-hover);
    background: var(--mtd-scheme-primary-surface);
    font-size: 1.05rem;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile.is-enabled .mtd-email-preference-icon,
body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile:has(.mtd-email-preference-input:checked) .mtd-email-preference-icon {
    color: var(--mtd-scheme-primary-text);
    border-color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-copy {
    display: grid;
    min-width: 0;
    gap: 5px;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-copy strong {
    color: #111827;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.25;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-copy small {
    max-width: 100%;
    color: #718096;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-switch {
    display: inline-flex;
    width: 48px;
    height: 26px;
    align-items: center;
    justify-content: flex-start;
    padding: 3px;
    border-radius: 999px;
    background: #d8e1ec;
    transition: background 0.18s ease;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-switch span {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
    transform: translateX(0);
    transition: transform 0.18s ease;
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-input:checked ~ .mtd-email-preference-switch {
    background: var(--mtd-scheme-primary);
}

body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-input:checked ~ .mtd-email-preference-switch span {
    transform: translateX(22px);
}

@media (max-width: 767.98px) {
    body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preferences-grid {
        grid-template-columns: 1fr;
    }

    body[data-templatefile="clientareadetails"]:not(.login) .mtd-email-preference-tile {
        grid-template-columns: 42px minmax(0, 1fr) 46px;
        min-height: 88px;
        padding: 12px !important;
    }
}
/* Keep homepage product cards from being clipped by the Swiper viewport. */
.mtd-pricing-container .swiper[id^="products-group-"] {
    height: auto !important;
    padding: 24px 22px 38px;
    margin: -24px -22px -38px;
}

.mtd-pricing-container .home-products.swiper-wrapper {
    padding-bottom: 8px;
}

.mtd-pricing-container .home-products .group-slide {
    height: auto !important;
}

.mtd-pricing-container .home-products .mtd-pricing-table {
    margin-bottom: 0;
}

/* Bluish dark storefront card surfaces */
body.dark-mode:not(.login) {
    --mtd-dark-card-surface:linear-gradient(145deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 96%, transparent), color-mix(in srgb, var(--mtd-page, #08111f) 94%, transparent));
    --mtd-dark-card-border:color-mix(in srgb, var(--mtd-scheme-primary) 24%, rgba(148, 163, 184, 0.16));
    --mtd-dark-card-text:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc));
    --mtd-dark-card-muted:rgba(203, 213, 225, 0.78);
    --mtd-dark-card-shadow:0 26px 62px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    background-color:var(--mtd-surface,#0f172a);
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table, body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table, body.dark-mode:not(.login) .pricing-slider .mtd-pricing-table, body.dark-mode:not(.login) .pricing-box, body.dark-mode:not(.login) .store-promoted-product, body.dark-mode:not(.login) .landing-page .pricing-item {
    border-color:var(--mtd-dark-card-border) !important;
    background:radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent), transparent 34%),
        var(--mtd-dark-card-surface) !important;
    color:var(--mtd-dark-card-text) !important;
    box-shadow:var(--mtd-dark-card-shadow) !important;
    border-radius:28px;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table:hover, body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table:hover, body.dark-mode:not(.login) .pricing-slider .mtd-pricing-table:hover, body.dark-mode:not(.login) .pricing-box:hover, body.dark-mode:not(.login) .store-promoted-product:hover, body.dark-mode:not(.login) .landing-page .pricing-item:hover {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 44%, rgba(148, 163, 184, 0.18)) !important;
    background:radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent), transparent 36%),
        linear-gradient(145deg, rgba(18, 31, 55, 0.98), rgba(9, 20, 38, 0.96)) !important;
    box-shadow:0 30px 74px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent) inset !important;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table.active,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table.active,
body.dark-mode:not(.login) .pricing-slider .mtd-pricing-table.active {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 58%, rgba(148, 163, 184, 0.16)) !important;
    box-shadow:0 30px 78px rgba(0, 0, 0, 0.46), 0 0 0 1px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent) inset !important;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table h1,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table h2,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table h3,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table h4,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .h1,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .h2,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .h3,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .h4,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table h1,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table h2,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table h3,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table h4,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .h1,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .h2,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .h3,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .h4 {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table p,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table li,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .text-muted,
body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .cycle,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table p,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table li,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .text-muted,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .cycle {
    color:var(--mtd-dark-card-muted) !important;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .price,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .price {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .price .cost,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .price .cost {
    color:color-mix(in srgb, var(--mtd-scheme-primary) 86%, #bfdbfe) !important;
    text-shadow:0 10px 28px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent);
}

body.dark-mode:not(.login) .mtd-pricing-container .mtd-pricing-table .price .suffix,
body.dark-mode:not(.login) .pricing_style_2 .mtd-pricing-table .price .suffix {
    color:rgba(226, 232, 240, 0.86) !important;
}

/* WBAMS fullscreen markdown editor */
body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode {
    inset: 0;
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 9%, transparent), transparent 34%),
        #f2f7fc !important;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 2;
    display: flex;
    width: 100% !important;
    min-height: 76px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 82px 12px 18px !important;
    overflow-x: auto;
    overflow-y: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.99), color-mix(in srgb, var(--mtd-scheme-primary) 7%, #ffffff)) !important;
    border: 0 !important;
    border-bottom: 1px solid #d9e6f4 !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
    text-align: left;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-header
    .btn-group {
    float: none !important;
    flex: 0 0 auto;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-input,
body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-preview {
    width: 100% !important;
    max-width: none;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 auto;
    align-self: stretch;
    margin: 0 !important;
    padding: clamp(20px, 3vw, 38px) !important;
    overflow: auto;
    color: #243b5a !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-input:focus {
    box-shadow: inset 0 3px 0 color-mix(in srgb, var(--mtd-scheme-primary) 34%, transparent) !important;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-fullscreen-controls {
    position: fixed !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 100001;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-fullscreen-controls
    .exit-fullscreen {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: var(--mtd-scheme-primary);
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--mtd-scheme-primary) 24%, #d7e5f3);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 38, 66, 0.14);
    font-size: 17px;
    line-height: 1;
    transition: color 0.16s ease, background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-fullscreen-controls
    .exit-fullscreen:hover,
body[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-fullscreen-controls
    .exit-fullscreen:focus {
    color: #ffffff;
    background: var(--mtd-scheme-primary);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mtd-scheme-primary) 26%, transparent);
    outline: 0;
    transform: translateY(-1px);
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode {
    background:radial-gradient(circle at 100% 0%, rgba(47, 128, 255, 0.16), transparent 36%),
        #0b1726 !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-header {
    background:linear-gradient(90deg, var(--mtd-surface-soft, #10243a), #173052) !important;
    border-bottom-color:#30455f !important;
    box-shadow:0 12px 32px rgba(0, 0, 0, 0.24);
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-input,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-preview {
    color:#dbe8f6 !important;
    background:var(--mtd-surface-soft, #10243a) !important;
    border-color:transparent !important;
    box-shadow:none !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login)
    .mtd-ticket-message-field
    .md-editor.md-fullscreen-mode
    > .md-fullscreen-controls
    .exit-fullscreen {
    color:#8fc4ff;
    background:#173052;
    border-color:#3c5878;
    box-shadow:0 12px 28px rgba(0, 0, 0, 0.28);
}

@media (max-width: 767.98px) {
    body[data-templatefile="support-request-step-two"]:not(.login)
        .mtd-ticket-message-field
        .md-editor.md-fullscreen-mode
        > .md-header {
        min-height: 68px;
        justify-content: flex-start;
        padding: 10px 68px 10px 10px !important;
    }

    body[data-templatefile="support-request-step-two"]:not(.login)
        .mtd-ticket-message-field
        .md-editor.md-fullscreen-mode
        > .md-input,
    body[data-templatefile="support-request-step-two"]:not(.login)
        .mtd-ticket-message-field
        .md-editor.md-fullscreen-mode
        > .md-preview {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body[data-templatefile="support-request-step-two"]:not(.login)
        .mtd-ticket-message-field
        .md-editor.md-fullscreen-mode
        > .md-fullscreen-controls {
        top: 11px !important;
        right: 11px !important;
    }

    body[data-templatefile="support-request-step-two"]:not(.login)
        .mtd-ticket-message-field
        .md-editor.md-fullscreen-mode
        > .md-fullscreen-controls
        .exit-fullscreen {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
}

/* Keep the enter-fullscreen control out of the fullscreen toolbar.
   The dedicated exit control remains available in .md-fullscreen-controls. */
.md-editor.md-fullscreen-mode .md-controls .md-control-fullscreen {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Mobile drawer controls: keep configured icons visible and preserve
   contrast when a theme or CMS stylesheet supplies a light hover rule. */
@media (max-width: 1199.98px) {
    .section-header .serepok-menu-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--serepok-header-text) !important;
    }

    .section-header .serepok-menu-toggle-icon {
        position: relative;
        display: block !important;
        width: 24px !important;
        height: 18px !important;
        margin: 0 !important;
        color: currentColor !important;
        font-size: 0 !important;
        line-height: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* CSS fallback keeps the bars visible even when an icon font is absent. */
    .section-header .serepok-menu-toggle-icon::before {
        position: absolute;
        inset: 0;
        display: block !important;
        border-top: 3px solid currentColor;
        border-bottom: 3px solid currentColor;
        border-radius: 2px;
        content: "" !important;
    }

    .section-header .serepok-menu-toggle-icon::after {
        position: absolute;
        top: 7px;
        right: 0;
        left: 0;
        display: block !important;
        border-top: 3px solid currentColor;
        border-radius: 2px;
        content: "" !important;
    }

    .section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .nav-link > i,
    .section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .sub-menu > li > a > i {
        display: inline-flex !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        color: currentColor !important;
        font-size: 16px !important;
        line-height: 1 !important;
        text-align: center;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .nav-link:hover,
.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .nav-link:focus-visible,
.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .nav-link.serepok-current,
.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
    background: linear-gradient(105deg, color-mix(in srgb, var(--serepok-side-accent) 48%, transparent), rgba(255, 255, 255, 0.075)) !important;
    color: #ffffff !important;
}

.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .sub-menu > li > a:hover,
.section-header #serepok-mobile-menu .sideNavContent .navbar-nav > .nav-item > .sub-menu > li > a:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode:not(.login) #features-3 .feature-item, body.dark-mode:not(.login) #stats-4 .feature-item, body.dark-mode:not(.login) .feature-item.white.has-slider, body.dark-mode:not(.login) .feature-item.white {
    border-color:var(--mtd-dark-card-border) !important;
    background:radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 16%, transparent), transparent 36%),
        var(--mtd-dark-card-surface) !important;
    color:var(--mtd-dark-card-text) !important;
    box-shadow:var(--mtd-dark-card-shadow) !important;
}

body.dark-mode:not(.login) #features-3 .feature-item:hover,
body.dark-mode:not(.login) #features-3 .feature-item:focus,
body.dark-mode:not(.login) #features-3 .feature-item:focus-within,
body.dark-mode:not(.login) #stats-4 .feature-item:hover,
body.dark-mode:not(.login) #stats-4 .feature-item:focus,
body.dark-mode:not(.login) #stats-4 .feature-item:focus-within,
body.dark-mode:not(.login) .feature-item.white.has-slider:hover,
body.dark-mode:not(.login) .feature-item.white.has-slider:focus,
body.dark-mode:not(.login) .feature-item.white.has-slider:focus-within,
body.dark-mode:not(.login) .feature-item.white:hover,
body.dark-mode:not(.login) .feature-item.white:focus,
body.dark-mode:not(.login) .feature-item.white:focus-within {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 48%, rgba(148, 163, 184, 0.18)) !important;
    background:radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(18, 31, 55, 0.98), rgba(9, 20, 38, 0.96)) !important;
    box-shadow:0 30px 74px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent) inset !important;
}

body.dark-mode:not(.login) #features-3 .feature-title,
body.dark-mode:not(.login) #stats-4 .feature-title,
body.dark-mode:not(.login) .feature-item.white .feature-title,
body.dark-mode:not(.login) .feature-item.white.has-slider .feature-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) #features-3 .feature-desc,
body.dark-mode:not(.login) #features-3 p,
body.dark-mode:not(.login) #stats-4 .feature-desc,
body.dark-mode:not(.login) #stats-4 p,
body.dark-mode:not(.login) .feature-item.white .feature-desc,
body.dark-mode:not(.login) .feature-item.white p,
body.dark-mode:not(.login) .feature-item.white.has-slider .feature-desc,
body.dark-mode:not(.login) .feature-item.white.has-slider p {
    color:var(--mtd-dark-card-muted) !important;
}

body.dark-mode:not(.login) #features-3 .feature-number,
body.dark-mode:not(.login) #stats-4 .feature-number,
body.dark-mode:not(.login) .feature-item.white .feature-number,
body.dark-mode:not(.login) .feature-item.white.has-slider .feature-number {
    color:color-mix(in srgb, var(--mtd-scheme-primary) 88%, #bfdbfe) !important;
}

body.dark-mode:not(.login) .sec.features.light,
body.dark-mode:not(.login) #sec-3.sec.features {
    border-top:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) !important;
    border-bottom-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
    background:linear-gradient(118deg,
            color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent) 0 15%,
            transparent 15% 64%,
            color-mix(in srgb, var(--mtd-scheme-primary-lifted, var(--mtd-scheme-primary)) 10%, transparent) 64% 100%),
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--mtd-scheme-primary) 16%, transparent), transparent 34%),
        radial-gradient(circle at 86% 74%, rgba(14, 165, 233, 0.10), transparent 38%),
        linear-gradient(135deg, rgba(8, 17, 31, 0.99) 0%, rgba(13, 30, 57, 0.98) 50%, rgba(6, 18, 34, 0.99) 100%) !important;
    color:var(--mtd-dark-card-text) !important;
}

body.dark-mode:not(.login) .sec.features.light .sec-title,
body.dark-mode:not(.login) #sec-3.sec.features .sec-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.features.light .sub-title,
body.dark-mode:not(.login) .sec.features.light .sec-subtitle,
body.dark-mode:not(.login) .sec.features.light .section-subtitle,
body.dark-mode:not(.login) .sec.features.light > .container > p,
body.dark-mode:not(.login) #sec-3.sec.features .sub-title,
body.dark-mode:not(.login) #sec-3.sec.features .sec-subtitle,
body.dark-mode:not(.login) #sec-3.sec.features .section-subtitle,
body.dark-mode:not(.login) #sec-3.sec.features > .container > p {
    color:var(--mtd-dark-card-muted) !important;
}

body.dark-mode:not(.login) .sec.features.light .sec-caption,
body.dark-mode:not(.login) .sec.features.light .badge,
body.dark-mode:not(.login) .sec.features.light .mtd-badge,
body.dark-mode:not(.login) #sec-3.sec.features .sec-caption,
body.dark-mode:not(.login) #sec-3.sec.features .badge,
body.dark-mode:not(.login) #sec-3.sec.features .mtd-badge {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 60%, rgba(148, 163, 184, 0.28)) !important;
    background:color-mix(in srgb, var(--mtd-surface, #111c2d) 56%, transparent) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
}

/* Homepage testimonials and announcements in bluish dark mode */
body.dark-mode:not(.login) .sec.testimonials.light,
body.dark-mode:not(.login) #sec-5.sec.testimonials {
    border-top:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent);
    background:radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent), transparent 34%),
        radial-gradient(circle at 86% 74%, rgba(14, 165, 233, 0.12), transparent 38%),
        linear-gradient(135deg, rgba(8, 17, 31, 0.99) 0%, rgba(13, 30, 57, 0.98) 48%, rgba(6, 18, 34, 0.99) 100%) !important;
    color:var(--mtd-dark-card-text) !important;
}

body.dark-mode:not(.login) .sec.testimonials .badge,
body.dark-mode:not(.login) .sec.testimonials .mtd-badge {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 54%, rgba(148, 163, 184, 0.18)) !important;
    background:color-mix(in srgb, var(--mtd-surface, #111c2d) 62%, transparent) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .sec.testimonials .sec-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.testimonials .testimonial-item {
    border-color:var(--mtd-dark-card-border) !important;
    background:radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent), transparent 34%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(8, 17, 31, 0.82)) !important;
    color:var(--mtd-dark-card-text) !important;
    box-shadow:0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode:not(.login) .sec.testimonials .testimonial-item .quote [class*="fa-"] {
    color:color-mix(in srgb, var(--mtd-scheme-primary) 84%, #bfdbfe) !important;
}

body.dark-mode:not(.login) .sec.testimonials .testimonial-item p,
body.dark-mode:not(.login) .sec.testimonials .testimonial-massage,
body.dark-mode:not(.login) .sec.testimonials .author-name-link span {
    color:var(--mtd-dark-card-muted) !important;
}

body.dark-mode:not(.login) .sec.testimonials .author-name-link span:first-child {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.testimonials .owl-item.center .testimonial-item {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 60%, #93c5fd) !important;
    background:radial-gradient(circle at 84% 0%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--mtd-scheme-primary) 92%, #1e293b), color-mix(in srgb, var(--mtd-scheme-primary) 66%, var(--mtd-surface,#0f172a))) !important;
    color:var(--mtd-ink, #ffffff) !important;
    box-shadow:0 34px 86px color-mix(in srgb, var(--mtd-scheme-primary) 26%, rgba(0, 0, 0, 0.54)) !important;
}

body.dark-mode:not(.login) .sec.testimonials .owl-item.center .testimonial-item p,
body.dark-mode:not(.login) .sec.testimonials .owl-item.center .testimonial-massage,
body.dark-mode:not(.login) .sec.testimonials .owl-item.center .author-name-link span,
body.dark-mode:not(.login) .sec.testimonials .owl-item.center .author-name-link a {
    color:rgba(255, 255, 255, 0.9) !important;
}

body.dark-mode:not(.login) .sec.testimonials .owl-item.center .author-name-link span:first-child,
body.dark-mode:not(.login) .sec.testimonials .owl-item.center .testimonial-item .quote [class*="fa-"] {
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode:not(.login) .sec.social,
body.dark-mode:not(.login) #sec-7.sec.social {
    border-top:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent);
    background:radial-gradient(circle at 78% 14%, color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 84%, rgba(14, 165, 233, 0.1), transparent 34%),
        linear-gradient(118deg, rgba(8, 17, 31, 0.99) 0%, rgba(12, 30, 58, 0.98) 44%, rgba(7, 19, 36, 0.99) 100%) !important;
    color:var(--mtd-dark-card-text) !important;
}

body.dark-mode:not(.login) .sec.social .h1,
body.dark-mode:not(.login) .sec.social h1,
body.dark-mode:not(.login) .sec.social h2,
body.dark-mode:not(.login) .sec.social h3,
body.dark-mode:not(.login) .sec.social h4 {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box,
body.dark-mode:not(.login) .sec.social .card.white,
body.dark-mode:not(.login) #sec-7 .card.mtd-box {
    overflow:hidden;
    border-color:var(--mtd-dark-card-border) !important;
    background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 16%, transparent), transparent 36%),
        linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(8, 17, 31, 0.9)) !important;
    color:var(--mtd-dark-card-text) !important;
    box-shadow:var(--mtd-dark-card-shadow) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box:hover,
body.dark-mode:not(.login) .sec.social .card.white:hover,
body.dark-mode:not(.login) #sec-7 .card.mtd-box:hover {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 48%, rgba(148, 163, 184, 0.18)) !important;
    background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(18, 31, 55, 0.98), rgba(9, 20, 38, 0.96)) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box .card-body,
body.dark-mode:not(.login) .sec.social .card.white .card-body {
    color:var(--mtd-dark-card-text) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box .text-base,
body.dark-mode:not(.login) .sec.social .card.white .text-base,
body.dark-mode:not(.login) .sec.social .card.mtd-box p,
body.dark-mode:not(.login) .sec.social .card.white p {
    color:var(--mtd-dark-card-muted) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box .card-footer,
body.dark-mode:not(.login) .sec.social .card.white .card-footer {
    border-top:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
}

body.dark-mode:not(.login) .sec.social .card.mtd-box .text-muted,
body.dark-mode:not(.login) .sec.social .card.white .text-muted {
    color:rgba(203, 213, 225, 0.78) !important;
}

/* Serepok header rules */
.section-header.header {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
}

.section-header {
    --serepok-header-bg: var(--app-nav-top-bg, #ffffff);
    --serepok-header-text: var(--app-nav-top-menu-link-color, #3d4966);
    --serepok-header-hover: var(--app-nav-top-menu-link-hover-color, #1989b6);
    --serepok-header-accent: #212121;
    --serepok-header-divider: #e0e0e0;
    --serepok-submenu-bg: #ffffff;
    --serepok-submenu-text: #4d4d4d;
    --serepok-submenu-muted: #808080;
    --serepok-submenu-hover: #f4f8fb;
    --serepok-submenu-icon: var(--mtd-scheme-primary, #377dff);
    --serepok-submenu-icon-bg: var(--mtd-scheme-primary-surface, #f2f6ff);
    --serepok-side-bg: #2a1820;
    --serepok-side-bg: color-mix(in srgb, var(--mtd-theme-primary, var(--primary, #b45a73)) 38%, #151014);
    --serepok-side-overlay: rgba(26, 14, 20, 0.64);
    --serepok-side-overlay: color-mix(in srgb, var(--mtd-theme-primary, var(--primary, #b45a73)) 18%, rgba(18, 10, 14, 0.72));
    --serepok-side-accent: var(--mtd-theme-primary, var(--primary, #b45a73));
    --serepok-side-gold: var(--secondary, #c99a4b);
    --serepok-side-surface: rgba(255, 255, 255, 0.08);
    --serepok-header-navbar-height: 60px;
    --serepok-mega-top: 60px;
    width: 100%;
    font-family: "Nunito", sans-serif;
    background: var(--serepok-header-bg);
}

.section-header.serepok-header-color-1 {
    --serepok-header-bg: color-mix(in srgb, var(--mtd-scheme-primary) 50%, #000);
    --serepok-header-text: var(--text-inverted, #ffffff);
    --serepok-header-hover: rgba(255, 255, 255, 0.86);
    --serepok-header-accent: rgba(255, 255, 255, 0.95);
    --serepok-header-divider: rgba(255, 255, 255, 0.22);
}

.section-header.serepok-header-color-2 {
    --serepok-header-bg: #101010;
    --serepok-header-text: var(--text-inverted, #ffffff);
    --serepok-header-hover: rgba(255, 255, 255, 0.86);
    --serepok-header-accent: rgba(255, 255, 255, 0.95);
    --serepok-header-divider: rgba(255, 255, 255, 0.18);
}

.section-header.serepok-submenu-color-1 {
    --serepok-submenu-bg: color-mix(in srgb, var(--mtd-scheme-primary) 52%, #000000);
    --serepok-submenu-text: #ffffff;
    --serepok-submenu-muted: rgba(255, 255, 255, 0.76);
    --serepok-submenu-hover: rgba(255, 255, 255, 0.12);
    --serepok-submenu-icon: #ffffff;
    --serepok-submenu-icon-bg: rgba(255, 255, 255, 0.15);
}

.section-header.serepok-submenu-color-2 {
    --serepok-submenu-bg: #101010;
    --serepok-submenu-text: #ffffff;
    --serepok-submenu-muted: rgba(255, 255, 255, 0.7);
    --serepok-submenu-hover: rgba(255, 255, 255, 0.1);
    --serepok-submenu-icon: #ffffff;
    --serepok-submenu-icon-bg: rgba(255, 255, 255, 0.12);
}

.section-header.serepok-side-color-1 {
    --serepok-side-bg: color-mix(in srgb, var(--mtd-theme-primary, var(--mtd-scheme-primary, #b45a73)) 48%, #151014);
    --serepok-side-overlay: color-mix(in srgb, var(--mtd-theme-primary, var(--mtd-scheme-primary, #b45a73)) 24%, rgba(18, 10, 14, 0.68));
}

.section-header.serepok-side-color-2 {
    --serepok-side-bg: #101010;
    --serepok-side-overlay: rgba(16, 16, 16, 0.42);
}

body.dark-mode .section-header.serepok-header-color-0 {
    --serepok-header-bg:var(--mtd-surface, #111c2f);
    --serepok-header-text:var(--mtd-text,#dce6f4);
    --serepok-header-hover:#ffffff;
    --serepok-header-accent:var(--mtd-scheme-primary, #377dff);
    --serepok-header-divider:var(--mtd-line,#2c3b52);
}

body.dark-mode .section-header.serepok-submenu-color-0 {
    --serepok-submenu-bg:var(--mtd-surface, #111c2f);
    --serepok-submenu-text:var(--mtd-text,#e5edf7);
    --serepok-submenu-muted:var(--mtd-muted, #9fb0c6);
    --serepok-submenu-hover:rgba(255, 255, 255, 0.08);
    --serepok-submenu-icon:var(--mtd-scheme-primary, #377dff);
    --serepok-submenu-icon-bg:color-mix(in srgb, var(--mtd-scheme-primary, #377dff) 18%, transparent);
}

.section-header .nav-div {
    position: relative;
    z-index: 999;
    border-bottom: 0;
    box-shadow: none;
}

.section-header.serepok-header-shadow .nav-div {
    box-shadow: 0 8px 28px rgba(20, 30, 48, 0.08);
}

.section-header.serepok-header-no-shadow .nav-div,
.section-header.serepok-header-no-shadow #header.sticky {
    box-shadow: none !important;
}

.section-header .navbar,
.section-header #header {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 60px;
    max-width: none;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    z-index: 999;
    background-color: transparent;
    box-shadow: none;
    transform: translateZ(0);
    transition: all 0.5s;
}

.section-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    margin-right: 0;
    min-width: 0;
    max-width: 240px;
    color: var(--serepok-header-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.section-header .serepok-brand-wrap {
    min-width: 0;
}

.section-header .serepok-primary-nav-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-header.serepok-header-nav-right .serepok-brand-wrap {
    flex-grow: 0 !important;
}

.section-header.serepok-header-nav-right .serepok-primary-nav-wrap {
    position: static;
    flex-basis: auto;
    flex-grow: 1;
    justify-content: flex-end;
    margin-left: auto;
    transform: none;
}

.section-header.serepok-header-nav-right #navbarSupportedContent .navbar-nav {
    margin-right: 1rem !important;
}

.section-header .serepok-brand-logo {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 34px;
    object-fit: contain;
}

.section-header .serepok-brand-logo-dark {
    display: none;
}

.section-header.serepok-header-color-1 .serepok-brand-logo-light,
.section-header.serepok-header-color-2 .serepok-brand-logo-light {
    display: none;
}

.section-header.serepok-header-color-1 .serepok-brand-logo-dark,
.section-header.serepok-header-color-2 .serepok-brand-logo-dark {
    display: block;
}

body.dark-mode .section-header.serepok-header-color-0 .serepok-brand-has-dark-logo .serepok-brand-logo-light {
    display:none;
}

body.dark-mode .section-header.serepok-header-color-0 .serepok-brand-has-dark-logo .serepok-brand-logo-dark {
    display:block;
}

/* Enforce a single configured logo variant. These intentionally specific
 * rules protect the light/dark switch from broad image sizing overrides. */
.section-header.serepok-header-color-0 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-light {
    display: block !important;
}

.section-header.serepok-header-color-0 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-dark {
    display: none !important;
}

.section-header.serepok-header-color-1 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-light,
.section-header.serepok-header-color-2 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-light,
body.dark-mode .section-header.serepok-header-color-0 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-light {
    display:none !important;
}

.section-header.serepok-header-color-1 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-dark,
.section-header.serepok-header-color-2 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-dark,
body.dark-mode .section-header.serepok-header-color-0 .navbar-brand.serepok-brand.serepok-brand-has-dark-logo .serepok-brand-logo-dark {
    display:block !important;
}

.section-header .serepok-brand-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-header .navbar-brand:hover,
.section-header .navbar-brand:focus,
.section-header .serepok-brand-text {
    color: var(--serepok-header-text) !important;
}

.section-header #header.sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1100;
    width: 100%;
    background-color: var(--serepok-header-bg);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    animation: serepokStickyDown 0.35s ease both;
}

.section-header.serepok-header-sticky-disabled #header.sticky {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    animation: none;
}

@keyframes serepokStickyDown {
    from {
        transform: translate3d(0, -100%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

.section-header .navbar-nav .nav-link,
.section-header #navbarSupportedContent .nav-link {
    position: relative;
    display: inline-flex;
    min-height: auto;
    align-items: center;
    padding: 8px 0.5rem !important;
    color: var(--serepok-header-text) !important;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    white-space: nowrap;
}

.section-header #navbarSupportedContent .navbar-nav {
    align-items: center;
    gap: 0;
}

.section-header #navbarSupportedContent .nav-item {
    display: inline-flex;
    align-items: center;
}

.section-header #navbarSupportedContent .navbar-nav > .nav-item {
    padding: 12px 7px;
}

@media (min-width: 1200px) {
    .section-header [data-serepok-primary-nav] > .nav-item {
        height: var(--serepok-header-navbar-height, 60px);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .section-header [data-serepok-primary-nav] > .nav-item > .nav-link {
        height: 100%;
        min-height: 100%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center;
    }

    .section-header [data-serepok-primary-nav] > .nav-item > .nav-link > .link-ext {
        top: auto;
        bottom: 0;
    }
}

.section-header #navbarSupportedContent .nav-link > i,
.section-header .sideNavPanel .nav-link > i {
    margin-right: 6px;
}

.section-header #navbarSupportedContent .serepok-nav-separator {
    display: inline-flex;
    width: 1px;
    height: 18px;
    margin: 0 8px;
    padding: 0;
    align-self: center;
    background-color: var(--serepok-header-divider);
    list-style: none;
    pointer-events: none;
}

.section-header .nav-link .link-ext {
    display: inline-block;
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 0.0625em;
    min-height: 2px;
    background-color: var(--serepok-header-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}

.section-header .nav-link:hover .link-ext,
.section-header .nav-link.active .link-ext,
.section-header .nav-link[aria-current="page"] .link-ext,
.section-header .nav-link[aria-expanded="true"] .link-ext {
    transform: scaleX(1);
    transform-origin: left center;
}

.section-header .nav-link:hover .arrow-down,
.section-header .nav-link.active .arrow-down,
.section-header .nav-link[aria-expanded="true"] .arrow-down {
    transform: rotate(180deg);
}

.section-header .arrow-down {
    display: inline-flex;
    width: 9px;
    height: 10px;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: currentColor;
    line-height: 1;
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}

.section-header .arrow-down svg {
    display: block !important;
    width: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    height: 10px !important;
    min-height: 10px !important;
    max-height: 10px !important;
    overflow: visible;
    color: currentColor;
}

.section-header .nav-link.dropdown-toggle::after {
    display: none !important;
}

.section-header .serepok-standard-dropdown {
    min-width: 250px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--serepok-submenu-text) 9%, transparent);
    border-radius: 8px;
    background: var(--serepok-submenu-bg);
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.12);
}

.section-header .serepok-standard-dropdown .dropdown-item {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 6px;
    color: var(--serepok-submenu-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.section-header .serepok-standard-dropdown .dropdown-item i {
    flex: 0 0 18px;
    color: var(--serepok-submenu-icon);
    text-align: center;
}

.section-header .serepok-standard-dropdown .dropdown-item:hover,
.section-header .serepok-standard-dropdown .dropdown-item:focus,
.section-header .serepok-standard-dropdown .dropdown-item.active {
    color: var(--serepok-submenu-text);
    background: var(--serepok-submenu-hover);
}

.section-header .serepok-standard-dropdown-child .dropdown-item {
    padding-left: 31px;
    color: var(--serepok-submenu-muted);
    font-weight: 600;
}

body.dark-mode .section-header .serepok-standard-dropdown {
    border-color:var(--mtd-line,#2c3b52);
    box-shadow:0 18px 45px rgba(0, 0, 0, 0.35);
}

.section-header .serepok-more-nav {
    position: relative;
}

.section-header .serepok-more-nav.d-none {
    display: none !important;
}

.section-header #navbarSupportedContent .serepok-more-nav:not(.d-none)::before {
    content: "";
    display: inline-flex;
    width: 1px;
    height: 18px;
    margin-right: 8px;
    align-self: center;
    background-color: var(--serepok-header-divider);
}

.section-header .serepok-more-menu {
    min-width: 260px;
    max-height: min(70vh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
}

.section-header .serepok-more-menu > .serepok-nav-separator {
    display: none !important;
}

.section-header .serepok-more-menu > .nav-item {
    display: block !important;
    width: 100%;
    padding: 0 !important;
}

.section-header .serepok-more-menu > .nav-item > .nav-link {
    display: flex !important;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 9px 11px !important;
    border-radius: 6px;
    color: var(--serepok-submenu-text) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
}

.section-header .serepok-more-menu > .nav-item > .nav-link:hover,
.section-header .serepok-more-menu > .nav-item > .nav-link:focus,
.section-header .serepok-more-menu > .nav-item.show > .nav-link {
    color: var(--serepok-submenu-text) !important;
    background: var(--serepok-submenu-hover);
}

.section-header .serepok-more-menu > .nav-item > .nav-link .link-ext {
    display: none !important;
}

.section-header .serepok-more-menu > .nav-item > .nav-link > i {
    flex: 0 0 18px;
    margin-right: 0 !important;
    color: var(--serepok-submenu-icon);
    text-align: center;
}

.section-header .serepok-more-menu > .nav-item > .nav-link .arrow-down {
    margin-left: auto;
}

.section-header .serepok-more-menu > .nav-item > .serepok-standard-dropdown {
    position: static !important;
    display: block !important;
    /* A section folded into "More" lists its links under it; the closed-dropdown fade
       (opacity 0, hidden) must not apply here or the links leave an empty gap. */
    opacity: 1 !important;
    visibility: visible !important;
    min-width: 0;
    margin: 0 0 8px;
    padding: 0 0 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important;
}

.section-header .serepok-more-menu > .nav-item > .serepok-standard-dropdown .dropdown-item {
    min-height: 36px;
    padding: 7px 11px;
    color: var(--serepok-submenu-muted);
    font-weight: 600;
}

.section-header .serepok-menu-toggle {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0 !important;
    border-radius: 8px;
    color: var(--serepok-header-text);
    background: transparent;
    box-shadow: none;
}

.section-header .serepok-menu-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--mtd-scheme-primary-rgb, 25, 137, 182), 0.18);
}

.section-header .serepok-menu-toggle-icon {
    font-size: 22px;
    line-height: 1;
}

@media (min-width: 1200px) {
    .section-header .serepok-menu-toggle {
        display: none !important;
    }
}

body.dark-mode .section-header,
body.dark-mode .section-header .nav-div,
body.dark-mode .section-header #header,
body.dark-mode .section-header #header.sticky {
    background:var(--serepok-header-bg) !important;
}

/* Keep the capped Bootstrap container transparent so the header is one
   continuous surface at every viewport width. */
.section-header #header > .container {
    background: transparent !important;
}

body.dark-mode .section-header .nav-link,
body.dark-mode .section-header .serepok-brand-text {
    color:var(--serepok-header-text) !important;
}

.section-header .nav-item-right {
    display: flex;
    width: auto;
    min-width: 72px;
    height: 30px;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
}

.section-header .navbar-end .navbar-nav {
    flex-wrap: nowrap;
    align-items: center;
}

.section-header .nav-item-right a,
.section-header .nav-item-right label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--serepok-header-text);
    font-size: 14px;
    font-weight: normal !important;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.5s;
}

.section-header .nav-link-right,
.section-header .nav-link-right.promo,
.section-header .nav-link-right.portfolio,
.section-header .nav-link-right.support,
.section-header .nav-link-right.cart,
.section-header .nav-link-right.alerts,
.section-header .nav-link-right.language,
.section-header .nav-link-right.register,
.section-header .nav-link-right.login,
.section-header .nav-link-right.admin-return,
.section-header .serepok-theme-toggle {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.section-header .nav-item-right a svg,
.section-header .nav-item-right label svg {
    display: block;
    flex: 0 0 auto;
}

.section-header .nav-item-right a i,
.section-header .nav-item-right label i {
    display: block;
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
}

.section-header .nav-item-right:hover a,
.section-header .nav-item-right:hover label {
    color: var(--serepok-header-hover);
}

.section-header .nav-item-right a span,
.section-header .nav-item-right label span {
    position: relative;
}

.section-header .nav-item-right a span::after,
.section-header .nav-item-right label span::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--serepok-header-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.section-header .nav-item-right a:hover span::after,
.section-header .nav-item-right label:hover span::after {
    transform: scaleX(1);
    transform-origin: left;
}

.section-header .nav-link-right .badge,
.section-header .nav-link-right .iti-flag,
.section-header .serepok-theme-toggle-icon {
    flex: 0 0 auto;
}

.section-header .nav-link-right .badge::after,
.section-header .nav-link-right .iti-flag::after,
.section-header .serepok-theme-toggle-icon::after,
.section-header .serepok-navbar-end-menu span::after {
    display: none;
}

.section-header .nav-link-right.language,
.section-header .nav-link-right.language:hover,
.section-header .nav-link-right.language:focus {
    position: relative;
    text-decoration: none !important;
}

.section-header .nav-link-right.language span::after {
    display: none !important;
}

.section-header .nav-link-right.language::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--serepok-header-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.section-header .nav-link-right.language:hover::after,
.section-header .nav-link-right.language:focus::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Optional desktop icon-only treatment for the Serepok right navigation. */
@media (min-width: 1200px) {
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right {
        position: relative;
        width: 42px;
        min-width: 42px;
        height: 42px;
        margin: 0 2px;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right > .nav-link-right,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right > .serepok-theme-toggle {
        width: 42px;
        height: 42px;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right > .nav-link-right > span:not(.badge):not(.serepok-theme-toggle-icon):not(.d-inline-block),
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right > .serepok-theme-toggle > span:not(.badge):not(.serepok-theme-toggle-icon):not(.d-inline-block) {
        display: none !important;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right > .dropdown-toggle::after {
        display: none !important;
        content: none !important;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right a span::after,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right label span::after,
    .section-header.serepok-right-icons-only .navbar-end .nav-link-right.language::after {
        display: none !important;
        content: none !important;
        transform: none !important;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-link-right .badge {
        position: absolute;
        top: 1px;
        right: 0;
        margin: 0 !important;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-link-right:focus-visible,
    .section-header.serepok-right-icons-only .navbar-end .serepok-theme-toggle:focus-within {
        outline: 2px solid var(--serepok-header-accent);
        outline-offset: 2px;
    }

    /* Serepok icon-only hover tooltips */
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]::before,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]::after {
        position: absolute;
        z-index: 1085;
        left: 50%;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]::before {
        content: attr(data-serepok-tooltip);
        top: calc(100% + 11px);
        min-width: max-content;
        max-width: 220px;
        padding: 7px 10px;
        color: #ffffff;
        background: color-mix(in srgb, var(--primary, #B45A73) 76%, #25151B);
        border: 1px solid color-mix(in srgb, var(--secondary, #C99A4B) 48%, transparent);
        border-radius: 8px;
        box-shadow: 0 10px 26px rgba(66, 37, 48, .28);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .01em;
        text-align: center;
        white-space: nowrap;
        transform: translate(-50%, -4px);
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]::after {
        content: "";
        top: calc(100% + 5px);
        width: 0;
        height: 0;
        border-right: 6px solid transparent;
        border-bottom: 6px solid color-mix(in srgb, var(--primary, #B45A73) 76%, #25151B);
        border-left: 6px solid transparent;
        transform: translate(-50%, -4px);
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]:hover::before,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]:hover::after,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]:focus-within::before,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right[data-serepok-tooltip]:focus-within::after {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .section-header.serepok-right-icons-only .navbar-end .nav-item-right.show::before,
    .section-header.serepok-right-icons-only .navbar-end .nav-item-right.show::after {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

.section-header .serepok-theme-toggle {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.section-header .serepok-theme-toggle input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

.section-header .serepok-theme-toggle-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.section-header .serepok-theme-icon {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.section-header .serepok-theme-icon-moon {
    opacity: 0;
    transform: scale(0.7) rotate(-35deg);
}

.section-header .serepok-theme-toggle input:checked + .serepok-theme-toggle-icon .serepok-theme-icon-sun,
body.dark-mode .section-header .serepok-theme-icon-sun {
    opacity:0;
    transform:scale(0.7) rotate(35deg);
}

.section-header .serepok-theme-toggle input:checked + .serepok-theme-toggle-icon .serepok-theme-icon-moon,
body.dark-mode .section-header .serepok-theme-icon-moon {
    opacity:1;
    transform:scale(1) rotate(0deg);
}

.section-header .serepok-navbar-end-menu {
    min-width: 220px;
    margin-top: 10px;
    padding: 8px 0;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(20, 30, 48, 0.14);
}

.section-header .serepok-alerts-menu {
    min-width: 300px;
}

.section-header .serepok-navbar-end-menu .dropdown-header {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #7b8499;
    font-size: 13px;
    font-weight: 600;
}

.section-header .serepok-navbar-end-menu .dropdown-item {
    display: flex;
    width: 100%;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 16px;
    color: #3d4966;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
}

.section-header .serepok-navbar-end-menu .dropdown-item:hover,
.section-header .serepok-navbar-end-menu .dropdown-item:focus {
    color: #1989b6;
    background: #f4f8fb;
}

body.dark-mode .section-header .serepok-navbar-end-menu {
    color:var(--mtd-text,#e5edf7);
    background:var(--mtd-surface, #111c2f);
    border:1px solid var(--mtd-line,#2c3b52);
    box-shadow:0 18px 45px rgba(0, 0, 0, 0.35);
}

body.dark-mode .section-header .serepok-navbar-end-menu .dropdown-header {
    color:var(--mtd-muted, #9fb0c6);
}

body.dark-mode .section-header .serepok-navbar-end-menu .dropdown-item {
    color:var(--mtd-text,#dce6f4);
    background:transparent;
}

body.dark-mode .section-header .serepok-navbar-end-menu .dropdown-item:hover,
body.dark-mode .section-header .serepok-navbar-end-menu .dropdown-item:focus {
    color:var(--mtd-ink, #ffffff);
    background:rgba(255, 255, 255, 0.08);
}

body.dark-mode .section-header .nav-item-right a,
body.dark-mode .section-header .nav-item-right label {
    color:var(--serepok-header-text) !important;
}

.section-header .sideNavPanel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: flex-end;
    visibility: hidden;
    pointer-events: none;
    background-color: transparent;
    opacity: 0;
    transform: none;
    transform-origin: right center;
    transition: visibility 0s linear 0.38s, background-color 0.38s ease, opacity 0.38s ease;
}

.section-header .sideNavPanel.active {
    visibility: visible;
    pointer-events: auto;
    background-color: var(--serepok-side-overlay);
    opacity: 1;
    transition-delay: 0s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.section-header .sideNavPanel .sideNavContent {
    position: relative;
    width: min(400px, 88vw);
    height: 100%;
    padding: 22px 18px 32px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--serepok-side-bg);
    background-image:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--serepok-side-accent) 28%, transparent), transparent 42%),
        radial-gradient(circle at 88% 100%, color-mix(in srgb, var(--serepok-side-gold) 18%, transparent), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.055), transparent 48%);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -24px 0 60px rgba(12, 7, 10, 0.34);
    transform: translate3d(34px, 0, 0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-header .sideNavPanel .sideNavContent::before,
.section-header .sideNavPanel .sideNavContent::after {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.section-header .sideNavPanel .sideNavContent::before {
    right: -92px;
    bottom: -82px;
    width: 250px;
    height: 250px;
    border: 1px solid color-mix(in srgb, var(--serepok-side-gold) 42%, transparent);
    box-shadow:
        0 0 0 26px color-mix(in srgb, var(--serepok-side-gold) 6%, transparent),
        0 0 0 58px color-mix(in srgb, var(--serepok-side-accent) 5%, transparent);
    opacity: 0.55;
}

.section-header .sideNavPanel .sideNavContent::after {
    top: 112px;
    left: -54px;
    width: 118px;
    height: 118px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    opacity: 0.7;
}

.section-header .sideNavPanel .sideNavContent > * {
    position: relative;
    z-index: 1;
}

.section-header .sideNavPanel.active .sideNavContent {
    transform: translate3d(0, 0, 0);
}

.section-header .sideNavPanel .serepok-side-brand {
    display: flex;
    min-height: 76px;
    padding: 4px 58px 18px 8px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.section-header .sideNavPanel .serepok-side-brand-link {
    display: inline-flex;
    min-width: 0;
    align-items: center;
}

.section-header .sideNavPanel .serepok-side-brand-logo {
    display: block;
    width: auto;
    max-width: 178px;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

.section-header .sideNavPanel .serepok-side-brand-text {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.section-header .sideNavPanel .serepok-side-brand-kicker {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.section-header .sideNavPanel .serepok-side-brand-kicker::before {
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-right: 8px;
    background: var(--serepok-side-gold);
    content: "";
    vertical-align: middle;
}

.section-header .sideNavPanel .sideNavContent .closebtn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.section-header .sideNavPanel .sideNavContent .closebtn:hover,
.section-header .sideNavPanel .sideNavContent .closebtn:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: color-mix(in srgb, var(--serepok-side-accent) 64%, transparent);
    color: #ffffff;
    outline: none;
    transform: rotate(5deg) scale(1.04);
}

.section-header .sideNavPanel .sideNavContent .navbar-nav {
    width: 100%;
    padding: 18px 0 22px;
    flex: 0 0 auto;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item:first-child {
    border-top: 0;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item {
    width: 100%;
    margin: 5px 0;
    border-bottom: 0;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 13px;
    background:
        linear-gradient(105deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025));
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link::before {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border: 1px solid color-mix(in srgb, var(--serepok-side-gold) 82%, #ffffff);
    background: color-mix(in srgb, var(--serepok-side-gold) 24%, transparent);
    content: "";
    transform: rotate(45deg);
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link:hover,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link:focus-visible,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link.serepok-current,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
    border-color: rgba(255, 255, 255, 0.12);
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--serepok-side-accent) 48%, transparent), rgba(255, 255, 255, 0.075));
    color: #ffffff !important;
    outline: none;
    transform: translateX(4px);
    box-shadow: 0 12px 26px rgba(14, 8, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link:hover::before,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link:focus-visible::before,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link.serepok-current::before,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link[aria-current="page"]::before {
    background: var(--serepok-side-gold);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--serepok-side-gold) 12%, transparent);
    transform: rotate(45deg) scale(1.08);
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link > .show-hide-icon {
    display: inline-grid !important;
    width: 30px;
    height: 30px;
    margin-right: -4px;
    margin-left: auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.055);
    color: #ffffff;
    font-size: 0;
    opacity: 0.86;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.28s ease;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link > .show-hide-icon svg {
    display: block !important;
    width: 8px !important;
    height: 12px !important;
    overflow: visible;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .nav-link > .show-hide-icon.show {
    transform: rotate(90deg);
    border-color: color-mix(in srgb, var(--serepok-side-gold) 55%, transparent);
    background: color-mix(in srgb, var(--serepok-side-gold) 16%, transparent);
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu {
    display: none;
    margin: 7px 0 10px 18px;
    padding: 8px;
    border-left: 1px solid color-mix(in srgb, var(--serepok-side-gold) 55%, transparent);
    border-radius: 0 12px 12px 0;
    background: rgba(9, 5, 7, 0.14);
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu.is-open {
    display: block;
    animation: serepokDrawerSubmenu 0.28s ease both;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu > li {
    line-height: 2.2rem;
    list-style-type: none;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu > li a {
    display: block;
    height: 100%;
    padding: 8px 13px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu > li a::before {
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--serepok-side-gold);
    content: "";
    vertical-align: middle;
    opacity: 0.7;
}

.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu > li a:hover,
.section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu > li a:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    outline: none;
}

.section-header .sideNavPanel .serepok-side-signature {
    display: flex;
    margin-top: auto;
    padding: 18px 12px 4px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.section-header .sideNavPanel .serepok-side-signature-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.section-header .sideNavPanel .serepok-side-signature-kicker {
    color: rgba(255, 255, 255, 0.48);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-header .sideNavPanel .serepok-side-signature-name {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-family: "Playfair Display", Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-header .sideNavPanel .serepok-side-signature-mark {
    position: relative;
    width: 58px;
    height: 20px;
    flex: 0 0 58px;
}

.section-header .sideNavPanel .serepok-side-signature-mark::before,
.section-header .sideNavPanel .serepok-side-signature-mark::after {
    position: absolute;
    top: 50%;
    content: "";
    transform-origin: center;
}

.section-header .sideNavPanel .serepok-side-signature-mark::before {
    left: 0;
    width: 58px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--serepok-side-gold), transparent);
    transform: translateY(-50%);
}

.section-header .sideNavPanel .serepok-side-signature-mark::after {
    left: 50%;
    width: 9px;
    height: 9px;
    border: 1px solid var(--serepok-side-gold);
    background: var(--serepok-side-bg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item {
    animation: serepokDrawerItem 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(1) { animation-delay: 0.04s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(2) { animation-delay: 0.075s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(3) { animation-delay: 0.11s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(4) { animation-delay: 0.145s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(5) { animation-delay: 0.18s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(6) { animation-delay: 0.215s; }
.section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item:nth-child(n+7) { animation-delay: 0.25s; }

@keyframes serepokDrawerItem {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes serepokDrawerSubmenu {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-header .sideNavPanel.active .sideNavContent .navbar-nav > .nav-item,
    .section-header .sideNavPanel .sideNavContent .navbar-nav > .nav-item > .sub-menu.is-open {
        animation: none;
    }
}

.section-header .serepok-mega-layer {
    position: fixed;
    top: var(--serepok-mega-top, var(--serepok-header-navbar-height, 60px));
    right: 0;
    left: 0;
    z-index: 998;
    height: calc(100vh - var(--serepok-mega-top, var(--serepok-header-navbar-height, 60px)));
    overflow: hidden;
    pointer-events: none;
}

.section-header .mega-menu {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--serepok-mega-top, var(--serepok-header-navbar-height, 60px)));
    margin-top: 0;
    padding-top: 0;
    overflow-y: auto;
    border-bottom: 1px solid #e0e0e0;
    color: var(--serepok-submenu-text);
    background: var(--serepok-submenu-bg);
    box-shadow: none;
    pointer-events: none;
    transform: translate3d(0, calc(-100% - 2px), 0);
    transform-origin: top center;
    transition: transform 0.7s;
}

.section-header .mega-menu.show {
    pointer-events: auto;
    opacity: 1;
    background-color: var(--serepok-submenu-bg);
    box-shadow: 0 10px 70px 0 rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
    transform: translateY(0);
    transition: transform 0.7s;
}

body.dark-mode .section-header .mega-menu {
    border-bottom-color:var(--mtd-line,#2c3b52);
}

body.dark-mode .section-header .mega-menu.show {
    box-shadow:0 18px 70px rgba(0, 0, 0, 0.35);
}

.section-header .mega-menu .block-content {
    min-height: 300px;
    padding: 15px;
    box-sizing: border-box;
}

.section-header .mega-menu .block-content .contents {
    transition: all 0.3s;
}

.section-header .mega-menu .block-content .contents:hover {
    background: var(--serepok-submenu-hover);
    border-radius: 5px;
    cursor: pointer;
}

.section-header .mega-menu .block-content .contents a {
    color: inherit;
    text-decoration: none;
}

.section-header .mega-menu .block-content .icon-wrap img {
    width: 35px;
}

.section-header .mega-menu .block-content .icon-wrap i {
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--serepok-submenu-icon);
    background: var(--serepok-submenu-icon-bg);
    font-size: 17px;
}

.section-header .mega-menu .block-content .content-wrap h3 {
    display: inline-block;
    margin: 0 0 0.7em;
    color: var(--serepok-submenu-text);
    font-size: 13px;
    font-weight: 700 !important;
    line-height: 1.5em;
}

.section-header .mega-menu .block-content .content-wrap p {
    color: var(--serepok-submenu-muted);
    font-size: 13px;
}

.section-header .mega-menu .serepok-mega-groups {
    align-items: stretch;
    row-gap: 16px;
}

.section-header .mega-menu .serepok-mega-group.contents {
    padding: 0 8px;
    margin-bottom: 0;
}

.section-header .mega-menu .serepok-mega-group.contents:hover {
    background: transparent;
    cursor: default;
}

.section-header .mega-menu .serepok-mega-group-inner {
    height: 100%;
    padding: 8px 4px 4px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.section-header .mega-menu .serepok-mega-group-inner:hover {
    background: transparent;
}

.section-header .mega-menu .serepok-mega-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin-bottom: 10px;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--serepok-submenu-icon) 18%, transparent);
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

.section-header .mega-menu .serepok-mega-group-heading:hover {
    color: var(--serepok-submenu-icon);
    border-bottom-color: color-mix(in srgb, var(--serepok-submenu-icon) 42%, transparent);
    background: transparent;
    box-shadow: none;
    text-decoration: none;
}

.section-header .mega-menu .serepok-mega-group-copy {
    min-width: 0;
}

.section-header .mega-menu .serepok-mega-group-note {
    margin: 6px 0 12px 36px;
    color: var(--serepok-submenu-muted);
    font-size: 13px;
    line-height: 1.5;
}

.section-header .mega-menu .serepok-mega-group-note .mtd-mega-subtitle,
.section-header .mega-menu .serepok-mega-group-note .mtd-mega-custom-html {
    margin: 0;
    color: inherit;
}

.section-header .mega-menu .serepok-mega-group-title {
    font-size: 12px;
    font-weight: 800 !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
}

.section-header .mega-menu .block-content .serepok-mega-group-heading .content-wrap h3.serepok-mega-group-title {
    margin: 0;
    font-size: 12px;
    font-weight: 800 !important;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
}

.section-header .mega-menu .serepok-mega-group-heading:hover .icon-wrap i {
    border-color: color-mix(in srgb, var(--serepok-submenu-icon) 32%, transparent);
    background: color-mix(in srgb, var(--serepok-submenu-icon) 14%, transparent);
}

.section-header .mega-menu .serepok-mega-banner {
    padding: 0 8px;
    margin-bottom: 0;
}

.section-header .mega-menu .serepok-mega-banner-inner {
    height: 100%;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--serepok-submenu-text) 9%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--serepok-submenu-bg) 72%, var(--serepok-submenu-hover));
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.08);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.section-header .mega-menu .serepok-mega-banner-inner:hover {
    border-color: color-mix(in srgb, var(--serepok-submenu-icon) 28%, transparent);
    box-shadow: 0 22px 55px rgba(16, 24, 40, 0.12);
}

.section-header .mega-menu .serepok-mega-banner-link,
.section-header .mega-menu .serepok-mega-banner-link:hover,
.section-header .mega-menu .serepok-mega-banner-fallback,
.section-header .mega-menu .serepok-mega-banner-fallback:hover {
    display: flex;
    min-height: 220px;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.section-header .mega-menu .serepok-mega-banner-html,
.section-header .mega-menu .serepok-mega-banner-html .mtd-mega-custom-html {
    color: var(--serepok-submenu-muted);
    font-size: 13px;
    line-height: 1.5;
}

.section-header .mega-menu .serepok-mega-banner-html {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
}

.section-header .mega-menu .serepok-mega-banner-html .mtd-mega-custom-html {
    width: 100%;
    height: 100%;
    min-height: 220px;
    padding: 22px;
}

.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html {
    background: linear-gradient(145deg, color-mix(in srgb, var(--serepok-submenu-icon) 88%, #0f172a), color-mix(in srgb, var(--serepok-submenu-icon) 45%, #0f172a));
    color: #ffffff;
}

.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h1,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h2,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h3,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h4,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h5,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html h6,
.section-header .mega-menu .serepok-mega-banner-html:not(:has(img)) .mtd-mega-custom-html p {
    color: #ffffff;
}

.section-header .mega-menu .serepok-mega-banner-html:has(img),
.section-header .mega-menu .serepok-mega-banner-html:has(img) .mtd-mega-custom-html,
.section-header .mega-menu .serepok-mega-banner-html:has(img) a {
    height: 100%;
    min-height: 220px;
    padding: 0;
}

.section-header .mega-menu .serepok-mega-banner-html h1,
.section-header .mega-menu .serepok-mega-banner-html h2,
.section-header .mega-menu .serepok-mega-banner-html h3,
.section-header .mega-menu .serepok-mega-banner-html h4,
.section-header .mega-menu .serepok-mega-banner-html h5,
.section-header .mega-menu .serepok-mega-banner-html h6 {
    margin: 0 0 8px;
    color: var(--serepok-submenu-text);
    font-weight: 700;
    line-height: 1.25;
}

.section-header .mega-menu .serepok-mega-banner-html p {
    margin: 0 0 10px;
    color: var(--serepok-submenu-muted);
}

.section-header .mega-menu .serepok-mega-banner-html a {
    color: inherit;
    text-decoration: none;
}

.section-header .mega-menu .serepok-mega-banner-html img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    border-radius: 0;
}

.section-header .mega-menu .serepok-mega-banner-fallback {
    align-items: center;
    gap: 14px;
    padding: 16px;
}

.section-header .mega-menu .serepok-mega-banner-title {
    display: block;
    color: var(--serepok-submenu-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.section-header .mega-menu .serepok-mega-group-links {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    padding-left: 0;
}

.section-header .mega-menu .serepok-mega-link,
.section-header .mega-menu .serepok-mega-fallback-group .mtd-mega-link {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 10px;
    align-items: center;
    column-gap: 9px;
    margin-left: 0;
    padding: 9px 8px;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.section-header .mega-menu .serepok-mega-link:hover,
.section-header .mega-menu .serepok-mega-link.active,
.section-header .mega-menu .serepok-mega-fallback-group .mtd-mega-link:hover {
    background: var(--serepok-submenu-hover);
    color: inherit;
    text-decoration: none;
}

/* The page the visitor is on keeps its marker after the pointer leaves it, so the panel
   answers "where am I" and not only "what is under the cursor". */
.section-header .mega-menu .serepok-mega-link.active {
    box-shadow: inset 3px 0 0 var(--mtd-primary, currentColor);
    font-weight: 700;
}
.section-header .mega-menu .serepok-mega-group-heading.active {
    color: var(--mtd-primary, inherit);
}

.section-header .mega-menu .serepok-mega-link-icon i,
.section-header .mega-menu .mtd-mega-link-icon i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--serepok-submenu-icon);
    background: var(--serepok-submenu-icon-bg);
    font-size: 17px;
}

.section-header .mega-menu .serepok-mega-group-heading .icon-wrap i {
    width: 26px;
    height: 26px;
    border: 1px solid color-mix(in srgb, var(--serepok-submenu-icon) 18%, transparent);
    border-radius: 7px;
    color: var(--serepok-submenu-icon);
    background: color-mix(in srgb, var(--serepok-submenu-icon) 8%, transparent);
    box-shadow: none;
    font-size: 13px;
}

.section-header .mega-menu .serepok-mega-inline-layout {
    row-gap: 10px;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-group.contents {
    flex: 0 0 100%;
    max-width: 100%;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-group-inner {
    padding: 0;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-group-heading {
    max-width: 420px;
    margin-bottom: 14px;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-group-note {
    max-width: 760px;
    margin: -4px 0 16px 54px;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-group-links {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-link,
.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-fallback-group .mtd-mega-link {
    min-height: 58px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--serepok-submenu-icon) 10%, transparent);
    background: color-mix(in srgb, var(--serepok-submenu-bg) 78%, var(--serepok-submenu-hover));
}

.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-link:hover,
.section-header .mega-menu .serepok-mega-inline-layout .serepok-mega-fallback-group .mtd-mega-link:hover {
    border-color: color-mix(in srgb, var(--serepok-submenu-icon) 28%, transparent);
    background: var(--serepok-submenu-hover);
}

.section-header .mega-menu .serepok-mega-flat-links .serepok-mega-group.contents {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: min(260px, 100%);
}

.section-header .mega-menu .serepok-mega-flat-links .serepok-mega-group-heading {
    min-height: 58px;
    margin: 0;
    padding: 12px 16px 12px 12px;
    border: 1px solid color-mix(in srgb, var(--serepok-submenu-icon) 10%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--serepok-submenu-bg) 78%, var(--serepok-submenu-hover));
}

.section-header .mega-menu .serepok-mega-flat-links .serepok-mega-group-heading:hover {
    border-color: color-mix(in srgb, var(--serepok-submenu-icon) 28%, transparent);
    background: var(--serepok-submenu-hover);
}

.section-header .mega-menu .serepok-mega-flat-links .serepok-mega-group-title {
    font-size: 13px;
    text-transform: none;
}

.section-header .mega-menu .serepok-mega-flat-links .serepok-mega-group-inner {
    height: auto;
}

.section-header .mega-menu .serepok-mega-link-title,
.section-header .mega-menu .mtd-mega-link-title {
    display: block;
    color: var(--serepok-submenu-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.section-header .mega-menu .serepok-mega-link-note,
.section-header .mega-menu .mtd-mega-link-note {
    display: block;
    margin-top: 2px;
    color: var(--serepok-submenu-muted);
    font-size: 12px;
    line-height: 1.4;
}

.section-header .mega-menu .serepok-mega-link-arrow,
.section-header .mega-menu .mtd-mega-link-arrow {
    color: var(--serepok-submenu-icon);
    font-size: 12px;
    opacity: 0.8;
}

.section-header .mega-menu .mtd-mega-fallback-links {
    display: contents;
}

@media (max-width: 767px) {
    .section-header .mega-menu .serepok-mega-group.contents {
        padding: 0;
    }
}

.video-overlay {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: all ease 500ms;
}

.video-overlay.open {
    position: fixed;
    z-index: 1000;
    opacity: 1;
}

.video-overlay-close {
    position: absolute;
    z-index: 1000;
    top: 15px;
    right: 20px;
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all 200ms;
}

.video-overlay-close:hover {
    color: #fa183d;
}

.video-overlay iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
    transform: translateX(-50%) translateY(-50%);
}

/* Auth page final alignment and dark-mode fixes */
#wrapper.mtd-login-background,
body.dark-mode #wrapper.mtd-login-background,
body.dark-mode #wrapper.mtd-register-screen,
body.dark-mode #wrapper.mtd-reset-screen {
    background:transparent !important;
}

#wrapper.mtd-register-screen .mtd-register-visual {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 650px !important;
    max-height: none !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    display: flex;
    flex-direction: column;
    padding: clamp(28px, 3vw, 46px);
    overflow: hidden;
    color: #ffffff;
    background: radial-gradient(circle at 22% 16%, color-mix(in srgb, var(--mtd-scheme-primary) 36%, transparent) 0 16%, transparent 34%),
        radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--mtd-scheme-accent) 36%, transparent) 0 18%, transparent 38%),
        linear-gradient(145deg, color-mix(in srgb, var(--mtd-scheme-primary-deep) 84%, #07111f) 0%, color-mix(in srgb, var(--mtd-scheme-primary) 72%, #0f172a) 50%, color-mix(in srgb, var(--mtd-scheme-accent) 74%, #07111f) 100%);
}

#wrapper.mtd-register-screen .mtd-register-visual-copy {
    margin-top: clamp(48px, 7vh, 72px) !important;
    padding-top: 0;
}

#wrapper.mtd-register-screen .mtd-register-story,
#wrapper.mtd-register-screen .mtd-register-steps {
    margin-top: clamp(28px, 5vh, 48px) !important;
}

#wrapper.mtd-register-screen .mtd-register-security-note {
    margin-top: clamp(28px, 5vh, 52px) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.4;
}

#wrapper.mtd-reset-screen .mtd-reset-visual::after,
#wrapper.mtd-login-background .mtd-reset-visual::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -36% -28% !important;
    border: 0 !important;
    pointer-events: none !important;
    opacity: 0.58 !important;
    mix-blend-mode: screen !important;
    background:
        linear-gradient(110deg, transparent 0 44%, rgba(255, 255, 255, 0) 44.15%, rgba(255, 255, 255, 0.66) 44.48%, rgba(255, 255, 255, 0.12) 45.25%, transparent 46.05% 100%) -280px -560px / 360px 620px no-repeat,
        linear-gradient(110deg, transparent 0 52%, color-mix(in srgb, var(--mtd-scheme-accent) 44%, rgba(255, 255, 255, 0.35)) 52.32%, rgba(255, 255, 255, 0.08) 53.15%, transparent 54% 100%) 80px -500px / 420px 680px no-repeat,
        linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.48) 38.35%, rgba(255, 255, 255, 0.08) 38.9%, transparent 39.55% 100%) 360px -640px / 300px 620px no-repeat,
        linear-gradient(110deg, transparent 0 58%, rgba(255, 255, 255, 0.36) 58.3%, transparent 59.1% 100%) 520px -460px / 320px 580px no-repeat !important;
    animation: mtd-auth-bar-rain 4.8s linear infinite !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 28%, rgba(148, 163, 184, 0.2)) !important;
    background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 16%, transparent), transparent 38%),
        rgba(15, 23, 42, 0.88) !important;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .panel-body {
    color:var(--mtd-text,#dce6f4) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .switch-label {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
}

#wrapper.mtd-register-screen #registration .panel-switch .switch {
    position: relative !important;
    display: inline-block !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 24px !important;
    margin: 0 !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}

#wrapper.mtd-register-screen #registration .panel-switch .switch__checkbox {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

#wrapper.mtd-register-screen #registration .panel-switch .switch__container {
    display: block !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .switch__container {
    border:1px solid color-mix(in srgb, var(--mtd-muted, #9ba8bb) 24%, transparent) !important;
    background:#1e293b !important;
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.34) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .switch__checkbox:checked + .switch__container {
    border-color:color-mix(in srgb, var(--mtd-scheme-primary) 76%, #93c5fd) !important;
    background:var(--mtd-scheme-primary) !important;
    box-shadow:0 10px 24px color-mix(in srgb, var(--mtd-scheme-primary) 24%, transparent) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .switch__container::after {
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .panel-switch .switch__handle {
    background:#ffffff !important;
    box-shadow:0 4px 12px rgba(2, 6, 23, 0.34) !important;
}

@media (max-width: 1199.98px) {
    #wrapper.mtd-register-screen .mtd-register-visual {
        position: relative !important;
        top: auto !important;
        max-height: none;
    display: none;
    }
}

body.dark-mode:not(.login) .well, body.dark-mode:not(.login) .landing-page .light-grey-bg, body.dark-mode:not(.login) .landing-page .detailed-info, body.dark-mode:not(.login) .landing-page .pricing-item {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
    background:radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--mtd-scheme-primary) 14%, transparent), transparent 32%),
        radial-gradient(circle at 12% 82%, rgba(20, 184, 166, 0.08), transparent 34%),
        linear-gradient(135deg, #071120 0%, #0e1d35 52%, var(--mtd-page,#08111f) 100%) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .sec.faqs,
body.dark-mode:not(.login) .sec.faq,
body.dark-mode:not(.login) .landing-page .faqs,
body.dark-mode:not(.login) .landing-page .faq {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) !important;
    background:radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--mtd-scheme-primary) 13%, transparent), transparent 34%),
        radial-gradient(circle at 18% 78%, rgba(14, 165, 233, 0.09), transparent 36%),
        linear-gradient(135deg, #071120 0%, #0f213d 50%, var(--mtd-page,#08111f) 100%) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .sec.faqs .sec-title,
body.dark-mode:not(.login) .sec.faq .sec-title,
body.dark-mode:not(.login) .landing-page .faqs .sec-title,
body.dark-mode:not(.login) .landing-page .faq .sec-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card,
body.dark-mode:not(.login) .landing-page .faq .panel-group .panel.panel-default,
body.dark-mode:not(.login) .landing-page .faqs .panel-group .panel.panel-default {
    overflow:hidden !important;
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    border-radius:14px !important;
    background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--mtd-scheme-primary) 10%, transparent), transparent 38%),
        linear-gradient(145deg, rgba(15, 28, 52, 0.96), rgba(8, 17, 31, 0.94)) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    box-shadow:0 18px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card + .card,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card + .card {
    margin-top:12px !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-header,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-header,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-header,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-header,
body.dark-mode:not(.login) .landing-page .faq .panel-group .panel.panel-default .panel-heading,
body.dark-mode:not(.login) .landing-page .faqs .panel-group .panel.panel-default .panel-heading {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent) !important;
    background:linear-gradient(135deg, rgba(20, 37, 66, 0.98), rgba(11, 24, 45, 0.98)) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-header .btn,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-header .btn,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-header .btn,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-header .btn,
body.dark-mode:not(.login) .landing-page .faq .panel-group .panel.panel-default .panel-heading .panel-title,
body.dark-mode:not(.login) .landing-page .faqs .panel-group .panel.panel-default .panel-heading .panel-title {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    text-decoration:none !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-header .btn:hover,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-header .btn:hover,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-header .btn:hover,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-header .btn:hover {
    background:color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent) !important;
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-title,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-title,
body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-icon,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-icon,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-title,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-title,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-icon,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-icon {
    color:inherit !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-body,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-body,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-body,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-body,
body.dark-mode:not(.login) .landing-page .faq .panel-group .panel.panel-default .panel-body,
body.dark-mode:not(.login) .landing-page .faqs .panel-group .panel.panel-default .panel-body {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
    background:color-mix(in srgb, var(--mtd-page, #08111f) 72%, transparent) !important;
    color:rgba(226, 232, 240, 0.82) !important;
}

body.dark-mode:not(.login) .sec.faqs .card-faqs-group .card-body p,
body.dark-mode:not(.login) .sec.faq .card-faqs-group .card-body p,
body.dark-mode:not(.login) .landing-page .faqs .card-faqs-group .card-body p,
body.dark-mode:not(.login) .landing-page .faq .card-faqs-group .card-body p,
body.dark-mode:not(.login) .landing-page .faq .panel-group .panel.panel-default .panel-body p,
body.dark-mode:not(.login) .landing-page .faqs .panel-group .panel.panel-default .panel-body p {
    color:rgba(226, 232, 240, 0.82) !important;
}
/* End modern dark light-section and FAQ surfaces */

/* Modern dark bordered site banners */
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) !important;
    border-bottom-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent) !important;
    background:radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--mtd-scheme-primary) 13%, transparent), transparent 34%),
        radial-gradient(circle at 14% 76%, rgba(20, 184, 166, 0.08), transparent 36%),
        linear-gradient(135deg, #071120 0%, #0e1d35 50%, var(--mtd-page,#08111f) 100%) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) .banner-title,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) .sec-title,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) h1,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) h2,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) h3 {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) p,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) .banner-subtitle,
body.dark-mode:not(.login) .site-banner .banner_body.border-bottom:not(.light):not(.graphics):not(.inverse):not(.mtd-has-type-1-background):not(.mtd-has-youtube-background) .sec-subtitle {
    color:rgba(226, 232, 240, 0.82) !important;
}
/* End modern dark bordered site banners */
/* Modern global phone selector */
body:not(.login) .intl-tel-input,
body:not(.login) .iti,
#wrapper.mtd-register-screen .intl-tel-input,
#wrapper.mtd-register-screen .iti {
    --mtd-phone-prefix-width: 126px;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #111827;
}

body:not(.login) .intl-tel-input.intl-tel-input > input.form-control[type="tel"],
body:not(.login) .intl-tel-input.intl-tel-input > input[type="tel"],
body:not(.login) .iti.iti > input.form-control[type="tel"],
body:not(.login) .iti.iti > input[type="tel"],
#wrapper.mtd-register-screen .intl-tel-input > input.form-control[type="tel"],
#wrapper.mtd-register-screen .intl-tel-input > input[type="tel"],
#wrapper.mtd-register-screen .iti > input.form-control[type="tel"],
#wrapper.mtd-register-screen .iti > input[type="tel"] {
    width: 100% !important;
    max-width: none !important;
    min-height: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 16px 0 calc(var(--mtd-phone-prefix-width, 126px) + 14px) !important;
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.035) !important;
    font-size: 0.98rem !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body:not(.login) .intl-tel-input.intl-tel-input > input.form-control[type="tel"]:focus,
body:not(.login) .intl-tel-input.intl-tel-input > input[type="tel"]:focus,
body:not(.login) .iti.iti > input.form-control[type="tel"]:focus,
body:not(.login) .iti.iti > input[type="tel"]:focus,
#wrapper.mtd-register-screen .intl-tel-input > input.form-control[type="tel"]:focus,
#wrapper.mtd-register-screen .intl-tel-input > input[type="tel"]:focus,
#wrapper.mtd-register-screen .iti > input.form-control[type="tel"]:focus,
#wrapper.mtd-register-screen .iti > input[type="tel"]:focus {
    border-color: var(--mtd-scheme-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent) !important;
    outline: 0 !important;
}

body:not(.login) .intl-tel-input .flag-container,
body:not(.login) .iti .iti__flag-container,
#wrapper.mtd-register-screen .intl-tel-input .flag-container,
#wrapper.mtd-register-screen .iti .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 5 !important;
    width: var(--mtd-phone-prefix-width, 126px) !important;
    max-width: var(--mtd-phone-prefix-width, 126px) !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
}

body:not(.login) .intl-tel-input .selected-flag,
body:not(.login) .intl-tel-input.separate-dial-code .selected-flag,
body:not(.login) .intl-tel-input.allow-dropdown .selected-flag,
body:not(.login) .iti .iti__selected-flag,
body:not(.login) .iti--separate-dial-code .iti__selected-flag,
#wrapper.mtd-register-screen .intl-tel-input .selected-flag,
#wrapper.mtd-register-screen .intl-tel-input.separate-dial-code .selected-flag,
#wrapper.mtd-register-screen .intl-tel-input.allow-dropdown .selected-flag,
#wrapper.mtd-register-screen .iti .iti__selected-flag,
#wrapper.mtd-register-screen .iti--separate-dial-code .iti__selected-flag {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px 0 16px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: hidden !important;
    color: #111827 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px 0 0 8px !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: color .18s ease, background .18s ease !important;
}

body:not(.login) .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
body:not(.login) .intl-tel-input .selected-flag:focus,
body:not(.login) .iti .iti__selected-flag:hover,
body:not(.login) .iti .iti__selected-flag:focus,
#wrapper.mtd-register-screen .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
#wrapper.mtd-register-screen .intl-tel-input .selected-flag:focus,
#wrapper.mtd-register-screen .iti .iti__selected-flag:hover,
#wrapper.mtd-register-screen .iti .iti__selected-flag:focus {
    color: var(--mtd-scheme-primary) !important;
    background: color-mix(in srgb, var(--mtd-scheme-primary) 6%, transparent) !important;
    outline: 0 !important;
}

body:not(.login) .iti-flag,
body:not(.login) .iti__flag,
#wrapper.mtd-register-screen .iti-flag,
#wrapper.mtd-register-screen .iti__flag {
    width: 20px !important;
    min-width: 20px !important;
    height: 15px !important;
    background-image: url("../img/flags.svg") !important;
    background-repeat: no-repeat !important;
    background-size: 5630px 15px !important;
    background-color: transparent !important;
    border-radius: 3px !important;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12) !important;
}

body:not(.login) .selected-flag .iti-flag,
body:not(.login) .iti__selected-flag .iti__flag,
#wrapper.mtd-register-screen .selected-flag .iti-flag,
#wrapper.mtd-register-screen .iti__selected-flag .iti__flag {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: 0 0 20px !important;
    margin: 0 !important;
}

body:not(.login) .intl-tel-input .selected-dial-code,
body:not(.login) .intl-tel-input.separate-dial-code .selected-dial-code,
body:not(.login) .iti .iti__selected-dial-code,
body:not(.login) .iti--separate-dial-code .iti__selected-dial-code,
#wrapper.mtd-register-screen .intl-tel-input .selected-dial-code,
#wrapper.mtd-register-screen .intl-tel-input.separate-dial-code .selected-dial-code,
#wrapper.mtd-register-screen .iti .iti__selected-dial-code,
#wrapper.mtd-register-screen .iti--separate-dial-code .iti__selected-dial-code {
    display: inline-flex !important;
    min-width: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    color: inherit !important;
    font-size: 0.98rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

body:not(.login) .intl-tel-input .selected-flag .iti-arrow,
body:not(.login) .iti .iti__arrow,
#wrapper.mtd-register-screen .intl-tel-input .selected-flag .iti-arrow,
#wrapper.mtd-register-screen .iti .iti__arrow {
    position: static !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 1px 0 0 auto !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
    border-top: 5px solid #64748b !important;
}

body:not(.login) .intl-tel-input .selected-flag .iti-arrow.up,
body:not(.login) .iti .iti__arrow--up,
body:not(.login) .iti .iti__arrow.up,
#wrapper.mtd-register-screen .intl-tel-input .selected-flag .iti-arrow.up,
#wrapper.mtd-register-screen .iti .iti__arrow--up,
#wrapper.mtd-register-screen .iti .iti__arrow.up {
    border-top: 0 !important;
    border-bottom: 5px solid #64748b !important;
}

body:not(.login) .intl-tel-input .country-list,
body:not(.login) .iti .iti__country-list,
#wrapper.mtd-register-screen .intl-tel-input .country-list,
#wrapper.mtd-register-screen .iti .iti__country-list {
    z-index: 10040 !important;
    width: min(520px, calc(100vw - 40px)) !important;
    min-width: min(100%, 340px) !important;
    max-width: min(520px, calc(100vw - 40px)) !important;
    max-height: min(360px, 52vh) !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid #d9e2ef !important;
    border-radius: 10px !important;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16) !important;
    white-space: normal !important;
}

body:not(.login) .intl-tel-input .country-list.dropup,
body:not(.login) .iti .iti__country-list--dropup,
#wrapper.mtd-register-screen .intl-tel-input .country-list.dropup,
#wrapper.mtd-register-screen .iti .iti__country-list--dropup {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

body:not(.login) .intl-tel-input .country-list .country,
body:not(.login) .iti .iti__country,
#wrapper.mtd-register-screen .intl-tel-input .country-list .country,
#wrapper.mtd-register-screen .iti .iti__country {
    display: flex !important;
    min-height: 42px !important;
    padding: 8px 10px !important;
    align-items: center !important;
    gap: 10px !important;
    color: #111827 !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    white-space: normal !important;
}

body:not(.login) .intl-tel-input .country-list .country:hover,
body:not(.login) .intl-tel-input .country-list .country.highlight,
body:not(.login) .intl-tel-input .country-list .country.active,
body:not(.login) .iti .iti__country:hover,
body:not(.login) .iti .iti__country.iti__highlight,
body:not(.login) .iti .iti__country.iti__active,
#wrapper.mtd-register-screen .intl-tel-input .country-list .country:hover,
#wrapper.mtd-register-screen .intl-tel-input .country-list .country.highlight,
#wrapper.mtd-register-screen .intl-tel-input .country-list .country.active,
#wrapper.mtd-register-screen .iti .iti__country:hover,
#wrapper.mtd-register-screen .iti .iti__country.iti__highlight,
#wrapper.mtd-register-screen .iti .iti__country.iti__active {
    color: #0f172a !important;
    background: color-mix(in srgb, var(--mtd-scheme-primary) 9%, #ffffff) !important;
}

body:not(.login) .intl-tel-input .country-list .flag-box,
body:not(.login) .iti .iti__flag-box,
#wrapper.mtd-register-screen .intl-tel-input .country-list .flag-box,
#wrapper.mtd-register-screen .iti .iti__flag-box {
    display: inline-flex !important;
    width: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
    justify-content: center !important;
}

body:not(.login) .intl-tel-input .country-list .country-name,
body:not(.login) .iti .iti__country-name,
#wrapper.mtd-register-screen .intl-tel-input .country-list .country-name,
#wrapper.mtd-register-screen .iti .iti__country-name {
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    color: inherit !important;
    text-overflow: ellipsis !important;
}

body:not(.login) .intl-tel-input .country-list .dial-code,
body:not(.login) .iti .iti__dial-code,
#wrapper.mtd-register-screen .intl-tel-input .country-list .dial-code,
#wrapper.mtd-register-screen .iti .iti__dial-code {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding-left: 14px !important;
    color: #64748b !important;
    font-weight: 750 !important;
}

body:not(.login) .intl-tel-input .country-list .divider,
body:not(.login) .iti .iti__divider,
#wrapper.mtd-register-screen .intl-tel-input .country-list .divider,
#wrapper.mtd-register-screen .iti .iti__divider {
    height: 1px !important;
    margin: 7px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #d9e2ef !important;
}

body.dark-mode:not(.login) .intl-tel-input,
body.dark-mode:not(.login) .iti,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input,
body.dark-mode #wrapper.mtd-register-screen .iti {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) .intl-tel-input.intl-tel-input > input.form-control[type="tel"],
body.dark-mode:not(.login) .intl-tel-input.intl-tel-input > input[type="tel"],
body.dark-mode:not(.login) .iti.iti > input.form-control[type="tel"],
body.dark-mode:not(.login) .iti.iti > input[type="tel"],
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input > input.form-control[type="tel"],
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input > input[type="tel"],
body.dark-mode #wrapper.mtd-register-screen .iti > input.form-control[type="tel"],
body.dark-mode #wrapper.mtd-register-screen .iti > input[type="tel"] {
    color:var(--mtd-ink,#f8fafc) !important;
    background:color-mix(in srgb, var(--mtd-surface-soft, #17243a) 92%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:none !important;
}

body.dark-mode:not(.login) .intl-tel-input .selected-flag,
body.dark-mode:not(.login) .intl-tel-input.separate-dial-code .selected-flag,
body.dark-mode:not(.login) .intl-tel-input.allow-dropdown .selected-flag,
body.dark-mode:not(.login) .iti .iti__selected-flag,
body.dark-mode:not(.login) .iti--separate-dial-code .iti__selected-flag,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .selected-flag,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input.separate-dial-code .selected-flag,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input.allow-dropdown .selected-flag,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__selected-flag,
body.dark-mode #wrapper.mtd-register-screen .iti--separate-dial-code .iti__selected-flag {
    color:var(--mtd-ink,#f8fafc) !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

body.dark-mode:not(.login) .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
body.dark-mode:not(.login) .intl-tel-input .selected-flag:focus,
body.dark-mode:not(.login) .iti .iti__selected-flag:hover,
body.dark-mode:not(.login) .iti .iti__selected-flag:focus,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .selected-flag:focus,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__selected-flag:hover,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__selected-flag:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 8%, transparent) !important;
}

body.dark-mode:not(.login) .intl-tel-input .selected-dial-code,
body.dark-mode:not(.login) .intl-tel-input.separate-dial-code .selected-dial-code,
body.dark-mode:not(.login) .iti .iti__selected-dial-code,
body.dark-mode:not(.login) .iti--separate-dial-code .iti__selected-dial-code,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .selected-dial-code,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input.separate-dial-code .selected-dial-code,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__selected-dial-code,
body.dark-mode #wrapper.mtd-register-screen .iti--separate-dial-code .iti__selected-dial-code {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .intl-tel-input .selected-flag .iti-arrow,
body.dark-mode:not(.login) .iti .iti__arrow,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .selected-flag .iti-arrow,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__arrow {
    border-top-color:#8fb4ea !important;
}

body.dark-mode:not(.login) .intl-tel-input .selected-flag .iti-arrow.up,
body.dark-mode:not(.login) .iti .iti__arrow--up,
body.dark-mode:not(.login) .iti .iti__arrow.up,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .selected-flag .iti-arrow.up,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__arrow--up,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__arrow.up {
    border-bottom-color:#8fb4ea !important;
}

body.dark-mode:not(.login) .intl-tel-input .country-list,
body.dark-mode:not(.login) .iti .iti__country-list,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__country-list {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:var(--mtd-surface, #101d31) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    box-shadow:0 26px 64px rgba(0, 0, 0, 0.34) !important;
}

body.dark-mode:not(.login) .intl-tel-input .country-list .country,
body.dark-mode:not(.login) .iti .iti__country,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .country,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__country {
    color:#dbe7f6 !important;
    background:transparent !important;
}

body.dark-mode:not(.login) .intl-tel-input .country-list .country:hover,
body.dark-mode:not(.login) .intl-tel-input .country-list .country.highlight,
body.dark-mode:not(.login) .intl-tel-input .country-list .country.active,
body.dark-mode:not(.login) .iti .iti__country:hover,
body.dark-mode:not(.login) .iti .iti__country.iti__highlight,
body.dark-mode:not(.login) .iti .iti__country.iti__active,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .country:hover,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .country.highlight,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .country.active,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__country:hover,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__country.iti__highlight,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__country.iti__active {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode:not(.login) .intl-tel-input .country-list .dial-code,
body.dark-mode:not(.login) .iti .iti__dial-code,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .dial-code,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__dial-code {
    color:#a9bad1 !important;
}

body.dark-mode:not(.login) .intl-tel-input .country-list .divider,
body.dark-mode:not(.login) .iti .iti__divider,
body.dark-mode #wrapper.mtd-register-screen .intl-tel-input .country-list .divider,
body.dark-mode #wrapper.mtd-register-screen .iti .iti__divider {
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

@media (max-width: 575.98px) {
    body:not(.login) .intl-tel-input,
    body:not(.login) .iti,
    #wrapper.mtd-register-screen .intl-tel-input,
    #wrapper.mtd-register-screen .iti {
        --mtd-phone-prefix-width: 114px;
    }

    body:not(.login) .intl-tel-input.intl-tel-input > input.form-control[type="tel"],
    body:not(.login) .intl-tel-input.intl-tel-input > input[type="tel"],
    body:not(.login) .iti.iti > input.form-control[type="tel"],
    body:not(.login) .iti.iti > input[type="tel"],
    #wrapper.mtd-register-screen .intl-tel-input > input.form-control[type="tel"],
    #wrapper.mtd-register-screen .intl-tel-input > input[type="tel"],
    #wrapper.mtd-register-screen .iti > input.form-control[type="tel"],
    #wrapper.mtd-register-screen .iti > input[type="tel"] {
        padding-right: 14px !important;
        padding-left: calc(var(--mtd-phone-prefix-width, 114px) + 12px) !important;
    }

    body:not(.login) .intl-tel-input .country-list,
    body:not(.login) .iti .iti__country-list,
    #wrapper.mtd-register-screen .intl-tel-input .country-list,
    #wrapper.mtd-register-screen .iti .iti__country-list {
        width: calc(100vw - 28px) !important;
        min-width: min(100%, 280px) !important;
        max-width: calc(100vw - 28px) !important;
    }
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country:hover,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.active,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country:hover,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__active {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__dial-code {
    color:#a9bad1 !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .divider,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__divider {
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}
/* End modern global phone selector */

/* Final phone selector polish */
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti,
body.dark-mode:not(.login) .intl-tel-input,
body.dark-mode:not(.login) .iti {
    color-scheme:dark;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input > input#inputPhone,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti > input#inputPhone {
    background:color-mix(in srgb, var(--mtd-surface-soft, #17243a) 92%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input .selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input.separate-dial-code .selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .intl-tel-input.allow-dropdown .selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti .iti__selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti--separate-dial-code .iti__selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .flag-container:hover .selected-flag,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .selected-flag:focus,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag:hover,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-flag:focus {
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border:0 !important;
    box-shadow:none !important;
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .selected-dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__selected-dial-code {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-list {
    color-scheme:dark;
    scrollbar-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 44%, transparent) rgba(9, 17, 31, 0.88);
    scrollbar-width:thin;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:var(--mtd-surface, #101d31) !important;
    background-color:var(--mtd-surface, #101d31) !important;
    background-image:none !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    box-shadow:0 26px 64px rgba(0, 0, 0, 0.34) !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list::-webkit-scrollbar,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-list::-webkit-scrollbar {
    width:10px;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list::-webkit-scrollbar-track,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-list::-webkit-scrollbar-track {
    background:rgba(9, 17, 31, 0.88);
    border-radius:999px;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list::-webkit-scrollbar-thumb,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country-list::-webkit-scrollbar-thumb {
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 44%, transparent);
    border:2px solid rgba(9, 17, 31, 0.88);
    border-radius:999px;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country {
    color:#dbe7f6 !important;
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country:hover,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.active,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.preferred.active,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.preferred.highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.preferred.active.highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country:hover,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__active,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__preferred.iti__active,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__preferred.iti__highlight,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__preferred.iti__active.iti__highlight {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    background-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    background-image:none !important;
}

body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country:hover .dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.highlight .dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .country-list .country.active .dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country:hover .iti__dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__highlight .iti__dial-code,
body.dark-mode #wrapper.mtd-register-screen #registration .mtd-register-phone-field .iti__country.iti__active .iti__dial-code {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
}
/* End final phone selector polish */
/* Dark mode selector and scrollbar normalisation */
html:has(body.dark-mode),
html:has(body.dark-mode) *,
body.dark-mode,
body.dark-mode * {
    scrollbar-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 68%, transparent) rgba(8, 16, 30, 0.96) !important;
    scrollbar-width:thin;
}

html:has(body.dark-mode)::-webkit-scrollbar,
html:has(body.dark-mode) *::-webkit-scrollbar,
body.dark-mode::-webkit-scrollbar,
body.dark-mode *::-webkit-scrollbar,
body.dark-mode .dropdown-menu::-webkit-scrollbar,
body.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar,
body.dark-mode .select2-results__options::-webkit-scrollbar,
body.dark-mode .mtd-localisation-body::-webkit-scrollbar,
body.dark-mode .country-list::-webkit-scrollbar,
body.dark-mode .iti__country-list::-webkit-scrollbar {
    width:10px !important;
    height:10px !important;
}

html:has(body.dark-mode)::-webkit-scrollbar-track,
html:has(body.dark-mode) *::-webkit-scrollbar-track,
body.dark-mode::-webkit-scrollbar-track,
body.dark-mode *::-webkit-scrollbar-track,
body.dark-mode .dropdown-menu::-webkit-scrollbar-track,
body.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-track,
body.dark-mode .select2-results__options::-webkit-scrollbar-track,
body.dark-mode .mtd-localisation-body::-webkit-scrollbar-track,
body.dark-mode .country-list::-webkit-scrollbar-track,
body.dark-mode .iti__country-list::-webkit-scrollbar-track {
    background:linear-gradient(180deg, rgba(8, 16, 30, 0.98), rgba(13, 25, 44, 0.98)) !important;
    border-radius:999px !important;
}

html:has(body.dark-mode)::-webkit-scrollbar-thumb,
html:has(body.dark-mode) *::-webkit-scrollbar-thumb,
body.dark-mode::-webkit-scrollbar-thumb,
body.dark-mode *::-webkit-scrollbar-thumb,
body.dark-mode .dropdown-menu::-webkit-scrollbar-thumb,
body.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb,
body.dark-mode .select2-results__options::-webkit-scrollbar-thumb,
body.dark-mode .mtd-localisation-body::-webkit-scrollbar-thumb,
body.dark-mode .country-list::-webkit-scrollbar-thumb,
body.dark-mode .iti__country-list::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent), color-mix(in srgb, var(--mtd-primary, #1262ff) 70%, transparent)) !important;
    border:2px solid rgba(8, 16, 30, 0.98) !important;
    border-radius:999px !important;
    min-height:38px !important;
}

html:has(body.dark-mode)::-webkit-scrollbar-thumb:hover,
html:has(body.dark-mode) *::-webkit-scrollbar-thumb:hover,
body.dark-mode::-webkit-scrollbar-thumb:hover,
body.dark-mode *::-webkit-scrollbar-thumb:hover,
body.dark-mode .dropdown-menu::-webkit-scrollbar-thumb:hover,
body.dark-mode .bootstrap-select .dropdown-menu::-webkit-scrollbar-thumb:hover,
body.dark-mode .select2-results__options::-webkit-scrollbar-thumb:hover,
body.dark-mode .mtd-localisation-body::-webkit-scrollbar-thumb:hover,
body.dark-mode .country-list::-webkit-scrollbar-thumb:hover,
body.dark-mode .iti__country-list::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, rgba(191, 219, 254, 0.98), color-mix(in srgb, var(--mtd-primary, #1262ff) 86%, transparent)) !important;
}

body.dark-mode select,
body.dark-mode select.form-control,
body.dark-mode .form-control select,
body.dark-mode .custom-select,
body.dark-mode .field.form-control select,
body.dark-mode #registration select.field.form-control {
    color-scheme:dark;
    color:var(--mtd-ink,#f8fafc) !important;
    background-color:color-mix(in srgb, var(--mtd-surface-soft, #17243a) 96%, transparent) !important;
    background-image:linear-gradient(180deg, color-mix(in srgb, var(--mtd-surface-soft, #17243a) 98%, transparent), rgba(13, 24, 41, 0.98)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
    box-shadow:none !important;
}

body.dark-mode select option,
body.dark-mode select optgroup,
body.dark-mode #registration select.field.form-control option,
body.dark-mode #registration select.field.form-control optgroup {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background-color:var(--mtd-surface, #101d31) !important;
}

body.dark-mode select option:checked,
body.dark-mode select option:hover,
body.dark-mode select option:focus,
body.dark-mode #registration select.field.form-control option:checked,
body.dark-mode #registration select.field.form-control option:hover,
body.dark-mode #registration select.field.form-control option:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 62%, transparent) !important;
    box-shadow:0 0 0 100vmax color-mix(in srgb, var(--mtd-primary, #1262ff) 62%, transparent) inset !important;
}

body.dark-mode .dropdown-menu .dropdown-item,
body.dark-mode .bootstrap-select .dropdown-menu li a,
body.dark-mode .select2-results__option {
    color:#dbe7f6 !important;
    background:transparent !important;
}

body.dark-mode .dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:focus,
body.dark-mode .dropdown-menu .dropdown-item.active,
body.dark-mode .bootstrap-select .dropdown-menu li a:hover,
body.dark-mode .bootstrap-select .dropdown-menu li.selected a,
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option[aria-selected=true] {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 26%, transparent) !important;
}

html:has(body.dark-mode)::-webkit-scrollbar-corner,
html:has(body.dark-mode) *::-webkit-scrollbar-corner,
body.dark-mode::-webkit-scrollbar-corner,
body.dark-mode *::-webkit-scrollbar-corner,
html:has(body.dark-mode)::-webkit-scrollbar-track-piece,
html:has(body.dark-mode) *::-webkit-scrollbar-track-piece,
body.dark-mode::-webkit-scrollbar-track-piece,
body.dark-mode *::-webkit-scrollbar-track-piece,
html:has(body.dark-mode)::-webkit-scrollbar-button,
html:has(body.dark-mode) *::-webkit-scrollbar-button,
body.dark-mode::-webkit-scrollbar-button,
body.dark-mode *::-webkit-scrollbar-button {
    background:rgba(8, 16, 30, 0.98) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:none !important;
}

body.dark-mode select::-webkit-scrollbar,
body.dark-mode .custom-select::-webkit-scrollbar,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar {
    width:10px !important;
    height:10px !important;
}

body.dark-mode select::-webkit-scrollbar-track,
body.dark-mode select::-webkit-scrollbar-track-piece,
body.dark-mode select::-webkit-scrollbar-corner,
body.dark-mode select::-webkit-scrollbar-button,
body.dark-mode .custom-select::-webkit-scrollbar-track,
body.dark-mode .custom-select::-webkit-scrollbar-track-piece,
body.dark-mode .custom-select::-webkit-scrollbar-corner,
body.dark-mode .custom-select::-webkit-scrollbar-button,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar-track,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar-track-piece,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar-corner,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar-button {
    background:#08101e !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode select::-webkit-scrollbar-thumb,
body.dark-mode .custom-select::-webkit-scrollbar-thumb,
body.dark-mode #registration select.field.form-control::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent), color-mix(in srgb, var(--mtd-primary, #1262ff) 70%, transparent)) !important;
    border:2px solid #08101e !important;
    border-radius:999px !important;
}

body.dark-mode select:focus,
body.dark-mode select.form-control:focus,
body.dark-mode .custom-select:focus,
body.dark-mode #registration select.field.form-control:focus,
body.dark-mode .bootstrap-select > .dropdown-toggle:focus,
body.dark-mode .select2-container--open .select2-selection,
body.dark-mode .select2-container--focus .select2-selection {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 58%, transparent) !important;
    outline:0 !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) inset, 0 0 0 3px color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent) !important;
}

body.dark-mode .mtd-localisation-modal .mtd-language-flag-shell {
    background:color-mix(in srgb, var(--mtd-surface, #111c2d) 72%, transparent) !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent), 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}
/* Dark mode selector border polish */
html body.dark-mode select,
html body.dark-mode select.form-control,
html body.dark-mode .custom-select,
html body.dark-mode .field.form-control select,
html body.dark-mode #wrapper #registration select.field.form-control,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple,
body.dark-mode .bootstrap-select > .dropdown-toggle {
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 42%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 42%, transparent) !important;
    outline:1px solid transparent !important;
    background-clip:padding-box !important;
}

html body.dark-mode select:hover,
html body.dark-mode select:focus,
html body.dark-mode select:focus-visible,
html body.dark-mode select:active,
html body.dark-mode select.form-control:hover,
html body.dark-mode select.form-control:focus,
html body.dark-mode select.form-control:focus-visible,
html body.dark-mode select.form-control:active,
html body.dark-mode .custom-select:hover,
html body.dark-mode .custom-select:focus,
html body.dark-mode .custom-select:focus-visible,
html body.dark-mode .custom-select:active,
html body.dark-mode #wrapper #registration select.field.form-control:hover,
html body.dark-mode #wrapper #registration select.field.form-control:focus,
html body.dark-mode #wrapper #registration select.field.form-control:focus-visible,
html body.dark-mode #wrapper #registration select.field.form-control:active,
html body.dark-mode .select2-container--open .select2-selection,
html body.dark-mode .select2-container--focus .select2-selection,
html body.dark-mode .bootstrap-select.show > .dropdown-toggle,
html body.dark-mode .bootstrap-select > .dropdown-toggle:hover,
html body.dark-mode .bootstrap-select > .dropdown-toggle:focus {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 78%, transparent) !important;
    outline:0 !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 34%, transparent) inset, 0 0 0 3px color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

@supports selector(select:open) {
    body.dark-mode select:open,
    body.dark-mode select.form-control:open,
    body.dark-mode .custom-select:open,
    body.dark-mode #registration select.field.form-control:open {
        border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 78%, transparent) !important;
        box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 32%, transparent) inset, 0 0 0 3px color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
    }
}

body.dark-mode .dropdown-menu,
body.dark-mode .bootstrap-select .dropdown-menu,
body.dark-mode .select2-dropdown,
body.dark-mode .select2-container--open .select2-dropdown,
body.dark-mode .select2-results__options {
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 36%, transparent) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:var(--mtd-surface, #101d31) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    box-shadow:0 26px 64px rgba(0, 0, 0, 0.34) !important;
    scrollbar-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 68%, transparent) rgba(8, 16, 30, 0.96) !important;
}

body.dark-mode select option:checked,
body.dark-mode #registration select.field.form-control option:checked {
    background:linear-gradient(0deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 72%, transparent), color-mix(in srgb, var(--mtd-primary, #1262ff) 72%, transparent)) !important;
    color:var(--mtd-ink, #ffffff) !important;
}
/* Native select dark mode hardening */
html body.dark-mode select,
html body.dark-mode select.form-control,
html body.dark-mode .custom-select,
html body.dark-mode .field.form-control select,
html body.dark-mode #wrapper #registration select.field.form-control,
html body.dark-mode .mtd-global-content-shell select,
html body.dark-mode .mtd-global-content-shell .custom-select {
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;
    color-scheme:dark !important;
    color:var(--mtd-ink,#f8fafc) !important;
    background-color:var(--mtd-surface, #101d31) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2393c5fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, rgba(20, 36, 62, 0.98), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 98%, transparent)) !important;
    background-position:right 16px center, 0 0 !important;
    background-repeat:no-repeat, repeat !important;
    background-size:16px 16px, 100% 100% !important;
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 56%, transparent) !important;
    outline:0 !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent) inset !important;
    padding-right:44px !important;
}

html body.dark-mode select:hover,
html body.dark-mode select:focus,
html body.dark-mode select:focus-visible,
html body.dark-mode select:active,
html body.dark-mode select.form-control:hover,
html body.dark-mode select.form-control:focus,
html body.dark-mode select.form-control:focus-visible,
html body.dark-mode select.form-control:active,
html body.dark-mode .custom-select:hover,
html body.dark-mode .custom-select:focus,
html body.dark-mode .custom-select:focus-visible,
html body.dark-mode .custom-select:active,
html body.dark-mode #wrapper #registration select.field.form-control:hover,
html body.dark-mode #wrapper #registration select.field.form-control:focus,
html body.dark-mode #wrapper #registration select.field.form-control:focus-visible,
html body.dark-mode #wrapper #registration select.field.form-control:active {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent) !important;
    outline:0 !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 42%, transparent) inset,
        0 0 0 4px color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

html body.dark-mode select option,
html body.dark-mode select optgroup {
    color:var(--mtd-ink,#f8fafc) !important;
    background:var(--mtd-surface, #101d31) !important;
    border:0 !important;
    box-shadow:none !important;
}

html body.dark-mode select option:checked,
html body.dark-mode select option:hover,
html body.dark-mode select option:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(0deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 82%, transparent), color-mix(in srgb, var(--mtd-primary, #1262ff) 82%, transparent)),
        #1d4ed8 !important;
}

body.dark-mode select::-ms-expand,
body.dark-mode select.form-control::-ms-expand,
body.dark-mode .custom-select::-ms-expand {
    display:none;
}
/* End dark mode selector border polish */
/* MTD 404 page */
.mtd-error-404-page {
    display: flex;
    min-height: 68vh;
    align-items: center;
    padding: clamp(72px, 8vw, 128px) 0;
}

.mtd-error-404-card {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: clamp(34px, 5vw, 64px);
    text-align: center;
    color: #101828;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.96));
    border: 1px solid rgba(147, 197, 253, 0.42);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
}

.mtd-error-404-mark {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    padding: 0 18px;
    color: #0f5fff;
    font-size: clamp(30px, 10vw, 150px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.mtd-error-404-icon {
    display: inline-flex;
    width: 76px;
    height: 76px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #ffffff;
    font-size: 28px;
    background: linear-gradient(135deg, #1d7cff, #0f4bd8);
    border-radius: 22px;
    box-shadow: 0 18px 36px rgba(15, 95, 255, 0.25);
}

.mtd-error-404-card h1 {
    margin: 0 0 14px;
    color: inherit;
    font-size: clamp(30px, 5vw, 50px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.mtd-error-404-card p {
    max-width: 620px;
    margin: 0 auto 30px;
    color: #64748b;
    font-size: 18px;
    line-height: 1.75;
}

.mtd-error-404-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.mtd-error-404-actions .btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 24px;
    border-radius: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none !important;
}

.mtd-error-404-secondary {
    color: #0f5fff !important;
    background: rgba(15, 95, 255, 0.08) !important;
    border-color: rgba(15, 95, 255, 0.2) !important;
}

body.dark-mode .mtd-error-404-card {
    color:var(--mtd-ink,#f8fafc);
    background:linear-gradient(145deg, rgba(17, 31, 54, 0.95), rgba(9, 20, 37, 0.96));
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 26%, transparent);
    box-shadow:0 34px 90px rgba(0, 0, 0, 0.42), 0 0 80px color-mix(in srgb, var(--mtd-primary, #1262ff) 8%, transparent) inset;
}

body.dark-mode .mtd-error-404-mark {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 30%, var(--mtd-ink, #f8fafc));
}

body.dark-mode .mtd-error-404-card p {
    color:#b8c7dd;
}

body.dark-mode .mtd-error-404-secondary {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(30, 48, 76, 0.92) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 32%, transparent) !important;
}

body.dark-mode .mtd-error-404-secondary:hover,
body.dark-mode .mtd-error-404-secondary:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 84%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 52%, transparent) !important;
}

@media (max-width: 575.98px) {
    .mtd-error-404-page {
        min-height: 62vh;
        padding: 48px 0;
    }

    .mtd-error-404-actions .btn {
        width: 100%;
    }
}
/* End MTD 404 page */
/* Auth dark mode modal and browser-fill polish */
#modalGeneratePassword .mtd-password-output-wrap {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
}

#modalGeneratePassword .mtd-password-output-wrap #inputGeneratePasswordOutput {
    padding-right: 118px !important;
}

#modalGeneratePassword .mtd-password-inline-copy {
    position: absolute !important;
    top: 50%;
    right: 8px;
    z-index: 2;
    display: inline-flex !important;
    min-width: 96px !important;
    min-height: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    color: #334155 !important;
    background: #f8fafc !important;
    border: 1px solid #dbe7f5 !important;
    border-radius: 7px !important;
    font-size: 0.92rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: translateY(-50%);
    box-shadow: none !important;
}

#modalGeneratePassword .mtd-password-inline-copy:hover,
#modalGeneratePassword .mtd-password-inline-copy:focus {
    color: #0f172a !important;
    background: var(--mtd-scheme-primary-soft) !important;
    border-color: var(--mtd-scheme-primary-border) !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-modal {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 98%, transparent), rgba(10, 22, 39, 0.98)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:0 30px 80px rgba(0, 0, 0, 0.44), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-modal-header,
body.dark-mode #modalGeneratePassword .mtd-password-modal-footer {
    background:color-mix(in srgb, var(--mtd-surface-soft, #17243a) 90%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent) !important;
}

body.dark-mode #modalGeneratePassword .modal-title,
body.dark-mode #modalGeneratePassword .mtd-password-field label {
    color:var(--mtd-ink,#f8fafc) !important;
    opacity:1 !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-modal-close {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(30, 48, 76, 0.96) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
    opacity:1 !important;
    text-shadow:none !important;
    box-shadow:0 10px 24px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-modal-close:hover,
body.dark-mode #modalGeneratePassword .mtd-password-modal-close:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 88%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 50%, transparent) !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-field .form-control,
body.dark-mode #modalGeneratePassword #inputGeneratePasswordLength,
body.dark-mode #modalGeneratePassword #inputGeneratePasswordOutput {
    color:var(--mtd-ink,#f8fafc) !important;
    caret-color:var(--mtd-ink,#f8fafc) !important;
    background:rgba(15, 29, 50, 0.98) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 38%, transparent) !important;
    box-shadow:0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-field .form-control:focus,
body.dark-mode #modalGeneratePassword #inputGeneratePasswordLength:focus,
body.dark-mode #modalGeneratePassword #inputGeneratePasswordOutput:focus {
    background:rgba(18, 36, 62, 0.98) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 72%, transparent) !important;
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 30%, transparent) inset, 0 0 0 3px color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

/* Number inputs only need their spinner normalization here. Colour comes from the
   token-driven field rule above - this block used to force an off-palette blue slab
   with !important and overrode every themed field it touched. */
body.dark-mode input[type="number"] {
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
    appearance:textfield;
}

body.dark-mode input[type="number"]::-webkit-inner-spin-button,
body.dark-mode input[type="number"]::-webkit-outer-spin-button {
    width:0 !important;
    margin:0 !important;
    opacity:0 !important;
    -webkit-appearance:none !important;
    appearance:none !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-tools {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:14px !important;
    padding-left:164px !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-tool-btn,
body.dark-mode #modalGeneratePassword .mtd-password-secondary {
    display:inline-flex !important;
    min-height:52px !important;
    height:52px !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 22px !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(30, 48, 76, 0.92) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 32%, transparent) !important;
    border-radius:8px !important;
    line-height:1 !important;
    box-shadow:none !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-tool-btn[type="submit"] {
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-tools .copy-to-clipboard {
    flex:0 0 152px !important;
    min-width:152px !important;
    margin:0 !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-inline-copy {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(30, 48, 76, 0.96) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 38%, transparent) !important;
}

body.dark-mode #modalGeneratePassword .mtd-password-tool-btn:hover,
body.dark-mode #modalGeneratePassword .mtd-password-tool-btn:focus,
body.dark-mode #modalGeneratePassword .mtd-password-secondary:hover,
body.dark-mode #modalGeneratePassword .mtd-password-secondary:focus,
body.dark-mode #modalGeneratePassword .mtd-password-inline-copy:hover,
body.dark-mode #modalGeneratePassword .mtd-password-inline-copy:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 88%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 52%, transparent) !important;
}

body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode textarea:-webkit-autofill,
body.dark-mode textarea:-webkit-autofill:hover,
body.dark-mode textarea:-webkit-autofill:focus,
body.dark-mode select:-webkit-autofill,
body.dark-mode select:-webkit-autofill:hover,
body.dark-mode select:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--mtd-ink,#f8fafc) !important;
    caret-color:var(--mtd-ink,#f8fafc) !important;
    background-color:color-mix(in srgb, var(--mtd-surface-soft, #17243a) 98%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 54%, transparent) !important;
    box-shadow:0 0 0 1000px color-mix(in srgb, var(--mtd-surface-soft, #17243a) 98%, transparent) inset, 0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) inset !important;
    transition:background-color 9999s ease-out 0s !important;
}

body.dark-mode input::selection,
body.dark-mode textarea::selection {
    color:var(--mtd-ink, #ffffff) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 68%, transparent) !important;
}

html body.login.dark-mode .mtd-login-field .form-control-label,
html body.login.dark-mode .mtd-login-field-top .form-control-label,
html body.login.dark-mode .mtd-login-field:focus-within .form-control-label,
html body.login.dark-mode .mtd-login-field-top:focus-within .form-control-label,
html body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-field .form-control-label,
html body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-content label,
html body.dark-mode #wrapper.mtd-login-background .mtd-reset-field .form-control-label,
html body.dark-mode #wrapper.mtd-login-background .mtd-reset-content label {
    color:var(--mtd-ink,#f8fafc) !important;
    opacity:1 !important;
    text-shadow:none !important;
}

html body.login.dark-mode .mtd-login-input-wrap:focus-within .mtd-login-input-icon,
html body.dark-mode #wrapper.mtd-reset-screen .mtd-reset-input-wrap:focus-within .mtd-reset-input-icon,
html body.dark-mode #wrapper.mtd-login-background .mtd-reset-input-wrap:focus-within .mtd-reset-input-icon {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    opacity:1 !important;
}

html body.login.dark-mode .mtd-login-input-wrap .form-control:-webkit-autofill,
html body.login.dark-mode .mtd-login-input-wrap .form-control:-webkit-autofill:hover,
html body.login.dark-mode .mtd-login-input-wrap .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--mtd-ink,#f8fafc) !important;
    box-shadow:0 0 0 1000px rgba(15, 29, 50, 0.98) inset, 0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) inset !important;
}

@media (max-width: 575.98px) {
    #modalGeneratePassword .mtd-password-output-wrap #inputGeneratePasswordOutput {
        padding-right: 94px !important;
    }

    #modalGeneratePassword .mtd-password-inline-copy {
        min-width: 76px !important;
        padding: 0 10px !important;
    }

    body.dark-mode #modalGeneratePassword .mtd-password-tools {
        flex-direction:column !important;
        padding-left:0 !important;
    }

    body.dark-mode #modalGeneratePassword .mtd-password-tool-btn[type="submit"],
    body.dark-mode #modalGeneratePassword .mtd-password-tools .copy-to-clipboard {
        flex:1 1 auto !important;
        width:100% !important;
    }
}
/* End auth dark mode modal and browser-fill polish */
/* End dark mode selector and scrollbar normalisation */

/* Serepok custom select shell */
.mtd-select-enhanced {
    position: relative;
    width: 100%;
    display: block;
}

.mtd-native-select-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
}

.mtd-select-button {
    width: 100%;
    min-height: var(--mtd-select-height, 48px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px;
    border: 1px solid #d9e2ef;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.mtd-select-enhanced.has-prepend-icon .mtd-select-button {
    padding-left: 54px;
}

.mtd-select-button:hover,
.mtd-select-button:focus,
.mtd-select-enhanced.is-open .mtd-select-button {
    border-color: var(--mtd-scheme-primary);
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-scheme-primary) 12%, transparent);
}

.mtd-select-current {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtd-select-caret {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 13px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mtd-select-enhanced.is-open .mtd-select-caret {
    transform: rotate(180deg);
    color: var(--mtd-scheme-primary);
}

.mtd-select-menu {
    position: absolute;
    z-index: 10060;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(320px, 52vh);
    overflow: auto;
    padding: 8px;
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16);
}

/*
 * Responsive sidebar selects must expand their cards. The desktop-style
 * absolute menu is clipped by the sidebar card's rounded overflow boundary
 * on Updates, Knowledgebase, Downloads, and other mobile portal views.
 */
@media (max-width: 991.98px) {
    body:not(.login) .mtd-sidebar-card .mtd-select-menu {
        position: static;
        inset: auto;
        width: 100%;
        margin-top: 8px;
    }

    body:not(.login) .mtd-sidebar-card .mtd-select-enhanced.is-open {
        height: auto;
    }
}

.mtd-select-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

.mtd-select-option:hover,
.mtd-select-option:focus {
    outline: 0;
    color: var(--mtd-scheme-primary);
    background: rgba(37, 99, 235, 0.08);
}

.mtd-select-option.is-selected {
    color: var(--mtd-scheme-primary);
    background: rgba(37, 99, 235, 0.12);
}

.mtd-select-option.is-selected::after {
    content: "\2713";
    flex: 0 0 auto;
    color: var(--mtd-scheme-primary);
}

.mtd-select-option:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

body.dark-mode .mtd-select-button {
    color:var(--mtd-ink,#f8fafc);
    background:linear-gradient(180deg, rgba(20, 36, 62, 0.98), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 98%, transparent));
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 50%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) inset;
}

body.dark-mode .mtd-select-button:hover,
body.dark-mode .mtd-select-button:focus,
body.dark-mode .mtd-select-enhanced.is-open .mtd-select-button {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent);
    box-shadow:0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 40%, transparent) inset, 0 0 0 4px color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent);
}

body.dark-mode .mtd-select-caret {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 45%, var(--mtd-ink, #f8fafc));
}

body.dark-mode .mtd-select-menu {
    color:var(--mtd-ink,#f8fafc);
    background:linear-gradient(180deg, rgba(15, 30, 52, 0.98), rgba(10, 22, 39, 0.98));
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 44%, transparent);
    box-shadow:0 28px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) inset;
    scrollbar-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 78%, transparent) color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 95%, transparent);
}

body.dark-mode .mtd-select-option {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc));
}

body.dark-mode .mtd-select-option:hover,
body.dark-mode .mtd-select-option:focus {
    color:var(--mtd-ink, #ffffff);
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent);
}

body.dark-mode .mtd-select-option.is-selected {
    color:var(--mtd-ink, #ffffff);
    background:linear-gradient(90deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 36%, transparent), rgba(14, 165, 233, 0.18));
}

body.dark-mode .mtd-select-option.is-selected::after {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 45%, var(--mtd-ink, #f8fafc));
}

body.dark-mode .mtd-select-menu::-webkit-scrollbar {
    width:10px;
}

body.dark-mode .mtd-select-menu::-webkit-scrollbar-track {
    background:color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 95%, transparent);
    border-left:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent);
}

body.dark-mode .mtd-select-menu::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent), color-mix(in srgb, var(--mtd-primary, #1262ff) 82%, transparent));
    border:2px solid color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 95%, transparent);
    border-radius:999px;
}
/* Modern product pricing and dark feature card refresh */
.sec.products .mtd-modern-pricing-container {
    max-width: 1320px;
    margin: 0 auto;
}

.sec.products .mtd-modern-plan-tabs {
    margin-bottom: 18px;
    border: 0 !important;
}

.sec.products .mtd-modern-plan-tabs .nav-link {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #1f2a44 !important;
    font-weight: 800;
    box-shadow: none !important;
}

.sec.products .mtd-modern-plan-tabs .nav-link.active,
.sec.products .mtd-modern-plan-tabs .nav-link:hover,
.sec.products .mtd-modern-plan-tabs .nav-link:focus {
    background: linear-gradient(135deg, #1769ff, #0ea5e9) !important;
    border-color: rgba(37, 99, 235, 0.58) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22) !important;
}

.sec.products .mtd-modern-tab-icon,
.sec.products .mtd-modern-spec-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--mtd-scheme-primary, #1769ff);
}

.sec.products .mtd-modern-plan-tabs .nav-link.active .mtd-modern-tab-icon,
.sec.products .mtd-modern-plan-tabs .nav-link:hover .mtd-modern-tab-icon,
.sec.products .mtd-modern-plan-tabs .nav-link:focus .mtd-modern-tab-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.sec.products .mtd-modern-plan-top,
.sec.products .mtd-modern-plan-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.sec.products .mtd-modern-plan-top {
    margin-bottom: 20px;
}

.sec.products .mtd-modern-plan-kicker,
.sec.products .mtd-modern-price-label,
.sec.products .mtd-modern-spec-label {
    display: block;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sec.products .mtd-modern-plan-heading h3 {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: clamp(1.45rem, 2.1vw, 2.1rem);
    font-weight: 900;
}

.sec.products .mtd-modern-billing-switcher .btn-group {
    overflow: hidden;
    border-color: rgba(37, 99, 235, 0.18) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86) !important;
}

.sec.products .mtd-modern-billing-switcher .btn,
.sec.products .mtd-modern-billing-switcher .dropdown-toggle {
    color: #1f2a44;
    font-weight: 800;
    background: transparent !important;
}

.sec.products .mtd-modern-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(132px, 1fr)) minmax(230px, 0.92fr);
    gap: 14px;
}

.sec.products .mtd-modern-spec-card,
.sec.products .mtd-modern-price-panel {
    min-height: 136px;
    padding: 18px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(238, 245, 255, 0.86));
}

.sec.products .mtd-modern-spec-card strong {
    color: #0f172a;
    font-size: clamp(1.35rem, 1.7vw, 1.9rem);
    font-weight: 900;
    line-height: 1.1;
}

.sec.products .mtd-modern-price-panel .pricing {
    line-height: 1;
}

.sec.products .mtd-modern-plan-footer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(37, 99, 235, 0.13);
}

.sec.products .mtd-modern-plan-note {
    max-width: 760px;
    color: #475569;
    font-weight: 700;
    line-height: 1.65;
}

.sec.products .mtd-modern-plan-note p {
    margin: 0;
}

.sec.products .mtd-modern-plan-note p + p {
    margin-top: 4px;
}

.sec.products .mtd-modern-order-btn:hover,
.sec.products .mtd-modern-order-btn:focus {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 24px 44px rgba(23, 105, 255, 0.32) !important;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-tabs .nav-link {
    background:rgba(15, 32, 56, 0.74) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-tabs .nav-link.active,
body.dark-mode:not(.login) .sec.products .mtd-modern-plan-tabs .nav-link:hover,
body.dark-mode:not(.login) .sec.products .mtd-modern-plan-tabs .nav-link:focus {
    background:linear-gradient(135deg, #1769ff, #0ea5e9) !important;
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-tab-icon,
body.dark-mode:not(.login) .sec.products .mtd-modern-spec-icon {
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent);
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 45%, var(--mtd-ink, #f8fafc));
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-heading h3,
body.dark-mode:not(.login) .sec.products .mtd-modern-spec-card strong {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-kicker,
body.dark-mode:not(.login) .sec.products .mtd-modern-spec-label,
body.dark-mode:not(.login) .sec.products .mtd-modern-price-label {
    color:#93a8c4;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-note {
    color:#c9d7ea;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-plan-footer {
    border-top-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent);
}

body.dark-mode:not(.login) .sec.products .mtd-modern-billing-switcher .btn-group {
    background:color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 92%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
}

body.dark-mode:not(.login) .sec.products .mtd-modern-billing-switcher .btn,
body.dark-mode:not(.login) .sec.products .mtd-modern-billing-switcher .dropdown-toggle {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) .sec.features .swiper-slide > .feature-item,
body.dark-mode:not(.login) .sec.features .swiper-slide > .feature-item.white,
body.dark-mode:not(.login) .sec.features .swiper-slide > .feature-item.box-shadow {
    height:100%;
    padding:26px !important;
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent) !important;
    border-radius:20px !important;
    background:linear-gradient(150deg, rgba(16, 35, 62, 0.78), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 94%, transparent)) !important;
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    box-shadow:0 22px 55px rgba(0, 0, 0, 0.22) !important;
    transition:transform 0.22s ease, border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

body.dark-mode:not(.login) .sec.features .swiper-slide > .feature-item:hover,
body.dark-mode:not(.login) .sec.features .swiper-slide > .feature-item:focus,
body.dark-mode:not(.login) .sec.features .swiper-slide > a.feature-item:hover,
body.dark-mode:not(.login) .sec.features .swiper-slide > a.feature-item:focus {
    background:linear-gradient(150deg, rgba(24, 50, 87, 0.92), rgba(12, 29, 52, 0.98)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 44%, transparent) !important;
    color:var(--mtd-ink, #ffffff) !important;
    transform:translateY(-4px);
    box-shadow:0 28px 70px rgba(0, 0, 0, 0.32), 0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) inset !important;
}

body.dark-mode:not(.login) .sec.features .feature-title,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-title {
    color:var(--mtd-ink,#f8fafc) !important;
}

body.dark-mode:not(.login) .sec.features .feature-desc,
body.dark-mode:not(.login) .sec.features .feature-desc p,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-desc,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-desc p {
    color:#c9d7ea !important;
}

body.dark-mode:not(.login) .sec.features .feature-icon span,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-icon span {
    color:var(--mtd-ink, #ffffff) !important;
}

@media (max-width: 1199.98px) {
    .sec.products .mtd-modern-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sec.products .mtd-modern-price-panel {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .sec.products .mtd-modern-plan-top,
    .sec.products .mtd-modern-plan-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .sec.products .mtd-modern-plan-tabs .nav-tabs,
    .sec.products .mtd-modern-plan-tabs .nav-item,
    .sec.products .mtd-modern-plan-tabs .nav-link,
    .sec.products .mtd-modern-billing-switcher .btn-group,
    .sec.products .mtd-modern-order-btn {
        width: 100%;
    }

    .sec.products .mtd-modern-plan-grid {
        grid-template-columns: 1fr;
    }
}
/* End modern product pricing and dark feature card refresh */

/* Modern pricing tab active marker cleanup */
.sec.products .mtd-modern-plan-tabs .nav-link.active::before,
.sec.products .mtd-modern-plan-tabs .nav-link.active:before,
.sec.products .mtd-modern-plan-tabs .nav-link.active::after,
.sec.products .mtd-modern-plan-tabs .nav-link.active:after,
.sec.products .mtd-modern-plan-tabs .nav-item.show .nav-link::before,
.sec.products .mtd-modern-plan-tabs .nav-item.show .nav-link:before,
.sec.products .mtd-modern-plan-tabs .nav-item.show .nav-link::after,
.sec.products .mtd-modern-plan-tabs .nav-item.show .nav-link:after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
/* End modern pricing tab active marker cleanup */

/* Store/sidebar dark active and hover states */
body.dark-mode:not(.login) .mtd-sidebar-card {
    background:linear-gradient(145deg, rgba(14, 31, 55, 0.94), rgba(8, 21, 39, 0.98)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:0 22px 48px rgba(2, 8, 23, 0.32) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-card-header {
    color:var(--mtd-ink, #f8fbff) !important;
    background:linear-gradient(135deg, rgba(18, 44, 77, 0.86), rgba(12, 28, 50, 0.94)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-card-title,
body.dark-mode:not(.login) .mtd-sidebar-link-label {
    color:#edf5ff !important;
}

body.dark-mode:not(.login) .mtd-sidebar-link,
body.dark-mode:not(.login) .mtd-sidebar-static {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(10, 25, 45, 0.68) !important;
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-link:hover,
body.dark-mode:not(.login) .mtd-sidebar-link:focus,
body.dark-mode:not(.login) .mtd-sidebar-link.active,
body.dark-mode:not(.login) .mtd-sidebar-link.active:hover,
body.dark-mode:not(.login) .mtd-sidebar-link.active:focus {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 92%, transparent), rgba(14, 165, 233, 0.72)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 48%, transparent) !important;
    box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-link:hover .mtd-sidebar-link-label,
body.dark-mode:not(.login) .mtd-sidebar-link:focus .mtd-sidebar-link-label,
body.dark-mode:not(.login) .mtd-sidebar-link.active .mtd-sidebar-link-label {
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-card-icon,
body.dark-mode:not(.login) .mtd-sidebar-link-icon {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 30%, var(--mtd-ink, #f8fafc)) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-link:hover .mtd-sidebar-link-icon,
body.dark-mode:not(.login) .mtd-sidebar-link:focus .mtd-sidebar-link-icon,
body.dark-mode:not(.login) .mtd-sidebar-link.active .mtd-sidebar-link-icon {
    color:var(--mtd-ink, #ffffff) !important;
    background:rgba(255, 255, 255, 0.18) !important;
}

body.dark-mode:not(.login) .mtd-sidebar-link.disabled,
body.dark-mode:not(.login) .mtd-sidebar-link.disabled:hover,
body.dark-mode:not(.login) .mtd-sidebar-link.disabled:focus {
    color:rgba(219, 234, 254, 0.48) !important;
    background:rgba(15, 32, 56, 0.45) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 10%, transparent) !important;
    box-shadow:none !important;
}
/* End store/sidebar dark active and hover states */

/* Legacy WBAMS sidebar and dark surface cleanup */
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) {
    color:var(--mtd-text,#dce6f4) !important;
    background:linear-gradient(145deg, rgba(14, 31, 55, 0.94), rgba(8, 21, 39, 0.98)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:0 22px 48px rgba(2, 8, 23, 0.32) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .panel-heading,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .card-header,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .panel-heading,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .card-header {
    color:var(--mtd-ink, #f8fbff) !important;
    background:linear-gradient(135deg, rgba(18, 44, 77, 0.86), rgba(12, 28, 50, 0.94)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .panel-title,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .panel-title {
    color:var(--mtd-ink, #f8fbff) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group {
    background:transparent !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(10, 25, 45, 0.68) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item:hover,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item:focus,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.active,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.active,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item:hover,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item:focus,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.active,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.active {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 92%, transparent), rgba(14, 165, 233, 0.72)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 48%, transparent) !important;
    box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item i,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item i {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 30%, var(--mtd-ink, #f8fafc)) !important;
    background:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item:hover i,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item:focus i,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.active i,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.active i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item:hover i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item:focus i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.active i,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.active i {
    color:var(--mtd-ink, #ffffff) !important;
    background:rgba(255, 255, 255, 0.18) !important;
}

body.dark-mode:not(.login) .mtd-global-content-shell .panel, body.dark-mode:not(.login) .mtd-global-content-shell .card {
    color:var(--mtd-text,#dce6f4) !important;
    background:linear-gradient(150deg, rgba(16, 35, 62, 0.82), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 94%, transparent)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
    box-shadow:0 22px 55px rgba(0, 0, 0, 0.22) !important;
}

body.dark-mode:not(.login) .mtd-global-content-shell input[type="text"], body.dark-mode:not(.login) .mtd-global-content-shell input[type="email"], body.dark-mode:not(.login) .mtd-global-content-shell input[type="password"], body.dark-mode:not(.login) .mtd-global-content-shell textarea, body.dark-mode:not(.login) .mtd-global-content-shell select {
    color:#e5f0ff !important;
    background-color:color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 92%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
}

body.dark-mode:not(.login) .mtd-global-content-shell input[type="text"]:focus, body.dark-mode:not(.login) .mtd-global-content-shell input[type="email"]:focus, body.dark-mode:not(.login) .mtd-global-content-shell input[type="password"]:focus, body.dark-mode:not(.login) .mtd-global-content-shell textarea:focus, body.dark-mode:not(.login) .mtd-global-content-shell select:focus {
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 78%, transparent) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

body.dark-mode:not(.login) input[type="file"] {
    color:var(--mtd-text,#dce6f4) !important;
    background:color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 94%, transparent) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
}

body.dark-mode:not(.login) input[type="file"]::file-selector-button {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, #1769ff, #0ea5e9) !important;
    border:0 !important;
}
/* End legacy WBAMS sidebar and dark surface cleanup */

/* Plain flags and feature icons */
.mtd-localisation-modal .mtd-localisation-item .mtd-language-flag-shell,
body.dark-mode .mtd-localisation-modal .mtd-language-flag-shell,
body:not(.login) .intl-tel-input .country-list .flag-box,
body:not(.login) .iti .iti__flag-box,
body:not(.login) .selected-flag .iti-flag,
body:not(.login) .iti__selected-flag .iti__flag,
body:not(.login) .iti-flag,
body:not(.login) .iti__flag {
    background-color:transparent !important;
    box-shadow:none !important;
}

.mtd-localisation-modal .mtd-language-flag,
body:not(.login) .iti-flag,
body:not(.login) .iti__flag {
    border-radius: 2px !important;
}

body.dark-mode:not(.login) .sec.features .feature-icon,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-icon {
    width:auto !important;
    height:auto !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    color:inherit !important;
}

/* End plain flags and feature icons */

/* Password generator layout polish */
#modalGeneratePassword .mtd-password-tools .copy-to-clipboard:not(.mtd-password-inline-copy) {
    display: none !important;
}

#modalGeneratePassword .mtd-password-tools {
    justify-content: flex-start !important;
    padding-left: 0 !important;
}
/* End password generator layout polish */

/* Final dark-mode legacy navigation and icon cleanup */
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) > .list-group,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group {
    background:rgba(7, 18, 34, 0.42) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent) !important;
}

body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group a.list-group-item.list-group-item-action,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group a.list-group-item.list-group-item-action {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(10, 25, 45, 0.68) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 14%, transparent) !important;
    text-shadow:none !important;
}

body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:hover,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:focus,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:active,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action.active,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group a.list-group-item.list-group-item-action:hover,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group a.list-group-item.list-group-item-action:focus,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group a.list-group-item.list-group-item-action:active,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group a.list-group-item.list-group-item-action.active,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:hover,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:focus,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:active,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action.active {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 92%, transparent), rgba(14, 165, 233, 0.72)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 48%, transparent) !important;
    box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:hover *,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:focus *,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action:active *,
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) a.list-group-item.list-group-item-action.active *,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:hover *,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:focus *,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action:active *,
body.dark-mode:not(.login) .cart-sidebar .panel-sidebar a.list-group-item.list-group-item-action.active * {
    color:var(--mtd-ink, #ffffff) !important;
}

body.dark-mode:not(.login) .sec.features .feature-icon::before,
body.dark-mode:not(.login) .sec.features .feature-icon::after,
body.dark-mode:not(.login) .sec.features .feature-icon span::before,
body.dark-mode:not(.login) .sec.features .feature-icon span::after,
body.dark-mode:not(.login) .sec.features .feature-icon i::before,
body.dark-mode:not(.login) .sec.features .feature-icon i::after {
    background:transparent !important;
    box-shadow:none !important;
}

body.dark-mode:not(.login) .sec.features .feature-icon img,
body.dark-mode:not(.login) .sec.features .feature-icon svg {
    display:block !important;
    width:24px !important;
    height:24px !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

body.dark-mode:not(.login) .sec.features .feature-icon span,
body.dark-mode:not(.login) .sec.features .feature-icon i,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-icon span,
body.dark-mode:not(.login) .sec.features .feature-item:hover .feature-icon i {
    border-radius:999px !important;
    overflow:hidden !important;
    clip-path:circle(50% at 50% 50%) !important;
    display:inline-flex !important;
    width:46px !important;
    height:46px !important;
    align-items:center !important;
    justify-content:center !important;
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, #1769ff, #0ea5e9) !important;
    box-shadow:0 14px 28px rgba(23, 105, 255, 0.26) !important;
}

.section-header .nav-link-right .iti-flag,
.section-header .nav-link-right .iti__flag,
.section-header .nav-link-right .mtd-language-flag,
#wrapper.mtd-register-screen .mtd-register-phone-field .selected-flag .iti-flag,
#wrapper.mtd-register-screen .mtd-register-phone-field .iti__selected-flag .iti__flag,
#wrapper.mtd-register-screen .mtd-register-phone-field .iti-flag,
#wrapper.mtd-register-screen .mtd-register-phone-field .iti__flag,
#wrapper.mtd-register-screen .mtd-details-phone-field .selected-flag .iti-flag,
#wrapper.mtd-register-screen .mtd-details-phone-field .iti__selected-flag .iti__flag,
#wrapper.mtd-register-screen .mtd-details-phone-field .iti-flag,
#wrapper.mtd-register-screen .mtd-details-phone-field .iti__flag,
body.login .mtd-register-phone-field .iti-flag,
body.login .mtd-register-phone-field .iti__flag,
body.login .mtd-details-phone-field .iti-flag,
body.login .mtd-details-phone-field .iti__flag,
body:not(.login) .mtd-register-phone-field .iti-flag,
body:not(.login) .mtd-register-phone-field .iti__flag,
body:not(.login) .mtd-details-phone-field .iti-flag,
body:not(.login) .mtd-details-phone-field .iti__flag {
    background-color: transparent !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
    filter: none !important;
}

#wrapper.mtd-register-screen .mtd-register-phone-field .selected-flag,
#wrapper.mtd-register-screen .mtd-details-phone-field .selected-flag,
#wrapper.mtd-register-screen .mtd-register-phone-field .flag-container,
#wrapper.mtd-register-screen .mtd-details-phone-field .flag-container,
body.login .mtd-register-phone-field .selected-flag,
body.login .mtd-details-phone-field .selected-flag,
body.login .mtd-register-phone-field .flag-container,
body.login .mtd-details-phone-field .flag-container,
.section-header .nav-link-right .mtd-language-flag,
.section-header .nav-link-right .mtd-language-flag-shell {
    box-shadow: none !important;
    background-color: transparent !important;
    outline: 0 !important;
}
/* End final dark-mode legacy navigation and icon cleanup */

/* Final sidebar state and flag/icon shape lock */
body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background-color:rgba(10, 25, 45, 0.74) !important;
    background-image:none !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 16%, transparent) !important;
    text-shadow:none !important;
}

body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:hover, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:focus, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:active, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.active, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.selected, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.current, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item[aria-current="true"], body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item[aria-selected="true"], body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:hover, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:focus, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:active, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.active, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.selected, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.current, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item[aria-current="true"], body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item[aria-selected="true"] {
    color:var(--mtd-ink, #ffffff) !important;
    background-color:transparent !important;
    background-image:linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 90%, transparent), rgba(14, 165, 233, 0.7)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 50%, transparent) !important;
    box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 28px color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    text-shadow:none !important;
}

body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:hover *, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:focus *, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item:active *, body.dark-mode:not(.login) .panel-sidebar:not(.panel-summary) .list-group-item.active *, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:hover *, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:focus *, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item:active *, body.dark-mode:not(.login) .cart-sidebar .panel-sidebar .list-group-item.active * {
    color:var(--mtd-ink, #ffffff) !important;
}

.section-header .nav-link-right .iti-flag::before,
.section-header .nav-link-right .iti-flag::after,
.section-header .nav-link-right .iti__flag::before,
.section-header .nav-link-right .iti__flag::after,
.section-header .nav-link-right .mtd-language-flag::before,
.section-header .nav-link-right .mtd-language-flag::after,
body:not(.login) .intl-tel-input .iti-flag::before,
body:not(.login) .intl-tel-input .iti-flag::after,
body:not(.login) .iti .iti__flag::before,
body:not(.login) .iti .iti__flag::after,
body.login .intl-tel-input .iti-flag::before,
body.login .intl-tel-input .iti-flag::after,
body.login .iti .iti__flag::before,
body.login .iti .iti__flag::after,
.mtd-localisation-modal .mtd-language-flag::before,
.mtd-localisation-modal .mtd-language-flag::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.section-header .nav-link-right .iti-flag,
.section-header .nav-link-right .iti__flag,
.section-header .nav-link-right .mtd-language-flag,
body:not(.login) .intl-tel-input .iti-flag,
body:not(.login) .iti .iti__flag,
body.login .intl-tel-input .iti-flag,
body.login .iti .iti__flag,
.mtd-localisation-modal .mtd-language-flag {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* End final sidebar state and flag/icon shape lock */

/* Final register visual step layout cleanup */
#wrapper.mtd-register-screen .mtd-register-steps {
    width: min(100%, 420px) !important;
    gap: 12px !important;
    display: grid;
    margin-top: 34px;
}

#wrapper.mtd-register-screen .mtd-register-step {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    align-items: center !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#wrapper.mtd-register-screen .mtd-register-step i {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.16) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #08223f;
    background: #8df1c6;
}

#wrapper.mtd-register-screen .mtd-register-step strong,
#wrapper.mtd-register-screen .mtd-register-step small {
    grid-column: 2 !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    display: block;
}

#wrapper.mtd-register-screen .mtd-register-step strong {
    align-self: end !important;
    white-space: nowrap !important;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 900;
    line-height: 1.2;
}

#wrapper.mtd-register-screen .mtd-register-step small {
    align-self: start !important;
    white-space: normal !important;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    #wrapper.mtd-register-screen .mtd-register-steps {
        width: 100% !important;
    }
}

/* Clean page-builder feature icons: no ochre outer box or white hover state */
body:not(.login) .sec.features .feature-item .feature-icon:not(#mtd-feature-icon-specificity),
body:not(.login) .sec.features .feature-item:hover .feature-icon:not(#mtd-feature-icon-specificity),
body:not(.login) .sec.features .feature-item:focus-within .feature-icon:not(#mtd-feature-icon-specificity) {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

body:not(.login) .sec.features .feature-item .feature-icon:not(#mtd-feature-icon-specificity)::before,
body:not(.login) .sec.features .feature-item .feature-icon:not(#mtd-feature-icon-specificity)::after,
body:not(.login) .sec.features .feature-item:hover .feature-icon:not(#mtd-feature-icon-specificity)::before,
body:not(.login) .sec.features .feature-item:hover .feature-icon:not(#mtd-feature-icon-specificity)::after,
body:not(.login) .sec.features .feature-item:focus-within .feature-icon:not(#mtd-feature-icon-specificity)::before,
body:not(.login) .sec.features .feature-item:focus-within .feature-icon:not(#mtd-feature-icon-specificity)::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:not(.login) .sec.features .feature-item .feature-icon:not(#mtd-feature-icon-specificity) > span,
body:not(.login) .sec.features .feature-item .feature-icon:not(#mtd-feature-icon-specificity) > i,
body:not(.login) .sec.features .feature-item:hover .feature-icon:not(#mtd-feature-icon-specificity) > span,
body:not(.login) .sec.features .feature-item:hover .feature-icon:not(#mtd-feature-icon-specificity) > i,
body:not(.login) .sec.features .feature-item:focus-within .feature-icon:not(#mtd-feature-icon-specificity) > span,
body:not(.login) .sec.features .feature-item:focus-within .feature-icon:not(#mtd-feature-icon-specificity) > i {
    display: inline-flex !important;
    width: 46px !important;
    height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1769ff, #0ea5e9) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 12px 24px rgba(23, 105, 255, 0.22) !important;
    clip-path: circle(50% at 50% 50%) !important;
}
/* End clean page-builder feature icons */

/* Serepok dark-mode completion: submit ticket and announcements */
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card {
    color:var(--mtd-text,#dce6f4) !important;
    background:linear-gradient(150deg, rgba(16, 35, 62, 0.9), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 98%, transparent)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    box-shadow:0 22px 52px rgba(0, 0, 0, 0.24) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading {
    background:linear-gradient(90deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent), transparent 48%),
        linear-gradient(180deg, #192943, #132137) !important;
    border-bottom-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading-text strong,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card label,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .urgency-options > label:first-child {
    color:var(--mtd-ink, #f8fbff) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card-heading-text small,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .form-text,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .text-muted,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-footer {
    color:var(--mtd-muted, #9fb0c6) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .form-control,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-card .custom-select,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .department-dropdown > button,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .related-product-dropdown > button {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(7, 18, 34, 0.86) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 28%, transparent) !important;
    box-shadow:none !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .department-dropdown > button small,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field .related-product-dropdown > button small {
    color:var(--mtd-muted, #9fb0c6) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .urgency-options {
    background:linear-gradient(90deg, color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, transparent), transparent),
        rgba(10, 25, 45, 0.82) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .pcb.sm {
    color:var(--mtd-text,#dce6f4) !important;
    background:#17263b !important;
    border-color:var(--mtd-line, #34445c) !important;
    box-shadow:none !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .urgency-options .mtd-checkbox:checked + .pcb.sm {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, var(--mtd-primary, #1262ff), var(--mtd-primary-hover, #1557df)) !important;
    border-color:#4a8fff !important;
    box-shadow:0 12px 24px rgba(23, 105, 255, 0.25) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-editor,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-input,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field textarea,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-preview {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 12%, var(--mtd-ink, #f8fafc)) !important;
    background:rgba(7, 18, 34, 0.88) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-footer {
    color:var(--mtd-muted, #9fb0c6) !important;
    background:#132137 !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 20%, transparent) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-primary {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, var(--mtd-primary, #1262ff), var(--mtd-primary-hover, #1557df)) !important;
    border-color:#4a8fff !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .custom-file {
    position: relative !important;
    overflow: hidden !important;
    width: 100%;
    height: 44px;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .custom-file-input {
    position: absolute !important;
    z-index: 2 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .custom-file-label {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex;
    height: 44px;
    align-items: center;
    padding: 0 14px;
    border-color: #dbe7f5;
    border-radius: 8px;
    font-weight: 800;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .custom-file-label::after {
    display: none !important;
    content: none !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .custom-file-label {
    color:var(--mtd-text,#dce6f4) !important;
    background:var(--mtd-surface, #101d31) !important;
    border-color:var(--mtd-line, #34445c) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-attachment-field .btn-addmore {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, var(--mtd-primary, #1262ff), var(--mtd-primary-hover, #1557df)) !important;
    border-color:#4a8fff !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .form-actions {
    border-top-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 22%, transparent) !important;
}

body.dark-mode:not(.login) .annoucements .annuncement-item {
    color:var(--mtd-text,#dce6f4) !important;
    background:linear-gradient(150deg, rgba(16, 35, 62, 0.82), color-mix(in srgb, var(--mtd-surface-muted, #0d1727) 94%, transparent)) !important;
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent) !important;
    box-shadow:0 18px 42px rgba(0, 0, 0, 0.18) !important;
}

body.dark-mode:not(.login) .annoucements .announcement-date {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:#203351 !important;
    border:1px solid color-mix(in srgb, var(--mtd-primary, #1262ff) 34%, transparent) !important;
    box-shadow:none !important;
}

body.dark-mode:not(.login) .annoucements .annuncement-item h2,
body.dark-mode:not(.login) .annoucements .annuncement-item h3 {
    color:var(--mtd-ink, #f8fbff) !important;
}

body.dark-mode:not(.login) .annoucements .annuncement-body,
body.dark-mode:not(.login) .annoucements .annuncement-body p {
    color:#c7d3e3 !important;
}
/* End Serepok dark-mode completion */

/* Shared native CAPTCHA alignment: Register, Contact, Login {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    justify-items:center !important;
    align-items:center !important;
    gap:14px !important;
    width:100% !important;
    margin-right:0 !important;
    margin-left:0 !important;
    padding-bottom:0 !important;
}
/* End shared native CAPTCHA alignment */

/* Announcements: blue dark-mode Read More action */
body.dark-mode:not(.login) .annoucements .annuncement-footer .btn-link {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px;
    min-height:44px;
    padding:10px 17px !important;
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, var(--mtd-primary, #1262ff), var(--mtd-primary-hover, #1557df)) !important;
    border:1px solid rgba(125, 180, 255, 0.58) !important;
    border-radius:10px !important;
    box-shadow:0 10px 24px rgba(21, 87, 223, 0.28) !important;
    text-decoration:none !important;
    cursor:pointer;
    transition:transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease !important;
}

body.dark-mode:not(.login) .annoucements .annuncement-item:hover .annuncement-footer .btn-link,
body.dark-mode:not(.login) .annoucements .annuncement-footer .btn-link:hover {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, #4893ff, #1d65ed) !important;
    border-color:rgba(164, 202, 255, 0.78) !important;
    box-shadow:0 13px 30px rgba(21, 87, 223, 0.4) !important;
    transform:translateY(-1px);
}

body.dark-mode:not(.login) .annoucements .annuncement-footer .btn-link i {
    color:currentColor !important;
    transition:transform 160ms ease;
}

body.dark-mode:not(.login) .annoucements .annuncement-item:hover .annuncement-footer .btn-link i,
body.dark-mode:not(.login) .annoucements .annuncement-footer .btn-link:hover i {
    transform:translateX(3px);
}
/* End announcements dark-mode Read More action */

/* Header cart: compact item bubble pinned to the Cart label */
.section-header .serepok-right-cart .nav-link-right.cart {
    position:relative;
    overflow:visible;
}

.section-header .serepok-right-cart .nav-link-right.cart > .badge {
    position: absolute !important;
    z-index: 2;
    top: -7px;
    right: -9px;
    display: inline-flex !important;
    width: auto;
    min-width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 4px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f80ff, #1557df) !important;
    border: 1px solid rgba(255, 255, 255, 0.48) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(21, 87, 223, 0.32) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 14px !important;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

body.dark-mode .section-header .serepok-right-cart .nav-link-right.cart > .badge {
    color:var(--mtd-ink, #ffffff) !important;
    background:linear-gradient(135deg, #4595ff, #1768f2) !important;
    border-color:rgba(185, 216, 255, 0.56) !important;
    box-shadow:0 4px 12px rgba(23, 104, 242, 0.42) !important;
}

@media (min-width: 1200px) {
    .section-header.serepok-right-icons-only .navbar-end .serepok-right-cart .nav-link-right.cart > .badge {
        top: 1px !important;
        right: 1px !important;
    }
}
/* End compact header cart item bubble */

/* Header brand: use the complete responsive WBAMS wordmark. */
.section-header .navbar-brand.serepok-brand {
    min-height: 42px;
    max-width: 240px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    overflow: visible;
}

.section-header .navbar-brand.serepok-brand .serepok-brand-logo {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    max-width: 250px;
    height: auto !important;
    max-height: 52px;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
}

.section-header .navbar-brand.serepok-brand::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 575.98px) {
    .section-header .navbar-brand.serepok-brand {
        min-height: 36px;
        max-width: 190px;
    }

    .section-header .navbar-brand.serepok-brand .serepok-brand-logo {
        max-width: 205px;
        max-height: 44px;
    }
}
/* End WBAMS header brand */

/* Sidebar categories: keep long labels and count badges inside the card. */
body:not(.login) .mtd-sidebar-region,
body:not(.login) .mtd-sidebar-card,
body:not(.login) .mtd-sidebar-list {
    min-width: 0;
}

body:not(.login) .mtd-sidebar-list {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

body:not(.login) .mtd-sidebar-link {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: #334155;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
}

body:not(.login) .mtd-sidebar-link-label {
    min-width: 0;
    flex: 1 1 auto;
    white-space: normal;
}

body:not(.login) .mtd-sidebar-link-label .truncate {
    min-width: 0;
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
}

body:not(.login) .mtd-sidebar-link > .badge {
    flex: 0 0 auto;
    margin-left: auto;
}
/* End sidebar category wrapping */

/* Breadcrumbs: make the row full width while keeping every crumb content-sized. */
body:not(.login) .mtd-page-breadcrumb-bar {
    width: 100%;
    justify-content: flex-start;
    display: flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 0 clamp(22px, 2.6vw, 38px);
    position: relative;
    z-index: 3;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    justify-content: flex-start;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-list {
    display: flex;
    max-width: none;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-item {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-item.is-current {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-item.is-current .mtd-breadcrumb-current {
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    height: auto;
    padding-top: 8px;
    padding-bottom: 8px;
}

body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-item.is-current .mtd-breadcrumb-label {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.3;
}

@media (max-width: 767.98px) {
    body:not(.login) .mtd-page-breadcrumb-bar {
        overflow-x: visible;
    justify-content: flex-start;
    margin-bottom: 12px;
    padding: 0 0 2px;
    }

    body:not(.login) .mtd-page-breadcrumb-bar .mtd-breadcrumb-list {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
    }
}
/* End full-width responsive breadcrumbs */

/* Serepok intrinsic brand width */
.section-header a.navbar-brand.serepok-brand {
    width: max-content !important;
    min-width: 0 !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    align-self: center;
}

.section-header a.navbar-brand.serepok-brand .serepok-brand-logo {
    flex: 0 0 auto !important;
}
/* End Serepok intrinsic brand width */

/* Serepok ticket form: dropdown stacking and editor controls */
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field {
    position: relative;
    z-index: 40;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-priority-field,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-related-field {
    position: relative;
    z-index: 1;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .dropdown-menu {
    z-index: 2000 !important;
    background: #ffffff;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header {
    min-height: 66px;
    gap: 8px;
    padding: 10px 12px !important;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 6%, transparent), transparent 58%),
        #f8fbff;
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #e5edf6;
    box-sizing: border-box;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-group {
    display: inline-flex;
    gap: 2px;
    align-items: center;
    padding: 4px;
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    flex-wrap: wrap;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 !important;
    color: #334155;
    background: transparent;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 0.94rem;
    line-height: 1;
    transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn:hover,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn:focus,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control:hover,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control:focus {
    color: var(--mtd-scheme-primary);
    background: var(--mtd-scheme-primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent) !important;
    outline: 0;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-primary {
    width: auto;
    min-width: 92px;
    padding: 0 16px !important;
    color: #ffffff;
    background: linear-gradient(135deg, #2f80ff, #1557df);
    box-shadow: 0 10px 20px rgba(23, 105, 255, 0.22) !important;
    font-weight: 900;
    border-color: var(--mtd-scheme-primary);
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-primary:hover,
body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-primary:focus {
    color: #ffffff;
    background: linear-gradient(135deg, #176fff, #0f4fcf);
    box-shadow: 0 12px 24px rgba(23, 105, 255, 0.3) !important;
}

body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-controls {
    display: inline-flex;
    float: none;
    gap: 4px;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 4px;
    background: #ffffff;
    border: 1px solid #dbe7f5;
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-department-field .dropdown-menu,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn-group,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-controls {
    background:#17263b !important;
    border-color:var(--mtd-line, #34445c) !important;
    box-shadow:none !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control {
    color:#d5e0ef !important;
    background:transparent !important;
    border:0 !important;
    border-color:var(--mtd-line, #34445c) !important;
}

body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn:hover,
body.dark-mode[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control:hover {
    color:var(--mtd-ink, #ffffff) !important;
    background:rgba(47, 128, 255, 0.18) !important;
}

@media (max-width: 767.98px) {
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header {
        align-items: flex-start;
        padding: 10px !important;
    overflow-x: auto;
    flex-wrap: nowrap;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-header .btn,
    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-control {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
    }

    body[data-templatefile="support-request-step-two"]:not(.login) .mtd-ticket-message-field .md-controls {
        margin-left: 0;
    }
}
/* End Serepok ticket form controls */
/* Native WBAMS CAPTCHA: match the challenge bitmap to its input control. */
.wbams-captcha-image,
.wbams-captcha-input {
    float: none !important;
    width: 100% !important;
    max-width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wbams-captcha-image {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

.wbams-captcha-image > #inputCaptchaImage {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 64px !important;
    border: 1px solid #b8c8dc !important;
    border-radius: 8px !important;
    object-fit: cover !important;
}

.wbams-captcha-input > #inputCaptcha {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 14px 20px !important;
    text-align: center !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
}

/* Native Knowledgebase and Updates editorial system */
body[data-templatefile="updates"]:not(.login),
body[data-templatefile="update"]:not(.login),
body[data-templatefile^="knowledgebase"]:not(.login) {
    --mtd-primary: var(--mtd-scheme-primary, #1769ff);
    --mtd-primary-soft: color-mix(in srgb, var(--mtd-primary) 10%, #ffffff);
    --mtd-warning: var(--warning, #c96f16);
    --mtd-ink: #132238;
    --mtd-text: #4a5d73;
    --mtd-muted: #64748b;
    --mtd-line: #d9e2ec;
    --mtd-surface: #ffffff;
    --mtd-surface-soft: #f5f8fc;
}

body.dark-mode[data-templatefile="updates"]:not(.login),
body.dark-mode[data-templatefile="update"]:not(.login),
body.dark-mode[data-templatefile^="knowledgebase"]:not(.login) {
    --mtd-primary:color-mix(in srgb, var(--mtd-scheme-primary, #1769ff) 58%, #ffffff);
    --mtd-primary-soft:color-mix(in srgb, var(--mtd-scheme-primary, #1769ff) 22%, #132137);
    --mtd-warning:#f3b45b;
    --mtd-ink: #f8fbff;
    --mtd-text:#c7d4e4;
    --mtd-muted:#a9b9cc;
    --mtd-line: #34445c;
    --mtd-surface: #101d31;
    --mtd-surface-soft:#17263b;
}
body[data-templatefile="updates"]:not(.login) .annoucements,
body[data-templatefile="update"]:not(.login) .mtd-update-article,
body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-document {
    color: var(--mtd-ink);
}

body[data-templatefile="updates"]:not(.login) .annoucements {
    padding: clamp(24px, 3vw, 40px) !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 32px);
    margin: 0 !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:first-child {
    grid-column: 1 / -1;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item {
    display: flex;
    width: 100% !important;
    max-width: none !important;
    min-height: 260px;
    flex-direction: column;
    margin: 0 !important;
    padding: clamp(24px, 3vw, 38px) !important;
    border: 0 !important;
    border-top: 4px solid var(--mtd-primary) !important;
    border-bottom: 1px solid var(--mtd-line) !important;
    border-radius: 4px !important;
    color: var(--mtd-ink) !important;
    background: var(--mtd-surface) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mtd-primary) 48%, var(--mtd-line)) !important;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.13) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .announcement-date {
    align-self: flex-start;
    margin: 0 0 22px !important;
    padding: 7px 11px !important;
    border: 1px solid color-mix(in srgb, var(--mtd-primary) 24%, var(--mtd-line));
    border-radius: 999px;
    color: var(--mtd-primary) !important;
    background: var(--mtd-primary-soft) !important;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.035em;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item h2 {
    margin: 0 0 17px !important;
    color: var(--mtd-ink) !important;
    font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
    line-height: 1.24;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item h2 a {
    color: inherit !important;
    text-decoration: none !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-body,
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-body p {
    margin: 0 !important;
    color: var(--mtd-text) !important;
    font-size: 1rem;
    line-height: 1.72;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-body p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer {
    display: flex;
    justify-content: flex-start;
    margin-top: auto !important;
    padding-top: clamp(28px, 3vw, 38px);
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .mtd-announcement-actions,
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-group {
    display: flex !important;
    width: auto !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-link,
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-primary {
    display: inline-flex !important;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 15px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-link {
    color: var(--mtd-primary) !important;
    border: 0 !important;
    background: transparent !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-primary {
    color: #ffffff !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child {
    display: grid;
    min-height: 330px;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    column-gap: clamp(30px, 5vw, 72px);
    align-content: start;
    padding: clamp(30px, 4vw, 52px) !important;
    border-top-width: 6px !important;
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.1) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .announcement-date {
    grid-column: 1 / -1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child h2 {
    grid-column: 1;
    font-size: clamp(1.85rem, 3.5vw, 3rem) !important;
    letter-spacing: -0.025em;
    line-height: 1.08;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .annuncement-body {
    grid-column: 2;
    grid-row: 2 / span 2;
    padding-left: clamp(22px, 3vw, 38px);
    border-left: 1px solid var(--mtd-line);
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .annuncement-footer {
    grid-column: 1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
    column-gap: clamp(26px, 4vw, 58px);
    align-content: start;
    grid-column: 1 / -1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .announcement-date {
    grid-column: 1 / -1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) h2 {
    grid-column: 1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .annuncement-body {
    grid-column: 2;
    grid-row: 2 / span 2;
    padding-left: clamp(20px, 3vw, 34px);
    border-left: 1px solid var(--mtd-line);
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .annuncement-footer {
    grid-column: 1;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav {
    margin: clamp(34px, 4.5vw, 54px) 0 clamp(8px, 1.5vw, 18px) !important;
    padding: 0 clamp(6px, 1vw, 14px) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item > .page-link {
    min-width: 42px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--mtd-ink) !important;
    background: transparent !important;
    font-weight: 850;
    line-height: 1;
    text-decoration: none !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item:not(.disabled):not(.active) > a.page-link:hover,
body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item:not(.disabled):not(.active) > a.page-link:focus-visible {
    color: var(--mtd-ink) !important;
    background: var(--mtd-primary-soft) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item.active > .page-link,
body.dark-mode[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item.active > .page-link {
    color:var(--mtd-ink, #ffffff) !important;
    -webkit-text-fill-color:#ffffff !important;
    border-color:color-mix(in srgb, var(--mtd-primary) 40%, #071629 60%) !important;
    background:color-mix(in srgb, var(--mtd-primary) 40%, #071629 60%) !important;
    box-shadow:0 8px 20px color-mix(in srgb, var(--mtd-primary) 20%, transparent) !important;
    text-shadow:none !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > nav .pagination > .page-item.disabled > .page-link {
    color: var(--mtd-muted) !important;
    background: transparent !important;
    opacity: 0.62;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-search-section {
    margin-bottom: clamp(22px, 3vw, 38px);
}

body[data-templatefile^="knowledgebase"]:not(.login) .search-card {
    padding: clamp(20px, 2.6vw, 32px) !important;
    border: 1px solid var(--mtd-line) !important;
    border-radius: 14px !important;
    background: var(--mtd-surface) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .home-kb-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-search-control {
    position: relative;
    min-width: 0;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-search-control > i {
    position: absolute;
    z-index: 2;
    top: 50% !important;
    left: 20px !important;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    color: var(--mtd-primary) !important;
    line-height: 1;
    pointer-events: none;
}

body[data-templatefile^="knowledgebase"]:not(.login) .home-kb-search .form-control {
    width: 100%;
    min-height: 58px;
    padding: 12px 18px 12px 52px !important;
    border: 1px solid var(--mtd-line) !important;
    border-radius: 9px !important;
    color: var(--mtd-ink) !important;
    background: var(--mtd-surface-soft) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .home-kb-search .btn {
    min-width: 120px;
    min-height: 58px;
    border-radius: 9px !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-search-control:focus-within > i {
    color: var(--mtd-ink) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-section {
    margin-top: clamp(28px, 4vw, 52px);
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-section > h2 {
    margin: 0 0 20px !important;
    color: var(--mtd-ink) !important;
    font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
    font-weight: 850;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kbcat > .row,
body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-article-grid {
    display: grid;
    gap: 18px;
    margin: 0 !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kbcat > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-article-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-templatefile="knowledgebase"]:not(.login) .mtd-kb-popular-section,
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-related-section {
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-related-section > h2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-related-section > h2::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--mtd-line);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-related-grid > .kb-article:only-child .kb-card-main {
    grid-template-columns: 50px minmax(0, 1fr) auto;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kbcat > .row > [class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0 !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-article {
    position: relative;
    min-width: 0;
    min-height: 150px;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--mtd-line) !important;
    border-radius: 12px !important;
    color: var(--mtd-ink) !important;
    background: var(--mtd-surface) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-article:hover,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mtd-primary) 48%, var(--mtd-line)) !important;
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-main {
    display: grid;
    min-height: 150px;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 17px;
    align-items: start;
    padding: 26px !important;
    color: inherit !important;
    text-decoration: none !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-icon {
    display: inline-flex;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--mtd-primary) !important;
    background: var(--mtd-primary-soft) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-copy {
    display: grid;
    gap: 9px;
    min-width: 0;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-copy strong {
    color: var(--mtd-ink) !important;
    font-size: 1.08rem;
    line-height: 1.35;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--mtd-text) !important;
    font-size: 0.92rem;
    line-height: 1.62;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-count {
    display: inline-flex;
    min-width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--mtd-primary) !important;
    background: var(--mtd-primary-soft) !important;
    font-size: 0.78rem;
    font-weight: 850;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-arrow {
    align-self: center;
    color: var(--mtd-primary) !important;
}

body[data-templatefile^="knowledgebase"]:not(.login) .kb-article > .control-edit-link {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 6px;
    color: var(--mtd-primary) !important;
    background: var(--mtd-surface-soft) !important;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none !important;
}

body[data-templatefile="knowledgebase-category"]:not(.login) .mtd-kb-category-intro {
    padding: clamp(22px, 3vw, 34px);
    border-left: 4px solid var(--mtd-primary);
    border-radius: 0 12px 12px 0;
    background: var(--mtd-surface);
}

body[data-templatefile="knowledgebase-category"]:not(.login) .mtd-kb-category-intro p {
    max-width: 78ch;
    margin: 0 !important;
    color: var(--mtd-text) !important;
    font-size: 1.03rem;
    line-height: 1.72;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content::before,
body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content::before {
    content: "";
    display: block;
    height: 12px;
    margin: calc(clamp(32px, 5vw, 68px) * -1) calc(clamp(32px, 5vw, 68px) * -1) clamp(34px, 5vw, 54px);
    background: linear-gradient(90deg, var(--mtd-primary), color-mix(in srgb, var(--mtd-primary) 48%, var(--mtd-surface)), var(--mtd-primary));
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content > p:first-child,
body[data-templatefile="update"]:not(.login) .article-content > p:first-child {
    margin: 0 0 34px !important;
    padding: 20px 22px;
    border-left: 4px solid var(--mtd-primary);
    border-radius: 0 10px 10px 0;
    color: var(--mtd-text) !important;
    background: var(--mtd-surface-soft) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content h2,
body[data-templatefile="update"]:not(.login) .article-content h2 {
    margin: 42px 0 16px !important;
    padding-top: 22px;
    border-top: 1px solid var(--mtd-line);
    color: var(--mtd-ink) !important;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
    line-height: 1.28;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content p,
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content li,
body[data-templatefile="update"]:not(.login) .article-content p,
body[data-templatefile="update"]:not(.login) .article-content li {
    color: var(--mtd-text) !important;
    font-size: 1.02rem;
    line-height: 1.78;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content li,
body[data-templatefile="update"]:not(.login) .article-content li {
    margin-bottom: 8px;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content li::marker,
body[data-templatefile="update"]:not(.login) .article-content li::marker {
    color: var(--mtd-primary);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 24px;
    border: 1px solid var(--mtd-line);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    color: var(--mtd-muted) !important;
    background: var(--mtd-surface-soft) !important;
    border-color: var(--mtd-line) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .kb-article-details {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .rate-article {
    margin-top: 20px;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .rate-article .MTD-card {
    padding: 22px 24px !important;
    border: 1px solid var(--mtd-line) !important;
    border-radius: 12px !important;
    background: var(--mtd-surface) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .rate-article form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body[data-templatefile^="knowledgebase"]:not(.login) .mtd-native-page-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

body[data-templatefile^="knowledgebase"]:not(.login) section[data-menu-item-name="Support Knowledgebase Tag Cloud"] .mtd-sidebar-body {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body[data-templatefile^="knowledgebase"]:not(.login) section[data-menu-item-name="Support Knowledgebase Tag Cloud"] .mtd-sidebar-body a {
    display: inline-flex;
    margin: 0 !important;
    padding: 6px 9px;
    border: 1px solid var(--mtd-line);
    border-radius: 999px;
    color: var(--mtd-primary) !important;
    background: var(--mtd-surface-soft);
    font-size: 0.76rem !important;
    line-height: 1.2;
    text-decoration: none !important;
}

/* Author-selectable native presentation templates. */
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--feature,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--explainer {
    border-top-color: var(--mtd-primary) !important;
    background-image: linear-gradient(135deg, var(--mtd-primary-soft), transparent 54%) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--brief,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--procedure {
    border-top-color: var(--mtd-primary) !important;
    border-left: 5px solid var(--mtd-primary) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--community,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--policy {
    border-top-color: color-mix(in srgb, var(--mtd-primary) 72%, #9a5a26) !important;
    background-image:
        repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--mtd-primary) 6%, transparent) 18px 20px),
        linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary) 7%, var(--mtd-surface)), var(--mtd-surface) 58%) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--notice,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--security {
    border-top-color: var(--mtd-warning) !important;
    border-left: 5px solid var(--mtd-warning) !important;
    background-image: linear-gradient(135deg, color-mix(in srgb, var(--mtd-warning) 10%, var(--mtd-surface)), var(--mtd-surface) 58%) !important;
}

.mtd-native-layout--feature .article-content::before,

.mtd-native-layout--explainer .article-content::before,
.mtd-native-layout--community .article-content::before,
.mtd-native-layout--policy .article-content::before,
.mtd-native-layout--brief .article-content::before,
.mtd-native-layout--procedure .article-content::before,
.mtd-native-layout--notice .article-content::before,
.mtd-native-layout--security .article-content::before {
    height: clamp(130px, 18vw, 220px) !important;
    background-color: var(--mtd-primary-soft) !important;
    background-image:
        radial-gradient(circle at 82% 24%, color-mix(in srgb, var(--mtd-primary) 38%, transparent) 0 8%, transparent 9%),
        linear-gradient(125deg, color-mix(in srgb, var(--mtd-primary) 92%, #08111f), color-mix(in srgb, var(--mtd-primary) 46%, var(--mtd-surface))) !important;
}

/* Structured article elements shared by Knowledgebase and Updates. */
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-meta,
body[data-templatefile="update"]:not(.login) .article-content .news-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 0 0 30px;
    padding: 14px 16px;
    border: 1px solid var(--mtd-line);
    border-radius: 9px;
    color: var(--mtd-muted) !important;
    background: var(--mtd-surface-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-meta > p,
body[data-templatefile="update"]:not(.login) .article-content .news-facts > p {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    margin: 0 !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-meta strong,
body[data-templatefile="update"]:not(.login) .article-content .news-facts strong {
    color: var(--mtd-ink) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-summary,
body[data-templatefile="update"]:not(.login) .article-content .news-deck {
    margin: 0 0 34px !important;
    color: var(--mtd-ink) !important;
    font-size: clamp(1.12rem, 1.7vw, 1.32rem) !important;
    font-weight: 650;
    line-height: 1.62 !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note,
body[data-templatefile="update"]:not(.login) .article-content .news-notice {
    margin: 30px 0;
    padding: 22px 24px;
    border: 1px solid var(--mtd-line);
    border-left: 5px solid var(--mtd-primary);
    border-radius: 0 10px 10px 0;
    color: var(--mtd-text) !important;
    background: var(--mtd-surface-soft);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note--warning,
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note--safety,
body[data-templatefile="update"]:not(.login) .article-content .news-notice--urgent,
body[data-templatefile="update"]:not(.login) .article-content .news-notice--urgent {
    border-left-color: var(--mtd-warning);
    background: color-mix(in srgb, var(--mtd-warning) 9%, var(--mtd-surface));
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note > :first-child,
body[data-templatefile="update"]:not(.login) .article-content .news-notice > :first-child {
    margin-top: 0 !important;
    color: var(--mtd-ink) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note > :last-child,
body[data-templatefile="update"]:not(.login) .article-content .news-notice > :last-child {
    margin-bottom: 0 !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-grid,
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-steps,
body[data-templatefile="update"]:not(.login) .article-content .news-highlights,
body[data-templatefile="update"]:not(.login) .article-content .news-highlights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0;
    padding: 0;
    list-style: none;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-grid > *,
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-steps > *,
body[data-templatefile="update"]:not(.login) .article-content .news-highlights > *,
body[data-templatefile="update"]:not(.login) .article-content .news-highlights > * {
    margin: 0 !important;
    padding: 20px;
    border: 1px solid var(--mtd-line);
    border-radius: 9px;
    color: var(--mtd-text) !important;
    background: var(--mtd-surface-soft);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content table,
body[data-templatefile="update"]:not(.login) .article-content table {
    width: 100%;
    margin: 28px 0;
    border-collapse: collapse;
    color: var(--mtd-text) !important;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content th,
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content td,
body[data-templatefile="update"]:not(.login) .article-content th,
body[data-templatefile="update"]:not(.login) .article-content td {
    padding: 14px 16px;
    border: 1px solid var(--mtd-line);
    text-align: left;
    vertical-align: top;
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content th,
body[data-templatefile="update"]:not(.login) .article-content th {
    color: var(--mtd-ink) !important;
    background: var(--mtd-surface-soft);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-sources,
body[data-templatefile="update"]:not(.login) .article-content .news-links {
    margin: 24px 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mtd-line);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-sources li,
body[data-templatefile="update"]:not(.login) .article-content .news-links li {
    margin: 0;
    padding: 14px 2px;
    border-bottom: 1px solid var(--mtd-line);
}

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-revision,
body[data-templatefile="update"]:not(.login) .article-content .news-revision {
    margin-top: 38px;
    padding-top: 18px;
    border-top: 1px solid var(--mtd-line);
    color: var(--mtd-muted) !important;
    font-size: 0.84rem !important;
}

.mtd-native-layout--brief .article-content,

.mtd-native-layout--procedure .article-content {
    border-top: 5px solid var(--mtd-primary) !important;
}

.mtd-native-layout--community .article-content::before,

.mtd-native-layout--policy .article-content::before {
    background-image:
        repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb, var(--mtd-primary) 22%, transparent) 16px 18px),
        linear-gradient(125deg, color-mix(in srgb, var(--mtd-primary) 82%, #251506), color-mix(in srgb, var(--mtd-primary) 34%, var(--mtd-surface))) !important;
}

.mtd-native-layout--notice .article-content,

.mtd-native-layout--security .article-content {
    border-top: 5px solid var(--mtd-warning, #c58a16) !important;
}

.mtd-native-layout--notice .article-content::before,

.mtd-native-layout--security .article-content::before {
    background-image:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 12px, transparent 12px 24px),
        linear-gradient(120deg, color-mix(in srgb, var(--mtd-warning, #c58a16) 72%, #1f2937), color-mix(in srgb, var(--mtd-warning, #c58a16) 34%, var(--mtd-surface))) !important;
}

body.dark-mode[data-templatefile="updates"]:not(.login) .annoucements .annuncement-footer .btn-link {
    color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, var(--mtd-ink, #f8fafc)) !important;
    background:var(--mtd-primary-soft) !important;
}

/* Update preview imagery. Images are optional; presentation-template art remains the fallback. */
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-announcement-has-media {
    overflow: hidden;
}

body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media {
    position: relative;
    display: block;
    width: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    overflow: hidden;
    margin: calc(clamp(24px, 3vw, 38px) * -1) calc(clamp(24px, 3vw, 38px) * -1) clamp(24px, 3vw, 34px);
    border-bottom: 1px solid var(--mtd-line);
    background:
        linear-gradient(135deg, var(--mtd-primary-soft), var(--mtd-surface-soft));
    isolation: isolate;
}

body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media img,
body[data-templatefile="update"]:not(.login) .mtd-update-lead-media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
}

body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media img {
    transition: transform 240ms ease;
}

body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item:hover .mtd-update-card-media img,
body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media:focus-visible img {
    transform: scale(1.025);
}

body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media:focus-visible {
    z-index: 2;
    outline: 3px solid var(--mtd-primary);
    outline-offset: -3px;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media {
    grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "media date"
        "media title"
        "media body"
        "media footer";
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .mtd-update-card-media {
    grid-area: media;
    align-self: stretch;
    min-height: 100%;
    aspect-ratio: auto;
    margin: calc(clamp(30px, 4vw, 52px) * -1) 0 calc(clamp(30px, 4vw, 52px) * -1) calc(clamp(30px, 4vw, 52px) * -1);
    border-right: 1px solid var(--mtd-line);
    border-bottom: 0;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .announcement-date,
body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .announcement-date {
    grid-area: date;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > h2,
body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > h2 {
    grid-area: title;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > h2 {
    font-size: clamp(1.65rem, 2.8vw, 2.5rem) !important;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .annuncement-body,
body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .annuncement-body {
    grid-area: body;
    padding-left: 0;
    border-left: 0;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .annuncement-footer,
body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .annuncement-footer {
    grid-area: footer;
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media {
    grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
        "media date"
        "media title"
        "media body"
        "media footer";
}

body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .mtd-update-card-media {
    grid-area: media;
    align-self: stretch;
    min-height: 100%;
    aspect-ratio: auto;
    margin: calc(clamp(24px, 3vw, 38px) * -1) 0 calc(clamp(24px, 3vw, 38px) * -1) calc(clamp(24px, 3vw, 38px) * -1);
    border-right: 1px solid var(--mtd-line);
    border-bottom: 0;
}

body[data-templatefile="update"]:not(.login) .mtd-update-lead-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--mtd-line);
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(135deg, var(--mtd-primary-soft), var(--mtd-surface-soft));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
}

body[data-templatefile="update"]:not(.login) .mtd-update-has-media .article-content {
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
}

body[data-templatefile="update"]:not(.login) .mtd-update-has-media .article-content::before {
    display: none !important;
}

@media (max-width: 991.98px) {
    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .announcement-date,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child h2,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .annuncement-body,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .annuncement-footer,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .announcement-date,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) h2,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .annuncement-body,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .annuncement-footer {
        grid-column: 1;
        grid-row: auto;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child .annuncement-body,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even) .annuncement-body {
        padding-left: 0;
        border-left: 0;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media {
        grid-template-rows: auto;
        grid-template-areas:
            "media"
            "date"
            "title"
            "body"
            "footer";
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .mtd-update-card-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin: calc(clamp(30px, 4vw, 52px) * -1) calc(clamp(30px, 4vw, 52px) * -1) clamp(28px, 3.5vw, 42px);
        border-right: 0;
        border-bottom: 1px solid var(--mtd-line);
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .mtd-update-card-media {
        min-height: 0;
        aspect-ratio: 16 / 9;
        margin: calc(clamp(24px, 3vw, 38px) * -1) calc(clamp(24px, 3vw, 38px) * -1) clamp(24px, 3vw, 34px);
        border-right: 0;
        border-bottom: 1px solid var(--mtd-line);
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .announcement-date,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .announcement-date {
        grid-area: date;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > h2,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > h2 {
        grid-area: title;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .annuncement-body,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .annuncement-body {
        grid-area: body;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child.mtd-announcement-has-media > .annuncement-footer,
    body[data-templatefile="updates"]:not(.login) .annoucements > .row:has(> .annuncement-item:nth-child(3)) > .annuncement-item:last-child:nth-child(even).mtd-announcement-has-media > .annuncement-footer {
        grid-area: footer;
    }
}

@media (max-width: 767.98px) {
    body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item {
        min-height: 0;
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row,
    body[data-templatefile^="knowledgebase"]:not(.login) .kbcat > .row,
    body[data-templatefile^="knowledgebase"]:not(.login) .mtd-kb-article-grid,
    body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-grid,
    body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-steps,
    body[data-templatefile="update"]:not(.login) .article-content .news-highlights,
    body[data-templatefile="update"]:not(.login) .article-content .news-highlights {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-templatefile="updates"]:not(.login) .annoucements > .row > .annuncement-item:first-child {
        grid-column: auto;
    }

    body[data-templatefile^="knowledgebase"]:not(.login) .home-kb-search {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-templatefile^="knowledgebase"]:not(.login) .home-kb-search .btn {
        width: 100%;
    }

    body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-main {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 22px !important;
    }

    body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-count,
    body[data-templatefile^="knowledgebase"]:not(.login) .kb-card-arrow {
        grid-column: 2;
        justify-self: start;
    }

    body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content,
    body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content {
        padding: 28px 22px !important;
    }

    body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content::before,
    body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content::before {
        margin: -28px -22px 30px;
    }

    body[data-templatefile="knowledgebase-article"]:not(.login) .article-tools,
    body[data-templatefile="knowledgebase-article"]:not(.login) .rate-article form {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-templatefile="updates"]:not(.login) .annoucements .mtd-update-card-media img {
        transition: none;
    }
}
/* End native Knowledgebase and Updates editorial system */

/* Serepok Updates: responsive editorial/news card system. */
body[data-templatefile="updates"]:not(.login) .mtd-news-index {
    padding: clamp(18px, 2.5vw, 34px) !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(20px, 2.4vw, 30px);
    margin: 0 !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card {
    --mtd-news-accent: var(--mtd-primary);
    position: relative;
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    min-height: 0 !important;
    grid-column: auto !important;
    flex-direction: column;
    align-self: start;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mtd-news-accent) 18%, var(--mtd-line)) !important;
    border-radius: 16px !important;
    color: var(--mtd-ink) !important;
    background: var(--mtd-surface) !important;
    background-image: none !important;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.09) !important;
    transform: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--feature,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--brief,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--community,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--notice {
    border: 1px solid color-mix(in srgb, var(--mtd-news-accent) 18%, var(--mtd-line)) !important;
    background: var(--mtd-surface) !important;
    background-image: none !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--brief {
    --mtd-news-accent: color-mix(in srgb, var(--mtd-primary) 72%, #315f7a);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--community {
    --mtd-news-accent: color-mix(in srgb, var(--mtd-primary) 38%, #b66b36);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--notice {
    --mtd-news-accent: var(--mtd-warning);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:hover,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:focus-within {
    border-color: color-mix(in srgb, var(--mtd-news-accent) 48%, var(--mtd-line)) !important;
    box-shadow: 0 24px 52px rgba(15, 23, 42, 0.14) !important;
    transform: translateY(-3px);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid > .mtd-news-card:first-child {
    padding: 0 !important;
    border-top-width: 1px !important;
}

body.dark-mode[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card {
    box-shadow:0 18px 42px rgba(0, 0, 0, 0.32) !important;
}

body.dark-mode[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:hover,
body.dark-mode[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:focus-within {
    box-shadow:0 26px 58px rgba(0, 0, 0, 0.44) !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card > .mtd-news-card__media {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    align-self: auto !important;
    grid-area: auto !important;
    flex: 0 0 auto;
    overflow: hidden;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mtd-news-accent) 20%, var(--mtd-line)) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--mtd-news-accent) 8%, var(--mtd-surface-soft));
    isolation: isolate;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid > .mtd-news-card:first-child.mtd-announcement-has-media > .mtd-news-card__media,
body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid:has(> .mtd-news-card:nth-child(3)) > .mtd-news-card:last-child:nth-child(even).mtd-announcement-has-media > .mtd-news-card__media {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    align-self: auto !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--mtd-news-accent) 20%, var(--mtd-line)) !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card > .mtd-news-card__media::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: auto 0 0;
    height: 3px;
    background: var(--mtd-news-accent);
    opacity: 0.88;
    pointer-events: none;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__media img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: center;
    transform: scale(1.001);
    transition: transform 320ms ease;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:hover .mtd-news-card__media img,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:focus-within .mtd-news-card__media img {
    transform: scale(1.025);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__placeholder-art {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 24%, color-mix(in srgb, var(--mtd-news-accent) 24%, transparent) 0 9%, transparent 9.5%),
        radial-gradient(circle at 78% 24%, transparent 0 15%, color-mix(in srgb, var(--mtd-news-accent) 12%, transparent) 15.5% 16.5%, transparent 17%),
        linear-gradient(130deg, color-mix(in srgb, var(--mtd-news-accent) 14%, var(--mtd-surface-soft)), var(--mtd-surface-soft) 62%);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__placeholder-art::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 13%;
    width: 27%;
    aspect-ratio: 1;
    border: clamp(8px, 1.3vw, 15px) solid color-mix(in srgb, var(--mtd-news-accent) 22%, transparent);
    border-radius: 24%;
    transform: rotate(45deg);
    box-shadow: 0 0 0 clamp(8px, 1.3vw, 15px) color-mix(in srgb, var(--mtd-news-accent) 7%, transparent);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__placeholder-art::after {
    content: "";
    position: absolute;
    right: 12%;
    bottom: 21%;
    width: 38%;
    height: clamp(4px, 0.5vw, 7px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mtd-news-accent) 28%, transparent);
    box-shadow:
        0 clamp(13px, 1.5vw, 20px) 0 color-mix(in srgb, var(--mtd-news-accent) 16%, transparent),
        0 clamp(26px, 3vw, 40px) 0 color-mix(in srgb, var(--mtd-news-accent) 10%, transparent);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    padding: clamp(21px, 2.2vw, 29px) !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__date {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--mtd-muted) !important;
    background: transparent !important;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.105em;
    line-height: 1.3;
    text-transform: uppercase;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__date::before {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--mtd-news-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mtd-news-accent) 13%, transparent);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__title,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:first-child .mtd-news-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 13px !important;
    color: var(--mtd-ink) !important;
    font-size: clamp(1.2rem, 1.55vw, 1.48rem) !important;
    font-weight: 820;
    letter-spacing: -0.018em;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid > .mtd-news-card:first-child .mtd-news-card__title {
    font-size: clamp(1.32rem, 1.9vw, 1.72rem) !important;
    letter-spacing: -0.018em;
    line-height: 1.22;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__title a {
    color: inherit !important;
    text-decoration: none !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__title a:hover {
    color: var(--mtd-news-accent) !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__title a:focus-visible,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__read:focus-visible,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__edit:focus-visible {
    outline: 3px solid var(--mtd-news-accent) !important;
    outline-offset: 3px;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__summary,
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__summary p {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--mtd-text) !important;
    font-size: 0.96rem;
    line-height: 1.65;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__summary p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__footer {
    display: flex;
    justify-content: flex-start;
    margin: 20px 0 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--mtd-line);
    visibility: visible !important;
    opacity: 1 !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__actions {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__footer .mtd-news-card__read,
body.dark-mode[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__footer .mtd-news-card__read {
    display:inline-flex !important;
    min-height:44px;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:0 !important;
    padding:10px 16px !important;
    border:1px solid var(--mtd-ink) !important;
    border-radius:999px !important;
    color:var(--mtd-surface) !important;
    -webkit-text-fill-color:var(--mtd-surface) !important;
    background:var(--mtd-ink) !important;
    font-size:0.86rem;
    font-weight:820;
    line-height:1;
    text-decoration:none !important;
    box-shadow:none !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__read i {
    color: inherit !important;
    transition: transform 180ms ease;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__read:hover i {
    transform: translateX(3px);
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__footer .mtd-news-card__edit {
    display: inline-flex !important;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0 0 0 auto !important;
    padding: 8px 12px !important;
    border: 1px solid var(--mtd-line) !important;
    border-radius: 999px !important;
    color: var(--mtd-ink) !important;
    -webkit-text-fill-color: var(--mtd-ink) !important;
    background: var(--mtd-surface-soft) !important;
    font-size: 0.78rem;
    font-weight: 760;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none !important;
}

body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-pagination {
    margin-top: clamp(30px, 4vw, 48px) !important;
}

@media (min-width: 768px) {
    body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card--featured {
        grid-column: 1 / -1 !important;
    }
}

@media (min-width: 1200px) {
    body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card--featured {
        display: grid !important;
        grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.78fr) !important;
        grid-template-rows: auto !important;
        grid-column: 1 / -1 !important;
        align-items: start;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card--featured > .mtd-news-card__media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: start !important;
        border-right: 1px solid color-mix(in srgb, var(--mtd-news-accent) 20%, var(--mtd-line)) !important;
        border-bottom: 0 !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid > .mtd-news-card:first-child.mtd-news-card--featured.mtd-announcement-has-media > .mtd-news-card__media {
        border-right: 1px solid color-mix(in srgb, var(--mtd-news-accent) 20%, var(--mtd-line)) !important;
        border-bottom: 0 !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card--featured > .mtd-news-card__content {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: stretch;
        padding: clamp(26px, 3vw, 40px) !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index > .mtd-news-grid > .mtd-news-card:first-child.mtd-news-card--featured .mtd-news-card__title {
        font-size: clamp(1.6rem, 2.15vw, 2.2rem) !important;
        line-height: 1.17;
    }
}

@media (max-width: 575.98px) {
    body[data-templatefile="updates"]:not(.login) .mtd-news-index {
        padding: 16px 0 !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__content {
        padding: 20px !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__footer .mtd-news-card__edit {
        margin-left: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__media img,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__read i {
        transition: none !important;
    }

    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:hover,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:focus-within,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:hover .mtd-news-card__media img,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card:focus-within .mtd-news-card__media img,
    body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__read:hover i {
        transform: none !important;
    }
}
/* End Serepok Updates editorial/news card system. */
/* Serepok Markdown editor: accessible tooltips and centered help guide. */
.tooltip.mtd-editor-tooltip {
    z-index: 1095;
    pointer-events: none;
}

.tooltip.mtd-editor-tooltip .tooltip-inner {
    max-width: 240px;
    padding: 8px 11px;
    color: #ffffff;
    background: #102a43;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.tooltip.mtd-editor-tooltip.bs-tooltip-top .arrow::before,
.tooltip.mtd-editor-tooltip.top .tooltip-arrow {
    border-top-color: #102a43;
}

body.mtd-markdown-guide-open {
    overflow: hidden;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal {
    padding-right: 0 !important;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-dialog.mtd-markdown-guide-dialog {
    display: flex;
    width: auto;
    max-width: 960px;
    min-height: calc(100vh - 3rem);
    margin: 1.5rem auto;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
}

@supports (height: 100dvh) {
    }

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-content {
    display: flex;
    width: 100%;
    max-height: calc(100vh - 3rem);
    margin: 0 auto;
    overflow: hidden;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #d9e4ef;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

@supports (height: 100dvh) {
    }

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header,
body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-footer {
    flex: 0 0 auto;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header {
    display: flex;
    min-height: 74px;
    padding: 18px 22px;
    align-items: center;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 11%, transparent), transparent 58%),
        #f8fbff;
    border-bottom: 1px solid #e1eaf3;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-title {
    margin: 0;
    color: #102a43;
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 800;
    line-height: 1.25;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header .close {
    display: inline-flex;
    width: 38px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: #52677d;
    background: #ffffff;
    border: 1px solid #dbe5ef;
    border-radius: 9px;
    opacity: 1;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header .close:hover,
body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header .close:focus-visible {
    color: var(--mtd-scheme-primary);
    border-color: color-mix(in srgb, var(--mtd-scheme-primary) 36%, #dbe5ef);
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-body {
    min-height: 0;
    max-height: none;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    background: #f4f7fa;
    overscroll-behavior: contain;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card {
    min-width: 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #dfe8f1;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card-wide {
    grid-column: 1 / -1;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card-title {
    margin: 0 0 10px;
    color: #102a43;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-example {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 13px 14px;
    overflow-x: auto;
    color: #334e68;
    background: #f6f9fc;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-footer {
    min-height: 64px;
    padding: 12px 22px;
    background: #ffffff;
    border-top: 1px solid #e1eaf3;
}

body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-footer .modal-submit {
    display: none !important;
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-content,
body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-footer {
    color:var(--mtd-text,#e5edf7);
    background:#0c1b2b;
    border-color:rgba(125, 161, 199, 0.24);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header {
    background:linear-gradient(90deg, color-mix(in srgb, var(--mtd-scheme-primary) 18%, transparent), transparent 58%),
        #10243a;
    border-color:rgba(125, 161, 199, 0.24);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-title,
body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card-title,
body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-body pre strong {
    color:var(--mtd-ink,#f8fafc);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header .close {
    color:#c7d5e5;
    background:#132940;
    border-color:rgba(125, 161, 199, 0.28);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-body {
    background:#091725;
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card {
    background:var(--mtd-surface-soft, #10243a);
    border-color:rgba(125, 161, 199, 0.23);
    box-shadow:0 10px 28px rgba(0, 0, 0, 0.22);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-example {
    color:#d8e5f3;
    background:#081522;
    border-color:rgba(125, 161, 199, 0.24);
}

body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-body pre em,
body.dark-mode:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-title-subtitle {
    color:#aebdd0;
}

body:not(.login) .mtd-ticket-message-field .md-header .btn:focus-visible,
body:not(.login) .mtd-ticket-message-field .md-control:focus-visible,
body:not(.login) .mtd-ticket-message-field .exit-fullscreen:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mtd-scheme-primary) 36%, transparent);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-dialog.mtd-markdown-guide-dialog {
        min-height: calc(100vh - 20px);
        margin: 10px auto;
        padding: 0 10px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-content {
        max-height: calc(100vh - 20px);
    }

    @supports (height: 100dvh) {
        body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-dialog.mtd-markdown-guide-dialog {
            min-height: calc(100dvh - 20px);
        }

        body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-content {
            max-height: calc(100dvh - 20px);
        }
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card-wide {
        grid-column: auto;
    }
}

@media (max-width: 479.98px) {
    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header,
    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-footer {
        padding: 12px 14px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-header {
        min-height: 68px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .modal-body {
        padding: 12px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-grid {
        gap: 10px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-card {
        padding: 14px;
    }

    body:not(.login) #modalAjax.mtd-markdown-guide-modal .mtd-markdown-guide-example {
        padding: 11px 12px;
        font-size: 11px;
    }
}

/* ==========================================================================
 * Presentation templates v2 — article hero, template identities, content
 * blocks, reading aids and motion. Appended after the original template
 * rules and scoped the same way so it wins without touching them.
 * ========================================================================== */
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document,
body[data-templatefile="update"]:not(.login) .mtd-update-article {
    --mtd-tpl-a: var(--mtd-primary);
    --mtd-tpl-b: color-mix(in srgb, var(--mtd-primary) 55%, #0b1220);
    --mtd-tpl-ink: #ffffff;
    --mtd-tpl-soft: var(--mtd-primary-soft);
    max-width: 1000px;
    margin: 0 auto;
}
body:not(.login) .mtd-kb-document.mtd-native-layout--policy, body:not(.login) .mtd-update-article.mtd-native-layout--community{ --mtd-tpl-a: #b0642a; --mtd-tpl-b: #4a2a12; --mtd-tpl-soft: color-mix(in srgb, #b0642a 10%, var(--mtd-surface)); }
body:not(.login) .mtd-kb-document.mtd-native-layout--security, body:not(.login) .mtd-update-article.mtd-native-layout--notice{ --mtd-tpl-a: var(--mtd-warning, #c96f16); --mtd-tpl-b: #5b2d0a; --mtd-tpl-soft: color-mix(in srgb, var(--mtd-warning, #c96f16) 12%, var(--mtd-surface)); }
body:not(.login) .mtd-kb-document.mtd-native-layout--procedure, body:not(.login) .mtd-update-article.mtd-native-layout--brief{ --mtd-tpl-b: color-mix(in srgb, var(--mtd-primary) 70%, #04182b); }
body:not(.login) .mtd-kb-document.mtd-native-layout--explainer, body:not(.login) .mtd-update-article.mtd-native-layout--feature{ --mtd-tpl-b: color-mix(in srgb, var(--mtd-primary) 40%, #14082b); }

/* the old decorative band inside the content is replaced by the hero */
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content::before,
body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content::before,
body:not(.login) .mtd-native-layout .article-content::before { content: none !important; display: none !important; }

/* ---- hero ---- */
body:not(.login) .mtd-article-hero {
    position: relative;
    display: grid;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid var(--mtd-line);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    color: var(--mtd-tpl-ink);
    background: linear-gradient(118deg, var(--mtd-tpl-a) 0%, var(--mtd-tpl-b) 100%);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09);
    isolation: isolate;
}
body:not(.login) .mtd-article-hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
body:not(.login) .mtd-article-hero__art span { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 65%); animation: mtdFloat 14s ease-in-out infinite; }
body:not(.login) .mtd-article-hero__art span:nth-child(1) { right: -60px; top: -90px; width: 260px; height: 260px; }
body:not(.login) .mtd-article-hero__art span:nth-child(2) { right: 140px; bottom: -120px; width: 200px; height: 200px; animation-delay: -5s; }
body:not(.login) .mtd-article-hero__art span:nth-child(3) { left: 38%; top: -70px; width: 120px; height: 120px; animation-delay: -9s; opacity: .7; }
body:not(.login) .mtd-native-layout--news .mtd-article-hero,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero{ min-height: 0; background: var(--mtd-surface); color: var(--mtd-ink); border-bottom: 1px solid var(--mtd-line); box-shadow: none; }
body:not(.login) .mtd-native-layout--news .mtd-article-hero::after,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero::after{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--mtd-primary), color-mix(in srgb, var(--mtd-primary) 45%, var(--mtd-surface))); }
body:not(.login) .mtd-native-layout--news .mtd-article-hero__art,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero__art{ display: none; }
body:not(.login) .mtd-native-layout--feature .mtd-article-hero,
body:not(.login) .mtd-native-layout--explainer .mtd-article-hero{ min-height: 190px; }
body:not(.login) .mtd-native-layout--brief .mtd-article-hero,
body:not(.login) .mtd-native-layout--procedure .mtd-article-hero{ background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 28px), linear-gradient(118deg, var(--mtd-tpl-a), var(--mtd-tpl-b)); }
body:not(.login) .mtd-native-layout--community .mtd-article-hero,
body:not(.login) .mtd-native-layout--policy .mtd-article-hero{ background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .07) 18px 20px), linear-gradient(118deg, var(--mtd-tpl-a), var(--mtd-tpl-b)); }
body:not(.login) .mtd-native-layout--notice .mtd-article-hero,
body:not(.login) .mtd-native-layout--security .mtd-article-hero{ background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 14px, transparent 14px 30px), linear-gradient(118deg, var(--mtd-tpl-a), var(--mtd-tpl-b)); }
body:not(.login) .mtd-native-layout--notice .mtd-article-hero__kind,
body:not(.login) .mtd-native-layout--security .mtd-article-hero__kind{ background: rgba(0, 0, 0, .28); }
body:not(.login) .mtd-article-hero__body { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 22px clamp(22px, 4vw, 44px); }
body:not(.login) .mtd-article-hero__kind { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: inherit; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); }
body:not(.login) .mtd-native-layout--news .mtd-article-hero__kind,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero__kind{ border-color: var(--mtd-line); color: var(--mtd-primary); background: var(--mtd-primary-soft); }
body:not(.login) .mtd-article-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: .86rem; font-weight: 600; opacity: .95; }
body:not(.login) .mtd-article-hero__meta li { display: inline-flex; align-items: center; gap: 7px; }
body:not(.login) .mtd-article-hero__meta li[hidden] { display: none; }
body:not(.login) .mtd-article-hero__meta a { color: inherit !important; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .4); }
body:not(.login) .mtd-native-layout--news .mtd-article-hero__meta,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero__meta{ color: var(--mtd-muted); }
body:not(.login) .mtd-native-layout--news .mtd-article-hero__meta a,
body:not(.login) .mtd-native-layout--reference .mtd-article-hero__meta a{ color: var(--mtd-primary) !important; border-bottom-color: color-mix(in srgb, var(--mtd-primary) 40%, transparent); }
body:not(.login) .mtd-article-hero--media { min-height: 0; display: block; }
body:not(.login) .mtd-article-hero__media { position: relative; margin: 0; aspect-ratio: 16 / 7; overflow: hidden; }
body:not(.login) .mtd-article-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s ease; }
body:not(.login) .mtd-article-hero--media:hover .mtd-article-hero__media img { transform: scale(1.06); }
body:not(.login) .mtd-article-hero--media .mtd-article-hero__body { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 60px; background: linear-gradient(180deg, rgba(8, 15, 28, 0) 0%, rgba(8, 15, 28, .78) 100%); }

/* ---- content card joins the hero ---- */
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content,
body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content { border-radius: 0 !important; border-top: 0 !important; box-shadow: none !important; position: relative; overflow: hidden; padding: clamp(32px, 5vw, 68px) !important; border: 1px solid var(--mtd-line) !important; color: var(--mtd-text) !important; background: var(--mtd-surface) !important; }
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-kb-document .article-content > p:first-child,
body[data-templatefile="update"]:not(.login) .mtd-update-article .article-content > p:first-child { padding: 0; border: 0; background: transparent !important; margin: 0 0 22px !important; }
body:not(.login) .mtd-article-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--mtd-line); border-top: 0; background: var(--mtd-surface); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.09); }
body[data-templatefile="knowledgebase-article"]:not(.login) .mtd-article-layout .article-content,
body[data-templatefile="update"]:not(.login) .mtd-article-layout .article-content { border: 0 !important; box-shadow: none !important; }
@media (min-width: 1100px) {
    body:not(.login) .mtd-article-layout:has(> .mtd-article-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr) 230px; }
    body:not(.login) .mtd-article-layout:has(> .mtd-article-toc:not([hidden])) > .mtd-article-toc { order: 2; }
}
body:not(.login) .mtd-article-toc { align-self: start; position: sticky; top: 92px; margin: 0; padding: 22px 22px 22px 0; }
body:not(.login) .mtd-article-toc[hidden] { display: none; }
@media (max-width: 1099px) { body:not(.login) .mtd-article-toc { position: static; padding: 18px clamp(22px, 4vw, 44px) 0; } }
body:not(.login) .mtd-article-toc__title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mtd-muted); }
body:not(.login) .mtd-article-toc__list { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--mtd-line); }
body:not(.login) .mtd-article-toc__list li { margin: 0; }
body:not(.login) .mtd-article-toc__list a { position: relative; display: block; padding: 6px 0 6px 4px; color: var(--mtd-muted) !important; font-size: .86rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: color .15s ease, transform .15s ease; }
body:not(.login) .mtd-article-toc__list a::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--mtd-primary); opacity: 0; transition: opacity .15s ease; }
body:not(.login) .mtd-article-toc__list a:hover, body:not(.login) .mtd-article-toc__list li.is-active > a { color: var(--mtd-primary) !important; transform: translateX(2px); }
body:not(.login) .mtd-article-toc__list li.is-active > a::before { opacity: 1; }

/* ---- content blocks ---- */
body:not(.login) .article-content .news-deck,

/* ---- content blocks ---- */
body:not(.login) .article-content .doc-summary{ font-size: clamp(1.05rem, 1.4vw, 1.22rem) !important; font-weight: 600; line-height: 1.6; color: var(--mtd-ink) !important; padding: 20px 24px !important; border: 0 !important; border-left: 4px solid var(--mtd-tpl-a) !important; border-radius: 0 12px 12px 0 !important; background: var(--mtd-tpl-soft) !important; margin: 0 0 30px !important; }
body:not(.login) .mtd-native-layout--feature .article-content .news-deck,
body:not(.login) .mtd-native-layout--explainer .article-content .doc-summary{ font-size: clamp(1.15rem, 1.6vw, 1.36rem) !important; font-weight: 500; }
body:not(.login) .article-content h2 { scroll-margin-top: 96px; }
body:not(.login) .article-content h2 .mtd-anchor { margin-left: 8px; color: var(--mtd-muted); font-size: .7em; opacity: 0; text-decoration: none; transition: opacity .15s ease; }
body:not(.login) .article-content h2:hover .mtd-anchor, body:not(.login) .article-content h2 .mtd-anchor:focus { opacity: 1; }
body:not(.login) .article-content .news-notice,
body:not(.login) .article-content .doc-note{ position: relative; padding: 18px 22px 18px 62px !important; border: 1px solid color-mix(in srgb, var(--mtd-primary) 25%, var(--mtd-line)) !important; border-left: 5px solid var(--mtd-primary) !important; border-radius: 12px !important; background: var(--mtd-primary-soft) !important; }
body:not(.login) .article-content .news-notice::before,
body:not(.login) .article-content .doc-note::before{ content: "\f05a"; position: absolute; left: 20px; top: 18px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--mtd-primary); font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 900; font-size: 14px; }
body:not(.login) .article-content .news-notice--urgent,
body:not(.login) .article-content .doc-note--warning{ border-color: color-mix(in srgb, var(--mtd-warning) 40%, var(--mtd-line)) !important; border-left-color: var(--mtd-warning) !important; background: color-mix(in srgb, var(--mtd-warning) 10%, var(--mtd-surface)) !important; }
body:not(.login) .article-content .news-notice--urgent::before,
body:not(.login) .article-content .doc-note--warning::before{ content: "\f071"; background: var(--mtd-warning); }
body:not(.login) .article-content .news-notice--urgent,
body:not(.login) .article-content .doc-note--safety{ border-color: color-mix(in srgb, #d44a4a 40%, var(--mtd-line)) !important; border-left-color: #d44a4a !important; background: color-mix(in srgb, #d44a4a 9%, var(--mtd-surface)) !important; }
body:not(.login) .article-content .news-notice--urgent::before,
body:not(.login) .article-content .doc-note--safety::before{ content: "\f3ed"; background: #d44a4a; }
body:not(.login) .article-content .news-notice > p:first-child,
body:not(.login) .article-content .doc-note > p:first-child{ margin: 0 0 4px !important; font-weight: 800 !important; color: var(--mtd-ink) !important; }
body:not(.login) .article-content .news-facts,
body:not(.login) .article-content .doc-meta{ display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 22px; padding: 16px 20px !important; border: 1px solid var(--mtd-line) !important; border-radius: 12px !important; background: var(--mtd-surface-soft) !important; }
body:not(.login) .article-content .news-facts > p,
body:not(.login) .article-content .doc-meta > p{ margin: 0 !important; font-size: .92rem !important; }
body:not(.login) .article-content .news-facts strong,
body:not(.login) .article-content .doc-meta strong{ display: block; margin-bottom: 2px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mtd-muted) !important; }
body:not(.login) .article-content .news-highlights,
body:not(.login) .article-content .doc-steps{ counter-reset: mtdStep; }
body:not(.login) .article-content .news-highlights > li,
body:not(.login) .article-content .doc-steps > li{ position: relative; padding: 22px 20px 20px 66px !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
body:not(.login) .article-content .news-highlights > li::before,
body:not(.login) .article-content .doc-steps > li::before{ counter-increment: mtdStep; content: counter(mtdStep); position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--mtd-tpl-a); font-weight: 800; font-size: .95rem; box-shadow: 0 6px 14px color-mix(in srgb, var(--mtd-tpl-a) 40%, transparent); }
body:not(.login) .article-content .news-highlights > li:hover,
body:not(.login) .article-content .doc-steps > li:hover, body:not(.login) .article-content .news-highlights > li:hover, body:not(.login) .article-content .doc-grid > li:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--mtd-tpl-a) 45%, var(--mtd-line)); box-shadow: 0 14px 30px rgba(15, 23, 42, .08); }
body:not(.login) .article-content .news-highlights > li > strong,
body:not(.login) .article-content .doc-steps > li > strong, body:not(.login) .article-content .news-highlights > li > strong, body:not(.login) .article-content .doc-grid > li > strong{ display: block; margin-bottom: 4px; color: var(--mtd-ink) !important; font-size: 1rem; }
body:not(.login) .article-content .news-highlights > li,
body:not(.login) .article-content .doc-grid > li{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; border-top: 3px solid var(--mtd-tpl-a) !important; }
body:not(.login) .article-content ul.mtd-checklist, body:not(.login) .mtd-native-layout--brief .article-content h2 + ul, body:not(.login) .mtd-native-layout--procedure .article-content h2 + ul{ list-style: none !important; padding-left: 0 !important; }
body:not(.login) .article-content ul.mtd-checklist > li, body:not(.login) .mtd-native-layout--brief .article-content h2 + ul > li, body:not(.login) .mtd-native-layout--procedure .article-content h2 + ul > li{ position: relative; margin: 6px 0 !important; padding: 10px 14px 10px 44px !important; border: 1px solid var(--mtd-line); border-radius: 10px; background: var(--mtd-surface-soft); cursor: pointer; transition: background .15s ease, color .15s ease; }
body:not(.login) .article-content ul.mtd-checklist > li::before, body:not(.login) .mtd-native-layout--brief .article-content h2 + ul > li::before, body:not(.login) .mtd-native-layout--procedure .article-content h2 + ul > li::before{ content: "\f00c"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid color-mix(in srgb, var(--mtd-primary) 55%, var(--mtd-line)); border-radius: 6px; color: transparent; background: var(--mtd-surface); font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 900; font-size: 11px; transition: background .15s ease, color .15s ease, border-color .15s ease; }
body:not(.login) .article-content ul.mtd-checklist > li.is-done, body:not(.login) .mtd-native-layout--brief .article-content h2 + ul > li.is-done, body:not(.login) .mtd-native-layout--procedure .article-content h2 + ul > li.is-done{ color: var(--mtd-muted) !important; text-decoration: line-through; }
body:not(.login) .article-content ul.mtd-checklist > li.is-done::before, body:not(.login) .mtd-native-layout--brief .article-content h2 + ul > li.is-done::before, body:not(.login) .mtd-native-layout--procedure .article-content h2 + ul > li.is-done::before{ color: #fff; border-color: var(--mtd-primary); background: var(--mtd-primary); }
body:not(.login) .article-content .news-links,
body:not(.login) .article-content .doc-sources{ list-style: none !important; padding: 0 !important; margin: 16px 0 !important; display: grid; gap: 8px; }
body:not(.login) .article-content .news-links li,
body:not(.login) .article-content .doc-sources li{ position: relative; padding: 12px 16px 12px 46px !important; border: 1px solid var(--mtd-line); border-radius: 10px; background: var(--mtd-surface-soft); }
body:not(.login) .article-content .news-links li::before,
body:not(.login) .article-content .doc-sources li::before{ content: "\f0c1"; position: absolute; left: 16px; top: 13px; color: var(--mtd-primary); font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 900; font-size: 13px; }
body:not(.login) .article-content .news-links a,
body:not(.login) .article-content .doc-sources a{ font-weight: 700; }
body:not(.login) .article-content blockquote { position: relative; margin: 28px 0 !important; padding: 22px 26px 22px 64px !important; border: 0 !important; border-radius: 12px; color: var(--mtd-ink) !important; background: var(--mtd-tpl-soft); font-size: 1.08rem; font-style: normal !important; }
body:not(.login) .article-content blockquote::before { content: "\f10d"; position: absolute; left: 22px; top: 18px; color: var(--mtd-tpl-a); font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 900; font-size: 22px; opacity: .8; }
body:not(.login) .article-content blockquote > p:last-child { margin-bottom: 0 !important; }
body:not(.login) .mtd-native-layout--community .article-content blockquote,
body:not(.login) .mtd-native-layout--policy .article-content blockquote{ font-family: Georgia, "Times New Roman", serif; font-size: 1.18rem; line-height: 1.6; }
body:not(.login) .article-content .news-revision,
body:not(.login) .article-content .doc-revision{ display: flex; align-items: center; gap: 10px; margin-top: 34px !important; padding: 12px 16px !important; border: 1px dashed var(--mtd-line) !important; border-radius: 10px; color: var(--mtd-muted) !important; font-size: .84rem !important; background: var(--mtd-surface-soft); }
body:not(.login) .article-content .news-revision::before,
body:not(.login) .article-content .doc-revision::before{ content: "\f1da"; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro"; font-weight: 900; color: var(--mtd-primary); }
body:not(.login) .article-content table { overflow: hidden; border-radius: 10px; border: 1px solid var(--mtd-line); box-shadow: 0 6px 16px rgba(15, 23, 42, .05); }
body:not(.login) .article-content th { background: var(--mtd-surface-soft) !important; font-weight: 800; }
body:not(.login) .article-content tbody tr:hover td { background: color-mix(in srgb, var(--mtd-primary) 4%, transparent); }
body:not(.login) .article-content img { border-radius: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, .1); }
body:not(.login) .article-content pre { border-radius: 10px; padding: 16px 18px; background: #0f172a !important; color: #e2e8f0 !important; }
body:not(.login) .article-content code:not(pre code) { padding: 2px 6px; border-radius: 6px; background: var(--mtd-surface-soft); color: var(--mtd-primary); font-size: .92em; }

/* ---- tools, rating, motion ---- */
body:not(.login) .mtd-article-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
body:not(.login) .mtd-article-actions .btn.is-copied { color: #fff !important; background: #1f8a5b !important; border-color: #1f8a5b !important; }
body:not(.login) .rate-article .mtd-rating-actions .btn { transition: transform .15s ease; }
body:not(.login) .rate-article .mtd-rating-actions .btn:hover { transform: translateY(-1px); }
body:not(.login) .mtd-reading-progress { position: fixed; top: 0; left: 0; z-index: 1200; width: 100%; height: 3px; pointer-events: none; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--mtd-primary), color-mix(in srgb, var(--mtd-primary) 50%, #ffffff)); }
body:not(.login) [data-mtd-article] .mtd-reveal { opacity: 0; transform: translateY(14px); }
body:not(.login) [data-mtd-article] .mtd-reveal.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes mtdFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -14px, 0); } }
@media (prefers-reduced-motion: reduce) {
    body:not(.login) .mtd-article-hero__art span { animation: none; }
    body:not(.login) [data-mtd-article] .mtd-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
    body:not(.login) .mtd-article-hero { color: #000; background: none !important; border: 0; box-shadow: none; }
    body:not(.login) .mtd-article-hero__art, body:not(.login) .mtd-article-toc, body:not(.login) .mtd-reading-progress { display: none !important; }
    body:not(.login) [data-mtd-article] .mtd-reveal { opacity: 1 !important; transform: none !important; }
}

/* Plan comparison (ProductPriceListTwo): one card, flat spec tiles, theme colours.
   The earlier "modern" block stacked three bordered boxes and hard-coded a blue
   gradient; this keeps the outer table as the only card and follows --primary. */
.sec.products .mtd-modern-plan-table {
    border-color: rgba(15, 23, 42, 0.08) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08) !important;
    position: relative;
    overflow: hidden;
    padding: clamp(18px, 2vw, 30px) !important;
    border: 1px solid rgba(37, 99, 235, 0.16) !important;
}
.sec.products .mtd-modern-plan-card {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.sec.products .mtd-modern-spec-card {
    min-height: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.sec.products .mtd-modern-spec-icon {
    background: color-mix(in srgb, var(--primary, #4f56d9) 12%, transparent) !important;
    color: var(--primary, #4f56d9) !important;
}
.sec.products .mtd-modern-price-panel {
    min-height: 0;
    padding: 20px 24px;
    border: 0;
    border-radius: 16px;
    background: color-mix(in srgb, var(--primary, #4f56d9) 10%, #ffffff);
    color: var(--text, #17191c);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec.products .mtd-modern-price-panel .cost { color: var(--primary, #4f56d9) !important; font-size: clamp(1.75rem, 2.6vw, 2.85rem); font-weight: 900; }
.sec.products .mtd-modern-price-panel .suffix,
.sec.products .mtd-modern-price-panel .cycle,
.sec.products .mtd-modern-price-panel .small,
.sec.products .mtd-modern-price-panel .text-muted,
.sec.products .mtd-modern-price-panel .mtd-modern-price-label { color: var(--text-muted, #6b7280) !important; }
.sec.products .mtd-modern-plan-tabs .nav-link.active {
    background: var(--primary, #4f56d9) !important;
    border-color: var(--primary, #4f56d9) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.sec.products .mtd-modern-order-btn {
    background: var(--primary, #4f56d9) !important;
    border-color: var(--primary, #4f56d9) !important;
    box-shadow: none !important;
    min-width: 190px;
    min-height: 54px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 22px;
    border: 0 !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    font-weight: 900;
    text-decoration: none !important;
}
body.dark-mode:not(.login) .sec.products .mtd-modern-plan-table {
    border-color:rgba(255, 255, 255, 0.08) !important;
    background:var(--bg-lifted, #26252e) !important;
    box-shadow:0 30px 80px rgba(0, 0, 0, 0.42), 0 0 0 1px color-mix(in srgb, var(--mtd-primary, #1262ff) 8%, transparent) inset !important;
}
body.dark-mode:not(.login) .sec.products .mtd-modern-plan-card { background:transparent; border:0; border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 24%, transparent); }
body.dark-mode:not(.login) .sec.products .mtd-modern-spec-card { background:rgba(255, 255, 255, 0.05); border:0; border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 18%, transparent); }
body.dark-mode:not(.login) .sec.products .mtd-modern-price-panel {
    background:color-mix(in srgb, var(--primary, #7c82ff) 18%, transparent);
    border:0;
    color:var(--text, #e0e0e0);
    border-color:color-mix(in srgb, var(--mtd-primary, #1262ff) 34%, transparent);
}
.sec.products .mtd-modern-price-panel .cycle,
.sec.products .mtd-modern-price-panel .suffix { font-size: 13px !important; }
.sec.products .mtd-modern-price-panel .mtd-modern-price-label { font-size: 12px !important; letter-spacing: .08em; }
.sec.products .mtd-modern-billing-switcher .small,
.sec.products .mtd-modern-billing-switcher .text-muted { font-size: 12.5px !important; }
.sec.products .mtd-modern-plan-tabs .nav-tabs { border: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; }
.sec.products .mtd-modern-plan-tabs .nav-item { border: 0 !important; margin: 0; }

/* Latest updates: an SVG "backdrop" is an illustration, not a photo — keep it small in the
   corner without the dark wash, and let the cards sit above it. */
.sec.social.sec-img-bg-2[style*=".svg"] {
    background-size: auto 150px !important;
    background-position: right 32px top 28px !important;
    background-repeat: no-repeat !important;
    background-color: var(--bg-muted, #f7f7f8);
}
.sec.social.sec-img-bg-2[style*=".svg"]::before { display: none !important; }
.sec.social.sec-img-bg-2[style*=".svg"] .h1.text-white { color: var(--text, #17191c) !important; }
.sec.social .card.mtd-box { position: relative; z-index: 1; flex-direction: column; }
.sec.social .card .card-body { flex: 1 1 auto; }
.sec.social .card .card-footer small { font-size: 12.5px; }
/* style.min.css compiled the slider's top rule with a stale red @brand-secondary. */
.hero-bg-wrap { border-top-color: var(--secondary, var(--primary, #4f56d9)) !important; }
.sec.mass-head .hero-bg-wrap { border-top: 0 !important; }

/* ==========================================================================
   Sections added in 1.6.0: call to action, logo wall, timeline, comparison
   table, video, newsletter. Colours follow the CMS palette variables.
   ========================================================================== */
.sec.cta-band { padding: 72px 0; }
.sec.cta-band .cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.sec.cta-band .cta-band__copy { max-width: 720px; }
.sec.cta-band .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sec.cta-band .cta-band__actions .btn { min-height: 46px; padding: 10px 24px; font-weight: 700; }
.sec.cta-band .btn-outline { border: 1px solid var(--border-lifted, #acb0b9); background: transparent; color: inherit; }
.sec.cta-band.bg-primary, .sec.cta-band.dark { color: #fff; }
.sec.cta-band.bg-primary .btn-light { background: #fff; border-color: #fff; color: var(--primary, #4f56d9); }
.sec.cta-band.bg-primary .btn-outline, .sec.cta-band.dark .btn-outline { border-color: rgba(255, 255, 255, .5); color: #fff; }
@media (min-width: 768px) {
    .sec.cta-band.cta-band--split .cta-band__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

.sec.logo-wall .logo-wall__grid { --logo-cols: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sec.logo-wall .logo-wall__item { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 18px 22px; border: 1px solid var(--border-muted, #e9eaec); border-radius: 14px; background: var(--bg, #fff); flex: 0 0 calc((100% - (var(--logo-cols) - 1) * 14px) / var(--logo-cols)); }
.sec.logo-wall .logo-wall__item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.sec.logo-wall .logo-wall__item img { max-width: 100%; max-height: 44px; width: auto; height: auto; opacity: .65; filter: grayscale(1); transition: opacity .18s ease, filter .18s ease; }
.sec.logo-wall .logo-wall__item:hover img, .sec.logo-wall.logo-wall--color .logo-wall__item img { opacity: 1; filter: none; }
body.dark-mode .sec.logo-wall .logo-wall__item { border-color:rgba(255, 255, 255, .1); background:rgba(255, 255, 255, .05); }
body.dark-mode .sec.logo-wall .logo-wall__item img { filter:grayscale(1) invert(1) brightness(1.15); }
@media (min-width: 576px) { .sec.logo-wall .logo-wall__grid { --logo-cols: 3; } }
@media (min-width: 992px) {
    .sec.logo-wall .logo-wall__grid--4 { --logo-cols: 4; }
    .sec.logo-wall .logo-wall__grid--5 { --logo-cols: 5; }
    .sec.logo-wall .logo-wall__grid--6 { --logo-cols: 6; }
}

.sec.timeline .timeline__list { position: relative; max-width: 880px; margin: 0 auto; padding: 0; list-style: none; }
.sec.timeline .timeline__list::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: 19px; width: 2px; background: var(--border-muted, #e9eaec); }
.sec.timeline .timeline__item { position: relative; display: flex; gap: 22px; padding: 0 0 28px; }
.sec.timeline .timeline__marker { flex: none; width: 40px; display: flex; justify-content: center; padding-top: 22px; }
.sec.timeline .timeline__marker span { display: block; width: 14px; height: 14px; border-radius: 999px; background: var(--primary, #4f56d9); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary, #4f56d9) 18%, transparent); }
.sec.timeline .timeline__card { flex: 1 1 auto; min-width: 0; padding: 20px 24px; border: 1px solid var(--border-muted, #e9eaec); border-radius: 14px; background: var(--bg, #fff); }
.sec.timeline .timeline__label { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary, #4f56d9); }
.sec.timeline .timeline__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.sec.timeline .timeline__text { color: var(--text-muted, #6b7280); font-size: 14.5px; line-height: 1.6; }
body.dark-mode .sec.timeline .timeline__card { border-color:rgba(255, 255, 255, .1); background:rgba(255, 255, 255, .05); }
@media (min-width: 768px) {
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__list::before { left: 50%; margin-left: -1px; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item { width: 50%; padding-right: 40px; flex-direction: row-reverse; margin-top: -18px; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item:first-child { margin-top: 0; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item .timeline__marker { position: absolute; top: 0; right: -20px; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item--alt { margin-left: 50%; padding-right: 0; padding-left: 40px; flex-direction: row; }
    .sec.timeline:not(.timeline--single):not(.timeline--horizontal) .timeline__item--alt .timeline__marker { right: auto; left: -20px; }
}

.sec.compare-table .compare-table__scroll { overflow-x: auto; border: 1px solid var(--border-muted, #e9eaec); border-radius: 14px; background: var(--bg, #fff); }
.sec.compare-table .compare-table__table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; margin: 0; }
.sec.compare-table th, .sec.compare-table td { padding: 14px 18px; border-bottom: 1px solid var(--border-muted, #e9eaec); text-align: center; vertical-align: middle; font-size: 14px; }
.sec.compare-table thead th { font-size: 15px; font-weight: 800; background: var(--bg-muted, #f7f7f8); }
.sec.compare-table .compare-table__feature { width: 30%; }
.sec.compare-table tbody th.compare-table__feature { text-align: left; font-weight: 600; }
.sec.compare-table tbody tr:last-child th, .sec.compare-table tbody tr:last-child td { border-bottom: 0; }
.sec.compare-table tfoot td { border-top: 1px solid var(--border-muted, #e9eaec); border-bottom: 0; background: var(--bg-muted, #f7f7f8); }
.sec.compare-table .compare-table__yes { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: rgba(39, 184, 90, .14); color: #27b85a; font-size: 12px; }
.sec.compare-table .compare-table__no { color: var(--text-muted, #9ca3af); font-size: 12px; }
.sec.compare-table .is-highlight { background: color-mix(in srgb, var(--primary, #4f56d9) 7%, transparent); }
.sec.compare-table thead th.is-highlight { background: color-mix(in srgb, var(--primary, #4f56d9) 14%, transparent); color: var(--primary, #4f56d9); }
.sec.compare-table .btn-outline { border: 1px solid var(--border-lifted, #acb0b9); background: transparent; color: inherit; }
body.dark-mode .sec.compare-table .compare-table__scroll { border-color:rgba(255, 255, 255, .1); background:rgba(255, 255, 255, .04); }
body.dark-mode .sec.compare-table th, body.dark-mode .sec.compare-table td { border-color:rgba(255, 255, 255, .08); }
body.dark-mode .sec.compare-table thead th, body.dark-mode .sec.compare-table tfoot td { background:rgba(255, 255, 255, .05); }

.sec.video-embed .video-embed__frame { position: relative; width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #0b0a10; aspect-ratio: 16 / 9; }
.sec.video-embed .video-embed__frame--narrow { max-width: 640px; }
.sec.video-embed .video-embed__frame--wide { max-width: none; }
.sec.video-embed .ratio-4x3 { aspect-ratio: 4 / 3; }
.sec.video-embed .ratio-1x1 { aspect-ratio: 1 / 1; }
.sec.video-embed .ratio-9x16 { aspect-ratio: 9 / 16; max-width: 420px; }
.sec.video-embed .video-embed__frame iframe, .sec.video-embed .video-embed__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.sec.video-embed .video-embed__poster { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #0b0a10; cursor: pointer; }
.sec.video-embed .video-embed__poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sec.video-embed .video-embed__play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 999px; background: var(--primary, #4f56d9); color: #fff; font-size: 24px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.sec.video-embed .video-embed__play i { margin-left: 4px; }

.sec.newsletter .newsletter__inner { display: flex; flex-direction: column; gap: 22px; }
.sec.newsletter.newsletter--card .newsletter__inner { align-items: center; max-width: 720px; margin: 0 auto; padding: 40px 32px; border: 1px solid var(--border-muted, #e9eaec); border-radius: 18px; background: var(--bg, #fff); text-align: center; }
.sec.newsletter.newsletter--band .newsletter__inner { align-items: center; text-align: center; }
.sec.newsletter .newsletter__copy { max-width: 620px; }
.sec.newsletter .newsletter__form { width: 100%; max-width: 520px; }
.sec.newsletter .newsletter__row { display: flex; gap: 10px; }
.sec.newsletter .newsletter__input { flex: 1 1 auto; min-width: 0; min-height: 46px; }
.sec.newsletter .newsletter__input.is-invalid { border-color: #e5484d; }
.sec.newsletter .newsletter__button { flex: none; min-height: 46px; white-space: nowrap; font-weight: 700; }
.sec.newsletter .newsletter__note { margin-top: 10px; color: var(--text-muted, #6b7280); font-size: 12.5px; }
.sec.newsletter .newsletter__trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sec.newsletter .newsletter__status { margin-top: 10px; padding: 10px 14px; border-radius: 10px; color: #1f7a4f; background: rgba(39, 184, 90, .12); font-size: 13.5px; font-weight: 700; }
.sec.newsletter .newsletter__status.is-error { color: #b3323a; background: rgba(229, 72, 77, .12); }
body.dark-mode .sec.newsletter .newsletter__status, [data-theme="dark"] .sec.newsletter .newsletter__status { color: #7fe0ac; }
body.dark-mode .sec.newsletter .newsletter__status.is-error, [data-theme="dark"] .sec.newsletter .newsletter__status.is-error { color: #ff9a9f; }
.sec.newsletter .newsletter__form.is-sent:not([data-newsletter-list]) .newsletter__note::before { content: "Thanks - check your mail app to finish. "; color: #27b85a; font-weight: 700; }
.sec.newsletter.bg-primary, .sec.newsletter.dark { color: #fff; }
.sec.newsletter.newsletter--card.bg-primary .newsletter__inner, .sec.newsletter.newsletter--card.dark .newsletter__inner { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); }
.sec.newsletter.bg-primary .newsletter__button.btn { background: #fff !important; border-color: #fff !important; color: var(--primary, #4f56d9) !important; }
body.dark-mode .sec.newsletter.newsletter--card .newsletter__inner { border-color:rgba(255, 255, 255, .1); background:rgba(255, 255, 255, .05); }
@media (min-width: 992px) {
    .sec.newsletter.newsletter--band .newsletter__inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .sec.newsletter.newsletter--band .newsletter__form { flex: none; width: 460px; }
}
@media (max-width: 480px) { .sec.newsletter .newsletter__row { flex-direction: column; } }
@media (max-width: 767px) { .sec.compare-table th, .sec.compare-table td { padding: 12px 12px; font-size: 13px; } .sec.compare-table .compare-table__feature { position: sticky; left: 0; z-index: 1; min-width: 140px; width: auto; background: var(--bg, #fff); box-shadow: 4px 0 8px -6px rgba(0, 0, 0, .25); } }
.sec.cta-band, .sec.logo-wall, .sec.timeline, .sec.compare-table, .sec.video-embed, .sec.newsletter, .sec.sx { padding: 72px 0; }
.sec.logo-wall .sec-description, .sec.timeline .sec-description, .sec.compare-table .sec-description, .sec.video-embed .sec-description, .sec.sx .sec-description { max-width: 760px; margin: 0 auto 32px; }
.sec.cta-band .sec-caption, .sec.logo-wall .sec-caption, .sec.timeline .sec-caption, .sec.compare-table .sec-caption, .sec.video-embed .sec-caption, .sec.newsletter .sec-caption, .sec.sx .sec-caption { margin-bottom: 12px; }
.sec.cta-band .sec-caption span, .sec.logo-wall .sec-caption span, .sec.timeline .sec-caption span, .sec.compare-table .sec-caption span, .sec.video-embed .sec-caption span, .sec.newsletter .sec-caption span, .sec.sx .sec-caption span { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--primary, #4f56d9) 12%, transparent); color: var(--primary, #4f56d9); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.sec.cta-band.bg-primary .sec-caption span, .sec.newsletter.bg-primary .sec-caption span, .sec.cta-band.dark .sec-caption span, .sec.sx.dark .sec-caption span { background: rgba(255, 255, 255, .16); color: #fff; }
.sec.cta-band .sec-title, .sec.logo-wall .sec-title, .sec.timeline .sec-title, .sec.compare-table .sec-title, .sec.video-embed .sec-title, .sec.newsletter .sec-title, .sec.sx .sec-title { margin: 0 0 12px; }
.sec.cta-band .sec-subtitle, .sec.logo-wall .sec-subtitle, .sec.timeline .sec-subtitle, .sec.compare-table .sec-subtitle, .sec.video-embed .sec-subtitle, .sec.newsletter .sec-subtitle, .sec.sx .sec-subtitle { font-size: 16px; line-height: 1.6; }
.sec.cta-band .sec-subtitle p:last-child, .sec.newsletter .sec-subtitle p:last-child { margin-bottom: 0; }

/* the 1.7.1 sections: the marquee strip sits tighter, the statement needs no heading gap */
.sec.sx.sx-marquee { padding: 36px 0; }
.sec.sx.sx-statement .sec-caption { margin-bottom: 22px; }

/* Administrator preview of a draft or scheduled page. */
.wbams-cms-preview-notice { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 16px; background: #fff5df; color: #b45309; font-size: 13px; font-weight: 700; text-align: center; }
.wbams-cms-preview-notice__dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
body.dark-mode .wbams-cms-preview-notice { background:#3f2f17; color:#ffc27a; }

/* Partner logos: the footer band is an Owl carousel that nothing initialises, and
   Owl's core CSS hides an uninitialised carousel - so the logos never showed on any
   page. Until the carousel runs, lay the logos out as a static row. */
.mtd-partners .partners-slider.owl-carousel:not(.owl-loaded) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 38px; padding: 22px 0; }
.mtd-partners .partners-slider.owl-carousel:not(.owl-loaded) .item { flex: 0 1 auto; width: auto; }
.mtd-partners .partners-slider.owl-carousel:not(.owl-loaded) .item img { max-height: 34px; width: auto; opacity: .62; filter: grayscale(1); transition: opacity .18s ease, filter .18s ease; }
.mtd-partners .partners-slider.owl-carousel:not(.owl-loaded) .item img:hover { opacity: 1; filter: none; }
body.dark-mode .mtd-partners .partners-slider.owl-carousel:not(.owl-loaded) .item img { opacity:.72; filter:grayscale(1) invert(1) brightness(1.15); }

/* Updates section as news cards: picture (or a placeholder), date, title, excerpt, read-more. */
.sec.social .news-card { overflow: hidden; padding: 0; text-decoration: none; border-radius: var(--border-radius-lg, 16px) !important; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.sec.social .news-blocks .card.news-card .card-body { flex: 1 1 auto; padding: 20px 22px 18px; }
.sec.social .news-blocks .card.news-card .card-footer { padding: 12px 22px; border-top: 1px solid var(--border-muted, rgba(0,0,0,.08)); }
.sec.social .news-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--primary) 16%, transparent); }
.sec.social .news-card__media { position: relative; display: flex; flex: 0 0 auto; width: 100%; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-muted, #f1f4f9); }
.sec.social .news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.sec.social .news-card:hover .news-card__media img { transform: scale(1.04); }
.sec.social .news-card__media--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, transparent), color-mix(in srgb, var(--primary) 32%, transparent)); color: var(--primary); font-size: 34px; }
.sec.social .news-card__date { display: inline-flex; align-items: center; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.sec.social .news-card .card-body .h4.news-card__title { font-size: 17px; line-height: 1.3; }
.sec.social .news-card__summary { margin: 0; }
.sec.social .news-card .card-footer { display: flex; align-items: center; background: transparent; }
.sec.social .news-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.sec.social .news-card:hover .news-card__more { color: var(--primary); }

/* Between 992px and 1199px the sidebar collapses above the page, which put every
   sidebar card - categories, tag cloud, support links - ahead of the article or
   list the visitor came for. The page content goes first at every width. */
@media (max-width: 1199.98px) {
    body:not(.login) .mtd-content-grid.mtd-has-sidebar > .mtd-primary-content { order: 1; }
    body:not(.login) .mtd-content-grid.mtd-has-sidebar > .mtd-sidebar-region { order: 2; }
}

/* Help Center blocks added with the newer presentation templates: change list, version
   pill, requirements, screenshot, question, timeline, highlights, call to action, status.
   Same class names as Draisap; the parent theme styles them in its own palette. */
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-note--result,
body[data-templatefile="update"]:not(.login) .article-content .news-notice--good{ border-left-color: var(--mtd-success, #2f9e5b); background: color-mix(in srgb, var(--mtd-success, #2f9e5b) 10%, var(--mtd-surface)); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-changes,
body[data-templatefile="update"]:not(.login) .article-content .news-changes{ margin: 20px 0 28px; padding: 0; list-style: none; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-changes li,
body[data-templatefile="update"]:not(.login) .article-content .news-changes li{ display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--mtd-line); }
.article-content .news-tag,
.article-content .doc-tag{ flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 70px; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: var(--mtd-primary-soft); color: var(--mtd-primary); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.article-content .news-tag.is-added,
.article-content .doc-tag.is-added{ background: color-mix(in srgb, #2f9e5b 14%, transparent); color: #1f7a44; }
.article-content .news-tag.is-changed,
.article-content .doc-tag.is-changed{ background: color-mix(in srgb, #2952b8 12%, transparent); color: #2952b8; }
.article-content .news-tag.is-fixed,
.article-content .doc-tag.is-fixed{ background: color-mix(in srgb, var(--mtd-warning, #c58a16) 16%, transparent); color: #a25f0a; }
.article-content .news-tag.is-removed,
.article-content .doc-tag.is-removed{ background: color-mix(in srgb, #b42323 12%, transparent); color: #b42323; }
.article-content .news-version,
.article-content .doc-version{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 10px; }
.article-content .news-version:first-child,
.article-content .doc-version:first-child{ margin-top: 0; }
.article-content .news-version__number,
.article-content .doc-version__number{ display: inline-flex; padding: 5px 13px; border-radius: 999px; background: var(--mtd-primary); color: #fff; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; font-weight: 700; }
.article-content .news-version__date,
.article-content .doc-version__date{ color: var(--mtd-muted); font-size: .85rem; font-weight: 700; }
.article-content .news-notice,
.article-content .doc-requirements{ margin: 22px 0; padding: 16px 20px; border: 1px dashed color-mix(in srgb, var(--mtd-primary) 45%, transparent); border-radius: 10px; background: var(--mtd-surface-soft); }
.article-content .news-notice > p:first-child,
.article-content .doc-requirements > p:first-child{ margin: 0 0 8px !important; color: var(--mtd-primary) !important; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-content .news-notice ul,
.article-content .doc-requirements ul{ margin: 0; padding-left: 20px; }
.article-content .news-figure,
.article-content .doc-figure{ margin: 26px 0; }
.article-content .news-figure img,
.article-content .doc-figure img{ display: block; width: 100%; height: auto; border: 1px solid var(--mtd-line); border-radius: 12px; }
.article-content .news-figure figcaption,
.article-content .doc-figure figcaption{ margin-top: 8px; color: var(--mtd-muted); font-size: .85rem; text-align: center; }
.article-content .news-qa,
.article-content .doc-qa{ margin: 12px 0; padding: 18px 20px 16px; border: 1px solid var(--mtd-line); border-radius: 12px; background: var(--mtd-surface-soft); }
.article-content .news-qa h3,
.article-content .doc-qa h3{ display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px !important; font-size: 1.05rem !important; line-height: 1.4; }
.article-content .news-qa h3::before,
.article-content .doc-qa h3::before{ content: "Q"; flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; background: var(--mtd-primary); color: #fff; font-size: .75rem; font-weight: 800; }
.article-content .news-qa p,
.article-content .doc-qa p{ margin: 0 0 8px !important; padding-left: 34px; }
.article-content .news-timeline,
.article-content .doc-steps{ margin: 22px 0 30px; padding: 4px 0 4px 26px; list-style: none; border-left: 2px solid color-mix(in srgb, var(--mtd-primary) 35%, transparent); }
.article-content .news-timeline li,
.article-content .doc-steps li{ position: relative; margin: 0 0 18px; padding-left: 8px; }
.article-content .news-timeline li::before,
.article-content .doc-steps li::before{ content: ""; position: absolute; left: -34px; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--mtd-surface); background: var(--mtd-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mtd-primary) 35%, transparent); }
.article-content .news-timeline li:last-child::before,
.article-content .doc-steps li:last-child::before{ background: #2f9e5b; box-shadow: 0 0 0 2px rgba(47, 158, 91, .3); }
.article-content .news-timeline time,
.article-content .doc-steps time{ display: block; margin-bottom: 2px; color: var(--mtd-muted); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.article-content .news-timeline strong,
.article-content .doc-steps strong{ display: block; color: var(--mtd-ink); }
.article-content .news-timeline p,
.article-content .doc-steps p{ margin: 2px 0 0 !important; }
.article-content .news-highlights,
.article-content .doc-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0; padding: 0; list-style: none; }
.article-content .news-highlights > li,
.article-content .doc-grid > li{ margin: 0; padding: 16px 18px; border: 1px solid var(--mtd-line); border-radius: 12px; background: linear-gradient(135deg, var(--mtd-primary-soft), var(--mtd-surface)); }
.article-content .news-highlights > li strong,
.article-content .doc-grid > li strong{ display: block; margin-bottom: 4px; color: var(--mtd-ink); }
.article-content .news-cta,
.article-content .doc-cta{ margin: 26px 0; }
.article-content .news-cta a,
.article-content .doc-cta a{ display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; background: var(--mtd-primary); color: #fff !important; font-weight: 800; text-decoration: none !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--mtd-primary) 30%, transparent); }
.article-content .news-status,
.article-content .doc-status{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-weight: 600; }
.article-content .news-status__pill,
.article-content .doc-tag{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--mtd-primary-soft); color: var(--mtd-primary); font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.article-content .news-status__pill::before,
.article-content .doc-tag::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.article-content .news-status__pill.is-resolved,
.article-content .doc-tag.is-resolved{ background: rgba(47, 158, 91, .14); color: #1f7a44; }
.article-content .news-status__pill.is-investigating,
.article-content .doc-tag.is-investigating{ background: rgba(180, 35, 35, .12); color: #b42323; }
.article-content .news-status__pill.is-monitoring,
.article-content .doc-tag.is-monitoring, .article-content .news-status__pill.is-identified, .article-content .doc-tag.is-identified{ background: color-mix(in srgb, var(--mtd-warning, #c58a16) 16%, transparent); color: #a25f0a; }
@media (max-width: 575.98px) { .article-content .news-highlights, .article-content .doc-grid{ grid-template-columns: minmax(0, 1fr); } }
/* the five newer templates on the parent theme */
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--release-notes,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--changelog{ border-top-color: var(--mtd-primary) !important; }
.mtd-native-layout--release-notes .article-content h2,
.mtd-native-layout--changelog .article-content h2{ font-size: .95rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mtd-muted) !important; }
.mtd-native-layout--tutorial .article-content{ counter-reset: tut; }
.mtd-native-layout--tutorial .article-content h2{ display: flex; align-items: center; gap: 14px; counter-increment: tut; }
.mtd-native-layout--tutorial .article-content h2::before{ content: counter(tut); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mtd-primary); color: #fff; font-size: .95rem; font-weight: 800; }
.mtd-native-layout--faq .article-content h2{ font-size: .95rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--mtd-muted) !important; }
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--launch,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--spotlight{ border-top-color: var(--mtd-primary) !important; background-image: linear-gradient(135deg, var(--mtd-primary-soft), transparent 54%) !important; }
.mtd-native-layout--launch .article-content .news-deck,
.mtd-native-layout--spotlight .article-content .doc-summary{ padding: 18px 22px; border-radius: 12px; background: var(--mtd-primary-soft); }
.mtd-native-layout--launch .article-content::before,
.mtd-native-layout--spotlight .article-content::before{ height: clamp(130px, 18vw, 220px) !important; background-image: linear-gradient(125deg, color-mix(in srgb, var(--mtd-primary) 92%, #08111f), color-mix(in srgb, var(--mtd-primary) 46%, var(--mtd-surface))) !important; }
body[data-templatefile="updates"]:not(.login) .annoucements .annuncement-item.mtd-native-layout--status,
body[data-templatefile^="knowledgebase"]:not(.login) .kb-article.mtd-native-layout--troubleshooting{ border-top-color: var(--mtd-warning, #c58a16) !important; border-left: 5px solid var(--mtd-warning, #c58a16) !important; }
.mtd-native-layout--status .article-content h2,
.mtd-native-layout--troubleshooting .article-content h2{ color: #a25f0a !important; }

/* ---- 1.6.0: the two help-centre systems have their own blocks. Newsroom blocks the
   Updates editor adds (news-quote, news-roadmap, news-links) and resource blocks the
   Knowledgebase editor adds (doc-checklist, doc-terms, doc-compare, doc-status,
   doc-cta), plus the newsroom templates maintenance / event / roadmap and the
   resource templates glossary / checklist / comparison. ---- */
body[data-templatefile="update"]:not(.login) .article-content .news-quote { position: relative; margin: 28px 0; padding: 22px 24px 18px 30px; border: 0; border-radius: 14px; background: var(--mtd-primary-soft); font-size: 1.15rem; font-weight: 600; line-height: 1.5; }
body[data-templatefile="update"]:not(.login) .article-content .news-quote::before { content: "\f10d"; position: absolute; left: 18px; top: -12px; padding: 0 6px; background: var(--mtd-surface); color: var(--mtd-primary); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 16px; font-weight: 900; }
body[data-templatefile="update"]:not(.login) .article-content .news-quote footer { margin-top: 8px; color: var(--mtd-muted); font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
body[data-templatefile="update"]:not(.login) .article-content .news-roadmap { margin: 16px 0 24px; padding: 0; list-style: none; }
body[data-templatefile="update"]:not(.login) .article-content .news-roadmap li .news-tag { float: left; margin: 2px 10px 0 0; }
body[data-templatefile="update"]:not(.login) .article-content .news-roadmap li::after { content: ""; display: block; clear: both; }
body[data-templatefile="update"]:not(.login) .article-content .news-roadmap li { display: block; margin: 0 0 8px; padding: 12px 14px; border: 1px solid var(--mtd-line); border-radius: 12px; background: var(--mtd-surface); }
body[data-templatefile="update"]:not(.login) .article-content .news-tag.is-shipping { background: color-mix(in srgb, var(--mtd-success, #2f9e5b) 16%, transparent); color: var(--mtd-success, #2f9e5b); }
body[data-templatefile="update"]:not(.login) .article-content .news-tag.is-planned { background: var(--mtd-primary-soft); color: var(--mtd-primary); }
body[data-templatefile="update"]:not(.login) .article-content .news-tag.is-exploring { background: color-mix(in srgb, var(--mtd-warning, #c58a16) 18%, transparent); color: #a25f0a; }
body[data-templatefile="update"]:not(.login) .article-content .news-status__pill.is-scheduled { background: color-mix(in srgb, var(--mtd-warning, #c58a16) 18%, transparent); color: #a25f0a; }
body[data-templatefile="update"]:not(.login) .article-content .news-notice--good { border-left-color: var(--mtd-success, #2f9e5b); background: color-mix(in srgb, var(--mtd-success, #2f9e5b) 10%, transparent); }
body[data-templatefile="update"]:not(.login) .article-content .news-revision { margin-top: 30px; color: var(--mtd-muted); font-size: .88rem; }
.mtd-native-layout--maintenance .article-content h2, .mtd-native-layout--event .article-content h2 { color: var(--mtd-ink) !important; }
.mtd-native-layout--maintenance .article-content .news-facts p { border-color: color-mix(in srgb, var(--mtd-warning, #c58a16) 40%, var(--mtd-line)); background: color-mix(in srgb, var(--mtd-warning, #c58a16) 10%, var(--mtd-surface)); }
.mtd-native-layout--event .article-content .news-facts p { background: var(--mtd-primary-soft); }
.mtd-native-layout--event .article-content .news-cta a { background: var(--mtd-primary) !important; }
.mtd-native-layout--roadmap .article-content h2 { display: flex; align-items: center; gap: 10px; font-size: .95rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mtd-muted) !important; }
.mtd-native-layout--roadmap .article-content h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mtd-primary); }
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--maintenance, body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--status { --mtd-news-accent: var(--mtd-warning); }
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card.mtd-native-layout--event { --mtd-news-accent: color-mix(in srgb, var(--mtd-primary) 38%, #7c3aed); }

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-checklist { margin: 14px 0 22px; padding: 0; list-style: none; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-checklist > li { position: relative; margin: 0 0 8px !important; padding: 9px 12px 9px 40px; border-radius: 10px; background: var(--mtd-surface-soft); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-checklist > li::before { content: "\f00c"; position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: color-mix(in srgb, var(--mtd-success, #2f9e5b) 16%, transparent); color: var(--mtd-success, #2f9e5b); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); margin: 16px 0 22px; border: 1px solid var(--mtd-line); border-radius: 12px; overflow: hidden; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms dt { padding: 10px 14px; background: var(--mtd-surface-soft); border-bottom: 1px solid var(--mtd-line); font-weight: 800; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--mtd-line); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms dt:last-of-type, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms dd:last-of-type { border-bottom: 0; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-compare thead th { background: var(--mtd-primary-soft) !important; color: var(--mtd-primary) !important; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-compare tbody th { width: 28%; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-status { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 600; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--mtd-line); border-radius: 10px; background: var(--mtd-surface); color: var(--mtd-primary) !important; font-weight: 700; text-decoration: none !important; }
.mtd-native-layout--glossary .article-content h2 { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--mtd-primary-soft); color: var(--mtd-primary) !important; font-size: 1.1rem !important; }
.mtd-native-layout--checklist .article-content h2 { font-size: .9rem !important; letter-spacing: .08em; text-transform: uppercase; color: var(--mtd-muted) !important; }
.mtd-native-layout--checklist .article-content .doc-checklist > li { background: var(--mtd-surface); border: 1px solid var(--mtd-line); }
.mtd-native-layout--checklist .article-content .doc-checklist > li::before { content: ""; width: 18px; height: 18px; border: 2px solid color-mix(in srgb, var(--mtd-primary) 50%, transparent); border-radius: 5px; background: var(--mtd-surface); }
.mtd-native-layout--comparison .article-content .doc-compare td, .mtd-native-layout--comparison .article-content .doc-compare thead th:not(:first-child) { text-align: center; }
.mtd-native-layout--security .article-content h2 { color: #b42323 !important; }
.mtd-native-layout--policy .article-content { counter-reset: clause; }
.mtd-native-layout--policy .article-content h2 { counter-increment: clause; }
.mtd-native-layout--policy .article-content h2::before { content: counter(clause) ". "; color: var(--mtd-muted); }
@media (max-width: 575.98px) {
  body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms { grid-template-columns: minmax(0, 1fr); }
  body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-terms dt { border-bottom: 0; padding-bottom: 2px; }
}

/* ---- 1.6.0: help-centre video block (poster + play; the player loads on click) ---- */
body[data-templatefile="update"]:not(.login) .article-content .news-video { margin: 28px 0; }
body[data-templatefile="update"]:not(.login) .article-content .news-video__poster, body[data-templatefile="update"]:not(.login) .article-content .news-video__file, body[data-templatefile="update"]:not(.login) .article-content .news-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #14131a; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); }
body[data-templatefile="update"]:not(.login) .article-content .news-video--4x3 .news-video__poster, body[data-templatefile="update"]:not(.login) .article-content .news-video--4x3 .news-video__file, body[data-templatefile="update"]:not(.login) .article-content .news-video--4x3 .news-video__frame { aspect-ratio: 4 / 3; }
body[data-templatefile="update"]:not(.login) .article-content .news-video--1x1 .news-video__poster, body[data-templatefile="update"]:not(.login) .article-content .news-video--1x1 .news-video__file, body[data-templatefile="update"]:not(.login) .article-content .news-video--1x1 .news-video__frame { aspect-ratio: 1 / 1; }
body[data-templatefile="update"]:not(.login) .article-content .news-video--9x16 .news-video__poster, body[data-templatefile="update"]:not(.login) .article-content .news-video--9x16 .news-video__file, body[data-templatefile="update"]:not(.login) .article-content .news-video--9x16 .news-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
body[data-templatefile="update"]:not(.login) .article-content .news-video__poster img, body[data-templatefile="update"]:not(.login) .article-content .news-video__file, body[data-templatefile="update"]:not(.login) .article-content .news-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
body[data-templatefile="update"]:not(.login) .article-content .news-video__poster--blank { background: linear-gradient(135deg, var(--mtd-primary), color-mix(in srgb, var(--mtd-primary) 55%, #0b1220)); }
body[data-templatefile="update"]:not(.login) .article-content .news-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
body[data-templatefile="update"]:not(.login) .article-content .news-video__frame video { object-fit: contain; background: #0b1220; }
body[data-templatefile="update"]:not(.login) .article-content .news-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--mtd-primary); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease; }
body[data-templatefile="update"]:not(.login) .article-content 
body[data-templatefile="update"]:not(.login) .article-content .news-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); }
body[data-templatefile="update"]:not(.login) .article-content .news-video figcaption { margin-top: 10px; color: var(--mtd-muted); font-size: .88rem; text-align: center; }

body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video { margin: 28px 0; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__poster, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__file, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #14131a; box-shadow: 0 12px 30px rgba(15, 23, 42, .18); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--4x3 .doc-video__poster, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--4x3 .doc-video__file, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--4x3 .doc-video__frame { aspect-ratio: 4 / 3; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--1x1 .doc-video__poster, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--1x1 .doc-video__file, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--1x1 .doc-video__frame { aspect-ratio: 1 / 1; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--9x16 .doc-video__poster, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--9x16 .doc-video__file, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video--9x16 .doc-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__poster img, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__file, body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__poster--blank { background: linear-gradient(135deg, var(--mtd-primary), color-mix(in srgb, var(--mtd-primary) 55%, #0b1220)); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__frame video { object-fit: contain; background: #0b1220; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--mtd-primary); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease; }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content 
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); }
body[data-templatefile="knowledgebase-article"]:not(.login) .article-content .doc-video figcaption { margin-top: 10px; color: var(--mtd-muted); font-size: .88rem; text-align: center; }

/* Testimonial grid, wall and spotlight layouts (1.6.0): the carousel card, outside the carousel */
.sec.testimonials .testimonials-grid .testimonial-item { background-color: #fff; box-shadow: 0 4px 6px 0 rgba(0, 11, 40, .1); border: 1px solid #d5dce5; padding: 30px; border-radius: .25rem; }
.sec.testimonials .testimonials-grid .testimonial-item .quote { display: block; margin-bottom: 20px; }
.sec.testimonials .testimonials-grid .testimonial-item .quote [class*="fa-"] { font-size: 26px; text-align: left; color: var(--primary, #4f56d9); }
.sec.testimonials .testimonials-grid .testimonial-item .readmore { font-size: 80%; }
.sec.testimonials .testimonials-grid .testimonial-item .author-info { display: flex; align-items: center; margin-top: 15px; }
.sec.testimonials .testimonials-grid .testimonial-item .author-img { margin-right: 10px; }
.sec.testimonials .testimonials-grid .testimonial-item .author-img img { width: 50px; height: 50px; max-width: 50px; max-height: 50px; border: 2px solid #fff; border-radius: 100%; object-fit: cover; }
.sec.testimonials .testimonials-grid .testimonial-item .author-name-link span { display: block; }
.sec.testimonials .testimonials-grid .testimonial-item .author-name-link span.link { margin-top: -5px; }
.sec.testimonials .testimonials-grid .testimonial-item .author-name-link span.link a { font-size: 13px; }
.sec.testimonials .testimonials-grid .testimonial-item .author-name-link span.rating { font-size: 60%; color: #fedc45; }
.sec.testimonials.testimonials--spotlight .testimonials-carousel .owl-stage-outer { padding: 30px 0; }
.sec.testimonials.testimonials--spotlight .testimonials-carousel .owl-item.active.center .testimonial-item { transform: none; }
@media (min-width: 992px) { .sec.testimonials.testimonials--spotlight .testimonials-carousel .owl-item.active .testimonial-item { opacity: 1; } }
body.dark-mode:not(.login) .sec.faqs .faqs-search .form-control { background:linear-gradient(145deg, color-mix(in srgb, var(--mtd-surface, #111c2d) 88%, transparent), color-mix(in srgb, var(--mtd-page, #08111f) 82%, transparent)); border-color:var(--mtd-dark-card-border, rgba(148, 163, 184, .28)); color:var(--mtd-ink,#f8fafc); box-shadow:none; }
body.dark-mode:not(.login) .sec.faqs .faqs-search .form-control::placeholder { color:rgba(226, 232, 240, .55); }
body.dark-mode:not(.login) .sec.faqs .faqs-search > i { color:#cbd5e1; }
/* the theme-preview bar an administrator sees when this browser carries a ?systpl override */
.serepok-theme-preview-bar { background: #4a3b8f; color: #fff; font-size: 13px; }
.serepok-theme-preview-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 36px; }
.serepok-theme-preview-bar span { display: inline-flex; align-items: center; gap: 8px; }
.serepok-theme-preview-bar strong { color: #fff; }
.serepok-theme-preview-bar a { color: #fff; font-weight: 600; text-decoration: underline; display: inline-flex; align-items: center; gap: 6px; }

/* ── Management-level portal: facts, the areas chooser and the switcher ───────
   Serepok's cards already carry the frame, so these are rows and labelled
   values rather than boxes -- a bordered tile inside MTD-card would be a card
   inside a card. Colours come from the theme's own variables so dark mode and
   any recoloured palette follow without a second set of rules. */
.wbams-people-fact { padding: 12px 0; }
.wbams-people-fact > span {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted, #6c757d);
}
.wbams-people-fact > strong { display: block; font-size: 16px; font-weight: 600; }
.wbams-people-fact--wide { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-color, #e6e6e6); }

.wbams-people-areas { display: flex; flex-direction: column; }
.wbams-people-area {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 14px 4px;
	border-top: 1px solid var(--border-color, #e6e6e6);
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease, padding-left .15s ease;
}
.wbams-people-areas > .wbams-people-area:first-child { border-top: 0; }
.wbams-people-area:hover,
.wbams-people-area:focus-visible { background: var(--bg-subtle, rgba(0, 0, 0, .035)); padding-left: 10px; color: inherit; text-decoration: none; }
.wbams-people-area > span { font-size: 14px; color: var(--text-muted, #6c757d); }
.wbams-people-area::after {
	content: "\f054";
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: auto;
	font-size: 11px;
	opacity: .5;
}

.wbams-people-switch > span {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-muted, #6c757d);
}
.wbams-people-areas--inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.wbams-people-areas--inline > .wbams-people-area {
	border-top: 0;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--bg-subtle, rgba(0, 0, 0, .04));
	font-size: 14px;
}
.wbams-people-areas--inline > .wbams-people-area:hover,
.wbams-people-areas--inline > .wbams-people-area:focus-visible { padding-left: 14px; }
.wbams-people-areas--inline > .wbams-people-area::after { margin-left: 4px; }

@media (max-width: 575px) {
	.wbams-people-area { flex-wrap: wrap; }
	.wbams-people-area > span { display: block; }
	.wbams-people-areas--inline > .wbams-people-area { flex: 1 1 auto; justify-content: center; }
}

/* Update categories (WBAMS 1.7.0) */
.mtd-news-categories { flex-wrap: wrap; margin-bottom: 20px; }
/* Featured is a state the newsroom has given the story, not another category to filter by,
   so it is amber rather than the accent colour the category chip beside it uses. */
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__featured { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; color: var(--mtd-warning, #b45309); background: color-mix(in srgb, var(--mtd-warning, #b45309) 14%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__featured i { font-size: .62rem; }
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__category { align-self: flex-start; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; color: var(--mtd-primary, #1769ff); background: color-mix(in srgb, var(--mtd-primary, #1769ff) 12%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
body[data-templatefile="updates"]:not(.login) .mtd-news-index .mtd-news-card__category:hover { text-decoration: none; filter: brightness(.95); }

/* Events (WBAMS 1.7.0) */
.mtd-events__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.mtd-events__tabs { gap: 8px; }
.mtd-events__tabs .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--ui-block-border-color, rgba(15, 23, 42, .12)); border-radius: 999px; color: inherit; }
.mtd-events__tabs .nav-link.active { border-color: var(--mtd-primary, #1769ff); background: var(--mtd-primary, #1769ff); color: #fff; }
.mtd-events__tabs .nav-link.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }
.mtd-event-card__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mtd-events__filter select { min-width: 200px; }
.mtd-event-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.mtd-event-card:hover { transform: translateY(-3px); }
.mtd-event-card.is-past { opacity: .85; }
.mtd-event-card__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127, 127, 127, .08); }
.mtd-event-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mtd-event-card__media.is-cover { background: linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1769ff) 14%, transparent), color-mix(in srgb, var(--mtd-primary, #1769ff) 4%, transparent)); }
.mtd-event-card__art { color: var(--mtd-primary, #1769ff); font-size: 96px; opacity: .18; }
.mtd-event-date { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: center; min-width: 60px; padding: 8px 10px; border-radius: 12px; background: var(--ui-block-bg, #fff); line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.mtd-event-date--static { position: static; box-shadow: none; border: 1px solid var(--ui-block-border-color, rgba(0, 0, 0, .1)); }
.mtd-event-date__month { color: var(--mtd-primary, #1769ff); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mtd-event-date__day { margin-top: 3px; font-size: 24px; font-weight: 800; }
.mtd-event-date__year { margin-top: 3px; color: var(--text-faded-color, #9ca3af); font-size: 10px; font-weight: 700; }
.mtd-event-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--mtd-primary, #1769ff); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mtd-event-card__title a { color: inherit; }
.mtd-event-card__summary { color: var(--text-faded-color, #6b7280); }
.mtd-event-card__facts { margin: 0 0 14px; padding: 0; list-style: none; color: var(--text-faded-color, #6b7280); font-size: 13px; }
.mtd-event-card__facts i { width: 16px; color: var(--mtd-primary, #1769ff); }
.mtd-events__empty > i { margin-bottom: 12px; color: var(--mtd-primary, #1769ff); font-size: 36px; }
.mtd-event-info__list dt { margin-top: 12px; color: var(--text-faded-color, #9ca3af); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.mtd-event-info__list dt i { width: 16px; color: var(--mtd-primary, #1769ff); }
.mtd-event-info__list dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.mtd-event-info .btn-block + .btn-block { margin-top: 8px; }

/* Events section (UpcomingEvents): the next events with a date tile each. */
.sec.events-sec .events-sec__head { max-width: 760px; margin: 0 auto 28px; }
.sec.events-sec .events-sec__caption { display: inline-block; margin-bottom: 8px; color: var(--mtd-primary, #1769ff); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sec.events-sec .events-sec__title { margin: 0 0 8px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.sec.events-sec .events-sec__subtitle { margin: 0; color: var(--text-faded-color, #6b7280); font-size: 16px; line-height: 1.6; }
.sec.events-sec .events-sec__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.sec.events-sec .events-sec__grid--1 { max-width: 420px; margin: 0 auto; }
.sec.events-sec .events-sec__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-block-border-color, rgba(15, 23, 42, .08)); border-radius: 16px; background: var(--ui-block-bg, #fff); box-shadow: 0 8px 24px rgba(15, 23, 42, .05); color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.sec.events-sec .events-sec__item:hover { transform: translateY(-3px); border-color: rgba(23, 105, 255, .45); box-shadow: 0 12px 32px rgba(15, 23, 42, .14); text-decoration: none; }
.sec.events-sec .events-sec__item.is-past { opacity: .85; }
.sec.events-sec .events-sec__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127, 127, 127, .08); }
.sec.events-sec .events-sec__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sec.events-sec .events-sec__item:hover .events-sec__media img { transform: scale(1.04); }
.sec.events-sec .events-sec__media.is-cover { background: linear-gradient(135deg, color-mix(in srgb, var(--mtd-primary, #1769ff) 12%, transparent), color-mix(in srgb, var(--mtd-primary, #1769ff) 4%, transparent)); }
.sec.events-sec .events-sec__media.is-cover > i { color: var(--mtd-primary, #1769ff); font-size: 80px; opacity: .18; }
.sec.events-sec .events-sec__date { position: absolute; left: 14px; top: 14px; display: flex; flex-direction: column; align-items: center; min-width: 58px; padding: 7px 9px; border-radius: 13px; background: var(--ui-block-bg, #fff); line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.sec.events-sec .events-sec__month { color: var(--mtd-primary, #1769ff); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sec.events-sec .events-sec__day { margin-top: 3px; color: inherit; font-size: 24px; font-weight: 800; }
.sec.events-sec .events-sec__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.sec.events-sec .events-sec__when { color: var(--mtd-primary, #1769ff); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sec.events-sec .events-sec__name { margin: 0; color: inherit; font-size: 18px; font-weight: 800; line-height: 1.3; }
.sec.events-sec .events-sec__where, .sec.events-sec .events-sec__summary { color: var(--text-faded-color, #6b7280); font-size: 14px; line-height: 1.55; }
.sec.events-sec .events-sec__where i { width: 14px; color: var(--mtd-primary, #1769ff); }
.sec.events-sec .events-sec__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sec.events-sec .events-sec__past { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(127, 127, 127, .12); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.sec.events-sec .events-sec__more { margin-top: auto; padding-top: 6px; color: var(--mtd-primary, #1769ff); font-size: 13px; font-weight: 800; }
.sec.events-sec .events-sec__empty { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 26px; border: 1px dashed var(--ui-block-border-color, rgba(15, 23, 42, .12)); border-radius: 16px; color: var(--text-faded-color, #6b7280); }
.sec.events-sec .events-sec__footer { margin-top: 28px; }
.sec.events-sec--list .events-sec__grid { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; gap: 14px; }
.sec.events-sec--list .events-sec__item { flex-direction: row; }
.sec.events-sec--list .events-sec__media { flex: 0 0 240px; aspect-ratio: auto; min-height: 150px; }
@media (max-width: 767.98px) {
  .sec.events-sec--list .events-sec__item { flex-direction: column; }
  .sec.events-sec--list .events-sec__media { flex-basis: auto; aspect-ratio: 16 / 9; }
}

/* Features: cover images (WBAMS 1.7.0) */
.sec.features .feature-item.cover { flex-direction: column; padding: 0 !important; overflow: hidden; }
.sec.features .feature-item.cover .feature-graphic { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; }
.sec.features .feature-item.cover .feature-graphic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sec.features .feature-item.cover .feature-content { padding: 20px 22px 22px; }
@media (min-width: 992px) { .sec.features .mtd-col-lg-5 { flex: 0 0 20%; max-width: 20%; } }
/* Giving: cause pictures, story and progress (WBAMS 1.7.0) */
.sp-give-card__media { display: block; margin: -1px -1px 12px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: inherit; }
.sp-give-card__media img { width: 100%; height: 100%; object-fit: cover; }
.sp-give-progress { display: grid; gap: 6px; margin-top: 10px; }
.sp-give-progress .progress, .sp-give-story .progress { height: 8px; margin-bottom: 6px; border-radius: 999px; }
.sp-give-story { overflow: hidden; padding: 0; }
.sp-give-story__image { display: block; width: 100%; max-height: 380px; object-fit: cover; }
.sp-give-story__body { padding: 20px 24px; }

/* Newsletter answers (WBAMS 1.7.0) */
.mtd-newsletter-result { max-width: 560px; margin: 0 auto; padding: clamp(28px, 4vw, 44px) !important; }
.mtd-newsletter-result__icon { display: inline-flex; width: 64px; height: 64px; margin: 0 auto 16px; align-items: center; justify-content: center; border-radius: 50%; color: var(--mtd-primary, #1769ff); background: color-mix(in srgb, var(--mtd-primary, #1769ff) 12%, transparent); font-size: 26px; }
.mtd-newsletter-result__icon.is-problem { color: #b45309; background: color-mix(in srgb, #f59e0b 16%, transparent); }
.mtd-newsletter-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }

/* Checkboxes and radios drawn by iCheck (Remember Me, terms, options).
   theme.css sizes and colors the box with --icheck-* values that nothing defined, and
   style.min.css forces width, height and background to auto/none, so the box had no size
   and only showed up once ticked. The values sit on body so dark mode's input colors,
   which are set on body, reach them. The tick is drawn with borders, not an icon font. */
body {
    --icheck-size: 18px;
    --icheck-border-width: 1.5px;
    --icheck-border: 1.5px solid var(--input-border-color, #c9ccd6);
    --icheck-border-radius: 5px;
    --icheck-bg: var(--input-bg, #ffffff);
    --icheck-hover-border-color: var(--mtd-scheme-primary, var(--brand-primary));
    --icheck-active-bg: var(--mtd-scheme-primary, var(--brand-primary));
    --icheck-active-border-color: var(--mtd-scheme-primary, var(--brand-primary));
    --icheck-active-icon-color: #ffffff;
    --icheck-disabled-bg: var(--gray-faded, #f1f2f5);
    --icheck-disabled-border-color: var(--input-border-color, #e1e3e8);
    --checkbox-spacing: 10px;
}

.icheckbox_square-blue,
.iradio_square-blue {
    --spacing-1x: 8px;
    flex: 0 0 var(--icheck-size);
    width: var(--icheck-size) !important;
    height: var(--icheck-size) !important;
    background: var(--icheck-bg) !important;
}

.icheckbox_square-blue.checked,
.iradio_square-blue.checked {
    background: var(--icheck-active-bg) !important;
}

.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled {
    background: var(--icheck-disabled-bg) !important;
}

.icheckbox_square-blue:focus-within,
.iradio_square-blue:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--icheck-active-bg) 25%, transparent);
}

.icheckbox_square-blue::before,
.iradio_square-blue::before {
    content: "" !important;
    font-family: inherit !important;
    font-size: 0 !important;
}

.icheckbox_square-blue::before {
    top: 50%;
    left: 50%;
    width: 5px !important;
    height: 10px !important;
    margin: -7px 0 0 -3px;
    border: solid var(--icheck-active-icon-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.6) !important;
}

.icheckbox_square-blue.checked::before {
    transform: rotate(45deg) scale(1) !important;
}

/* ------------------------------------------------------------------------
   Previous / next update.

   A newsroom is a sequence, and every article used to be a dead end with a
   "back to updates" button. Two equal tiles; the second keeps its own column
   so a missing neighbour leaves a gap on its own side rather than sliding the
   other one across the page.
   ------------------------------------------------------------------------ */
body:not(.login) .mtd-update-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; }
body:not(.login) .mtd-update-nav__link { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--mtd-muted, #9ba8bb) 22%, transparent); border-radius: 14px; background: var(--mtd-surface-soft, rgba(127, 127, 127, .06)); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
body:not(.login) .mtd-update-nav__link--next { text-align: right; }
body:not(.login) .mtd-update-nav__link.is-empty { border-style: dashed; background: none; }
body:not(.login) a.mtd-update-nav__link:hover,
body:not(.login) a.mtd-update-nav__link:focus-visible { border-color: var(--mtd-primary, #2f6fed); transform: translateY(-1px); text-decoration: none; }
body:not(.login) .mtd-update-nav__label { color: var(--mtd-muted, #9ba8bb); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
body:not(.login) .mtd-update-nav__title { font-size: 1rem; font-weight: 700; line-height: 1.35; }
body:not(.login) .mtd-update-nav__date { color: var(--mtd-muted, #9ba8bb); font-size: .8rem; }
@media (max-width: 575.98px) {
  body:not(.login) .mtd-update-nav { grid-template-columns: 1fr; }
  body:not(.login) .mtd-update-nav__link--next { text-align: left; }
  body:not(.login) .mtd-update-nav__link.is-empty { display: none; }
}