/* 1. Backdrop Styling (The darkened overlay) */
dialog::backdrop {
  background:rgba(0, 0, 0, 0.5);
}

/* 2. Dialog Container Reset and Centering */
dialog {
    z-index: 1050;
    /* Reset default dialog styles */
    border: none;
    padding: 0;
    margin: auto; /* This centers the dialog horizontally and vertically */
    
    /* Position the dialog to appear above other content */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Fine-tuning the center position */
    min-width:320px;
    
    /* Ensure the dialog has a subtle shadow for elevation */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    border-radius: 0.5rem; /* Match the rounded corners of Bootstrap modals */
}

dialog.bottomright {
    top: auto;
    left: auto; 
    bottom: 5px;
    right: 5px; 
    margin: 0;
    transform: unset;
}

/* Ensure the modal content takes full width/height and retains background color */
#newslettermodal .dialog-content {
    /* The inline style background: #dff3fc; is retained in the HTML */
    
    /* Match the dialog border-radius */
    border-radius: 0.5rem; 
    
    /* Important for clean corners */
    overflow: hidden; 

    background: transparent;
}


/* 4. Close Button Styling (Using a standard X icon) */
.dialog-close {
    /* Simple reset for the button */
    background: none;
    border: none;
    padding: 0.5rem;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1; /* Aligns the 'X' better */
    color: #000;
    opacity: 0.7;
    transition: opacity 0.15s ease-in-out;
    position: absolute;
    right: 0px;
    z-index: 1;
}

.dialog-close:hover {
    opacity: 0.75;
}

/* You may need an actual 'X' character or an SVG/image for the close button. */
.dialog-close::before {
    content: '\00d7'; /* Unicode for multiplication sign '×', often used as a close 'X' */
}