/* ============================================================
   Responsive Styles for WeatherWise
   ============================================================ */

/* ============================================================
   Large Tablets & Small Desktops (1024px - 1200px)
   ============================================================ */



   
@media (max-width: 1200px) and (min-width: 1025px) {
  .main-grid {
    grid-template-columns: 260px 1fr 300px;
    gap: 1rem;
  }

  .app-container {
    padding: 1rem;
  }

  .glass-card {
    padding: 1rem;
  }

  .temperature-main {
    font-size: 4.5rem;
  }

  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
  }

  .day-card {
    padding: 0.75rem;
  }

  .weather-details-grid {
    gap: 0.75rem;
  }

  .comfort-meter {
    padding: 1rem;
  }

  #globeCard {
    width: 280px;
    height: 280px;
    max-width: 280px;
    max-height: 280px;
  }

  .globe-container-3d {
    width: 280px;
    height: 280px;
    max-width: 280px;
    max-height: 280px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 280px !important;
    height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
  }
}



/* ============================================================
   Tablets (600px - 1024px) - Scaled Desktop Layout
   ============================================================ */
@media (max-width: 1024px) and (min-width: 601px) {
  .app-container {
    padding: 1rem;
  }

  .main-grid {
    grid-template-columns: 240px 1fr 280px;
    gap: 1rem;
  }

  .glass-card,
  .glass-panel {
    padding: 1rem;
  }

  .temperature-main {
    font-size: 3.5rem;
  }

  #globeCard {
    width: 260px;
    height: 260px;
    max-width: 260px;
    max-height: 260px;
  }

  .globe-container-3d {
    width: 260px;
    height: 260px;
    max-width: 260px;
    max-height: 260px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 260px !important;
    height: 260px !important;
    max-width: 260px !important;
    max-height: 260px !important;
  }

  .area-selector {
    overflow: visible !important;
  }

  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-card .quick-stats {
    gap: 5px;
  }
  
  .day-card .stat-item {
    font-size: 0.68rem;
  }
  
  .day-card .stat-icon {
    font-size: 0.9rem;
  }
  
  /* Hourly Panel - Tablet */
  .hourly-panel-content {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
  
  .hourly-item {
    padding: 0.875rem 0.6rem;
  }
  
  .hourly-stats {
    gap: 5px;
  }
  
  .hourly-stat-item {
    font-size: 0.68rem;
  }
}

/* ============================================================
   Weather Details Vertical Layout (850px - 800px)
   ============================================================ */
@media (max-width: 850px) and (min-width: 801px) {
  .weather-details-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   Restructured Layout (max-width: 800px)
   ============================================================ */
@media (max-width: 800px) {
  /* Show simple sun/moon info, hide full section */
  .sun-moon-simple {
    display: flex !important;
  }
  
  .sun-moon-section {
    display: none !important;
  }
  
  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.5rem !important;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.5rem 1rem !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    border-radius: 20px !important;
  }
  
  .detail-icon-large {
    font-size: 1.25rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 1rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.875rem !important;
  }
  
  /* Main grid: custom layout for 800px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "weather weather"
      "comfort globe"
      "bottom bottom";
    gap: 1rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card in left column */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  .temp-chip {
    font-size: 0.9rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - right column */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }
  
  /* Forecast section styling */
  .forecast-section {
    padding: 0.875rem;
  }
  
  .forecast-header {
    font-size: 1.5rem;
    margin-bottom: 0.875rem;
  }
  
  .forecast-chart-container {
    padding: 0.875rem;
    margin-bottom: 1rem;
  }
  
  .forecast-chart {
    height: 180px;
  }
  
  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }
  
  .chart-toggle-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
  }
  
  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 1rem;
  }
  
  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-card .day-name {
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
  }
  
  .day-card .day-date {
    font-size: 0.75rem;
    margin-bottom: 0.6rem;
  }
  
  .day-card .weather-icon {
    font-size: 2.25rem;
    margin: 0.6rem auto;
  }
  
  .day-card .day-temp {
    font-size: 1.6rem;
    margin-top: 0.4rem;
  }
  
  .day-card .temp-range-small {
    margin-top: 0.35rem;
    font-size: 0.75rem;
  }
  
  .day-card .weather-description {
    margin-top: 0.35rem;
    margin-bottom: 0.7rem;
    font-size: 0.75rem;
  }
  
  .day-card .quick-stats {
    gap: 7px;
    padding-top: 0.7rem;
  }
  
  .day-card .stat-item {
    font-size: 0.75rem;
    padding: 6px 4px;
  }
  
  .day-card .stat-icon {
    font-size: 1rem;
  }
  
  .day-card .stat-item.rain-chance {
    padding: 7px 6px;
  }
  
  .day-name {
    font-size: 0.95rem;
  }
  
  .day-date {
    font-size: 0.75rem;
  }
  
  .weather-icon {
    font-size: 2.25rem;
  }
  
  .day-temp {
    font-size: 1.6rem;
  }
  
  .sun-moon-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  /* Hourly Panel Responsive */
  .hourly-panel-content {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1rem;
  }
  
  .hourly-item {
    padding: 1rem 0.8rem;
  }
  
  .hourly-icon {
    font-size: 2.25rem;
    margin: 0.6rem 0;
  }
  
  .hourly-temp {
    font-size: 1.35rem;
  }
  
  .hourly-stats {
    gap: 7px;
    margin-top: 0.6rem;
  }
  
  .hourly-stat-item {
    font-size: 0.75rem;
    padding: 6px 4px;
  }
  
  .hourly-stat-item .stat-icon {
    font-size: 0.95rem;
  }
  
  .hourly-stat-item.rain-chance {
    padding: 7px 6px;
  }
  
  .hourly-item {
    padding: 0.75rem 0.5rem;
  }
  
  .hourly-icon {
    font-size: 1.75rem;
    margin: 0.35rem 0;
  }
  
  .hourly-temp {
    font-size: 1.125rem;
  }
  
  .hourly-stats {
    gap: 4px;
  }
  
  .hourly-stat-item {
    font-size: 0.65rem;
    padding: 3px 1px;
  }
  
  .hourly-stat-item .stat-icon {
    font-size: 0.8rem;
  }
  
  .hourly-stat-item.rain-chance {
    padding: 4px 3px;
  }
}

/* ============================================================
   Mobile Portrait (max-width: 600px)
   ============================================================ */
@media (max-width: 600px) {
  .app-container {
    padding: 1rem;
  }

  .glass-panel {
    padding: 1rem;
  }

  .glass-card {
    padding: 1rem;
  }

  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.5rem !important;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.5rem 1rem !important;
    flex-direction: row !important;
    gap: 0.5rem !important;
    border-radius: 20px !important;
  }
  
  .detail-icon-large {
    font-size: 1.25rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 1rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.875rem !important;
  }

  /* Main grid: custom layout for 600px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "weather weather"
      "comfort globe"
      "bottom bottom";
    gap: 1rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card in left column */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.5rem;
    padding: 1rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.75rem !important;
    margin-bottom: 0.5rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 3rem;
    margin-bottom: 0.25rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  .temp-chip {
    font-size: 0.9rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - right column */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }

  .sun-moon-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Forecast section styling */
  .forecast-section {
    padding: 0.875rem;
  }

  .forecast-header {
    font-size: 1.375rem;
    margin-bottom: 0.875rem;
  }

  .forecast-chart-container {
    padding: 0.875rem;
    margin-bottom: 0.875rem;
  }

  .forecast-chart {
    height: 180px;
  }

  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .chart-toggle-btn {
    font-size: 0.7rem;
    padding: 0.45rem 0.8rem;
  }

  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.75rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-card .weather-icon {
    font-size: 1.85rem;
    margin: 0.4rem auto;
  }
  
  .day-card .day-temp {
    font-size: 1.4rem;
  }
  
  .day-card .quick-stats {
    gap: 5px;
    padding-top: 0.5rem;
  }
  
  .day-card .stat-item {
    font-size: 0.68rem;
    padding: 5px 3px;
  }
  
  .day-card .stat-icon {
    font-size: 0.9rem;
  }
  
  .day-card .stat-item.rain-chance {
    padding: 6px 4px;
  }

  .day-name {
    font-size: 0.8rem;
  }

  .day-date {
    font-size: 0.7rem;
  }
  
  /* Hourly Panel Mobile */
  .hourly-panel-content {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem;
  }
  
  .hourly-item {
    padding: 0.875rem 0.6rem;
  }
  
  .hourly-time {
    font-size: 0.8rem;
  }
  
  .hourly-icon {
    font-size: 1.65rem;
    margin: 0.4rem 0;
  }
  
  .hourly-temp {
    font-size: 1.125rem;
  }
  
  .hourly-stats {
    gap: 5px;
    margin-top: 0.4rem;
  }
  
  .hourly-stat-item {
    font-size: 0.68rem;
    padding: 5px 3px;
  }
  
  .hourly-stat-item .stat-icon {
    font-size: 0.85rem;
  }
  
  .hourly-stat-item.rain-chance {
    padding: 6px 4px;
  }
  
  .hourly-forecast-panel {
    padding: 1rem;
  }
  
  .hourly-panel-header h3 {
    font-size: 1.125rem;
  }
}

/* ============================================================
   Small Mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.875rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-card .day-name {
    font-size: 0.875rem;
  }
  
  .day-card .day-date {
    font-size: 0.7rem;
  }
  
  .day-card .weather-icon {
    font-size: 2rem;
    margin: 0.5rem auto;
  }
  
  .day-card .day-temp {
    font-size: 1.5rem;
  }
  
  .day-card .temp-range-small {
    font-size: 0.7rem;
  }
  
  .day-card .weather-description {
    font-size: 0.7rem;
  }
  
  .day-card .quick-stats {
    gap: 6px;
    padding-top: 0.6rem;
  }
  
  .day-card .stat-item {
    font-size: 0.7rem;
    padding: 6px 4px;
  }
  
  .day-card .stat-icon {
    font-size: 0.95rem;
  }
  
  .day-card .stat-item.rain-chance {
    padding: 7px 5px;
  }
  
  /* Hourly Panel Small Mobile */
  .hourly-panel-content {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .hourly-item {
    padding: 0.875rem 0.65rem;
  }
  
  .hourly-time {
    font-size: 0.875rem;
  }
  
  .hourly-icon {
    font-size: 1.75rem;
    margin: 0.4rem 0;
  }
  
  .hourly-temp {
    font-size: 1.25rem;
  }
  
  .hourly-stats {
    gap: 6px;
    margin-top: 0.5rem;
  }
  
  .hourly-stat-item {
    font-size: 0.7rem;
    padding: 6px 4px;
  }
  
  .hourly-stat-item .stat-icon {
    font-size: 0.9rem;
  }
  
  .hourly-stat-item.rain-chance {
    padding: 7px 5px;
  }
  
  .hourly-forecast-panel {
    padding: 0.875rem;
  }
  
  .hourly-panel-header h3 {
    font-size: 1.125rem;
  }

  /* Hourly Panel Mobile */
  .hourly-panel-content {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.65rem;
  }
  
  .hourly-item {
    padding: 0.65rem 0.45rem;
  }
  
  .hourly-time {
    font-size: 0.75rem;
  }
  
  .hourly-icon {
    font-size: 1.5rem;
    margin: 0.3rem 0;
  }
  
  .hourly-temp {
    font-size: 1rem;
  }
  
  .hourly-stats {
    gap: 3px;
    margin-top: 0.35rem;
  }
  
  .hourly-stat-item {
    font-size: 0.6rem;
    padding: 2px 1px;
  }
  
  .hourly-stat-item .stat-icon {
    font-size: 0.75rem;
  }
  
  .hourly-stat-item.rain-chance {
    padding: 3px 2px;
  }
  
  .hourly-forecast-panel {
    padding: 1rem;
  }
  
  .hourly-panel-header h3 {
    font-size: 1.125rem;
  }

  .weather-icon {
    font-size: 2.25rem;
  }

  .day-temp {
    font-size: 1.125rem;
  }

  #globeCard {
    width: 240px;
    height: 240px;
    max-width: 240px;
    max-height: 240px;
  }

  .globe-container-3d {
    width: 240px;
    height: 240px;
    max-width: 240px;
    max-height: 240px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 240px !important;
    height: 240px !important;
    max-width: 240px !important;
    max-height: 240px !important;
  }

  .area-selector {
    overflow: visible !important;
    padding: var(--space-md) !important;
  }

  .comfort-meter {
    padding: 1rem;
  }

  .meter-gauge {
    width: 200px;
  }

  /* Search Modal Adjustments */
  .search-content {
    max-width: 90%;
    padding: var(--space-lg);
  }

  .search-header {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .search-input {
    width: 100%;
    font-size: var(--font-size-base);
    padding: var(--space-sm) var(--space-md);
  }

  .locate-me-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
  }

  /* Location Permission Modal */
  .location-permission-content {
    max-width: 90%;
    padding: var(--space-lg);
  }

  .permission-title {
    font-size: 1.25rem;
  }

  .permission-description {
    font-size: 0.9rem;
  }

  .permission-buttons {
    gap: 0.75rem;
  }
}

/* ============================================================
   Small Mobile (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  .app-container {
    padding: 0.75rem;
  }

  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.5rem !important;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.4rem 0.875rem !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
    border-radius: 18px !important;
  }
  
  .detail-icon-large {
    font-size: 1.125rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.8rem !important;
  }

  /* Main grid: custom layout for 480px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "weather weather"
      "comfort globe"
      "bottom bottom";
    gap: 0.875rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card in left column */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.4rem;
    padding: 0.875rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 0.875rem;
    margin-bottom: 0.4rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 0.875rem;
    justify-content: center;
    margin-bottom: 0.4rem;
  }
  
  .temp-chip {
    font-size: 0.85rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - right column */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }
  
  /* Forecast section styling */
  .forecast-section {
    padding: 0.75rem;
  }
  
  .forecast-header {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .forecast-chart-container {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  .forecast-chart {
    height: 160px;
  }
  
  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
  }
  
  .chart-toggle-btn {
    font-size: 0.65rem;
    padding: 0.4rem 0.7rem;
  }

  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.5rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-name {
    font-size: 0.75rem;
  }
  
  .day-date {
    font-size: 0.65rem;
  }
  
  .weather-icon {
    font-size: 2rem;
  }
  
  .day-temp {
    font-size: 1rem;
  }

  #globeCard {
    width: 220px;
    height: 220px;
    max-width: 220px;
    max-height: 220px;
  }

  .globe-container-3d {
    width: 220px;
    height: 220px;
    max-width: 220px;
    max-height: 220px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 220px !important;
    height: 220px !important;
    max-width: 220px !important;
    max-height: 220px !important;
  }

  .meter-gauge {
    width: 180px;
  }

  /* Search Modal Adjustments */
  .search-content {
    max-width: 95%;
    padding: var(--space-md);
  }

  .search-header {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .search-input {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.7rem 1rem;
  }

  .locate-me-btn {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
  }
}

/* ============================================================
   Small Mobile - Stacked Layout (max-width: 450px)
   ============================================================ */
@media (max-width: 450px) {
  .app-container {
    padding: 0.65rem;
  }

  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.45rem !important;
    gap: 0.45rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.4rem 0.8rem !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
    border-radius: 18px !important;
  }
  
  .detail-icon-large {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.8rem !important;
  }

  /* Main grid: stacked layout for 450px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "weather"
      "comfort"
      "globe"
      "bottom";
    gap: 0.8rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card - full width */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.4rem;
    padding: 0.8rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.7rem !important;
    margin-bottom: 0.4rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 2.25rem;
    margin-bottom: 0.2rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 0.4rem;
  }
  
  .temp-chip {
    font-size: 0.825rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - full width below comfort */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }
  
  /* Forecast section styling */
  .forecast-section {
    padding: 0.7rem;
  }
  
  .forecast-header {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
  }
  
  .forecast-chart-container {
    padding: 0.7rem;
    margin-bottom: 0.7rem;
  }
  
  .forecast-chart {
    height: 150px;
  }
  
  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.6rem;
  }
  
  .chart-toggle-btn {
    font-size: 0.625rem;
    padding: 0.375rem 0.675rem;
  }

  .forecast-days {
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
    gap: 0.475rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-name {
    font-size: 0.725rem;
  }
  
  .day-date {
    font-size: 0.625rem;
  }
  
  .weather-icon {
    font-size: 1.95rem;
  }
  
  .day-temp {
    font-size: 0.975rem;
  }

  #globeCard {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
  }

  .globe-container-3d {
    width: 200px;
    height: 200px;
    max-width: 200px;
    max-height: 200px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
  }

  .meter-gauge {
    width: 175px;
  }

  /* Search Modal Adjustments */
  .search-content {
    max-width: 95%;
    padding: 1rem;
  }

  .search-input {
    font-size: 0.9rem;
    padding: 0.65rem 0.9rem;
  }

  .locate-me-btn {
    font-size: 0.9rem;
    padding: 0.65rem 0.9rem;
  }
}

/* ============================================================
   Extra Small Mobile (max-width: 360px)
   ============================================================ */
@media (max-width: 360px) {
  .app-container {
    padding: 0.5rem;
  }

  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.4rem !important;
    gap: 0.4rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.35rem 0.75rem !important;
    flex-direction: row !important;
    gap: 0.35rem !important;
    border-radius: 16px !important;
  }
  
  .detail-icon-large {
    font-size: 1rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.75rem !important;
  }

  /* Main grid: stacked layout for 360px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "weather"
      "comfort"
      "globe"
      "bottom";
    gap: 0.75rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 1rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card in left column */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.35rem;
    padding: 0.75rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.65rem !important;
    margin-bottom: 0.35rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 2rem;
    margin-bottom: 0.2rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 0.35rem;
  }
  
  .temp-chip {
    font-size: 0.8rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - right column */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }
  
  /* Forecast section styling */
  .forecast-section {
    padding: 0.65rem;
  }
  
  .forecast-header {
    font-size: 1.125rem;
    margin-bottom: 0.65rem;
  }
  
  .forecast-chart-container {
    padding: 0.65rem;
    margin-bottom: 0.65rem;
  }
  
  .forecast-chart {
    height: 140px;
  }
  
  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
  }
  
  .chart-toggle-btn {
    font-size: 0.6rem;
    padding: 0.35rem 0.65rem;
  }

  .logo-text {
    font-size: 1.25rem;
  }

  .forecast-days {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-name {
    font-size: 0.7rem;
  }
  
  .day-date {
    font-size: 0.6rem;
  }
  
  .weather-icon {
    font-size: 1.875rem;
  }
  
  .day-temp {
    font-size: 0.95rem;
  }

  #globeCard {
    width: 180px;
    height: 180px;
    max-width: 180px;
    max-height: 180px;
  }

  .globe-container-3d {
    width: 180px;
    height: 180px;
    max-width: 180px;
    max-height: 180px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 180px !important;
    height: 180px !important;
    max-width: 180px !important;
    max-height: 180px !important;
  }

  .meter-gauge {
    width: 160px;
  }

  /* Search Modal Adjustments */
  .search-content {
    max-width: 95%;
    padding: 0.9rem;
  }

  .search-input {
    font-size: 0.85rem;
    padding: 0.6rem 0.85rem;
  }

  .locate-me-btn {
    font-size: 0.85rem;
    padding: 0.6rem 0.85rem;
  }

  .locate-me-btn span {
    display: none;
  }

  .locate-me-btn svg {
    margin: 0;
  }
}

/* ============================================================
   Tiny Mobile (max-width: 300px)
   ============================================================ */
@media (max-width: 300px) {
  .app-container {
    padding: 0.4rem;
  }

  /* Hide humidity and pressure cards, keep only visibility */
  .weather-details-grid .detail-card:nth-child(1),
  .weather-details-grid .detail-card:nth-child(2) {
    display: none !important;
  }
  
  /* Make visibility card inline and compact */
  .weather-details-grid {
    display: inline-flex !important;
    margin-top: 0.35rem !important;
    gap: 0.35rem;
    justify-content: center;
  }
  
  .weather-details-grid .detail-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.3rem 0.6rem !important;
    flex-direction: row !important;
    gap: 0.3rem !important;
    border-radius: 14px !important;
  }
  
  .detail-icon-large {
    font-size: 0.9rem !important;
    margin: 0 !important;
  }
  
  .detail-value-large {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }
  
  .detail-label-small {
    font-size: 0.7rem !important;
  }

  /* Main grid: stacked layout for 300px breakpoint */
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "weather"
      "comfort"
      "globe"
      "bottom";
    gap: 0.6rem;
  }
  
  /* Use display: contents to break out children */
  .left-panel {
    display: contents;
  }
  
  /* Branding in header area */
  .left-panel .branding {
    grid-area: header;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
    padding: 0.8rem;
  }
  
  /* Show mobile search button in branding */
  .left-panel .branding .branding-search-btn {
    display: flex !important;
  }
  
  /* Comfort card - full width */
  .left-panel .comfort-card {
    grid-area: comfort;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide other left panel items */
  .left-panel > *:not(.branding):not(.comfort-card) {
    display: none !important;
  }
  
  /* Row 2: Weather info */
  .center-section {
    grid-area: weather;
    max-width: 100%;
    margin: 0;
    width: 100%;
    min-height: auto;
    gap: 0.3rem;
    padding: 0.6rem 0;
    text-align: center;
  }
  
  /* Compact location */
  .location-display {
    font-size: 0.85rem;
    margin-bottom: 0.15rem;
  }
  
  /* Compact date/time */
  .center-section > div[style*="font-size: 0.875rem"] {
    font-size: 0.6rem !important;
    margin-bottom: 0.3rem;
  }
  
  /* Compact temperature */
  .temperature-main {
    font-size: 1.75rem;
    margin-bottom: 0.15rem;
  }
  
  /* Weather condition */
  .weather-condition {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
  }
  
  /* High/Low on one line, centered */
  .temp-range {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 0.3rem;
  }
  
  .temp-chip {
    font-size: 0.75rem;
  }
  
  /* Row 3 & 4: Right panel children */
  .right-panel {
    display: contents;
  }
  
  /* Hide top-actions (search button moved to branding) */
  .right-panel .top-actions {
    display: none !important;
  }
  
  /* Globe - right column */
  .right-panel .area-selector {
    grid-area: globe;
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  
  /* Hide recent searches */
  .right-panel .recent-searches {
    display: none !important;
  }
  
  /* Bottom section */
  .bottom-section {
    grid-area: bottom;
  }
  
  /* Forecast section styling */
  .forecast-section {
    padding: 0.5rem;
  }
  
  .forecast-header {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .forecast-chart-container {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .forecast-chart {
    height: 120px;
  }
  
  .chart-toggle-buttons {
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }
  
  .chart-toggle-btn {
    font-size: 0.55rem;
    padding: 0.3rem 0.55rem;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .forecast-days {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .day-card {
    padding: 1rem 0.8rem;
    min-height: 320px;
    max-height: none;
  }
  
  .day-name {
    font-size: 0.65rem;
  }
  
  .day-date {
    font-size: 0.55rem;
  }
  
  .weather-icon {
    font-size: 1.625rem;
  }
  
  .day-temp {
    font-size: 0.875rem;
  }

  #globeCard {
    width: 160px;
    height: 160px;
    max-width: 160px;
    max-height: 160px;
  }

  .globe-container-3d {
    width: 160px;
    height: 160px;
    max-width: 160px;
    max-height: 160px;
    padding: 0;
  }

  .globe-container-3d canvas {
    width: 160px !important;
    height: 160px !important;
    max-width: 160px !important;
    max-height: 160px !important;
  }

  .meter-gauge {
    width: 140px;
  }

  /* Search Modal Adjustments */
  .search-content {
    max-width: 95%;
    padding: 0.75rem;
  }

  .search-input {
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
  }

  .locate-me-btn {
    font-size: 0.8rem;
    padding: 0.55rem 0.75rem;
  }
}

/* =========================================================================
   Fix: Responsive Globe - Prevents clipping and maintains aspect ratio
   ========================================================================= */

/* Make sure the globe stays a perfect circle and scales to available width.
   Width will decide the size (height follows via aspect-ratio). */
.globe-wrapper {
  /* wrapper around globe area to allow safe overflow & centering */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* allow soft edge glow, don't clip */
  padding: 0.25rem;
}

/* Container that hosts the 3D canvas / WebGL renderer */
.globe-container-3d {
  /* allow it to scale down but not exceed design sizes */
  width: min(320px, 45vw);    /* max 320px, otherwise 45% of viewport width */
  aspect-ratio: 1 / 1;        /* keep perfect circle (height = width) */
  height: auto;               /* height determined by aspect-ratio */
  max-width: 100%;
  max-height: 100%;
  display: block;
  box-sizing: border-box;
  overflow: visible;          /* avoid clipping hemisphere */
  flex-shrink: 1;             /* allow to shrink inside flex/grid cell */
  margin: 0 auto;
}

/* If your renderer uses a canvas or canvas-like element, force it to fill container */
.globe-container-3d > canvas,
.globe-container-3d > .threejs-canvas,
.globe-container-3d > .globe-renderer {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* When layout is two-column (comfort + globe) we reduce globe width so both items fit */
@media (max-width: 800px) and (min-width: 450px) {
  /* Slightly smaller globe so it doesn't overlap/clip */
  .globe-container-3d {
    width: min(280px, calc(50vw - 1.5rem));
    aspect-ratio: 1 / 1;
  }

  /* ensure comfort card doesn't force globe overflow */
  .comfort-card, .comfort-meter {
    min-width: 0;
    flex-shrink: 1;
  }

  /* make sure the area-selector doesn't hide globe edges */
  .area-selector {
    overflow: visible;
    padding: 0.25rem;
  }
}

/* Extra small adjustments for narrow two-column windows (620px -> 450px) */
@media (max-width: 620px) and (min-width: 450px) {
  .globe-container-3d {
    width: min(240px, calc(48vw - 1rem));
    aspect-ratio: 1 / 1;
  }

  /* if you still have overlap, reduce globe slightly more */
  .globe-container-3d.small-fix {
    width: min(220px, calc(46vw - 1rem));
  }
}

/* When you stack vertically (single column), allow the globe to grow a bit */
@media (max-width: 450px) {
  .globe-container-3d {
    width: min(320px, 70vw);
    aspect-ratio: 1 / 1;
    margin: 0.25rem auto;
  }
}

/* Safety: ensure no parent creates an overflow clipping context */
.left-panel, .right-panel, .area-selector, .globe-card {
  min-width: 0; /* prevent intrinsic min-width from forcing overflow */
}

/* Optional nice-to-have: center globe if small */
.globe-container-3d {
  transform-origin: center center;
}

/* ========== Further globe safety tweaks ========== */

/* make globe sizing safer with clamp so it never gets too large for the column */
.globe-container-3d {
  width: clamp(180px, 35vw, 300px); /* min 180, ideal 35vw, max 300 */
  aspect-ratio: 1 / 1;
  height: auto;
  padding: 0.5rem;              /* give some breathing room for glow/edge artifacts */
  box-sizing: border-box;
  overflow: visible !important;
  -webkit-overflow-scrolling: touch;
  border-radius: 9999px;       /* keep render rounded if using background */
}

/* ensure canvas doesn't overflow its padded box */
.globe-container-3d > canvas,
.globe-container-3d > .threejs-canvas,
.globe-container-3d > .globe-renderer {
  width: 100% !important;
  height: 100% !important;
  display: block;
  box-sizing: border-box;
  transform-origin: center center;
}

/* Ensure likely clipping ancestors are permissive */
.main-grid,
.left-panel,
.right-panel,
.center-section,
.area-selector,
.globe-card,
.globe-wrapper,
.glass-card,
.globe-modal-container,
.globe-modal-content,
.background-container {
  overflow: visible !important;
  min-width: 0 !important;
}

/* Specific fix for area-selector / globe-card */
.area-selector,
.globe-card {
  overflow: visible !important;
  padding: var(--space-md) !important;
}

/* Slightly reduce globe when both comfort + globe are side by side narrow */
@media (max-width: 700px) and (min-width: 480px) {
  .globe-container-3d { width: clamp(160px, 40vw, 240px); }
}

/* Specific fix for 450-479px range to prevent edge clipping */
@media (max-width: 479px) and (min-width: 450px) {
  #globeCard {
    width: 210px !important;
    height: 210px !important;
    max-width: 210px !important;
    max-height: 210px !important;
  }
  
  .globe-container-3d {
    width: 210px !important;
    height: 210px !important;
    max-width: 210px !important;
    max-height: 210px !important;
  }
  
  .globe-container-3d canvas {
    width: 210px !important;
    height: 210px !important;
    max-width: 210px !important;
    max-height: 210px !important;
  }
}

/* Extra narrow 620 -> 480px */
@media (max-width: 620px) and (min-width: 480px) {
  .globe-container-3d { width: clamp(150px, 44vw, 220px); padding: 0.35rem; }
}

/* if you need an explicit ultra-safe class to shrink more */
.globe-container-3d.ultra-safe { width: clamp(120px, 40vw, 200px) !important; padding: 0.25rem !important; }

/* =========================================================================
   Exact day-card counts per breakpoint
   - >=1000px : 6 day cards
   - 800–999px: 5 day cards
   - 600–799px: 4 day cards
   - 480–599px: 3 day cards
   - 300–479px: 2 day cards
   - <300px   : 1 day card
   ========================================================================= */

/* Desktop / large screens — 6 per row */
@media (min-width: 1000px) {
  .forecast-days {
    grid-template-columns: repeat(6, minmax(140px, 1fr)) !important;
    gap: 1rem;
  }
}

/* 800 — 999px : 5 per row */
@media (min-width: 800px) and (max-width: 999px) {
  .forecast-days {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
    gap: 0.9rem;
  }
}

/* 600 — 799px : 4 per row */
@media (min-width: 600px) and (max-width: 799px) {
  .forecast-days {
    grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
    gap: 0.8rem;
  }
}

/* 480 — 599px : 3 per row */
@media (min-width: 480px) and (max-width: 599px) {
  .forecast-days {
    grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
    gap: 0.75rem;
  }
}

/* 300 — 479px : 2 per row */
@media (min-width: 300px) and (max-width: 479px) {
  .forecast-days {
    grid-template-columns: repeat(2, minmax(100px, 1fr)) !important;
    gap: 0.6rem;
  }
}

/* < 300px : 1 per row */
@media (max-width: 299px) {
  .forecast-days {
    grid-template-columns: repeat(1, minmax(100%, 1fr)) !important;
    gap: 0.5rem;
  }

  /* small tweak so the day-card expands nicely on very tiny screens */
  .day-card {
    width: 100%;
  }
}