.modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.5)}
.modal-container{position:relative;width:60dvw;height:80dvh;background-color:#fff;overflow:hidden;overflow-y:scroll;border-radius: 20px;}

/* Auto Popup - Smaller Size */
.modal-container.modal-auto-popup {
    top: 7dvh;
    width: 50dvw;
    height: 63dvh;
}

@media (max-width: 768px) {
    .modal-container.modal-auto-popup {
        width: 70dvw;
        height: auto;
        top: 0;
        transform: none;
        position: relative;
        margin: auto;
    }
}

/* Close button positioning for auto popup */
.modal-container.modal-auto-popup .modal-close-button {
    top: 24dvh;
    left: 73%;
}

@media (max-width: 768px) {
    .modal-container.modal-auto-popup .modal-close-button {
        top: 23dvh;
            left: 78%;

    }
}

.modal-header{background-color:#fff;color:#333;padding:2px 1.5rem;text-align:center;border-bottom:none}
.modal-title{font-size:1.5rem;}
.modal-close-button{position:fixed;top:8dvh;z-index:130;height:6vh;left:77%;background-color:transparent;object-fit:contain;border:0;cursor:pointer}
.modal-close-button img{height: 6vh;
    object-fit: contain;
    /* position: absolute; */
    /* z-index: 9999; */
    cursor: pointer;}
.modal-content{padding:1.5rem ;overflow-y: scroll;background-color:#fff}
#modal-image{position:relative;z-index:300;width:25dvw;object-fit:contain;left: 50%;transform: translateX(-50%);}
#text-modal{position:relative;z-index:300;font-size:4vh;color:#de1f1f}
#modal-imagecentering{position:relative;z-index:300;height:15dvh;object-fit:contain;}
#modal-tnc-container{
    width: 100%; height: 60dvh; border: none;
}

/* Auto Popup Styles */
.auto-popup-content {
    text-align: center;
    padding: 20px;
}

.auto-popup-content h2 {
    color: #E20019;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: bold;
}

.auto-popup-content p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #333;
}

.auto-popup-btn {
    background-color: #E20019;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
}

.auto-popup-btn:hover {
    background-color: #c91717;
}

.auto-popup-btn.secondary {
    background-color: #f0f0f0;
    color: #333;
}

.auto-popup-btn.secondary:hover {
    background-color: #e0e0e0;
}

/* Auto popup animation */
.modal-overlay {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media print,screen and (max-width:40em){
    
    .modal-container {
        overflow-y: auto;
        position: relative;
        width: 83dvw;
        
        /* max-width: 70dvw; */
        height: 70dvh;
        background-color: #fff;
        /* box-shadow: 0 10px 15px rgba(0, 0, 0, .1); */
        overflow: hidden;
    }    .modal-close-button{position:fixed;top:14.2dvh;z-index:130;height:6dvh;left:82%;background-color:transparent;object-fit:contain;border:0;cursor:pointer}
    .modal-close-button img{height:5dvh;object-fit:contain}
    #modal-image{position:relative;z-index:300;width:40dvw;object-fit:contain}
    #text-modal{position:relative;z-index:300;font-size:11px;color:#de1f1f}
    #modal-imagecentering{position:relative;z-index:300;height:8dvh;object-fit:contain}
    #modal-imagepp{position:relative;z-index:300;height:6dvh;object-fit:contain}
    #modal-tnc-container{
        width: 100%; height: 60dvh; border: none; top: -2dvh; position: relative;
    }
}
@media screen and (min-width: 37em) and (max-width: 48em) {
    .modal-container {
        overflow-y: auto;
        position: relative;
        width: 80dvw;
        height: 80dvh;
        background-color: #fff;
        overflow: hidden;
    }
    
    .modal-close-button{position:fixed;top:8dvh;z-index:130;height:6dvh;left:86%;background-color:transparent;object-fit:contain;border:0;cursor:pointer}
    .modal-close-button img{height:5dvh;object-fit:contain}
    #modal-image{position:relative;z-index:300;width:40dvw;object-fit:contain}
    #text-modal{position:relative;z-index:300;font-size:11px;color:#de1f1f}
    #modal-imagecentering{position:relative;z-index:300;height:8dvh;object-fit:contain}
    #modal-imagepp{position:relative;z-index:300;height:6dvh;object-fit:contain}
    #modal-tnc-container{
        width: 100%; height: 60dvh; border: none; 
    }
}
@media screen and (min-width: 49em) and (max-width: 53em) {
    .modal-container {
        overflow-y: auto;
        position: relative;
        width: 80dvw;
        height: 80dvh;
        background-color: #fff;
        overflow: hidden;
    }
    
    .modal-close-button{position:fixed;top:7.6dvh;z-index:130;height:6dvh;left:86%;background-color:transparent;object-fit:contain;border:0;cursor:pointer}
    .modal-close-button img{height:6vh;object-fit:contain}
    #modal-image{position:relative;z-index:300;width:40dvw;object-fit:contain}
    #text-modal{position:relative;z-index:300;font-size:15px;color:#de1f1f}
    #modal-imagecentering{position:relative;z-index:300;height:8dvh;object-fit:contain}
    #modal-imagepp{position:relative;z-index:300;height:6dvh;object-fit:contain}
    #modal-tnc-container{
        width: 100%; height: 60dvh; border: none; 
    }
}