/**
 * Weather Widget Stylings
 */

/* iOS Weather Widget Label */
.ios-weather-widget-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.ios-weather-widget__label {
  display: block;
  margin-top: 6px;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(0, 0, 0, 0.3);
}

/* ============================================
   WEATHER WIDGET - macOS Menu Bar Style
   Follows Apple HIG for menu bar extras
   ============================================ */

.weather-widget {
  position: relative;
  display: inline-flex;
}

/* ============================================
   WEATHER WIDGET - macOS Desktop Widget Style
   Sonoma-style squared widget with vibrancy
   Small size: 170x170px (similar to macOS widget grid)
   ============================================ */

.macos-weather-widget {
  position: relative;
  width: 170px;
  height: 170px;
  min-width: 170px;
  min-height: 170px;
  max-width: 170px;
  max-height: 170px;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.macos-weather-widget:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.macos-weather-widget:active {
  transform: scale(0.98);
}

/* Container with weather tint */
.macos-weather__container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 14px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Glass background */
.macos-weather__glass {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(44, 44, 46, 0.75);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  pointer-events: none;
}

/* Weather tint overlays */
.macos-weather--sunny .macos-weather__glass {
  background: linear-gradient(135deg, rgba(74, 144, 217, 0.3) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--partly-cloudy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(93, 156, 236, 0.25) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--cloudy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(99, 110, 114, 0.3) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--foggy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(127, 140, 141, 0.3) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--rainy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(61, 90, 128, 0.35) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--snowy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(168, 181, 199, 0.3) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--stormy .macos-weather__glass {
  background: linear-gradient(135deg, rgba(44, 62, 80, 0.4) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--night .macos-weather__glass {
  background: linear-gradient(135deg, rgba(15, 22, 38, 0.4) 0%, rgba(44, 44, 46, 0.75) 100%);
}

.macos-weather--default .macos-weather__glass {
  background: rgba(44, 44, 46, 0.75);
}

/* Content layer - compact stacked layout for square widget */
.macos-weather__content {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  z-index: 1;
}

/* Left section - temp and condition */
.macos-weather__left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.macos-weather__temp {
  font-size: 42px;
  font-weight: 200;
  color: #ffffff;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

.macos-weather__condition {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  margin-top: 2px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.macos-weather__location-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

.macos-weather__location {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.macos-weather__refreshing {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Right section - icon only for compact layout */
.macos-weather__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.macos-weather__icon {
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Hide details in compact square layout */
.macos-weather__details {
  display: none;
}

.macos-weather__detail {
  display: flex;
  gap: 4px;
  font-size: 10px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.macos-weather__detail-label {
  color: rgba(255, 255, 255, 0.5);
}

.macos-weather__detail-value {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Footer - compact for square widget */
.macos-weather__footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
}

.macos-weather__footer-item {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* Loading state */
.macos-weather__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(44, 44, 46, 0.75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.macos-weather__loading-spinner {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
  animation: spin 1s linear infinite;
}

.macos-weather__loading-text {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* Error state */
.macos-weather__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(44, 44, 46, 0.75);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.macos-weather__error-icon {
  font-size: 28px;
}

.macos-weather__error-text {
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 0 16px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.macos-weather__error-hint {
  margin-top: 4px;
  font-size: 11px;
  color: #0A84FF;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* Error banner */
.macos-weather__error-banner {
  position: relative;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(255, 149, 0, 0.15);
  border-radius: 8px;
  font-size: 11px;
  color: #FF9500;
  text-align: center;
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

/* ============================================
   iOS WEATHER WIDGET - Pixel-Perfect Implementation
   
   Based on iOS 17/18 Weather Widget (Large rectangular)
   Matches the exact iOS Weather app home screen widget
   
   Layout:
   ┌─────────────────────────────────────────────────────┐
   │  Location ↗                                         │
   │  29°                              ☁                │
   │                                Overcast            │
   │                              H:30° L:22°           │
   │─────────────────────────────────────────────────────│
   │  14   15   16   17   18   19    (forecast strip)   │
   │  🌧   🌧   ☁   ☁   🌧   🌧                        │
   │  29°  30°  28°  26°  26°  25°                      │
   └─────────────────────────────────────────────────────┘
   ============================================ */

/* Container - full width */
.ios-widget-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 6px;
}

/* Widget canvas - FULL WIDTH, iOS Large widget height */
.ios-widget {
  position: relative;
  width: 100%;
  height: 170px;
  min-height: 170px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.1);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.ios-widget:active {
  transform: scale(0.98);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.15),
    0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Widget label - iOS home screen style */
.ios-widget-label {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.08px;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* ============================================
   Card Base & Weather Backgrounds
   iOS Weather app exact gradient specifications
   ============================================ */

.ios-widget-card {
  position: absolute;
  inset: 0;
  /* Default blue sky gradient */
  background: linear-gradient(180deg, 
    #5B8FC9 0%, 
    #4A7EB8 35%, 
    #3D6FA8 70%, 
    #356098 100%
  );
}

/* Clear/Sunny Day - bright blue */
.ios-widget-card--clear {
  background: linear-gradient(180deg, 
    #5DADE2 0%, 
    #3498DB 35%, 
    #2980B9 70%, 
    #1F618D 100%
  );
}

/* Partly Cloudy - muted blue */
.ios-widget-card--partly-cloudy {
  background: linear-gradient(180deg, 
    #7BA3C9 0%, 
    #5A8AB8 35%, 
    #4A7AA8 70%, 
    #3A6A98 100%
  );
}

/* Cloudy/Overcast - gray-blue (matching screenshot) */
.ios-widget-card--cloudy {
  background: linear-gradient(180deg, 
    #6E85A0 0%, 
    #5A7590 35%, 
    #4A6580 70%, 
    #3A5570 100%
  );
}

/* Foggy/Mist - light gray */
.ios-widget-card--foggy {
  background: linear-gradient(180deg, 
    #8A9AAA 0%, 
    #7A8A9A 35%, 
    #6A7A8A 70%, 
    #5A6A7A 100%
  );
}

/* Rainy - darker blue-gray */
.ios-widget-card--rainy {
  background: linear-gradient(180deg, 
    #5A7A9A 0%, 
    #4A6A8A 35%, 
    #3A5A7A 70%, 
    #2A4A6A 100%
  );
}

/* Snowy - cool white-blue */
.ios-widget-card--snowy {
  background: linear-gradient(180deg, 
    #9AB0C8 0%, 
    #8AA0B8 35%, 
    #7A90A8 70%, 
    #6A8098 100%
  );
}

/* Stormy/Thunder - dark gray */
.ios-widget-card--stormy {
  background: linear-gradient(180deg, 
    #4A5A6A 0%, 
    #3A4A5A 35%, 
    #2A3A4A 70%, 
    #1A2A3A 100%
  );
}

/* Night - deep blue/black */
.ios-widget-card--night {
  background: linear-gradient(180deg, 
    #1A2A40 0%, 
    #101828 35%, 
    #0A1018 70%, 
    #050810 100%
  );
}

/* Skeleton loading */
.ios-widget-card--skeleton {
  background: linear-gradient(180deg, 
    #5A6A7A 0%, 
    #4A5A6A 35%, 
    #3A4A5A 70%, 
    #2A3A4A 100%
  );
}

/* Error state */
.ios-widget-card--error {
  background: linear-gradient(180deg, 
    #C05050 0%, 
    #A04040 35%, 
    #803030 70%, 
    #602020 100%
  );
}

/* ============================================
   Glass Morphism Layer
   iOS vibrancy effect with subtle white overlay
   ============================================ */

.ios-widget-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.02) 100%
  );
  backdrop-filter: saturate(180%) blur(30px);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  pointer-events: none;
}

/* ============================================
   Content Layout - Two sections
   ============================================ */

.ios-widget-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

.ios-widget-body--center {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
}

/* ============================================
   Top Section: Two-column layout
   Left: Location + Temperature
   Right: Icon + Condition + H/L
   ============================================ */

.ios-widget-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

/* Left column */
.ios-widget-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
}

/* Location with GPS icon */
.ios-widget-location {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.2px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Location/GPS icon (navigation arrow) */
.ios-widget-location-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.ios-widget-location-icon ion-icon {
    width: 13px;
    height: 13px;
    color: currentColor;
    opacity: 0.9;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 1));
}

.ios-widget-location-arrow {
  font-size: 11px;
  opacity: 0.9;
}

/* Large temperature - iOS uses thin weight */
.ios-widget-temp {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -1.5px;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  margin-top: 0;
}

/* Right column */
.ios-widget-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 1px;
  padding-top: 0;
}

/* Weather icon - 28×28pt (iOS accurate) */
.ios-widget-icon {
  width: 28px;
  height: 28px;
  color: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style for ion-icon elements */
.ios-widget-icon ion-icon {
  width: 100%;
  height: 100%;
  color: inherit;
}

.ios-widget-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Condition text */
.ios-widget-condition {
  font-size: 13px;
  letter-spacing: -0.15px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  text-align: right;
}

/* H/L temps */
.ios-widget-hilo {
  font-size: 11px;
  letter-spacing: -0.15px;
  opacity: 0.9;
  text-align: right;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Cached indicator */
.ios-widget-cached {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  letter-spacing: -0.02px;
}

/* ============================================
   Bottom Section: Hourly forecast strip
   ============================================ */

.ios-widget-forecast {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 6px;
  margin-top: auto;
  margin-left: -16px;
  margin-right: -16px;
  flex-shrink: 0;
}

.ios-widget-forecast-day,
.ios-widget-forecast-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.ios-widget-forecast-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.1px;
  opacity: 0.85;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.ios-widget-forecast-icon {
  width: 24px;
  height: 24px;
  color: white;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
}

.ios-widget-forecast-icon ion-icon {
  width: 100%;
  height: 100%;
  color: inherit;
}

.ios-widget-forecast-temp {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.15px;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Skeleton Loading State
   ============================================ */

.ios-skeleton {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  animation: ios-widget-pulse 1.5s ease-in-out infinite;
}

@keyframes ios-widget-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ios-skeleton--location {
  width: 100px;
  height: 15px;
}

.ios-skeleton--temp {
  width: 100px;
  height: 72px;
  border-radius: 8px;
}

.ios-skeleton--icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.ios-skeleton--condition {
  width: 80px;
  height: 14px;
}

.ios-skeleton--hilo {
  width: 90px;
  height: 14px;
}

.ios-skeleton--forecast-day {
  width: 24px;
  height: 12px;
}

.ios-skeleton--forecast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.ios-skeleton--forecast-temp {
  width: 24px;
  height: 14px;
}

/* ============================================
   Error State
   ============================================ */

.ios-widget-error-icon {
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
}

.ios-widget-error-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.24px;
}

.ios-widget-error-subtitle {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.08px;
  opacity: 0.75;
}