/* Google Font Import: Ubuntu */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

/* Base Styles & Global Font */
body {
    font-family: 'Ubuntu', sans-serif; /* Apply Ubuntu to all text */
    margin: 0;
    padding-top: 100px; /* Space for the fixed navigation bar */
    background-color: #f4f4f4; /* Light mode background */
    color: #333; /* Light mode text color */
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    position: relative; /* Needed for pseudo-elements to position relative to body */

    /* Background SVG - YOU MUST ADJUST THE PATH */
    background-image: url('path/to/your/background.svg'); /* <--- IMPORTANT: UPDATE THIS PATH */
    background-size: cover; /* or 'contain' depending on your SVG */
    background-position: center center;
    background-attachment: fixed; /* Ensures background stays fixed during scroll */
    background-repeat: no-repeat;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for dark mode */
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #2c2c2c; /* Dark mode body background */
    color: #f0f0f0; /* Dark mode text color */
}

/* Dark Mode Overlay for SVG */
body.dark-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* 30% transparent black overlay */
    z-index: -1; /* Ensures it's above the SVG background but behind content */
}

/* --- Navigation Bar Styles (Adapted for Responsive Hamburger) --- */
.navbar {
    width: 100%;
    min-height: 100px; /* Use min-height so it can expand */
    background-color: rgba(255, 255, 255, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    transition: background-color 0.3s ease; /* Smooth transition for dark mode */
}

body.dark-mode .navbar {
    background-color: rgba(30, 30, 30, 0.7); /* Darker transparent nav */
}

.navbar-left {
    display: flex;
    align-items: center;
    /* On mobile, this will align to the start */
    flex-shrink: 0; /* Prevent from shrinking */
}

.navbar-right {
    display: flex;
    align-items: center;
    /* On mobile, this will handle the toggler and the collapsed menu */
}

.navbar-logo-link {
    text-decoration: none; /* Removes underline from the entire link */
    display: flex;
    flex-direction: column; /* Stacks the logo and tagline */
    align-items: flex-start; /* Aligns text to the left within its container */
    line-height: 1; /* Reduces space between lines */
}

.navbar-logo {
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    font-size: 30pt;
    color: #333;
}

body.dark-mode .navbar-logo {
    color: #e0e0e0;
}

.navbar-tagline {
    font-size: 10pt; /* Specific font size */
    color: #555; /* Default color for light mode */
    margin-top: 5px; /* Small space between logo and tagline */
    white-space: nowrap; /* Prevents tagline from wrapping */
}

body.dark-mode .navbar-tagline {
    color: #ccc; /* Lighter color for dark mode */
}

/* Hamburger Toggler Button */
.navbar-toggler {
    display: none; /* Hidden by default on large screens */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 20px; /* Space between links and toggler on mobile */
    z-index: 1050; /* Ensure it's above other content when collapsed */
}

.navbar-toggler .toggler-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #555; /* Matches link color */
    margin: 5px 0;
    transition: all 0.3s ease;
}

body.dark-mode .navbar-toggler .toggler-icon {
    background-color: #e0e0e0; /* Matches link color in dark mode */
}

/* Animation for hamburger icon on toggle */
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {
    opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* Collapsible Navigation Links - Default (for desktop) */
.navbar-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Always flex on desktop */
    align-items: center; /* Vertically center links */
    flex-wrap: nowrap; /* Prevent wrapping on desktop */
    max-height: none; /* Ensure it's visible on desktop */
    overflow: visible; /* Ensure content isn't hidden on desktop */
    transition: none; /* No transition needed for desktop default */
}

/* When the menu is "show" (expanded) - This class is primarily for mobile */
.navbar-links.show {
    max-height: 500px; /* A value large enough to contain all menu items */
    transition: max-height 0.5s ease-in;
}


.navbar-links li {
    margin-left: 25px;
    /* Added for mobile stacking */
    width: auto;
    text-align: center;
}

.navbar-links a {
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    color: #555;
    font-size: 1.1em;
    padding: 5px 10px;
    transition: color 0.3s ease;
    display: block; /* Make links block to take full width in mobile menu */
}

.navbar-links a:hover {
    color: #007bff;
}

body.dark-mode .navbar-links a {
    color: #e0e0e0;
}

body.dark-mode .navbar-links a:hover {
    color: #64b5f6; /* Lighter blue hover for dark mode */
}

/* Dark Mode Toggle Switch (within navbar) */
.dark-mode-item {
    margin-left: 25px; /* Space from last nav link */
    display: flex; /* Ensures switch aligns nicely */
    align-items: center;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px; /* Smaller width */
    height: 20px; /* Smaller height */
    margin: 0;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px; /* Smaller size */
    width: 16px; /* Smaller size */
    left: 2px; /* Adjusted position */
    bottom: 2px; /* Adjusted position */
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #007bff; /* Blue when checked */
}

input:focus + .slider {
    box-shadow: 0 0 1px #007bff;
}

input:checked + .slider:before {
    -webkit-transform: translateX(20px); /* Adjusted translation */
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 0; /* Half of height for perfect roundness */
}

.slider.round:before {
    border-radius: 0%;
}

/* Dark mode switch color adjustments */
body.dark-mode .switch input:checked + .slider {
    background-color: #64b5f6; /* Lighter blue for dark mode */
}
body.dark-mode .switch input:checked + .slider:before {
    background-color: #f0f0f0;
}


/* Main Container (default width for index.html, etc.) */
.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%;
    max-width: 800px; /* Default max-width for main pages */
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-grow: 1; /* Allow content to grow and push footer down */
}

body.dark-mode .container {
    background-color: #3a3a3a; /* Darker container background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Stronger shadow */
}

/* Title */
.title {
    color: #333;
    margin-bottom: 25px;
    font-size: 2.2em;
    font-weight: 700;
}

/* FIX: Unreadable title in Dark Mode */
body.dark-mode .title {
    color: #f0f0f0; /* Light color for the title */
}

/* New: Help text below the title */
.input-help-text {
    font-size: 12pt;
    margin-top: -15px; /* Adjust to position closer to the title */
    margin-bottom: 20px; /* Space before the input section */
    color: #666;
}

/* New: Dark mode for help text */
body.dark-mode .input-help-text {
    color: #ccc;
}

/* Input Section */
.input-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}

.input-section input[type="text"] {
    padding: 12px 18px;
    border: 1px solid #ccc;
    border-radius: 0px;
    font-size: 1.1em;
    width: 250px; /* Adjusted width */
    transition: border-color 0.3s ease;
}

.input-section input[type="text"]:focus {
    border-color: #007bff;
    outline: none;
}

.input-section button {
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.input-section button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

body.dark-mode .input-section input[type="text"] {
    background-color: #4a4a4a;
    color: #f0f0f0;
    border: 1px solid #555;
}

body.dark-mode .input-section input[type="text"]:focus {
    border-color: #64b5f6;
}

body.dark-mode .input-section button {
    background-color: #555;
    color: #f0f0f0;
    border: 1px solid #666;
}

body.dark-mode .input-section button:hover {
    background-color: #666;
}

/* Weather Display Section */
.weather-display {
    border-top: 1px solid #eee;
    padding-top: 30px;
    text-align: left;
    margin-top: 30px;
    transition: all 0.5s ease-in-out;
}

body.dark-mode .weather-display {
    background-color: #444; /* Darker weather display background */
    border: 1px solid #555;
}

.weather-display.hidden {
    display: none;
    opacity: 0;
}

.location-name {
    font-size: 2.5em;
    font-weight: 700;
    color: #007bff;
    margin-bottom: 20px;
    text-align: center;
}

body.dark-mode .location-name {
    color: #64b5f6; /* Lighter blue for dark mode location */
}

/* Current Weather */
.current-weather {
    text-align: center;
    margin-bottom: 30px;
}

.current-prefix-line {
    font-size: 20pt;
    color: #555;
    margin-bottom: 5px;
    margin-top: 0;
}

body.dark-mode .current-prefix-line {
    color: #bbb; /* Dark mode color for "Currently" */
}

.current-temp-value-line {
    font-size: 32pt;
    font-weight: bold;
    color: #007bff;
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1;
}

body.dark-mode .current-temp-value-line {
    color: #64b5f6; /* Dark mode color for temp and °F */
}

.current-weather .temp-range {
    font-size: 1.4em;
    color: #555;
    margin-top: 10px;
}

body.dark-mode .current-weather .temp-range {
    color: #bbb;
}

/* Daily Forecasts */
.daily-forecasts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.forecast-item {
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    padding: 15px;
    flex: 1 1 calc(33% - 40px);
    max-width: calc(33% - 40px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.forecast-item:hover {
    transform: translateY(-5px);
    background-color: #f0f0f0;
}

body.dark-mode .daily-forecasts .forecast-item {
    background-color: #4c4c4c; /* Darker forecast item background */
    border: 1px solid #585858;
}

body.dark-mode .daily-forecasts .forecast-item:hover {
    background-color: #555;
}

.forecast-item p {
    margin: 5px 0;
    line-height: 1.4;
}

.forecast-day {
    font-weight: bold;
    font-size: 1.2em;
    color: #007bff;
    margin-bottom: 10px;
}

body.dark-mode .forecast-day {
    color: #64b5f6;
}

.forecast-temp {
    font-size: 1.1em;
    color: #555;
}

body.dark-mode .forecast-temp,
body.dark-mode .forecast-text,
body.dark-mode .forecast-precip {
    color: #bbb;
}


/* Additional Info & Warnings */
.additional-info {
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: left;
    margin-top: 20px;
    line-height: 1.6;
}

body.dark-mode .additional-info {
    border-top-color: #555;
}

.additional-info p {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: #333; /* Default text color in additional info */
}

body.dark-mode .additional-info p {
    color: #f0f0f0; /* Default text color in additional info */
}

.additional-info span {
    font-weight: bold;
    color: #007bff;
}

body.dark-mode .additional-info span {
    font-weight: bold;
    color: #64b5f6; /* Highlight color in additional info */
}

.warnings {
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px dashed #ccc;
}

body.dark-mode .warnings {
    border-top-color: #555;
}

.warnings h3 {
    color: #e74c3c;
    font-size: 1.3em;
    margin-bottom: 15px;
}

body.dark-mode .warnings h3 {
    color: #ff8a80; /* Lighter red for dark mode */
}

.warnings .warning-item {
    background-color: #ffe0e0;
    border: 1px solid #e74c3c;
    border-radius: 0px;
    padding: 12px;
    margin-bottom: 10px;
    font-size: 0.95em;
    line-height: 1.5;
    color: #333;
}

body.dark-mode .warnings .warning-item {
    background-color: #5c2727; /* Darker red background for dark mode warnings */
    border: 1px solid #ff8a80;
    color: #fff;
}


/* Error Message */
.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 15px;
    border-radius: 0px;
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

body.dark-mode .error-message {
    background-color: #c0392b; /* Slightly darker red for dark mode error */
    color: #fff;
}

.error-message.hidden {
    display: none;
}

.secondary-navbar {
    width: 100%;
    background-color: #e9e9e9;
    padding: 10px 40px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* KEY POSITIONING RULE */
    margin-top: 100px; /* Push down below the 100px-tall primary navbar */
    
    /* REMOVE z-index unless stacking is needed */
    position: relative;
    
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


/* Dark mode for secondary navbar */
body.dark-mode .secondary-navbar {
    background-color: #4a4a4a;
    box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.secondary-navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Make its content take full width */
    max-width: 1200px; /* Constrain internal content width like wide-container */
    margin: 0 auto; /* Center the internal content */
}

.secondary-navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px; /* Space between links */
}

.secondary-navbar-nav li a {
    text-decoration: none;
    color: #333;
    font-size: 1.05em;
    padding: 5px 10px;
    transition: color 0.3s ease;
}

.secondary-navbar-nav li a:hover {
    color: #007bff;
}

/* Dark mode for secondary navbar links */
body.dark-mode .secondary-navbar-nav li a {
    color: #f0f0f0;
}

body.dark-mode .secondary-navbar-nav li a:hover {
    color: #64b5f6;
}

.secondary-navbar-end-items {
    display: flex;
    align-items: center;
}

.logout-form {
    margin: 0; /* Remove default form margin */
}

.logout-button {
    background-color: #dc3545; /* Red for logout button */
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 0.95em;
    display: flex; /* Align icon and text */
    align-items: center;
    gap: 5px; /* Space between text and icon */
    transition: background-color 0.3s ease;
}

.logout-button:hover {
    background-color: #c82333;
}

/* Dark mode for logout button */
body.dark-mode .logout-button {
    background-color: #e74c3c; /* Brighter red for dark mode */
}

body.dark-mode .logout-button:hover {
    background-color: #c0392b;
}

/* --- NEW STYLES FOR FREE-COUPONS.HTML (WIDER CONTAINER & GRID) --- */
/* This rule has been moved and adjusted to come after general .container but before admin-specific wide-container rules for better specificity and organization */
.wide-container {
    max-width: 1200px; /* Make this container wider for 4 columns */
    width: 100%;
    margin: 0 auto; /* Centering it, top margin is now handled by padding-top below */
    padding: 30px 30px; /* Default padding for wide container */
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    box-sizing: border-box;
    /* CRITICAL: Adds space between the secondary navbar and the content below it specifically for wide-container usage on admin pages */
    padding-top: 30px;
    padding-bottom: 30px; /* Consistent bottom padding */
}

/* Dark mode for the wider container */
body.dark-mode .wide-container {
    background-color: #3a3a3a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* --- ADMIN LAYOUT SPECIFIC STYLES (from your add-coupon.php <style> block, now in style.css) --- */
.admin-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding: 0; /* Padding is now handled by .wide-container */
    box-sizing: border-box;
}

.admin-grid-layout {
    display: grid;
    grid-template-columns: minmax(400px, 2fr) minmax(300px, 1fr);
    gap: 30px;
    padding: 0;
    margin: 0 auto; /* Center the grid, no explicit top margin here as .wide-container handles it */
    align-items: start;
    width: 100%; /* Take full width of its parent (admin-content) */
}

.form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-field-full-width {
    grid-column: 1 / -1;
}

.live-preview-wrapper {
    padding: 20px;
    border: 1px dashed #ccc;
    border-radius: 0px;
    background-color: #f8f8f8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    height: fit-content;
    position: sticky;
    top: 20px; /* Consider adjusting this based on primary + secondary nav total height if it scrolls under. Currently: 100px (primary) + ~45px (secondary) = ~145px from top. 20px here might be too high relative to viewport, adjust to (145px + desired_gap) if it scrolls under */
    align-self: start;
}

body.dark-mode .live-preview-wrapper {
    background-color: #3a3a3a;
    border: 1px dashed #555;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.preview-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}
body.dark-mode .preview-title {
    color: #f0f0f0;
}

#liveCouponPreviewContainer {
    display: flex;
    justify-content: center;
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
}

#liveCouponPreviewContainer .coupon-item {
    max-width: 300px;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
body.dark-mode #liveCouponPreviewContainer .coupon-item {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Form element base styles (specifically for coupon forms) */
.coupon-form-container {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
    color: #333;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

body.dark-mode .coupon-form-container {
    background-color: #3a3a3a;
    color: #f0f0f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.coupon-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.coupon-form-container input[type="text"],
.coupon-form-container input[type="url"],
.coupon-form-container input[type="date"],
.coupon-form-container textarea,
.coupon-form-container select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    color: #333;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.coupon-form-container textarea {
    resize: vertical;
    min-height: 80px;
}

.coupon-form-container input[type="text"]:focus,
.coupon-form-container input[type="url"]:focus,
.coupon-form-container input[type="date"]:focus,
.coupon-form-container textarea:focus,
.coupon-form-container select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

body.dark-mode .coupon-form-container input[type="text"],
body.dark-mode .coupon-form-container input[type="url"],
body.dark-mode .coupon-form-container input[type="date"],
body.dark-mode .coupon-form-container textarea,
body.dark-mode .coupon-form-container select {
    background-color: #4a4a4a;
    color: #f0f0f0;
    border-color: #555;
}

body.dark-mode .coupon-form-container input[type="text"]:focus,
body.dark-mode .coupon-form-container input[type="url"]:focus,
body.dark-mode .coupon-form-container input[type="date"]:focus,
body.dark-mode .coupon-form-container textarea:focus,
body.dark-mode .coupon-form-container select:focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.25);
}

/* Message / Alert Boxes (used for form submission messages) */
.message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 0px;
    font-weight: bold;
    text-align: center;
}
.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Dark mode for messages */
body.dark-mode .success {
    background-color: #38673a;
    color: #e6ffe6;
    border-color: #5cb85c;
}
body.dark-mode .error {
    background-color: #8c2e2e;
    color: #ffcccc;
    border-color: #dc3545;
}

/* Censorship Warning */
.censorship-warning {
    padding: 10px;
    border-radius: 0px;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
    display: none; /* Hidden by default */
}
.censorship-warning.active-warning {
    display: block;
    background-color: #a00000;
    color: #ffffff;
    border: 1px solid #cc0000;
    font-size: 0.85em;
}
body.dark-mode .censorship-warning.active-warning {
    background-color: #cc0000;
    border: 1px solid #ff3333;
}


/* Responsive Design */
@media (max-width: 1024px) { /* For smaller desktops and tablets */
    .navbar {
        padding: 0 20px; /* Adjust padding on smaller screens */
    }
    .navbar-links {
        gap: 15px; /* Reduce space between links */
    }
    .secondary-navbar {
        padding: 10px 20px; /* Adjust padding on smaller screens */
    }
    .secondary-navbar-container {
        flex-direction: column; /* Stack items vertically on smaller screens */
        gap: 10px;
        align-items: flex-start; /* Align stacked items to the left */
    }
    .secondary-navbar-nav {
        flex-direction: column; /* Stack links vertically */
        gap: 5px;
        width: 100%; /* Take full width for stacked links */
    }
    .secondary-navbar-nav li {
        width: 100%;
    }
    .secondary-navbar-nav li a {
        padding: 8px 0; /* Adjust padding for stacked links */
        width: 100%;
        text-align: left;
    }
    .secondary-navbar-end-items {
        width: 100%;
        justify-content: flex-start; /* Align logout button to left */
    }
    .logout-button {
        width: 100%; /* Make logout button full width */
        justify-content: center; /* Center text/icon if button is full width */
    }
    .wide-container {
        padding-left: 15px; /* Slightly less padding on tablet */
        padding-right: 15px;
    }
    /* Admin layout responsive adjustments */
    .admin-grid-layout {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 20px;
    }
    .live-preview-wrapper {
        position: static; /* Remove sticky position when columns stack */
        top: auto;
        margin-top: 20px; /* Add space when preview is below form */
    }
}

@media (max-width: 992px) { /* Medium screens and up */
    .navbar {
        padding: 0 20px; /* Adjust padding on smaller screens */
        flex-direction: row; /* Keep elements in a row for top bar */
        justify-content: space-between;
        align-items: center;
        min-height: 100px; /* Maintain fixed height for top bar */
    }

    .navbar-toggler {
        display: block; /* Show hamburger on smaller screens */
        order: 2; /* Position after brand, before right items if needed */
    }

    .navbar-right {
        order: 3; /* Pushed to the next line or end, handles collapse */
        flex-basis: 100%; /* Take full width when collapsed */
        flex-direction: column; /* Stack items vertically in the collapse menu */
        align-items: flex-start; /* Align menu items to the left */
    }

    /* Collapsible Navigation Links - Mobile Specific */
    .navbar-links {
        max-height: 0; /* Hide by default on mobile */
        overflow: hidden; /* Hide overflow on mobile */
        transition: max-height 0.3s ease-out; /* Add transition for mobile */
        flex-direction: column; /* Stack menu items vertically on mobile */
        align-items: flex-start; /* Align menu items to the left on mobile */
        gap: 0; /* Remove gap for stacked links */
        padding-top: 10px; /* Space from the top of the expanded menu */
    }

    .navbar-links li {
        margin-left: 0; /* Remove left margin for stacked items */
        width: 100%; /* Ensure each list item takes full width */
    }

    .navbar-links a,
    .dark-mode-item {
        padding: 10px 0px; /* Consistent padding for stacked items */
        width: 100%;
        box-sizing: border-box; /* Include padding in width */
        text-align: left;
    }

    .dark-mode-item {
        padding-left: 0; /* Align with other list items */
        margin-left: 0;
        margin-top: 10px; /* Space from menu links above */
        padding-bottom: 15px; /* Add some padding at the bottom of the collapsed menu */
    }

    /* Adjust body padding for when the navbar expands */
    body.navbar-expanded {
        padding-top: 300px; /* Adjust this value based on the estimated max height of your expanded menu. Test and tweak! */
    }
}

@media (max-width: 768px) {
    /* Existing rules for 768px which are still relevant */
    .wide-container, .container, .policy-container { /* Apply responsive padding to all containers */
        padding: 20px;
    }
    .title {
        font-size: 1.8em;
    }
    .input-help-text {
        margin-top: -10px;
        margin-bottom: 15px;
    }
    .input-section {
        flex-direction: column;
        gap: 10px;
    }
    .input-section input[type="text"],
    .input-section button {
        width: 100%;
        max-width: none;
    }
    .current-prefix-line {
        font-size: 18pt;
    }
    .current-temp-value-line {
        font-size: 28pt;
    }

    .forecast-item {
        flex: 1 1 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
    .sponsors-content {
        flex-direction: column;
    }
    .sponsors-column {
        min-width: unset;
        width: 100%;
    }
    /* Removed .coupon-grid from here. It should be handled by coupons.css */
    .search-section {
        flex-direction: column;
        gap: 10px;
    }
    .search-section input[type="text"] {
        width: 100%;
        max-width: 95%;
    }
    .policy-container {
        padding: 20px;
    }
    .policy-container h2 {
        font-size: 1.8em;
    }
    .policy-container h3 {
        font-size: 1.4em;
    }
    .policy-container p, .policy-container ul li {
        font-size: 0.95em;
    }
}

@media (max-width: 480px) {
    .navbar {
        padding: 0 15px; /* Even less padding on very small screens */
    }
    /* Existing rules for 480px which are still relevant */
    .forecast-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .current-prefix-line {
        font-size: 16pt;
    }
    .current-temp-value-line {
        font-size: 24pt;
    }
    /* Removed .coupon-grid from here. It should be handled by coupons.css */
    .about-content-columns {
        flex-direction: column;
        gap: 20px;
    }
    .about-column {
        min-width: unset;
        width: 100%;
    }
    .button {
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0;
    }
}

/* --- STYLES FOR ADVERTISE-YOUR-BUSINESS-FOR-ONE-DOLLAR.HTML --- */
/* Specific styles for the two-column layout on this page */
.sponsors-content {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on smaller screens */
    gap: 30px; /* Space between columns */
    margin-top: 30px;
    text-align: left; /* Align text within columns to left */
}

.sponsors-column {
    flex: 1; /* Each column takes equal flexible space */
    min-width: 300px; /* Minimum width before wrapping */
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 0px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sponsors-column h3 {
    color: #007bff;
    margin-bottom: 15px;
    font-size: 1.8em;
}

body.dark-mode .sponsors-column {
    background-color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

body.dark-mode .sponsors-column h3 {
    color: #64b5f6;
}

.sponsors-column p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.sponsors-column ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px;
    color: #555;
}

.sponsors-column ul li {
    margin-bottom: 8px;
}

body.dark-mode .sponsors-column p,
body.dark-mode .sponsors-column ul li {
    color: #e0e0e0;
}

.current-sponsors-list {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

.current-sponsors-list li {
    background-color: #e0e0e0;
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 0px;
    font-weight: bold;
    color: #333;
}

body.dark-mode .current-sponsors-list li {
    background-color: #555;
    color: #f0f0f0;
}

/* Placeholder for Ecwid store */
.ecwid-placeholder {
    min-height: 400px; /* Give it some vertical space */
    background-color: #ececec;
    border: 2px dashed #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #777;
    font-style: italic;
    border-radius: 0px;
    padding: 20px;
}

body.dark-mode .ecwid-placeholder {
    background-color: #333;
    border-color: #666;
    color: #aaa;
}

/* --- General Button Styles --- */
/* These styles will apply to any element with class="button" */
.button {
    display: inline-block; /* Allows side-by-side placement but respects width/height */
    padding: 12px 25px; /* Standard padding */
    background-color: #007bff; /* Primary blue for light mode */
    color: white; /* White text for light mode */
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none; /* Crucial for anchor tags acting as buttons */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transitions */
    text-align: center; /* Ensures text is centered within the button */
    /* Add any other general button styles you want here */
}

.button:hover {
    background-color: #0056b3; /* Darker blue on hover in light mode */
}

/* --- Dark Mode Button Styles (Apply to all .button elements in dark mode) --- */
body.dark-mode .button {
    background-color: #64b5f6; /* Lighter blue for dark mode */
    color: #333; /* Dark text for contrast on lighter background */
}

body.dark-mode .button:hover {
    background-color: #2196f3; /* Even lighter blue on hover in dark mode */
    color: #000; /* Even darker text on hover for contrast */
}

/* --- Specific Styles for the "Clip Coupon Now!" button --- */
/* This ensures the coupon specific button remains full-width and has its own margin-top */
.coupon-link-button {
    display: block; /* Overrides inline-block from .button, making it full width */
    width: 100%; /* Ensures it takes full width */
    padding: 10px 15px; /* Slightly different padding than general button */
    margin-top: 15px; /* Specific margin for spacing within coupon item */
    background-color: #007bff; /* Consistent blue */
    color: white;
    text-align: center;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Prevents button from shrinking in flex container */
}

.coupon-link-button:hover {
    background-color: #0056b3;
}

body.dark-mode .coupon-link-button {
    background-color: #64b5f6; /* Consistent lighter blue for dark mode */
    color: #333;
}

body.dark-mode .coupon-link-button:hover {
    background-color: #2196f3;
}

/* --- STYLES FOR ABOUT.HTML TWO-COLUMN LAYOUT --- */
.about-content-columns {
    display: flex;
    flex-wrap: wrap; /* Allows columns to stack on smaller screens */
    gap: 30px; /* Space between columns */
    margin-top: 30px;
    text-align: left; /* Align text within columns to left */
}

.about-column {
    flex: 1; /* Each column takes equal flexible space */
    min-width: 350px; /* Minimum width for columns before wrapping */
}

.about-column h3 {
    color: #007bff;
    margin-bottom: 15px;
    font-size: 1.8em;
}

body.dark-mode .about-column h3 {
    color: #64b5f6;
}

.about-column p,
.about-column ul {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

body.dark-mode .about-column p,
body.dark-mode .about-column ul {
    color: #e0e0e0;
}

.about-column ul {
    list-style-type: disc;
    margin-left: 20px;
}

/* Adjustment for the "I Agree" button at the bottom of the policy */
.policy-container .button {
    margin-top: 30px; /* More space above the button */
    margin-bottom: 0; /* Remove default margin from the generic button style */
}

/* --- FOOTER STYLES --- */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px; /* Space above the footer */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease; /* Dark mode transition */
    width: 100%; /* Ensure footer spans full width */
    box-sizing: border-box; /* Include padding in width */
}

body.dark-mode .footer {
    background-color: #1a1a1a;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.6);
}

.footer p {
    margin: 0;
    font-size: 0.9em;
}

.footer a {
    color: #007bff; /* Link color in footer */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #64b5f6; /* Hover color for footer links */
}

/* --- NEW STYLES FOR ADVERTISING AGREEMENT (.policy-container) --- */
.policy-container {
    width: 100%;
    max-width: 800px; /* Aligns with .container width */
    margin: 40px auto; /* Space above and below, auto for centering */
    padding: 30px;
    background-color: #fff; /* Light mode background */
    border-radius: 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left; /* Text aligns left */
    box-sizing: border-box;
}

body.dark-mode .policy-container {
    background-color: #3a3a3a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    color: #f0f0f0; /* Dark mode text color */
}

.policy-container h2 {
    color: #007bff;
    font-size: 2.2em;
    margin-bottom: 25px;
    text-align: center; /* Center the main heading */
    font-weight: 700;
}

body.dark-mode .policy-container h2 {
    color: #64b5f6;
}

.policy-container h3 {
    color: #007bff;
    font-size: 1.6em;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
}

body.dark-mode .policy-container h3 {
    color: #64b5f6;
}

.policy-container p {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333; /* Default text color */
}

body.dark-mode .policy-container p {
    color: #f0f0f0; /* Dark mode text color */
}

.policy-container ul {
    list-style-type: decimal; /* Numbered list for policy sections */
    margin-left: 25px;
    margin-bottom: 15px;
    color: #333; /* Default text color */
}

.policy-container ul li {
    line-height: 1.5;
    margin-bottom: 8px;
    font-size: 1.05em;
}

body.dark-mode .policy-container ul,
body.dark-mode .policy-container ul li {
    color: #f0f0f0; /* Dark mode text color */
}

/* The .navbar-logo-link and .navbar-tagline rules were duplicated at the end. Removed duplicates. */