/* =======================
   ТЕМА / ПАЛИТРА
   ======================= */
:root{
  --brand:#2a6df4;            /* единый брендовый синий */
  --brandGlow: rgba(42,109,244,.28);

  /* светлая (по умолчанию) */
  --bg:#F3F4FB; --bg-soft:#ffffff; --bg-elev:#ffffff;
  --text:#234158; --muted:#6B7A90; --line:#E6E8EF;
  --shadow:0 10px 24px rgba(23,24,28,.08), 0 3px 10px rgba(23,24,28,.04);

  --container:min(1120px,92vw);
  --radius:16px;
  --gap:clamp(16px,2.5vw,28px);
  --gap-lg:clamp(24px,3.2vw,40px);

  color-scheme: light;
}
html[data-theme="dark"]{
  --bg:#0e0f12; --bg-soft:#121419; --bg-elev:#151922;
  --text:#f3f5f8; --muted:#a7afc2; --line:#242938;
  --shadow:0 12px 28px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  color-scheme: dark;
}

/* =======================
   БАЗА
   ======================= */
*,
*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font:500 clamp(15px,1.05vw,16px)/1.55 "Inter",-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0; white-space:nowrap; clip-path:inset(50%); clip:rect(0 0 0 0); overflow:hidden; }
.container{ width:var(--container); margin-inline:auto; }

/* =======================
   КНОПКИ
   ======================= */
.btn{
  --btn-bg:var(--brand); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.85em 1.1em; border-radius:999px; border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:700; line-height:1; cursor:pointer;
  box-shadow:0 6px 16px var(--brandGlow);    /* фирменное свечение */
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ filter:brightness(1.03); }
.btn:active{ transform:translateY(1px); }
.btn--secondary{ --btn-bg:var(--bg-elev); --btn-fg:var(--text); border-color:var(--line); box-shadow:var(--shadow); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--text); border-color:var(--line); box-shadow:none; }
.btn--tg{ --btn-bg:#26A4E2; padding-right:3.2em; position:relative; }
.btn--tg::after{ content:""; position:absolute; right:.8em; top:50%; transform:translateY(-50%); width:22px; height:22px; background:url("img/logo_tg.png") center/contain no-repeat; }
.btn--wa{ --btn-bg:#32D951; padding-right:3.2em; position:relative; }
.btn--wa::after{ content:""; position:absolute; right:.8em; top:50%; transform:translateY(-50%); width:22px; height:22px; background:url("img/logo_wa.png") center/contain no-repeat; }

/* =======================
   HEADER / HERO
   ======================= */
.header{ background:#fff; border-bottom:1px solid var(--line); padding-bottom:var(--gap-lg); }
html[data-theme="dark"] .header{
  background:
    radial-gradient(1100px 550px at 80% -10%, color-mix(in srgb, var(--brand) 18%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 8%, var(--bg)) 0%, var(--bg) 60%);
}
.header__bar{
  width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap);
  padding:clamp(14px,2vw,22px) 0;
}
.header__left{ display:flex; align-items:center; gap: clamp(12px,1.4vw,18px); }
.header__logo{ display:inline-grid; place-items:center; width: clamp(48px,5vw,64px); height: clamp(48px,5vw,64px); }
.header__logo img{ width:100%; height:100%; object-fit:contain; }
.header__title{ font-family:"Montserrat Alternates",system-ui,sans-serif; font-weight:400; font-size:clamp(20px,2.2vw,28px); color:#234158; }
.header__phone{
  font-weight:700; padding:.55em .9em; border:1px dashed color-mix(in srgb,var(--brand) 55%, var(--line));
  border-radius:999px; background:color-mix(in srgb, var(--brand) 6%, transparent); color:#234158;
}

/* Слайдер темы (иконки перерисованы) */
.header__right{ display:flex; align-items:center; gap: clamp(10px,1.2vw,16px); }
.theme-toggle{ --w:56px; --h:30px; position:relative; width:var(--w); height:var(--h); display:inline-block; }
.theme-toggle input{ position:absolute; inset:0; opacity:0; }
.theme-toggle__slider{ position:absolute; inset:0; background:var(--bg-elev); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); }
.theme-toggle__slider::before{
  content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:
    /* солнце — ровное, без артефактов */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="%23f5a623" stroke-width="1.6" stroke-linecap="round"><circle cx="12" cy="12" r="4" fill="%23FFD06A"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5.6 5.6 4.2 4.2M19.8 19.8l-1.4-1.4M5.6 18.4 4.2 19.8M19.8 4.2l-1.4 1.4"/></g></svg>') center/16px no-repeat, #fff;
  border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 8px rgba(0,0,0,.08);
  transition:transform .22s ease, background .22s ease;
}
html[data-theme="dark"] .theme-toggle__slider::before{
  transform: translateX(26px);
  background:
    /* луна */
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23c9d6ff" d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z"/></svg>') center/16px no-repeat, #1b2332;
}

/* HERO */
.hero{ padding: clamp(10px,2.8vw,28px) 0 0; } /* без собственного фона — наследует общий */
.hero__subtitle{
  margin:0 0 clamp(10px,1.4vw,16px);
  font-family:"Montserrat Alternates",system-ui,sans-serif; font-weight:400; font-size:clamp(18px,2.2vw,26px); color:#234158;
}
.hero__image{ margin:0; border-radius:20px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.hero__image img{ width:100%; height:clamp(220px,38vw,420px); object-fit:cover; }

/* =======================
   БРОНИРОВАНИЕ
   ======================= */
.booking{
  position: relative;
  display: block;                      /* чтобы margin: auto сработал */
  width: max-content;                  /* по ширине содержимого */
  max-width: 100%;
  margin: calc(-1 * clamp(24px, 4vw, 48px)) auto 0;  /* по центру */
  background: var(--bg-elev);
  border: 0;                           /* убираем «черную» рамку */
  border-radius: 18px;
  padding: clamp(16px, 2vw, 20px);
  box-shadow: var(--shadow);
}

/* сброс стандартной рамки fieldset внутри формы бронирования */
.booking fieldset{
  border: 0;
  margin: 0;
  padding: 0;
}
.booking fieldset > legend{ padding: 0; }
.booking__row{ display:grid; grid-auto-flow:column; grid-auto-columns:max-content; column-gap:clamp(12px,2vw,18px); align-items:end; }
.booking__field{ display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.booking__label{ font:400 .95rem/1.2 "Montserrat Alternates",system-ui,sans-serif; color:#234158; }

/* поля — шире + иконки календаря/людей */
.booking input{
  font:600 16px/1.15 "Inter",-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  padding:.95em 1.1em; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--text); outline:none;
}
.booking .booking__field--date input{
  padding-left:2.4em;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="%23234158" stroke-width="1.6" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M8 3v4M16 3v4M3 10h18"/></g></svg>')
    .7em center/18px no-repeat, var(--bg);
}
.booking input.datepick{ width:22ch; }
.booking input[type="number"]{ width:10ch; }
.booking__field--guests input{
  padding-left:2.4em;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23234158" d="M16 11a4 4 0 1 0-3.999-4A4 4 0 0 0 16 11M8 11a4 4 0 1 0-3.999-4A4 4 0 0 0 8 11m0 2c-2.671 0-8 1.34-8 4v2h10v-2c0-1.86.93-3.41 2.34-4.47A9.7 9.7 0 0 0 8 13m8 0c-.29 0-.62.02-.97.05C17.19 13.9 18 15.1 18 17v2h6v-2c0-2.66-5.33-4-8-4Z"/></svg>')
    .7em center/18px no-repeat, var(--bg);
}
.booking input:focus{
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
}
.booking__actions{ display:flex; align-items:end; }

/* =======================
   СЕКЦИИ / КАРТОЧКИ
   ======================= */
.section{ width:var(--container); margin:0 auto; padding:var(--gap-lg) 0; }
.section__title{ margin:0 0 var(--gap); font:600 clamp(20px,2.6vw,32px)/1.2 "Montserrat Alternates",system-ui,sans-serif; color:#234158; }

.why__list{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr); }
.why__item{ grid-column:span 4; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(14px,2.2vw,22px); box-shadow:var(--shadow); }
.why__item-title{ margin:0 0 .4rem; font:600 clamp(16px,1.4vw,20px) "Montserrat Alternates",system-ui,sans-serif; color:#234158; }
.why__item-text{ margin:0; color:var(--muted); }

/* карточки номеров */
.cards{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr); }
.card.room{ grid-column:span 4; display:flex; flex-direction:column; background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; overflow:clip; box-shadow:var(--shadow); }
.room__media{ position:relative; aspect-ratio:16/10; background:var(--bg-soft); overflow:hidden; }

/* КАРУСЕЛЬ: стрелки только при ховере */
.carousel{ position:relative; width:100%; height:100%; }
.carousel__track{ display:flex; width:100%; height:100%; transition:transform .3s ease; }
.carousel__track img{ flex:0 0 100%; width:100%; height:100%; object-fit:cover; }
.carousel__btn{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--bg-elev); box-shadow:var(--shadow); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.room__media:hover .carousel__btn{ opacity:1; pointer-events:auto; }
.carousel__btn--prev{ left:8px; }
.carousel__btn--next{ right:8px; }
.carousel__dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:6px; justify-content:center; }
.carousel__dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#cfd7ea; opacity:.7; cursor:pointer; }
.carousel__dots button[aria-current="true"]{ background:var(--brand); opacity:1; }

.room__body{ padding:clamp(14px,2vw,22px); display:flex; flex-direction:column; gap:.5rem; }
.room__title{ margin:0; font:600 clamp(18px,1.5vw,22px) "Montserrat Alternates",system-ui,sans-serif; color:#234158; }
.room__lead{ margin:0; color:var(--muted); font-weight:600; }
.room__meta{ display:flex; gap:.6rem 1rem; flex-wrap:wrap; padding:0; margin:.4rem 0 0; list-style:none; color:var(--muted); }
.room__meta-item{ display:inline-flex; align-items:center; gap:.5rem; padding:.45em .7em; border-radius:999px; border:1px dashed var(--line); background:color-mix(in srgb,var(--bg-elev) 85%, var(--line) 15%); font-weight:700; }
.room__footer{ margin-top:auto; padding:clamp(12px,1.6vw,18px); display:flex; gap:.6rem; border-top:1px solid var(--line); }

/* Фильтры: кнопки рядом справа */
.section--rooms .section__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap); margin-bottom:var(--gap); }
.filters[hidden]{ display:none !important; }
.filters{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr); background:var(--bg-soft); border:1px dashed var(--line); border-radius:var(--radius); padding:var(--gap); margin-bottom:var(--gap); }
.filters__group{ grid-column:span 6; margin:0; padding:0; border:0; }
.filters__group > legend{ font-weight:700; margin-bottom:.6rem; color:#234158; }
.checkbox{ display:inline-flex; align-items:center; gap:.55rem; margin-right:1rem; margin-bottom:.5rem; font-weight:600; }
.filters__actions{ grid-column:1 / -1; display:flex; justify-content:flex-end; gap:.8rem; }

/* Контакты / Футер / Модалка */
.contacts{ display:grid; gap:var(--gap); grid-template-columns:repeat(12,1fr); }
.contacts__col{ grid-column:span 6; }
.contacts__subtitle{ margin:0 0 .6rem; font:600 clamp(16px,1.4vw,20px) "Montserrat Alternates",system-ui,sans-serif; color:#234158; }
.contacts__list{ margin:0 0 var(--gap); padding:0 0 0 1.2em; }
.contacts__address{ font-style:normal; color:var(--muted); margin-bottom:var(--gap); }
.contact-form{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem; }
.contact-form__label{ flex:1 0 100%; color:#234158; font:400 .95rem/1.2 "Montserrat Alternates",system-ui,sans-serif; }
.contact-form input[type="email"]{ flex:1 1 320px; min-width:240px; padding:.9em 1em; border-radius:12px; border:1px solid var(--line); background:var(--bg); }
.contact-form input[type="email"]:focus{ border-color:color-mix(in srgb,var(--brand) 55%, var(--line)); box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 14%, transparent); }

.footer{ margin-top:var(--gap-lg); border-top:1px solid var(--line); background:var(--bg-soft); }
.footer__copy{ width:var(--container); margin:0 auto; padding:18px 0; color:var(--muted); }

/* Модалка */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.modal[aria-hidden="false"]{ display:flex; }
.modal__dialog{ width:min(960px,96vw); max-height:92vh; overflow:auto; background:var(--bg-elev); color:var(--text); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:18px; }
.modal__close{ position:sticky; top:0; float:right; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--bg-soft); cursor:pointer; }
.modal__title{ margin:.4rem 0 1rem; font:700 1.25rem "Montserrat Alternates",system-ui,sans-serif; color:#234158; }
.modal__carousel{ margin-bottom:1rem; }
.modal__desc{ color:var(--text); }

/* Адаптив */
@media (max-width:720px){
  .header__bar{ padding:14px; width:100%; }
  .hero{ padding-inline:14px; }
  .section{ width:100%; padding-inline:14px; }
  .booking{ margin-top: calc(-1 * clamp(18px,3vw,32px)); border-radius:14px; }
  .booking__row{ grid-auto-flow:row; grid-auto-columns:1fr; row-gap:12px; }
  .cards,.why__list,.contacts{ grid-template-columns:repeat(6,1fr); }
  .why__item,.card.room,.contacts__col{ grid-column:1 / -1; }
  .room__footer{ flex-direction:column; }
}

/* =======================
   DATEPICKER (фон ячеек = фон окна)
   ======================= */
.datepicker{
  position:absolute; z-index:20; background:var(--bg-elev); color:var(--text);
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:10px; width:300px; font-family:"Inter",-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
.datepicker__nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-weight:700; }
.datepicker__btn{ border:1px solid var(--line); background:var(--bg-soft); border-radius:8px; padding:.4em .6em; cursor:pointer; }
.datepicker__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.datepicker__dow{ color:var(--muted); font-weight:700; text-align:center; }
.datepicker__cell{
  text-align:center; padding:.5em 0; border-radius:8px; cursor:pointer; color:var(--text);
  background:var(--bg-elev); border:1px solid var(--line);
}
.datepicker__cell:hover{ background: color-mix(in srgb, var(--brand) 10%, var(--bg-elev)); }
.datepicker__cell[aria-selected="true"]{
  background: color-mix(in srgb, var(--brand) 18%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}