/* 4. PANEL CONTENT BOX (The visible modal container) */
.panel-content-wrapper {
    background-color: #010203e0;
    color: #fff;
    padding-top: 8vh; 
    padding-bottom: 8vh;
    padding-right: 2vw;
    padding-left: 2vw;

    /* Sizing Rules */
    max-width: 600px;
    width: 100%;
    min-width: 100px;
    text-align: left;
    
    /* FLEX LAYOUT REMAINS CRITICAL */
    display: flex;
    flex-direction: column;
    
    /* Height Constraints */
    max-height: 90vh;
    overflow-y: auto;
    
    border-radius: 12px; /* Adjust 12px to your preferred radius */

    position: relative;
}

/* 💥 NEW: Styling and positioning the 'X' button */
.close-btn {
    position: absolute;
    top: 0px;      /* Distance from the top edge */
    right: 10px;    /* Distance from the right edge */
    
    /* Styling the 'X' */
    font-size: 30px;
    font-weight: 300;
    line-height: 1;  /* Ensure it doesn't take up too much vertical space */
    color: #c9c9c957;
    cursor: pointer;
    
    /* Add a padding/area for easier clicking (optional) */
    padding: 10px; 
    z-index: 1000; /* Ensure it's above all content */
}

/* 5. HEADER/FOOTER PADDING (FIXED) */
.panel-content-wrapper h3,
.panel-content-wrapper p {
    padding-left: 3vw;
    padding-right: 3vw;
}

/* 6. MODAL CONTENT AREA - Inner Text Container */
#modal-content {
    flex-grow: 1;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 500px;
    min-height: 2vh;
}

/* 7. SCROLLABLE CONTENT CONTAINER (The element that handles scrolling) */
#scrollable-content {
    /* Flex rules to fill remaining vertical space */
    flex-grow: 1;
    
    /* 💥 CRITICAL: This is the key to scrolling inside a flex container */
    overflow-y: auto; 
    
    /* Must have 0 padding */
    padding: 0;
    
    /* Ensures it uses 100% of the available vertical space defined by flex-grow */
    height: 100%; 
    
    /* Reset other conflicting properties */
    max-height: none; 
}

/* 8. NEW INNER PADDING WRAPPER (This is where your 50px buffer goes) */
.scrolling-content-padding {
    /* Apply the desired 50px buffer here */
    padding-top: 80px; 
    padding-bottom: 80px; 

    /* Horizontal padding remains 0 as the outer wrapper handles horizontal alignment */
    padding-left: 0;  
    padding-right: 0;
}

/* Supplemental Classes (if used) */
.content-container {
    max-height: calc(90vh - (16vh + 150px));
}

.popup-header,
.popup-footer {
    height: 60px;
    background-color: #f0f0f000;
    text-align: center;
}