/* ========================================================================== */
/* 1. GLOBAL & BASE STYLES                          				          */
/* Applies to all elements and sets foundational styles.                      */
/* ========================================================================== */

/* Universal Box-Sizing Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Base Body Styles - This is the *only* place body styles should be defined for core spacing */
body {
    background-color: #2e0155; /* Overall app background color (dark purple) */
    font-family: monospace;
    font-size: 16px;
    padding-top: 80px; /* Space for the fixed navbar */
    min-height: 100vh; /* Ensure body covers full viewport height */
    color: #333; /* Default text color for general content (overridden by specific sections) */
}

/* Horizontal Rule (Divider) */
hr {
    color: #6B0686; /* Purple color */
    border-top: 2px solid #6B0686; /* Solid top border */
    width: 100%; /* Full width */
    margin: 20px auto; /* Centered with vertical spacing */
}

/* Screen Reader Only (Accessibility) */
.sr-only { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ========================================================================== */
/* 2. REUSABLE UI COMPONENTS                                                  */
/* Styles for components that are used across multiple pages.                 */
/* ========================================================================== */

/* --- 2.1. Navbar & Mobile Menu Styles --- */

.navbar {
    width: 100%;
    height: 80px; /* Match body's padding-top */
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 4%;
    background: #2e0155; /* Your dark purple */
    z-index: 9; /* Ensure it stays on top of other content */
    display: flex;
    justify-content: space-between; /* Space out brand, links, button */
    align-items: center; /* Vertically center items */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.navbar-brand-link { /* New class for the brand logo link */
    height: 100%; /* Make clickable area match navbar height */
    display: flex;
    align-items: center;
}

.navbar .brand-logo {
    height: 40px; /* Adjust logo size */
    width: auto;
    border-radius: 8px;
    margin-right: 20px; /* Space between logo and nav links */
}

/* Default Nav Links (Desktop) */
.nav-links {
    list-style: none;
    display: flex; /* Display horizontally by default */
    margin: 0;
    padding: 0;
}

.nav-items {
    margin-left: 20px; /* Space between nav items */
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    opacity: 0.9;
}

.nav-links a:hover {
    background-color: #555;
    text-decoration: underline 2px solid whitesmoke;
    text-underline-offset: 10px;
}

/* Right Container (Desktop) */
.right-container {
    display: flex; /* Use flex to align button if there were multiple items */
    align-items: center;
    margin-left: auto; /* Pushes it to the far right */
}

/* HAMBURGER MENU ICON (Hidden by default on desktop) */
.hamburger-menu {
    display: none; /* Hidden on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 10; /* Ensure it's above other elements if needed */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Optional: Hamburger icon animation when open */
.hamburger-menu.open .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}
.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.open .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-225deg);
}

/* MOBILE MENU CONTAINER (Hidden by default) */
.mobile-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    position: fixed; /* Position fixed relative to viewport */
    top: 80px; /* Starts right below the fixed navbar */
    left: 0;
    width: 100%;
    background-color: #2e0155; /* Same background as navbar */
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 8; /* Below navbar, above page content */
    /* Optional: Transition for smooth appearance */
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateY(-100%); /* Start off-screen above */
    opacity: 0;
}

.mobile-menu.active {
    display: flex; /* Show when active */
    transform: translateY(0); /* Slide into view */
    opacity: 1;
}

.mobile-menu .nav-links {
    display: flex;
    flex-direction: column; /* Stack links vertically in mobile menu */
    align-items: center; /* Center links horizontally */
    width: 100%;
    margin-bottom: 20px;
}

.mobile-menu .nav-items {
    margin: 10px 0; /* Vertical spacing for stacked links */
}

.mobile-menu .right-container {
    width: 100%;
    justify-content: center; /* Center the button in the mobile menu */
    margin-left: 0; /* Override auto margin for centering */
    margin-right: 0;
}

/* --- 2.2. General Button Styles --- */

.new-claim-button {
    background-color: lightseagreen;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 8px; /* Rounded corners */
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 0px; /* Adjusted margin to zero for tight placement on mobile */
}

.new-claim-button:hover {
    background-color: #8A08A4;
    transform: translateY(-2px);
}

.btn { /* Base style for all form buttons */
    padding: 8px 18px; /* Adjusted padding */
    border: none;
    border-radius: 5px;
    font-size: 14px; /* Adjusted font size */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    margin: 0 8px; /* Space between buttons */
    min-width: 100px; /* Ensure buttons have a minimum width */
}

.btn-primary { /* Primary action button style (e.g., Login, Recover) */
    background-color: #4CAF50; /* A standard green color */
    color: white;
}

.btn-primary:hover {
    background-color: #45a049;
    transform: translateY(-1px);
}

.btn-secondary { /* Secondary action button style (e.g., Clear, Reset) */
    background-color: #f44336; /* Red */
    color: white;
}

.btn-secondary:hover {
    background-color: #da190b;
    transform: translateY(-1px);
}

.btn-link { /* General button style for links that act as buttons (e.g., Claim ID link) */
    background: none;
    border: none;
    padding: 0;
    font-size: inherit; /* Inherit font size from cell */
    color: #6B0686; /* Purple link color */
    text-decoration: underline; /* Underline for link appearance */
    cursor: pointer;
    text-align: left; /* Align button text to left */
}

.btn-link:hover {
    color: #4b045f; /* Darker purple on hover */
    text-decoration: none;
}

/* --- 2.3. Message Styles --- */

.message {
    padding: 12px;
    margin-bottom: 20px; /* Space below message */
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
}

.message.error {
    background-color: #ffe6e6; /* Light red background */
    color: #cc0000; /* Dark red text */
    border: 1px solid #ffb3b3;
}

.message.success {
    background-color: #e6ffe6; /* Light green background */
    color: #008000; /* Dark green text */
    border: 1px solid #b3ffb3;
}

/* --- 2.4. Helper Links Styles --- */

.login-help-links {
    margin-top: 20px;
    font-size: 14px;
}

.login-help-links p {
    margin-bottom: 5px; /* Space between links */
}

.login-help-links .link-text {
    color: #6B0686; /* Purple color for links */
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.login-help-links .link-text:hover {
    text-decoration: underline;
}

/* --- 2.5. Reusable Page & Content Containers --- */

/* --- Base Page Container Styles (Reusable for Login, Recover, Reset, etc.) --- */
/* This container wraps the main content (title + card) and gives it background */
.page-container {
    background-color: lightseagreen; /* Background for the main content area of this page */
    padding-top: 50px; /* Space below navbar, adjust as needed */
    padding-bottom: 50px; /* Space above footer, adjust as needed */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    justify-content: flex-start; /* Aligns content from the top */
    /* min-height calculation ensures background fills the screen even if content is short */
    min-height: calc(100vh - 80px - 90px); /* Adjust (100vh - navbar_height - footer_height) */
}

.content-card { /* Reusable card for general content (wider, text-heavy pages like About Us) */
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 900px; /* Wider for content pages */
    width: 90%;
    margin: auto;
    text-align: center; /* Default text align */
    line-height: 1.6;
    color: #333;
}

/* --- Form Card Styles (Reusable for Login, Recover, Reset forms) --- */
/* This is the white card that holds the form */
.form-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Softer shadow */
    max-width: 400px; /* Max width for larger screens */
    width: 90%; /* Responsive width for smaller screens */
    text-align: center; /* Center inline content within the card */
    margin: auto; /* For centering the card within a flex container like .page-container */
}

/* Style for h1 inside any form card (e.g., "Login", "Recover User Name") */
.form-card h1 { 
    color: #2e0155; /* Navbar purple for heading */
    font-size: 32px;
    margin-bottom: 25px;
    font-variant: small-caps; /* Use if desired, otherwise remove for regular case */
    font-weight: bolder;
}

/* --- 2.6. Base Form Element Styles --- */

/* --- Base Form Styles (Reusable for all forms: login-form, recovery-form, etc.) --- */
.base-form { 
    width: 100%; /* Ensure form takes full width of its parent card */
}

.base-form .form-group {
    margin-bottom: 10px; /* Space between form fields */
}

.base-form .form-label { /* Style for labels above input fields */
    display: block; /* Make label a block to put input on next line */
    text-align: left; /* Align label text to left */
    margin-bottom: 2px; /* Space between label and input */
    color: #333; /* Dark color for labels on white background */
    font-weight: bold;
    font-size: 14px;
}

.base-form .form-input { /* Style for text and password input fields */
    width: 100%; /* Take full width of parent group */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* Ensures padding doesn't increase total width */
    outline: none; /* Remove default blue outline on focus */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.base-form .form-input:focus {
    border-color: #6B0686; /* Purple border on focus */
    box-shadow: 0 0 0 3px rgba(107, 6, 134, 0.2); /* Light purple glow on focus */
}

/* Container for buttons within the form */
.base-form .form-actions {
    margin-top: 25px;
}

/* Specific styles for half-width inputs */
.half-input-container {
    display: flex;
    justify-content: space-between;
    gap: 8px; /* Space between half inputs */
    flex-wrap: wrap; /* Allow wrapping on very small screens */
}

.half-input-wrapper {
    flex: 1; /* Allows half inputs to grow */
    min-width: 130px; /* Ensures they don't get too small before wrapping */
}

.half-input { /* Already defined with .form-input, just ensures max-width */
    max-width: none; /* Override any max-width set by the old .half-input */
}

/* Terms of Use checkbox styling */
.checkbox-group {
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: left;
}
.checkbox-group input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Make checkbox slightly larger */
}
.checkbox-group .checkbox-label span {
    font-size: 14px;
    color: #555;
}

/* Placeholder styles (global, but apply within specific elements if needed) */
::placeholder {
    color: #000;
    opacity: 1;
}

/* Wrapper for password input and toggle button */
.password-input-wrapper {
    position: relative; /* Needed for absolute positioning of the toggle button */
    width: 100%; /* Ensure it takes full width within its form-group */
}

/* Adjust padding of the input field to make space for the button */
.password-input-wrapper .form-input {
    padding-right: 45px; /* Make space for the toggle button */
}

/* Style for the Show/Hide password button */
.password-toggle-btn {
    position: absolute;
    right: 5px; /* Position from the right edge of the wrapper */
    top: 50%; /* Center vertically within the wrapper */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    background: none; /* No background */
    border: none; /* No border */
    color: #6B0686; /* Purple color for the toggle text */
    font-size: 0.9em; /* Slightly smaller font size */
    cursor: pointer;
    padding: 5px; /* Small padding for clickable area */
    z-index: 2; /* Ensure it's above the input field if there are overlapping styles */
    min-width: unset; /* Override base .btn min-width */
    margin: 0; /* Override base .btn margin */
    font-family: Arial, sans-serif; /* Consistent font */
}

.password-toggle-btn:hover {
    text-decoration: underline;
}

/* --- 2.7. Contact Us Section Styles (Reusable for multiple pages) --- */
.contact-us-section {
    background-color: #2e0155; /* Match body/navbar purple for this section */
    color: aliceblue; /* Default text color for this section */
    padding: 40px 20px; /* Adjust padding as needed */
    text-align: center;
    margin-top: 50px; /* Space above this section, adjust if needed */
    width: 100%; /* Ensure it spans full width */
    box-sizing: border-box; /* Include padding in width */
}

.contact-us-section .contact-text { /* Specific styling for the paragraph */
    color: aliceblue; /* Ensures it's visible against the purple background */
    font-size: 18px; /* Adjust font size */
    margin-bottom: 20px; /* Space below the text */
}

.contact-us-section .email-button-container {
    display: flex;
    justify-content: center;
}

.contact-us-section .send-email-button {
    padding: 12px 25px;
    background-color: lightseagreen; /* Example color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.contact-us-section .send-email-button:hover {
    background-color: #3cb371; /* Slightly darker teal on hover */
    transform: translateY(-1px);
}

/* ========================================================================== */
/* 3. PAGE-SPECIFIC LAYOUTS                                                   */
/* Styles for content areas specific to individual pages.                     */
/* ========================================================================== */

/* --- 3.1. Homepage (index.php) Styles --- */

.main-content-area {
    background-color: lightseagreen;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    padding-top: 0;
    margin-top: 0px;
    flex-grow: 1; /* This helps it take up available space if its parent is a flex container */
}

.homepage-title {
    color: #2e0155;
    font-size: 45px;
    font-weight: bolder;
    font-variant: small-caps;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Responsive image sizing for the main logo */
.main-logo {
    max-width: 100%; /* Ensures image scales down on smaller screens */
    height: auto; /* Maintains aspect ratio */
    width: 500px; /* Optional: Set a max-width for larger screens if desired */
    cursor: pointer;
    border-radius: 15px; /* Adding rounded corners for modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adding a subtle shadow */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.main-logo:hover {
    transform: scale(1.02);
}

.homepage-paragraph {
    color: aliceblue;
    font-size: 25px;
    font-weight: bolder;
    font-variant: small-caps;
}

.homepage-h2 {
    color: #6B0686;
    font-size: 35px;
    font-variant: small-caps;
    font-weight: bolder;
    margin-bottom: auto;
    text-align: center;
}

/* --- 3.2. Login Page (UserLogin.php) Styles --- */

.login-page-container {
    /* Inherits general page layout from .page-container */
    background-color: lightseagreen; /* Specific: Overrides .page-container's background-color: transparent */
}

.login-card {
    /* Inherits general form card styling from .form-card */
    /* Add specific styles here if this login card needs to look different from other forms */
    /* Example: border: 2px solid blue; */
}

.login-card h1 {
    /* Inherits default H1 styling within form cards from .form-card h1 */
    /* Add specific styles here if this H1 needs to look different from other form H1s */
    /* Example: font-size: 26px; */
}

.login-form {
    /* Inherits base form styling from .base-form */
    /* Add specific styles here if this login form needs unique layout/appearance */
    /* Example: margin-top: 10px; */
}

/* --- 3.3. Create User Page (UserCreate.php) Styles --- */

.create-user-page-container { /* Extends .page-container */
    background-color: lightseagreen; /* Specific background for create user page */
}

.create-user-card { /* Extends .form-card, but with custom width */
    max-width: 900px; /* Wider for two-column layout */
    /* ... other styles from .form-card inherited ... */
}

.create-user-card h1 { /* Overrides general .form-card h1 */
    /* ... */
}

.create-user-form-container { /* Container for the two-column layout (form panel + map) */
    display: flex;
    flex-direction: column; /* Default to column on small screens */
    gap: 20px; /* Space between panel and map */
    width: 100%;
}

.create-user-panel { /* Style for the left panel containing the form inputs */
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form groups */
    flex: 1; /* Allows it to grow in flex container */
    border-radius: 8px; /* Consistent rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow for inner panel */
}

/* Style for the map container */
.create-user-map {
    width: 100%; /* Default full width on mobile */
    min-height: 300px; /* Minimum height for the map */
    border-radius: 8px; /* Consistent rounded corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow */
    flex: 1; /* Allows it to grow in flex container */
}

/* --- 3.4. Recover/Reset Status Page Styles --- */

.recover-status-page-container { /* Extends .page-container */
    /* Specific padding/margins if needed */
}

.message-card { /* Extends .form-card */
    max-width: 500px; /* Slightly wider than login card for messages */
    /* ... other styles from .form-card inherited ... */
}

.message-card h1 { /* Overrides general .form-card h1 */
    /* ... */
}

/* --- 3.5. Claims Page (Claims.php) Styles --- */

.claims-page-container { /* Extends .page-container */
    /* Specific padding/margins if needed for this page */
}

.claims-card { /* Extends .content-card */
    max-width: 1200px; /* Example: allow claims table to be wider */
    /* ... other styles from .content-card inherited ... */
}

/* Wrapper for responsive tables */
.claims-table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: none; /* Remove box-shadow as cards will have it */
    background-color: transparent; /* Allow main page background to show through */
    padding: 0; /* Remove padding here */
}

/* Styling for the claims table */
.claims-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.claims-table th, .claims-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #333;
}

.claims-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
    font-size: 13px;
    border-bottom: 2px solid #b0b0b0; /* Stronger border below headers */
}

.claims-table tbody tr:hover {
    background-color: #e0e0e0; /* Subtle hover effect on rows */
}

/* Message for no claims filed */
.no-claims-message {
    font-size: 18px;
    color: #666;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

/* Action links below the table (e.g., "File a New Claim", "Go to Account") */
.claims-action-links {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Claims table sort controls */
.claims-sort-controls {
    margin-bottom: 20px;
    padding: 0; /* Remove padding from outer container */
    background-color: transparent; /* Remove background from outer container */
    border-radius: 0; /* Remove border-radius */
    box-shadow: none; /* Remove box-shadow */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Gap between sort cards */
    flex-wrap: wrap;
}

.sort-form {
    display: flex;
    flex-direction: column; /* Stack cards vertically */
    gap: 15px; /* Space between sort cards */
    width: 100%;
    max-width: 320px; /* Limit total width of stacked cards */
    justify-content: center;
    align-items: center;
    padding: 15px; /* Padding inside the sort form container */
    box-sizing: border-box;
}

.sort-option-group {
    display: flex;
    flex-direction: column; /* Stack label above select */
    align-items: center; /* Center label/select horizontally in card */
    gap: 8px; /* Space between label and select */
    background-color: #f2f2f2; /* Grey background for each sort card */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px 20px;
    width: 100%; /* Card takes full width of parent (up to max-width) */
    box-sizing: border-box;
    height: auto;
    justify-content: center; /* Vertically center content */
}

.sort-option-group label {
    font-weight: bold;
    color: #2e0155; /* Purple for labels */
}

.sort-option-group select {
    width: 220px; /* Fixed width */
    height: 40px; /* Fixed height */
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    background-color: white;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2C114.7L159.2%2C242.5c-3.7%2C3.7-8.8%2C5.8-14.2%2C5.8s-10.5-2.1-14.2-5.8L5.4%2C114.7C0%2C109.3%2C0%2C99.8%2C5.4%2C94.4c5.4-5.4%2C14.2-5.4%2C19.6%2C0l124.2%2C124.2l124.2-124.2c5.4-5.4%2C14.2-5.4%2C19.6%2C0C292.4%2C99.8%2C292.4%2C109.3%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E'); /* Custom dropdown arrow */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    padding-right: 30px;
}

/* Zebra Striping: Alternating row colors (for general table, not cards) */
.claims-table tbody tr:nth-child(odd) {
    background-color: #F0E6FA; /* A very light gray for odd rows */
}

.claims-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}

/* Ensure no default background for table rows themselves, let card style apply */
/* .claims-table tbody tr { background-color: transparent; } /* This rule will be needed in mobile media query */
/*
.claims-table tbody tr:nth-child(odd),
.claims-table tbody tr:nth-child(even) {
    background-color: transparent;
}
*/

/* --- 3.6. Password Update Page Styles --- */
.password-update-page-container { /* Extends .page-container */
    /* Add any specific padding/margins if needed for this page */
}

/* --- 3.7. About Us Page Styles --- */

.about-us-page-container { /* Extends .page-container */
    /* Add any specific padding/margins if needed for About Us page */
}

.about-us-card { /* Extends .content-card */
    /* No specific changes here if .content-card is sufficient */
}

.about-us-card h1 { /* Main title within the card */
    /* ... */
}

.about-us-card h2 { /* Section titles within the card */
    /* ... */
}

.about-intro-paragraph {
    /* ... */
}

.about-services-list {
    /* ... */
}

.about-services-list li {
    /* ... */
}

.about-services-list li strong {
    /* ... */
}

/* --- 3.8. UserAccount.php Specific Styles --- */

/* Reusing .page-container for the overall page layout */
.user-account-page-container {
    background-color: lightseagreen; /* Specific background for account page */
    /* Add any specific padding/margins if needed for this page */
}

/* Reusing .content-card for the main card that holds account information */
.account-info-card {
    /* Adjust max width if account info table needs more or less width */
    max-width: 800px; /* Example: adjust for wider content display */
    width: 95%; /* Responsive width */
    text-align: center; /* Default text align for details */
    
    /* NEW: Enhance the main card's shadow for more depth */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); 
    padding: 30px; /* Ensure adequate padding */
    border-radius: 8px; /* Already set by .content-card, ensure it's there */
    background-color: white; /* Ensure white background */
}

/* Styling for the account information table */
.account-info-table {
    width: 100%;
    border-collapse: separate; /* <--- IMPORTANT: Allow border-radius on rows and border-spacing */
    border-spacing: 0 10px; /* <--- NEW: Add vertical space between rows, making them float like cards */
    margin-top: 30px; /* More space below card title */
    margin-bottom: 30px; /* More space above action links */
}

/* Styling for table header (th) and data cells (td) in account table */
/* These are the cells themselves */
.account-info-table th, .account-info-table td {
    padding: 12px 15px; /* Padding for cells */
    text-align: left;
    border-bottom: none; /* <--- NEW: Remove individual cell bottom borders */
    font-size: 15px;
    color: #333;
}

/* Specific styling for table headers (th) in account table */
.account-info-table th {
    background-color: #f8f8f8; /* Light gray background for headers */
    font-weight: bold;
    color: #555;
    width: 35%; /* Adjust width for labels column (e.g., "User ID", "Email") */
    vertical-align: top; /* Align to top for multi-line content */
    text-transform: uppercase; /* <--- NEW: Make header text uppercase */
    font-size: 14px; /* <--- NEW: Slightly smaller font for headers */
}

/* --- NEW: Style for each table row (tr) as a distinct card --- */
.account-info-table tbody tr {
    background-color: #ffffff; /* <--- Default white background for rows/cards */
    border-radius: 8px; /* <--- Rounded corners for each row/card */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* <--- Subtle shadow for each row/card */
    overflow: hidden; /* Ensure border-radius clips content */
    transition: transform 0.2s ease; /* Smooth lift on hover */
}

.account-info-table tbody tr:hover {
    transform: translateY(-3px); /* Lift on hover */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Stronger shadow on hover */
}

/* Zebra Striping for Account Table Rows (optional, but good for readability) */
.account-info-table tbody tr:nth-child(odd) {
    background-color: #F0E6FA; /* Light purple for odd rows */
}

.account-info-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* White for even rows */
}

/* Ensure no bottom border on last cell in a row for the card itself */
.account-info-table tbody tr td:last-child {
    border-bottom: none;
}

.account-info-table tbody tr:last-child td { /* Ensure last row's last cell has no border */
    border-bottom: none;
}

/* Message for no account data */
.no-account-data-message {
    font-size: 18px;
    color: #666;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

/* Action links below account details (Update, Change Pass, Delete, Go to Claims) */
.account-action-links {
    margin-top: 40px; /* <--- NEW: More space from the table */
    display: flex;
    flex-direction: row; /* <--- NEW: Display buttons horizontally on desktop */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 20px; /* Space between buttons */
    justify-content: center; /* Center horizontally */
}

/* Adjust buttons (using existing .btn-primary/.btn-secondary styles) */
.account-action-links .btn-primary,
.account-action-links .btn-secondary {
    min-width: 150px; /* Ensure a good minimum width for buttons */
    padding: 12px 25px; /* Larger padding for better feel */
    font-size: 15px; /* Slightly larger font */
    border-radius: 50px; /* <--- NEW: Pill shape for action buttons */
}

/* --- Responsive adjustments for account page table (mobile cards) --- */
@media only screen and (max-width: 600px) {
    .account-info-card {
        padding: 20px 15px; /* Adjust padding for smaller screens */
    }

    .account-info-table {
        border-spacing: 0; /* Remove space between rows (cards) on mobile */
    }

    .account-info-table tbody tr {
        margin-bottom: 15px; /* Space between cards */
        box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Consistent shadow */
        border: 1px solid #ddd; /* Border for definition */
    }

    .account-info-table th, /* Hidden on mobile when label-col is used */
    .account-info-table td {
        display: block; /* Stack header and data vertically in cells on small screens */
        width: 100%;
        box-sizing: border-box;
        border: none; /* Remove cell borders (handled by dotted line) */
        padding: 0; /* Remove padding here, add to inner spans */
        text-align: left; /* Default text align for stacked blocks */
        font-size: 14px;
    }

    /* Styling for label and value spans within mobile table cells (these become the actual data lines) */
    .account-info-table td {
        display: flex; /* Use flex to align label and value horizontally */
        justify-content: space-between; /* Space them out */
        padding-top: 5px; /* Vertical padding inside the flex item */
        padding-bottom: 5px;
        border-bottom: 1px dotted #eee; /* Dotted line between fields */
    }
    .account-info-table tbody tr:last-child td {
        border-bottom: none; /* No border on the last field in the last card */
    }

    .account-info-table td .label-col {
        font-weight: bold;
        color: #2e0155; /* Purple for labels */
        flex-shrink: 0; /* Prevent label from shrinking */
        margin-right: 10px; /* Space between label and value */
        white-space: nowrap; /* Keep label on one line */
        font-size: 14px;
    }

    .account-info-table td .value-col {
        flex-grow: 1; /* Value takes remaining space */
        text-align: right; /* Value aligns to right */
        font-size: 14px;
    }

    .account-action-links {
        flex-direction: column; /* Stack buttons vertically on mobile */
        gap: 10px;
        align-items: center;
    }

    .account-action-links .btn-primary,
    .account-action-links .btn-secondary {
        width: 80%; /* Buttons take more width on mobile */
        min-width: unset;
    }
}
/* Adjustments for account page (General for 768px and down) */
@media only screen and (max-width: 768px) {
    /* No additional changes needed here if 600px breakpoint handles most */
}

/* --- 3.9. Claim Details Page (ClaimDetails.php) Styles --- */

/* Reusing .page-container for the overall page layout */
.claim-details-page-container {
    background-color: lightseagreen; /* Specific background for this page */
    /* Add any specific padding/margins if needed for this page */
}

/* Reusing .content-card for the main card that holds claim details */
.claim-details-card {
    max-width: 1000px; /* Adjust max width for detailed content */
    width: 95%; /* Responsive width */
    text-align: left; /* Default text align for details */
}

/* General info section heading within the card */
.claim-details-card h2 {
    color: #6B0686;
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
    font-variant: small-caps;
    font-weight: bolder;
}

/* Wrapper for the claim information table (like account-details-wrapper) */
.claim-info-wrapper {
    overflow-x: auto; /* Enable horizontal scrolling for tables on small screens */
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background-color: white; /* Explicitly white for this wrapper */
    padding: 0;
}

/* Styling for the claim details table */
.claim-details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

/* Table header (th) and data cells (td) in claim details table */
.claim-details-table th, .claim-details-table td {
    padding: 10px 15px; /* Padding for cells */
    text-align: left;
    border-bottom: 1px solid #eee; /* Light border between rows */
    font-size: 15px;
    color: #333;
}

/* Specific styling for table headers (th) in claim details table */
.claim-details-table th {
    background-color: #F0E6FA; /* Light purple background for headers */
    font-weight: bold;
    color: #555;
    width: 30%; /* Adjust width for label column */
    vertical-align: top; /* Align label to top */
    text-transform: uppercase;
    font-size: 14px;
}

/* Remove bottom border from last row */
.claim-details-table tbody tr:last-child th,
.claim-details-table tbody tr:last-child td {
    border-bottom: none;
}

/* Styling for inline forms/buttons within table cells (e.g., Add Color, Edit Color) */
.inline-form {
    display: inline-block; /* Keep form in line with text */
    margin-left: 10px; /* Space from value */
}

.btn-add-edit-inline { /* Specific button for adding/editing inline fields */
    background-color: #6B0686; /* Purple for inline add/edit buttons */
    color: white;
    padding: 5px 10px;
    font-size: 0.8em; /* Smaller font size */
    border-radius: 5px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-add-edit-inline:hover {
    background-color: #4b045f;
}

/* NEW: Wrapper for Claim #ID h1 and Previous/Next buttons */
.claim-header-with-nav {
    display: flex;
    justify-content: space-between; /* Pushes buttons to ends, centers title */
    align-items: center; /* Vertically centers items */
    margin-bottom: 20px; /* Space below this header block */
    width: 100%; /* Takes full width of parent card */
    padding: 0 10px; /* Add some horizontal padding */
    box-sizing: border-box;
}

.claim-header-with-nav h1 { /* Style for the Claim #ID title */
    flex-grow: 1; /* Allows h1 to take available space */
    text-align: center; /* Centers the h1 text */
    margin: 0 10px; /* Adjust horizontal margin to prevent overlap with buttons */
    color: #2e0155; /* Match brand color */
    font-size: 32px; /* Adjust size */
    font-variant: small-caps;
    font-weight: bolder;
    white-space: nowrap; /* Prevent title from wrapping unless absolutely necessary */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Styles for the Previous/Next buttons within this header */
.claim-nav-btn { /* Container for the form/button */
    flex-shrink: 0; /* Prevent button from shrinking */
    min-width: 120px; /* Ensure buttons have a consistent minimum width */
    text-align: center; /* Center text within button space */
}

/* Placeholder for when a button doesn't exist (e.g., no previous claim) */
.claim-nav-btn.placeholder {
    visibility: hidden; /* Hide the placeholder */
    /* Maintain its dimensions to ensure the h1 remains perfectly centered */
    width: 120px; /* Match button min-width */
    height: 40px; /* Match button height (from .btn style) */
}

/* Update general button styling as needed, ensure it applies */
.claim-header-with-nav .btn-primary { /* Buttons are .btn .btn-primary */
    padding: 8px 15px; /* Adjust button padding */
    font-size: 13px; /* Adjust font size */
    min-width: 120px;
}

/* --- Media Gallery Styles (for Proof of Purchase and Claim Photos) --- */

.media-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Space between media items */
    margin-top: 15px;
    margin-bottom: 30px;
    justify-content: center; /* Center media items */
    border: 1px dashed #eee; /* Light dashed border for visual area */
    padding: 15px;
    border-radius: 8px;
    background-color: #fcfcfc; /* Very light background for gallery */
}

.media-item {
    position: relative;
    width: 100px; /* Fixed width for thumbnails */
    height: 100px; /* Fixed height for thumbnails */
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden; /* Clip content within item */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.media-item .lightbox-link,
.media-item .media-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire area */
    border-radius: 5px;
}

.media-item .video-thumbnail {
    object-fit: contain; /* Maintain aspect ratio for video icon/thumb */
}

.media-item .file-icon {
    object-fit: contain;
    width: 60%; /* Smaller icon for file types */
    height: 60%;
}

.media-item span { /* For file names and play icon */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent overlay */
    color: white;
    font-size: 0.7em;
    padding: 3px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-item .play-icon {
    font-size: 2em;
    color: white;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    padding: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.remove-media-form {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

.btn-remove-media {
    background-color: #f44336; /* Red remove button */
    color: white;
    padding: 3px 6px;
    font-size: 0.7em;
    border-radius: 3px;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s ease;
}

.btn-remove-media:hover {
    background-color: #da190b;
}

.no-media-message {
    font-size: 16px;
    color: #666;
    text-align: center;
    width: 100%; /* Take full width in flex container */
    padding: 20px 0;
}

.media-add-action {
    margin-top: 20px;
    text-align: center;
}

.notes-section {
    margin-top: 40px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fcfcfc;
    text-align: center;
}

.notes-section .notes-message {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
}

/* --- 3.10. ClaimDetailsUpdate.php Specific Styles --- */

/* Reusing .page-container for overall page layout */
.claim-update-page-container {
    background-color: lightseagreen; /* Specific background for update page */
    /* Add any specific padding/margins if needed for this page */
}

/* Reusing .form-card for the update form card */
.claim-update-card { /* Optional: if you need specific styling beyond .form-card */
    /* Inherits from .form-card */
}

/* Reusing .base-form for the form */
.claim-update-form {
    /* Optional: if specific form layout needed */
}

/* Specific styling for the Cancel button */
/* No need for .btn-cancel if using existing btn-secondary for styling. */
/* If a truly unique 'Cancel' style is desired, uncomment and define below: */
/*
.btn-cancel {
    background-color: #6c757d; // Gray for cancel
    color: white;
}
.btn-cancel:hover {
    background-color: #5a6268;
}
*/

/* --- 3.11. ClaimPix.php Specific Styles --- */

/* Reusing .page-container for overall page layout */
.claim-pix-page-container {
    background-color: lightseagreen; /* Specific background for this page */
    /* Add any specific padding/margins if needed */
}

/* Reusing .form-card for the main form card */
.claim-pix-card { /* Optional: if you need specific styling beyond .form-card */
    /* Inherits from .form-card */
}

/* Reusing .base-form for the form */
.claim-pix-form {
    /* Optional: if specific form layout needed */
}

/* Styling for file input labels */
.claim-pix-form .form-label {
    margin-bottom: 5px; /* Adjust spacing as needed for file inputs */
}

/* General styling for file input fields (can be customized further) */
.claim-pix-form .form-input.file-input {
    border: 1px dashed #ccc; /* Dashed border for file input */
    background-color: #f9f9f9; /* Light background */
    padding: 15px; /* More padding for a larger drop zone feel */
    text-align: center;
    cursor: pointer;
    line-height: normal; /* Override input line-height */
}

.claim-pix-form .form-input.file-input:hover {
    background-color: #f0f0f0;
    border-color: #a0a0a0;
}

/* Information text below file input */
.claim-pix-form .file-upload-info {
    font-size: 0.85em;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

/* ========================================================================== */
/* 4. MEDIA QUERIES (RESPONSIVE)                                              */
/* Adjustments for different screen sizes.                                    */
/* ========================================================================== */

/* --- 4.1. General Mobile Adjustments (max-width: 768px) --- */
@media only screen and (max-width: 768px) {
    /* Navbar adjustments */
    .navbar {
        justify-content: space-between;
        padding: 10px 20px;
    }

    .navbar-brand-link {
        margin-right: 0;
    }

    /* Hide desktop nav links and button */
    .nav-links {
        display: none;
    }

    .navbar > .right-container { /* Target ONLY desktop right-container */
        display: none;
    }

    /* Display hamburger menu */
    .hamburger-menu {
        display: flex;
        margin-left: auto;
    }

    /* Adjust page container padding for mobile */
    .page-container {
        padding-top: 20px; /* Less top padding on mobile */
        padding-bottom: 20px; /* Less bottom padding on mobile */
    }

    /* Adjust content/form card padding for mobile */
    .content-card, .form-card {
        padding: 20px;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .form-card h1, .content-card h1 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .base-form .btn {
        display: block; /* Stack buttons vertically */
        width: 100%;
        margin: 10px 0;
    }
}

/* --- 4.2. Homepage Mobile Adjustments (max-width: 768px) --- */
@media only screen and (max-width: 768px) {
    .main-content-area {
        margin: 0 auto;
        padding: 10px;
    }
    .homepage-title {
        font-size: 35px;
    }
    .homepage-paragraph {
        font-size: 18px;
    }
    .homepage-h2 {
        font-size: 25px;
    }
}

/* --- 4.3. Claims Page Mobile Adjustments (max-width: 768px) --- */
@media only screen and (max-width: 768px) {
    /* Reduce cell padding on smaller screens */
    .claims-table th, .claims-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    .claims-table th {
        font-size: 11px;
    }

    /* Ensure action links stack vertically on smaller screens */
    .claims-action-links {
        flex-direction: column;
        gap: 10px;
    }

    .claims-action-links .btn-primary {
        width: 80%;
        min-width: unset;
    }

    .claims-card { /* Overrides general .form-card */
        padding: 20px 10px; /* Less horizontal padding */
    }

    .claims-card h1 { /* Overrides general .form-card h1 */
        font-size: 28px;
    }
}

/* --- 4.4. Claims Table Collapse to Cards (max-width: 600px) --- */
@media only screen and (max-width: 600px) {
    .claims-table-wrapper {
        overflow-x: unset;
        border: none;
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .claims-table {
        border-collapse: separate;
        border-spacing: 0 15px;
        width: 100%;
        display: block;
    }

    .claims-table thead {
        display: none;
    }

    .claims-table tbody,
    .claims-table tr {
        display: block;
        width: 100%;
    }

    .claims-table tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.08);
        background-color: #f8f8f8;
        padding: 15px;
    }

    /* Apply a different background to alternating cards */
    .claims-table tr:nth-child(odd) {
        background-color: #F0E6FA; /* A very light, subtle blue-gray for odd cards */
    }

    .claims-table tbody tr:nth-child(even) {
        background-color: #ffffff; /* Card background handles this now */
    }

    .claims-table td {
        display: block;
        text-align: right;
        padding-left: 45%;
        position: relative;
        border: none;
        border-bottom: 1px dotted #eee;
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 14px;
        color: #333;
    }

    .claims-table td:last-child {
        border-bottom: none;
    }

    .claims-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: calc(45% - 30px);
        padding-right: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        font-weight: bold;
        color: #2e0155;
        font-size: 13px;
        top: 8px;
    }

    .claims-table td:first-child {
        text-align: left;
        padding-left: 15px;
    }

    .claims-table td:first-child::before {
        content: "";
    }

    .claims-table td:first-child form {
        width: 100%;
    }

    .claims-table td:first-child .btn-link {
        width: 100%;
        text-align: left;
        font-weight: normal;
        font-size: 14px;
    }
}

/* --- 4.5. Claims Sort Controls Mobile Adjustments (max-width: 600px) --- */
@media only screen and (max-width: 600px) {
    .claims-sort-controls {
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .sort-form {
        flex-direction: column;
        gap: 10px;
        max-width: 90%;
        width: auto;
    }

    .sort-option-group {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .sort-option-group label {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    .sort-option-group select {
        width: 220px;
        height: 40px;
        text-align: left;
        padding-left: 10px;
        background-position: right 15px center;
    }
}

/* --- 4.6. Create User Page Mobile Adjustments (max-width: 768px) --- */
@media (min-width: 768px) { /* Switch to row layout on larger screens */
    .create-user-form-container {
        flex-direction: row;
    }
}

/* --- 4.7. Create User Page Mobile Adjustments (max-width: 480px) --- */
@media only screen and (max-width: 480px) {
    .create-user-card {
        padding: 20px;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .create-user-card h1 {
        font-size: 28px;
    }

    .base-form .btn {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
}

/* ========================================================================== */
/* 5. FOOTER STYLES                                                           */
/* Styles for the consistent footer section across the website.               */
/* ========================================================================== */

footer {
    margin-top: 50px;
    padding: 20px;
    background-color: #2e0155; /* Dark purple background */
    color: white; /* Default text color for footer */
    text-align: center;
}

footer p {
    color: aliceblue; /* Specific color for paragraph text in footer */
    font-size: 25px;
    font-weight: bolder;
    font-variant: small-caps;
}

footer a {
    color: lightseagreen; /* Link color within footer */
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}

/* ========================================================================== */
/* 6. SESSION TIMEOUT MODAL STYLES                                            */
/* ========================================================================== */

/* Modal Overlay (covers the whole screen) */
#session-timeout-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place when scrolling */
    z-index: 1000; /* Sits on top of everything */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if content overflows */
    background-color: rgba(0,0,0,0.6); /* Semi-transparent black background dim */
    justify-content: center; /* Use flexbox to center content horizontally */
    align-items: center; /* Use flexbox to center content vertically */
}

/* Class to show the modal (toggled by JavaScript) */
#session-timeout-modal.show {
    display: flex; /* Make it visible and use flexbox for centering */
}

/* Modal Content Box */
.modal-content {
    background-color: #fefefe; /* White background */
    margin: auto; /* Fallback for older browsers without full flexbox centering */
    padding: 30px;
    border: 1px solid #ddd;
    width: 90%; /* Responsive width */
    max-width: 450px; /* Max width for larger screens */
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Soft shadow */
    position: relative; /* For animation */
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Modal Message Text */
.modal-content .modal-message {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: #333;
    line-height: 1.5;
}

/* Modal Buttons Container */
.modal-content .modal-actions {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on small screens */
}

/* Specific styling for the Extend Session button */
#extend-session-button {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
#extend-session-button:hover {
    background-color: #45a049;
}

/* Specific styling for the Log Out button */
#logout-now-button {
    background-color: #f44336; /* Red */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
#logout-now-button:hover {
    background-color: #da190b;
}

/* Modal Animation (Optional: makes it slide down from top) */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

/* Responsive adjustments for modal on small screens */
@media only screen and (max-width: 480px) {
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    .modal-content .modal-message {
        font-size: 1em;
    }
    .modal-content .modal-actions button {
        width: 100%; /* Make buttons full width */
        margin: 5px 0; /* Stack vertically */
    }
}