/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* CSS Variables */
:root {
  /* Colors - Using Anthem Theme Colors */
  --anthem-current-weather-primary: var(--wp--preset--color--anthem-primary-300);
  --anthem-current-weather-secondary: var(--wp--preset--color--anthem-secondary-300);
  --anthem-current-weather-gradient-primary: linear-gradient(135deg, var(--wp--preset--color--anthem-primary-300) 0%, var(--wp--preset--color--anthem-primary-400) 100%);
  --anthem-current-weather-gradient-secondary: linear-gradient(135deg, var(--wp--preset--color--anthem-quarternary-300) 0%, var(--wp--preset--color--anthem-quarternary-400) 100%);
  --anthem-current-weather-gradient-sunny: linear-gradient(135deg, var(--wp--preset--color--anthem-primary-200) 0%, var(--wp--preset--color--anthem-primary-100) 50%, var(--wp--preset--color--anthem-primary-75) 100%);
  --anthem-current-weather-gradient-cloudy: linear-gradient(135deg, var(--wp--preset--color--anthem-tertiary-200) 0%, var(--wp--preset--color--anthem-tertiary-100) 100%);
  --anthem-current-weather-gradient-rain: linear-gradient(135deg, var(--wp--preset--color--anthem-quarternary-300) 0%, var(--wp--preset--color--anthem-quarternary-400) 100%);
  --anthem-current-weather-gradient-snow: linear-gradient(135deg, var(--wp--preset--color--anthem-primary-50) 0%, var(--wp--preset--color--anthem-primary-75) 100%);
  --anthem-current-weather-gradient-storm: linear-gradient(135deg, var(--wp--preset--color--neutral-800) 0%, var(--wp--preset--color--neutral-700) 100%);
  
  /* Text Colors */
  --anthem-current-weather-text-white: var(--wp--preset--color--base-white);
  --anthem-current-weather-text-dark: var(--wp--preset--color--neutral-900);
  --anthem-current-weather-text-gray: var(--wp--preset--color--neutral-600);
  --anthem-current-weather-text-light-gray: var(--wp--preset--color--neutral-500);
  --anthem-current-weather-text-high: var(--wp--preset--color--base-error);
  --anthem-current-weather-text-low: var(--wp--preset--color--anthem-primary-400);
  
  /* Background Colors */
  --anthem-current-weather-bg-white: var(--wp--preset--color--base-white);
  --anthem-current-weather-bg-light: var(--wp--preset--color--neutral-10);
  --anthem-current-weather-bg-overlay: rgba(0,0,0,0.5);
  --anthem-current-weather-bg-success: rgba(0,197,46,0.2);
  --anthem-current-weather-bg-error: rgba(244,37,0,0.2);
  --anthem-current-weather-bg-warning: rgba(200,173,55,0.2);
  
  /* Border Colors */
  --anthem-current-weather-border-light: var(--wp--preset--color--neutral-30);
  --anthem-current-weather-border-success: rgba(0,197,46,0.3);
  --anthem-current-weather-border-error: rgba(244,37,0,0.3);
  --anthem-current-weather-border-warning: rgba(200,173,55,0.3);
  
  /* Shadows */
  --anthem-current-weather-shadow-light: 0 4px 10px rgba(0,0,0,0.1);
  --anthem-current-weather-shadow-medium: 0 10px 30px rgba(0,0,0,0.15);
  --anthem-current-weather-shadow-heavy: 0 15px 40px rgba(0,0,0,0.2);
  --anthem-current-weather-shadow-popup: 0 20px 60px rgba(0,0,0,0.3);
  
  /* Spacing - Using Anthem Theme Spacing */
  --anthem-current-weather-spacing-xs: var(--wp--preset--spacing--xs);
  --anthem-current-weather-spacing-sm: var(--wp--preset--spacing--s);
  --anthem-current-weather-spacing-md: var(--wp--preset--spacing--m);
  --anthem-current-weather-spacing-lg: var(--wp--preset--spacing--l);
  --anthem-current-weather-spacing-xl: var(--wp--preset--spacing--xl);
  --anthem-current-weather-spacing-xxl: var(--wp--preset--spacing--2-xl);
  
  /* Border Radius */
  --anthem-current-weather-radius-sm: 6px;
  --anthem-current-weather-radius-md: 10px;
  --anthem-current-weather-radius-lg: 15px;
  --anthem-current-weather-radius-xl: 20px;
  --anthem-current-weather-radius-full: 50%;
  
  /* Font Sizes - Using Anthem Theme Font Sizes */
  --anthem-current-weather-font-xs: var(--wp--preset--font-size--xs);
  --anthem-current-weather-font-sm: var(--wp--preset--font-size--s);
  --anthem-current-weather-font-base: var(--wp--preset--font-size--m);
  --anthem-current-weather-font-lg: var(--wp--preset--font-size--l);
  --anthem-current-weather-font-xl: 1.3em;
  --anthem-current-weather-font-2xl: 1.5em;
  --anthem-current-weather-font-3xl: 2em;
  --anthem-current-weather-font-4xl: 2.5em;
  --anthem-current-weather-font-5xl: 3em;
  --anthem-current-weather-font-6xl: 3.5em;
  
  /* Transitions */
  --anthem-current-weather-transition: all 0.3s ease;
  --anthem-current-weather-transition-fast: all 0.2s ease;
  
  /* Z-Index */
  --anthem-current-weather-z-popup: 9999;
  --anthem-current-weather-z-overlay: 9998;
  
  /* Layout */
  --anthem-current-weather-max-width: 400px;
}

/* Modern Weather Widget - Two Section Design */
.anthem-weather-widget {
  max-width: var(--anthem-current-weather-max-width);
  margin: var(--anthem-current-weather-spacing-xl) auto;
  border-radius: var(--anthem-current-weather-radius-xl);
  overflow: hidden;
  box-shadow: var(--anthem-current-weather-shadow-medium), var(--anthem-current-weather-shadow-light);
  font-family: var(--wp--preset--font-family--roboto);
  transition: var(--anthem-current-weather-transition);
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: var(--anthem-current-weather-shadow-heavy), 0 6px 15px rgba(0,0,0,0.15);
  }
}

/* Top Section - Current */
.anthem-weather-current {
  background: var(--anthem-current-weather-gradient-primary);
  color: var(--anthem-current-weather-text-white);
  padding: var(--anthem-current-weather-spacing-lg) var(--anthem-current-weather-spacing-lg);
  position: relative;
  overflow: hidden;
}

/* Location Header */
.anthem-location-header {
  display: flex;
  align-items: center;
  gap: var(--anthem-current-weather-spacing-sm);
  margin-bottom: var(--anthem-current-weather-spacing-xl);
  font-size: var(--anthem-current-weather-font-lg);
  font-weight: 600;
  position: relative;
  z-index: 2;
  
  .anthem-location-icon {
    font-size: var(--anthem-current-weather-font-xl);
  }
  
  .anthem-location-name {
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    
    &.clickable {
      cursor: pointer;
      transition: var(--anthem-current-weather-transition);
      padding: 4px var(--anthem-current-weather-spacing-sm);
      border-radius: var(--anthem-current-weather-radius-sm);
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      
      &:hover {
        background: rgba(255,255,255,0.2);
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      }
    }
  }
}

/* Loading State */
.anthem-loading {
  text-align: center;
  padding: 40px var(--anthem-current-weather-spacing-xl);
  color: var(--anthem-current-weather-text-gray);
  font-size: var(--anthem-current-weather-font-lg);
  background: var(--anthem-current-weather-bg-white);
  border-radius: var(--anthem-current-weather-radius-xl);
  box-shadow: var(--anthem-current-weather-shadow-medium);
}

/* Loading Overlay for Weather Widget */
.anthem-weather-widget {
  position: relative;
  
  .anthem-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: var(--anthem-current-weather-radius-xl);
    
    .anthem-loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid var(--anthem-current-weather-border-light);
      border-top: 3px solid var(--anthem-current-weather-primary);
      border-radius: 50%;
      animation: anthem-spin 1s linear infinite;
      margin-bottom: var(--anthem-current-weather-spacing-lg);
    }
    
    .anthem-loading-text {
      color: var(--anthem-current-weather-text-gray);
      font-size: var(--anthem-current-weather-font-lg);
      font-weight: 500;
      text-align: center;
      max-width: 200px;
      line-height: 1.4;
    }
  }
  
  &.loading {
    .anthem-loading-overlay {
      display: flex;
    }
    
    /* Skeleton loading animation for content */
    .anthem-skeleton-content {
      display: none;
    }
    
    .anthem-skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: anthem-skeleton-loading 1.5s infinite;
      border-radius: var(--anthem-current-weather-radius-sm);
    }
    
    .anthem-skeleton-text {
      height: 1em;
      margin-bottom: var(--anthem-current-weather-spacing-sm);
      
      &:nth-child(1) { width: 60%; }
      &:nth-child(2) { width: 80%; }
      &:nth-child(3) { width: 40%; }
    }
    
    .anthem-skeleton-icon {
      width: 50px;
      height: 50px;
      border-radius: var(--anthem-current-weather-radius-full);
    }
    
    .anthem-skeleton-temp {
      width: 80px;
      height: 60px;
      border-radius: var(--anthem-current-weather-radius-sm);
    }
    
    .anthem-skeleton-content {
      display: block;
    }
  }
}

@keyframes anthem-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes anthem-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton loading content */
.anthem-skeleton-content {
  .anthem-location-header {
    .anthem-location-name {
      .anthem-skeleton-text {
        width: 120px;
        height: 1.2em;
      }
    }
  }
  
  .anthem-main-weather {
    .anthem-temperature {
      .anthem-skeleton-temp {
        width: 100px;
        height: 80px;
      }
    }
    
    .anthem-condition {
      .anthem-skeleton-icon {
        width: 60px;
        height: 60px;
        margin-bottom: var(--anthem-current-weather-spacing-sm);
      }
      
      .anthem-skeleton-text {
        width: 80px;
        height: 1em;
      }
    }
  }
  
  .anthem-current-details {
    .anthem-detail-item {
      .anthem-skeleton-text {
        width: 100px;
        height: 1em;
      }
    }
  }
  
  .anthem-hourly-forecast {
    .anthem-hourly-item {
      .anthem-skeleton-text {
        width: 30px;
        height: 0.8em;
        margin-bottom: var(--anthem-current-weather-spacing-xs);
      }
      
      .anthem-skeleton-icon {
        width: 30px;
        height: 30px;
        margin-bottom: var(--anthem-current-weather-spacing-xs);
      }
      
      .anthem-skeleton-text:last-child {
        width: 25px;
        height: 0.8em;
      }
    }
  }
  
  .anthem-weather-forecast {
    .anthem-forecast-item {
      .anthem-skeleton-text {
        width: 60px;
        height: 1em;
      }
      
      .anthem-skeleton-icon {
        width: 30px;
        height: 30px;
      }
      
      .anthem-skeleton-text:last-child {
        width: 80px;
        height: 1em;
      }
    }
  }
}

/* Main Weather Display */
.anthem-main-weather {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--anthem-current-weather-spacing-xxl);
  position: relative;
  z-index: 2;
  
  .anthem-temperature {
    font-size: var(--anthem-current-weather-font-6xl);
    font-weight: 700;
    font-family: var(--wp--preset--font-family--roboto);
    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
    line-height: 1;
    letter-spacing: -2px;
  }
  
  .anthem-condition {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--anthem-current-weather-spacing-xs);
    
    .anthem-condition-icon {
      font-size: var(--anthem-current-weather-font-3xl);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    
    .anthem-condition-text {
      font-size: var(--anthem-current-weather-font-m);
      font-weight: 500;
      font-family: var(--wp--preset--font-family--roboto);
      text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      max-width: 120px;
      line-height: 1.3;
    }
  }
}

/* Current Weather Details (Left Column) */
.anthem-current-details {
  display: flex;
  flex-direction: column;
  gap: var(--anthem-current-weather-spacing-md);
  margin-bottom: var(--anthem-current-weather-spacing-xl);
  position: relative;
  z-index: 2;
  
  .anthem-detail-item {
    display: flex;
    align-items: center;
    gap: var(--anthem-current-weather-spacing-md);
    font-size: var(--anthem-current-weather-font-sm);
    font-weight: 500;
    
    .anthem-detail-icon {
      font-size: var(--anthem-current-weather-font-lg);
      width: 20px;
      text-align: center;
    }
    
    .anthem-detail-text {
      font-family: var(--wp--preset--font-family--roboto);
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
  }
}

/* Hourly Forecast (Right Column) */
.anthem-hourly-forecast {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  
  .anthem-hourly-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--anthem-current-weather-spacing-xs);
    text-align: center;
    
    .anthem-hourly-time {
      font-size: var(--anthem-current-weather-font-sm);
      font-weight: 500;
      font-family: var(--wp--preset--font-family--roboto);
      opacity: 0.9;
    }
    
    .anthem-hourly-icon {
      font-size: var(--anthem-current-weather-font-xl);
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    }
    
    .anthem-hourly-temp {
      font-size: var(--anthem-current-weather-font-base);
      font-weight: 600;
      font-family: var(--wp--preset--font-family--roboto);
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
  }
}

/* Bottom Section - Multi-day Forecast (White Background) */
.anthem-weather-forecast {
  background: var(--anthem-current-weather-bg-white);
  padding: var(--anthem-current-weather-spacing-lg);
  border-top: 1px solid rgba(0,0,0,0.1);
  
  .anthem-forecast-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--anthem-current-weather-spacing-md) 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--anthem-current-weather-text-dark);
    
    &:last-child {
      border-bottom: none;
    }
    
    .anthem-forecast-day {
      font-size: var(--anthem-current-weather-font-m);
      font-weight: 500;
      font-family: var(--wp--preset--font-family--roboto);
      color: var(--anthem-current-weather-text-light-gray);
      flex: 1;
    }
    
    .anthem-forecast-icon {
      font-size: var(--anthem-current-weather-font-xl);
      margin: 0 var(--anthem-current-weather-spacing-lg);
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }
    
    .anthem-forecast-temps {
      display: flex;
      gap: var(--anthem-current-weather-spacing-lg);
      font-weight: 600;
      font-family: var(--wp--preset--font-family--roboto);
      
      .anthem-forecast-high {
        color: var(--anthem-current-weather-text-high);
      }
      
      .anthem-forecast-low {
        color: var(--anthem-current-weather-text-low);
      }
    }
  }
}

/* Weather condition specific gradients for top section */
.anthem-weather-widget {
  &[data-weather*="sunny"] .anthem-weather-current,
  &[data-weather*="clear"] .anthem-weather-current {
    background: var(--anthem-current-weather-gradient-sunny);
  }
  
  &[data-weather*="cloudy"] .anthem-weather-current,
  &[data-weather*="overcast"] .anthem-weather-current {
    background: var(--anthem-current-weather-gradient-cloudy);
  }
  
  &[data-weather*="rain"] .anthem-weather-current,
  &[data-weather*="shower"] .anthem-weather-current {
    background: var(--anthem-current-weather-gradient-rain);
  }
  
  &[data-weather*="snow"] .anthem-weather-current {
    background: var(--anthem-current-weather-gradient-snow);
  }
  
  &[data-weather*="storm"] .anthem-weather-current,
  &[data-weather*="thunder"] .anthem-weather-current {
    background: var(--anthem-current-weather-gradient-storm);
  }
}

/* Location Popup Styles */
.anthem-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--anthem-current-weather-bg-overlay);
  backdrop-filter: blur(5px);
  z-index: var(--anthem-current-weather-z-popup);
  display: flex;
  align-items: center;
  justify-content: center;
  
  .anthem-popup-content {
    background: var(--anthem-current-weather-bg-white);
    border-radius: var(--anthem-current-weather-radius-xl);
    box-shadow: var(--anthem-current-weather-shadow-popup);
    max-width: var(--anthem-current-weather-max-width);
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: popupSlideIn 0.3s ease-out;
  }
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.anthem-popup-header {
  background: var(--anthem-current-weather-primary);
  color: var(--anthem-current-weather-text-white);
  padding: var(--anthem-current-weather-spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  h3 {
    margin: 0;
    font-size: var(--wp--preset--font-size--l);
    font-weight: 600;
    font-family: var(--wp--preset--font-family--roboto);
  }
  
  .anthem-popup-close {
    background: none;
    border: none;
    color: var(--anthem-current-weather-text-white);
    font-size: var(--anthem-current-weather-font-3xl);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--anthem-current-weather-radius-full);
    transition: var(--anthem-current-weather-transition);
    
    &:hover {
      background: rgba(255,255,255,0.2);
      transform: scale(1.1);
    }
  }
}

.anthem-popup-body {
  padding: var(--anthem-current-weather-spacing-xxl);
  
  .anthem-form-field {
    margin-bottom: var(--anthem-current-weather-spacing-xl);
    
    label {
      display: block;
      font-weight: 600;
      margin-bottom: var(--anthem-current-weather-spacing-sm);
      color: var(--anthem-current-weather-text-dark);
    }
    
    input[type="text"] {
      width: 100%;
      padding: var(--anthem-current-weather-spacing-md) var(--anthem-current-weather-spacing-lg);
      border: 2px solid var(--anthem-current-weather-border-light);
      border-radius: var(--anthem-current-weather-radius-md);
      font-size: var(--anthem-current-weather-font-base);
      transition: var(--anthem-current-weather-transition);
      box-sizing: border-box;
      
      &:focus {
        outline: none;
        border-color: var(--anthem-current-weather-primary);
        box-shadow: 0 0 0 3px rgba(74,111,252,0.1);
      }
    }
    
    small {
      display: block;
      margin-top: var(--anthem-current-weather-spacing-xs);
      font-size: var(--anthem-current-weather-font-sm);
      color: var(--anthem-current-weather-text-gray);
      font-style: italic;
    }
  }
  
  .anthem-popup-error {
    background: var(--anthem-current-weather-bg-error);
    border: 1px solid var(--anthem-current-weather-border-error);
    color: var(--wp--preset--color--base-error);
    padding: var(--anthem-current-weather-spacing-md);
    border-radius: var(--anthem-current-weather-radius-sm);
    margin-bottom: var(--anthem-current-weather-spacing-lg);
    font-size: var(--anthem-current-weather-font-sm);
    font-weight: 500;
    
    &:empty {
      display: none;
    }
  }
  
  .anthem-popup-actions {
    display: flex;
    gap: var(--anthem-current-weather-spacing-lg);
    justify-content: flex-end;
    margin-top: var(--anthem-current-weather-spacing-xxl);
    
    .anthem-popup-cancel,
    .anthem-popup-save {
      padding: var(--anthem-current-weather-spacing-md) var(--anthem-current-weather-spacing-xxl);
      border-radius: var(--anthem-current-weather-radius-xxl);
      font-size: var(--anthem-current-weather-font-base);
      font-weight: 600;
      cursor: pointer;
      transition: var(--anthem-current-weather-transition);
      border: none;
    }
    
    .anthem-popup-cancel {
      background: var(--anthem-current-weather-bg-light);
      color: var(--anthem-current-weather-text-gray);
      border: 2px solid var(--anthem-current-weather-border-light);
      
      &:hover {
        background: var(--wp--preset--color--neutral-20);
        color: var(--anthem-current-weather-text-dark);
      }
    }
    
    .anthem-popup-save {
      background: var(--anthem-current-weather-primary);
      color: var(--anthem-current-weather-text-white);
      box-shadow: 0 4px 15px rgba(74,111,252,0.3);
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(74,111,252,0.4);
      }
      
      &:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 4px 15px rgba(74,111,252,0.3);
      }
      
      .anthem-button-spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top: 2px solid var(--anthem-current-weather-text-white);
        border-radius: 50%;
        animation: anthem-spin 1s linear infinite;
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }
}

/* Status Messages */
.anthem-location-status {
  margin-top: var(--anthem-current-weather-spacing-lg);
  padding: var(--anthem-current-weather-spacing-md) var(--anthem-current-weather-spacing-lg);
  border-radius: var(--anthem-current-weather-radius-sm);
  text-align: center;
  font-weight: 500;
  min-height: 20px;
  
  &.loading {
    background: var(--anthem-current-weather-bg-warning);
    color: var(--wp--preset--color--anthem-secondary-400);
    border: 1px solid var(--anthem-current-weather-border-warning);
  }
  
  &.success {
    background: var(--anthem-current-weather-bg-success);
    color: var(--wp--preset--color--base-success);
    border: 1px solid var(--anthem-current-weather-border-success);
  }
  
  &.error {
    background: var(--anthem-current-weather-bg-error);
    color: var(--wp--preset--color--base-error);
    border: 1px solid var(--anthem-current-weather-border-error);
  }
}

/* Error Messages */
.anthem-current-weather-error {
  color: var(--wp--preset--color--base-error);
  background: linear-gradient(135deg, rgba(244,37,0,0.1) 0%, rgba(244,37,0,0.05) 100%);
  border: 2px solid var(--wp--preset--color--base-error);
  padding: var(--anthem-current-weather-spacing-lg);
  border-radius: var(--anthem-current-weather-radius-md);
  max-width: var(--anthem-current-weather-max-width);
  margin: var(--anthem-current-weather-spacing-xl) auto;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(244,37,0,0.2);
}

/* Cache Cleared Message */
.anthem-weather-cache-cleared {
  color: var(--wp--preset--color--base-success);
  background: linear-gradient(135deg, rgba(0,197,46,0.1) 0%, rgba(0,197,46,0.05) 100%);
  border: 2px solid var(--wp--preset--color--base-success);
  padding: var(--anthem-current-weather-spacing-lg);
  border-radius: var(--anthem-current-weather-radius-md);
  max-width: var(--anthem-current-weather-max-width);
  margin: var(--anthem-current-weather-spacing-xl) auto;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,197,46,0.2);
}

/* Legacy support for old weather card class */
.anthem-current-weather-card {
  max-width: var(--anthem-current-weather-max-width);
  margin: var(--anthem-current-weather-spacing-xl) auto;
  padding: 30px var(--anthem-current-weather-spacing-xxl);
  background: var(--anthem-current-weather-gradient-secondary);
  border-radius: var(--anthem-current-weather-radius-xl);
  box-shadow: var(--anthem-current-weather-shadow-medium), var(--anthem-current-weather-shadow-light);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--anthem-current-weather-text-white);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--anthem-current-weather-transition);
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: var(--anthem-current-weather-shadow-heavy), 0 6px 15px rgba(0,0,0,0.15);
  }
  
  .acw-header {
    font-size: var(--anthem-current-weather-font-lg);
    font-weight: 600;
    margin-bottom: var(--anthem-current-weather-spacing-lg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
    line-height: 1.3;
  }
  
  .acw-time {
    font-size: var(--anthem-current-weather-font-sm);
    color: rgba(255,255,255,0.8);
    font-weight: 400;
    display: block;
    margin-top: var(--anthem-current-weather-spacing-xs);
  }
  
  .acw-icon {
    margin: var(--anthem-current-weather-spacing-xl) 0;
    position: relative;
    z-index: 1;
    animation: float 3s ease-in-out infinite;
  }
  
  .acw-temp {
    font-size: var(--anthem-current-weather-font-6xl);
    font-weight: 700;
    margin: var(--anthem-current-weather-spacing-lg) 0 var(--anthem-current-weather-spacing-md) 0;
    color: var(--anthem-current-weather-text-white);
    text-shadow: 0 4px 8px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
    letter-spacing: -2px;
    line-height: 1;
  }
  
  .acw-short {
    font-size: var(--anthem-current-weather-font-xl);
    margin-bottom: var(--anthem-current-weather-spacing-md);
    color: rgba(255,255,255,0.95);
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  }
  
  .acw-wind {
    font-size: var(--anthem-current-weather-font-base);
    color: rgba(255,255,255,0.9);
    margin-bottom: var(--anthem-current-weather-spacing-xl);
    padding: var(--anthem-current-weather-spacing-md) var(--anthem-current-weather-spacing-lg);
    background: rgba(255,255,255,0.15);
    border-radius: var(--anthem-current-weather-radius-xxl);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    z-index: 1;
    font-weight: 500;
  }
  
  .acw-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--anthem-current-weather-spacing-md);
    margin: var(--anthem-current-weather-spacing-xl) 0;
    padding: var(--anthem-current-weather-spacing-lg);
    background: rgba(255,255,255,0.12);
    border-radius: var(--anthem-current-weather-radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.25);
    position: relative;
    z-index: 1;
  }
  
  .acw-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--anthem-current-weather-spacing-sm) 0;
    font-size: var(--anthem-current-weather-font-sm);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    
    &:last-child {
      border-bottom: none;
    }
  }
  
  .acw-label {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
  }
  
  .acw-value {
    color: rgba(255,255,255,0.95);
    font-weight: 600;
  }
  
  .acw-detail {
    font-size: var(--anthem-current-weather-font-sm);
    color: rgba(255,255,255,0.9);
    margin-top: var(--anthem-current-weather-spacing-xl);
    line-height: 1.6;
    position: relative;
    z-index: 1;
    padding: var(--anthem-current-weather-spacing-lg);
    background: rgba(255,255,255,0.08);
    border-radius: var(--anthem-current-weather-radius-md);
    backdrop-filter: blur(5px);
    text-align: left;
  }
  
  /* Weather condition specific gradients */
  &[data-weather*="sunny"],
  &[data-weather*="clear"] {
    background: var(--anthem-current-weather-gradient-sunny);
  }
  
  &[data-weather*="cloudy"],
  &[data-weather*="overcast"] {
    background: var(--anthem-current-weather-gradient-cloudy);
  }
  
  &[data-weather*="rain"],
  &[data-weather*="shower"] {
    background: var(--anthem-current-weather-gradient-rain);
  }
  
  &[data-weather*="snow"] {
    background: var(--anthem-current-weather-gradient-snow);
  }
  
  &[data-weather*="storm"],
  &[data-weather*="thunder"] {
    background: var(--anthem-current-weather-gradient-storm);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Responsive Design */
@media (max-width: 500px) {
  .anthem-weather-widget {
    max-width: 95vw;
    margin: var(--anthem-current-weather-spacing-lg) auto;
  }
  
  .anthem-weather-current {
    padding: var(--anthem-current-weather-spacing-xl) var(--anthem-current-weather-spacing-lg);
  }
  
  .anthem-temperature {
    font-size: var(--anthem-current-weather-font-5xl);
  }
  
  .anthem-condition-text {
    font-size: var(--anthem-current-weather-font-base);
    max-width: 100px;
  }
  
  .anthem-hourly-forecast {
    flex-direction: column;
    gap: var(--anthem-current-weather-spacing-lg);
  }
  
  .anthem-hourly-item {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }
  
  .anthem-weather-forecast {
    padding: var(--anthem-current-weather-spacing-lg);
  }
  
  .anthem-popup-content {
    width: 95%;
    margin: var(--anthem-current-weather-spacing-xl);
  }
  
  .anthem-popup-body {
    padding: var(--anthem-current-weather-spacing-xl);
  }
  
  .anthem-popup-actions {
    flex-direction: column;
  }
  
  .anthem-popup-cancel,
  .anthem-popup-save {
    width: 100%;
    text-align: center;
  }
  
  .anthem-current-weather-card {
    max-width: 95vw;
    padding: var(--anthem-current-weather-spacing-xxl) var(--anthem-current-weather-spacing-xl);
    margin: var(--anthem-current-weather-spacing-lg) auto;
    
    .acw-temp {
      font-size: var(--anthem-current-weather-font-5xl);
    }
    
    .acw-header {
      font-size: var(--anthem-current-weather-font-base);
    }
    
    .acw-details-grid {
      grid-template-columns: 1fr;
      gap: var(--anthem-current-weather-spacing-sm);
      padding: var(--anthem-current-weather-spacing-md);
    }
    
    .acw-detail-item {
      font-size: var(--anthem-current-weather-font-xs);
    }
  }
}

@media (max-width: 400px) {
  .anthem-weather-current {
    padding: var(--anthem-current-weather-spacing-lg) var(--anthem-current-weather-spacing-md);
  }
  
  .anthem-temperature {
    font-size: var(--anthem-current-weather-font-4xl);
  }
  
  .anthem-main-weather {
    flex-direction: column;
    gap: var(--anthem-current-weather-spacing-lg);
  }
  
  .anthem-current-details {
    margin-bottom: var(--anthem-current-weather-spacing-lg);
  }
  
  .anthem-current-weather-card {
    padding: var(--anthem-current-weather-spacing-xl) var(--anthem-current-weather-spacing-lg);
    
    .acw-temp {
      font-size: var(--anthem-current-weather-font-4xl);
    }
  }
}