/* ----------------------------------- */
/* Start modal styles */


/* Prevent scrolling when the modal is active */
 body.no-scroll {
    overflow: hidden;
}  


/* Modal overlay for blocking user interaction */
.modal-overlay-full {
    position: fixed;
    top: 40%; /* Show the top 40% of the page */
    left: 0;
    width: 100%;
    height: 60%; /* Block the rest 60% */
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    z-index: 1000;
}
.modal-overlay-full-mobile {
    position: fixed;
    top: 40%;
    left: 0;
    width: 100%;
    height: 60%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

/* Remove close button when max article count reached */
.modal-content.no-close .close {
    display: none;
}
.modal-content.no-close-mobile .close-mobile {
    display: none;
}

#close-modal-button{
    margin-top:1.3em;
    margin-bottom:1em;
    background-image: url('https://theworldcanbeyours.com/staging/wp-content/uploads/2024/10/dark-green-close-icon.png'); /* Replace with your actual image URL */
    background-size: contain; /* Adjust the size to cover the button */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */
    background-color: #E0E0E0;
    width: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)))!important;
    height: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)))!important;
    border: 1px solid #aaa; /* Subtle border for the beveled look */
    border-radius: 4px; /* Rounded corners */
    box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.8), inset -2px -2px 5px rgba(0, 0, 0, 0.2); /* Beveled effect */
    transition: box-shadow 0.1s ease, transform 0.1s ease; /* Smooth transition */
    padding:0.5em;
}

#close-modal-button:hover{
    background-color: var(--e-global-color-7620581);
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}
.modal-overlay-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

/* Modal content */
.modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff;
    padding:1em;
    z-index: 1001;
    border-radius: 8px;
    width: calc(260px + (600 - 260) * ((100vw - 300px) / (1600 - 300))) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-height:340px;
}

.modal-content-mobile {
    position: fixed !important;
    top: 37%;
    left: 50%!important;
    transform: translate(-50%, -50%) !important;
    background-color: #ffffff;
    margin:0.1em;
    padding: 1em;
    z-index: 1001;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-height: 340px;
    width: calc(300px + (600 - 300) * ((100vw - 300px) / (1600 - 300)));
    left: 0; /* Align to the left of the overlay */
    transform: none; /* Remove transform to prevent centering */
}


.modal-content-text1 {
    margin:1em;
    font-size:calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
}
.modal-content-text1-mobile {
    margin:1em;
    max-width:100%;
    font-size:calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
}

.modal-content-text2 {
    margin-bottom: 1em;
    font-size:calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
}
.modal-content-text2-mobile {
    margin-bottom: 1em;
    font-size:calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)))!important;
}

.modal-content-header h2 {
    margin-left: 1em !important;
    margin-right: 1em !important;
    margin-top:1em !important;
    margin-bottom:0px !important;
    font-size:calc(17px + (26 - 17) * ((100vw - 300px) / (1600 - 300))) !important;
    font-weight:600 !important;
    
}

.modal-content-header-mobile h2 {
    margin-left: 1em !important;
    margin-right: 1em !important;
    margin-bottom:0px !important;
    font-size:calc(17px + (26 - 17) * ((100vw - 300px) / (1600 - 300))) !important;
    margin-top:1em !important;
    font-weight:600 !important;
}

/* Close button */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}
.close-mobile {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}



/* -------------------------------------------END-------------------------------------------------------  */
/*                                  SUBSCRIPTION DETECTION MODAL                                          */
/* -----------------------------------------------------------------------------------------------------  */



/* -------------------------------------------BEGIN---------------------------------------------------------*/
/*                              USER SUBSCRIPTION PROCESSES CLASS                                           */
/* ---------------------------------------------------------------------------------------------------------*/

.custom-subscription-process-container{
    background-color: rgba(224, 224, 224, 0.4);;
}

.subscription-container{
    display: flex;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    padding:1em !important;
    margin:0.25em;
    width: calc(260px + (520 - 260) * ((100vw - 300px) / (1600 - 300)));
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    border-radius:10px;
    border-style:groove;
    border-width:2px;
    border-color:#2C3E2CCC;
    z-index: 1002;
 
}

.modal-contentsubscription-container{
    margin:0px !important;
    width: calc(260px + (560 - 260) * ((100vw - 300px) / (1600 - 300))) !important;
}
.subscription-heading-group{
     margin:1em;
     gap:1em;
}

.subscription-heading{
    text-align:center !important;
    font-weight:600 !important;
    font-size:calc(17px + (26 - 17) * ((100vw - 300px) / (1600 - 300))) !important;
    font-family:'Averia Serif Libre', serif !important;
    color:var(--e-global-color-primary) !important;
    padding: 0px !important;
    margin:0px !important;
}

.send-new-code-button-div{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding:0px !important;
    height:50%;
}

.resend-new-code-link {
    text-align: center !important;
    font-weight: 400 !important;
    font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300))) !important;
    font-family: 'Averia Serif Libre', serif !important;    
    color: #0275BD !important;
}

#resend-new-code-link-0.disabled, #resend-new-code-link-1.disabled,
#resend-new-code-link-2.disabled, #resend-new-code-link-3.disabled{
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #E0E0E0 !important;
}

.resend-new-code-link:hover{
    color:#FFCC33 !important;
}

.subscription-form-label{
    text-align:center;
    font-weight:600;
    font-size:calc(11px + (17 - 11) * ((100vw - 300px) / (1600 - 300)));
    font-family:'Averia Serif Libre', serif;
    color:var(--e-global-color-primary);
    margin-top:1em !important;
}

.subscription-button-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    gap:1em;
}

.subscription-label{
    font-family: 'Averia Serif Libre', serif !important;
    font-size: calc(8px + (14 - 8) * ((100vw - 300px) / (1600 - 300)));
    color: var(--e-global-color-secondary,'#446344');
    font-weight: 400;
    text-align:center;
}

input.subscription-input{
    font-size: calc(7px + (12 - 7) * ((100vw - 300px) / (1600 - 300))) !important;
    font-family: 'Verdana', sans-serif !important;
}

.password-input-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#password-field {
    padding-right: 1em;
}


input.subscription-input::placeholder {
    color: #999;
    font-style: italic;
    font-size: calc(8px + (14 - 8) * ((100vw - 300px) / (1600 - 300))) !important;
    opacity: 0.7;
    font-family: 'Verdana', sans-serif !important;
}


.subscription-password-input::placeholder{
    color: #999;
    font-style: italic;
    font-size: calc(8px + (14 - 8) * ((100vw - 300px) / (1600 - 300)));
    opacity: 0.7;
    font-family: 'Verdana', sans-serif !important;
}


.toggle-password {
    position: absolute;
    cursor: pointer;
    font-size: calc(17px + (25 - 17) * ((100vw - 300px) / (1600 - 300))) !important;
    display: flex;
    align-items: center;
    height: 160%;
    margin-bottom:1em;
    padding-right:1em;
}

.password-input-wrapper {
    position: relative;
}

#password-field-0,#password-field-1,#password-field-2 ,#password-field-3,#password-field-4,#password-field-5
, #password-field-6, #password-field-7,#password-field-8{
    padding-right: 2em; /* Add some padding to prevent text overlap with the icon */
}

#subscription-button-0, #subscription-button-1, #subscription-button-2,#subscription-button-3,#subscription-button-4,#subscription-button-5,
#subscription-button-6, #subscription-button-7, #subscription-button-8{
    background-color: var(--e-global-color-primary) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-size: calc(12px + (18 - 12) * ((100vw - 300px) / (1600 - 300))) !important;
    font-family: 'Averia Serif Libre', serif !important;
    width: 60%;
    
    /* Added styles for rounded corners, shadow, and centering */
    border-radius: 25px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: block; /* Makes the button a block element */
    margin: 0 auto; /* Centers the button horizontally */
    padding: 10px 20px; /* Adds some padding for better appearance */
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

#subscription-button-0.disabled, #subscription-button-1.disabled, #subscription-button-2.disabled,#subscription-button-3.disabled, #subscription-button-4.disabled,
#subscription-button-5.disabled, #subscription-button-6.disabled, #subscription-button-7.disabled, #subscription-button-8.disabled{
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: #E0E0E0 !important;
}


#subscription-button-0:hover, #subscription-button-1:hover, #subscription-button-2:hover,#subscription-button-3:hover, #subscription-button-4:hover,
#subscription-button-5:hover, #subscription-button-6:hover, #subscription-button-7:hover, #subscription-button-8:hover{
    background-color:var(--e-global-color-7620581) !important;
}

#subscription-button-0 a, #subscription-button-1 a, #subscription-button-2 a,#subscription-button-3 a, #subscription-button-4 a,
#subscription-button-5 a, #subscription-button-6 a, #subscription-button-7 a, #subscription-button-8 a{
    color: #FFFFFF;
}

/* Make sure the form is centered horizontally when shown */

.subscription-form {
    display: flex;
    flex-direction:column;
    width: 100%;
}







/* -------------------------------------------END---------------------------------------------------------*/
/*                              USER SUBSCRIPTION PROCESSES CLASS                                           */
/* ---------------------------------------------------------------------------------------------------------*/



/* -------------------------------------------BEGIN-----------------------------------------------------*/
/* (PHP add_shortcode('custom_subscription_button', 'custom_subscription_button_shortcode');)           */
/* logged in user info shortcode                                                                        */
/* ---------------------------------------------------------------------------------------------------  */


/* Flexbox styling for the logged-in user info container */
.logged-in-user-info {
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Align items vertically centered */
    gap: 10px; /* Space between the elements */
    margin-bottom: 20px; /* Margin below the container */
}

/* Style for the avatar size */
.logged-in-user-info img.avatar {
    width: 30px; /* Set the desired width for the avatar */
    height: 30px; /* Set the desired height for the avatar */
    border-radius: 50%; /* Optional: Make the avatar circular */
}
/* Style for the text and link elements inside the flexbox */
.logged-in-user-info p {
    margin: 0; /* Remove default margin */
    font-family: var(--e-global-typography-Text-font-family, 'Arial');
    font-size:calc(9px + (14 - 9) * ((100vw - 300px) / (1600 - 300)))!important;
}
.logged-in-user-info a {
    color: var(--e-global-color-link, #0275BD) !important; /* Fallback to white color if variable is not found */
    font-family: var(--e-global-typography-accent-font-family, 'Arial') !important; /* Fallback to 'Arial' if variable is not found */
    font-size:calc(9px + (14 - 9) * ((100vw - 300px) / (1600 - 300)))!important;
    font-weight: 600 !important;
}
.logged-in-user-info a:hover {
    color: var(--e-global-color-Hover, #FFCC33) !important;
}