/* =========================
   GOOGLE FONT
========================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* =========================
   ROOT VARIABLES
========================= */
:root {

  --bg-primary: #07111f;
  --bg-secondary: rgba(15, 23, 42, 0.75);
  --card-bg: rgba(255, 255, 255, 0.08);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.75);

  --border-color: rgba(255, 255, 255, 0.12);

  --shadow-primary:
    0 20px 50px rgba(0, 0, 0, 0.35);

  --blue-gradient:
    linear-gradient(135deg, #3b82f6, #06b6d4);

  --purple-gradient:
    linear-gradient(135deg, #8b5cf6, #6366f1);

  --orange-gradient:
    linear-gradient(135deg, #f97316, #fb7185);

  --green-gradient:
    linear-gradient(135deg, #10b981, #06b6d4);

  --glass-bg:
    rgba(255, 255, 255, 0.08);

  --navbar-bg:
    rgba(8, 15, 28, 0.82);
}

/* =========================
   LIGHT MODE
========================= */
body.light-mode {

  --bg-primary: #eef4ff;
  --bg-secondary: rgba(255, 255, 255, 0.85);

  --card-bg: rgba(255, 255, 255, 0.9);

  --text-primary: #0f172a;
  --text-secondary: #475569;

  --border-color: rgba(15, 23, 42, 0.08);

  --glass-bg:
    rgba(255, 255, 255, 0.75);

  --navbar-bg:
    rgba(255, 255, 255, 0.82);

  --shadow-primary:
    0 20px 50px rgba(15, 23, 42, 0.08);
}

/* =========================
   GLOBAL
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {

  min-height: 100vh;

  font-family: 'Inter', sans-serif;

  background:
    linear-gradient(
      rgba(2, 6, 23, 0.75),
      rgba(2, 6, 23, 0.82)
    ),
    url('weather.jpg');

  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  color: var(--text-primary);

  overflow-x: hidden;

  transition:
    background 0.4s ease,
    color 0.4s ease;
}

/* =========================
   BACKGROUND OVERLAY
========================= */
.bg-overlay {

  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.18),
      transparent 40%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(168, 85, 247, 0.18),
      transparent 40%
    );

  pointer-events: none;
  z-index: -1;
}

/* =========================
   NAVBAR
========================= */
.premium-navbar {

  position: sticky;
  top: 0;

  z-index: 999;

  backdrop-filter: blur(18px);

  background: var(--navbar-bg);

  border-bottom:
    1px solid var(--border-color);

  padding: 14px 0;

  transition: all 0.3s ease;
}

.brand-logo {

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 1.45rem;
  font-weight: 800;

  color: var(--text-primary) !important;

  text-decoration: none;
}

.brand-logo i {

  font-size: 1.7rem;

  background: var(--blue-gradient);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar-nav {

  gap: 10px;
}

.nav-link {

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px !important;

  border-radius: 12px;

  font-weight: 600;

  color: var(--text-secondary) !important;

  transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link.active {

  background: rgba(59, 130, 246, 0.12);

  color: var(--text-primary) !important;

  transform: translateY(-2px);
}

/* =========================
   DROPDOWN
========================= */
.premium-dropdown {

  border: none;

  border-radius: 18px;

  overflow: hidden;

  padding: 10px;

  backdrop-filter: blur(20px);

  background:
    rgba(15, 23, 42, 0.95);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3);
}

.dropdown-item {

  border-radius: 12px;

  color: white;

  font-weight: 500;

  padding: 12px 16px;

  transition: all 0.25s ease;
}

.dropdown-item:hover {

  background:
    rgba(59, 130, 246, 0.18);

  transform: translateX(4px);
}

/* =========================
   SEARCH
========================= */
.premium-search {

  display: flex;
  align-items: center;
  gap: 12px;
}

.search-box {

  position: relative;
}

.search-box i {

  position: absolute;

  top: 50%;
  left: 16px;

  transform: translateY(-50%);

  color: var(--text-secondary);
}

.search-box input {

  width: 260px;

  border: none;

  outline: none;

  border-radius: 14px;

  padding:
    14px 18px 14px 46px;

  background: var(--glass-bg);

  backdrop-filter: blur(14px);

  color: var(--text-primary);

  border:
    1px solid var(--border-color);

  transition: all 0.3s ease;
}

.search-box input::placeholder {

  color: var(--text-secondary);
}

.search-box input:focus {

  border-color: #3b82f6;

  box-shadow:
    0 0 0 4px rgba(59, 130, 246, 0.15);
}

/* =========================
   BUTTONS
========================= */
.search-btn,
.theme-btn,
.unit-toggle-btn {

  border: none;

  outline: none;

  cursor: pointer;

  font-weight: 700;

  transition: all 0.3s ease;
}

.search-btn {

  padding: 14px 22px;

  border-radius: 14px;

  background: var(--blue-gradient);

  color: white;

  box-shadow:
    0 10px 30px rgba(59, 130, 246, 0.35);
}

.search-btn:hover {

  transform:
    translateY(-3px) scale(1.02);
}

.theme-btn,
.unit-toggle-btn {

  width: 52px;
  height: 52px;

  border-radius: 14px;

  background: var(--glass-bg);

  backdrop-filter: blur(12px);

  border:
    1px solid var(--border-color);

  color: var(--text-primary);

  font-size: 1rem;
}

.theme-btn:hover,
.unit-toggle-btn:hover {

  transform:
    translateY(-3px);

  background:
    rgba(59, 130, 246, 0.18);
}

/* =========================
   HERO SECTION
========================= */
.hero-section {

  padding:
    70px 0 30px;
}

.hero-card {

  text-align: center;

  padding:
    55px 40px;

  border-radius: 32px;

  background: var(--glass-bg);

  backdrop-filter: blur(20px);

  border:
    1px solid var(--border-color);

  box-shadow: var(--shadow-primary);
}

.weather-badge {

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding:
    10px 18px;

  border-radius: 999px;

  background:
    rgba(59, 130, 246, 0.15);

  color: #60a5fa;

  font-size: 0.9rem;
  font-weight: 700;

  margin-bottom: 25px;
}

.hero-card h1 {

  font-size:
    clamp(2.5rem, 6vw, 5rem);

  font-weight: 900;

  margin-bottom: 18px;
}

.hero-subtitle {

  max-width: 720px;

  margin:
    0 auto 28px;

  line-height: 1.8;

  font-size: 1.08rem;

  color: var(--text-secondary);
}

.status-message {

  display: inline-flex;

  padding:
    14px 22px;

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.08);

  border:
    1px solid var(--border-color);

  color: var(--text-secondary);

  font-weight: 600;
}

/* =========================
   WEATHER CARDS
========================= */
.weather-cards {

  margin-top: 20px;
}

.premium-card {

  position: relative;

  overflow: hidden;

  height: 100%;

  padding:
    32px;

  border-radius: 28px;

  background: var(--card-bg);

  backdrop-filter: blur(20px);

  border:
    1px solid var(--border-color);

  box-shadow: var(--shadow-primary);

  transition: all 0.35s ease;
}

.premium-card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.3);
}

.card-icon {

  width: 72px;
  height: 72px;

  border-radius: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.8rem;

  color: white;

  margin-bottom: 24px;
}

.temp-icon {
  background: var(--orange-gradient);
}

.humidity-icon {
  background: var(--blue-gradient);
}

.wind-icon {
  background: var(--green-gradient);
}

.premium-card h3 {

  font-size: 1.35rem;
  font-weight: 700;

  margin-bottom: 16px;
}

.main-value {

  font-size: 3rem;
  font-weight: 900;

  margin-bottom: 26px;
}

.weather-details {

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-item {

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-bottom: 12px;

  border-bottom:
    1px solid var(--border-color);
}

.detail-item span {

  color: var(--text-secondary);
}

.detail-item strong {

  color: var(--text-primary);
}

/* =========================
   SECTION TITLE
========================= */
.section-title {

  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 1.5rem;
  font-weight: 800;

  margin-bottom: 28px;
}

/* =========================
   RECOMMENDATIONS
========================= */
.recommendation-section {

  margin-top: 40px;

  padding:
    35px;

  border-radius: 28px;

  background: var(--glass-bg);

  backdrop-filter: blur(20px);

  border:
    1px solid var(--border-color);

  box-shadow: var(--shadow-primary);
}

.recommend-box {

  height: 100%;

  padding:
    28px;

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid var(--border-color);
}

.recommend-box h5 {

  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 1.1rem;
  font-weight: 700;

  margin-bottom: 18px;
}

.recommend-box div {

  line-height: 1.8;

  color: var(--text-secondary);
}

/* =========================
   FORECAST SECTION
========================= */
.forecast-section {

  margin-top: 40px;

  padding:
    35px;

  border-radius: 28px;

  background: var(--glass-bg);

  backdrop-filter: blur(20px);

  border:
    1px solid var(--border-color);

  box-shadow: var(--shadow-primary);
}

.forecast-header {

  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;

  flex-wrap: wrap;

  margin-bottom: 28px;
}

.forecast-header h2 {

  font-size: 1.7rem;
  font-weight: 800;

  margin-bottom: 8px;
}

.forecast-header p {

  color: var(--text-secondary);
}

.chart-tabs {

  display: flex;
  gap: 12px;
}

.chart-tab {

  border: none;

  cursor: pointer;

  padding:
    12px 18px;

  border-radius: 14px;

  font-weight: 700;

  background:
    rgba(255, 255, 255, 0.06);

  color: var(--text-secondary);

  transition: all 0.3s ease;
}

.chart-tab.active,
.chart-tab:hover {

  background: var(--blue-gradient);

  color: white;

  transform: translateY(-2px);
}

.chart-wrapper {

  position: relative;

  height: 380px;
}

/* =========================
   TABLE
========================= */
.common-cities-section {

  margin-top: 40px;
}

.premium-table-wrap {

  border-radius: 24px;

  overflow: hidden;

  background: var(--glass-bg);

  backdrop-filter: blur(20px);

  border:
    1px solid var(--border-color);

  box-shadow: var(--shadow-primary);
}

.premium-table {

  margin: 0;

  color: var(--text-primary);
}

.premium-table thead {

  background:
    rgba(59, 130, 246, 0.14);
}

.premium-table th,
.premium-table td {

  padding:
    20px 18px;

  border-color: var(--border-color);

  white-space: nowrap;
}

.premium-table tbody tr {

  transition: all 0.25s ease;
}

.premium-table tbody tr:hover {

  background:
    rgba(255, 255, 255, 0.06);
}

/* =========================
   GUIDE MODAL
========================= */
.guide-modal {

  position: fixed;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    rgba(0, 0, 0, 0.6);

  backdrop-filter: blur(10px);

  z-index: 2000;
}

.guide-content {

  position: relative;

  width: 100%;
  max-width: 850px;

  padding:
    45px;

  border-radius: 32px;

  background: var(--bg-secondary);

  backdrop-filter: blur(25px);

  border:
    1px solid var(--border-color);

  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.4);
}

.close-guide {

  position: absolute;

  top: 20px;
  right: 22px;

  width: 48px;
  height: 48px;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  background:
    rgba(255, 255, 255, 0.08);

  color: var(--text-primary);

  font-size: 1.4rem;
}

.guide-top {

  text-align: center;

  margin-bottom: 40px;
}

.guide-icon {

  width: 90px;
  height: 90px;

  border-radius: 28px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin:
    0 auto 24px;

  font-size: 2rem;

  background: var(--blue-gradient);

  color: white;
}

.guide-top h2 {

  font-size: 2.2rem;
  font-weight: 900;

  margin-bottom: 16px;
}

.guide-top p {

  max-width: 650px;

  margin: auto;

  color: var(--text-secondary);

  line-height: 1.8;
}

.guide-grid {

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 24px;
}

.guide-box {

  padding:
    28px;

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid var(--border-color);
}

.guide-box h4 {

  font-size: 1.2rem;
  font-weight: 700;

  margin-bottom: 20px;
}

.guide-box ul {

  padding-left: 18px;
}

.guide-box li {

  margin-bottom: 12px;

  color: var(--text-secondary);
}

/* =========================
   SCROLLBAR
========================= */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {

  background:
    linear-gradient(
      #3b82f6,
      #8b5cf6
    );

  border-radius: 999px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {

  .premium-search {

    flex-wrap: wrap;

    margin-top: 20px;
  }

  .search-box input {

    width: 100%;
  }

  .forecast-header {

    flex-direction: column;
    align-items: flex-start;
  }

  .chart-tabs {

    width: 100%;

    overflow-x: auto;
  }
}

@media (max-width: 768px) {

  .hero-card {

    padding:
      40px 22px;
  }

  .premium-card {

    padding: 26px;
  }

  .guide-grid {

    grid-template-columns: 1fr;
  }

  .guide-content {

    padding:
      35px 24px;
  }

  .chart-wrapper {

    height: 300px;
  }
}

@media (max-width: 576px) {

  .premium-search {

    width: 100%;
  }

  .search-box {

    width: 100%;
  }

  .search-box input {

    width: 100%;
  }

  .search-btn {

    flex: 1;
  }

  .hero-card h1 {

    font-size: 2.4rem;
  }

  .main-value {

    font-size: 2.3rem;
  }

  .forecast-section,
  .recommendation-section {

    padding: 24px;
  }
}