/*Vars*/
:root {
    --App-Background-Light: #f8f4f2;
    /*--App-Background-Light: #FFFFFF;*/
    --App-Background: #FEF8F0;
    --App-Purple: #9548D1;
    --App-Purple-Light: #bb82e8;
    --App-Orange: #F2522E;
    --App-Orange-Light: #ec7054;
    --App-Red: #dc3545;
    --App-Red-Lihght: #f16a77;
    --App-Grey: #EBE7E3;
    --App-Grey-Dark: #676766;

    /*Custom bootstrap*/
    --bs-body-bg: var(--App-Background-Light);
    --bs-border-color: var(--App-Purple-Light);

    /*Text*/
    --General-text: #1C1B1F;
    --Light-text: rgba(60, 60, 61, 0.60);

    /* Fonts */
    --primary-font: Grandstander, serif;
    --secondary-font: Poppins, serif;
    --accent-font: Grandstander, serif;

}


/*Custom scroll bar*/

/*ScrollBar style*/
@media (min-width: 600px) {


    /*.custom-scrollbar::-webkit-scrollbar {*/
    /*    width: 8px;*/
    /*    height: 8px;*/
    /*    background-color: #F5F5F5;*/
    /*}*/
    /*.custom-scrollbar::-webkit-scrollbar-track {*/
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
    /*    background-color: #F5F5F5;*/
    /*    border-radius: 10px;*/
    /*}*/
    /*.custom-scrollbar::-webkit-scrollbar-thumb {*/
    /*    border-radius: 10px;*/
    /*    !*noinspection CssInvalidFunction*!*/
    /*    background-image: -webkit-gradient(linear,*/
    /*    right bottom,*/
    /*    left top,*/
    /*    color-stop(0.72, var(--App-Purple-Light)),*/
    /*    color-stop(0.86, var(--App-Purple)));*/
    /*}*/
    body::-webkit-scrollbar,
    body *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background-color: #F5F5F5;
    }

    body::-webkit-scrollbar-track,
    body *::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb,
    body *::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-image: -webkit-gradient(
                linear,
                right bottom,
                left top,
                color-stop(0.72, var(--App-Orange-Light)),
                color-stop(0.86, var(--App-Orange))
        );
    }


}

/*Reset boy styles*/
body {
    margin: 0;
    padding: 0;
    /*overflow: hidden;*/
    box-sizing: border-box;
    background: var(--App-Background, #FFFFFF);
    font-family: Grandstander, cursive, Serif;
}

.page_content {
    overflow: auto;
    width: 100dvw;
    height: 100dvh;
}

.custom-container {
    width: 100%;
    padding: 24px 24px;
    overflow: hidden;
}


@media (max-width: 650px) {
    .custom-container {
        padding: 24px 8px;
    }

}


/*Forms*/
.form-input-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-input-container label {
    color: var(--Light-text);
    font-family: var(--secondary-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.form-input-container input, .form-input-container textarea {
    border: 1px solid var(--bs-border-color);
    border-radius: 10px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-input-container input:focus, .form-input-container textarea:focus {
    border-color: var(--App-Purple-Light);
    outline: 0;
    box-shadow: 0 0 0 2px var(--App-Purple-Light);
}

.form-input-container input:checked {
    background-color: var(--App-Purple);
    border-color: var(--App-Purple-Light);
}

.form-input-container input::placeholder, .form-input-container textarea:checked {
    color: var(--App-Grey-Dark);
}

form .errors_container {
    color: #dc3545;
    min-height: 24px;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 400;
    line-height: 120%;
}

.form-check-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
}


.form-check-container label {
    color: var(--Light-text);
    font-family: var(--secondary-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}


/** Clear input **/

.form-clear-input {
    border: none!important;
    border-radius: 0!important;
    border-bottom: 1px solid var(--App-Purple)!important;
}

.form-clear-input:focus {
    border: none!important;
    outline: none!important;
    box-shadow: none!important;
    border-bottom: 1px solid var(--App-Purple)!important;
}

/*Buttons*/

.custom-btn {
    user-select: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 28px;
    border-radius: 50rem;

    font-family: var(--primary-font);
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 120%;
    text-decoration: none;
}

.custom-btn.primary {
    background: var(--App-Purple);
    border: 1px solid var(--App-Purple-Light);
    color: #FFFFFF;
}


.custom-btn.primary[disabled] {
    background-color: lightgray !important;
    border-color: lightgrey !important;
}

.custom-btn.primary[disabled]:hover {
    cursor: not-allowed;
    box-shadow: None !important;
    background: lightgray !important;
}

.custom-btn.primary:hover {
    box-shadow: 0 8px 16px rgba(54, 60, 75, 0.2);
    background: var(--App-Purple-Light);
    color: #FFFFFF;
    transition: all .15s ease-in-out;
}

/*White*/

.custom-btn.white {
    background: #FFFFFF;
    border: 1px solid var(--App-Purple-Light);
    color: var(--General-text);
}


.custom-btn.white[disabled] {
    background-color: lightgray !important;
    border-color: lightgrey !important;
    color: var(--Light-text);
}

.custom-btn.white[disabled]:hover {
    cursor: not-allowed;
    box-shadow: None !important;
    background: lightgray !important;
}

.custom-btn.white:hover {
    box-shadow: 0 8px 16px rgba(54, 60, 75, 0.2);
    transition: all .15s ease-in-out;
}

.custom-btn.sm {
    padding: 14px 28px;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
}

.custom-btn.xl {
    padding: 17px 32px 16px 32px;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
}

/*Links*/

.custom-link {
    background: none;
    border: none;
    text-decoration: none;
    padding: 0;
    cursor: pointer;

    font-family: 'Poppins', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: var(--App-Purple, #9548D1);
    user-select: none
}


/*Custom modal*/

.custom-modal {
    font-family: var(--primary-font);
}

.custom-modal .modal-title {
    font-family: var(--primary-font);
    color: var(--General-text);
    font-weight: 600;
    font-size: 24px;
}

.custom-modal .modal-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1.5px);
}

.custom-modal .modal-header, .custom-modal .modal-footer {
    border: none;
    font-family: var(--primary-font);
}

.design-clean-modal {
    background: transparent;
    border: none;
}

.custom-modal-backdrop {
    background-color: rgba(255, 255, 255, 0.8);
}

.transparent-modal-backdrop {
    background-color: transparent;

}


.blur-background {
    filter: blur(2.5px);
    transition: all 0.15s ease-in-out;
}


/*Page*/

.container_section_header {
    padding: 8px 6px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


.section_title {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: var(--primary-font);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.section_subtitle {
    margin: 0;
    padding: 0;
    color: var(--General-text);
    font-family: var(--primary-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.context-menu {
    padding: 8px 0;
    z-index: 100;
    position: absolute;
    display: none;
    flex-direction: column;
    gap: 1px;
    background-color: #FFFFFF;
    border: 1px solid var(--App-Grey);
    border-radius: 14px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1.5px);
    overflow: hidden;

    width: 100%;
    max-width: 190px;
    min-width: 120px;

}

.context-menu.show {
    display: flex;
}

.context-menu .item {
    width: 100%;
    cursor: pointer;
    padding: 4px 16px;
    white-space: nowrap;
    user-select: none;
    font-weight: 400;
    color: var(--General-text);
    background-color: transparent;
}

.context-menu .item:hover {
    background-color: var(--App-Grey);
}

.context-menu .item:active {
    color: #FFFFFF;
    background-color: var(--App-Purple);
}

.custom-tooltip {
    --bs-tooltip-bg: var(--App-Purple);
    --bs-tooltip-color: #FFFFFF;
}

/** Text **/

.lines-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /** Indica en tu elemento el número de lineas con -webkit-line-clamp: 2; **/
}


.background-loading-item {
    background: #ffffff;
    background-image: linear-gradient(to left, transparent, #dedfe1, transparent),
    linear-gradient(to right, rgba(222, 223, 225, 1), transparent, rgba(222, 223, 225, 1));
    background-size: 100%, 50%;
    animation: move-loading-background 1s infinite;
    border-radius: 8px;
    border-color: transparent;
    color: transparent;
    user-select: none;
    cursor: default;
}

@keyframes move-loading-background {
    from {
        background-position: left;
    }
    to {
        background-position: right;
    }
}

/* Main Banner Centered */
/* Agrega esto a tu archivo CSS */
.main-banner {
    position: fixed; /* Fijar el banner para que esté encima */
    top: 50%; /* Centrar en la mitad de la pantalla */
    left: 50%;
    transform: translate(-50%, -50%); /* Ajustar la posición */
    background-color: white; /* Añadir fondo para asegurar la visibilidad */
    padding: 20px; /* Añadir algo de espacio interior */
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); /* Añadir sombra para resaltar */
    z-index: 1000; /* Asegurar que esté por encima de otros elementos */
    border-radius: 8px;
}

.banner-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.banner-content h3 {
    margin: 0;
    font-family: var(--secondary-font);
    font-size: 24px;
    text-align: center;
}

.banner-content label {
    font-size: 16px;
    font-weight: 500;
}

.banner-content .form-control {
    padding: 8px;
    border-radius: 4px;
    border: none;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
}

.custom-btn.white {
    background-color: #ffffff;
    color: var(--App-Purple);
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 5px;
    justify-content: center;
    cursor: pointer;
}

.star {
    font-size: 30px;
    color: #ccc; /* Default grey color */
    transition: color 0.3s;
}

.star.selected {
    color: var(--App-Orange); /* The color for selected stars */
}

.star:hover, .star:hover ~ .star {
    color: var(--App-Orange-Light); /* Lighter color when hovering */
}

/* Estilos base (sin cambios) */
.subscription-banner-overlay-unique {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.subscription-banner-unique {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    z-index: 10000;
}

.subscription-banner-unique .banner-content-unique {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

.subscription-banner-unique .plan-cards-unique {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.subscription-banner-unique .plan-card-unique {
    background: var(--App-Background-Light, #FFFFFF);
    border: 1px solid var(--App-Grey);
    padding: 20px;
    border-radius: 10px;
    flex: 1 1 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.subscription-banner-unique .plan-card-unique h3 {
    margin-bottom: 10px;
    color: var(--General-text);
    font-size: 20px;
    line-height: 1.5;
}

.subscription-banner-unique .plan-card-unique .price-unique {
    font-size: 24px;
    color: var(--App-Purple);
    margin: 10px 0;
    text-align: center;
}

.subscription-banner-unique .plan-card-unique ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.subscription-banner-unique .plan-card-unique ul li {
    margin: 4px 0;
    padding-left: 20px;
    position: relative;
    font-size: 16px;
}

.subscription-banner-unique .plan-card-unique ul li::before {
    position: absolute;
    left: 0;
    color: var(--App-Purple);
}

.subscription-banner-unique .custom-btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
    margin-top: 20px;
    font-family: var(--primary-font);
}

.subscription-banner-unique .custom-btn.white {
    background: #fff;
    color: var(--App-Purple);
    border: 2px solid var(--App-Purple-Light);
}

.subscription-banner-unique .custom-btn.primary {
    background: var(--App-Purple);
    color: #fff;
}

.subscription-banner-unique .custom-btn:hover {
    opacity: 0.9;
}

.subscription-banner-unique .plan-card-free {
    border: 2px solid var(--App-Orange);
}

/* Ahora el Plan Estándar tiene estilo dorado */
.subscription-banner-unique .plan-card-standard {
    border: 2px solid #FFC700;
    background: #FFF8DC; /* Fondo color dorado claro */
}

.plan-card-standard:hover {
    border: 2px solid #FFC700; /* Borde más brillante al hacer hover */
    background: #FFECB3; /* Fondo dorado más brillante al hacer hover */
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4); /* Sombra color oro */
}

.plan-card-standard h3,
.plan-card-standard .price-unique {
    color: #DAA520; /* Texto color oro oscuro */
}

.plan-card-standard:hover h3,
.plan-card-standard:hover .price-unique {
    color: #FFD700; /* Texto más brillante al hacer hover */
}

/* Ahora el Plan Premium tiene estilo púrpura */
.subscription-banner-unique .plan-card-premium {
    border: 2px solid var(--App-Purple);
}

.plan-card-premium:hover {
    border: 2px solid var(--App-Purple-Light);
    background: var(--App-Purple-Light);
    box-shadow: 0 8px 20px rgba(149, 72, 209, 0.4); /* Sombra color púrpura */
}

.plan-card-premium h3,
.plan-card-premium .price-unique {
    color: var(--App-Purple);
}

.plan-card-premium:hover h3,
.plan-card-premium:hover .price-unique,
.plan-card-premium:hover ul li {
    color: #FFFFFF !important; /* Cambiar el texto a blanco */
}

/* Ajustes responsivos actualizados */
@media (max-width: 768px) {
    .subscription-banner-unique {
        padding: 15px;
        max-height: 95vh;
    }

    .subscription-banner-unique .plan-cards-unique {
        flex-direction: column;
        align-items: center;
    }

    .subscription-banner-unique .plan-card-unique {
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .subscription-banner-unique {
        padding: 10px;
        width: 98%;
    }

    .subscription-banner-unique .banner-content-unique {
        gap: 10px;
    }

    .subscription-banner-unique .plan-card-unique {
        padding: 12px;
    }

    .subscription-banner-unique .plan-card-unique h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .subscription-banner-unique .plan-card-unique .price-unique {
        font-size: 18px;
        margin: 5px 0;
    }

    .subscription-banner-unique .plan-card-unique ul {
        gap: 4px;
    }

    .subscription-banner-unique .plan-card-unique ul li {
        font-size: 13px;
        margin: 2px 0;
    }

    .subscription-banner-unique .custom-btn {
        padding: 8px 16px;
        font-size: 14px;
        margin-top: 10px;
    }
}

@media (max-width: 360px) {
    .subscription-banner-unique {
        padding: 5px;
        max-height: 98vh;
    }

    .subscription-banner-unique .plan-card-unique {
        padding: 8px;
    }

    .subscription-banner-unique .plan-card-unique h3 {
        font-size: 14px;
    }

    .subscription-banner-unique .plan-card-unique .price-unique {
        font-size: 16px;
    }

    .subscription-banner-unique .plan-card-unique ul li {
        font-size: 11px;
        padding-left: 15px;
    }

    .subscription-banner-unique .plan-card-unique ul li::before {
        font-size: 10px;
    }

    .subscription-banner-unique .custom-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Banner versión móvil centrado y con el mismo estilo */
.subscription-banner-overlay-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.subscription-banner-mobile {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
    width: 90%; /* Se adapta al tamaño de la pantalla */
    max-width: 320px; /* Ajusta el ancho máximo según sea necesario */
    max-height: 80%; /* Ajusta la altura máxima al 80% de la pantalla */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    overflow-y: auto;
    z-index: 10000;
}

.banner-content-mobile {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.plan-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-card-mobile {
    background: var(--App-Background-Light, #FFFFFF);
    border: 1px solid var(--App-Grey);
    padding: 15px;
    border-radius: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.plan-card-mobile h3 {
    font-size: 16px;
}

.plan-card-mobile .price-mobile {
    font-size: 18px;
    margin: 8px 0;
}

.plan-card-mobile button {
    padding: 8px 16px;
    font-size: 14px;
    transition: background 0.3s, transform 0.3s; /* Agregar transición para el efecto hover */
}

/* Efecto hover para los banners */
.plan-card-unique:hover,
.plan-card-mobile:hover {
    transform: translateY(-5px); /* Levanta ligeramente la tarjeta */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Añade una sombra para resaltar */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
    border: 2px solid var(--App-Purple-Light); /* Cambia el borde para resaltar */
}

.plan-card-unique:hover button,
.plan-card-mobile:hover button {
    background: var(--App-Purple-Light); /* Cambia el color de fondo del botón al pasar el ratón */
    color: #fff; /* Cambia el color del texto del botón */
    transform: translateY(-2px); /* Mueve el botón ligeramente hacia arriba */
    transition: background 0.3s ease, transform 0.3s ease; /* Añade una transición al botón */
}

.plan-card-unique:hover h3,
.plan-card-mobile:hover h3 {
    color: var(--App-Purple); /* Cambia el color del título al pasar el ratón */
    transition: color 0.3s ease; /* Añade una transición al color del título */
}

.plan-card-unique:hover .price-unique,
.plan-card-mobile:hover .price-mobile {
    color: var(--App-Purple); /* Cambia el color del precio */
    font-weight: bold; /* Añade negrita para resaltar */
    transition: color 0.3s ease, font-weight 0.3s ease;
}


/* Centrando el banner móvil */
.subscription-banner-overlay-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
}

.subscription-banner-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
}

/* Efecto de rebote ligero */
.plan-card-unique:hover,
.plan-card-mobile:hover {
    transform: translateY(-5px) scale(1.02); /* Se levanta y agranda ligeramente */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Hace que la sombra sea más pronunciada */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card-unique:hover button,
.plan-card-mobile:hover button {
    background: var(--App-Purple-Light);
    color: #fff;
    transform: translateY(-3px); /* Rebote del botón */
    transition: transform 0.3s ease, background 0.3s ease;
}