/* Clock Page Specific Styles */

/* Container for the entire clock page content within main */
.clock-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* Space between local time and world clock grid */
    width: 100%; /* Ensure it takes full width within main */
}

/* 1. Local Time Display Styles */
.local-time-container {
    text-align: center;
    background-color: #ffffff; /* White background */
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    width: 100%; /* Changed from 90% */
    max-width: 1000px; /* Changed from 600px to match grid */
    border: 1px solid #e0e0e0;
}

.local-time-digital {
    font-family: 'DS-Digital', sans-serif; /* Digital-style font */
    font-size: 4.5rem; /* Large font size */
    font-weight: 500;
    color: #333; /* Dark grey color */
    letter-spacing: 4px; /* Spacing for digital look */
    margin-bottom: 5px;
    line-height: 1.1;
    /* Add a subtle text shadow for depth */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.local-date-display {
    font-family: 'Roboto', sans-serif; /* Clean font for date */
    font-size: 1.3rem;
    color: #666; /* Medium grey color */
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 2. Global Time Grid Styles */
.global-time-grid-container {
    text-align: center;
    background-color: #f9f9f9; /* Slightly off-white background */
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    width: 90%; /* Keep container width responsive */
    max-width: 1000px; /* Allow grid to be wider */
    border: 1px solid #e5e5e5;
}

.global-time-grid-container h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.global-time-grid {
    display: grid;
    /* Fixed 3 columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Gap between cards */
}

/* Individual Time Card Styles */
.time-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.07);
    border: 1px solid #eee;
    text-align: left;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 110px; /* Ensure cards have a minimum height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out header, time, date */
}

.time-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
    min-height: 28px; /* Ensure header has some minimum height */
}

.city-name {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    font-weight: 400; /* Regular weight */
    color: #555; /* Match screenshot color */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 10px;
}

.card-icons {
    display: flex;
    align-items: center;
    gap: 10px; /* Increased gap */
    color: #999; /* Lighter icon color */
}

.card-icon {
    font-size: 1.2rem; /* Slightly larger icons */
    cursor: default;
    line-height: 1; /* Ensure icons align well */
}
.icon-options {
    font-weight: bold;
    letter-spacing: -1px;
    font-size: 1.3rem; /* Make options dots slightly larger */
    color: #aaa; /* Slightly darker dots */
}

/* Adjust remove button position and style */
.remove-city-btn {
    color: #bbb; /* Lighter default color */
    font-size: 1.5rem; /* Slightly larger X */
    cursor: pointer;
    padding: 0; /* Remove padding */
    line-height: 1;
    background: none;
    border: none;
    transition: color 0.2s ease;
    order: 3;
    margin-left: -2px; /* Pull closer to options */
}
.remove-city-btn:hover {
    color: #f44336;
}


.card-time {
    font-family: 'DS-Digital', sans-serif;
    font-size: 2.1rem;
    font-weight: 500; /* Medium weight like screenshot */
    color: #444; /* Match screenshot color */
    text-align: center;
    margin: 15px 0 10px 0; /* Adjust margin */
    letter-spacing: 1px; /* Less spacing */
    line-height: 1.1;
}
/* Style for the lowercase am/pm part */
.card-time span.ampm {
    font-family: 'Roboto', sans-serif; /* Use Roboto for am/pm */
    font-size: 1.1rem; /* Slightly larger am/pm */
    font-weight: 400; /* Regular weight */
    margin-left: 4px;
    vertical-align: baseline;
    color: #777; /* Match screenshot color */
    text-transform: lowercase; /* Ensure lowercase */
}


.card-footer {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem;
    color: #777; /* Match screenshot color */
    text-align: center;
    margin-top: 5px; /* Reduced margin */
    min-height: 1.2em; /* Ensure footer takes space even if empty */
}

.card-footer .card-date {
    /* Inherits color/font */
    margin-right: 5px; /* Space before comma */
}

.card-footer .time-difference {
     /* Inherits color/font */
     margin-left: 0; /* Remove default margin if any */
}

/* Placeholder text in the grid */
.grid-placeholder {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    color: #888;
    padding: 20px;
    font-style: italic;
}

/* Error text style */
.error-text {
    font-size: 1rem !important; /* Override card-time size */
    color: #d9534f;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: normal !important;
    text-align: center; /* Center error text */
    margin: 15px 0 10px 0; /* Match normal time margin */
}
/* Style for the error card footer text */
.error-footer-text {
    font-family: 'Roboto', sans-serif !important;
    font-size: 0.9rem !important;
    color: #d9534f !important;
    text-align: center;
    margin-top: 5px; /* Match normal footer margin */
}


/* Flash animation for existing card */
@keyframes flash {
  0%, 100% { background-color: #ffffff; } /* Use card background */
  50% { background-color: #e7f3ff; } /* Light blue flash */
}
.time-card.flash {
  animation: flash 0.5s ease-in-out;
}

/* Add Clock Button below the grid */
.add-clock-btn {
    grid-column: 1 / -1; /* Span all columns */
    margin-top: 20px; /* Space above the button */
    padding: 10px 25px;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: fit-content; /* Button width based on content */
    justify-self: center; /* Center the button within the grid area */
}

.add-clock-btn:hover {
    background-color: #0056b3;
}


/* 3. Popular Cities List Styles */
.popular-cities-container {
    text-align: center;
    background-color: #ffffff; /* Match local time container */
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    width: 90%; /* Keep container width responsive */
    max-width: 1000px; /* Match grid width */
    border: 1px solid #e5e5e5;
    margin-top: 0; /* Remove extra margin if clock-page-content provides gap */
}

.popular-cities-container h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.popular-cities-list {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap */
    justify-content: center; /* Center buttons */
    gap: 10px 12px; /* Row and column gap */
    /* max-height: 250px; /* Removed */
    /* overflow-y: auto; /* Removed */
    padding: 10px; /* Keep padding around buttons */
    /* border: 1px solid #eee; /* Removed */
    border-radius: 6px; /* Keep border-radius */
    /* background-color: #fdfdfd; /* Removed */
}

/* Style buttons */
.city-list-btn {
    font-family: 'Roboto', sans-serif;
    background-color: #6c757d; /* Bootstrap secondary color */
    color: white;
    border: none;
    padding: 8px 15px;
    font-size: 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    text-align: center;
}

.city-list-btn:hover {
    background-color: #5a6268; /* Darker grey */
    transform: translateY(-1px);
}

.city-list-btn:active {
    transform: scale(0.98);
}

/* Placeholder text in the popular list */
.popular-list-placeholder {
    color: #888;
    font-style: italic;
    width: 100%; /* Span full width */
    text-align: center;
    padding: 10px 0;
}


/* 4. Most Popular Time Zones and Cities (Links) Styles */
.most-popular-container {
    text-align: center;
    background-color: #ffffff; /* Match other containers */
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    width: 90%; /* Keep container width responsive */
    max-width: 1000px; /* Match grid width */
    border: 1px solid #e5e5e5;
    margin-top: 0; /* Already handled by flex gap */
}

.most-popular-container h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/* Container for the links - Restore 2-column layout */
.most-popular-links {
    column-count: 2;
    column-gap: 30px; /* Adjust gap between columns */
    padding: 10px 0; /* Padding top/bottom */
    text-align: left; /* Align text within columns to the left */
    /* Ensure flex properties are removed/overridden */
    display: block;
}

/* Style for individual links */
.city-time-link {
    font-family: 'Roboto', sans-serif;
    display: block; /* Each link on its own line within the column */
    color: #007bff; /* Standard blue link color */
    font-size: 0.95rem;
    text-decoration: none; /* No underline by default */
    margin-bottom: 10px; /* Increased space between links */
    padding: 3px 0 3px 15px; /* Added padding, especially left padding */
    position: relative; /* Needed for absolute positioning of ::before */
    transition: color 0.2s ease, background-color 0.2s ease; /* Added background transition */
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-radius: 4px; /* Slightly rounded corners for hover */
}

/* Add a visual cue (bullet point) */
.city-time-link::before {
    content: '•'; /* Bullet point character */
    position: absolute;
    left: 5px; /* Position bullet */
    top: 3px; /* Adjust vertical alignment */
    color: #6c757d; /* Grey color for the bullet */
    font-size: 1.1rem; /* Adjust bullet size */
}


/* Hover effect for links */
.city-time-link:hover {
    color: #0056b3; /* Darker blue on hover */
    text-decoration: none; /* Keep no underline */
    background-color: #e9ecef; /* Light grey background on hover */
}

/* --- Dark Mode Adjustments --- */

body.dark-mode .local-time-container {
    background-color: #2b2b2b;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.06);
    border: 1px solid #444;
}

body.dark-mode .local-time-digital {
    color: #e0e0e0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.1);
}

body.dark-mode .local-date-display {
    color: #b0b0b0;
}

body.dark-mode .global-time-grid-container {
    background-color: #222; /* Darker background for contrast */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
    border: 1px solid #3a3a3a;
}

body.dark-mode .global-time-grid-container h2 {
    color: #d0d0d0;
    border-bottom: 1px solid #444;
}

body.dark-mode .time-card {
    background-color: #333;
    box-shadow: 0 3px 8px rgba(255, 255, 255, 0.07);
    border: 1px solid #484848;
}

body.dark-mode .time-card:hover {
    box-shadow: 0 5px 12px rgba(255, 255, 255, 0.1);
}

body.dark-mode .card-header {
    border-bottom: 1px solid #444;
}

body.dark-mode .city-name {
    color: #ccc; /* Adjust dark mode color */
}

body.dark-mode .card-icons {
    color: #888; /* Adjust dark mode color */
}
body.dark-mode .icon-options {
    color: #999;
}

body.dark-mode .remove-city-btn {
    color: #777; /* Adjust dark mode color */
}
body.dark-mode .remove-city-btn:hover {
    color: #e57373;
}

body.dark-mode .card-time {
    color: #ddd; /* Adjust dark mode color */
}
body.dark-mode .card-time span.ampm {
    color: #aaa; /* Adjust dark mode color */
}


body.dark-mode .card-footer {
    color: #aaa; /* Adjust dark mode color */
}

body.dark-mode .error-text,
body.dark-mode .error-footer-text {
    color: #e57373 !important; /* Lighter red for errors */
}

body.dark-mode .grid-placeholder {
    color: #666;
}

body.dark-mode .add-clock-btn {
    background-color: #0069d9;
}
body.dark-mode .add-clock-btn:hover {
    background-color: #0056b3;
}


body.dark-mode .popular-cities-container {
    background-color: #2b2b2b; /* Match local time container */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
    border: 1px solid #3a3a3a;
}

body.dark-mode .popular-cities-container h2 {
    color: #d0d0d0;
    border-bottom: 1px solid #444;
}

body.dark-mode .popular-cities-list {
    border: 1px solid #444; /* Restore border */
    background-color: #262626; /* Restore background */
}

body.dark-mode .city-list-btn { /* Adjusted selector */
    background-color: #5a6268; /* Darker grey */
    color: #e0e0e0;
}

body.dark-mode .city-list-btn:hover { /* Adjusted selector */
    background-color: #495057;
    color: #e0e0e0; /* Keep text light */
}

body.dark-mode .popular-list-placeholder {
    color: #666;
}

/* Dark Mode for Most Popular Links Section */
body.dark-mode .most-popular-container {
    background-color: #2b2b2b; /* Match other dark containers */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
    border: 1px solid #3a3a3a;
}

body.dark-mode .most-popular-container h2 {
    color: #d0d0d0;
    border-bottom: 1px solid #444;
}

/* Dark mode link styles */
body.dark-mode .city-time-link {
    color: #6cb2eb; /* Lighter blue */
    background-color: transparent; /* Ensure transparent background */
}

/* Dark mode bullet point */
body.dark-mode .city-time-link::before {
    color: #868e96; /* Lighter grey for dark mode bullet */
}

body.dark-mode .city-time-link:hover {
    color: #9cdcfe; /* Brighter blue on hover */
    background-color: #3a3a3a; /* Darker background on hover */
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .local-time-digital {
        font-size: 3.5rem;
    }
    .local-date-display {
        font-size: 1.1rem;
    }
    .most-popular-links {
        /* Maintain 2 columns on medium screens */
        column-count: 2;
    }
   .card-time {
        font-size: 1.7rem;
    }
    .popular-cities-list {
        max-height: 200px; /* Adjust height for tablets */
    }
}

@media (max-width: 480px) {
    .local-time-digital {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }
    .local-date-display {
        font-size: 1rem;
    }
    .global-time-grid-container h2,
    .popular-cities-container h2,
    .most-popular-container h2 { /* Include this heading */
        font-size: 1.5rem;
    }
    .most-popular-links {
        /* Switch to 1 column on small screens */
        column-count: 1;
    }
   .time-card {
        padding: 12px 15px;
        min-height: 100px;
    }
    .city-name {
        font-size: 1rem;
    }
    .card-time {
        font-size: 1.6rem;
    }
    .card-date {
        font-size: 0.85rem;
    }
    .popular-cities-list {
        max-height: 150px; /* Adjust height for mobile */
        padding: 5px;
    }
    .city-list-btn { /* Adjusted selector */
        font-size: 0.85rem;
        padding: 6px 12px;
    }
}