/* Styles for the Welcome Message Box - Aligned with reviewer-container, original color restored */

.message-box {
    /* Positioning */
    position: fixed; /* Keeps it in place even when scrolling */
    top: 50%;        /* Center vertically */
    left: 50%;       /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for exact centering */
    z-index: 1000;   /* Ensure it's above other content */

    /* Appearance - Aligned with .reviewer-container, original color restored */
    background-color: #eaf2f8;       /* Original light blue background color restored */
    color: #333;                     /* Match base text color */
    padding: 30px;                   /* Match padding */
    /* Add extra padding on the right if close button overlaps content */
    padding-right: 45px;
    border: 1px solid #aed6f1;       /* Original light blue border restored */
    border-radius: 8px;              /* Match border radius */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Match box shadow */
    width: 90%;                      /* Use percentage width */
    max-width: 550px;                 /* Adjusted max-width (slightly less than reviewer-container) */
    min-width: 280px;                 /* Keep a minimum width */
    text-align: center;              /* Center text inside */
    display: block;                  /* Initially visible */
    box-sizing: border-box;         /* Include padding in width calculation */
}

/* Style for the close button ('X') - Kept distinct */
.message-box .close-button {
    /* Positioning */
    position: absolute;
    top: 10px;
    right: 10px;

    /* Appearance */
    background: none; /* No background */
    border: none;     /* No border */
    color: #777;      /* Neutral color for close button */
    font-size: 24px;  /* Larger size for easy clicking */
    font-weight: bold;
    line-height: 1;   /* Ensure tight spacing */
    cursor: pointer;  /* Pointer cursor on hover */
    padding: 5px;     /* Add some clickable area */

    /* Transition for hover effect */
    transition: color 0.2s ease;
}

.message-box .close-button:hover {
    color: #333; /* Darker color on hover */
}

/* Style for headings inside the message box - Aligned */
.message-box h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #2c3e50; /* Match h1 color */
    font-size: 1.3em; /* Base font size */
    font-family: sans-serif; /* Ensure consistent font */
}

/* Style for paragraphs inside the message box - Aligned */
.message-box p {
    margin-bottom: 0;
    line-height: 1.6; /* Match body line-height */
    font-size: 0.95em; /* Base font size */
    font-family: sans-serif; /* Ensure consistent font */
    color: #333; /* Ensure consistent text color */
}

/* Removed media queries as base style.css is not responsive */