:root {
    --popup-side-padding: 50px;
}

.blurry-background {
    background-color:rgba(100,100,100,0.6);
    backdrop-filter: blur(8px);
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:10000;
    display:none;
    justify-content:center;
    align-items:center
}
/* Main container */
.main-popup-container {
    display:flex;
    border-radius: 4px;
    flex-direction:column;
    background-color:white;
    width: 700px;
    position:relative;
    box-shadow: 0 0 10px 5px gray;
    transition: width 0.2s ease-in-out;

  background: 
    linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)),
    url("/wp-content/uploads/2025/10/popup-background-min-1.png") center/cover no-repeat;
    
}
.main-popup-container .close-button {
    position:absolute;
    top:20px;
    right:20px;
    width:24px;
    height:24px;
    cursor:pointer;
}
/***************************************************/
.main-popup-container .top-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    padding:var(--popup-side-padding);
    padding-bottom:calc(var(--popup-side-padding) / 2);
    gap:10px;
}
.main-popup-container .top-area .popup-title {
    font-size:2rem;
    font-weight:bolder;
    text-align:center;
    display: block;
    font-family: "Poppins", sans-serif;
}
.main-popup-container .top-area .popup-description {
    font-size:0.9rem;
    text-align: center;
    display: block;
    color:rgb(40,40,40);
    font-family: "DM Sans", sans-serif;
}

.main-popup-container form {
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding:var(--popup-side-padding);
    padding-bottom:10px;
}
.main-popup-container .styled-inputs {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.main-popup-container .styled-inputs input[type="email"] {
    padding:10px;
    font-size:1.15rem;
    outline:none;
    border-radius:4px;
    background-color: rgb(250,250,250);

    width:100%;
    max-width:400px;
    min-width:200px;

    border:1px solid gray;
    letter-spacing: 1.2px;
}

.main-popup-container .styled-inputs input[type="submit"] {
    padding:10px 15px;
    font-size:1.15rem;
    outline:none;
    border-radius:4px;
    background-color:rgb(57,121,254);

    width:150px;

    border:none;
    box-shadow: 0 0 2px 2px lightgray;
    cursor:pointer;
    color:white;
}

.main-popup-container .styled-inputs input[type="submit"]:hover {
    filter: brightness(90%);
}
.main-popup-container .styled-inputs input[type="email"]:focus {
    border:1px solid green;
    background-color:white;
}

.main-popup-container .styled-inputs input[type="email"]:hover {
    border:1px solid darkgreen;
    background-color:white;
}


.main-popup-container .end-area {
    padding:0 var(--popup-side-padding);
    width:100%;
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
    min-height:50px;
}


#error_message {
    color:red;
    font-size:0.8rem;
    text-align: left;
    width:100%;
}

#success_message {
    color:green;
    font-size:0.8rem;
    text-align: left;
    width:100%;
}



@media (max-width: 768px) {
    .main-popup-container {
        width:80%;
    }
}

@media (max-width: 480px) {
    .main-popup-container {
        width:98%;
    }
}