/* --- Base Styles --- */
html, body {
    height: 100%; /* Make page full height */
    overflow: hidden; /* *** NEW: Prevent the main body from scrolling *** */
    margin: 0;
    padding: 0;
}

body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    background-color: #f3f4f6;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Brand Colors --- */
:root {
    --brand-50: #ecf5ff;
    --brand-100: #ddeaff;
    --brand-200: #bcdcff;
    --brand-300: #91caff;
    --brand-400: #60aeff;
    --brand-500: #3b8eff;
    --brand-600: #2570eb;
    --brand-700: #1d5ad7;
    --brand-800: #1e4ab4;
    --brand-900: #1e3a8a;
    --brand-950: #172554;
}

/* --- Utility Classes --- */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem; /* max-w-7xl */
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box; /* Ensure padding doesn't break layout */
}
@media (min-width: 640px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
}

.hidden { display: none; }

/* --- Star Rating --- */
.star-filled { color: #f59e0b; }
.star-empty { color: #d1d5db; }

/* --- Header --- */
header {
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}
header nav .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
}
#logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-700);
    cursor: pointer;
    text-decoration: none;
}
.search-bar-desktop {
    display: none; /* Hidden by default */
}
@media (min-width: 768px) {
    .search-bar-desktop {
        display: flex;
        flex: 1;
        margin-left: 2rem;
        margin-right: 2rem;
        max-width: 42rem;
    }
}
.search-bar-desktop .flex {
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #d1d5db;
}
.search-bar-desktop input {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem 0 0 0.5rem;
    border: none;
}
.search-bar-desktop input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--brand-500);
    border-color: transparent;
}
.search-bar-desktop button {
    padding: 0.5rem 1rem;
    background-color: var(--brand-600);
    color: #ffffff;
    border-radius: 0 0.5rem 0.5rem 0;
    border: none;
    cursor: pointer;
}
.search-bar-desktop button:hover { background-color: var(--brand-700); }
.search-bar-desktop button svg { width: 1.25rem; height: 1.25rem; }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-actions .add-business-btn {
    display: none; /* hidden */
}
@media (min-width: 640px) {
    .header-actions .add-business-btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--brand-700);
        background-color: var(--brand-50);
        border: 1px solid var(--brand-200);
        border-radius: 0.5rem;
    }
    .header-actions .add-business-btn:hover { background-color: var(--brand-100); }
}
.header-actions .quick-report-btn {
    display: none; /* hidden on mobile */
}
@media (min-width: 640px) {
    .header-actions .quick-report-btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #ffffff;
        background-color: var(--brand-600);
        border: 1px solid var(--brand-600);
        border-radius: 0.5rem;
        cursor: pointer;
    }
    .header-actions .quick-report-btn:hover { background-color: var(--brand-700); }
}
.header-actions button:not(.quick-report-btn):not(.add-business-btn) {
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.5rem;
    border: none;
    background: none;
}
.header-actions .login-btn { color: #374151; }
.header-actions .login-btn:hover { color: var(--brand-600); }
.header-actions .signup-btn {
    padding: 0.5rem 1rem;
    color: #ffffff;
    background-color: var(--brand-600);
}
.header-actions .signup-btn:hover { background-color: var(--brand-700); }

.mobile-search-btn {
    margin-left: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: #4b5563;
    border: none;
    background: none;
    cursor: pointer;
}
.mobile-search-btn:hover { background-color: #f3f4f6; }
.mobile-search-btn svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 768px) {
    .mobile-search-btn { display: none; }
}

#mobile-search-bar {
    padding: 1rem;
    background-color: #ffffff;
    border-top: 1px solid #e5e7eb;
}
#mobile-search-bar input {
    width: 100%;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    box-sizing: border-box;
}
#mobile-search-bar button {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--brand-600);
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
}
@media (min-width: 768px) {
    #mobile-search-bar { display: none; }
}

/* --- Main Content --- */
/* *** NEW CSS FOR PAGE LAYOUT *** */
main {
    position: absolute;
    top: 4rem; /* Height of the header */
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto; /* Make the <main> element scroll, not the body */
    background-color: #f3f4f6;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-sizing: border-box;
}
/* Put the container *inside* the main element now */
.main-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem; /* max-w-7xl */
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .main-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .main-container { padding-left: 2rem; padding-right: 2rem; }
}


#home-page-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    #home-page-grid { grid-template-columns: repeat(3, 1fr); }
}
.results-column {
    grid-column: span 1 / span 1;
}
@media (min-width: 1024px) {
    .results-column { grid-column: span 2 / span 2; }
}
.map-column {
    grid-column: span 1 / span 1;
}
.map-column > div {
    position: sticky;
    top: 0; /* Sticky to the top of the <main> element */
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 0.5rem;
}
.map-column img {
    border-radius: 0.375rem;
    width: 100%;
    height: 24rem;
    object-fit: cover;
}

/* --- Filters --- */
.filter-box {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}
.filter-box h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; margin-top: 0; }
.filter-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) {
    .filter-grid { grid-template-columns: repeat(4, 1fr); }
}
.filter-grid label { display: flex; align-items: center; gap: 0.5rem; }
.filter-checkbox {
    border-radius: 0.25rem;
    color: var(--brand-600);
}
.filter-checkbox:focus { box-shadow: 0 0 0 2px var(--brand-500); }

/* --- Results --- */
#results-heading {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1f2937;
}
#no-results-message {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    text-align: center;
    color: #4b5563;
    margin-bottom: 1.5rem;
}
#no-results-message h3 { font-size: 1.25rem; font-weight: 600; margin: 0; }
#no-results-message p { margin-top: 0.25rem; }

.result-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.result-card > div {
    display: flex;
    flex-direction: column;
}
@media (min-width: 768px) {
    .result-card > div { flex-direction: row; }
}
.result-card img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
}
@media (min-width: 768px) {
    .result-card img { width: 16rem; height: auto; }
}
.result-card .content { padding: 1.25rem; flex: 1; }
.result-card .content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-800);
    margin: 0;
}
.result-card .content h3 a { text-decoration: none; color: inherit; }
.result-card .content h3 a:hover { text-decoration: underline; }
.result-card .rating { display: flex; align-items: center; margin-top: 0.25rem; }
.result-card .rating span { margin-left: 0.5rem; font-size: 0.875rem; color: #4b5563; }
.result-card .icons { display: flex; gap: 0.75rem; margin-top: 0.75rem; color: #4b5563; }
.result-card .icons div { display: flex; align-items: center; }
.result-card .icons svg { width: 1.25rem; height: 1.25rem; }
.result-card .icons .text-green-600 { color: #16a34a; }
.result-card .icons .text-red-500 { color: #ef4444; }
.result-card .icons span { margin-left: 0.25rem; font-size: 0.875rem; }
.result-card .icons .line-through { text-decoration: line-through; }
.result-card .snippet { color: #374151; font-size: 0.875rem; margin-top: 1rem; font-style: italic; }
.result-card .tags { margin-top: 1rem; }
.result-card .tags span {
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #e5e7eb;
    color: #374151;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    margin-right: 0.5rem;
}

/* --- Details Page --- */
#details-page .main-container { max-width: 80rem; }
#back-to-home {
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-700);
    background-color: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: 0.5rem;
    cursor: pointer;
}
#back-to-home:hover { background-color: var(--brand-100); }
#back-to-home svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; }

#details-page .details-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
#details-page .details-header { padding: 1.5rem; }
@media (min-width: 768px) {
    #details-page .details-header { padding: 2rem; }
}
#details-name { font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; }
#details-page .rating { display: flex; align-items: center; margin-top: 0.5rem; }
#details-page .rating span { margin-left: 0.75rem; font-size: 1.125rem; }
#details-page .rating .stars-lg { color: #4b5563; }
#details-page .rating .reviews-lg { color: #6b7280; }
#details-page .address { margin-top: 1rem; font-size: 1rem; font-weight: 500; color: #374151; }
#write-review-btn {
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--brand-600);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}
#write-review-btn:hover { background-color: var(--brand-700); }
#write-review-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 0.5rem;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
    background-color: #f3f4f6;
    padding: 0.25rem;
}
@media (min-width: 768px) {
    .image-gallery { grid-template-columns: repeat(4, 1fr); }
}
.image-gallery img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 0.25rem;
}

.details-content {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .details-content { padding: 2rem; grid-template-columns: repeat(3, 1fr); }
}
.reviews-column { grid-column: span 1; }
@media (min-width: 768px) {
    .reviews-column { grid-column: span 2; }
}
.reviews-column h3 { font-size: 1.25rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; }
.review-item { border-bottom: 1px solid #e5e7eb; padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.review-item:last-child { border: none; margin: 0; padding: 0; }
.review-user { display: flex; align-items: center; margin-bottom: 0.5rem; }
.review-user img { width: 2.5rem; height: 2.5rem; border-radius: 9999px; margin-right: 0.75rem; }
.review-user .font-semibold { font-weight: 600; }
.review-user .text-sm { font-size: 0.875rem; color: #6b7280; }
.review-item .rating { margin-bottom: 0.5rem; }
.review-item .rating .text-sm { color: #374151; font-weight: 500; }
.review-item p { color: #374151; margin: 0; }

.accessibility-sidebar { grid-column: span 1; }
.accessibility-sidebar > div {
    background-color: #f9fafb;
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}
.accessibility-sidebar h3 { font-size: 1.25rem; font-weight: 600; margin-top: 0; margin-bottom: 1rem; }
.accessibility-sidebar ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.accessibility-sidebar li { display: flex; align-items: center; }
.accessibility-sidebar li svg { width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; }
.accessibility-sidebar li .text-green-600 { color: #16a34a; }
.accessibility-sidebar li .text-red-500 { color: #ef4444; }
.accessibility-sidebar li .text-gray-400 { color: #9ca3af; }

/* --- Review Page --- */
#review-page .main-container { max-width: 56rem; }
#review-form .review-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
#review-form .review-header { padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
#review-form .review-header h2 { font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0; }
#review-form .review-header h3 { font-size: 1.5rem; font-weight: 600; color: var(--brand-700); margin: 0; }

#review-form .review-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    #review-form .review-content { padding: 2rem; }
}
#review-form label { display: block; font-size: 1.125rem; font-weight: 600; color: #1f2937; margin-bottom: 0.5rem; }
#review-form select, #review-form textarea, #review-form input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
#review-form select:focus, #review-form textarea:focus, #review-form input[type="text"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--brand-500);
    border-color: transparent;
}
#quick-report-form input[type="text"], #quick-report-form textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
#quick-report-form input[type="text"]:focus, #quick-report-form textarea:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--brand-500);
    border-color: transparent;
}
#review-form select { width: 100%; }
@media (min-width: 768px) {
    #review-form select { width: 50%; }
}

.feature-list { display: flex; flex-direction: column; gap: 1rem; }
.feature-item {
    background-color: #f9fafb;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}
@media (min-width: 640px) {
    .feature-item { flex-direction: row; align-items: center; justify-content: space-between; }
}
.feature-item .feature-name { font-weight: 500; color: #374151; }
.feature-item fieldset {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    border: none;
    padding: 0;
    margin-left: 0;
}
@media (min-width: 640px) {
    .feature-item fieldset { margin-top: 0; }
}
.feature-item fieldset label { font-size: 1rem; font-weight: 400; display: flex; align-items: center; gap: 0.25rem; }
.feature-item fieldset input {
    border-radius: 9999px;
    color: var(--brand-600);
}
.feature-item fieldset input:focus { box-shadow: 0 0 0 2px var(--brand-500); }

.review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}
.review-actions button {
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
}
#cancel-review-btn {
    color: #374151;
    background-color: #f3f4f6;
}
#cancel-review-btn:hover { background-color: #e5e7eb; }
#submit-review-btn {
    color: #ffffff;
    background-color: var(--brand-600);
}
#submit-review-btn:hover { background-color: var(--brand-700); }
#submit-review-btn:disabled { opacity: 0.5; }

/* --- Simplified Review Form Styles --- */
.location-options, .feature-exists-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.location-option, .feature-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    cursor: pointer;
    background-color: #ffffff;
    transition: all 0.2s;
}
.location-option:hover, .feature-option:hover {
    border-color: var(--brand-500);
    background-color: var(--brand-50);
}
.location-option input[type="radio"], .feature-option input[type="radio"] {
    margin: 0;
    cursor: pointer;
}
.location-option input[type="radio"]:checked + span,
.feature-option input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--brand-700);
}
.location-option:has(input[type="radio"]:checked),
.feature-option:has(input[type="radio"]:checked) {
    border-color: var(--brand-600);
    background-color: var(--brand-50);
}

/* Slider Styles */
.slider-container {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
}
#condition-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: #e5e7eb;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
#condition-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-600);
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#condition-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-600);
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#condition-slider:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--brand-500);
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.slider-value {
    text-align: center;
    margin-top: 0.5rem;
}
.slider-value span {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--brand-600);
    color: #ffffff;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    min-width: 2.5rem;
}

/* Photo Upload Button */
.photo-upload-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-700);
    background-color: var(--brand-50);
    border: 2px solid var(--brand-200);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
.photo-upload-btn:hover {
    background-color: var(--brand-100);
    border-color: var(--brand-300);
}
.photo-upload-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}
.photo-preview {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.photo-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 2px solid #e5e7eb;
}

/* --- Footer --- */
/* *** NEW: Make footer part of the main scrolling content *** */
footer {
    background-color: #1f2937;
    color: #d1d5db;
    margin-top: 3rem;
    padding: 3rem 0;
    /* Remove absolute positioning, let it be part of the flow */
}
footer .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 768px) {
    footer .grid { grid-template-columns: repeat(4, 1fr); }
}
footer h4 { font-weight: 600; color: #ffffff; margin-bottom: 0.75rem; margin-top: 0; }
footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
footer a { text-decoration: none; color: inherit; }
footer a:hover { color: #ffffff; }
footer .copyright {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #4b5563;
    text-align: center;
    font-size: 0.875rem;
}
footer .copyright p { margin: 0; }

/* --- Map Column Heading --- */
.map-column h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* --- Review Form Section Headings --- */
.review-content h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
    margin-top: 0;
}
.review-content .section-description {
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 1rem;
    margin-top: 0;
}

/* --- Modals --- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: #000000;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.modal-content {
    background-color: #ffffff;
    width: 100%;
    max-width: 28rem;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.modal-header h2 { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0; }
.modal-header button {
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
}
.modal-header button:hover { color: #4b5563; }
.modal-header button svg { width: 1.5rem; height: 1.5rem; }

.modal form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}
.modal form input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-sizing: border-box;
}
.modal form input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--brand-500);
    border-color: transparent;
}
.modal form .mb-4 { margin-bottom: 1rem; }
.modal form .mb-6 { margin-bottom: 1.5rem; }
.modal form button[type="submit"] {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #ffffff;
    background-color: var(--brand-600);
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
}
.modal form button[type="submit"]:hover { background-color: var(--brand-700); }

/* Modal transitions */
.modal:not(.hidden) .modal-overlay {
    opacity: 0.5;
}
.modal:not(.hidden) .modal-content {
    transform: scale(1);
}