/**
 * @fileoverview Styles for the modal components, including base styles, dialogs, headers, bodies, footers, and various utility classes for sizing, positioning, and visual effects.
 * 
 * This file centralizes the styling definitions for all modal-related elements used across the application. 
 * It is part of the modal UI module and is responsible for ensuring consistent appearance and behavior of modals.
 * 
 * Key Features:
 * - Base modal structure and overlay.
 * - Responsive adjustments for modal dialogs and content.
 * - Theming for modal buttons and text with various color schemes.
 * - Animations for visual feedback and transitions.
 */

:root {
    --white: #fff;
    --primary-blue: #3fabf3;
    --pulse-blue: #3fabf3b3;
    --pulse-gray: #3fabf300;
    --primary-green: #28a745;
    --primary-blue-hover: #308eb7;
    --primary-red: #dc3545;
    --primary-ocean: #0d6efd;
    --primary-ocean-dark: #152e4d;
    --primary-yellow: #ffc107;
    --primary-yellow-hover: #ca9a08;
    --text-sm-responsive: clamp(1rem, 4vw, 1.3rem);
    --fs-xl: clamp(1.78rem, 1.5rem + 1.25vw, 2.85rem);
    --padding-header: min(5.5rem, 5rem + 1.25vw);
    --py-lg: clamp(2rem, 1.5rem + 1.25vw, 2.85rem);
    --fs-600: 1.5rem;
    --fs-400: 1.25rem;
    --fs-200: 0.9rem;
    --text-xxs-size: 0.5rem;
    --text-xs-size: 0.75rem;
    --text-xs-line: 1rem;
    --text-sm-size: 0.875rem;
    --text-sm-line: 1.25rem;
    --text-base-size: 1rem;
    --text-base-line: 1.5rem;
    --text-lg-size: 1.125rem;
    --text-lg-line: 1.75rem;
    --text-xl-size: 1.25rem;
    --text-xl-line: 1.75rem;
    --text-2xl-size: 1.5rem;
    --text-2xl-line: 2rem;
    --text-3xl-size: 1.875rem;
    --text-3xl-line: 2.25rem;
    --text-4xl-size: 2.25rem;
    --text-4xl-line: 2.5rem;
    --text-h2-line: 2.8rem;
    --color-black: #000;
    --color-gray: #767676;
    --color-gray-light: #f7f7f7;
    --color-blue: #3fabf3;
    --color-blue-hover: #3186be;
    --color-red: #f33a3a;
}

/* Base Modal Block */
.scaem-modal {
    /* Base styles for the modal */
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Overlay */
    z-index: 1050;
    /* Bootstrap modal z-index */
}

/* Modal Dialog */
.scaem-modal__dialog {
    position: relative;
    margin: auto;
    max-width: 42.85rem;
    /* Max width for the modal */
    width: 90%;
    /* Responsive width */
    height: 100%;
}

/* Modal Content */
.scaem-modal__content {
    background-color: #fff;
    border-radius: 8px;
    /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #fff !important;
    height: 100%;
}

/* Modal Header */
.scaem-modal__header {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-bottom: 1px solid #e9ecef; */
}

/* Modal Title */
.scaem-modal__title {
    font-size: 1.5rem;
    /* Font size for title */
    font-weight: 600;
    /* Bold title */
    color: #333 !important;
    /* Title color */
}

/* Close Button */
.scaem-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    /* Font size for close button */
    cursor: pointer;
}

/* Modal Body */
.scaem-modal__body {
    font-size: 1rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;

    /* height: auto;
    height: calc-size(auto); */
}

.scaem-modal__body--full-height {
    max-height: 76vh !important;
}

.tw-overflow-hidden {
    overflow: hidden !important;
}

.scaem-modal__height-smooth {
    transition: max-height 0.5s ease-out;
}

.scaem-modal__body--large-height {
    max-height: 50vh;
    min-height: 50vh;
}

.scaem-modal__body--medium-height {
    max-height: 40vh;
    min-height: 40vh;
}

.scaem-modal__body--small-height {
    max-height: 35vh;
    min-height: 35vh;
}

.modal-body-text {
    flex-grow: 1;
    height: 100%;
}

.modal-body-text__agreement p {
    font-size: var(--text-sm-responsive);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    margin: 0;
    color: oklch(0.208 0.042 265.755);
}

.scaem-modal__button-disabled {
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
    opacity: 0.5 !important;
}

.scaem-modal--visibility-transition {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.invisible-transition {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

/* CSS for the element */
.scaem-modal--visibility-fade-in {
    opacity: 0.7;
    /* Start hidden */
    /* Transition effect */
    transition: opacity 0.2s ease-in;
}

.scaem-modal--visibility-fade-in.visible {
    opacity: 1;
    /* Fully visible */
}

/* Modal Footer */
.scaem-modal__footer {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 1rem;
    /* border-top: 1px solid #e9ecef; */
}

.scaem-modal__button {
    font-size: 16px;
    cursor: pointer !important;
    min-width: 8rem !important;
    position: relative;
    text-align: center;
    border: 2px solid;
    border-radius: 0.28rem;
    display: inline-block;
    vertical-align: middle;
    text-transform: capitalize;
}

.scaem-modal__button--full-width {
    width: 100%;
}

.scaem-modal__button--primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: #fff;
    opacity: 0.9;
}

.scaem-modal__button--primary:hover {
    background-color: var(--primary-blue-hover) !important;
    border-color: var(--primary-blue-hover) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.scaem-modal__button--none {
    background-color: #6c757d;
    color: #fff;
    opacity: 0.9;
}

.scaem-modal__button--secondary-ocean {
    background-color: transparent;
    border: 1px solid var(--primary-ocean);
    color: var(--primary-ocean);
    opacity: 0.9;
    transition: all 200ms ease-in-out;
}

.scaem-modal__button--secondary-ocean:hover {
    background-color: var(--primary-ocean) !important;
    color: #fff !important;
    border-radius: 0.28rem;
}

.scaem-modal__button--outline-secondary-ocean {
    background-color: transparent;
    border: 1px solid var(--primary-ocean);
    color: var(--primary-ocean);
    opacity: 0.9;
}

.scaem-modal__text-white {
    color: var(--white) !important;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.123);
}

.scaem-modal__text-secondary-ocean {
    color: var(--primary-ocean) !important;
}

.scaem-modal__text-secondary-ocean-dark {
    color: var(--primary-ocean-dark) !important;
}

.scaem-modal__bg-primary-yellow {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
}

.transition-all-04 {
    transition: all 0.4s ease-in !important;
}

.scaem-modal__bg-primary-yellow:hover {
    background-color: var(--primary-yellow-hover) !important;
    border-color: var(--primary-yellow-hover) !important;
}

.scaem-modal__text-primary-yellow {
    color: var(--primary-yellow) !important;
}

.scaem-modal__button--secondary-gray {
    background-color: transparent;
    border: 1px solid #6c757d;
    color: #6c757d;
    opacity: 0.9;
}

.scaem-modal__button--secondary-gray-dark {
    background-color: transparent;
    border: 1px solid #303030;
    color: #303030;
    opacity: 0.9;
}

.scaem-modal__button--danger {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
    color: #fff;
    opacity: 0.9;
}

.scaem-modal__button--warning {
    background-color: #ffc107;
    color: #fff;
    opacity: 0.9;
}

.scaem-modal__button--primary:hover,
.scaem-modal__button--none:hover,
.scaem-modal__button--secondary-gray:hover,
.scaem-modal__button--secondary-gray-dark:hover,
.scaem-modal__button--danger:hover,
.scaem-modal__button--warning:hover {
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
}

.container-large__small {
    width: 100%;
    max-width: 14rem;
}

.modal-dialog--smaller-420 {
    max-width: 30rem !important;
}

.modal-dialog--mid {
    max-width: 100%;
    margin: 0;
    width: 100dvh;
    height: 100dvh;
}

@media (min-width: 640px) {
    .modal-dialog--mid {
        width: 36rem;
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
        height: auto;
    }
}

@media (min-width: 768px) {
    .modal-dialog--mid {
        width: 40rem;
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }
}

.scaem-modal--large .scaem-modal__dialog {
    max-width: 57.14rem;
}

.scaem-modal--small .scaem-modal__dialog {
    max-width: 28.57rem;
}

#quality-check-navigation-modal,
#carnet-success-window-navigation-modal,
#contact-form-quality-check-navigation-modal,
#fmd-open-account-navigation-modal {}

#modal-navigation-text {
    overflow: auto;
    max-height: 90vh;
}

.scaem-modal-opened {
    overflow: hidden !important;
    /* Prevents scrolling of the backdrop */
}

.scaem-modal__container {
    display: flex;
    flex-direction: column;
}

.scaem-modal__container--desktop {
    display: none;
    flex-direction: column;
}

.scaem-modal__container--mobile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.scaem-modal__aside-container {
    border-radius: 0.4rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.scaem-modal__aside-image {
    min-width: 12rem;
    max-width: 100%;
    height: 20rem;
    object-fit: cover;
    border-radius: 0.4rem;
}

.scaem-modal__aside-image--contain {
    object-fit: contain;
}

.swal2-actions {
    width: 100%;
    justify-content: flex-end !important;
}

.scaem-modal-fmd-open-account__content {
    width: 100% !important;
    height: 100% !important;
}

.uba-modal__backdrop {
    backdrop-filter: blur(6px) !important;
    background: rgba(255, 255, 255, .8) !important;
    border: 1px solid #fff !important;
}

.max-width-none {
    max-width: none !important;
}

.max-height-100 {
    max-height: 100% !important;
}

.modal-width {
    max-width: 37rem !important;
}

.tutorial-carousel-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: 100%;
    /* padding-inline: 1rem; */
    /* Fixed height for the tutorial content area */
    overflow-y: scroll;
    overflow-x: hidden;
    /* Removed flex properties to avoid potential interaction issues with scrolling */
}

/* Media queries */

@media screen and (max-width: 640px) {
    .scaem-modal__body--full-height {
        min-height: auto !important;
        max-height: none !important;
        height: 100% !important;
    }
}

@media (min-width: 640px) {
    .tutorial-carousel-container {
        height: 40vh;
        max-height: 22rem;
    }

    .scaem-modal__container--desktop {
        display: flex;
        flex-direction: column;
    }

    .scaem-modal__container--mobile {
        display: none;
    }

    .scaem-modal__button--full-width {
        width: auto;
    }

    .scaem-modal__body--small-height {
        max-height: 38vh;
        min-height: 38vh;
    }
}

@media screen and (max-width: 680px) {
    .modal-width__100 {
        width: 100% !important;
    }
}

@media screen and (min-width: 680px) and (max-width: 1400px) {
    .modal-width__55 {
        width: 55% !important;
    }
}

@media screen and (min-width: 740px) {
    .tutorial-carousel-container {
        /* height: 37vw; */
    }
}

@media screen and (max-width: 768px) {

    .scaem-modal__container {
        display: flex;
        flex-direction: column;
    }

    /* Apply the animation to the visual hint */
    .with-after::after {
        content: '';
        position: absolute;
        bottom: 4%;
        width: 90%;
        height: 20px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(229, 245, 255, 0.812));
        pointer-events: none;
        animation: pulsarScale 2s infinite ease-in-out;
        border-top-left-radius: 100%;
        border-top-right-radius: 100%;
        /* Apply the pulsing animation */
    }

    .scaem-modal__body--large-height {
        max-height: none !important;
        min-height: auto !important;
        height: 100% !important;
    }

    .scaem-modal__body--medium-height {
        max-height: none !important;
        min-height: auto !important;
        height: 100% !important;
    }
}




@media screen and (min-width: 1400px) {
    .modal-width__40 {
        width: 35% !important;
    }
}


/* Define the pulsing animation */
@keyframes pulsarScale {
    0% {
        translate: 0 3px;
        opacity: 1;
    }

    50% {
        translate: 0 7px;
        opacity: 0.5;
    }

    100% {
        translate: 0 3px;
        opacity: 1;
    }
}

@keyframes pulsar {
    0% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        opacity: 1;
    }

    50% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(239, 239, 239));
        opacity: 0.5;
    }

    100% {
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        opacity: 1;
    }
}

/* Add this to your project's CSS file */