/**
 * Weather widget background style variations (Theme Options: weather_widget_background)
 */

.weather-widget {
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
}

/* --- Surface fills --- */

.weather-widget.weather-bg-plain {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.weather-widget.weather-bg-transparent {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
}

.weather-widget.weather-bg-transparent .weather-layout-summary__forecast-day,
.weather-widget.weather-bg-transparent .weather-layout-strip__forecast-day {
  background: rgba(148, 163, 184, 0.16);
}

.weather-widget.weather-bg-soft {
  background: linear-gradient(165deg, #e0f2fe 0%, #f0f9ff 48%, #ffffff 100%) !important;
  border: 1px solid rgba(125, 211, 252, 0.35);
}

.weather-widget.weather-bg-dark {
  background: linear-gradient(165deg, #1e3a5f 0%, #0f172a 55%, #020617 100%) !important;
  border: 1px solid rgba(148, 163, 184, 0.18);
}

.weather-widget.weather-bg-dynamic {
  overflow: hidden;
  background: transparent !important;
  border: 0;
}

/* --- Light surfaces: stable dark typography (ignore weather-night) --- */

.weather-widget.weather-bg-plain .weather-content,
.weather-widget.weather-bg-soft .weather-content,
.weather-widget.weather-bg-transparent .weather-content {
  text-shadow: none !important;
}

.weather-widget.weather-bg-plain .sidebar-section-toggle h3,
.weather-widget.weather-bg-soft .sidebar-section-toggle h3,
.weather-widget.weather-bg-transparent .sidebar-section-toggle h3,
.weather-widget.weather-bg-plain h4,
.weather-widget.weather-bg-soft h4,
.weather-widget.weather-bg-transparent h4 {
  color: #1f2937 !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-plain .weather-content .text-gray-800,
.weather-widget.weather-bg-soft .weather-content .text-gray-800,
.weather-widget.weather-bg-transparent .weather-content .text-gray-800,
.weather-widget.weather-bg-plain .weather-content .text-gray-700,
.weather-widget.weather-bg-soft .weather-content .text-gray-700,
.weather-widget.weather-bg-transparent .weather-content .text-gray-700 {
  color: #1f2937 !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-plain .weather-content .text-gray-600,
.weather-widget.weather-bg-soft .weather-content .text-gray-600,
.weather-widget.weather-bg-transparent .weather-content .text-gray-600,
.weather-widget.weather-bg-plain .weather-layout-summary__meta,
.weather-widget.weather-bg-soft .weather-layout-summary__meta,
.weather-widget.weather-bg-transparent .weather-layout-summary__meta,
.weather-widget.weather-bg-plain .weather-layout-collapsible__meta,
.weather-widget.weather-bg-soft .weather-layout-collapsible__meta,
.weather-widget.weather-bg-transparent .weather-layout-collapsible__meta {
  color: #4b5563 !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-plain .weather-content .text-gray-500,
.weather-widget.weather-bg-soft .weather-content .text-gray-500,
.weather-widget.weather-bg-transparent .weather-content .text-gray-500,
.weather-widget.weather-bg-plain .weather-location,
.weather-widget.weather-bg-soft .weather-location,
.weather-widget.weather-bg-transparent .weather-location {
  color: #6b7280 !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-plain .weather-layout-collapsible__bar,
.weather-widget.weather-bg-soft .weather-layout-collapsible__bar,
.weather-widget.weather-bg-transparent .weather-layout-collapsible__bar {
  color: #1f2937;
}

.weather-widget.weather-bg-plain .weather-layout-collapsible__chevron,
.weather-widget.weather-bg-soft .weather-layout-collapsible__chevron,
.weather-widget.weather-bg-transparent .weather-layout-collapsible__chevron {
  color: #6b7280 !important;
}

.weather-widget.weather-bg-plain .weather-layout-summary__forecast-day,
.weather-widget.weather-bg-plain .weather-layout-strip__forecast-day,
.weather-widget.weather-bg-soft .weather-layout-summary__forecast-day,
.weather-widget.weather-bg-soft .weather-layout-strip__forecast-day {
  background: rgba(148, 163, 184, 0.12);
  color: #374151;
}

/* --- Dark surface: light typography --- */

.weather-widget.weather-bg-dark .sidebar-section-toggle h3,
.weather-widget.weather-bg-dark .sidebar-section-toggle,
.weather-widget.weather-bg-dark h4 {
  color: #f8fafc !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-dark .weather-content {
  text-shadow: none !important;
}

.weather-widget.weather-bg-dark .weather-content .text-gray-800,
.weather-widget.weather-bg-dark .weather-content .text-gray-700 {
  color: #f8fafc !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-dark .weather-content .text-gray-600,
.weather-widget.weather-bg-dark .weather-content .text-gray-500,
.weather-widget.weather-bg-dark .weather-location {
  color: #cbd5e1 !important;
  text-shadow: none !important;
}

.weather-widget.weather-bg-dark .weather-layout-summary__meta,
.weather-widget.weather-bg-dark .weather-layout-collapsible__meta,
.weather-widget.weather-bg-dark .weather-layout-summary__meta-sep {
  border-top-color: rgba(148, 163, 184, 0.28);
  color: #cbd5e1 !important;
}

.weather-widget.weather-bg-dark .weather-layout-strip__forecast,
.weather-widget.weather-bg-dark .weather-layout-summary__meta {
  border-top-color: rgba(148, 163, 184, 0.28);
}

.weather-widget.weather-bg-dark .weather-layout-summary__forecast-day,
.weather-widget.weather-bg-dark .weather-layout-strip__forecast-day {
  background: rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
}

.weather-widget.weather-bg-dark .weather-layout-collapsible__bar {
  color: #f8fafc;
}

.weather-widget.weather-bg-dark .weather-layout-collapsible__chevron {
  color: #cbd5e1 !important;
}

/* --- Dynamic sky layering --- */

.weather-widget.weather-layout-summary:not(.weather-bg-dynamic) .weather-animation-container,
.weather-widget.weather-layout-strip:not(.weather-bg-dynamic) .weather-animation-container,
.weather-widget.weather-layout-collapsible:not(.weather-bg-dynamic) .weather-animation-container {
  display: none;
}

.weather-widget.weather-bg-dynamic.weather-layout-summary .weather-content,
.weather-widget.weather-bg-dynamic.weather-layout-strip .weather-content,
.weather-widget.weather-bg-dynamic.weather-layout-collapsible .weather-content {
  position: relative;
  z-index: 2;
}

.weather-widget.weather-bg-dynamic .sidebar-section-toggle,
.weather-widget.weather-bg-dynamic h3,
.weather-widget.weather-bg-dynamic h4 {
  position: relative;
  z-index: 2;
}

/* --- Shadows --- */

.weather-widget.weather-bg-plain.weather-layout-summary,
.weather-widget.weather-bg-plain.weather-layout-strip,
.weather-widget.weather-bg-plain.weather-layout-collapsible,
.weather-widget.weather-bg-plain.weather-layout-full,
.weather-widget.weather-bg-soft.weather-layout-summary,
.weather-widget.weather-bg-soft.weather-layout-strip,
.weather-widget.weather-bg-soft.weather-layout-collapsible,
.weather-widget.weather-bg-soft.weather-layout-full {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

.weather-widget.weather-bg-dark {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28) !important;
}

.weather-widget.weather-bg-dynamic {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

.weather-widget.weather-bg-transparent {
  box-shadow: none !important;
}