/* =========================
   GLOBAL & BODY STYLES
   ========================= */
body, html {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: linear-gradient(120deg, #232526 0%, #414345 100%); /* Main background gradient */
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* =========================
   MAIN CONTAINER & FLEX LAYOUT
   ========================= */
.main-flex, .container {
    max-width: 900px;
    margin: 0 auto;
    background: #232946; /* Card background */
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(35, 41, 70, 0.18);
    padding: 48px 40px 40px 40px;
}

/* Main flex layout: notifications left, nav right */
.main-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* Centered EduHub title at top */
.eduhub-title {
    width: 100%;
    text-align: center;
    font-size: 3.2em;
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #fff;
    margin-top: 32px;
    margin-bottom: 32px;
    text-shadow:
        0 4px 24px #232946,
        0 2px 8px #16e0bd,
        0 0 2px #000,
        2px 2px 0 #177ad2;
}

/* =========================
   HEADINGS
   ========================= */
h1, h2, h3 {
    color: #eaeaea;
    font-weight: 700;
    text-shadow: none;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 1px;
}

/* =========================
   SITE TITLE (left and larger for all pages)
   ========================= */
.site-title {
    margin: 0;
    text-align: left;
    color: #fff;
    font-size: 3.2em;
    font-weight: 900;
    letter-spacing: 2.5px;
    padding: 32px 0 0 32px; /* Top padding only, no bottom */
    text-shadow:
        0 4px 24px #232946,
        0 2px 8px #16e0bd,
        0 0 2px #000,
        2px 2px 0 #177ad2;
    flex: 1 1 auto;
    margin-bottom: 4px; /* Even less space below title */
}

/* =========================
   NOTIFICATION SECTION
   ========================= */
.notification-section {
    margin-top: 32px;
    flex: 2;
    min-width: 0;
}
.notification-section h1 {
    color: #16e0bd;
    font-size: 2.4em;
    margin-bottom: 0.2em;
    letter-spacing: 2px;
    font-weight: 700;
    text-shadow: 0 2px 8px #181818;
}
.notification-section h2 {
    color: #177ad2;
    font-size: 1.5em;
    margin-bottom: 1.2em;
    font-weight: 600;
    text-shadow: 0 2px 8px #181818;
}

/* Notifications section left */
.notifications-section {
    flex: 2;
    min-width: 0;
}

/* =========================
   NOTIFICATION ITEM
   ========================= */
.notification-item {
    background: #2e335a;
    border-radius: 14px;
    margin-bottom: 32px;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(23, 122, 210, 0.08);
}
.notification-title {
    font-size: 1.2em;
    margin-bottom: 8px;
    color: #16e0bd;
    font-weight: 600;
    letter-spacing: 1px;
}
.notification-link {
    color: #177ad2;
    text-decoration: underline;
    font-size: 1.08em;
    font-weight: 600;
    transition: color 0.2s, background 0.2s;
}
.notification-link:hover {
    color: #fff;
    background: #177ad2;
    border-radius: 4px;
    padding: 2px 6px;
    text-decoration: none;
}
.notification-summary {
    margin-top: 10px;
    color: #eaeaea;
    font-size: 1em;
    line-height: 1.6;
    font-weight: 500;
    text-shadow: 0 1px 4px #181818;
}

/* =========================
   NAVIGATION BAR
   ========================= */
nav {
    text-align: center;
    margin-bottom: 32px;
}
.nav-link {
    display: inline-block;
    margin: 0 18px;
    font-size: 1.1em;
    text-decoration: none;
    color: #a18cd1;
    padding: 8px 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    transition: background 0.2s, color 0.2s;
}
.nav-link:hover {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    color: #fff;
}

/* Navigation section right */
.nav-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 18px;
    margin-top: 32px;
}

.nav-section .nav-link {
    display: block;
    width: 160px;
    margin-bottom: 12px;
    padding: 14px 0;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px #181818;
    transition: background 0.2s, color 0.2s;
}
.nav-section .nav-link:hover {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    color: #fff;
}

/* =========================
   FORM ELEMENTS (GENERAL)
   ========================= */
/* These are general styles for ALL inputs/textareas/buttons/selects unless overridden */
input, textarea, button, select {
    width: 100%;
    margin-bottom: 16px; /* Default margin for most form elements */
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #6a11cb;
    font-size: 1em;
    background: #23204a;
    color: #f3f6fd;
    outline: none;
    box-sizing: border-box;
}
input:focus, textarea:focus, select:focus {
    border-color: #2575fc;
    background: #2d295c;
}
textarea {
    min-height: 100px;
    resize: vertical;
}
button {
    background: linear-gradient(90deg, #2575fc 0%, #6a11cb 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 400;
}
button:hover {
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
}

/* =========================
   LINKS & PARAGRAPHS
   ========================= */
a {
    color: #a18cd1;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: #fff;
}
p {
    color: #f3f6fd;
    text-align: left; /* Changed from center to left for review content */
    font-size: 1.1em;
    font-weight: 400;
    margin-bottom: 8px; /* Added margin for spacing with meta */
}

/* =========================
   PLACEHOLDER STYLES
   ========================= */
::-webkit-input-placeholder { color: #a18cd1; }
::-moz-placeholder { color: #a18cd1; }
:-ms-input-placeholder { color: #a18cd1; }
::placeholder { color: #a18cd1; }

/* =========================
   SITE HEADER & HOME LINK
   ========================= */
.site-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px 0 32px;
    box-sizing: border-box;
    position: relative;
}
.home-link {
    background: #7c6eaa;
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    box-shadow: 0 2px 8px #3a3a7c;
    transition: background 0.2s;
}

/* =========================
   TOP LEFT NAVIGATION
   ========================= */
.top-left-nav {
    position: absolute;
    top: 24px;
    left: 32px;
}
.top-left-nav .nav-link {
    background: #7c6eaa;
    color: #fff;
    padding: 10px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    box-shadow: 0 2px 8px #3a3a7c;
}

/* =========================
   SIDE NAVIGATION
   ========================= */
.side-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 60px;
    gap: 18px;
}
.side-nav .nav-link {
    display: block;
    width: 180px;
    margin-bottom: 18px;
    padding: 14px 0;
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    color: #232946;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    box-shadow: 0 2px 8px #181818;
    transition: background 0.2s, color 0.2s;
    text-align: center;
    font-family: inherit;
    font-weight: 700;
    border: none;
    letter-spacing: 1px;
}
.side-nav .nav-link:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}

/* =========================
   THANK YOU PAGE STYLES
   ========================= */
.left-nav, .thank-box {
    background: #232946;
    color: #eaeaea;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.left-nav a, .delayed-buttons a {
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    padding: 12px 0;
}
.left-nav a:hover, .delayed-buttons a:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #232946;
}
.thank-box {
    flex: 1;
    padding: 40px 30px;
    margin: 0 20px;
    min-width: 300px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.thank-box h1 {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #16e0bd;
}
.thank-box p {
    margin: 8px 0;
    color: #eaeaea;
}
.delayed-buttons {
    display: none;
    flex-direction: column;
    gap: 14px;
    margin-top: 30px;
    animation: fadeInUp 1s ease;
}
.delayed-buttons.show {
    display: flex;
    animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.right-instagram {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.right-instagram .insta-btn {
    background: linear-gradient(45deg, #6d2177 0%, #833ab4 40%, #fd1d1d 80%, #b24592 100%) !important;
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(131, 58, 180, 0.18), 0 2px 8px #3a3a7c;
    cursor: pointer;
    transition:
        background 0.3s,
        color 0.3s,
        box-shadow 0.3s,
        filter 0.3s;
    margin-top: 8px;
    letter-spacing: 1px;
}

.right-instagram .insta-btn:hover {
    filter: brightness(1.18) saturate(1.2);
    box-shadow: 0 8px 32px 0 #fd1d1d55, 0 2px 8px #3a3a7c;
}

/* =========================
   PROFILE BOX STYLES
   ========================= */
.profile-box {
    background: #2e335a;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(23, 122, 210, 0.08);
    padding: 32px 32px 28px 32px;
    text-align: center;
    min-width: 320px;
}
.profile-box h2 {
    color: #16e0bd; /* Site accent blue-green */
    margin-bottom: 8px;
    font-size: 1.5em;
    font-weight: 700;
}
.profile-box .role {
    color: #fff;
    font-size: 1.1em;
    margin-bottom: 6px;
}
.profile-box .email {
    color: #a18cd1;
    font-size: 1em;
    margin-bottom: 16px;
    word-break: break-all;
}
.profile-box .insta-btn {
    background: linear-gradient(45deg, #6d2177 0%, #833ab4 40%, #fd1d1d 80%, #b24592 100%);
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 4px 16px rgba(131, 58, 180, 0.18), 0 2px 8px #3a3a7c;
    cursor: pointer;
    transition:
        background 0.3s,
        color 0.3s,
        box-shadow 0.3s,
        filter 0.3s;
    margin-top: 8px;
    letter-spacing: 1px;
}
.profile-box .insta-btn:hover {
    filter: brightness(1.18) saturate(1.2);
    box-shadow: 0 8px 32px 0 #fd1d1d55, 0 2px 8px #3a3a7c;
}

/* =========================
   PROFILE SIDE BOX STYLES
   ========================= */
.profile-side-box {
    position: fixed;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 2000;
    width: 270px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media (max-width: 1100px) {
    .profile-side-box {
        position: static;
        transform: none;
        width: 100%;
        align-items: center;
        margin: 32px 0 0 0;
    }
}

/* =========================
   CONTACT PAGE FLEX LAYOUT
   ========================= */
.contact-flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.container {
    flex: 1 1 500px;
    max-width: 540px;
    min-width: 320px;
}

.profile-side-box {
    position: static;
    transform: none;
    width: 270px;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* =========================
   RESPONSIVE DESIGN (GENERAL)
   ========================= */
@media (max-width: 900px) {
    .main-flex, .container {
        padding: 18px 4vw;
    }
    .main-flex {
        flex-direction: column;
        gap: 0;
    }
    .left-nav, .right-instagram {
        margin: 0 auto 20px auto;
    }
    .thank-box {
        margin: 0 auto 20px auto;
    }
    .contact-flex {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .profile-side-box {
        width: 100%;
        align-items: center;
        margin-top: 32px;
    }
}

/* For syllabus grid spacing */
.syllabus-grid {
    display: flex;
    justify-content: space-between;
    margin-top: 48px;
    gap: 32px;
}
.syllabus-left, .syllabus-right {
    width: 48%;
    background: #232946;
    border-radius: 16px;
    padding: 32px 20px;
    box-shadow: 0 2px 12px rgba(35,41,70,0.10);
}

/* For contact form spacing */
.container form {
    max-width: 500px;
    margin: 0 auto;
    padding: 32px 24px;
    background: #2e335a;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(23, 122, 210, 0.08);
}
.container input,
.container textarea,
.container button {
    margin-bottom: 20px;
    font-size: 1.08em;
}

/* Make file input button colorful */
input[type="file"]::file-selector-button {
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}


/* =========================
   SITE HEADER NAV GROUPING
   ========================= */
.nav-header-right {
    display: flex;
    align-items: center;
    gap: 18px;
    position: absolute;
    top: 24px;
    right: 32px;
}

.home-link,
.dropdown-btn {
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    color: #232946;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    box-shadow: 0 2px 8px #3a3a7c;
    border: none;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    transition: background 0.3s, color 0.3s;
    text-decoration: none;
    cursor: pointer;
}

.home-link:hover,
.dropdown-btn:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}

/* =========================
   EXPLORE DROPDOWN NAV
   ========================= */
.dropdown-nav {
    position: relative;
}

.dropdown-btn {
    background: linear-gradient(90deg, #16e0bd, #177ad2);
    color: #232946;
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.dropdown-btn:hover {
    background: linear-gradient(90deg, #177ad2, #16e0bd);
    color: #fff;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #2e335a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    min-width: 220px;
    text-align: left;
    padding: 12px 0;
}

.dropdown-content a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background-color: #177ad2;
}

.dropdown-nav.show .dropdown-content {
    display: block;
}

.profile-center-flex {
    min-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Minimal space below the title for about and contact pages */
body.contact .container,
body.about .container,
body.contact .contact-flex,
body.about .contact-flex {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.contact .container,
body.about .container {
    margin-top: 0 !important;
    padding-top: 16px !important;
}

body.contact .profile-center-flex,
body.about .profile-center-flex {
    min-height: 0 !important;
}

/* Remove default 48px margin from .container and .contact-flex for all pages */
.container,
.contact-flex {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

/* Make file input button colorful */
input[type="file"]::file-selector-button {
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

input[type="file"]::file-selector-button:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}


/* =========================
   REVIEW PAGE STYLES (New/Modified for Spacing)
   ========================= */

.review-layout {
    display: flex;
    gap: 32px;
    padding: 32px;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Left side: Reviews (75%) */
.reviews-section {
    flex: 3;
}

/* Right side: Post a Review Form (25%) */
.review-form-section {
    flex: 1;
    background: #2e335a;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(23, 122, 210, 0.08);
}

/* Apply Flexbox to the form within the review-form-section for consistent vertical spacing */
.review-form-section form {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 15px; /* Add 15px space between all direct children of the form */
}

/* Override general input/select/textarea/button margins within this specific form */
.review-form-section form input,
.review-form-section form textarea,
.review-form-section form select,
.review-form-section form button {
    margin-bottom: 0; /* Let the 'gap' property on the parent form handle spacing */
}

/* Ensure labels take their own line and don't add extra margins for proper stacking */
.review-form-section form label {
    display: block; /* Make labels block-level */
    margin-top: 0; /* Remove default/inherited top margin */
    margin-bottom: 0; /* Remove default/inherited bottom margin */
    color: #f3f6fd; /* Ensure consistent text color */
}

/* Adjust radio group specifically if needed (though 'gap' on form should handle its spacing well) */
.review-form-section .radio-group {
    margin-bottom: 0; /* Let form's gap manage spacing here */
}

/* Specific adjustment for the name input container's internal spacing if needed */
#name-input-container-main-review {
    /* If you want additional space only when this container is shown, before the next label,
       you can add: margin-bottom: 10px; here. Otherwise, the form's gap handles it. */
    margin-top: 0; /* Let form's gap manage spacing */
}


/* Individual review card */
.review-card {
    background: #232946;
    padding: 20px;
    margin-bottom: 24px;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(23, 122, 210, 0.08);
}

.review-card h3 {
    color: #16e0bd;
    font-size: 1.3em;
    margin-bottom: 8px;
    text-align: left;
}

.review-card .meta {
    font-size: 0.9em;
    color: #a18cd1;
    margin-bottom: 12px;
    text-align: left;
}

/* Comments block */
.comments-block {
    margin-top: 12px;
    border-left: 2px solid #16e0bd;
    padding-left: 12px;
}

/* Base Comment Styling */
.comment {
    background: #2d2f5a;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    position: relative; /* For reply forms */
}

/* Nested Comment (Reply) Styling */
.comment.is-reply {
    margin-left: 20px; /* Indent replies */
    background: #3e416a; /* Slightly different background for replies */
    border-left: 2px solid #177ad2; /* Different border for replies */
    padding-left: 15px; /* Adjust padding for new border */
}

.comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    color: #a18cd1;
    margin-bottom: 5px;
}

.comment-author {
    font-weight: bold;
    color: #f3f6fd;
}

.comment p {
    color: #f3f6fd;
    text-align: left;
    font-size: 1em;
    margin-bottom: 5px; /* Space between text and reply button */
}

.comment small {
    display: block;
    color: #a18cd1;
    margin-top: 4px;
}

/* Reply Button inside a comment */
.comment button {
    width: auto;
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    padding: 4px 10px; /* Smaller padding for reply button */
    font-size: 0.85em;
    border-radius: 6px;
    margin-top: 5px; /* Space from comment text */
    margin-bottom: 5px; /* Space from reply form */
}

.comment button:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}

/* Container for nested replies */
.comment-replies {
    margin-top: 10px;
    /* Removed padding-left and border, individual replies handle their own indenting */
}

/* Comment and reply forms */
.comment-form,
.reply-form {
    margin-top: 10px;
    gap: 8px;
    /* Added some padding to forms for better look */
    padding: 15px;
    border-radius: 10px;
    background: #3a3f6f; /* Slightly darker background for forms */
    margin-left: 0; /* Ensure top-level forms are not indented */
}

/* Specific styling for reply forms */
.reply-form {
    margin-top: 10px;
    /* Ensure the reply form aligns with the parent comment's indentation */
    margin-left: 0; /* Resetting here, will be inside a comment which has padding */
    background: #42477a; /* Even darker for nested forms */
}


/* Buttons inside cards (general buttons, not reply buttons) */
.review-card button { /* Affects Show Comments, Add a Comment */
    width: auto;
    background: linear-gradient(90deg, #16e0bd 0%, #177ad2 100%);
    padding: 6px 14px;
    font-size: 0.95em;
    border-radius: 8px;
    margin-top: 10px;
}

.review-card button:hover {
    background: linear-gradient(90deg, #177ad2 0%, #16e0bd 100%);
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .review-layout {
        flex-direction: column;
        padding: 16px;
    }
    .reviews-section, .review-form-section {
        width: 100%;
    }
}

/* Radio Button Styling */
.radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 16px; /* Existing margin-bottom is kept here but might be overridden by form gap */
    justify-content: flex-start;
    align-items: center;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f3f6fd;
    margin-bottom: 0;
}

.radio-group input[type="radio"] {
    width: auto;
    margin-bottom: 0;
    margin-right: 0;
    vertical-align: middle;
}

/* NEW: Vertical Radio Group for Comments */
.radio-group.vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
    width: auto;
}
.radio-group.vertical label {
    margin-bottom: 0;
}
.radio-group.vertical [id^="name-input-container-"] {
    margin-top: 8px;
    width: 100%;
}

/* NEW: Comment Form Grid Layout */
.comment-form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    align-items: flex-start;
    margin-top: 10px;
}

.comment-textarea-and-button {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.comment-textarea-and-button textarea {
    margin-bottom: 0;
}
.comment-textarea-and-button button {
    width: 100%;
    margin-top: 0;
}

/* Responsive adjustment for comment form grid */
@media (max-width: 600px) {
    .comment-form-grid {
        grid-template-columns: 1fr; /* Stack vertically on smaller screens */
    }
    .radio-group.vertical {
        flex-direction: row; /* Go back to horizontal for smaller screens, if desired */
        flex-wrap: wrap; /* Allow wrapping */
        gap: 15px;
        margin-bottom: 10px;
    }
    .radio-group.vertical label {
        margin-bottom: 0;
    }
    .radio-group.vertical [id^="name-input-container-"] {
        width: 100%; /* Make name input full width */
    }
}

/* Center the updating message content */
.updating-section {
    text-align: center;
    padding: 60px 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* Optional: Slight enhancements */
.updating-section h1 {
    font-size: 2.5em;
    color: #16e0bd;
    margin-bottom: 20px;
}

.updating-section p {
    font-size: 1.1em;
    margin: 12px 0;
    color: #f3f6fd;
}

/* Center footer text */
.site-footer {
    text-align: center;
    padding: 20px;
    background-color: transparent; /* or match your page theme */
    color: #f3f6fd;
    font-size: 0.95em;
}