/* Account modals: login, register, forgot / reset password, OTP verification, preferences,
   password-created. Design only: scoped by modal id so other full-screen modals (product image
   viewer, search) keep their look. Loaded after custom.min.css. */

/* ---------- Shared shell ---------- */
:is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
    #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-body {
    display: flex !important;
    /* margin:auto on the card centres it, and unlike align-items:center it never cuts off
       the top of a card that is taller than the screen */
    align-items: flex-start !important;
    justify-content: center !important;
    /* at least the screen height, so short cards can centre vertically */
    min-height: 100%;
    padding: 40px 24px;
    overflow-y: auto;
}

    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-body > * {
        margin: auto;
    }

/* Close button: a clear round target in the corner of the screen */
:is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
    #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 0;
    border: 0;
}

:is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
    #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header .btn-close {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: #fff !important;
    background-size: 13px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header .btn-close:hover {
        transform: scale(1.06);
    }

    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header .btn-close:focus {
        box-shadow: 0 0 0 4px rgba(37, 169, 224, 0.5);
    }

/* Floating WhatsApp / chat buttons sit on top of the form fields and buttons; hide them while a
   modal is open */
body.modal-open .whatsapp-float,
body.modal-open .whatsapp-text,
body.modal-open #chat-widget-container {
    visibility: hidden !important;
}

/* ---------- Card widths ---------- */
#loginFormModal #mm_login_signin_form {
    width: 100% !important;
    max-width: 480px;
}

#RegisterFormModal #mm_register_form {
    width: 100% !important;
    max-width: 680px;
}

/* The form sets the width; drop the old 420px tablet cap on the card inside it */
:is(#loginFormModal, #RegisterFormModal) .login-register-form {
    max-width: none !important;
}

:is(#ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card, #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) {
    width: 100% !important;
    max-width: 480px;
}

/* These cards sit directly in .modal-body (no wrapping form), so they do the centring themselves */
:is(#ForgotPasswordModal, #ResetPasswordModal, #languageNavModal, #downloadCuttingToolModal, #downloadUserGuideModal) .modal-body > :is(.forgot-pw-card, .reset-pw-card, .language-options) {
    margin: auto !important;
}

/* ---------- Card ---------- */
:is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
    #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
    #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) {
    width: 100% !important;
    /* no inner scroll box: the whole modal scrolls instead, so long forms (register) read
       naturally on phones */
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 40px !important;
    border-top: 4px solid var(--ds-blue);
    border-radius: var(--ds-radius-card);
    background: #fff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

    /* Title on its own line, the "switch" link (Register now / Log in / Back to Log in) below it */
    :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
        #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
        #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .header {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 6px;
        width: 100%;
        margin-bottom: 20px !important;
    }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
            #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .header h2 {
            width: 100%;
            margin: 0;
            color: var(--ds-ink);
            font-size: 26px;
            font-weight: 700;
            line-height: 1.25;
        }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card) .header > div {
            display: flex !important;
            flex-wrap: wrap;
            align-items: baseline !important;
            gap: 4px 6px;
            width: auto;
            margin: 0 !important;
            color: var(--ds-muted);
            font-size: 15px;
        }

            :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
                #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card) .header > div :is(span, p, a) {
                margin: 0 !important;
                font-size: 15px;
                line-height: 1.4;
            }

            :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
                #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card) .header > div :is(p, a) {
                color: var(--ds-blue-dark);
                font-weight: 600;
                text-decoration: none;
                cursor: pointer;
            }

                :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
                    #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card) .header > div :is(p, a):hover {
                    text-decoration: underline;
                }

    /* Message slots (errors / success) are usually empty; don't reserve a big gap for them */
    :is(#loginFormModal .login-register-form, #ResetPasswordModal .reset-pw-card, #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) > .mb-5 {
        margin-bottom: 12px !important;
    }

    /* Inputs and selects: same fill colour, rounded, clear focus */
    :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
        #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
        #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) :is(input.bg-light-blue, select.bg-light-blue) {
        border: 1px solid transparent !important;
        border-radius: var(--ds-radius-control) !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
            #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) :is(input.bg-light-blue, select.bg-light-blue):focus {
            border-color: var(--ds-blue) !important;
            outline: 0;
            box-shadow: 0 0 0 4px rgba(37, 169, 224, 0.18);
        }

    #languageNavModal .language-options .form-label {
        margin-bottom: 6px;
        color: var(--ds-text);
        font-size: 14px;
        font-weight: 600;
    }

    #languageNavModal .language-options .options {
        margin-bottom: 16px !important;
    }

        #languageNavModal .language-options .options select {
            margin-bottom: 0 !important;
        }

    /* Main buttons */
    :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
        #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
        #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .btn.btn-primary {
        min-height: 52px;
        border: 0 !important;
        border-radius: var(--ds-radius-control) !important;
        background-color: var(--ds-blue) !important;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
            #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .btn.btn-primary:hover {
            background-color: var(--ds-blue-dark) !important;
        }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
            #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .btn.btn-primary:focus-visible {
            box-shadow: var(--ds-focus-ring-strong);
        }

#loginFormModal .forgot-btn {
    color: var(--ds-blue-dark);
    font-weight: 500;
}

    #loginFormModal .forgot-btn:hover {
        text-decoration: underline;
    }

/* ---------- Register ---------- */
#RegisterFormModal .register-form-custom {
    gap: 12px !important;
    margin-bottom: 8px !important;
}

    #RegisterFormModal .register-form-custom > div {
        flex: 1 1 0;
        width: auto !important;
        min-width: 0;
    }

    #RegisterFormModal .register-form-custom input {
        margin: 0 !important;
    }

#RegisterFormModal .form-check-label {
    color: var(--ds-text);
    font-size: 14px;
    line-height: 1.5;
}

#RegisterFormModal #trial-message {
    border-radius: var(--ds-radius-card);
}

/* ---------- OTP / password created: same corner style as the other cards ---------- */
#OtpVerficationFormModal #otpsection,
#OtpVerficationFormModal #oopssection {
    border-radius: var(--ds-radius-card);
}

/* ---------- Download modals ---------- */
/* "[icon] Windows 8 and later versions": the site's Bootstrap build has no .ms-2 / .fw-bold, so the
   icon touched the text and "Windows 8" was smaller (inline 0.85rem) and not bold */
#downloadCuttingToolModal .language-options p .fw-bold {
    font-size: inherit !important;
    font-weight: 600;
    color: var(--ds-ink);
}

#downloadCuttingToolModal .language-options p .bi-windows {
    display: inline-block;
    margin: 0 6px 0 4px !important;
    color: var(--ds-blue);
    font-size: 0.9em;
    line-height: 1;
    vertical-align: -0.05em;
}

/* brand red / green instead of Bootstrap's text-danger / text-success shades */
#downloadCuttingToolModal .language-options .text-danger {
    color: var(--ds-danger) !important;
}

#downloadUserGuideModal .language-options .text-success {
    color: var(--ds-ok) !important;
}

/* ---------- Close button inside the card ----------
   The x used to sit in the far corner of the screen; it now sits in each card's top-right corner. */
:is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal, #languageNavModal,
    #OtpVerficationFormModal, #CreatePasswordSuccessModal, #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header:not(:has(*)) {
    display: none;
}

:is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
    #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
    #languageNavModal .language-options, #downloadCuttingToolModal .language-options,
    #downloadUserGuideModal .language-options, #CreatePasswordSuccessModal .language-options,
    #OtpVerficationFormModal .modal-body .position-relative) {
    position: relative;
}

.mm-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background-color: var(--ds-surface);
    background-size: 11px;
    opacity: 1;
    transition: background-color var(--ds-ease), box-shadow var(--ds-ease);
}

    .mm-modal-close:hover {
        background-color: var(--ds-line);
        opacity: 1;
    }

    .mm-modal-close:focus,
    .mm-modal-close:focus-visible {
        outline: 0;
        box-shadow: var(--ds-focus-ring-strong);
        opacity: 1;
    }

/* keep titles clear of the x */
:is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
    #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
    #languageNavModal .language-options) .header h2 {
    padding-right: 40px;
}

:is(#downloadCuttingToolModal, #downloadUserGuideModal) .language-options > :is(h2, h3) {
    padding: 0 40px;
    text-align: center;
}

/* OTP: the x sits on the white card, which starts at the wrapper's edge */
#OtpVerficationFormModal .modal-body .position-relative > .mm-modal-close {
    top: 12px;
    right: 12px;
}

/* Product image viewer: full-screen, so its x stays in the screen corner, in the same round style */
#productEnlargeModal .modal-header {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 0;
    border: 0;
}

    #productEnlargeModal .modal-header .btn-close {
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background-color: #fff !important;
        background-size: 13px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
        opacity: 1;
    }

/* ---------- Opening animation (every modal) ----------
   Modals without Bootstrap's "fade" used to pop in instantly: the card now fades and rises in and the
   dark backdrop fades in. Modals with "fade" keep Bootstrap's own transition. */
@keyframes mmModalIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mmBackdropIn {
    from {
        opacity: 0;
    }
}

.modal.show:not(.fade) .modal-body > * {
    animation: mmModalIn 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.modal-backdrop.show:not(.fade) {
    animation: mmBackdropIn 0.2s ease-out both;
}

/* Logout and alert dialogs (Bootstrap "fade"): brand corners and depth */
:is(#logout-modal, #sweetAlertModal) .modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--ds-radius-card) !important;
    box-shadow: var(--ds-shadow-lg);
}

/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-body {
        padding: 24px 14px;
    }

    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header {
        top: 14px;
        right: 14px;
    }

    :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
        #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
        #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) {
        padding: 26px 20px !important;
        border-radius: var(--ds-radius-card);
    }

        :is(#loginFormModal .login-register-form, #RegisterFormModal .login-register-form,
            #ForgotPasswordModal .forgot-pw-card, #ResetPasswordModal .reset-pw-card,
            #languageNavModal .language-options,
    #downloadCuttingToolModal .language-options, #downloadUserGuideModal .language-options) .header h2 {
            font-size: 22px;
        }

    /* First/last name and company/country: one per row */
    #RegisterFormModal .register-form-custom {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }

        #RegisterFormModal .register-form-custom > div {
            flex: 0 0 auto;
            width: 100% !important;
            margin-bottom: 8px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .modal.show:not(.fade) .modal-body > *,
    .modal-backdrop.show:not(.fade) {
        animation: none;
    }

    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal, #OtpVerficationFormModal, #CreatePasswordSuccessModal,
    #downloadCuttingToolModal, #downloadUserGuideModal) .modal-header .btn-close,
    :is(#loginFormModal, #RegisterFormModal, #ForgotPasswordModal, #ResetPasswordModal,
        #languageNavModal) :is(input, select, .btn) {
        transition: none;
    }
}