/* ---------- Uzbekistan Flag Background — Subtle ---------- */
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  position: relative;
  color: #0d2a16;

  /* Subtle stripes using rgba for opacity */
  background:
    /* Thin red lines */
    linear-gradient(to bottom, transparent 32.9%, rgba(227, 10, 23, 0.3) 33%, transparent 33.1%),
    linear-gradient(to bottom, transparent 65.9%, rgba(227, 10, 23, 0.3) 66%, transparent 66.1%),
    /* Main stripes */
    linear-gradient(to bottom, rgba(0, 153, 214, 0.15) 0%, rgba(0, 153, 214, 0.15) 33%,
                               rgba(255, 255, 255, 0.08) 33%, rgba(255, 255, 255, 0.08) 66%,
                               rgba(20, 184, 29, 0.15) 66%, rgba(20, 184, 29, 0.15) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Crescent */
body::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 6%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 50%, rgba(255, 255, 255, 0.95) 50%, transparent 51%), /* Crescent with lower opacity */
    radial-gradient(circle at 50% 50%, rgba(0, 153, 214, 0.95) 40%, transparent 41%);
  z-index: 1;
}

/* 12 Stars */
body::after {
  content: "";
  position: absolute;
  top: 12%;
  left: 14%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25); /* Lower opacity */

  box-shadow:
    12px -6px rgba(255, 255, 255, 0.25),
    24px -12px rgba(255, 255, 255, 0.25),
    36px -6px rgba(255, 255, 255, 0.25),
    48px 0px rgba(255, 255, 255, 0.25),
    60px 6px rgba(255, 255, 255, 0.25),
    12px 12px rgba(255, 255, 255, 0.25),
    24px 18px rgba(255, 255, 255, 0.25),
    36px 12px rgba(255, 255, 255, 0.25),
    48px 18px rgba(255, 255, 255, 0.25),
    60px 12px rgba(255, 255, 255, 0.25),
    30px 24px rgba(255, 255, 255, 0.25),
    42px 20px rgba(255, 255, 255, 0.25);
  z-index: 1;
}


/* ---------- Hero Section ---------- */
.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin: 30px auto;
  max-width: 1280px;
  padding: 0 20px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: background 0.3s, box-shadow 0.3s;
}

/* ---------- Main Clock ---------- */
.main-clock {
  position: relative;
  text-align: center;
  margin-bottom: 24px;
}
.main-clock .time {
  font-size: 64px;
  font-weight: 700;
  color: var(--accent);
}
.main-clock .tz {
  font-size: 16px;
  color: var(--muted);
  margin-top: 6px;
}
.utc-small {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 106, 78, 0.15);
  border-radius: 10px;
  padding: 6px 12px;
  text-align: right;
}
.utc-small .clock-time {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
}
.utc-small .clock-tz {
  font-size: 12px;
  color: var(--muted);
}
body.dark-mode .main-clock .time,
body.dark-mode .utc-small .clock-time {
  color: #00e676;
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.6);
}

/* ---------- Meta Info ---------- */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.meta {
  background: rgba(0, 0, 0, 0.05);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--muted);
}
body.dark-mode .meta {
  background: rgba(255, 255, 255, 0.05);
}

/* ---------- Cities Grid ---------- */
.cities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.city-card {
  background: rgba(255, 255, 255, 0.15);
  padding: 14px;
  border-radius: var(--radius);
  text-align: center;
  backdrop-filter: blur(6px);
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.city-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.25);
}

/* ---------- City Name + Flag ---------- */
.city-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.city-name span.flag {
  font-size: 1.4em;
  line-height: 1;
}

/* ---------- City Time ---------- */
.city-time {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px;
}

/* ---------- Dark Mode ---------- */
body.dark-mode .city-card {
  background: rgba(0, 0, 0, 0.35);
}
body.dark-mode .city-name {
  color: #c8ffd6;
}
body.dark-mode .city-time {
  color: #00e676;
}

/* ---------- Flags ---------- */
.flag-inline-title {
  height: 1em;
  width: auto;
  margin-right: 0.4em;
  vertical-align: middle;
  border-radius: 0.2em;
  object-fit: cover;
  box-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease;
}
.flag-inline-title:hover {
  transform: scale(1.05);
}

/* ---------- Converter ---------- */
.converter .row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.converter .row select,
.converter .row input {
  flex: 1 1 250px;
  min-width: 250px;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
}
body.dark-mode .converter select,
body.dark-mode .converter input {
  background: #161b22;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ---------- Result Box ---------- */
.convert-result-box {
  position: relative;
  border: 3px double #0099d6;;
  padding: 18px 22px;
  display: none;
}
body.dark-mode .convert-result-box {
  border: 3px double #00e676;
}
.convert-result-box.show {
  display: block;
  animation: fadeInBox 0.4s ease-in-out;
}
@keyframes fadeInBox {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Action Buttons ---------- */
.convert-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  margin-top: 12px;
}
.copy-btn,
.share-buttons button {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}
.copy-btn:hover,
.share-buttons button:hover {
  background: var(--accent);
  color: #fff;
}

/* ---------- Buttons ---------- */
.cta {
  background: linear-gradient(180deg, #0099d626 33%, #ffffff14 66%, #14b81d26 100%);
  border: none;
  color: #000;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 10px 18px;
  cursor: pointer;
  transition: 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cta:hover {
  background: linear-gradient(135deg, #0099d626 33%, #ffffff14 66%, #14b81d26 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
  color: #000;
}

/* Dark Mode Override */
body.dark-mode .cta {
  color: #ffffff;
}
body.dark-mode .cta:hover {
  color: #ffffff;
}

/* ---------- Regions List ---------- */
.bangladesh-regions {
  text-align: center;
}
.states-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.division-link {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #4a4a4a;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
}
.division-link:hover {
  background: linear-gradient(180deg, #0099d626 33%, #ffffff14 66%, #14b81d26 100%);
  color: #000;
  font-weight: 600;
  transform: translateY(-2px);
}
body.dark-mode .division-link {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
body.dark-mode .division-link:hover {
  color: #05a32f;
}

/* ---------- Back Button ---------- */
.back-home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #0099d626 33%, #ffffff14 66%, #14b81d26 100%);
  color: #000;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  transition: 0.3s;
}
.back-home-button:hover {
  background: linear-gradient(135deg, #0099d626 33%, #ffffff14 66%, #14b81d26 100%);
  color: #000;
}
.back-home-wrapper {
  text-align: center;
  margin: 40px 0;
}

/* Dark Mode Override */
body.dark-mode .back-home-button {
  color: #ffffff;
}
body.dark-mode .back-home-button:hover {
  color: #ffffff;
}

/* ---------- Responsive (≤768px) ---------- */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  .main-clock .time {
    font-size: 48px;
  }
  .utc-small {
    position: static;
    margin-top: 10px;
    text-align: center;
  }
  .card {
    padding: 20px;
  }
}

/* ---------- Small Devices (≤480px) ---------- */
@media (max-width: 480px) {
  .hero { padding: 0 12px; gap: 16px; }
  .main-clock .time { font-size: 40px; }
  .card { padding: 16px; border-radius: 12px; }
  .city-card { padding: 14px; font-size: 14px; }
  .cta { padding: 10px 20px; font-size: 15px; }
  .meta { font-size: 14px; line-height: 1.4; }
}

/* ---------- XL Screens (≥1600px) ---------- */
@media (min-width: 1600px) {
  .hero { max-width: 1600px; gap: 40px; padding: 0 40px; }
  .main-clock .time { font-size: 80px; }
  .card { padding: 32px; }
  .city-card { padding: 18px; }
}

/* ---------- 4K Screens (≥2400px) ---------- */
@media (min-width: 2400px) {
  body { font-size: 18px; }
  .main-clock .time { font-size: 96px; }
}

/* ---------- Retina Optimization ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .flag-inline-title { image-rendering: crisp-edges; filter: saturate(1.05) contrast(1.05); }
  .card { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
  .city-card { backdrop-filter: blur(8px); }
  .cta { filter: contrast(1.1) brightness(1.05); }
  .main-clock .time { letter-spacing: -0.02em; }
  .city-time { text-shadow: 0 0 2px rgba(0, 0, 0, 0.15); }
}

/* ---------- Super Retina (≥3× Density) ---------- */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
  .flag-inline-title { filter: saturate(1.15) brightness(1.1); }
  .cta { filter: contrast(1.2) brightness(1.1); }
  .main-clock .time { text-shadow: 0 0 4px rgba(0, 106, 78, 0.25); }
}