.scoop-modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.75);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.scoop-box{

width:60%;

height:50%;

background:white;

border-radius:20px;

display:flex;

overflow:hidden;

box-shadow:0 0 30px #444;

}




.right-panel{

width:55%;

padding:40px;

}

.size-list{

display:flex;

gap:20px;

margin:30px 0;

}

.size-card{

width:130px;

padding:20px;

border:2px solid pink;

border-radius:15px;

cursor:pointer;

font-size:22px;

font-weight:bold;

text-align:center;

transition:.3s;

}

.size-card:hover{

background:pink;

color:white;

}

.close-popup{

position:absolute;

right:530px;

top:290px;

font-size:35px;

cursor:pointer;

}
.popup-description{
    font-size:22px;
    font-weight:600;
    color:#444;
    margin:18px 0 28px;
    line-height:1.6;
}
.size-option input{
    display:none;
}
.size-option span{

    display:inline-block;

    padding:12px 28px;

    margin:8px;

    border:2px solid #ff69b4;

    border-radius:30px;

    background:#ffffff;

    color:#444;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}
.size-option input:checked + span{

    background:#ff69b4;

    color:#ffffff;

    border-color:#ff69b4;

    box-shadow:0 4px 12px rgba(255,105,180,.35);

}
.size-option span:hover{

    background:#ffe4ef;

    transform:scale(1.05);

}
.left-panel {
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    /* Space above image */
    padding-top: 25px;
}

.left-panel #scoop-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

    /* Single border */
    border: 2px solid #ddd;
    border-radius: 12px;

    /* Space between image and border */
    padding: 10px;

    box-sizing: border-box;
}