/* Weather Widget Container */
/* Base font-size: 16px for em calculations */
.weather-widget-sidebar {
    background-color: #ffffff; /* Light background */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    color: #333;
    max-width: 320px; /* Max width for the widget */
    margin: 0 auto; /* Center the widget */
    text-align: center;
    transition: all 0.3s ease-in-out;
    overflow: hidden; /* Ensure border-radius works */
    border: 1px solid #e0e0e0; /* Subtle border */
    font-size: 16px; /* Base font size for em calculations */
}

.weather-widget-sidebar:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Header Section */
.weather-header-section {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* font-size: 1.6em = 25.6px */
.weather-location {
    font-size: 1.6em; /* 25.6px at 16px base */
    font-weight: 600;
    margin: 0;
    color: #222 !important;
}

/* font-size: 0.95em = 15.2px */
.weather-date {
    font-size: 0.95em; /* 15.2px at 16px base */
    color: #777;
    margin-top: 5px;
}

/* Body Section - Current Weather */
.weather-body {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.weather-current {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 15px; /* Space between icon and temperature */
}

.weather-icon-div {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: brightness(0.9); /* Slightly dim the icon if needed */
}

/* font-size: 1.5em = 24px */
.weather-temperature {
    font-size: 1.5em; /* 24px at 16px base */
    font-weight: 700;
    color: #007bff; /* Primary accent color, e.g., a shade of blue */
    line-height: 1; /* Prevent extra space below temperature */
}

/* font-size: 1.2em = 19.2px */
.weather-condition {
    font-size: 1.2em; /* 19.2px at 16px base */
    font-weight: 500;
    color: #555;
    margin-top: 5px;
}

/* Footer Section - Details */
.weather-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: space-around;
    gap: 10px; /* Space between detail items */
}

.weather-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px; /* Ensures details have minimum width */
}

/* font-size: 0.85em = 13.6px */
.detail-label {
    font-size: 0.85em; /* 13.6px at 16px base */
    color: #888;
    margin-bottom: 3px;
}

/* font-size: 1em = 16px */
.detail-value {
    font-size: 1em; /* 16px at 16px base */
    font-weight: 600;
    color: #444;
}

#click-fahrenheit, #click-celsius{
    translate: no !important;     /* <-- CSS property telling the browser "do not translate" */
    cursor: pointer;
    user-select: none;
}

.unit-toggle-wrapper a {
  display: inline-block;
  padding: 0 0.1em; /* 1.6px at 16px base */
  text-decoration: none;
}

#click-fahrenheit-sidebar { margin-right: 0.1em; } /* 1.6px at 16px base */

#click-celsius:focus,
#click-fahrenheit:focus {
  cursor: pointer;
  outline: none;
}

#light-dark-mode-toggle{
  height: 32px;
  width: 32px;
}

/* font-size: 1.125em = 18px */
#select-theme-label-sidebar {
 font-size: 1.125em; /* 18px at 16px base */
 font-weight: 500;
 margin-bottom: 0.5em; /* 9px at 18px = 0.5rem */
 color: #a0aec0; /* Slightly lighter color for label */
}

#gwpro-theme-mode-select-demo-sidebar{
 width: 95%;
}

#btn-submit-theme-mode-sidebar{
 color: white;
 background-color: #0073aa;
 background-color: #046bd2;
}

#btn-submit-theme-mode-sidebar:hover{
  background-color: #045cb4;
}

/* Responsive Adjustments (Optional, for very small widgets) */
@media (max-width: 400px) {
    .weather-widget {
        padding: 15px;
    }
    /* font-size: 1.4em = 22.4px */
    .weather-location {
        font-size: 1.4em; /* 22.4px at 16px base */
        color: #222 !important;
    }
    /* font-size: 1.5em = 24px */
    .weather-temperature {
        font-size: 1.5em; /* 24px at 16px base */
    }
    .weather-icon-div {
      width: 60px;
      height: 60px;
    }
    /* font-size: 1.1em = 17.6px */
    .weather-condition {
        font-size: 1.1em; /* 17.6px at 16px base */
    }
    .weather-current {
        flex-direction: row; /* Keep side-by-side layout */
        justify-content: center;
        gap: 10px;
    }
    .weather-footer {
        justify-content: space-between; /* Distribute items better */
    }
}