:root {
    --light-gray-bg: #f1f1f2;
    --container-shadow: rgba(0, 0, 0, 0.1);
    --text-color: #ffffff; /* All text set to white */
    --hover-shadow: rgba(0, 0, 0, 0.15);
    --gray-gradient-start: #fff;
    --gray-gradient-end: #f00;
    --dark-gray: #4a4a4a;
    --medium-gray-bg: #9e9e9e;
    --white-text: #ffffff; /* All text including temperature set to white */
    --accent-temp-color: #ff5520; /* Maintain original accent color for temperature */
    --accent-temp-border: #fff;
    --darker-gray: #555;
    --humidity-text-color: #6b7280;
    --label-font-weight: 500;
    --data-font-weight: 600;
    --error-color: #e74c3c;

    --time-text: #000;
    --time-bg: #ffffff;
    --time-bg-gradient-start: #fff8f6; /* Brighter, vibrant gradient for date */
    --time-bg-gradient-end: #fff; /* Brighter, vibrant gradient for date */

    --date-text-color: #ffffff; /* Lighter color for date text */
    --date-bg-gradient-start: #0074d9; /* Changed to blue */
    --date-bg-gradient-end: #005f99; /* Changed to darker blue */

    /* Day-specific gradient backgrounds using shades of blue */
    --monday-gradient-start: #001f3f; /* Dark blue */
    --monday-gradient-end: #0074d9; /* Lighter blue */
    --tuesday-gradient-start: #0074d9; /* Medium blue */
    --tuesday-gradient-end: #7fdbff; /* Light blue */
    --wednesday-gradient-start: #005b99; /* Darker cyan */
    --wednesday-gradient-end: #66b3ff; /* Light cyan */
    --thursday-gradient-start: #003366; /* Very dark blue */
    --thursday-gradient-end: #005f99; /* Medium dark blue */
    --friday-gradient-start: #005f99; /* Medium dark blue */
    --friday-gradient-end: #66ccff; /* Light blue */
    --saturday-gradient-start: #004080; /* Dark blue-gray */
    --saturday-gradient-end: #7fb3ff; /* Light blue-gray */
    --sunday-gradient-start: #005f99; /* Very dark blue */
    --sunday-gradient-end: #66ccff; /* Light cyan */
}



.forecast-container {
    max-width: 1500px;
    margin: auto;
    padding: 20px;
    background-color: var(--light-gray-bg); /* Light gray background */
    border-radius: 12px;
    box-shadow: 0 6px 12px var(--container-shadow);
    color: var(--text-color);
    font-family: sans-serif;
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.forecast-item {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px var(--hover-shadow); /* Softer shadow */
    background: linear-gradient(135deg, var(--gray-gradient-start), var(--gray-gradient-end)); /* Grayscale gradient */
    transition: transform 0.2s, background 0.3s ease-in-out; /* Hover animation */
    color: var(--text-color);
}

.forecast-date {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    color: var(--date-text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    background: linear-gradient(circle, var(--date-bg-gradient-start), var(--date-bg-gradient-end));
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--container-shadow);
    display: block; /* Change to block to take full width */
    width: 100%; /* Adjust width to fit the content */
}

.forecast-time {
    font-size: 15px;
    text-align: center;
    background: linear-gradient(145deg, var(--time-bg-gradient-start), var(--time-bg-gradient-end)); /* Gradient background */
    color: var(--time-text); /* Text color */
    padding: 5px 15px;
    border-radius: 10px;
    margin-top: 10px;
    display: block; /* Change to block to take full width */
    width: fit-content; /* Adjust width to fit the content */
    margin: 10px auto; /* Center it horizontally */
    
    /* Border to enhance the 3D effect */
    border: 1px solid rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; /* Smooth hover transition */
}

.forecast-temperature {
    text-align: center;
    color: var(--white-text); /* Set temperature text to white */
    font-size: 30px;
    padding: 15px;
    margin: 15px 0;
    border: 2px solid var(--accent-temp-border); /* Accent border */
    border-radius: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Added shadow */
}

.forecast-temp-unit {
    font-size: 0.8em;
    font-weight: normal;
    color: var(--white-text); /* Set unit text to white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Added shadow */
}

.forecast-description {
    margin-bottom: 0;
    text-align: center;
    font-weight: bold;
    color: var(--white-text); /* Set description text to white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Added shadow */
}

.forecast-description img {
    vertical-align: middle;
    margin-right: 8px;
    background-color: transparent; /* background for icons */
}

.forecast-humidity {
    margin-top: 15px;
}

.forecast-details div {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Align items vertically */
    font-size: 13px;
    color: var(--humidity-text-color);
    padding: 0 10px; /* Add padding for tighter grouping */
}

.forecast-label {
    text-align: left;
    font-weight: var(--label-font-weight);
    margin-right: 10px; /* Adjust space between label and data */
    line-height: 1.5;
    color: var(--white-text); /* Set label text to white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Added shadow */
}

.forecast-data {
    text-align: right;
    font-weight: var(--data-font-weight);
    color: var(--white-text); /* Set data text to white */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); /* Added shadow */
}


.flex-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 20px; /* Space between elements */
}

.css-editor {
    width: 100%; /* Make sure it's 100% */
}

.weather-shortcode-container {
    margin-top: 10px; /* Add some space between editor and shortcode */
}




.error-message,
.no-data-message {
    color: var(--error-color); /* Red for error messages */
    text-align: center;
    font-weight: bold;
}

/* Gradient background for each day */
.monday-color {
    background: linear-gradient(135deg, var(--monday-gradient-start), var(--monday-gradient-end)); /* Dark blue */
}

.tuesday-color {
    background: linear-gradient(135deg, var(--tuesday-gradient-start), var(--tuesday-gradient-end)); /* Dark purple */
}

.wednesday-color {
    background: linear-gradient(135deg, var(--wednesday-gradient-start), var(--wednesday-gradient-end)); /* Dark green */
}

.thursday-color {
    background: linear-gradient(135deg, var(--thursday-gradient-start), var(--thursday-gradient-end)); /* Dark maroon */
}

.friday-color {
    background: linear-gradient(135deg, var(--friday-gradient-start), var(--friday-gradient-end)); /* Dark forest green */
}

.saturday-color {
    background: linear-gradient(135deg, var(--saturday-gradient-start), var(--saturday-gradient-end)); /* Dark olive green */
}

.sunday-color {
    background: linear-gradient(135deg, var(--sunday-gradient-start), var(--sunday-gradient-end)); /* Dark brown */
}