/* @tweakable Overall page background color */
:root {
    --page-bg: #D1E0F1; /* Classic Roblox page background blue */
    --panel-border: #a9bddc; 
    --panel-shadow: none; 
    --button-hover: #1272bf; 
    --site-blue: #11294c; 
    --header-gradient: none; 
    --nav-link: #1465a4; 
    --nav-hover: #a6caf7;  
    --panel-bg: #f7fafd;  /* Light blue panel background */
    --banner-height: 66px; /* Adjusted to match JS constant */
    --footer-bg: #dbe7f2; 
    /* NEW: CSS Variables for Announcement Bar (can be overridden by JS tweakables if needed) */
    /* These are more like fallbacks if JS variables aren't applied for some reason */
    /* --announcement-bar-border-color: #c0c0c0; /* Defined in JS global styles */
}

body {
    font-family: Arial, Verdana, sans-serif;
    background-color: var(--page-bg) !important; /* Explicitly set body background */
    margin: 0;
    padding: 0;
    color: #333; /* Default text color */
}

#root {
    min-height: 100vh;
    background: none; /* Root itself is transparent, body has color */
    padding-bottom: 1px; /* Ensure footer content doesn't get cut off */
}

/* Styles from JS applied here for clarity, will be overridden if removeShadows is true in JS */
.main09-container, .classic-panel, .classic-formbox, .server-card, .server-list-item { 
    border-radius: 0px !important;
    box-shadow: none !important;
}
.rbx09-navbar a {
    border-radius: 0px !important;
}

/* General heading styles */
h1, h2, h3 {
    font-family: Arial, Verdana, sans-serif;
    font-weight: bold;
    color: var(--site-blue);
    letter-spacing: 0.01em;
    margin-top: 0.35em;
    margin-bottom: 0.5em;
}
h1 { 
    font-size: 1.85em; 
}
h2 { 
    font-size: 1.25em; /* Slightly increased for better hierarchy */
}
h3 { 
    font-size: 1.05em; /* Slightly increased */
}

ul, ol {
    font-size: 14px; /* Standardized list font size */
    color: #1c4377;
    margin: 0.7em 0 0.7em 20px; /* Consistent padding */
    padding-left: 20px; /* Ensure space for list styles */
}

li {
    line-height: 1.6; /* Improved line spacing */
    padding-left: 0.2em;
}

/* Button base style (used by .button class if needed, but forms have specific styles) */
.button {
    background: #227acf;
    color: #fff;
    padding: 8px 15px; /* Consistent padding */
    border: none;
    border-radius: 0px !important; /* Ensure blocky */
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.13s;
    text-align: center;
    display: inline-block;
    width: auto; /* Default to auto, can be overridden */
}

.button:hover {
    background: var(--button-hover);
}
.button:disabled {
    background: #7fa5cf;
    cursor: not-allowed;
}

/* Specific Server Card Styling (kept for UserPage/Profile context if still used directly) */
.server-card {
    background: #fafdff; /* Slightly off-white, distinct from panel */
    border: 2px solid var(--panel-border); /* Consistent with panel border */
    padding: 10px; /* Adjusted padding */
    min-height: 180px; /* Min height to ensure consistency */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom */
    box-sizing: border-box;
}

.server-card h3 {
    margin: 0.1em 0 0.2em 0;
    color: #165dbe; /* Specific color for server names */
    font-size: 1.05em; /* Slightly larger than p */
    overflow-wrap: break-word;
}

.server-card p {
    margin: 0.2em 0 0.4em 0;
    color: #203e61; /* Darker blue for details */
    font-size: 0.95em; /* Slightly smaller for sub-info */
    line-height: 1.3;
    overflow-wrap: break-word;
}
.server-card p:last-of-type {
    margin-bottom: 8px; /* Space before button */
}

.server-card button { /* Button specific to server cards */
    background: #227acf;
    color: #fff;
    padding: 7px 0;
    border: none;
    font-weight: 700;
    font-size: 15px; /* Match form button */
    width: 100%;
    cursor: pointer;
    transition: background 0.13s;
    margin-top: auto; /* Pushes button to bottom if content is short */
}
.server-card button:hover {
    background: #144985;
}
.server-card button:disabled {
     background: #7fa5cf;
    cursor: not-allowed;
}

/* Footer styling from JS, consolidated here */
.classic-footer {
    background: var(--footer-bg);
    border-top: 2px solid #7fa5cf;
    color: #385392;
    font-size: 13px; /* JS: footerFontSize */
    padding: 14px 0 8px 0;
    text-align: center;
    margin-top: 29px;
    border-radius: 0 !important; /* Ensure blocky */
}

.classic-footer nav a { 
    color: #265899; 
    margin:0 10px; 
    text-decoration:none; 
    font-weight:600;
}
.classic-footer nav a:hover { 
    color: #2a76c7; 
    text-decoration: underline;
}

/* General link styling */
a {
    color: #175490; /* Default link color */
    text-decoration: underline;
}
a:hover {
    color: #246ad2; /* Link hover color */
}

/* Ensure image rendering is crisp for pixel art */
img {
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -webkit-optimize-contrast; /* Webkit (Chrome, Safari) */
    image-rendering: pixelated; /* Standard */
    -ms-interpolation-mode: nearest-neighbor; /* IE */
}

/* Badge container styles (from JS, for Badges Page & Profile) */
.badge-container {
    display: flex;
    align-items: center;
    padding: 8px;
    background: #eaf2fd; /* Light blue background for badge items */
    border: 1px solid #c8d4e3; /* Subtle border */
    margin-bottom: 8px;
    border-radius: 0 !important; /* Ensure blocky */
}
.badge-container img.badge-image { 
    margin-right: 10px;
    object-fit: contain;
    border-radius: 0 !important;
}
.badge-container .badge-info h4 {
    margin: 0 0 3px 0;
    font-size: 1.1em;
    color: #103874; /* Dark blue for badge name */
}
.badge-container .badge-info p {
    margin: 0;
    font-size: 0.9em;
    color: #333; /* Standard text color for description */
}

/* Report button general style if not specific to server cards */
.report-button {
    background-color: #f0ad4e; /* Default report button orange */
    color: white;
    padding: 5px 8px; 
    font-size: 12px;  
    border: none;
    cursor: pointer;
    margin-top: 8px; 
    border-radius: 0px !important; /* Ensure blocky */
    transition: background-color 0.15s ease;
}
.report-button:hover {
    background-color: #ec971f; /* Darker orange on hover */
}

/* Ensure classic-formbox select also gets blocky style */
.classic-formbox select, .classic-formbox textarea { 
    border: 2px solid #bdd1e8;
    padding: 7px;
    font-size: 15px;
    width: 100%; 
    margin-bottom: 10px;
    background: #f0f4fa;
    box-sizing: border-box; 
    border-radius: 0px !important; /* Explicit blocky */
}

/* Styles for Mod Panel announcement list actions and items if needed */
/* .mod-announcement-list-item-actions is defined in global JS style for now */
/* If more specific CSS is needed for the li or p inside mod announcements, add here */
.mod-announcement-list li {
    position: relative; /* For potential absolute positioning of actions if layout changes */
}
.mod-announcement-list li p {
    display: inline; /* Keep text and button on same line-ish if space allows */
    margin-right: 5px; /* Space before actions */
}