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

/* 2. Dialog Container Reset and Centering */
#newslettermodal {
    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 */
}

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


/* 4. Close Button Styling (Using a standard X icon) */
.btn-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: 10px;
}

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

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