/* =========================================================
   style.css — полный набор стилей для проекта "Погода 7 дней"
   - базовая типографика и фон
   - форма поиска + autocomplete
   - карусель (3/2/1 карточки), стрелки, центрирование группы
   - карточки прогноза, hover, анимация появления
   - адаптивность, лоадер и мелкие правки
   ========================================================= */

/* ---------- CSS-переменные (цвета, тайминги) ---------- */
:root{
  --bg-start: #f6fbff;
  --bg-end:   #fbf8ff;
  --muted:    #6b7280;
  --text:     #111827;
  --accent1:  #9bd3c0;
  --accent2:  #c3b5f0;
  --card-radius: 14px;
  --gap: 16px;
  --anim-speed: 240ms;
}

/* ---------- Ресет и базовая типографика ---------- */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-start), var(--bg-end));
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding: 28px 12px;
}

/* ---------- App container ---------- */
.app{
  width:100%;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}

/* ---------- Header ---------- */
h1 {
  margin: 0 0 6px;
  font-size: 1.8rem;
  color: var(--text);
  line-height:1.05;
}
.subtitle{
  margin:0 0 18px;
  color: var(--muted);
  font-size:0.95rem;
}

/* ---------- Controls (search form) ---------- */
.controls{
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.autocomplete {
  position:relative;
  width:300px;
  max-width:100%;
}

#city{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg,#fff,#fbfdff);
  font-size:1rem;
  outline:none;
  box-shadow: 0 6px 18px rgba(59,130,246,0.03);
}
#city:focus{
  border-color: rgba(99,102,241,0.18);
  box-shadow: 0 8px 24px rgba(99,102,241,0.06);
}

#btn{
  padding:10px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background: linear-gradient(135deg, var(--accent2), var(--accent1));
  color: #06121a;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(17,24,39,0.06);
  transition: transform var(--anim-speed);
}
#btn:active{ transform: translateY(1px); }

/* ---------- Autocomplete suggestions ---------- */
.suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  border:1px solid #e6e6e6;
  border-top:none;
  margin:0;
  padding:0;
  list-style:none;
  max-height:220px;
  overflow-y:auto;
  z-index: 60;
}
.suggestions li{
  padding:8px 10px;
  cursor:pointer;
}
.suggestions li:hover{
  background:#f3f4f6;
}

/* remove default list styles if any */
.suggestions::-webkit-scrollbar{ width:8px; }
.suggestions::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.08); border-radius:6px; }

/* ---------- Meta / message ---------- */
.meta, .message {
  color: var(--muted);
  margin:8px 0;
  font-size:0.95rem;
  min-height:20px;
}

/* ---------- Carousel wrapper ---------- */
.carousel {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 6px auto 0;
  overflow: hidden;
  padding: 6px 0;
}

/* buttons: hidden by default, shown when carousel.has-content */
.carousel-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  display:none; /* visible only when .carousel.has-content */
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  cursor:pointer;
  z-index:50;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.carousel.has-content .carousel-btn { display:flex; } /* show only after render */
.carousel-btn.prev { left:8px; }
.carousel-btn.next { right:8px; }
.carousel-btn:disabled { opacity:0.45; cursor: default; }

/* ---------- Forecast track (flex + smooth scroll) ---------- */
.forecast-grid {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 6px 24px 18px 24px;
  align-items: stretch;
  /* justify-content убран — критично для scrollLeft! */
}
.forecast-grid::-webkit-scrollbar { display: none; }

/* Убираем scroll-snap-align, чтобы не мешал */
.card {
  /* scroll-snap-align: center; ← УДАЛЕНО */
  border-radius: var(--card-radius);
  min-height: 150px;
  background: var(--card-inner, #fff);
  transition: transform var(--anim-speed) ease, background var(--anim-speed) ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s forwards;
}
.card:hover{ transform: translateY(-6px); }

/* staggered animation delays for up to 10 cards (safe) */
.card:nth-child(1){ animation-delay: 0.04s; }
.card:nth-child(2){ animation-delay: 0.08s; }
.card:nth-child(3){ animation-delay: 0.12s; }
.card:nth-child(4){ animation-delay: 0.16s; }
.card:nth-child(5){ animation-delay: 0.20s; }
.card:nth-child(6){ animation-delay: 0.24s; }
.card:nth-child(7){ animation-delay: 0.28s; }
.card:nth-child(8){ animation-delay: 0.32s; }
.card:nth-child(9){ animation-delay: 0.36s; }
@keyframes fadeUp { to { opacity:1; transform: translateY(0); } }

/* ---------- Card inner content ---------- */
.card-inner{ padding:14px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; }
.card .day{ font-weight:700; margin:0; font-size:0.95rem; color:#0f1724; }
.icon-wrap{ color: var(--icon-color, #6b7280); display:flex; align-items:center; justify-content:center; }
.temps{ display:flex; gap:8px; font-weight:700; font-size:1.15rem; align-items:center; justify-content:center; }
.temps .max{ color:#111827; }
.temps .min{ color:var(--muted); font-weight:600; }
.label{ font-size:0.9rem; color:#374151; }

/* ---------- Loader ---------- */
.loader{ margin:10px auto; width:28px; height:28px; border-radius:50%; border:4px solid #f3f4f6; border-top-color:#6366f1; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- States: when not enough cards (no scroll) ---------- */
/* .carousel.no-scroll used to center and hide arrows when cards fit */
.carousel.no-scroll .forecast-grid {
  justify-content: center;
  overflow-x: hidden;
}
.carousel.no-scroll .carousel-btn { display: none !important; }

/* ---------- Responsive widths for cards:
   - >=900px -> 3 cards visible
   - 600-899px -> 2 cards
   - <=599px -> 1 card (about 90% width)
   We calculate width with flex-basis taking gap into account
---------- */
@media (min-width:900px){
  .card { flex: 0 0 calc((100% - (var(--gap) * 2)) / 3); } /* 3 cards, gaps = 2*gap */
}
@media (min-width:600px) and (max-width:899px){
  .card { flex: 0 0 calc((100% - (var(--gap) * 1)) / 2); } /* 2 cards, gap = 1*gap */
}
@media (max-width:599px){
  .card { flex: 0 0 90%; } /* single large card on mobile */
  .carousel-btn.prev { left:4px; }
  .carousel-btn.next { right:4px; }
  .controls { flex-direction:column; gap:10px; }
  .autocomplete { width:100%; }
}

/* ---------- Minor utilities & accessibility ---------- */
button:focus, input:focus { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.06); }

/* ensure suggestions list items look consistent */
.suggestions li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* safety for very small numbers of cards */
@media (max-width:420px){
  .card { min-height: 130px; }
}

.card .details {
  max-height: 0;          /* изначально скрыто */
  overflow: hidden;       /* скрываем содержимое при свернутом состоянии */
  transition: max-height 0.35s ease, padding 0.35s ease; /* плавный переход */
  padding: 0 0;           /* обнуляем внутренние отступы */
}

.card .details ul {
  margin: 0;
  padding: 0.5em 1em;    /* внутренние отступы для списка */
  list-style: none;
}

.card .details li {
  margin-bottom: 0.25em;
}

/* Класс для раскрытого состояния */
.card .details.show {
  max-height: 500px;     /* достаточно большое значение для содержимого */
  padding: 0.5em 1em;    /* отступы при раскрытии */
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: #fff;
  border-radius: 16px;
  max-width: 420px;
  width: 90%;
  padding: 1.2rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 16px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
}

.modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}

.modal-details {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal-details li {
  padding: 4px 0;
  border-bottom: 1px solid #eee;
}

@keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }
@keyframes slideUp { from {transform: translateY(20px); opacity: 0;} to {transform: translateY(0); opacity: 1;} }