/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #2c2c2c;
  background: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ===== Layout ===== */
.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Мягкие оттенки фирменного цвета #5fb9ff для чередования блоков */
:root {
  --brand: #5fb9ff;
  --section-bg-1: #fafcff;
  --section-bg-2: #f5faff;
  --section-bg-3: #f0f8ff;
  --section-bg-4: #eef6ff;
  --section-bg-5: #f2f9ff;
}

.section {
  padding: 64px 0;
}

.section--light {
  background: #f8f9fa;
}

.section--bg-1 { background: var(--section-bg-1); }
.section--bg-2 { background: var(--section-bg-2); }
.section--bg-3 { background: var(--section-bg-3); }
.section--bg-4 { background: var(--section-bg-4); }
.section--bg-5 { background: var(--section-bg-5); }

.section--cta {
  text-align: center;
}

.section__title {
  margin: 0 0 32px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

/* ===== 1. HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  background:
    
    url("bg.jpg") center center / cover no-repeat;
}

.social-top {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 20;
}

.social-top__link {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.social-top__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18);
}

.social-top__link--ig {
  background: radial-gradient(circle at 30% 30%, #fdf497 0, #fdf497 10%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-top__link--wa {
  background-color: #25D366;
}

.social-top__link::before {
  content: '';
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.social-top__link--ig::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='16' height='16' rx='4' ry='4' fill='none' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='white' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='7' r='1' fill='white'/%3E%3C/svg%3E");
}

.social-top__link--wa::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.04 3C7.6 3 4 6.6 4 11.04c0 1.66.46 3.03 1.25 4.3L5 21l3.8-1.22c1.2.66 2.55 1 3.98 1 4.44 0 8.04-3.6 8.04-8.04C20.82 6.6 17.23 3 12.79 3h-.75z' fill='none' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M10 9.5c-.2-.5-.4-.5-.7-.5-.2 0-.4 0-.6.2-.2.3-.7.7-.7 1.7s.7 1.9.8 2.1c.2.3 1.3 2.1 3.3 2.8 1.6.6 1.9.5 2.3.4.5-.1 1.1-.5 1.3-.9.2-.5.2-.8.1-.9-.1-.1-.2-.2-.5-.3-.3-.2-1.1-.6-1.3-.7-.2-.1-.4-.1-.5.1-.2.3-.5.8-.6.9-.1.1-.3.2-.5.1-.3-.1-1-.4-1.7-1.1-.6-.5-1-1.1-1.1-1.3-.1-.2 0-.4.1-.5.1-.1.2-.2.3-.4.1-.1.1-.2.2-.4 0-.2 0-.3-.1-.5l-.5-1.2z' fill='white'/%3E%3C/svg%3E");
}

.social-top__lang {
  min-width: 40px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(51, 65, 85, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.social-top__lang:hover {
  transform: translateY(-1px);
  background: rgba(15, 23, 42, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.weather-card {
  position: fixed;
  top: 110px;
  right: 24px;
  width: 220px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 0.85rem;
  color: #111827;
  z-index: 25;
}

.weather-card__header {
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.weather-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weather-card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.weather-card__temp {
  font-size: 1.6rem;
  font-weight: 700;
  color: #111827;
}

.weather-card__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(243, 244, 246, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.weather-card__icon {
  width: 40px;
  height: 40px;
}

.weather-card__desc {
  font-size: 0.8rem;
  color: #4b5563;
}
@media (max-width: 768px) {
  .weather-card {
    position: fixed !important;
    bottom: 12px;
    right: 12px;
    top: auto !important;

    font-size: 13px;
    padding: 8px 12px;
    max-width: 160px;

    z-index: 9999;
  }
}
@media (max-width: 768px) {
  .weather-card {
    display: none !important;
  }
}

.hero__inner {
  max-width: 640px;
  text-align: center;
  padding: 24px 20px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(40px);
  animation: heroFadeUp 0.9s ease-out 0.15s forwards;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__label {
  margin: 0 0 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #5fb9ff;
}

.hero__title {
  margin: 0 0 20px;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}

.hero__desc {
  margin: 0 0 12px;
  font-size: 1.125rem;
  color: #4a5568;
}

.hero__season {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  color: #6b7280;
}

.hero__price {
  margin: 0 0 32px;
  font-size: 1.25rem;
  color: #2c2c2c;
}

.hero__price strong {
  color: #5fb9ff;
  font-weight: 600;
}

.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: #5fb9ff;
  color: #fff;
  box-shadow: 0 4px 14px rgba(95, 185, 255, 0.5);
}

.btn--primary:hover {
  box-shadow: 0 6px 20px rgba(95, 185, 255, 0.7);
}

.btn--secondary {
  background: #ffffff;
  color: #4b5563;
  border: 2px solid #5fb9ff33;
}

.btn--secondary:hover {
  border-color: #5fb9ff;
  box-shadow: 0 4px 12px rgba(95, 185, 255, 0.35);
}

.btn--large {
  padding: 16px 36px;
  font-size: 1rem;
}

/* ===== 2. Что входит в тур ===== */
.included-list {
  display: grid;
  gap: 12px;
}

.included-list li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  color: #374151;
}

.included-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: #5fb9ff;
  border-radius: 50%;
}

/* ===== 3. Как проходит поездка ===== */
.steps-list {
  counter-reset: step;
}

.steps-list li {
  position: relative;
  padding: 16px 0 16px 52px;
  font-size: 1rem;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
}

.steps-list li:last-child {
  border-bottom: none;
}

.steps-list li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #5fb9ff;
  border-radius: 8px;
}

/* ===== 4. Цены (раскрывающиеся блоки) ===== */
.price-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.price-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.price-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 20px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  color: #1a1a1a;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.price-item__header:hover {
  background: #f8f9fa;
}

.price-item__header:focus {
  outline: none;
}

.price-item__header:focus-visible {
  box-shadow: inset 0 0 0 2px #1a1a1a;
}

.price-item__title {
  flex: 1;
  min-width: 0;
  margin-right: 16px; /* фиксированный зазор между названием и ценой */
  min-width: 10ch;    /* название не сжимается до слипания с ценой */
}

.price-item__amount {
  font-weight: 600;
  color: #1a1a1a;
  flex-shrink: 0;
  margin-left: auto;  /* цена прижата вправо, зазор за счёт margin-right у title */
  text-align: right;
  white-space: normal; /* длинные цены переносятся, не налезают на текст */
  max-width: 100%;
}

.price-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.25s;
}

.price-item.is-open .price-item__icon {
  transform: rotate(180deg);
}

.price-item__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.price-item.is-open .price-item__body {
  max-height: 480px;
}

.price-item__content {
  padding: 0 20px 20px;
  border-top: 1px solid #e5e7eb;
}

.price-item__content-title {
  margin: 12px 0 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
}

.price-item__content ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: disc;
}

.price-item__content li {
  margin-bottom: 4px;
  font-size: 0.9375rem;
  color: #374151;
}

/* ===== 5. Что взять с собой ===== */
.bring-list {
  display: grid;
  gap: 10px;
}

.bring-list li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  color: #374151;
}

.bring-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 600;
  color: #1a1a1a;
}

/* ===== 6. Локация ===== */
.location__text {
  margin: 0 0 24px;
  font-size: 1rem;
  color: #374151;
}

.map-placeholder {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #e8ecf0;
  border-radius: 12px;
  color: #6b7280;
  font-size: 0.9375rem;
}

.map-placeholder iframe {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 12px;
  border-radius: 8px;
}

.map-placeholder span {
  font-weight: 600;
  margin-bottom: 8px;
}

.map-placeholder p {
  margin: 0;
}

/* ===== 7. Расписание ===== */
.schedule__note {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  color: #6b7280;
}

.schedule-list {
  display: grid;
  gap: 10px;
}

.schedule-list li {
  padding: 14px 20px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 1rem;
  color: #374151;
}

/* ===== 8. Бронирование ===== */
.booking__text {
  max-width: 480px;
  margin: 0 auto 24px;
  font-size: 1rem;
  color: #374151;
  line-height: 1.65;
}

/* ===== 9. О TooGo Travel ===== */
.about__text {
  max-width: 560px;
}

.about__text p {
  margin: 0;
  font-size: 1rem;
  color: #374151;
  line-height: 1.7;
}

/* ===== 10. Footer ===== */
.footer {
  padding: 48px 0 32px;
  background: #1a1a1a;
  color: #e5e7eb;
  text-align: center;
}

.footer__content {
  font-size: 0.9375rem;
}

.footer__contacts {
  margin: 0 0 12px;
}

.footer__contacts a {
  color: #fff;
}

.footer__contacts a:hover {
  text-decoration: underline;
}

.footer__social {
  margin: 0 0 12px;
}

.footer__social a {
  color: #a5b4c8;
}

.footer__social a:hover {
  color: #fff;
}

.footer__place {
  margin: 0 0 8px;
  color: #9ca3af;
}

.footer__copy {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .section {
    padding: 48px 0;
  }

  .section__title {
    font-size: 1.5rem;
    margin-bottom: 24px;
  }

  .hero {
    min-height: auto;
    padding: 56px 24px 64px;
  }

  .hero__buttons {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .price-block {
    padding: 24px 20px;
  }

  .price-block__amount {
    font-size: 1.25rem;
  }

  .footer {
    padding: 40px 0 24px;
  }

  .weather-card {
    position: static;
    margin: 16px auto 0;
    width: 100%;
    max-width: 280px;
    right: auto;
    top: auto;
  }
}