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

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

/* Header Section - Dark Mode */
.weather-header-section {
  margin-bottom: 15px;
  border-bottom: 1px solid #333; /* Darker border */
  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: #fff !important; /* White location text */
}

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

/* Body Section - Current Weather - Dark Mode */
.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;
}

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

/* font-size: 2em = 32px */
.weather-temperature {
  font-size: 2em; /* 32px at 16px base */
  font-weight: 700;
  color: #64b5f6; /* Adjusted accent color for better visibility on dark */
  line-height: 1;
}

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

/* Footer Section - Details - Dark Mode */
.weather-footer {
  border-top: 1px solid #333; /* Darker border */
  padding-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
}

.weather-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

/* 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: #ddd;
}

#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) - Dark Mode */
@media (max-width: 400px) {
  .weather-widget-sidebar {
      padding: 15px;
  }
  /* font-size: 1.4em = 22.4px */
  .weather-location {
      font-size: 1.4em; /* 22.4px at 16px base */
      color: #fff !important; /* White location text */
  }
  /* 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;
      justify-content: center;
      gap: 10px;
  }
  .weather-footer {
      justify-content: space-between;
  }
}