/* Auto-extracted from PHP — do not edit PHP for these rules; change this file. */

/* Guest auth (login/register): same field validation as dashboard / create release */
body.guest-auth-layout .validation-field-error {
    border-color: rgba(248, 113, 113, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
}
.light-mode body.guest-auth-layout .validation-field-error {
    background: rgba(254, 226, 226, 0.85) !important;
}
body.guest-auth-layout .validation-field-error-message:not(.d-none) {
    color: #b91c1c;
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    margin-top: 8px;
}
.dark-mode body.guest-auth-layout .validation-field-error-message:not(.d-none) {
    color: #fca5a5;
}
body.guest-auth-layout .guest-auth-success-message {
    color: #15803d;
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    margin-top: 8px;
}
.light-mode body.guest-auth-layout .guest-auth-success-message {
    color: #166534;
}
/* Flatten legacy flash banners in guest auth to text-only (avoid bulky alert-danger boxes) */
body.guest-auth-layout .login-block > .alert,
body.guest-auth-layout .modal-body > .alert {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 10px !important;
    margin-bottom: 8px !important;
}
body.guest-auth-layout .login-block > .alert.alert-danger,
body.guest-auth-layout .modal-body > .alert.alert-danger {
    color: #fca5a5;
}
body.guest-auth-layout .login-block > .alert.alert-success,
body.guest-auth-layout .modal-body > .alert.alert-success {
    color: #86efac;
}
.light-mode body.guest-auth-layout .login-block > .alert.alert-danger,
.light-mode body.guest-auth-layout .modal-body > .alert.alert-danger {
    color: #b91c1c;
}
.light-mode body.guest-auth-layout .login-block > .alert.alert-success,
.light-mode body.guest-auth-layout .modal-body > .alert.alert-success {
    color: #15803d;
}
/* Guest auth forms: even field spacing; kill global .btn-main { margin: 30px auto 0 } on submit */
body.guest-auth-layout .login-block #guest-auth-login-form .form-group,
body.guest-auth-layout .login-block #guest-auth-register-form .form-group {
    margin-bottom: 12px;
}
body.guest-auth-layout .login-block #guest-auth-login-form .login-bix {
    margin-bottom: 12px;
    margin-top: 0;
}
/* Login + Register actions: keep both buttons on the same full-width auth grid. */
body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"],
body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"] {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    height: 54px !important;
    justify-content: center;
    line-height: 1.2 !important;
    margin: 0 auto !important;
    max-height: 54px !important;
    min-height: 54px !important;
    padding-bottom: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 0 !important;
    transform: none !important;
    transition: none !important;
    width: 100%;
}
.light-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:hover,
.light-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:focus,
.light-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:focus-visible,
.light-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:active,
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:hover,
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:focus,
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:focus-visible,
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form button.btn-main[type="submit"]:active,
.light-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:hover,
.light-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:focus,
.light-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:focus-visible,
.light-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:active,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:hover,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:focus,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:focus-visible,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form button.btn-main[type="submit"]:active {
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}
/* Google Sign-In: g_id_onload lives outside the button wrap (see login/register) — only .g_id_signin inside wrap */
#guest-auth-login-form,
#guest-auth-register-form {
    position: relative;
}
.guest-auth-gid-onload {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}
/* Google Sign-In: use the branded button as the real click target and launch GIS via JS.
   This keeps the design stable and avoids Chrome issues with hidden iframe overlays. */
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap {
    box-sizing: border-box;
    display: block;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 12px;
    max-height: 54px !important;
    min-height: 54px !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap + .row,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap + .row {
    margin-bottom: 0;
    margin-top: 0;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap + p {
    margin-top: 10px !important;
}
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap + .row + p.mb-3 {
    margin-top: 10px !important;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap + p {
    margin-top: 10px !important;
}
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap + .row {
    margin-top: 0;
}
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap + .row + p.mb-3 {
    margin-top: 10px !important;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface {
    align-items: center;
    appearance: none;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 12px;
    height: 54px;
    justify-content: center;
    left: 0;
    line-height: 1.2;
    padding: 0 18px;
    pointer-events: none;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1;
}
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface {
    background: #171923;
    border-color: #2b3040;
    color: #f3f4f6;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface.validation-field-error,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface.validation-field-error {
    background: #ffffff !important;
    border-color: rgba(248, 113, 113, 0.95) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
}
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface.validation-field-error,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface.validation-field-error {
    background: #171923 !important;
    border-color: rgba(248, 113, 113, 0.95) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35) !important;
}
body.guest-auth-layout .login-block .guest-auth-google-error.validation-field-error-message {
    margin-bottom: 10px;
    margin-top: -4px;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface__icon,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface__icon {
    display: inline-flex;
    flex: 0 0 auto;
    height: 22px;
    width: 22px;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-surface__label,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-surface__label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap:focus-within .guest-auth-google-surface,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap:focus-within .guest-auth-google-surface {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.22);
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .guest-auth-google-trigger,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .guest-auth-google-trigger {
    pointer-events: auto;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin {
    display: none !important;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin > div,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin > div,
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin .S9gUrf-YoZ4jf,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin .S9gUrf-YoZ4jf,
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin .S9gUrf-YoZ4jf > div,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin .S9gUrf-YoZ4jf > div,
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin [role="button"],
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin [role="button"],
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin .L5Fo6c-bF1uUb,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin .L5Fo6c-bF1uUb {
    display: none !important;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-google-wrap .g_id_signin iframe,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-google-wrap .g_id_signin iframe {
    display: none !important;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap {
    box-sizing: border-box;
    display: block;
    height: 54px;
    margin-bottom: 14px;
    margin-top: 0;
    max-height: 54px !important;
    min-height: 54px !important;
    overflow: hidden;
    position: relative;
    width: 100%;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface {
    align-items: center;
    appearance: none;
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    box-sizing: border-box;
    color: #3c4043;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 12px;
    height: 54px;
    justify-content: center;
    line-height: 1.2;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface {
    background: #171923;
    border-color: #2b3040;
    color: #f3f4f6;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:hover,
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:focus,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:hover,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:focus {
    border-color: #8ab4f8;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.22);
    color: #3c4043;
    text-decoration: none;
}
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:hover,
.dark-mode body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:focus,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:hover,
.dark-mode body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface:focus {
    color: #f3f4f6;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface.is-disabled,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
    pointer-events: none;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface__icon,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface__icon {
    align-items: center;
    color: #1db954;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 22px;
    height: 22px;
    justify-content: center;
    line-height: 1;
    width: 22px;
}
body.guest-auth-layout .login-block #guest-auth-login-form .guest-auth-spotify-wrap .guest-auth-spotify-surface__label,
body.guest-auth-layout .login-block #guest-auth-register-form .guest-auth-spotify-wrap .guest-auth-spotify-surface__label {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Forgot password: same shell as dashboard #cngpasspop (modal-content > change-pass-block); single full-width primary */
body.guest-auth-layout #guestForgotPasswordModal .change-pass-block .btn-group {
    box-sizing: border-box;
    display: flex;
    max-width: 100%;
    width: 100%;
}
body.guest-auth-layout #guestForgotPasswordModal .change-pass-block .btn-group .btn-main {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-body {
    box-sizing: border-box;
    max-width: 100%;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    width: 100%;
}
body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-header {
    display: flex;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-header .btn-close {
    flex-shrink: 0;
    margin: 0 !important;
    margin-left: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
}
/* Modals: match dashboard (loggedin-header-inline.css .modal-content — same shadow) */
body.guest-auth-layout .modal-content {
    overflow: visible !important;
    position: relative !important;
}
.light-mode body.guest-auth-layout .modal-content {
    background: #fff !important;
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1) !important;
}
.dark-mode body.guest-auth-layout .modal-content {
    background: #111119 !important;
    box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1) !important;
}

/* .btn-close: match dashboard (loggedin-header-inline) — transparent circle, FA icon via ::before; no dark hover blob in light mode */
body.guest-auth-layout .modal .btn-close i,
body.guest-auth-layout .change-pass-block .btn-close i {
    display: none !important;
}
.light-mode body.guest-auth-layout .modal .btn-close,
.light-mode body.guest-auth-layout .change-pass-block .btn-close {
    align-items: center;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    color: #252525 !important;
    display: inline-flex;
    font-size: 0;
    height: 28px;
    justify-content: center;
    opacity: 1;
    padding: 0;
    position: absolute;
    right: 12px;
    text-shadow: none;
    top: 12px;
    transition: 0.4s linear;
    width: 28px;
}
.light-mode body.guest-auth-layout .modal .btn-close::before,
.light-mode body.guest-auth-layout .change-pass-block .btn-close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}
.light-mode body.guest-auth-layout .modal .btn-close:hover,
.light-mode body.guest-auth-layout .change-pass-block .btn-close:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #252525 !important;
    transform: none !important;
}
.dark-mode body.guest-auth-layout .modal .btn-close,
.dark-mode body.guest-auth-layout .change-pass-block .btn-close {
    align-items: center;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    box-shadow: none !important;
    color: #fff !important;
    display: inline-flex;
    font-size: 0;
    height: 28px;
    justify-content: center;
    opacity: 1;
    padding: 0;
    position: absolute;
    right: 12px;
    text-shadow: none;
    top: 12px;
    transition: 0.4s linear;
    width: 28px;
}
.dark-mode body.guest-auth-layout .modal .btn-close::before,
.dark-mode body.guest-auth-layout .change-pass-block .btn-close::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}
.dark-mode body.guest-auth-layout .modal .btn-close:hover,
.dark-mode body.guest-auth-layout .change-pass-block .btn-close:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: #fff !important;
    transform: none !important;
}
.dark-mode body.guest-auth-layout .modal .btn-close:focus,
.dark-mode body.guest-auth-layout .change-pass-block .btn-close:focus {
    box-shadow: none !important;
}
/* Set-password modal: close in .guest-auth-modal-header — flex layout, not absolute */
.light-mode body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-header .btn-close,
.dark-mode body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-header .btn-close {
    margin-left: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
}
@media (max-width: 767px) {
    .light-mode body.guest-auth-layout .modal .btn-close,
    .light-mode body.guest-auth-layout .change-pass-block .btn-close,
    .dark-mode body.guest-auth-layout .modal .btn-close,
    .dark-mode body.guest-auth-layout .change-pass-block .btn-close {
        height: 24px;
        right: 10px;
        top: 10px;
        width: 24px;
    }
    body.guest-auth-layout #guestSetPasswordModal .guest-auth-modal-header .btn-close {
        height: 28px;
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: 28px;
    }
}

/* Forgot modal: Request New Password — no white border, no layout shift on hover */
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"],
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"] {
    -webkit-tap-highlight-color: transparent;
    animation: none !important;
    border: 1px solid #ff002a !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    filter: none !important;
    min-height: 44px;
    opacity: 1 !important;
    outline: none !important;
    padding: 12px 16px !important;
    transform: none !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-property: none !important;
    transition-timing-function: ease !important;
}
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:hover,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus-visible,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:active,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:hover,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus-visible,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:active {
    animation: none !important;
    background: #ff002a !important;
    background-image: none !important;
    border: 1px solid #ff002a !important;
    box-shadow: none !important;
    color: #fff !important;
    filter: none !important;
    opacity: 1 !important;
    outline: none !important;
    padding: 12px 16px !important;
    transform: none !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-property: none !important;
}

body.guest-auth-layout .change-pass-block > .alert {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 8px !important;
    padding: 0 0 10px !important;
}
body.guest-auth-layout .change-pass-block > .alert.alert-danger {
    color: #fca5a5;
}
body.guest-auth-layout .change-pass-block > .alert.alert-success {
    color: #86efac;
}
.light-mode body.guest-auth-layout .change-pass-block > .alert.alert-danger {
    color: #b91c1c;
}
.light-mode body.guest-auth-layout .change-pass-block > .alert.alert-success {
    color: #15803d;
}
.dark-mode body.guest-auth-layout .modal-content .change-pass-block {
    color: rgba(255, 255, 255, 0.92);
}

/* Text fields: same fill / border / radius / padding as logged-in dashboard (loggedin-sites-inline.css .form-control) */
.light-mode body.guest-auth-layout .login-block .form-control,
.light-mode body.guest-auth-layout .modal-content .form-control,
.light-mode body.guest-auth-layout .change-pass-block .form-control {
    background: #f1f1f1 !important;
    border: 1px solid #f1f1f1 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 1rem !important;
}
.dark-mode body.guest-auth-layout .login-block .form-control,
.dark-mode body.guest-auth-layout .modal-content .form-control,
.dark-mode body.guest-auth-layout .change-pass-block .form-control {
    background: #161620 !important;
    border: 1px solid #161620 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    color: #fff !important;
    padding: 1rem !important;
}
.light-mode body.guest-auth-layout .login-block .form-control::placeholder,
.light-mode body.guest-auth-layout .modal-content .form-control::placeholder {
    color: rgba(0, 0, 0, 0.42);
}
.dark-mode body.guest-auth-layout .login-block .form-control::placeholder,
.dark-mode body.guest-auth-layout .modal-content .form-control::placeholder {
    color: rgba(255, 255, 255, 0.42);
}
body.guest-auth-layout .login-block .form-control:read-only,
body.guest-auth-layout .modal-content .form-control:read-only {
    color: gray !important;
}
/* Keep field-level validation visible over dashboard base (same as dashboard inputs) */
.light-mode body.guest-auth-layout .login-block .form-control.validation-field-error,
.light-mode body.guest-auth-layout .modal-content .form-control.validation-field-error,
.light-mode body.guest-auth-layout .change-pass-block .form-control.validation-field-error {
    background: rgba(254, 226, 226, 0.85) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
    color: #000 !important;
}
.dark-mode body.guest-auth-layout .login-block .form-control.validation-field-error,
.dark-mode body.guest-auth-layout .modal-content .form-control.validation-field-error,
.dark-mode body.guest-auth-layout .change-pass-block .form-control.validation-field-error {
    background: rgba(248, 113, 113, 0.12) !important;
    border-color: rgba(252, 165, 165, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.2) !important;
    color: #fff !important;
}

/* Guest forms: match dashboard field error styling */
.guest-site .validation-field-error {
    border-color: rgba(248, 113, 113, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.25) !important;
}
.light-mode .guest-site .validation-field-error {
    background: rgba(254, 226, 226, 0.85) !important;
}
.guest-site .validation-field-error-message:not(.d-none) {
    color: #b91c1c;
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    margin-top: 8px;
}
.dark-mode .guest-site .validation-field-error-message:not(.d-none) {
    color: #fca5a5;
}

/* Home download section: notify email — same grid cell as input so the button never shifts */
.download-wrp .guest-app-notify-group {
    position: relative;
}

.download-wrp .guest-app-notify-input-wrap {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.download-wrp .guest-app-notify-input-wrap .form-control {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    min-height: 52px;
    padding-right: 148px;
    width: 100%;
}

.download-wrp .guest-app-notify-input-wrap .guest-app-notify-btn {
    align-self: center;
    bottom: auto;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    margin-right: 8px !important;
    margin-top: 0 !important;
    position: relative;
    top: auto;
    transform: none !important;
    white-space: nowrap;
    z-index: 2;
}

@media (max-width: 575px) {
    .download-wrp .guest-app-notify-input-wrap .form-control {
        font-size: 14px;
        padding-right: 124px;
    }

    .download-wrp .guest-app-notify-input-wrap .guest-app-notify-btn {
        font-size: 14px;
        margin-right: 6px !important;
        padding: 8px 14px;
    }
}

/* Distribute section: prevent logo stretch at any width */
.distribute-wrp .distribute-logos ul li .logo-box {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 90px;
    overflow: hidden;
}
.distribute-wrp .distribute-logos ul li .logo-box img {
    height: auto;
    max-height: 48px;
    max-width: 100%;
    object-fit: contain;
    width: auto;
}

/* ========== from sites/guest/404.php ========== */

.logo{
            margin-bottom: 10px;
        }
        .logo-light {
            display: none;
        }
        .light-mode .logo-light {
            display: block;
        }
        .light-mode .logo-dark {
            display: none;
        }



/* ========== from sites/guest/ArtworkDownloader.php ========== */

/* 13-06-2024 CSS start */
    .dark-mode .tab-informetion .select2-container--default .select2-selection--single .select2-selection__rendered {
        background: #232333;
        border: 1px solid #22202C;
    }
    .select2-results {
        background: #171723;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
         width: 4px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
        background-color: #111119;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background: rgba(255, 0, 42, 0.5); 
    }
    .dark-mode .smartlink-tool-card {
        background: #171723;
        border-color: #22202C;
        color: #ffffff;
    }
    .dark-mode .smartlink-tool-card small:not(.validation-field-error-message) {
        color: #c8ccda !important;
    }
    .smartlink-tool-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 24px;
    }
    .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 50px clamp(16px, 5vw, 70px);
        text-align: center;
    }
    .tool-input-group {
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
    }
    .tool-input-group > .form-control {
        flex: 1 1 auto;
        border-radius: 4px 0 0 4px;
        min-height: 52px;
        min-width: 0;
        width: 1%;
    }
    .tool-input-group > .input-group-append {
        display: flex;
        flex: 0 0 auto;
    }
    .tool-input-group > .input-group-append > .btn {
        align-items: center;
        border-radius: 0 4px 4px 0;
        display: inline-flex;
        justify-content: center;
        min-height: 52px;
        white-space: nowrap;
    }
    .tool-input-group > .input-group-append > .btn.artwork-tool-download-btn {
        column-gap: 1.125rem;
        gap: 1.125rem;
    }
    .artwork-result-image {
        border: 3px solid #ff002a;
        height: 250px;
        margin: auto;
        width: 250px;
    }
    .artwork-tool-benefits {
        align-items: stretch;
        color: #5c6370;
        display: flex;
        flex-direction: column;
        font-size: 14px;
        gap: 0.35rem;
        line-height: 1.55;
        list-style: none;
        margin-top: 1rem !important;
        max-width: 100%;
        padding-left: 0;
        width: 100%;
    }
    .artwork-tool-benefits li {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        justify-content: center;
        margin: 0;
        width: 100%;
    }
    .artwork-tool-benefits-mark {
        flex-shrink: 0;
        line-height: 1;
        text-align: center;
        width: 1.25em;
    }
    .artwork-tool-benefits li > span:last-child {
        flex: 0 1 auto;
        min-width: 0;
        text-align: left;
    }
    .artwork-result-row {
        justify-content: center;
    }
    .artwork-result-panel {
        align-items: center;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .artwork-download-actions {
        align-items: center;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }
    .artwork-download-actions .btn-main {
        align-items: center;
        display: inline-flex;
        gap: 0.6rem;
        justify-content: center;
        max-width: 100%;
        min-width: 0;
        text-align: center;
        white-space: normal;
    }
    .artwork-download-actions .dropdown-menu {
        max-width: min(92vw, 520px);
        text-align: left;
    }
    .artwork-download-actions .dropdown-item {
        align-items: center;
        display: flex;
        gap: 0.65rem;
        white-space: normal;
    }
    .dark-mode .smartlink-tool-card .artwork-tool-benefits {
        color: #c8ccda;
    }
    @media (max-width: 767px) {
        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 32px 18px 18px !important;
        }
        .tool-input-group {
            display: block;
        }
        .tool-input-group > .form-control {
            border-radius: 4px;
            display: block;
            width: 100%;
        }
        .tool-input-group > .input-group-append {
            justify-content: center;
            margin-top: 10px;
            width: 100%;
        }
        .tool-input-group > .input-group-append > .btn {
            border-radius: 4px;
            width: min(100%, 280px);
        }
        .contact-wrpper .contact-block .contact-from {
            padding: 14px 8px !important;
        }
        .smartlink-tool-card {
            padding: 18px 14px;
        }
        .artwork-result-image {
            height: auto;
            max-width: 100%;
        }
        .artwork-result-panel {
            max-width: 100%;
            width: 100%;
        }
        .artwork-download-actions .btn-main {
            width: min(100%, 280px);
        }
        .artwork-download-actions {
            flex-direction: column;
        }
        .artwork-download-actions .dropdown,
        .artwork-download-actions__dropdown {
            align-items: center;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .artwork-download-actions .dropdown-menu.show {
            margin: 10px auto 0 !important;
            max-width: 360px;
            position: static !important;
            transform: none !important;
            width: 100% !important;
        }
        .artwork-tool-benefits {
            margin-top: 1.25rem !important;
        }
    }
    @media (max-width: 575px) {
        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 26px 16px 16px !important;
        }
        .smartlink-generator-intro h1,
        .smartlink-generator-intro h2 {
            font-size: 28px;
        }
        .smartlink-generator-intro small {
            font-size: 13px;
        }
        .smartlink-tool-card {
            padding: 16px 12px;
        }
    }



/* ========== from sites/guest/SCArtworkDownloader.php ========== */

/* 13-06-2024 CSS start */
    .dark-mode .tab-informetion .select2-container--default .select2-selection--single .select2-selection__rendered {
        background: #232333;
        border: 1px solid #22202C;
    }
    .select2-results {
        background: #171723;
    }
    .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar {
         width: 4px;
    }
    .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-track {
        background-color: #111119;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    .select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background: rgba(255, 0, 42, 0.5);
    }
    .dark-mode .smartlink-tool-card {
        background: #171723;
        border-color: #22202C;
        color: #ffffff;
    }
    .dark-mode .smartlink-tool-card small:not(.validation-field-error-message) {
        color: #c8ccda !important;
    }
    .smartlink-tool-card {
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        padding: 24px;
    }
    .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 50px clamp(16px, 5vw, 70px);
        text-align: center;
    }
    .tool-input-group {
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
    }
    .tool-input-group > .form-control {
        flex: 1 1 auto;
        border-radius: 4px 0 0 4px;
        min-height: 52px;
        min-width: 0;
        width: 1%;
    }
    .tool-input-group > .input-group-append {
        display: flex;
        flex: 0 0 auto;
    }
    .tool-input-group > .input-group-append > .btn {
        align-items: center;
        border-radius: 0 4px 4px 0;
        display: inline-flex;
        justify-content: center;
        min-height: 52px;
        white-space: nowrap;
    }
    .artwork-result-image {
        border: 3px solid #ff002a;
        height: 250px;
        margin: auto;
        width: 250px;
    }
    @media (max-width: 767px) {
        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 32px 18px 18px !important;
        }
        .tool-input-group {
            display: block;
        }
        .tool-input-group > .form-control {
            border-radius: 4px;
            display: block;
            width: 100%;
        }
        .tool-input-group > .input-group-append {
            justify-content: center;
            margin-top: 10px;
            width: 100%;
        }
        .tool-input-group > .input-group-append > .btn {
            border-radius: 4px;
            width: min(100%, 280px);
        }
        .contact-wrpper .contact-block .contact-from {
            padding: 14px 8px !important;
        }
        .smartlink-tool-card {
            padding: 18px 14px;
        }
        .artwork-result-image {
            height: auto;
            max-width: 100%;
        }
        .artwork-result-panel {
            max-width: 100%;
            width: 100%;
        }
        .artwork-download-actions .btn-main {
            width: min(100%, 280px);
        }
        .artwork-download-actions {
            flex-direction: column;
        }
        .artwork-download-actions .dropdown,
        .artwork-download-actions__dropdown {
            align-items: center;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .artwork-download-actions .dropdown-menu.show {
            margin: 10px auto 0 !important;
            max-width: 360px;
            position: static !important;
            transform: none !important;
            width: 100% !important;
        }
        .artwork-tool-benefits {
            margin-top: 1.25rem !important;
        }
    }
    @media (max-width: 575px) {
        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 26px 16px 16px !important;
        }
        .smartlink-generator-intro h2 {
            font-size: 28px;
        }
        .smartlink-generator-intro small {
            font-size: 13px;
        }
        .smartlink-tool-card {
            padding: 16px 12px;
        }
    }



/* ========== from sites/guest/anti-fraud.php ========== */

.logo{
            margin-bottom: 10px;
        }
        .logo-light {
            display: none;
        }
        .light-mode .logo-light {
            display: block;
        }
        .light-mode .logo-dark {
            display: none;
        }
		.blogpost ul li::before {
			display: none;
		}



/* ========== from sites/guest/authentication/login.php ========== */

/* Scoped on <body class="guest-auth-layout"> — global body overflow broke marketing pages */
body.guest-auth-layout {
    overflow: hidden !important;
}

/* ========== from sites/guest/authentication/partial/header.php ========== */

.TOS{
            color:#ff002a;
            font-weight: bold;
        }
        .TOS:hover{
            color: rgba(255, 0, 42, 0.53);
        }
        .g_id_signin iframe{
            margin: 0 auto !important;
        }
        .btn-main.cenclebtn {
            background: 0 0;
            background-color: rgba(0, 0, 0, 0);
            background-position-x: 0px;
            background-position-y: 0px;
            background-repeat: repeat;
            background-attachment: scroll;
            background-image: none;
            background-size: auto;
            background-origin: padding-box;
            background-clip: border-box;
            color: #fff;
            border: 1px solid #ff002a;
        }
        .light-mode .btn-main:hover{
            background: #13131b;
            border: 1px solid #13131b;
        }
        .light-mode .btn-main.cenclebtn {
            background: #fff;
            border: 1px solid #ff002a;
            color:#ff002a;
        }
        .light-mode .btn-main.cenclebtn:hover {
            background: #13131b;
            border: 1px solid #13131b;
            color: #fff;
        }
        .btn-main.cenclebtn:hover {
            color: #ff002a;
            background:#fff;
            border: #fff;
        }
        /* IconCaptcha: duplicate of php-markup-shared.css — login/register skip that bundle (GuestSkipAppShellCss) */
        .guest-auth-iconcaptcha-wrap .iconcaptcha-widget{
            margin-left: auto;
            margin-right: auto;
        }
        .iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-circle {
            border-color: #ff002a !important;
            -webkit-animation: spacemedia-captcha-breathing 5s infinite linear !important;
            animation: spacemedia-captcha-breathing 5s infinite linear !important;
        }
        .iconcaptcha-widget.iconcaptcha-init .iconcaptcha-modal__body-circle.iconcaptcha-modal__body-circle--speed {
            -webkit-animation-duration: 2s !important;
            animation-duration: 2s !important;
        }
        .iconcaptcha-widget .iconcaptcha-modal__body-selection > i {
            background: #ff002a !important;
        }
        .iconcaptcha-widget .iconcaptcha-modal__body .captcha-loader {
            border-color: #ff002a !important;
            -webkit-animation: spacemedia-captcha-breathing 2s infinite ease-in-out !important;
            animation: spacemedia-captcha-breathing 2s infinite ease-in-out !important;
        }
        @-webkit-keyframes spacemedia-captcha-breathing {
            0%, 100% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #ff002a; }
            25% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #cc0022; }
            50% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #ff002a; }
            75% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #cc0022; }
        }
        @keyframes spacemedia-captcha-breathing {
            0%, 100% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #ff002a; }
            25% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #cc0022; }
            50% { -webkit-transform: scale(1) translateZ(0); transform: scale(1) translateZ(0); border-color: #ff002a; }
            75% { -webkit-transform: scale(0.8) translateZ(0); transform: scale(0.8) translateZ(0); border-color: #cc0022; }
        }
        .modal-content{
            background: #111119;
            box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: visible;
        }

        .modal-header{
            align-items: center;
            color: white;
            display: flex;
            flex-wrap: nowrap;
            font-weight: bold;
            gap: 12px;
            justify-content: space-between;
            border-bottom: 1px solid rgba(0, 0, 0, 0.55);
        }
        .modal-header .modal-title {
            flex: 1 1 auto;
            margin-bottom: 0;
            min-width: 0;
        }
        .btn-close-modal{
            -webkit-appearance: none;
            align-items: center;
            appearance: none;
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
            border-radius: 4px;
            box-shadow: none !important;
            color: white !important;
            cursor: pointer;
            display: inline-flex !important;
            flex-shrink: 0;
            justify-content: center;
            line-height: 1;
            margin: 0;
            min-height: 49px;
            min-width: 49px;
            padding: 0;
        }
        .btn-close-modal i,
        .btn-close-modal svg {
            color: inherit;
            pointer-events: none;
        }
        .btn-close-modal:hover{
            color: white !important;
            opacity: 0.85;
        }
        .light-mode .modal-content {
            background: #fff;
            box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1);
            color: black;
        }
        .light-mode .modal-content label{
            color: black;
        }
        .light-mode .modal-content .form-control{
            background: #f1f1f1;
            color: black;
        }
        .light-mode .btn-main .cenclebtn {
            background: #13131b !important;
            border-color: #13131b !important;
            color: #fff;
        }
        .light-mode .btn-main .cenclebtn:hover {
            background: #ff002a !important;
            border-color: #ff002a !important;
            color: #fff;
        }

        .light-mode .modal-title{
            color: black;
        }
        .light-mode .btn-close-modal {
            color: black !important;

        }
        .light-mode .btn-close-modal:hover,
        .light-mode .btn-close-modal:focus-visible {
            color: #111 !important;
            opacity: 0.75;
        }
        .btn-close{
            position: absolute;
            top: 12px;
            right: 12px;
            font-size: 0;
            color: #fff;
            text-shadow: none;
            opacity: 1;
            background: linear-gradient(135deg, #ff3358 0%, #ff002a 100%);
            width: 42px;
            height: 42px;
            padding: 0;
            border-radius: 999px;
            border: 2px solid #111119;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 16px 30px rgba(255, 0, 42, 0.25);
            transition: 0.4s linear;
            -webkit-transition: 0.4s linear;
        }
        .btn-close::before{
            content: "\f00d";
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
            font-weight: 900;
            font-size: 16px;
            line-height: 1;
        }
        .btn-close i{
            display: none;
        }
        .btn-close:hover{
            background: #fff;
            border-color: #fff;
            color: #111119;
            transform: translateY(-2px);
        }
        .btn-close:focus{
            box-shadow: 0 0 0 0.2rem rgba(255, 0, 42, 0.22);
        }
        .light-mode .btn-close{
            border-color: #fff;
        }
        .light-mode .btn-close:hover{
            background: #111119;
            border-color: #111119;
            color: #fff;
        }
        .alert-danger{
            background: #f20028;
            color: white;
            border: #ff002a;
            text-align: center;
        }
        .alert-success{
            background: #00de00;
            color: white;
            border: #00de00;
            text-align: center;
        }
        .alert-warning{
            color: black;
            background-color: #ffc200;
            border-color: #ffc200;
        }

        .login-header .login-headre-block .on-off-toggle {
            position: absolute;
            right: 20px;
            display: inline-block;
            top: 0px;
        }
      
        /* 18-04-2024 CSS start */

        @media (max-width: 991px) {
            .colour-scheme .on-off-toggle__input:checked+.on-off-toggle__slider:before {
                transform: translateX(4px);
            }
            .colour-scheme .on-off-toggle__slider:before {
                background-color: unset;
            }
            .colour-scheme .toggle-text-off, 
            .colour-scheme .toggle-text-on {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
            .colour-scheme .on-off-toggle {
                margin: 0 !important;
                display: block !important;
            }
            .colour-scheme .on-off-toggle__slider {
                width: 170px;
                height: 40px;
                border-radius: 18px;
            }
            .colour-scheme .toggle-text-on {
                left: 5px;
                width: 80px;
                border-radius: 14px;
                padding: 4px;
            }
            .colour-scheme .toggle-text-off {
                right: 5px;
                width: 80px;
                border-radius: 14px;
                padding: 4px;
            }
            .colour-scheme .toggle-text-off {
                background: red;
            }
            .dark-mode .toggle-text-off .dark, .light-mode .toggle-text-off .light {
                display: none;
            }
            .colour-scheme .on-off-toggle__input:checked + .on-off-toggle__slider:after,
            .colour-scheme .on-off-toggle__slider:after {
                display: none;
            }
            .light-mode .colour-scheme .toggle-text-on {
                background: red;
            }
            .light-mode .colour-scheme .toggle-text-off {
                background: unset;
                color: #222222;
            }
            .light-mode .colour-scheme .on-off-toggle__input:checked + .on-off-toggle__slider {
                background: #7e7e7e;
                border: 1px solid #7e7e7e;
            }
        }

        @media(max-width:576px){ 
            .login-wrpper .login-footer .copyright .row {
                flex-direction: column-reverse;
            }
            .btn-close,
            .light-mode .btn-close{
                top: 10px;
                right: 10px;
                width: 38px;
                height: 38px;
            }
        }

/* ========== from sites/guest/authentication/register.php ========== */
/* (overflow: use body.guest-auth-layout — see login block above) */

/* ========== from sites/guest/contact.php ========== */

.btn-main:disabled {
        background: #8080804d;
        color: gray;
    }
    .btn-main:hover:disabled {
        background: #8080804d;
        color: gray;
    }
    .light-mode .form-checkbox label, .login-wrpper .form-checkbox label {color: #000000;}
    .dark-mode .form-checkbox label, .login-wrpper .form-checkbox label {color: #fff9;}



/* ========== from sites/guest/cover-generator.php ========== */

.dark-mode .pixie-root{
        background: #171723;
        border: 2px solid #000000 !important;
    }
    .dark-mode div.ml-auto.flex.items-center.gap-8 button.bg-transparent{
        color:white !important;
    }
    .dark-mode div.flex.items-center.select-none button.bg-transparent{
        color:white !important;
    }
    .dark-mode div.inline-flex.isolate button.bg-transparent{
        color:white !important;
    }
    .dark-mode nav.z-navbar button{
        background: #232333;
        border-color: #000000 !important;
        color: white;
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:first-child button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/filter_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(2) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/filter_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(3) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/shapes_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(4) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/font_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(5) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/star_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(6) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/font_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(7) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/painting_red.png");
    }
    .dark-mode nav.z-navbar div.flex-shrink-0:nth-child(8) button .mb-1 .icon-md.leading-none img{
        content:url("<?=SITEURL?>assets/images/downloads_red.png");
    }
    .dark-mode .tiny-scrollbar{
        background: #171723;
    }
    .dark-mode .tiny-scrollbar::-webkit-scrollbar-track {
        border: 5px solid #232333;
        padding: 2px 0;
        background-color: red;
    }

    .dark-mode .tiny-scrollbar::-webkit-scrollbar {
        width: 10px;
    }
    .dark-mode .tiny-scrollbar::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: red;
        border: 1px solid #000;
    }
    .dark-mode .tiny-scrollbar div.flex-shrink-0 button {
        background: #171723 !important;
    }
    .dark-mode div.tiny-scrollbar div.flex-shrink-0 button.border-primary {
        border-color: red !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full{
        background: #171723 !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full div.touch-none.w-full label{
        color: white !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full div.touch-none.w-full output{
        color: white !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full div.touch-none.w-full div.h-30 div.bg-primary{
        background: red !important;
    }
    .dark-mode div.tiny-scrollbar div.w-max span{
        color:white !important;
    }
    .dark-mode div.tiny-scrollbar div.text-sm label{
        color:white !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full div.touch-none.w-full div.h-30 div.outline-none.rounded-full.bg-primary{
        background: red !important;
    }
    .dark-mode nav.z-navbar div.relative.h-full div.touch-none.w-full div.h-30 div.outline-none.rounded-full.bg-primary-dark{
        background: red !important;
    }
    .dark-mode div.max-w-288.m-auto div.mb-20.w-full span.block {
        color: white !important;
    }
    .dark-mode div.max-w-288.m-auto div.touch-none.w-full label {
        color: white !important;
    }
    .dark-mode div.max-w-288.m-auto div.touch-none.w-full output {
        color: white !important;
    }
    .dark-mode div.max-w-288.m-auto div.touch-none.w-full div.h-30 div.bg-primary {
        background: red !important;
    }
    .dark-mode div.max-w-288.m-auto div.touch-none.w-full div.h-30 div.outline-none.rounded-full.bg-primary {
        background: red !important;
    }
    .dark-mode div.max-w-288.m-auto div.touch-none.w-full div.h-30 div.outline-none.rounded-full.bg-primary-dark {
        background: red !important;
    }
    .dark-mode div.max-w-288.m-auto div.mb-20.w-full button svg {
        color: white !important;
    }
    .dark-mode div.tiny-scrollbar div.flex-shrink-0 button.border-primary span{
        color: red !important;
    }
    .dark-mode div.flex-shrink-0.w-max button svg{
        color: white !important;
    }
    .dark-mode div.z-tool-overlay div.absolute.inset-x-0{
        background: #171723;
    }
    .dark-mode div.z-tool-overlay div.absolute.inset-x-0 div.flex.gap-16 div.flex-shrink-0 button{
        color: red !important;
    }
    .dark-mode div.z-tool-overlay div.absolute.inset-x-0 div.flex.gap-16 div.flex-shrink-0.w-max button.text{
        color: white !important;
    }
    .dark-mode div.z-tool-overlay div.absolute.inset-x-0 div.flex.gap-16 div.w-full.flex-auto button.text-primary{
        color: red !important;
    }
    .dark-mode #gradient-panel-trigger{
        color:white !important;
    }
    .dark-mode #texture-panel-trigger{
        color:white !important;
    }
    .dark-mode div.touch-none.max-w-240 div.bg-primary{
        background: red !important;
                       }
    .dark-mode div.absolute.inset-x-0 div.overflow-auto button.text-primary{
        color: red !important;
    }
    .dark-mode div.absolute.bottom-0.left-0.h-2.bg-primary{
        background: red !important;
    }
    .dark-mode nav.z-navbar div.h-92{

        background: #171723;

    }
    .dark-mode div.touch-none.max-w-240 div.outline-none.rounded-full{
        background: red !important;
    }
    .dark-mode div.z-tool-overlay div.absolute.right-16 button{
        color: red;
    }
    .dark-mode .pixie-root input{
        color: white;
    }
    .dark-mode .tiny-scrollbar div.flex-shrink-0 button.text-primary.border-primary {
        color: red !important;
    }
    .dark-mode .tiny-scrollbar div.flex-shrink-0 button.text-primary.border-primary div.border-primary {
        border-color: red !important;
    }
    .dark-mode div.flex.flex-shrink-0.items-center.justify-between{
        color: white !important;
    }

    .dark-mode button.text-on-primary{
        background: #ff002a !important;
        border-color: #ff002a !important;
    }
    .dark-mode div.text-sm{
        color:#ff002a !important;
        font-weight: bold;
    }
    #test > button{
        width: 100% !important;
        height: 100% !important;
    }
    .dark-mode div.px-10 button{
        color: black !important;
    }
    .dark-mode div.p-10 button{
        color: red !important;
    }

    /* 13-06-2024 CSS start */
    .dark-mode .tab-informetion .select2-container--default .select2-selection--single .select2-selection__rendered {
        background: #171723;
        border: 1px solid #22202C;
    }
    .select2-results {
        background: #171723;
    }
  
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
         width: 4px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
        background-color: #111119;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background: rgba(255, 0, 42, 0.5); 
    }
    .select2-container--default .select2-results > .select2-results__options {
  max-height: 280px;
  overflow-y: hidden;
}

.image_container {
                width: 320px;
                height: 320px;
                text-align: center;
                line-height: 320px;
                text-align: center;
                vertical-align: middle;
            }

            .image_container img {
                vertical-align: middle !important;
                display: unset !important;
            }
            .btn-main:disabled {
                background: #8080804d;
                color: gray;
            }
            .btn-main:hover:disabled {
                background: #8080804d;
                color: gray;
            }

.PreviousCover{
                        opacity: 0.6;
                    }
                    .PreviousCover:hover{
                        opacity: 1;
                        cursor: pointer;
                    }



/* ========== from sites/guest/faq.php ========== */

.light-mode .accordion-body ul li{
            margin-left: 1.5em;
            color: #555;
        }
        .dark-mode .accordion-body ul li{
            margin-left: 1.5em;
            color: #929294;
        }
        .accordion-body ul li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color: red; /* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
        }
        .light-mode .accordion-body ol li{
           list-style-type: decimal;
           margin-left: 1.5em;
           color: #555 !important;
        }
        .dark-mode .accordion-body ol li{
           list-style-type: decimal;
           margin-left: 1.5em;
           color: #929294;
        }



/* ========== from sites/guest/get_artist_info.php ========== */
/* Artist stats page styles: assets/css/artist-stats-public.css (body.page-guest-artist-stats) */

/* ========== from sites/guest/home.php ========== */

.accordion .accordion-item .accordion-button:before{content:'';display:inline-block;width:22px;height:22px;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff002a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'/%3e%3cline x1='6' y1='6' x2='18' y2='18'/%3e%3c/svg%3e") center/contain no-repeat;margin-right:5px}.accordion .accordion-item .accordion-button.collapsed::before{content:'';display:inline-block;width:24px;height:24px;background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") center/contain no-repeat;margin-right:5px}.light-mode .accordion .accordion-item .accordion-button.collapsed::before{background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23252525' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") center/1em auto no-repeat}.h5{font-weight:400;font-size:16px;line-height:20px;opacity:.5;margin:0;text-align:center}.h4{line-height:18px}@media (max-width:447px){.h4{font-weight:400;margin:0;text-align:center;font-size:14px;line-height:18px}}.slider-box {position: relative;overflow: hidden;}.bxslider img{width: 100% !important;margin-bottom: 15px;}.main-img, .light-main-img {width: 100%;height: auto;display: block;}.custom_container{width: 100%;margin-right: auto;margin-left: auto;padding: 40px 12px 0px;}.bx-wrapper {background: transparent;box-shadow: none; border: none;} .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus, .bx-wrapper .bx-pager.bx-default-pager a:hover {background: #ff002a;}.bx-wrapper .bx-pager.bx-default-pager a {background: #ff002a;opacity: 0.5;}.bx-wrapper .bx-pager.bx-default-pager .bx-pager-link.active {-webkit-filter: blur(2px);-moz-filter: blur(2px);-o-filter: blur(2px);-ms-filter: blur(2px);}.bx-wrapper h3 {font-weight: 700;font-size: 18px;line-height: 23px;color: #ff002a;margin: 0 0 10px;}.bx-wrapper p {font-weight: 400;font-size: 14px;line-height: 20px;color: #fff;opacity: .6;margin: 0;}
.bx-wrapper .bx-controls-auto, .bx-wrapper .bx-pager {position: absolute;bottom: -15px;width: 100%;}.light-mode .bx-wrapper h3 {color: #ff002a;}.light-mode .bx-wrapper p {color: #555;}



/* ========== from sites/guest/metronome.php ========== */

.metronome-container {
        max-width: 400px;
        margin: 50px auto;
        text-align: center;
        padding: 20px;
        border-radius: 10px;
    }
    div#beatNumberDisplay {
        font-size: 30px;
        color: #ff002a;
    }



    .bpm-display-container {

        font-size: 2rem;
        margin-bottom: 20px;
    }

    .bpm-display {
        font-size: inherit;
        width: 80px;
        border: none;
        background: transparent;
        text-align: center;
        appearance: none;
        -moz-appearance: textfield;
        -webkit-appearance: none;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .bpm-display:focus {
        outline: none;
    }

    .metronome-container .slider {
        width: 100%;
    }

    .beat-indicator {
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .beat-dots {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .dot {
        width: 15px;
        height: 15px;
        margin: 05px;
        background-color: #ddd;
        border-radius: 50%;
    }

    .dot.active {
        background-color: gray;
    }

    .dot.active.first-dot {
        background-color: red;
    }

    .beat-indicator.red {
        color: red;
    }

    .beat-selector-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        background: #09090d;
    }

    .beat-selector {
        display: flex;
        overflow: hidden;
        width: 150px;
    }

    .beat-selectorbutton {
        width: 30px;
        height: 30px;
        margin: 05px;
        flex-shrink: 0;
    }

    .beat-selector.active {
        background-color: #28a745;
        color: white;
    }
    .beat-selector button {
        background-color: unset;
        color: #ff002a;
        font-weight: bold;
        font-size: 16px;
    }.beat-selector button.active{
         background-color: unset;
         color: #ff002a;
         font-weight: bold;
         font-size: 16px;
     }
    .beat-selector button:hover {
        background-color: unset;
        color: #ff002a;

        font-weight: bold;
    }
    .arrow-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #ff002a;
    }
    .light-mode .beat-selector-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        background: #f1f1f1;
    }

/* 13-06-2024 CSS start */
    .dark-mode .tab-informetion .select2-container--default .select2-selection--single .select2-selection__rendered {
        background: #232333;
        border: 1px solid #22202C;
    }
    .select2-results {
        background: #171723;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
         width: 4px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
        background-color: #111119;
        -webkit-border-radius: 6px;
        border-radius: 6px;
    }
    .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
        -webkit-border-radius: 6px;
        border-radius: 6px;
        background: rgba(255, 0, 42, 0.5);
    }
    input#bpmDisplay {
        color: #ff002a;
        font-weight: bold;
    }
    .metronome-container .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 5px;
        background: #ddd;
        border-radius: 5px;
        outline: none;
    }

    .metronome-container .slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 5px;
        background: #ddd;
        border-radius: 5px;
    }

    .metronome-container .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        background-color: #ff002a;
        border-radius: 50%;
        cursor: pointer;
        border: none;
        position: relative;
        top: -5px;
    }

    .metronome-container .slider::-webkit-slider-runnable-track:before {
        content: '';
        width: calc(var(--value, 0) * 1%);
        height: 5px;
        background-color: #ff002a;
        border-radius: 5px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .metronome-container .slider::-moz-range-track {
        width: 100%;
        height: 5px;
        background: #ddd;
        border-radius: 5px;
    }

    .metronome-container .slider::-moz-range-progress {
        background-color: #ff002a;
        height: 5px;
        border-radius: 5px;
    }

    .metronome-container .slider::-moz-range-thumb {
        width: 15px;
        height: 15px;
        background-color: #ff002a;
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }

    .metronome-container .slider::-ms-track {
        width: 100%;
        height: 5px;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    .metronome-container .slider::-ms-fill-lower {
        background: #ff002a;
        border-radius: 5px;
    }

    .metronome-container .slider::-ms-fill-upper {
        background: #ddd;
        border-radius: 5px;
    }

    .metronome-container .slider::-ms-thumb {
        width: 15px;
        height: 15px;
        background-color: #ff002a;
        border-radius: 50%;
        cursor: pointer;
        border: none;
    }

    .audioplayer{
        visibility: hidden;
        width: 0px;
        height: 0px;
    }



/* ========== from sites/guest/partial/footer.php ========== */

footer .foot-top .row {
        align-items: center;
    }

    footer .foot-top .footer-brand-link {
        align-items: center;
        display: inline-flex;
    }

    footer .foot-top .footer-brand-link img {
        height: auto;
        max-width: 228px;
        width: 100%;
    }

    @media (min-width: 992px) {
        footer .foot-top .footer-brand-link img {
            max-width: 268px;
        }
    }

    @media (min-width: 1200px) {
        footer .foot-top .footer-brand-link img {
            max-width: 300px;
        }
    }

    footer .foot-top .form-group {
        margin-left: auto;
        max-width: 560px;
        position: relative;
        width: 100%;
    }

    footer .foot-top .footer-newsletter-input-wrap {
        position: relative;
        width: 100%;
    }

    footer .foot-top .footer-newsletter-input-wrap .form-control {
        background: #ffffff;
        border: 1px solid #e8eef6;
        border-radius: 10px;
        color: #2f3744;
        margin: 0;
        min-height: 60px;
        opacity: 1;
        padding: 14px 170px 14px 20px;
        width: 100%;
    }

    footer .foot-top .footer-newsletter-input-wrap .form-control::placeholder {
        color: #8b97a8;
        opacity: 1;
    }

    footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit {
        align-items: center;
        background: #f7faff;
        border: 1px solid #dbe5f0;
        border-radius: 10px;
        bottom: 7px;
        color: #243247;
        display: inline-flex;
        font-size: 14px;
        font-weight: 700;
        gap: 3px;
        justify-content: center;
        left: auto;
        line-height: 1;
        margin: 0 !important;
        min-height: 0;
        opacity: 1;
        padding: 0 12px;
        position: absolute;
        right: 5px;
        top: 7px;
        transform: none !important;
        white-space: nowrap;
        z-index: 2;
    }

    footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit:hover {
        background: #ffffff;
        color: #243247;
        opacity: 1;
    }

    footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit .footer-newsletter-submit-label {
        align-items: center;
        display: inline-flex;
        line-height: 1;
    }

    footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit .footer-newsletter-submit-icon {
        align-items: center;
        display: inline-flex;
        flex-shrink: 0;
        justify-content: center;
        line-height: 0;
    }

    footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit .footer-newsletter-submit-icon img {
        display: block;
        height: 11px;
        margin: 0;
        max-height: 100%;
        object-fit: contain;
        width: 24px;
    }

    footer .foot-top .form-group .newsletter-field-error:not(.d-none) {
        text-align: left;
    }

    .dark-mode footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit {
        background: #3a414d;
        border-color: #515a69;
        color: #ffffff;
    }

    .dark-mode footer .foot-top .footer-newsletter-input-wrap .form-control {
        background: #15151d;
        border-color: #15151d;
        color: rgba(255, 255, 255, 0.6);
    }

    .dark-mode footer .foot-top .footer-newsletter-input-wrap .form-control::placeholder {
        color: rgba(255, 255, 255, 0.6);
    }

    .dark-mode footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit:hover {
        background: #454d5a;
        color: #ffffff;
    }

    @media screen and (max-width: 991px) {
        footer .foot-top .row,
        footer .copyright .row {
            justify-content: center;
            text-align: center;
        }

        footer .foot-top .row {
            flex-direction: column;
            gap: 24px;
        }

        footer .foot-top a,
        footer .copyright p {
            text-align: center;
        }

        footer .foot-top .col-md-4,
        footer .foot-top .col-md-8,
        footer .copyright .col-md-4 {
            align-items: center;
            display: flex;
            flex: 0 0 100%;
            flex-direction: column;
            max-width: 100%;
            text-align: center;
        }

        footer .foot-top .footer-brand-link {
            justify-content: center;
        }

        footer .foot-top .form-group {
            margin-left: auto;
            margin-right: auto;
            max-width: 540px;
        }

        footer .footer-block .row {
            display: grid;
            gap: 26px 18px;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            width: 100%;
        }

        footer .footer-block .col-md-4,
        footer .footer-block .col-md-3 {
            align-items: center;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            max-width: 100%;
            text-align: center;
            width: auto !important;
        }

        footer .footer-block .footer-address {
            grid-column: 1 / -1;
        }

        footer .footer-block .footer-address p {
            margin-bottom: 0;
            max-width: none;
        }

        footer .copyright .row {
            flex-direction: column;
            gap: 18px;
        }

        footer .copyright .social-ic,
        footer .copyright .terms-link {
            justify-content: center !important;
        }
    }

    @media screen and (max-width: 767px) {
        .contact-wrp .row,
        footer .footer-block .row {
            justify-content: center;
            text-align: center;
        }

        .contact-wrp h2,
        .contact-wrp p {
            text-align: center;
        }

        .contact-wrp .btn-main {
            margin-left: auto;
            margin-right: auto;
        }

        footer .footer-block .col-md-4,
        footer .footer-block .col-md-3 {
            align-items: center;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        footer .foot-top .footer-newsletter-input-wrap .form-control {
            min-height: 56px;
            padding: 14px 146px 14px 18px;
            text-align: left;
        }

        footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit {
            bottom: 7px;
            font-size: 13px;
            gap: 2px;
            padding: 0 10px;
            right: 5px;
            top: 7px;
            width: auto;
        }

        footer .footer-block .row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media screen and (max-width: 575px) {
        footer .foot-top .footer-newsletter-input-wrap .form-control {
            font-size: 14px;
            padding: 14px 126px 14px 16px;
        }

        footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit {
            bottom: 6px;
            font-size: 12px;
            gap: 2px;
            padding: 0 8px;
            right: 4px;
            top: 6px;
        }

        footer .foot-top .footer-newsletter-input-wrap button.footer-newsletter-submit .footer-newsletter-submit-icon img {
            height: 10px;
            width: 18px;
        }

        footer .footer-block .row {
            grid-template-columns: 1fr;
        }

        footer .footer-block .footer-address {
            grid-column: auto;
        }
    }

/* ========== from sites/guest/partial/header.php ========== */

.light-mode .change-pass-block {
            color: black !important;
        }
        .light-mode .cenclebtn:not(.btn-main) {
            color: black !important;
        }
        /* Match logged-in: Save no glow/white flash; Close white text (light + dark) */
        .light-mode .btn-main:not(.btn-main2):not(.cenclebtn),
        .dark-mode .btn-main:not(.btn-main2):not(.cenclebtn) {
            box-shadow: none !important;
            transition-property: background-color, border-color, color, opacity !important;
            transition-duration: 0.12s !important;
            transition-timing-function: ease !important;
        }
        .light-mode .btn-main:not(.btn-main2):not(.cenclebtn):hover,
        .light-mode .btn-main:not(.btn-main2):not(.cenclebtn):focus,
        .light-mode .btn-main:not(.btn-main2):not(.cenclebtn):focus-visible,
        .light-mode .btn-main:not(.btn-main2):not(.cenclebtn):active,
        .dark-mode .btn-main:not(.btn-main2):not(.cenclebtn):hover,
        .dark-mode .btn-main:not(.btn-main2):not(.cenclebtn):focus,
        .dark-mode .btn-main:not(.btn-main2):not(.cenclebtn):focus-visible,
        .dark-mode .btn-main:not(.btn-main2):not(.cenclebtn):active {
            background: #ff002a !important;
            background-image: none !important;
            color: #fff !important;
            box-shadow: none !important;
            outline: none !important;
            transform: none !important;
        }
        .light-mode .btn-main.cenclebtn,
        .dark-mode .btn-main.cenclebtn {
            background: #13131b !important;
            border: 1px solid #22202c !important;
            box-shadow: none !important;
            color: #fff !important;
            transition-property: background-color, border-color, color, opacity !important;
            transition-duration: 0.12s !important;
            transition-timing-function: ease !important;
        }
        .light-mode .btn-main.cenclebtn:hover,
        .light-mode .btn-main.cenclebtn:focus,
        .light-mode .btn-main.cenclebtn:focus-visible,
        .light-mode .btn-main.cenclebtn:active,
        .dark-mode .btn-main.cenclebtn:hover,
        .dark-mode .btn-main.cenclebtn:focus,
        .dark-mode .btn-main.cenclebtn:focus-visible,
        .dark-mode .btn-main.cenclebtn:active {
            background: #1c1c26 !important;
            background-image: none !important;
            border-color: #2a2a38 !important;
            color: #fff !important;
            box-shadow: none !important;
            outline: none !important;
            transform: none !important;
        }
        .tool-header-icon {
            align-items: center;
            color: #ff002a;
            display: inline-flex;
            font-size: 24px;
            justify-content: center;
            line-height: 1;
            min-height: 40px;
            min-width: 40px;
            text-align: center;
            vertical-align: middle;
            width: 40px;
        }
        .mn-header {
            --tools-submenu-top: 132px;
        }
        .mn-header li.nav-items #submenu {
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 5px;
            overflow: hidden;
        }
        .light-mode .mn-header li.nav-items #submenu {
            border-color: rgba(17, 17, 25, 0.08);
        }
        .sub-megamenu {
            max-width: none;
            padding: 0;
            width: 100%;
        }
        .sub-megamenu .row {
            row-gap: 16px;
        }
        .sub-megamenu .submenu-column {
            align-items: flex-start;
            display: flex;
            border: 1px solid transparent;
            border-radius: 5px;
            min-height: 100%;
            padding: 14px 18px;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            gap: 12px;
        }
        .sub-megamenu .submenu-column:hover {
            background: rgba(255, 0, 42, 0.06);
            border-color: rgba(255, 0, 42, 0.18);
        }
        .sub-megamenu .submenu-icon {
            align-items: center;
            display: flex;
            flex: 0 0 40px;
            height: 40px;
            justify-content: center;
            margin-top: 2px;
            width: 40px;
        }
        .sub-megamenu .submenu-text h4 {
            margin-bottom: 6px;
        }
        .mn-header .mobile-dropdown {
            display: block;
            margin-top: 0;
            padding-left: 0;
        }
        .mn-header li.nav-items #submenu .dropdown-item {
            align-items: center;
            display: flex;
            gap: 12px;
            min-height: 0;
            padding: 14px 25px;
            white-space: normal;
        }
        .mn-header li.nav-items #submenu .dropdown-item .tool-link-label {
            display: block;
            font-size: 16px;
            font-weight: 700;
            line-height: 1.3;
            min-width: 0;
        }
        .fixed-banner {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            background-color: #ff002a;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 6px 12px;
            z-index: 2147483000;
            min-height: var(--sm-impersonation-banner-height, 48px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
            line-height: 1.2;
            box-sizing: border-box;
        }
        body.admin-login-as {
            --sm-impersonation-banner-height: 48px;
            padding-top: var(--sm-impersonation-banner-height) !important;
        }
        body.admin-login-as .admin-banner-back-form {
            display: inline-flex;
            margin: 0;
        }
        body.admin-login-as .admin-banner-email-code {
            display: inline-flex;
            align-items: center;
            min-height: 32px;
        }
        @media (max-width: 575.98px) {
            body.admin-login-as {
                --sm-impersonation-banner-height: 88px;
            }
            body.admin-login-as .fixed-banner {
                align-content: center;
                row-gap: 6px;
                font-size: 12px;
            }
            body.admin-login-as .admin-banner-email-code {
                max-width: calc(100vw - 160px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
        body.guest-menu-open {
            overflow: hidden;
        }
        @media (min-width: 768px) {
            .mn-header .guest-nav-panel .tools-trigger {
                transition: color 0.18s ease, opacity 0.18s ease;
            }
            .mn-header .guest-nav-panel .tools-trigger:hover,
            .mn-header .guest-nav-panel .tools-trigger:focus-visible {
                color: #ff002a !important;
            }
            .light-mode .mn-header .guest-nav-panel .tools-trigger:hover,
            .light-mode .mn-header .guest-nav-panel .tools-trigger:focus-visible {
                color: #ff002a !important;
            }
        }
        @media (max-width: 767px) {
            .whitelabel-banner {
                align-items: center;
                gap: 8px;
                height: auto;
                min-height: 40px;
                padding: 8px 12px;
            }
            .whitelabel-link {
                margin: 0;
            }
        }

/* ===== Mobile Header Optimization ===== */

    /* Backdrop - smooth fade transition */
    .guest-menu-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease, background 0.25s ease;
        z-index: 1039;
    }
    .guest-menu-backdrop.is-visible {
        background: rgba(0, 0, 0, 0.8);
        opacity: 1;
        pointer-events: auto;
    }
    /* Keep whitelabel banner ABOVE the backdrop */
    .whitelabel-banner {
        justify-content: center !important;
        position: relative;
        z-index: 1051;
    }
    .whitelabel-banner .whitelabel-link {
        text-align: center;
    }
    .whitelabel-banner .whitelabel-close {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translateY(-50%);
    }
    .mn-header {
        position: relative;
        z-index: 1050;
    }
    .mn-header.is-sticky {
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
    }
    .guest-header-spacer {
        height: 0;
        pointer-events: none;
    }
    .mn-header::before {
        background: rgba(9, 9, 13, 0.94);
        border-bottom: 1px solid #1e1e2a;
        content: "";
        inset: 0;
        position: absolute;
        pointer-events: none;
        z-index: -1;
    }
    .light-mode .mn-header::before {
        background: rgba(255, 255, 255, 0.95);
        border-bottom-color: #e8e8e8;
    }
    /* Sticky: opaque bar so content scrolling behind does not show through */
    .mn-header.is-sticky::before {
        background: #09090d;
        border-bottom-color: #1e1e2a;
    }
    .light-mode .mn-header.is-sticky::before {
        background: #ffffff;
        border-bottom-color: #e8e8e8;
    }

    /* Desktop: hide ALL nav icons (FA and images) */
    .mn-header .nav-link .nav-link-icon { display: none !important; }
    .mn-header .nav-link img.me-2 { display: none !important; }

    @media (max-width: 1199px) {
        /* ── Sticky header bar ── */
        .mn-header {
            background: #09090d;
            border-bottom: 1px solid #1e1e2a;
            padding: 0 !important;
            position: relative;
            z-index: 1050;
        }
        .mn-header.is-sticky {
            position: fixed;
            top: 0;
        }
        .light-mode .mn-header {
            background: #ffffff;
            border-bottom-color: #e8e8e8;
        }
        .mn-header .container {
            padding-left: 16px;
            padding-right: 16px;
        }
        .mn-header .navbar {
            align-items: center;
            flex-wrap: nowrap;
            height: 56px;
            padding: 0;
            position: relative;
        }
        .mn-header .navbar-brand {
            align-items: center;
            display: inline-flex;
            height: auto;
            margin-right: 0;
            order: 0;
            padding: 0;
            width: 130px;
        }
        .mn-header .navbar-brand img {
            height: auto;
            width: 100%;
        }
        .accordion-collapse.collapsing {
            transition: height 0.35s ease;
        }

        /* ── CTA button in header bar ── */
        .mn-header .navbar > .header-primary-cta {
            align-items: center;
            background: #ff002a;
            border-radius: 6px;
            box-shadow: none !important;
            color: #ffffff !important;
            display: inline-flex !important;
            flex: 0 0 auto;
            font-size: 11px;
            font-weight: 700;
            height: auto;
            line-height: 1;
            margin-left: auto;
            max-width: max-content;
            min-width: 0;
            order: 1;
            padding: 11px 14px;
            text-decoration: none;
            white-space: nowrap;
            width: auto !important;
        }
        .mn-header .navbar > .header-primary-cta:hover {
            background: #e0001f;
        }

        @media screen and (max-width: 560px) {
            .mn-header .navbar > .header-primary-cta {
                max-width: 112px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .mn-header .navbar > .header-dashboard-cta {
                transform: translateX(8px);
            }
        }

        .mn-header .navbar-brand .light-mode-logo {
            display: none !important;
        }
        .mn-header .navbar-brand .dark-mode-logo {
            display: block !important;
        }
        .mn-header .guest-nav-panel .nav-link img.me-2.dark {
            display: none !important;
        }
        .mn-header .guest-nav-panel .nav-link img.me-2.light {
            display: block !important;
        }
        .light-mode .mn-header .navbar-brand .dark-mode-logo {
            display: none !important;
        }
        .light-mode .mn-header .navbar-brand .light-mode-logo {
            display: block !important;
        }
        .light-mode .mn-header .guest-nav-panel .nav-link img.me-2.dark {
            display: block !important;
        }
        .light-mode .mn-header .guest-nav-panel .nav-link img.me-2.light {
            display: none !important;
        }

        /* ── Animated hamburger ── */
        .mn-header .navbar-toggler {
            align-items: center;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            display: inline-flex;
            flex-direction: column;
            flex-shrink: 0;
            gap: 5px;
            height: auto;
            justify-content: center;
            margin-left: 8px;
            order: 2;
            outline: none !important;
            padding: 10px;
            width: 44px;
        }
        .mn-header .navbar-toggler .toggler-bar {
            background: #ffffff;
            border-radius: 1.5px;
            display: block;
            height: 2px;
            transform-origin: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 22px;
        }
        .light-mode .mn-header .navbar-toggler .toggler-bar {
            background: #111119;
        }
        .mn-header .navbar-toggler.is-open .toggler-bar:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .mn-header .navbar-toggler.is-open .toggler-bar:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .mn-header .navbar-toggler.is-open .toggler-bar:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* ── Overlay panel (absolute to navbar, does NOT push content) ── */
        .mn-header .navbar-collapse.guest-nav-panel {
            background: #09090d;
            border: none !important;
            border-radius: 0 !important;
            border-top: 1px solid #1e1e2a !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
            display: block !important;
            height: auto !important;
            left: -16px;
            margin: 0 !important;
            max-height: calc(100vh - 56px);
            opacity: 0;
            overflow-y: auto;
            padding: 10px 16px 12px !important;
            pointer-events: none;
            position: absolute !important;
            right: -16px;
            top: 100%;
            transition: opacity 0.2s ease, visibility 0.2s ease;
            visibility: hidden;
            width: calc(100% + 32px) !important;
            z-index: 1049;
            -webkit-overflow-scrolling: touch;
        }
        .mn-header .navbar-collapse.guest-nav-panel.show-guest-nav {
            opacity: 1;
            pointer-events: auto;
            visibility: visible;
        }
        .light-mode .mn-header .navbar-collapse.guest-nav-panel {
            background: #ffffff;
            border-top-color: #e8e8e8 !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
        }
        /* Kill Bootstrap collapse behaviour completely on mobile */
        .mn-header .navbar-collapse.collapsing {
            display: block !important;
            height: auto !important;
            overflow: visible !important;
            transition: none !important;
        }

        /* ── Nav items ── */
        .mn-header .guest-nav-panel .navbar-nav {
            display: flex !important;
            flex-direction: column !important;
            gap: 3px;
            width: 100%;
        }
        .mn-header .guest-nav-panel .nav-item,
        .mn-header .guest-nav-panel .nav-items {
            margin: 0 !important;
            width: 100%;
        }
        .mn-header .guest-nav-panel .nav-item.mt-lg-0.mt-md-0.mt-4 {
            margin-top: 0 !important;
        }
        .mn-header .guest-nav-panel .nav-link {
            align-items: center;
            background: #111119 !important;
            border: 1px solid #1e1e2a !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            display: flex !important;
            font-size: 14px;
            font-weight: 500;
            gap: 10px;
            justify-content: flex-start;
            min-height: 44px;
            padding: 9px 12px !important;
            transition: background 0.15s ease, border-color 0.15s ease;
            width: 100%;
        }
        .mn-header .guest-nav-panel .nav-link:hover,
        .mn-header .guest-nav-panel .nav-link:focus {
            background: #171723 !important;
            border-color: rgba(255, 0, 42, 0.3) !important;
        }
        .mn-header .guest-nav-panel .nav-link.active {
            background: #171723 !important;
            border-color: #ff002a !important;
        }
        .light-mode .mn-header .guest-nav-panel .nav-link {
            background: #f5f5f7 !important;
            border-color: #e8e8ea !important;
            color: #111119 !important;
        }
        .light-mode .mn-header .guest-nav-panel .nav-link:hover,
        .light-mode .mn-header .guest-nav-panel .nav-link:focus {
            background: #ebebed !important;
            border-color: rgba(255, 0, 42, 0.25) !important;
        }
        .light-mode .mn-header .guest-nav-panel .nav-link.active {
            background: #ebebed !important;
            border-color: #ff002a !important;
        }

        /* Whitelabel link */
        .mn-header .guest-nav-panel .nav-link[style*="background: #ff002a"] {
            background: #ff002a !important;
            border-color: #ff002a !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            font-weight: 600;
        }

        /* Nav link icons - unified size for both img and FA */
        .mn-header .guest-nav-panel .nav-link .me-2 {
            margin-right: 0 !important;
        }
        .mn-header .guest-nav-panel .nav-link img.me-2 {
            display: block !important;
            flex: 0 0 20px;
            height: 20px;
            object-fit: contain;
            opacity: 0.65;
            width: 20px;
        }
        .mn-header .guest-nav-panel .nav-link .nav-link-icon {
            align-items: center;
            display: inline-flex !important;
            flex: 0 0 20px;
            font-size: 16px;
            height: 20px;
            justify-content: center;
            line-height: 20px;
            opacity: 0.65;
            text-align: center;
            width: 20px;
        }
        .mn-header .guest-nav-panel .nav-link .nav-link-icon.dark { display: none !important; }
        .mn-header .guest-nav-panel .nav-link .nav-link-icon.light { display: inline-flex !important; }
        .light-mode .mn-header .guest-nav-panel .nav-link .nav-link-icon.dark { display: inline-flex !important; }
        .light-mode .mn-header .guest-nav-panel .nav-link .nav-link-icon.light { display: none !important; }
        .mn-header .guest-nav-panel .nav-link[style*="background: #ff002a"] .nav-link-icon {
            opacity: 1;
        }

        /* ── Tools dropdown ── */
        .mn-header .guest-nav-panel .tools-trigger { position: relative; }
        .mn-header .guest-nav-panel .tools-trigger::after {
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid currentColor;
            content: "";
            margin-left: auto;
            opacity: 0.4;
            transition: transform 0.25s ease;
        }
        .mn-header .guest-nav-panel .tools-nav-item.is-open .tools-trigger::after {
            transform: rotate(180deg);
        }
        .mn-header li.nav-items #submenu {
            background: #111119 !important;
            box-shadow: none !important;
            left: auto !important;
            min-width: 100% !important;
            padding: 10px 0 !important;
            position: static !important;
            top: auto !important;
        }
        .light-mode .mn-header li.nav-items #submenu {
            background: #ffffff !important;
        }
        .mn-header .mobile-dropdown {
            display: block;
        }
        .mn-header li.nav-items #submenu .dropdown-item {
            background: transparent;
            border: none;
            border-radius: 0;
            color: #ffffff;
            font-size: 15px;
            gap: 12px;
            min-height: 0;
            padding: 14px 18px;
            transition: background-color 0.15s ease, color 0.15s ease;
        }
        .mn-header li.nav-items #submenu .dropdown-item .tool-header-icon {
            color: #ff002a;
            font-size: 18px;
            height: 20px;
            min-height: 20px;
            min-width: 20px;
            width: 20px;
        }
        .light-mode .mn-header li.nav-items #submenu .dropdown-item {
            color: #111119;
        }
        .mn-header li.nav-items #submenu .dropdown-item:hover {
            background: #ff002a;
            color: #ffffff;
        }
        .mn-header li.nav-items #submenu .dropdown-item.active {
            background: rgba(255, 0, 42, 0.16);
            color: #ffffff;
        }
        .light-mode .mn-header li.nav-items #submenu .dropdown-item.active {
            background: #fff0f3;
            color: #111119;
        }
        .mn-header li.nav-items #submenu .dropdown-item:hover .tool-header-icon {
            color: #ffffff;
        }
        .mn-header li.nav-items #submenu .dropdown-item.active .tool-header-icon {
            color: #ff002a;
        }
        .mn-header .mobile-dropdown .tool-header-icon {
            font-size: 16px;
            min-height: 20px;
            min-width: 20px;
            width: 20px;
        }
        .sub-megamenu .submenu-column.is-active {
            border: 1px solid rgba(255, 0, 42, 0.45);
            border-radius: 5px;
        }

        /* ── Secondary nav ── */
        .mn-header .guest-nav-panel .secondary-nav {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            display: flex !important;
            flex-direction: column !important;
            gap: 3px;
            margin-top: 8px;
            padding-top: 8px;
        }
        .mn-header .guest-nav-panel .secondary-nav .nav-item {
            margin: 0 !important;
        }
        .light-mode .mn-header .guest-nav-panel .secondary-nav {
            border-top-color: rgba(0, 0, 0, 0.06);
        }

        /* Sign In - ghost style */
        .mn-header .guest-nav-panel .secondary-nav .sign-in .nav-link {
            background: transparent !important;
            border: 1.5px solid #2a2a3a !important;
            color: #ffffff !important;
            justify-content: center;
        }
        .light-mode .mn-header .guest-nav-panel .secondary-nav .sign-in .nav-link {
            background: transparent !important;
            border-color: #d0d0d4 !important;
            color: #111119 !important;
        }

        /* Dashboard / Publish CTA - full width */
        .mn-header .guest-nav-panel .secondary-nav .nav-item-dashboard {
            width: 100%;
        }
        .mn-header .guest-nav-panel .nav-link.publish-btn {
            background: #ff002a !important;
            border-color: #ff002a !important;
            color: #ffffff !important;
            font-weight: 700;
            justify-content: center;
            width: 100%;
        }
        .mn-header .guest-nav-panel .secondary-nav .nav-link {
            justify-content: center;
        }

        /* ── Theme toggle row ── */
        .mn-header .guest-nav-panel .secondary-nav .nav-item-theme-toggle {
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            margin-top: 5px !important;
            padding-top: 8px;
            width: 100%;
        }
        .light-mode .mn-header .guest-nav-panel .secondary-nav .nav-item-theme-toggle {
            border-top-color: rgba(0, 0, 0, 0.06);
        }
        .mn-header .guest-nav-panel .secondary-nav .nav-item-theme-toggle .on-off-toggle {
            display: flex !important;
        }
        .mn-header .guest-nav-panel .secondary-nav .nav-item-theme-toggle .on-off-toggle__slider {
            max-width: 100%;
            width: 100%;
        }

        /* Hide the big colour-scheme desktop toggle */
        .mn-header .colour-scheme {
            display: none !important;
        }

        /* Hide footer on mobile */
        .mn-header .mobile-bottom-nav-link {
            display: none !important;
        }
    }

    @media screen and (min-width: 1181px) {
            .mn-header li.nav-items.tools-nav-item:hover > #submenu,
            .mn-header li.nav-items.tools-nav-item:focus-within > #submenu,
            .mn-header li.nav-items.tools-nav-item > #submenu:hover {
                display: block;
            }

            .mn-header .tools-nav-item {
                position: static;
            }

            .mn-header li.nav-items #submenu {
                background: #111119 !important;
                box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22) !important;
                left: 50% !important;
                min-width: 0 !important;
                overflow: visible !important;
                padding: 28px !important;
                position: fixed !important;
                top: var(--tools-submenu-top) !important;
                transform: translateX(-50%) !important;
                width: min(1220px, calc(100vw - 40px)) !important;
                z-index: 1052;
            }

            .light-mode .mn-header li.nav-items #submenu {
                background: #fdfdfd !important;
                box-shadow: 0 24px 60px rgba(18, 24, 40, 0.12) !important;
            }

            .mn-header li.nav-items #submenu:before {
                left: 50%;
                margin-left: 0;
                top: -12px;
                transform: translateX(-50%);
            }

            .mn-header li.nav-items #submenu:after {
                background: transparent;
                content: "";
                height: 32px;
                left: 0;
                pointer-events: auto;
                position: absolute;
                right: 0;
                top: -32px;
            }

            .sub-megamenu {
                display: block !important;
            }

            .sub-megamenu .row {
                margin-left: -8px;
                margin-right: -8px;
                row-gap: 16px;
            }

            .sub-megamenu .row > div {
                padding-left: 8px;
                padding-right: 8px;
            }

            .mn-header .mobile-dropdown {
                display: none !important;
            }
        }

    @media screen and (min-width: 768px) and (max-width: 1180px) {
            .mn-header li.nav-items.tools-nav-item:hover > #submenu,
            .mn-header li.nav-items.tools-nav-item:focus-within > #submenu,
            .mn-header li.nav-items.tools-nav-item > #submenu:hover {
                display: block;
            }

            .mn-header .tools-nav-item {
                position: static;
            }

            .mn-header li.nav-items #submenu {
                background: #111119 !important;
                box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2) !important;
                left: 50% !important;
                min-width: 0 !important;
                overflow: visible !important;
                padding: 20px !important;
                position: fixed !important;
                top: var(--tools-submenu-top) !important;
                transform: translateX(-50%) !important;
                width: min(720px, calc(100vw - 24px)) !important;
                z-index: 1052;
            }

            .light-mode .mn-header li.nav-items #submenu {
                background: #fdfdfd !important;
                box-shadow: 0 20px 48px rgba(18, 24, 40, 0.12) !important;
            }

            .mn-header li.nav-items #submenu:after {
                background: transparent;
                content: "";
                height: 32px;
                left: 0;
                pointer-events: auto;
                position: absolute;
                right: 0;
                top: -32px;
            }

            .mn-header li.nav-items #submenu:before,
            .sub-megamenu {
                display: none !important;
            }

            .mn-header .mobile-dropdown {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

    @media screen and (max-width: 767px) {
            .mn-header li.nav-items #submenu {
                border: 1px solid rgba(255, 255, 255, 0.08);
                border-radius: 5px;
                box-shadow: none !important;
                overflow: hidden;
            }

            .light-mode .mn-header li.nav-items #submenu {
                border-color: rgba(17, 17, 25, 0.08);
            }

            .mn-header .mobile-dropdown {
                margin-top: 8px;
            }

            .mn-header li.nav-items #submenu .dropdown-item {
                min-height: 0;
                padding: 14px 18px;
            }

            .mn-header li.nav-items #submenu .dropdown-item .tool-link-label {
                font-size: 15px;
            }
        }

    @media screen and (max-width: 479px) {
            .mn-header li.nav-items #submenu .dropdown-item {
                gap: 10px;
                padding: 13px 16px;
            }

            .mn-header li.nav-items #submenu .dropdown-item .tool-link-label {
                font-size: 14px;
                line-height: 1.3;
            }
        }



/* ========== from sites/guest/partial/home.php ========== */

.alert-danger {
            background: #f20028;
            color: white;
            border: #ff002a;
            text-align: center;
        }
        .alert-success {
            background: #00de00;
            color: white;
            border: #00de00;
            text-align: center;
        }
        .TOS{
            color:#ff002a;
            font-weight: bold;
        }
        .TOS:hover{
            color: rgba(255, 0, 42, 0.53);
        }
        .dark-mode .distribute-wrp .distribute-logos h5 {
            color: rgba(255,255,255,.6);
            font-family: cera pro;
            font-weight: bold;
        }



/* ========== from sites/guest/pricing.php ========== */

.logo{
   margin-bottom: 10px;
   }
   .logo-light {
   display: none;
   }
   .light-mode .logo-light {
   display: block;
   }
   .light-mode .logo-dark {
   display: none;
   }

   .accordion-body ul li::before {
      content: "\2022";
      color: red;
      font-weight: bold;
      display: inline-block;
      width: 1em;
      margin-left: -1em;
   }
   .light-mode .accordion-body ul li{
      margin-left: 1.5em;
      color: #555;
   }
   .dark-mode .accordion-body ul li{
      margin-left: 1.5em;
      color: #929294;
   }

   .light-mode .accordion-body ol li{
      list-style-type: decimal;
      margin-left: 1.5em;
      color: #555 !important;
   }
   .dark-mode .accordion-body ol li{
      list-style-type: decimal;
      margin-left: 1.5em;
      color: #929294;
   }



/* ========== from sites/guest/privacy.php ========== */

.logo{
            margin-bottom: 10px;
        }
        .logo-light {
            display: none;
        }
        .light-mode .logo-light {
            display: block;
        }
        .light-mode .logo-dark {
            display: none;
        }



/* ========== from sites/guest/royalties.php ========== */

.royalties-page .contact-info h1,
    .royalties-page .titlebar h2 {
        color: inherit;
        font-size: 42px;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .royalties-page .contact-info {
        background-image: url(../images/contact-Img.webp);
        padding: 120px 80px 50px 59px;
    }

    .royalties-page .contact-wrpper {
        padding: 20px 0 18px;
    }

    .royalties-page .contact-block {
        padding: 12px 12px 14px;
    }

    .royalties-page .faq-wrp {
        padding: 0 0 26px;
    }

    .royalties-page .faq-wrp.mt-5 {
        margin-top: 24px !important;
    }

    .royalties-page .faq-block {
        margin: 0 auto;
        max-width: 1022px;
        width: 100%;
    }

    .royalties-page .faq-block .titlebar {
        margin-bottom: 16px;
    }

    .royalties-page .faq-block .titlebar p {
        margin-bottom: 0;
    }

    .royalty-updated,
    .royalty-helper-text {
        color: #929294;
        line-height: 1.7;
    }

    .royalty-form-grid,
    .royalty-summary-grid,
    .royalty-notes-grid {
        row-gap: 16px;
    }

    .royalties-page .contact-from.tab-informetion {
        padding-top: 0;
    }

    .royalty-form-grid {
        align-items: stretch;
    }

    .royalty-form-grid > [class*="col-"],
    .royalty-summary-grid > [class*="col-"] {
        display: flex;
    }

    .royalty-form-card,
    .royalty-results-card,
    .royalty-note-card,
    .royalty-sources-card {
        background: transparent;
        border: 1px solid rgba(34, 32, 44, 0.12);
        border-radius: 0;
        height: 100%;
        padding: 18px;
        width: 100%;
    }

    .royalty-results-card {
        display: flex;
        flex-direction: column;
    }

    .royalty-summary-grid {
        align-items: stretch;
    }

    .royalty-panel-title {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 14px;
    }

    .royalty-panel-subtitle {
        color: #929294;
        font-size: 14px;
        line-height: 1.7;
        margin-bottom: 16px;
    }

    .royalty-form-card .form-group {
        border-bottom: 1px solid rgba(34, 32, 44, 0.1);
        margin-bottom: 14px;
        padding-bottom: 14px;
    }

    .royalty-form-card .form-group:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .dark-mode .royalty-form-card .form-group {
        border-bottom-color: #22202c;
    }

    .dark-mode .royalty-form-card,
    .dark-mode .royalty-results-card,
    .dark-mode .royalty-note-card,
    .dark-mode .royalty-sources-card {
        border-color: #22202c;
    }

    .royalty-stat {
        border: 1px solid rgba(34, 32, 44, 0.12);
        border-radius: 0;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 14px;
        width: 100%;
    }

    .dark-mode .royalty-stat {
        border-color: #22202c;
    }

    .royalty-stat-label {
        color: #929294;
        display: block;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .royalty-stat-value {
        color: inherit;
        display: block;
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 10px;
    }

    .royalty-presets {
        display: grid;
        gap: 6px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 8px;
    }

    .royalty-presets-label {
        color: #929294;
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-top: 10px;
    }

    .royalty-presets button {
        background: #f5f5f5;
        border: 1px solid #d8d8d8;
        border-radius: 0;
        color: inherit;
        font-size: 13px;
        font-weight: 600;
        min-height: 34px;
        padding: 6px 8px;
        text-align: center;
        transition: all 0.2s ease;
    }

    .dark-mode .royalty-presets button {
        background: #171723;
        border-color: #22202c;
        color: #ffffff;
    }

    .royalty-presets button:hover,
    .royalty-presets button:focus {
        border-color: #ff002a;
        color: #ff002a;
        outline: none;
    }

    .royalty-presets button.is-active {
        background: #ff002a;
        border-color: #ff002a;
        color: #ffffff;
    }

    .royalty-input-with-prefix {
        position: relative;
    }

    .royalty-input-prefix {
        align-items: center;
        color: #929294;
        display: flex;
        height: 100%;
        justify-content: center;
        left: 8px;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 20px;
        z-index: 2;
    }

    .royalty-input-with-prefix .form-control {
        padding-left: 50px !important;
    }

    .royalty-stat p {
        color: #929294;
        line-height: 1.6;
        margin: auto 0 0;
    }

    .royalty-market-table {
        border-top: 1px solid rgba(34, 32, 44, 0.12);
        flex: 1 1 auto;
        margin-top: 14px;
        min-height: 0;
        overflow: auto;
        padding-top: 10px;
    }

    .royalty-market-table .table-responsive,
    .royalty-market-table .table {
        margin-bottom: 0;
        width: 100%;
    }

    .dark-mode .royalty-market-table {
        border-top-color: #22202c;
    }

    .royalty-market-table .table th,
    .royalty-market-table .table td {
        color: inherit;
        vertical-align: middle;
    }

    .royalty-market-table tr.is-selected td {
        font-weight: 600;
    }

    .royalty-selected-market {
        color: #ff002a;
        font-size: 13px;
        font-weight: 600;
        margin-left: 6px;
    }

    .royalty-note-card h3,
    .royalty-sources-card h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .royalty-note-card p,
    .royalty-sources-card li,
    .royalty-results-card p {
        color: #929294;
        line-height: 1.7;
    }

    .royalty-note-card a,
    .royalty-sources-card a {
        color: inherit;
        font-weight: 600;
        text-decoration: underline;
    }

    .royalty-cta-list {
        color: #929294;
        line-height: 1.75;
        margin: 0;
        padding-left: 18px;
    }

    @media (max-width: 991px) {
        .royalties-page .contact-info h1,
        .royalties-page .titlebar h2 {
            font-size: 34px;
        }

        .royalties-page .contact-info {
            padding: 120px 80px 50px 59px;
        }
    }

    @media (max-width: 767px) {
        .royalties-page .row {
            --bs-gutter-x: 8px;
        }

        .royalties-page .container {
            padding-left: 8px;
            padding-right: 8px;
        }

        .royalties-page .contact-wrpper {
            padding: 8px 0 12px;
        }

        .royalties-page .contact-block {
            padding: 6px 6px 10px;
        }

        .royalties-page .contact-info {
            background-image: none;
            padding: 18px 4px 10px;
        }

        .royalties-page .contact-info h1,
        .royalties-page .titlebar h2 {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .royalty-helper-text,
        .royalty-updated {
            font-size: 12px;
            line-height: 1.5;
            margin-bottom: 6px;
        }

        .royalty-form-grid,
        .royalty-summary-grid,
        .royalty-notes-grid {
            row-gap: 10px;
        }

        .royalty-form-card,
        .royalty-results-card,
        .royalty-note-card,
        .royalty-sources-card {
            padding: 10px;
        }

        .royalty-panel-title {
            font-size: 17px;
            margin-bottom: 8px;
        }

        .royalty-panel-subtitle,
        .royalty-note-card p,
        .royalty-sources-card li,
        .royalty-results-card p,
        .royalty-cta-list {
            font-size: 12px;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .royalty-form-card .form-group {
            margin-bottom: 8px;
            padding-bottom: 8px;
        }

        .royalty-form-card label {
            font-size: 13px;
            margin-bottom: 2px;
        }

        .royalty-form-card .text-muted {
            font-size: 11px;
            line-height: 1.35;
            margin-bottom: 6px !important;
        }

        .royalties-page .form-control,
        .royalties-page .select2-container--default .select2-selection--single {
            font-size: 13px;
            line-height: 1.3;
            min-height: 36px;
        }

        .royalties-page .form-control {
            padding: 8px 10px;
        }

        .royalties-page .select2-container--default .select2-selection--single {
            padding: 8px 30px 8px 10px;
        }

        .royalties-page .select2-container--default .select2-selection--single .select2-selection__rendered {
            font-size: 13px;
            line-height: 20px;
            padding-left: 0;
            padding-right: 0;
        }

        .royalties-page .select2-container--default .select2-selection--single .select2-selection__arrow {
            align-items: center;
            display: flex;
            height: 100%;
            justify-content: center;
            right: 8px;
            top: 0;
            transform: none;
            width: 18px;
        }

        .royalty-stat-value {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .royalty-stat {
            padding: 10px;
            min-height: 0;
        }

        .royalty-stat-label {
            font-size: 11px;
            margin-bottom: 5px;
        }

        .royalty-summary-grid > [class*="col-"] {
            flex: 0 0 50%;
            width: 50%;
        }

        .royalty-presets {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 4px;
            margin-top: 6px;
        }

        .royalty-presets-label {
            font-size: 11px;
            margin-top: 6px;
        }

        .royalty-presets button {
            font-size: 11px;
            min-height: 28px;
            padding: 4px 6px;
        }

        .royalty-input-prefix {
            left: 6px;
            width: 16px;
        }

        .royalty-input-with-prefix .form-control {
            padding-left: 32px !important;
        }

        .royalty-market-table {
            margin-top: 10px;
            padding-top: 8px;
        }

        .royalty-market-table .table th,
        .royalty-market-table .table td {
            font-size: 12px;
            padding: 8px 6px;
        }

        .royalty-selected-market {
            display: inline-block;
            font-size: 11px;
            margin-left: 4px;
        }

        .royalty-note-card h3,
        .royalty-sources-card h3 {
            font-size: 18px;
            margin-bottom: 6px;
        }

        .royalties-page .contact-wrp {
            padding: 20px 0;
        }

        .royalties-page .contact-wrp h2 {
            font-size: 22px;
            line-height: 1.3;
            margin-bottom: 10px;
        }

        .royalty-cta-list {
            padding-left: 16px;
        }

        .royalties-page .faq-wrp {
            padding: 0 0 18px;
        }

        .royalties-page .faq-wrp.mt-5 {
            margin-top: 16px !important;
        }

        .royalties-page .faq-block .titlebar {
            margin-bottom: 10px;
        }
    }

    @media (max-width: 479px) {
        .royalties-page .row {
            --bs-gutter-x: 6px;
        }

        .royalties-page .container {
            padding-left: 6px;
            padding-right: 6px;
        }

        .royalties-page .contact-block {
            padding: 4px 4px 8px;
        }

        .royalties-page .contact-info h1,
        .royalties-page .titlebar h2 {
            font-size: 22px;
        }

        .royalty-form-card,
        .royalty-results-card,
        .royalty-note-card,
        .royalty-sources-card,
        .royalty-stat {
            padding: 9px;
        }

        .royalty-panel-title {
            font-size: 16px;
        }

        .royalty-stat-value {
            font-size: 18px;
        }

        .royalty-summary-grid > [class*="col-"] {
            flex: 0 0 50%;
            width: 50%;
        }

        .royalty-market-table .table th,
        .royalty-market-table .table td {
            font-size: 11px;
            padding: 7px 4px;
        }
    }



/* ========== from sites/guest/smartlink-generator.php ========== */

.dark-mode .smartlink-tool-card,
    .dark-mode .smartlink-platform-card,
    .dark-mode .smartlink-loading-box {
        background: #171723;
        border-color: #22202C;
        color: #ffffff;
    }

    .dark-mode .smartlink-meta-line,
    .dark-mode .smartlink-loading-box p,
    .dark-mode .smartlink-loading-box small {
        color: #c8ccda !important;
    }

    .smartlink-tool-card,
    .smartlink-platform-card,
    .smartlink-loading-box {
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 8px;
        background: #ffffff;
    }

    .smartlink-tool-card {
        padding: 24px;
    }

    #smartlink-generator-main .contact-wrpper .contact-block > .row,
    #presave-generator-main .contact-wrpper .contact-block > .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #smartlink-generator-main .contact-wrpper .contact-block > .row > .col-md-12,
    #presave-generator-main .contact-wrpper .contact-block > .row > .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    #smartlink-generator-main .contact-wrpper .contact-block .contact-from.tab-informetion,
    #presave-generator-main .contact-wrpper .contact-block .contact-from.tab-informetion {
        width: 100%;
    }

    #smartlink-generator-main .contact-wrpper .contact-block .row,
    #presave-generator-main .contact-wrpper .contact-block .row {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #presave-generator-main .presave-tool-card {
        overflow: hidden;
    }

    body.guest-tool-page #smartlink-generator-main *,
    body.guest-tool-page #presave-generator-main *,
    body.guest-tool-page .mn-header *,
    body.guest-tool-page .sub-megamenu *,
    body.guest-tool-page .roadmap-wrp * {
        transition-delay: 0s !important;
        transition-duration: 0s !important;
    }

    #presave-generator-main .presave-details-layout {
        align-items: start;
        display: grid;
        gap: 28px;
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
        margin-left: 0;
        margin-right: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #presave-generator-main .presave-cover-panel,
    #presave-generator-main .presave-fields-panel {
        min-width: 0;
    }

    #presave-generator-main .presave-cover-panel .form-group,
    #presave-generator-main .presave-fields-panel .form-group {
        margin-bottom: 0;
    }

    #presave-generator-main .presave-fields-panel {
        align-content: start;
        display: grid;
        gap: 18px;
    }

    #presave-generator-main .presave-fields-panel .form-control {
        min-height: 60px;
    }

    #presave-generator-main .presave-cover-picker {
        align-content: start;
        align-items: stretch;
        background: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 6px;
        cursor: pointer;
        display: grid;
        gap: 8px;
        grid-template-columns: 1fr;
        padding: 14px;
        position: relative;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        width: 100%;
    }

    .light-mode #presave-generator-main .presave-cover-picker {
        background: #ffffff;
        border-color: rgba(18, 24, 40, 0.12);
    }

    .dark-mode #presave-generator-main .presave-cover-picker {
        background: #171723;
        border-color: #34324a;
    }

    #presave-generator-main .presave-cover-picker:hover,
    #presave-generator-main .presave-cover-picker:focus,
    #presave-generator-main .presave-cover-picker:focus-within,
    #presave-generator-main .presave-cover-picker.is-dragover {
        border-color: rgba(255, 0, 42, 0.45);
        box-shadow: 0 0 0 2px rgba(255, 0, 42, 0.08);
        outline: none;
    }

    #presave-generator-main .presave-cover-preview {
        align-items: center;
        background: #f3f4f6;
        border: 1px solid #e4e7ec;
        border-radius: 5px;
        display: flex;
        aspect-ratio: 4 / 3;
        height: auto;
        justify-content: center;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .dark-mode #presave-generator-main .presave-cover-preview {
        background: #20202f;
        border-color: #34324a;
    }

    #presave-generator-main .presave-cover-preview img#presaveCoverPreview {
        border: 0 !important;
        border-radius: 0 !important;
        display: none !important;
        height: 100% !important;
        margin: 0 !important;
        max-height: none !important;
        max-width: none !important;
        object-fit: cover !important;
        padding: 0 !important;
        width: 100% !important;
    }

    #presave-generator-main .presave-cover-preview.has-image img#presaveCoverPreview {
        display: block !important;
    }

    #presave-generator-main .presave-cover-placeholder {
        align-items: center;
        color: #6b7280;
        display: flex;
        flex-direction: column;
        gap: 7px;
        justify-content: center;
        min-height: 100%;
        padding: 18px;
        text-align: center;
        width: 100%;
    }

    #presave-generator-main .presave-cover-preview.has-image .presave-cover-placeholder {
        display: none;
    }

    #presave-generator-main .presave-cover-placeholder i {
        align-items: center;
        background: rgba(255, 0, 42, 0.08);
        border-radius: 999px;
        color: #ff002a;
        display: inline-flex;
        font-size: 22px;
        height: 50px;
        justify-content: center;
        width: 50px;
    }

    #presave-generator-main .presave-cover-placeholder strong {
        color: #171923;
        display: block;
        font-size: 16px;
        line-height: 1.3;
    }

    #presave-generator-main .presave-cover-placeholder span {
        color: #6c757d;
        display: block;
        font-size: 12px;
        line-height: 1.35;
    }

    .dark-mode #presave-generator-main .presave-cover-placeholder {
        color: #9aa1b4;
    }

    .dark-mode #presave-generator-main .presave-cover-placeholder i {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    .dark-mode #presave-generator-main .presave-cover-placeholder strong {
        color: #ffffff;
    }

    .dark-mode #presave-generator-main .presave-cover-placeholder span {
        color: #9aa1b4;
    }

    #presave-generator-main .presave-cover-copy {
        align-items: stretch;
        display: grid;
        gap: 4px;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    #presave-generator-main .presave-cover-button {
        display: none;
    }

    #presave-generator-main .presave-cover-button:hover {
        color: inherit;
    }

    .dark-mode #presave-generator-main .presave-cover-button {
        color: inherit;
    }

    .dark-mode #presave-generator-main .presave-cover-button:hover {
        color: inherit;
    }

    #presave-generator-main .presave-cover-copy strong {
        color: #171923;
        display: block;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dark-mode #presave-generator-main .presave-cover-copy strong {
        color: #ffffff;
    }

    #presave-generator-main .presave-cover-status {
        color: #6c757d;
        display: block;
        font-size: 11px;
        line-height: 1.25;
        margin-top: 0;
        text-align: center;
    }

    .dark-mode #presave-generator-main .presave-cover-status {
        color: #9aa1b4;
    }

    #presave-generator-main .presave-cover-status.is-success {
        color: #16a34a;
    }

    #presave-generator-main .presave-cover-status.is-error {
        color: #b91c1c;
    }

    .dark-mode #presave-generator-main .presave-cover-status.is-success {
        color: #86efac;
    }

    .dark-mode #presave-generator-main .presave-cover-status.is-error {
        color: #fca5a5;
    }

    #presave-generator-main .presave-cover-picker input[type="file"].presave-cover-input,
    #presave-generator-main input[type="file"]#presaveCover.presave-cover-input {
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        position: absolute !important;
        white-space: nowrap !important;
        width: 1px !important;
    }

    .tool-input-group {
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
    }

    .tool-input-group > .form-control {
        flex: 1 1 auto;
        border-radius: 4px 0 0 4px;
        min-height: 52px;
        min-width: 0;
        width: 1%;
    }

    .tool-input-group > .input-group-append {
        display: flex;
        flex: 0 0 auto;
    }

    .tool-input-group > .input-group-append > .btn {
        align-items: center;
        border-radius: 0 4px 4px 0;
        display: inline-flex;
        justify-content: center;
        min-height: 52px;
        white-space: nowrap;
    }

    .smartlink-loading-box {
        display: none;
        padding: 28px 22px;
        text-align: center;
    }

    .smartlink-loader {
        width: 58px;
        height: 58px;
        margin: 0 auto 18px;
        border: 4px solid rgba(255, 0, 42, 0.18);
        border-top-color: #ff002a;
        border-radius: 50%;
        animation: smartlink-spin 0.85s linear infinite;
    }

    .smartlink-cover-wrap {
        text-align: center;
    }

    .smartlink-cover-image {
        width: 220px;
        height: 220px;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border: 3px solid #ff002a;
        border-radius: 8px;
    }

    .smartlink-platform-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .smartlink-platform-card {
        align-items: center;
        color: inherit;
        display: flex;
        gap: 12px;
        min-height: 78px;
        padding: 14px 16px;
        text-decoration: none;
        transition: transform 0.15s ease, border-color 0.15s ease;
    }

    .smartlink-platform-card:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 0, 42, 0.35);
        color: inherit;
    }

    .smartlink-platform-card h5 {
        margin: 0 0 4px;
    }

    .smartlink-platform-copy {
        min-width: 0;
    }

    .smartlink-platform-icon {
        align-items: center;
        background: #f3f4f6;
        border: 1px solid #e4e7ec;
        border-radius: 6px;
        display: inline-flex;
        flex: 0 0 42px;
        height: 42px;
        justify-content: center;
        overflow: hidden;
        width: 42px;
    }

    .smartlink-platform-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: #2d3440;
    }

    .smartlink-platform-mark svg {
        display: block;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .smartlink-platform-icon .smartlink-platform-mark svg path,
    .smartlink-platform-icon .smartlink-platform-mark svg circle,
    .smartlink-platform-icon .smartlink-platform-mark svg rect,
    .smartlink-platform-icon .smartlink-platform-mark svg ellipse,
    .smartlink-platform-icon .smartlink-platform-mark svg polygon,
    .smartlink-platform-icon .smartlink-platform-mark svg polyline {
        fill: currentColor !important;
    }

    .smartlink-platform-icon .smartlink-platform-mark svg [stroke]:not([stroke="none"]) {
        stroke: currentColor !important;
    }

    .smartlink-platform-icon .smartlink-platform-mark img {
        filter: grayscale(1);
        opacity: 0.92;
    }

    .smartlink-platform-fallback {
        color: #2d3440;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    .smartlink-platform-card h5 {
        margin-bottom: 4px;
    }

    .smartlink-platform-card small.smartlink-platform-url-line {
        display: block;
        font-size: 11px;
        line-height: 1.35;
        margin-top: 2px;
        color: #6c757d;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
    }

    .dark-mode .smartlink-platform-card small.smartlink-platform-url-line {
        color: #8b93a8 !important;
    }

    .smartlink-meta-line {
        color: #6c757d;
    }

    .smartlink-mini-btn {
        border: 1px solid #ff002a;
        background: transparent;
        color: #ff002a;
        border-radius: 6px;
        padding: 8px 14px;
        font-weight: 600;
    }

    .smartlink-mini-btn:hover {
        background: #ff002a;
        color: #ffffff;
    }

    .smartlink-empty {
        text-align: center;
        padding: 18px;
        border: 1px dashed rgba(255, 0, 42, 0.35);
        border-radius: 12px;
        color: #6c757d;
    }

    .smartlink-permalink-box {
        padding: 14px;
        border: 1px solid rgba(255, 0, 42, 0.18);
        border-radius: 8px;
        background: rgba(255, 0, 42, 0.04);
    }

    /* Let the permalink column shrink inside Bootstrap rows (avoids flex overflow on desktop) */
    #resultPanel .smartlink-tool-card > .row > .col-md-8 {
        min-width: 0;
    }

    .smartlink-permalink-field {
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        max-width: 100%;
        min-width: 0;
    }

    /* Bootstrap .form-control is width:100%; in a flex row that forces overflow — share space with Copy */
    .smartlink-permalink-field .smartlink-permalink-input.form-control {
        border-radius: 6px !important;
        flex: 1 1 0;
        max-width: 100%;
        min-height: 48px;
        min-width: 0;
        width: auto !important;
    }

    .smartlink-copy-btn {
        align-items: center;
        border-radius: 6px;
        box-sizing: border-box;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: 14px;
        font-weight: 700;
        gap: 8px;
        justify-content: center;
        line-height: 1.25;
        min-height: 48px;
        min-width: 7.5rem;
        padding: 10px 18px;
        white-space: nowrap;
    }

    .smartlink-copy-btn i {
        font-size: 14px;
        line-height: 1;
    }

    @media (min-width: 768px) {
        /* Global .contact-from button { width:100% } (style.css) was stretching Copy across the row */
        .contact-wrpper .contact-block .contact-from .smartlink-permalink-field .smartlink-copy-btn {
            width: auto !important;
        }
    }

    .smartlink-permalink-input {
        background: #ffffff !important;
        border: 1px solid rgba(255, 0, 42, 0.14);
        color: #10131a !important;
        font-weight: 600;
        overflow-x: auto;
        padding: 10px 12px;
        -webkit-overflow-scrolling: touch;
    }

    .smartlink-permalink-box .tool-input-group {
        max-width: 100%;
    }

    .smartlink-permalink-box .tool-input-group > .form-control {
        min-width: 0;
    }

    .smartlink-permalink-input:focus {
        background: #ffffff !important;
        border-color: rgba(255, 0, 42, 0.25);
        border-radius: 6px;
        box-shadow: 0 0 0 2px rgba(255, 0, 42, 0.08);
        color: #10131a !important;
    }

    .btn-main:disabled {
        background: #8080804d;
        color: gray;
        cursor: not-allowed;
    }

    .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 50px clamp(16px, 5vw, 70px);
        text-align: center;
    }

    .smartlink-result-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .smartlink-open-btn {
        display: inline-block;
    }

    .smartlink-generate-action {
        justify-content: flex-end;
    }

    .smartlink-generator-intro small.smartlink-generator-sub {
        display: block;
        line-height: 1.55;
        margin: 10px 0 0;
        max-width: min(42rem, 100%);
        text-align: center;
        width: 100%;
    }

    #generateSmartlinkBtn {
        gap: 7px;
        font-size: 14px;
    }

    #generateSmartlinkBtn i {
        font-size: 13px;
    }

    .smartlink-generator-intro .smartlink-generator-lead {
        color: inherit;
        font-size: 1.15rem;
        font-weight: 600;
        margin: 0;
        max-width: min(42rem, 100%);
        text-align: center;
        width: 100%;
    }

    .smartlink-generator-intro h1 {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.15;
        margin-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
        max-width: min(42rem, 100%);
        text-align: center;
        width: 100%;
    }

    .smartlink-tool-card-enhanced {
        padding: 28px 26px 26px;
    }

    /*
     * Smartlink captcha: same Bootstrap shell as #guestForgotPasswordModal (modal > modal-dialog > modal-content > change-pass-block > btn-close + h3).
     * Styling mirrors body.guest-auth-layout modals for .modal-content / .change-pass-block .btn-close (guest tools use body.guest-site, not guest-auth-layout).
     */
    body.guest-site #smartlinkCaptchaModal .modal-content {
        overflow: visible !important;
        position: relative !important;
    }

    .light-mode body.guest-site #smartlinkCaptchaModal .modal-content {
        background: #fff !important;
        box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1) !important;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal-content {
        background: #111119 !important;
        box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.1) !important;
    }

    body.guest-site #smartlinkCaptchaModal .modal .btn-close i,
    body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close i {
        display: none !important;
    }

    .light-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close,
    .light-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close {
        align-items: center;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
        color: #252525 !important;
        display: inline-flex;
        font-size: 0;
        height: 28px;
        justify-content: center;
        opacity: 1;
        padding: 0;
        position: absolute;
        right: 12px;
        text-shadow: none;
        top: 12px;
        transition: 0.4s linear;
        width: 28px;
    }

    .light-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close::before,
    .light-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close::before {
        content: "\f00d";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
    }

    .light-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close:hover,
    .light-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close:hover {
        background: transparent !important;
        border-color: transparent !important;
        color: #252525 !important;
        transform: none !important;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close,
    .dark-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close {
        align-items: center;
        background: transparent !important;
        border: none !important;
        border-radius: 0;
        box-shadow: none !important;
        color: #fff !important;
        display: inline-flex;
        font-size: 0;
        height: 28px;
        justify-content: center;
        opacity: 1;
        padding: 0;
        position: absolute;
        right: 12px;
        text-shadow: none;
        top: 12px;
        transition: 0.4s linear;
        width: 28px;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close::before,
    .dark-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close::before {
        content: "\f00d";
        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome";
        font-size: 16px;
        font-weight: 900;
        line-height: 1;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close:hover,
    .dark-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close:hover {
        background: transparent !important;
        border-color: transparent !important;
        color: #fff !important;
        transform: none !important;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close:focus,
    .dark-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close:focus {
        box-shadow: none !important;
    }

    .dark-mode body.guest-site #smartlinkCaptchaModal .modal-content .change-pass-block {
        color: rgba(255, 255, 255, 0.92);
    }

    html.light-mode body.guest-site #smartlinkCaptchaModal #smartlinkCaptchaHint {
        color: rgba(0, 0, 0, 0.55);
    }

    html.dark-mode body.guest-site #smartlinkCaptchaModal #smartlinkCaptchaHint {
        color: rgba(255, 255, 255, 0.6);
    }

    body.guest-site #smartlinkCaptchaModal #smartlinkCaptchaWrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    body.guest-site #smartlinkCaptchaModal #smartlinkCaptchaWrap .iconcaptcha-widget {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 767px) {
        .light-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close,
        .light-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close,
        .dark-mode body.guest-site #smartlinkCaptchaModal .modal .btn-close,
        .dark-mode body.guest-site #smartlinkCaptchaModal .change-pass-block .btn-close {
            height: 24px;
            right: 10px;
            top: 10px;
            width: 24px;
        }
    }

    .smartlink-tool-tabs-wrap {
        width: 100%;
        margin-bottom: 24px;
    }

    /* Three equal columns, always side-by-side (no vertical stack) */
    .smartlink-tool-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        margin: 0;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(0, 0, 0, 0.04);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .dark-mode .smartlink-tool-tabs {
        border-color: #2f2d3d;
        background: #171723;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    .smartlink-tool-tab {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 46px;
        margin: 0 !important;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #ffffff;
        color: #1a1d26;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        padding: 10px 8px;
        border-radius: 8px;
        cursor: pointer;
        transition:
            background 0.2s ease,
            color 0.2s ease,
            border-color 0.2s ease;
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
    }

    .dark-mode .smartlink-tool-tab:not(.active) {
        background: #1e1e2c !important;
        border-color: #34324a !important;
        color: #e8eaf4 !important;
        box-shadow: none;
    }

    .smartlink-tool-tab:hover {
        border-color: rgba(255, 0, 42, 0.35);
        background: #fff5f7;
        color: #1a1d26;
    }

    .dark-mode .smartlink-tool-tab:not(.active):hover {
        background: #2a2840 !important;
        border-color: rgba(255, 0, 42, 0.45) !important;
        color: #ffffff !important;
    }

    .smartlink-tool-tab:focus {
        outline: none;
        box-shadow: none;
    }

    .smartlink-tool-tab:focus-visible {
        outline: none;
        box-shadow: none;
    }

    .smartlink-tool-tab.active {
        background: #ff002a !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .dark-mode .smartlink-tool-tab.active {
        background: #ff002a !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .smartlink-tool-panel {
        animation: smartlink-panel-in 0.2s ease;
    }

    @keyframes smartlink-panel-in {
        from {
            opacity: 0.85;
        }
        to {
            opacity: 1;
        }
    }

    .smartlink-tool-panel-hidden,
    .smartlink-tool-panel[hidden] {
        display: none !important;
    }

    .smartlink-field-label {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    .tool-input-group .input-group-text.smartlink-input-icon {
        background: rgba(255, 0, 42, 0.06);
        border: 1px solid rgba(255, 0, 42, 0.15);
        color: #ff002a;
        border-radius: 4px 0 0 4px;
        flex: 0 0 56px;
        justify-content: center;
        min-height: 52px;
        min-width: 56px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .dark-mode .tool-input-group .input-group-text.smartlink-input-icon {
        background: rgba(255, 0, 42, 0.1);
        border-color: rgba(255, 0, 42, 0.25);
        color: #ff6b8a;
    }

    .dark-mode .smartlink-tool-card-enhanced .tool-input-group .input-group-text.smartlink-input-icon {
        background: #1a1a24 !important;
        border-color: #35354a !important;
        color: #ff7a9a !important;
    }

    .tool-input-group > .input-group-text + .form-control {
        border-radius: 0 4px 4px 0;
    }

    /* Same visual height for URL / UPC / ISRC input rows (icon + field) */
    .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row {
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
        min-height: 54px;
    }

    .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row > .form-control {
        box-sizing: border-box;
        flex: 1 1 auto;
        font-size: 14px;
        line-height: 1.35;
        min-height: 54px;
        min-width: 0;
        padding: 12px 14px;
    }

    .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row .input-group-text.smartlink-input-icon {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        height: auto;
        justify-content: center;
        min-height: 54px;
    }

    .smartlink-supported-hint {
        font-size: 13px;
        line-height: 1.55;
        color: #6c757d;
    }

    .dark-mode .smartlink-supported-hint {
        color: #a8aebf !important;
    }

    /* Dark theme: inputs, hints, progress — match site dark UI */
    html.dark-mode .smartlink-tool-card-enhanced .form-control,
    .dark-mode .smartlink-tool-card-enhanced .form-control {
        background-color: #16161f !important;
        border: 1px solid #2e2e3d !important;
        color: #f0f0f8 !important;
    }

    html.dark-mode .smartlink-tool-card-enhanced .form-control:focus,
    .dark-mode .smartlink-tool-card-enhanced .form-control:focus {
        background-color: #1c1c28 !important;
        border-color: #ff002a !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 0, 42, 0.18);
    }

    html.dark-mode .smartlink-tool-card-enhanced .form-control::placeholder,
    .dark-mode .smartlink-tool-card-enhanced .form-control::placeholder {
        color: #8b90a0 !important;
        opacity: 1;
    }

    /* Field validation must override smartlink input !important rules + tab-informetion small color */
    html.light-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error,
    .light-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error {
        background: rgba(254, 226, 226, 0.92) !important;
        border-color: rgba(220, 38, 38, 0.65) !important;
        box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35) !important;
        color: #111827 !important;
    }

    html.light-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error:focus,
    .light-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error:focus {
        background: rgba(254, 226, 226, 0.98) !important;
        border-color: #dc2626 !important;
        box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.28) !important;
        color: #111827 !important;
    }

    html.dark-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error,
    .dark-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error {
        background-color: rgba(127, 29, 29, 0.35) !important;
        border-color: rgba(252, 165, 165, 0.65) !important;
        box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45) !important;
        color: #fef2f2 !important;
    }

    html.dark-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error:focus,
    .dark-mode .guest-site .smartlink-tool-card-enhanced .form-control.validation-field-error:focus {
        background-color: rgba(127, 29, 29, 0.42) !important;
        border-color: #f87171 !important;
        box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.3) !important;
        color: #ffffff !important;
    }

    html.light-mode .guest-site .smartlink-tool-card-enhanced .tool-input-group:has(.form-control.validation-field-error) .input-group-text.smartlink-input-icon,
    .light-mode .guest-site .smartlink-tool-card-enhanced .tool-input-group:has(.form-control.validation-field-error) .input-group-text.smartlink-input-icon {
        background: rgba(254, 226, 226, 0.85) !important;
        border-color: rgba(220, 38, 38, 0.45) !important;
        color: #b91c1c !important;
    }

    html.dark-mode .guest-site .smartlink-tool-card-enhanced .tool-input-group:has(.form-control.validation-field-error) .input-group-text.smartlink-input-icon,
    .dark-mode .guest-site .smartlink-tool-card-enhanced .tool-input-group:has(.form-control.validation-field-error) .input-group-text.smartlink-input-icon {
        background: rgba(127, 29, 29, 0.45) !important;
        border-color: rgba(252, 165, 165, 0.5) !important;
        color: #fecaca !important;
    }

    html.light-mode .guest-site .smartlink-tool-card .validation-field-error-message:not(.d-none) {
        color: #b91c1c !important;
    }

    html.dark-mode .guest-site .smartlink-tool-card .validation-field-error-message:not(.d-none) {
        color: #fca5a5 !important;
    }

    html.dark-mode .smartlink-tool-card-enhanced .smartlink-field-label,
    .dark-mode .smartlink-tool-card-enhanced .smartlink-field-label {
        color: #e4e6f0;
    }

    html.dark-mode .smartlink-tool-card-enhanced .text-muted,
    .dark-mode .smartlink-tool-card-enhanced .text-muted {
        color: #9aa1b4 !important;
    }

    html.dark-mode .smartlink-tool-card .progress,
    .dark-mode .smartlink-tool-card .progress {
        background-color: #2a2a38;
    }

    .dark-mode .smartlink-permalink-box {
        background: rgba(255, 0, 42, 0.08);
        border-color: rgba(255, 0, 42, 0.28);
    }

    html.dark-mode .smartlink-tool-card .smartlink-permalink-input,
    .dark-mode .smartlink-tool-card .smartlink-permalink-input {
        background: #16161f !important;
        border: 1px solid #3a3a4a !important;
        color: #f0f0f8 !important;
    }

    html.dark-mode .smartlink-tool-card .smartlink-permalink-input:focus,
    .dark-mode .smartlink-tool-card .smartlink-permalink-input:focus {
        background: #1c1c28 !important;
        border-color: #ff002a !important;
        color: #ffffff !important;
        box-shadow: 0 0 0 0.2rem rgba(255, 0, 42, 0.15);
    }

    .dark-mode .smartlink-platform-icon {
        background: #252532;
        border-color: #3a3a4a;
    }

    .dark-mode .smartlink-platform-fallback {
        color: #e8eaf0;
    }

    .dark-mode .smartlink-platform-mark {
        opacity: 0.95;
        color: #e8eaf0;
    }

    .dark-mode #resultPanel hr {
        border-color: #2f2f3d;
        opacity: 1;
    }

    .smartlink-generate-row .smartlink-generate-cta {
        align-items: center;
        box-sizing: border-box;
        display: inline-flex !important;
        font-size: 15px;
        font-weight: 700;
        gap: 10px;
        justify-content: center;
        letter-spacing: 0.06em;
        line-height: 1.3 !important;
        min-height: 54px;
        padding: 14px 22px !important;
        text-transform: uppercase;
    }

    .contact-wrpper .contact-block .contact-from #generateSmartlinkBtn.smartlink-generate-cta {
        padding: 14px 22px !important;
    }

    #generateSmartlinkBtn.smartlink-generate-cta {
        vertical-align: middle;
    }

    .smartlink-seo-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .smartlink-seo-article h2 {
        font-size: 1.65rem;
        line-height: 1.3;
    }

    /* FAQ section title uses h2 + .h5; global .h5 applies opacity — match primary h2 color */
    .smartlink-seo-article h2.h5 {
        color: inherit;
        opacity: 1;
    }

    .smartlink-seo-article h3 {
        color: inherit;
    }

    .smartlink-seo-article .lead {
        font-size: 1.05rem;
    }

    .smartlink-feature-card {
        height: 100%;
    }

    .smartlink-feature-card h3 {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .smartlink-feature-icon {
        color: #ff002a;
        font-size: 18px;
        flex-shrink: 0;
    }

    .smartlink-feature-card p {
        margin-bottom: 0;
        color: #555;
        line-height: 1.7;
    }

    .dark-mode .smartlink-feature-card p {
        color: #c8ccda;
    }

    /*
     * Mobile: contact page rule (.contact-wrp .row { text-align: center }) inherits into feature cards.
     * Left-align body copy + headings for readable measure; stronger body contrast; icon aligns to first line.
     */
    @media screen and (max-width: 767px) {
        .contact-wrp.smartlink-seo-section .smartlink-feature-grid {
            justify-content: flex-start !important;
            text-align: left !important;
        }

        .contact-wrp.smartlink-seo-section .smartlink-feature-grid > [class*='col-'] {
            text-align: left;
        }

        .contact-wrp.smartlink-seo-section .smartlink-feature-card {
            padding-bottom: 0.25rem;
        }

        .contact-wrp.smartlink-seo-section .smartlink-feature-card h3 {
            align-items: flex-start;
            line-height: 1.35;
            margin-bottom: 0.65rem;
            text-align: left !important;
        }

        .contact-wrp.smartlink-seo-section .smartlink-feature-card h3.h5 {
            color: #212529;
            opacity: 1;
        }

        .contact-wrp.smartlink-seo-section .smartlink-feature-card p {
            color: #343a40 !important;
            font-size: 15px;
            line-height: 1.65;
            text-align: left !important;
        }

        .dark-mode .contact-wrp.smartlink-seo-section .smartlink-feature-card h3.h5 {
            color: #f0f2f8;
        }

        .dark-mode .contact-wrp.smartlink-seo-section .smartlink-feature-card p {
            color: #e4e7ef !important;
        }
    }

    .smartlink-usecases-block {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        padding-top: 1.5rem;
    }

    .dark-mode .smartlink-usecases-block {
        border-top-color: rgba(255, 255, 255, 0.1);
    }

    .smartlink-usecase {
        background: rgba(255, 0, 42, 0.03);
        border: 1px solid rgba(255, 0, 42, 0.1);
        border-radius: 8px;
        padding: 16px 18px;
        height: 100%;
    }

    .smartlink-usecase strong {
        display: block;
        margin-bottom: 6px;
        font-size: 0.95rem;
    }

    .smartlink-usecase p {
        margin-bottom: 0;
        font-size: 0.9rem;
        color: #555;
        line-height: 1.55;
    }

    .dark-mode .smartlink-usecase {
        background: rgba(255, 0, 42, 0.06);
        border-color: rgba(255, 0, 42, 0.18);
    }

    .dark-mode .smartlink-usecase p {
        color: #c8ccda;
    }

    /* FAQ: same global .accordion styles as royalties / marketing (guest home.php inline SVG + Bootstrap); no separate skin */
    .smartlink-seo-article .accordion .accordion-body span {
        display: block;
    }

    .smartlink-seo-article .accordion .accordion-button::after {
        display: none !important;
    }

    .smartlink-cta-distribute .row,
    .smartlink-cta-final .row {
        align-items: center;
    }

    .smartlink-cta-distribute p,
    .smartlink-cta-final p {
        margin-bottom: 0;
    }

    @media (max-width: 576px) {
        .smartlink-tool-card-enhanced {
            padding: 22px 16px 20px;
        }

        .smartlink-tool-tabs {
            gap: 6px;
            padding: 6px;
        }

        .smartlink-tool-tab {
            font-size: 11px;
            padding: 10px 4px;
            letter-spacing: 0.03em;
            min-height: 44px;
        }
    }

    @media (max-width: 380px) {
        .smartlink-tool-tabs {
            gap: 4px;
            padding: 5px;
        }

        .smartlink-tool-tab {
            font-size: 10px;
            padding: 9px 2px;
            min-height: 42px;
        }
    }

    .roadmap-wrp .main-title p {
        margin-bottom: 126px;
    }

    .roadmap-wrp {
        overflow: visible;
    }

    .roadmap-wrp .roadmap-block {
        background-image: unset;
        overflow: visible;
        padding: 0 0 125px 147px;
        position: relative;
    }

    .roadmap-wrp .roadmap-block:first-of-type {
        margin-top: 0;
    }

    .roadmap-wrp .roadmap-block .row {
        display: flex;
        align-items: center;
    }

    @media (min-width: 768px) {
        .roadmap-wrp .roadmap-block .row > .col-md-6:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #smartlink-generator-main .roadmap-wrp .main-title h2 {
            font-size: 3rem;
            line-height: 1.18;
            margin-bottom: 14px;
        }

        #smartlink-generator-main .roadmap-wrp .main-title p {
            font-size: 1.125rem;
            line-height: 1.5;
            margin-bottom: 2rem !important;
        }

        /* Equal top/bottom padding on the section; cards share one vertical rhythm (centered columns) */
        #smartlink-generator-main .roadmap-wrp {
            padding-bottom: clamp(2rem, 4vw, 2.75rem);
            padding-top: clamp(2rem, 4vw, 2.75rem);
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-block {
            padding-left: 147px;
            padding-right: 147px !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-block:not(.roadmap-second-block):not(.roadmap-last-block) {
            padding-bottom: 36px !important;
            padding-top: 36px !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-second-block {
            margin-top: 24px !important;
            padding-bottom: 36px !important;
            padding-top: 36px !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-last-block {
            margin-top: 24px !important;
            padding-bottom: 36px !important;
            padding-top: 36px !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-img {
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .row {
            align-items: center;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:last-child {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .roadmap-wrp .roadmap-block .number span {
        left: 45px;
        top: 15px;
        z-index: 3;
    }

    .roadmap-wrp .roadmap-block .sound-wave-img {
        bottom: 0;
        left: 63px;
        overflow: visible;
        pointer-events: none;
        position: absolute;
        top: 50px;
        transform: translateX(-50%);
        width: 56px;
        z-index: 1;
    }

    /* Bridge slightly toward the next step card (overlap gap) */
    .roadmap-wrp .roadmap-block:first-of-type .sound-wave-img {
        bottom: -32px;
    }

    .roadmap-wrp .roadmap-block .sound-wave-img img {
        bottom: 0;
        display: block;
        height: 100%;
        left: 0;
        /* cover crops left/right of the asset; fill shows the full graphic in the strip */
        object-fit: fill;
        object-position: center;
        opacity: 0.28;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
    }

    .roadmap-wrp .roadmap-second-block {
        padding: 50px 52px 0 147px;
        background-color: #fff;
        background-image: url(../images/roadmap2-bg.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 20px;
        margin-top: -20px;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    }

    .roadmap-wrp .roadmap-second-block .number span {
        top: 50px;
    }

    .roadmap-wrp .roadmap-second-block .sound-wave-img {
        bottom: 0;
        top: 78px;
    }

    .roadmap-wrp .roadmap-last-block .sound-wave-img {
        bottom: 0;
        top: 50px;
    }

    .roadmap-wrp .roadmap-second-block .roadmap-dt {
        width: 70%;
    }

    .roadmap-wrp .roadmap-last-block {
        margin: 73px 0 0;
        padding: 42px 52px 0 147px;
        background-image: unset;
    }

    .roadmap-wrp .roadmap-block .roadmap-dt {
        width: 75%;
    }

    /* Smartlink generator: wider text column (col-md-7) — use full column width */
    #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt {
        max-width: 100%;
        width: 100%;
    }

    .roadmap-wrp .roadmap-block .roadmap-dt h3 {
        font-weight: 700;
        font-size: 32px;
        line-height: 40px;
        text-transform: capitalize;
        color: #252525;
        margin: 0 0 20px;
    }

    .roadmap-wrp .roadmap-block .roadmap-dt p {
        font-weight: 400;
        font-size: 18px;
        line-height: 32px;
        color: #555;
        opacity: 0.6;
        margin: 0 0 40px;
    }

    .roadmap-wrp .roadmap-block .roadmap-img {
        position: relative;
        z-index: 2;
    }

    .roadmap-wrp .roadmap-block .roadmap-img img {
        max-width: 100%;
    }

    .roadmap-visual {
        align-items: center;
        display: inline-flex;
        height: 112px;
        justify-content: center;
        position: relative;
        width: 112px;
    }

    .roadmap-visual::before,
    .roadmap-visual::after {
        background: rgba(255, 0, 42, 0.08);
        border-radius: 50%;
        content: "";
        position: absolute;
    }

    .roadmap-visual::before {
        height: 96px;
        width: 96px;
    }

    .roadmap-visual::after {
        height: 64px;
        width: 64px;
    }

    .roadmap-visual-badge {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(255, 0, 42, 0.14);
        border-radius: 20px;
        box-shadow: 0 14px 28px rgba(16, 19, 26, 0.08);
        color: #ff002a;
        display: inline-flex;
        height: 72px;
        justify-content: center;
        position: relative;
        width: 72px;
        z-index: 1;
    }

    .roadmap-visual-badge i {
        font-size: 28px;
    }

    .dark-mode .roadmap-wrp .roadmap-block {
        background-image: url(../images/crowd.webp);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .dark-mode .roadmap-wrp .roadmap-block .roadmap-dt h3 {
        color: #ffffff;
    }

    .dark-mode .roadmap-wrp .roadmap-block .roadmap-dt p {
        color: #ffffff;
        opacity: 0.6;
    }

    .dark-mode .roadmap-wrp .roadmap-second-block {
        background-color: #0F0E15;
        background-image: url(../images/roadmap2-bg.webp);
        box-shadow: 0px 10px 30px rgb(0 0 0 / 10%);
    }

    .dark-mode .roadmap-visual-badge {
        background: #12131b;
        border-color: #2a2d39;
    }

    /* Tool pages: roadmap blocks stay light / white */
    .guest-tool-page .roadmap-wrp .roadmap-block,
    .guest-tool-page .roadmap-wrp .roadmap-second-block,
    .guest-tool-page .roadmap-wrp .roadmap-last-block {
        background: #ffffff !important;
        background-image: none !important;
        border: 1px solid #e3e7ee;
        border-radius: 14px;
        box-shadow: 0 14px 30px rgba(16, 19, 26, 0.06);
        overflow: hidden !important;
    }
    .guest-tool-page .roadmap-wrp .roadmap-second-block {
        margin-top: 24px;
    }
    .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-dt h3 {
        color: #252525 !important;
    }
    .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-dt p {
        color: #555 !important;
        opacity: 1 !important;
    }
    .guest-tool-page.dark-mode .roadmap-wrp .roadmap-block,
    .guest-tool-page .dark-mode .roadmap-wrp .roadmap-block,
    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-block,
    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-second-block,
    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-last-block {
        background: #12131b !important;
        background-image: none !important;
        border: 1px solid #2a2d39 !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    }

    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-dt h3 {
        color: #ffffff !important;
    }

    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-dt p {
        color: #c8ccda !important;
        opacity: 1 !important;
    }

    .dark-mode .guest-tool-page .roadmap-wrp .roadmap-visual-badge {
        background: #171723;
        border-color: #2a2d39;
    }

    @media (min-width: 768px) {
        .roadmap-wrp .roadmap-block .row {
            flex-wrap: nowrap;
        }
        .roadmap-wrp .roadmap-block .roadmap-img img {
            height: auto;
            max-width: 100%;
            object-fit: contain;
        }

        /* Guest artwork tool pages: same horizontal inset on every step so image column shares one vertical axis; center screenshots in the cell */
        .guest-tool-page .roadmap-wrp > .container > .roadmap-block {
            min-height: 334px;
            padding-bottom: 52px !important;
            padding-left: 147px;
            padding-right: 52px;
            padding-top: 52px !important;
        }
        .guest-tool-page .roadmap-wrp > .container > .roadmap-block:not(.roadmap-second-block):not(.roadmap-last-block) {
            padding-bottom: 52px !important;
            padding-top: 52px !important;
        }
        .guest-tool-page .roadmap-wrp > .container > .roadmap-second-block {
            padding-bottom: 52px !important;
            padding-top: 52px !important;
        }
        .guest-tool-page .roadmap-wrp > .container > .roadmap-last-block {
            padding-bottom: 52px !important;
            padding-top: 52px !important;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .row {
            align-items: center;
            min-height: 220px;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .row > [class*='col-'] {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-dt p {
            margin-bottom: 0;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .row > .col-md-6:last-child {
            align-items: center;
            display: flex;
            justify-content: center;
        }
        /* Block + flex-shrink:0 — flex column + % widths on imgs can otherwise resolve to 0 and hide images */
        .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-img {
            display: block;
            flex-shrink: 0;
            margin-left: auto;
            margin-right: auto;
            max-width: 260px;
            padding-bottom: 1.5rem;
            padding-top: 1.5rem;
            text-align: center;
            width: 100%;
        }
        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:last-child,
        #presave-generator-main .roadmap-wrp .roadmap-block .row > div:last-child {
            align-items: center;
            display: flex;
            justify-content: center;
        }
        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:first-child,
        #presave-generator-main .roadmap-wrp .roadmap-block .row > div:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-img img {
            display: inline-block;
            height: auto;
            margin: 0;
            max-width: 100%;
            object-fit: contain;
            vertical-align: middle;
            width: 100%;
        }

        /*
         * Cover downloader roadmap only (.guest-artwork-roadmap on section):
         * Guest tools default to 147px / 52px horizontal padding — shifts the whole row left inside the card.
         * Match left/right so text + screenshots sit centered; path-prefixed installs also get this via the section class.
         */
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap > .container > .roadmap-block {
            padding-left: 147px;
            padding-right: 147px !important;
        }
        /*
         * Vertical rhythm: default guest-tool rules use asymmetric block padding (e.g. 0 top + 125px bottom on step 1,
         * 50px top + 0 bottom on step 2) so screenshots look top- or bottom-heavy. Use equal top/bottom padding per card
         * and stretch columns so the image column can center the screenshot with even space above/below.
         */
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap > .container > .roadmap-block:not(.roadmap-second-block):not(.roadmap-last-block) {
            padding-bottom: 40px !important;
            padding-top: 40px !important;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap > .container > .roadmap-second-block {
            padding-bottom: 40px !important;
            padding-top: 40px !important;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap > .container > .roadmap-last-block {
            padding-bottom: 40px !important;
            padding-top: 40px !important;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-last-block {
            margin-top: 24px !important;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-block .row {
            align-items: stretch;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-block .row > .col-md-6:first-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-block .row > .col-md-6:last-child {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-block .roadmap-img {
            display: block;
            flex-shrink: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            max-width: 260px;
            padding-bottom: 0;
            padding-top: 0;
            text-align: center;
            width: auto;
        }
        .guest-tool-page .roadmap-wrp.guest-artwork-roadmap .roadmap-block .roadmap-img img {
            display: block;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            object-fit: contain;
            vertical-align: unset;
            width: auto;
        }

        #smartlink-generator-main .roadmap-wrp,
        #presave-generator-main .roadmap-wrp {
            overflow: visible;
            padding-bottom: clamp(2rem, 4vw, 2.75rem);
            padding-top: clamp(2rem, 4vw, 2.75rem);
        }

        #smartlink-generator-main .roadmap-wrp .main-title h2,
        #presave-generator-main .roadmap-wrp .main-title h2 {
            font-size: 3rem;
            line-height: 1.18;
            margin-bottom: 14px;
        }

        #smartlink-generator-main .roadmap-wrp .main-title p,
        #presave-generator-main .roadmap-wrp .main-title p {
            font-size: 1.125rem;
            line-height: 1.5;
            margin-bottom: 2rem !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-block,
        #presave-generator-main .roadmap-wrp > .container > .roadmap-block {
            margin-top: 0 !important;
            min-height: 342px;
            overflow: visible !important;
            padding: 40px 147px !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-block + .roadmap-block,
        #presave-generator-main .roadmap-wrp > .container > .roadmap-block + .roadmap-block {
            margin-top: 48px !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .row,
        #presave-generator-main .roadmap-wrp .roadmap-block .row {
            align-items: center;
            min-height: 260px;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt,
        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt {
            max-width: 100%;
            width: 100%;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-img,
        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-img {
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 0 !important;
            padding-top: 0 !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .sound-wave-img,
        #presave-generator-main .roadmap-wrp .roadmap-block .sound-wave-img {
            bottom: -72px;
            top: 78px;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block:first-of-type .sound-wave-img,
        #presave-generator-main .roadmap-wrp .roadmap-block:first-of-type .sound-wave-img,
        #smartlink-generator-main .roadmap-wrp .roadmap-second-block .sound-wave-img,
        #presave-generator-main .roadmap-wrp .roadmap-second-block .sound-wave-img {
            bottom: -72px;
            top: 78px;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-last-block .sound-wave-img,
        #presave-generator-main .roadmap-wrp .roadmap-last-block .sound-wave-img {
            display: none;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .number span,
        #presave-generator-main .roadmap-wrp .roadmap-block .number span {
            top: 50px;
        }
    }

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

    @media (max-width: 991px) {
        #presave-generator-main .roadmap-wrp {
            padding-bottom: 34px;
            padding-top: 34px;
        }

        #presave-generator-main .roadmap-wrp .main-title {
            padding-left: 18px;
            padding-right: 18px;
        }

        #presave-generator-main .roadmap-wrp .main-title p {
            margin-bottom: 24px !important;
        }

        #presave-generator-main .roadmap-wrp > .container {
            padding-left: 18px;
            padding-right: 18px;
        }

        #presave-generator-main .roadmap-wrp > .container > .roadmap-block {
            margin-top: 0 !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: 24px !important;
        }

        #presave-generator-main .roadmap-wrp > .container > .roadmap-block + .roadmap-block {
            margin-top: 18px !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .row {
            align-items: stretch;
            display: grid;
            gap: 0;
            grid-template-columns: 1fr;
            min-height: 0;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .row > div:first-child,
        #presave-generator-main .roadmap-wrp .roadmap-block .row > div:last-child {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            min-width: 0;
            width: 100% !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .number span {
            left: 0 !important;
            margin: 0 0 24px !important;
            position: relative !important;
            top: 0 !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt {
            max-width: none;
            padding: 0 !important;
            text-align: left;
            width: 100%;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: clamp(22px, 4vw, 30px);
            letter-spacing: -0.035em;
            line-height: 1.12;
            margin-bottom: 14px;
            padding-right: 0;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt p {
            font-size: clamp(15px, 2.8vw, 18px);
            line-height: 1.6;
            margin-bottom: 0;
            max-width: 34em;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-img {
            display: none !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .sound-wave-img {
            display: none !important;
        }
    }

    @media (max-width: 767px) {
        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 28px 10px 16px !important;
        }

        .smartlink-generator-intro h1 {
            font-size: 2rem;
            line-height: 1.12;
            margin-bottom: 8px;
        }

        .smartlink-generator-intro h2 {
            font-size: 34px;
            line-height: 1.12;
            margin-bottom: 8px;
        }

        .smartlink-platform-list {
            grid-template-columns: 1fr;
        }

        .smartlink-tool-card {
            padding: 18px 14px;
        }

        #smartlink-generator-main .smartlink-tool-card {
            padding: 16px 10px;
        }

        .tool-input-group {
            display: block;
        }

        .tool-input-group > .form-control {
            border-radius: 4px;
            display: block;
            width: 100%;
        }

        .tool-input-group > .input-group-append {
            justify-content: flex-end;
            margin-top: 10px;
            width: auto;
        }

        .tool-input-group > .input-group-append > .btn {
            border-radius: 4px;
            min-height: 46px;
            padding: 0 18px;
            width: auto;
        }

        #generateSmartlinkBtn {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            max-width: 100%;
            width: 100% !important;
        }

        #copySmartlinkBtn.smartlink-copy-btn {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        .smartlink-generate-action {
            justify-content: center !important;
            width: 100% !important;
        }

        .contact-wrpper .container,
        .contact-wrp .container,
        .roadmap-wrp .container {
            max-width: none;
            padding-left: 12px;
            padding-right: 12px;
        }

        .contact-wrpper .contact-block .contact-from {
            padding: 14px 8px !important;
        }

        /* Smartlink tool form: maximize horizontal space on small screens */
        #smartlink-generator-main .contact-wrpper .container {
            padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
            padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
        }

        #smartlink-generator-main .contact-wrpper .contact-block .row {
            --bs-gutter-x: 0.5rem;
        }

        #presave-generator-main .contact-wrpper .contact-block .contact-from.tab-informetion {
            padding: 0.875rem 0 !important;
        }

        #smartlink-generator-main .contact-wrpper .contact-block .contact-from.tab-informetion {
            padding: 0.875rem 0 !important;
        }

        #presave-generator-main .smartlink-tool-card.smartlink-tool-card-enhanced,
        #smartlink-generator-main .smartlink-tool-card.smartlink-tool-card-enhanced {
            padding-left: 8px !important;
            padding-right: 8px !important;
        }

        #presave-generator-main .presave-details-layout {
            gap: 16px;
            grid-template-columns: 1fr;
        }

        .smartlink-permalink-box .tool-input-group > .input-group-append {
            margin-top: 10px;
        }

        .smartlink-permalink-field {
            flex-direction: column;
        }

        .smartlink-permalink-field .smartlink-copy-btn {
            min-width: 0;
            width: 100%;
        }

        .smartlink-supported-hint,
        .smartlink-tool-card-enhanced .d-flex.align-items-center small.text-muted {
            font-size: 12px !important;
            line-height: 1.45;
        }

        .smartlink-field-label {
            font-size: 11px !important;
        }

        #resultPanel .smartlink-cover-wrap {
            display: flex;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        #resultPanel .smartlink-cover-image {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .smartlink-cta-distribute .row,
        .smartlink-cta-final .row {
            text-align: center;
        }

        .smartlink-cta-distribute .text-md-end,
        .smartlink-cta-final .text-md-end {
            text-align: center !important;
        }

        .smartlink-cta-distribute .btn-main,
        .smartlink-cta-final .btn-main {
            display: inline-block;
            width: auto;
        }

        .smartlink-seo-article .lead {
            font-size: 0.95rem;
        }

        .smartlink-feature-card h3 {
            font-size: 1rem;
        }

        .smartlink-feature-card p {
            font-size: 0.9rem;
        }

        .smartlink-usecase {
            padding: 14px 16px;
        }

        .smartlink-seo-article h2 {
            font-size: 1.35rem;
        }

        /* Long URLs: flex child must shrink; horizontal scroll inside inputs (iOS-friendly) */
        .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 100%;
        }

        .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row > .form-control {
            display: block;
            flex: 1 1 auto;
            min-width: 0;
            overflow-x: auto;
            width: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row > .input-group-text.smartlink-input-icon {
            flex: 0 0 48px;
            min-height: 44px;
            min-width: 48px;
        }

        /* Result panel: center artwork + copy on small screens */
        #resultPanel .smartlink-tool-card.text-start {
            text-align: center;
        }

        #resultPanel .smartlink-tool-card > .row.align-items-center {
            justify-content: center;
        }

        #resultPanel .smartlink-tool-card > .row > .col-md-4,
        #resultPanel .smartlink-tool-card > .row > .col-md-8 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        #resultPanel .smartlink-tool-card h2,
        #resultPanel .smartlink-tool-card .smartlink-meta-line {
            text-align: center;
        }

        #resultPanel .smartlink-tool-card .smartlink-permalink-box {
            text-align: left;
        }

        #resultPanel .smartlink-tool-card .smartlink-permalink-box > label {
            display: block;
            text-align: center;
        }

        #resultPanel .smartlink-tool-card .mt-4 h4 {
            text-align: center;
        }

        #resultPanel .smartlink-tool-card .smartlink-platform-list {
            text-align: left;
        }

        html:has(body.guest-tool-page) {
            scroll-padding-top: 72px;
        }

        /* Slightly smaller type on narrow screens (more URL visible); permalink slightly larger for legibility */
        .smartlink-tool-card-enhanced .tool-input-group.smartlink-tool-input-row {
            min-height: 44px;
        }

        .smartlink-tool-card-enhanced #smartlinkUrl,
        .smartlink-tool-card-enhanced #smartlinkUpc,
        .smartlink-tool-card-enhanced #smartlinkIsrc,
        .smartlink-tool-card-enhanced #presaveUpc,
        .smartlink-tool-card-enhanced #presaveIsrc,
        .smartlink-tool-card-enhanced #presaveSpotifyUrl {
            font-size: 14px;
            line-height: 1.35;
            min-height: 44px;
            padding: 10px 12px;
        }

        .smartlink-tool-card .smartlink-permalink-input {
            font-size: 15px;
            min-height: 44px;
            padding: 10px 12px;
        }

        .smartlink-result-actions {
            flex-direction: column;
        }

        .smartlink-open-btn {
            text-align: center;
            width: 100%;
        }

        .contact-wrp .row > [class*='col-'],
        .roadmap-wrp .row > [class*='col-'] {
            margin-bottom: 14px;
        }

        .roadmap-wrp {
            padding: 45px 0;
        }

        #smartlink-generator-main .roadmap-wrp {
            padding-bottom: 2.5rem;
            padding-top: 2.5rem;
        }

        #smartlink-generator-main .roadmap-wrp .main-title p {
            margin-bottom: 1.5rem !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-block {
            padding-bottom: 1.75rem !important;
            padding-top: 1.75rem !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-second-block {
            margin-top: 12px !important;
            padding-bottom: 1.75rem !important;
            padding-top: 1.75rem !important;
        }

        #smartlink-generator-main .roadmap-wrp > .container > .roadmap-last-block {
            margin-top: 12px !important;
            padding-bottom: 1.75rem !important;
            padding-top: 1.75rem !important;
        }

        /* Smartlink roadmap mobile: hide decorative icon column; single-column text with readable measure */
        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:last-child {
            display: none !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .row > div:first-child {
            flex: 0 0 100% !important;
            margin-bottom: 0 !important;
            max-width: 100% !important;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt {
            padding-left: 18px;
            padding-right: 18px;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.28;
            margin-bottom: 0.65rem;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt p {
            color: #3a3f47;
            font-size: 15px;
            line-height: 1.65;
            margin-bottom: 0;
        }

        .dark-mode #smartlink-generator-main .roadmap-wrp .roadmap-block .roadmap-dt p {
            color: #d5d8e0;
        }

        #smartlink-generator-main .roadmap-wrp .roadmap-block .number span {
            margin-bottom: 18px;
        }

        .roadmap-wrp .main-title h2 {
            font-size: 24px;
            line-height: 30px;
            margin: 0 0 10px;
        }

        .roadmap-wrp .main-title h2 span.brd-text {
            -webkit-text-stroke: 1px red;
        }

        .roadmap-wrp .main-title p {
            font-size: 14px;
            line-height: 24px;
            margin: 0 0 40px;
        }

        .roadmap-wrp .roadmap-block {
            padding: 0 0 40px;
            background-image: unset;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt {
            width: 100%;
            padding: 0 5px;
        }

        .roadmap-wrp .roadmap-block .number span {
            position: relative;
            top: 0;
            left: 0;
            margin: 0 0 34px;
            margin-left: 15px;
        }

        .roadmap-wrp .sound-wave-img {
            display: none;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: 18px;
            line-height: 23px;
            margin: 0 0 10px;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt p {
            font-size: 14px;
            line-height: 24px;
            margin: 0 0 20px;
        }

        .roadmap-wrp .roadmap-block .roadmap-img {
            margin-top: 12px;
            text-align: center;
        }

        .roadmap-wrp .roadmap-block .roadmap-img img {
            display: block;
            height: auto;
            margin: 24px auto 0;
            max-width: min(100%, 420px);
            width: 100%;
        }

        .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-img {
            flex-shrink: 0;
            margin-left: auto;
            margin-right: auto;
            max-width: 260px;
            padding-bottom: 1.25rem;
            padding-top: 1.25rem;
            text-align: center;
            width: 100%;
        }
        .guest-tool-page .roadmap-wrp .roadmap-block .roadmap-img img {
            display: inline-block;
            height: auto;
            margin: 0 auto;
            max-width: 100%;
            vertical-align: middle;
            width: 100%;
        }

        .roadmap-wrp .roadmap-second-block {
            background-image: unset;
            background: #f6f6f6;
            padding: 40px 0 0;
            border-radius: 0;
            margin: 0;
            box-shadow: none;
        }

        .dark-mode .guest-tool-page .roadmap-wrp .roadmap-second-block {
            background: #12131b !important;
            background-image: none !important;
        }

        .roadmap-wrp .roadmap-last-block {
            margin: 0;
            padding: 30px 0 0;
        }

        .roadmap-visual {
            height: 84px;
            width: 84px;
        }

        .roadmap-visual::before {
            height: 72px;
            width: 72px;
        }

        .roadmap-visual::after {
            height: 48px;
            width: 48px;
        }

        .roadmap-visual-badge {
            border-radius: 16px;
            height: 56px;
            width: 56px;
        }

        .roadmap-visual-badge i {
            font-size: 22px;
        }
    }

    @media (max-width: 575px) {
        #presave-generator-main .roadmap-wrp > .container {
            padding-left: 14px;
            padding-right: 14px;
        }

        #presave-generator-main .roadmap-wrp > .container > .roadmap-block {
            padding: 20px !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-img {
            display: none !important;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .number span {
            margin-bottom: 22px !important;
            transform: scale(.9);
            transform-origin: left top;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: 23px;
            line-height: 1.16;
            padding-right: 0;
        }

        #presave-generator-main .roadmap-wrp .roadmap-block .roadmap-dt p {
            font-size: 15px;
            line-height: 1.5;
        }

        .contact-wrpper .contact-block .contact-info.smartlink-generator-intro {
            padding: 22px 8px 12px !important;
        }

        .smartlink-generator-intro h1 {
            font-size: 1.6rem;
        }

        .smartlink-generator-intro h2 {
            font-size: 28px;
        }

        .smartlink-generator-intro small {
            font-size: 13px;
        }

        .smartlink-tool-card {
            padding: 16px 12px;
        }

        #smartlink-generator-main .contact-wrpper .container {
            padding-left: max(2px, env(safe-area-inset-left, 0px)) !important;
            padding-right: max(2px, env(safe-area-inset-right, 0px)) !important;
        }

        #smartlink-generator-main .contact-wrpper .contact-block .row {
            --bs-gutter-x: 0.375rem;
        }

        #smartlink-generator-main .smartlink-tool-card.smartlink-tool-card-enhanced {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        #presave-generator-main .smartlink-tool-card.smartlink-tool-card-enhanced {
            padding-left: 6px !important;
            padding-right: 6px !important;
        }

        #smartlink-generator-main .smartlink-tool-card {
            padding: 14px 8px;
        }

        #presave-generator-main .smartlink-tool-card {
            padding: 14px 8px;
        }

        #presave-generator-main .presave-cover-picker {
            display: grid;
            gap: 8px;
            grid-template-columns: 1fr;
            padding: 14px;
        }

        #presave-generator-main .presave-cover-preview {
            aspect-ratio: auto;
            background: transparent !important;
            border: 0 !important;
            height: auto;
            min-height: 150px;
            width: 100%;
        }

        #presave-generator-main .presave-cover-preview img#presaveCoverPreview {
            max-height: none !important;
            max-width: none !important;
        }

        #presave-generator-main .presave-cover-placeholder {
            gap: 6px;
            padding: 12px 10px;
        }

        #presave-generator-main .presave-cover-placeholder i {
            font-size: 19px;
            height: 42px;
            width: 42px;
        }

        #presave-generator-main .presave-cover-placeholder strong {
            font-size: 16px;
        }

        #presave-generator-main .presave-cover-placeholder span {
            font-size: 12px;
            max-width: 220px;
        }

        #presave-generator-main .presave-cover-copy {
            gap: 2px;
        }

        #presave-generator-main .presave-cover-copy {
            align-content: center;
        }

        #presave-generator-main .presave-cover-copy strong,
        #presave-generator-main .presave-cover-status {
            text-align: center;
        }

        .smartlink-tool-card-enhanced #smartlinkUrl,
        .smartlink-tool-card-enhanced #smartlinkUpc,
        .smartlink-tool-card-enhanced #smartlinkIsrc,
        .smartlink-tool-card-enhanced #presaveUpc,
        .smartlink-tool-card-enhanced #presaveIsrc,
        .smartlink-tool-card-enhanced #presaveSpotifyUrl {
            min-height: 44px;
            padding: 10px 12px;
        }

        #generatePresaveBtn,
        #generateSmartlinkBtn {
            min-height: 48px;
            min-width: 0;
            padding: 12px 16px !important;
        }

        .smartlink-cover-image {
            width: 180px;
            height: 180px;
        }

        .smartlink-loading-box {
            padding: 24px 16px;
        }

        .smartlink-platform-card {
            gap: 10px;
            min-height: 66px;
            padding: 11px 12px;
        }

        .smartlink-platform-card h5 {
            font-size: 14px;
        }

        .smartlink-platform-card small.smartlink-platform-url-line {
            font-size: 10px;
        }

        .smartlink-platform-icon {
            flex-basis: 38px;
            height: 38px;
            width: 38px;
        }

        .smartlink-platform-mark {
            height: 18px;
            width: 18px;
        }

        .smartlink-platform-mark svg {
            width: 18px;
            height: 18px;
        }

        .smartlink-permalink-box {
            padding: 12px;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: 20px;
        }

        .roadmap-visual {
            height: 74px;
            width: 74px;
        }

        .roadmap-visual-badge {
            border-radius: 14px;
            height: 50px;
            width: 50px;
        }

        .roadmap-visual-badge i {
            font-size: 20px;
        }

        .smartlink-seo-section {
            padding-top: 32px;
            padding-bottom: 32px;
        }

        .smartlink-feature-grid .col-md-6 {
            margin-bottom: 1rem !important;
        }

        .smartlink-usecase {
            padding: 12px 14px;
        }

        .smartlink-usecase strong {
            font-size: 0.88rem;
        }

        .smartlink-usecase p {
            font-size: 0.85rem;
        }

        .smartlink-cta-distribute h2,
        .smartlink-cta-final h2 {
            font-size: 1.3rem;
        }
    }

    @media (max-width: 390px) {
        .smartlink-generator-intro h1 {
            font-size: 1.4rem;
        }

        .smartlink-generator-intro h2 {
            font-size: 26px;
        }

        .smartlink-tool-card {
            padding: 14px 10px;
        }

        #generateSmartlinkBtn {
            min-width: 0;
            padding: 12px 14px !important;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt h3 {
            font-size: 18px;
        }

        .roadmap-wrp .roadmap-block .roadmap-dt p {
            font-size: 13px;
            line-height: 23px;
        }
    }

/* ========== from sites/guest/smartlink-page.php ========== */
/* Public smartlink styles: assets/css/smartlink-public.css (linked from smartlink-page.php only) */

/* ========== from sites/guest/tos.php ========== */

.logo{
            margin-bottom: 10px;
        }
        .logo-light {
            display: none;
        }
        .light-mode .logo-light {
            display: block;
        }
        .light-mode .logo-dark {
            display: none;
        }



/* ========== from sites/guest/wartungsmodus.php ========== */

.logo{
            margin-bottom: 10px;
        }
        .logo-light {
            display: none;
        }
        .light-mode .logo-light {
            display: block;
        }
        .light-mode .logo-dark {
            display: none;
        }

/* Last-resort: forgot modal Request New Password — match rules above */
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"],
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"] {
    animation: none !important;
    border: 1px solid #ff002a !important;
    transition: none !important;
    transition-duration: 0s !important;
    transition-property: none !important;
}
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:hover,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus-visible,
html.light-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:active,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:hover,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:focus-visible,
html.dark-mode body.guest-auth-layout #guestForgotPasswordModal #guest-forgot-password-form .btn-group button.btn-main[name="NEWPASSWORD"]:active {
    animation: none !important;
    background: #ff002a !important;
    background-image: none !important;
    border: 1px solid #ff002a !important;
    box-shadow: none !important;
    color: #fff !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-property: none !important;
}

/* Guest PSI hardening: keep intrinsic media responsive and lift audited light-mode contrast. */
body.guest-site .tab-informetion img.dashboard-text,
body.guest-site .publish-slider .slider-box img,
body.guest-site .roadmap-wrp .roadmap-block .sound-wave-img img {
    height: auto;
    max-width: 100%;
}

html.light-mode body.guest-site .hero-wrp .btn-main,
html.light-mode body.guest-site .mn-header .header-primary-cta,
html.light-mode body.guest-site .mn-header .nav-link.publish-btn {
    background: #ff002a;
    border-color: #ff002a;
    color: #ffffff;
}

html.light-mode body.guest-site footer .copyright .TOS,
html.light-mode body.guest-site footer .copyright .terms-link li a,
html.light-mode body.guest-site .sidebar-bottom.mobile-bottom-nav-link .copyright a {
    color: #ff002a;
    opacity: 1;
}

html.light-mode body.guest-site footer .copyright .TOS:hover,
html.light-mode body.guest-site footer .copyright .terms-link li a:hover,
html.light-mode body.guest-site .sidebar-bottom.mobile-bottom-nav-link .copyright a:hover {
    color: #ff002a;
}

body.guest-site .faq-wrp .accordion-body a,
body.guest-site .faq-wrp a:not(.btn-main),
body.guest-site.guest-faq-page .faq-content-wrp .accordion-body a,
body.guest-site.guest-faq-page .faq-content-wrp a:not(.btn-main),
html.light-mode body.guest-site .faq-wrp .accordion-body a,
html.light-mode body.guest-site .faq-wrp a:not(.btn-main),
html.light-mode body.guest-site.guest-faq-page .faq-content-wrp .accordion-body a,
html.light-mode body.guest-site.guest-faq-page .faq-content-wrp a:not(.btn-main),
html.dark-mode body.guest-site .faq-wrp .accordion-body a,
html.dark-mode body.guest-site.guest-faq-page .faq-content-wrp .accordion-body a,
html.dark-mode body.guest-site.guest-faq-page .faq-content-wrp a:not(.btn-main) {
    color: #ff002a !important;
    text-decoration-color: rgba(255, 0, 42, 0.45);
}

body.guest-site .mn-header .guest-nav-panel .secondary-nav .sign-in .nav-link,
body.guest-site .mn-header .guest-nav-panel .secondary-nav .nav-link.publish-btn {
    align-items: center;
    display: flex !important;
    justify-content: center;
    text-align: center;
}

body.guest-site .mn-header .guest-nav-panel .secondary-nav .sign-in .nav-link {
    white-space: nowrap;
}

body.guest-site .mn-header .header-sign-in-cta {
    align-items: center;
    border-radius: 6px;
    color: #111119;
    display: none;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    order: 1;
    padding: 11px 14px;
    text-decoration: none;
    white-space: nowrap;
}

html.dark-mode body.guest-site .mn-header .header-sign-in-cta {
    color: #ffffff;
}

body.guest-site footer .copyright .terms-link,
body.guest-site footer .copyright .social-ic {
    flex-wrap: nowrap;
}

body.guest-site footer .copyright .terms-link li a {
    white-space: nowrap;
}

body.guest-home-page .publish-slider,
body.guest-home-page .publish-slider .slick-list {
    max-width: 100%;
    overflow: hidden;
}

body.guest-home-page .publish-slider .slick-track {
    max-width: none;
}

body.guest-home-page [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

body.guest-home-page .distribute-wrp,
body.guest-home-page .publish-wrp,
body.guest-home-page .roadmap-wrp,
body.guest-home-page .spacemedia-wrp,
body.guest-home-page .download-wrp {
    overflow-x: clip;
}

@media screen and (max-width: 991px) {
    body.guest-site .mn-header .navbar {
        justify-content: flex-start !important;
    }

    body.guest-site .mn-header .navbar-toggler {
        margin-left: 8px !important;
    }

    body.guest-home-page [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    body.guest-home-page .distribute-wrp,
    body.guest-home-page .publish-wrp,
    body.guest-home-page .roadmap-wrp,
    body.guest-home-page .spacemedia-wrp,
    body.guest-home-page .download-wrp {
        overflow-x: clip;
    }

    body.guest-home-page .roadmap-wrp .roadmap-block {
        padding-left: 0;
        padding-right: 0;
    }

    body.guest-home-page .roadmap-wrp .roadmap-block .row,
    body.guest-home-page .publish-wrp .row,
    body.guest-home-page .distribute-wrp .row,
    body.guest-home-page .download-wrp .row {
        margin-left: 0;
        margin-right: 0;
    }

    body.guest-home-page .roadmap-wrp .roadmap-block .number span {
        left: 0;
    }
}

@media screen and (min-width: 640px) and (max-width: 1199px) {
    body.guest-site .mn-header .header-sign-in-cta {
        display: inline-flex;
        margin-left: auto;
    }

    body.guest-site .mn-header .header-sign-in-cta + .header-primary-cta {
        margin-left: 8px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    body.guest-site footer .copyright .row {
        align-items: center !important;
        flex-direction: column !important;
        gap: 18px;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
    }

    body.guest-site footer .copyright .col-md-4 {
        align-items: center;
        display: flex;
        flex: 0 0 100% !important;
        flex-direction: column;
        max-width: 100% !important;
        text-align: center;
        width: 100% !important;
    }

    body.guest-site footer .copyright p,
    body.guest-site footer .copyright .social-ic,
    body.guest-site footer .copyright .terms-link {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    body.guest-site .mn-header .container {
        max-width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    body.guest-site .mn-header .navbar {
        height: 64px;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
    }

    body.guest-site .mn-header .navbar-brand {
        flex: 0 0 auto;
        margin-right: 0;
        width: 190px;
    }

    body.guest-site .mn-header .navbar > .header-primary-cta {
        display: inline-flex !important;
        font-size: 14px;
        margin-left: 10px !important;
        padding: 14px 30px;
        width: auto !important;
    }

    body.guest-site .mn-header .header-sign-in-cta {
        display: inline-flex;
        font-size: 14px;
        margin-left: auto;
        padding: 12px 14px;
    }

    body.guest-site .mn-header .navbar-toggler {
        display: inline-flex !important;
        margin-left: 12px !important;
    }

    body.guest-site .mn-header .navbar-collapse.guest-nav-panel {
        left: -24px;
        max-height: calc(100vh - 64px);
        right: -24px;
        width: calc(100% + 48px) !important;
    }

    body.guest-site .mn-header .on-off-toggle {
        margin-left: 16px;
    }
}

@media screen and (max-width: 1199px) {
    body.guest-home-page [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    body.guest-home-page .distribute-wrp,
    body.guest-home-page .publish-wrp,
    body.guest-home-page .roadmap-wrp,
    body.guest-home-page .spacemedia-wrp,
    body.guest-home-page .download-wrp {
        overflow-x: clip;
    }
}

@media screen and (max-width: 767px) {
    body.guest-home-page [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    body.guest-home-page .distribute-wrp,
    body.guest-home-page .roadmap-wrp,
    body.guest-home-page .spacemedia-wrp,
    body.guest-home-page .download-wrp {
        overflow-x: clip;
    }

    body.guest-home-page #sliderDesktop {
        display: none !important;
    }

    body.guest-home-page .publish-slider {
        display: block !important;
    }

    body.guest-site footer .footer-block .row {
        align-items: start;
    }

    body.guest-site footer .footer-block .col-md-4,
    body.guest-site footer .footer-block .col-md-3,
    body.guest-site footer .copyright .col-md-4 {
        width: 100% !important;
    }

    body.guest-site footer .footer-block h3,
    body.guest-site footer .footer-block ul,
    body.guest-site footer .footer-block p,
    body.guest-site footer .copyright p {
        text-align: center;
    }

    body.guest-site footer .footer-block h3 {
        display: inline-flex;
        justify-content: center;
        padding-left: 12px;
    }

    body.guest-site footer .copyright .terms-link {
        gap: 12px;
    }

    body.guest-home-page .spacemedia-wrp .spacemedia-box-cenetr h2 {
        font-size: clamp(32px, 13vw, 48px);
        letter-spacing: 0.04em;
        line-height: 1.05;
        max-width: 100%;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    body.guest-site footer .footer-block .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    body.guest-site footer .footer-block .footer-address {
        grid-column: 1 / -1;
    }

    body.guest-site footer .footer-block .row > .col-md-3:nth-of-type(4) {
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 360px !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 420px) {
    body.guest-site .mn-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.guest-site .mn-header .navbar-brand {
        width: 116px;
    }

    body.guest-site .mn-header .navbar > .header-primary-cta {
        font-size: 10px;
        padding: 10px 11px;
    }

    body.guest-site .mn-header .navbar-toggler {
        margin-left: 4px;
        padding-left: 8px;
        padding-right: 8px;
        width: 38px;
    }

    body.guest-site .mn-header .navbar-collapse.guest-nav-panel {
        left: -12px;
        overflow-x: hidden;
        right: -12px;
        width: calc(100% + 24px) !important;
    }
}

@media screen and (max-width: 360px) {
    body.guest-site .mn-header .navbar-brand {
        width: 106px;
    }

    body.guest-site .mn-header .navbar > .header-primary-cta {
        font-size: 10px;
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* Artwork downloader result actions: keep download labels readable on every viewport. */
body.guest-site .artwork-download-actions .dropdown,
body.guest-site .artwork-download-actions__dropdown {
    align-items: center;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: fit-content;
}

body.guest-site #downloadArtworkActions.artwork-download-actions {
    max-width: min(100%, 440px) !important;
    width: fit-content !important;
}

body.guest-site .artwork-result-row .artwork-result-panel {
    flex: 0 1 440px !important;
    max-width: min(100%, 440px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: min(100%, 440px) !important;
}

body.guest-site #downloadArtworkActions.artwork-download-actions .dropdown,
body.guest-site #downloadArtworkActions.artwork-download-actions .artwork-download-actions__dropdown {
    width: fit-content !important;
}

body.guest-site .artwork-download-actions .btn-main {
    min-width: 0;
    white-space: nowrap;
    width: auto !important;
}

body.guest-site .artwork-download-actions .dropdown-menu {
    max-width: min(calc(100vw - 32px), 440px);
    min-width: min(100%, 380px);
    width: max-content;
}

body.guest-site #downloadArtworkActions.artwork-download-actions .dropdown-menu {
    width: max-content !important;
}

body.guest-site .artwork-download-actions .dropdown-item {
    gap: 0.8rem;
    line-height: 1.2;
    white-space: nowrap;
}

body.guest-site .artwork-download-actions .dropdown-item i {
    flex: 0 0 auto;
}

body.guest-site .artwork-download-toast {
    align-items: center;
    background: #111119;
    border: 1px solid rgba(255, 0, 42, 0.22);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(255, 0, 42, 0.16);
    color: #ffffff;
    display: inline-flex;
    gap: 0.8rem;
    margin-top: 14px;
    max-width: min(100%, 380px);
    opacity: 0;
    padding: 12px 16px;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
    width: fit-content;
}

body.guest-site .artwork-download-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.guest-site .artwork-download-toast__icon {
    align-items: center;
    background: #ff002a;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(255, 0, 42, 0.3);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

body.guest-site .artwork-download-toast__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}

body.guest-site .artwork-download-toast__copy strong {
    font-size: 14px;
    line-height: 1.15;
}

body.guest-site .artwork-download-toast__copy small {
    color: #bfc2d2;
    display: block;
    font-size: 12px;
    line-height: 1.25;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.light-mode.guest-site .artwork-download-toast,
html.light-mode body.guest-site .artwork-download-toast {
    background: #ffffff;
    border-color: rgba(255, 0, 42, 0.18);
    box-shadow: 0 18px 45px rgba(17, 17, 25, 0.12);
    color: #111119;
}

body.light-mode.guest-site .artwork-download-toast__copy small,
html.light-mode body.guest-site .artwork-download-toast__copy small {
    color: #5f6472;
}

@media screen and (max-width: 480px) {
    body.guest-site .artwork-download-actions .dropdown,
    body.guest-site .artwork-download-actions__dropdown {
        max-width: 100%;
        width: fit-content;
    }

    body.guest-site .artwork-download-actions .btn-main {
        min-width: 0;
        width: auto !important;
    }

    body.guest-site .artwork-download-actions .dropdown-menu {
        min-width: 0;
        width: max-content !important;
    }

    body.guest-site .artwork-download-actions .dropdown-item {
        font-size: 15px;
        gap: 0.65rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    body.guest-site .artwork-download-toast {
        max-width: min(100%, 320px);
        padding: 11px 13px;
    }

    body.guest-site .artwork-download-toast__copy small {
        max-width: 210px;
    }
}