/* ============================================================================
   modern.css — moderate modern refresh for elbrus07.ru, layered over main.css.
   Section 1: 152-ФЗ compliance UI (cookie banner, consent checkboxes, captcha).
   Section 2: visual refresh (typography, header, buttons, cards, mobile).
   Keep the blue brand; no radical changes.
   ============================================================================ */

:root {
  --pd-blue:        #1b4f8a;   /* refined brand blue */
  --pd-blue-dark:   #14406f;
  --pd-blue-soft:   #eaf1f9;
  --pd-yellow:      #f4b51c;   /* CTA accent (matches existing btn-yellow) */
  --pd-yellow-dark: #d99e0c;
  --pd-ink:         #25303b;
  --pd-muted:       #6a7682;
  --pd-line:        #e3e8ee;
  --pd-radius:      10px;
  --pd-shadow:      0 6px 22px rgba(20, 50, 90, .12);
}

/* ============================================================================
   SECTION 1 — COMPLIANCE UI
   ============================================================================ */

/* --- Cookie / tracking banner (152-ФЗ A7) --- */
#pd-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 22px;
  background: #fff;
  color: var(--pd-ink);
  border: 1px solid var(--pd-line);
  border-radius: var(--pd-radius);
  box-shadow: var(--pd-shadow);
  font-family: Arial, Verdana, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
#pd-cookie-banner .pd-cookie-banner__text { flex: 1 1 420px; }
#pd-cookie-banner a { color: var(--pd-blue); text-decoration: underline; }
#pd-cookie-banner .pd-cookie-banner__actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.pd-btn {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: Arial, Verdana, sans-serif;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pd-btn--accept { background: var(--pd-yellow); color: #2a2300; }
.pd-btn--accept:hover { background: var(--pd-yellow-dark); }
.pd-btn--reject { background: #fff; color: var(--pd-muted); border-color: var(--pd-line); }
.pd-btn--reject:hover { background: var(--pd-blue-soft); color: var(--pd-ink); }
.pd-btn:focus-visible { outline: 3px solid rgba(27, 79, 138, .45); outline-offset: 2px; }

/* --- Consent checkbox on forms (152-ФЗ A4) --- */
.pd-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 14px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: #cfe0f2;            /* on dark form backgrounds */
  text-align: left;
}
.pd-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  accent-color: var(--pd-yellow);
  cursor: pointer;
}
.pd-consent label { cursor: pointer; }
.pd-consent a { color: var(--pd-yellow); text-decoration: underline; }
/* On light popups the consent text needs a darker color */
.popup .pd-consent { color: #5a6470; }
.popup .pd-consent a { color: var(--pd-blue); }

/* --- SmartCaptcha container --- */
.pd-captcha { margin: 0 0 14px; min-height: 0; }
.pd-captcha:empty { display: none; }

/* --- Seller / legal info block in footer-contacts (ЗоЗПП D2) --- */
.legal-info {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: Arial, Verdana, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: #c7d6e6;
}
.legal-info p { margin: 0 0 4px; }
.legal-info a { color: var(--pd-yellow); text-decoration: underline; }

/* ============================================================================
   SECTION 2 — VISUAL REFRESH
   Layered over main.css (loads after it). Single-class selectors here override
   their main.css twins by source order; descendant selectors are matched at
   equal specificity on purpose. Keeps the blue brand and the single-page
   structure; the desktop overlap layout in main.css is left untouched.
   ============================================================================ */

:root {
  --pd-navy:        #0f2a4a;                    /* deep brand navy (mobile backdrop) */
  --pd-glass:       rgba(16, 38, 67, .74);      /* frosted navy for dark slabs */
  --pd-glass-line:  rgba(255, 255, 255, .10);
}

/* --- Typography rhythm ------------------------------------------------------ */
.screen-heading {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 8px;
  letter-spacing: .4px;
}
.screen-heading::after {                          /* restrained yellow "ridge" accent */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 66px;
  height: 4px;
  border-radius: 2px;
  background: var(--pd-yellow);
}

/* --- Buttons: unified hover / active / focus (a11y) ------------------------- */
.btn {
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover { filter: brightness(1.06); box-shadow: 0 5px 16px rgba(10, 30, 60, .28); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--pd-yellow); outline-offset: 2px; }

/* --- Form fields: visible focus ring --------------------------------------- */
.form-control {
  transition: box-shadow .15s ease, background-color .15s ease;
}
.form-control:focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(244, 181, 28, .55);
}

/* --- Nav: smooth hover ----------------------------------------------------- */
.nav__link { transition: background-color .15s ease, color .15s ease; }

/* --- Soften harsh black slabs -> frosted navy glass ------------------------ */
/* (was background-color: rgba(0,0,0,.8) throughout main.css) */
.room,
.reservetion__form,
.contact-form,
.social-btn,
.footer,
.about-content__footer,
.service-content__footer,
.tours-content__footer,
.rooms__footer,
.slider__heading span,
.header {
  background-color: var(--pd-glass);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.header { box-shadow: 0 2px 14px rgba(8, 22, 44, .35); }
.slider__heading span { border-radius: 6px; }

/* --- Room cards: shadow + hover lift --------------------------------------- */
.room {
  border: 1px solid var(--pd-glass-line);
  box-shadow: var(--pd-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.room:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(8, 22, 44, .45);
}

/* --- Price blocks: tidy ----------------------------------------------------- */
.price {
  border-radius: 8px;
  background-color: #0a78c4;
  background-image: linear-gradient(to top, #0075be, #0c9bf0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ============================================================================
   SECTION 2b — RESPONSIVE (mobile). main.css has zero media queries and the
   desktop layout is a stack of absolutely-overlapped, negative-margined screens
   tuned to 960px. Below 768px we dismantle that overlap, linearize every column,
   and paint a dark navy backdrop so the white body text stays readable once the
   photographic slab backgrounds are removed.
   ============================================================================ */

@media (max-width: 768px) {

  /* Keep padded widths from overflowing once we go fluid */
  .container,
  .contacts-screen .container,
  .reservetion__form, .contact-form, .room,
  .about-content__col-l, .about-content__col-r,
  .tours-content__col-l, .tours-content__col-r,
  .reservetion__form__col, .contacts__col-l, .contacts__col-r,
  .footer__inner, .form-control, .slider__overlay {
    box-sizing: border-box;
  }

  /* Dark brand backdrop replaces the removed slab images (white text stays legible) */
  /* overflow-x: clip (NOT hidden) contains residual horizontal scroll from the hero
     carousel without establishing a scroll container — so it neither forces overflow-y
     to auto (which broke vertical window scroll) nor trips the root→viewport
     overflow-propagation quirk that left `hidden` not actually clipping. */
  html, body { overflow-x: clip; }
  body { background: var(--pd-navy); }
  .about-screen__inner,
  .service-screen, .tours-screen,
  .rooms-screen, .reservetion-screen,
  .contacts-screen, .contacts-screen__inner {
    background-image: none;
    background-color: transparent;
  }

  /* Fluid container */
  .container,
  .contacts-screen .container {
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Un-fix the dual header bar; let it sit in normal flow */
  .header-top, .header {
    position: static;
    top: auto;
    width: 100%;
  }
  .header-top { padding: 10px 0; }
  .header-top .container,
  .header .container { text-align: center; }
  .header-top__slogan, .header-top__telephone,
  .rating-wrap, .header-top__call,
  .logo, .nav {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
  }
  .header-top__slogan { font-size: 20px; margin-top: 0; }
  .rating-wrap { width: auto; margin: 10px auto; display: inline-block; text-align: left; }
  .header-top__telephone { font-size: 22px; margin-top: 8px; }
  .header-top__call { margin-top: 10px; }
  .header-top__call .btn { display: inline-block; margin: 4px; }
  .logo { font-size: 38px; text-align: center; }
  .nav { margin-top: 8px; text-align: center; }
  .nav__item { float: none; display: inline-block; margin: 2px; }

  /* Neutralise the whole overlap / parallax system */
  .home-screen { height: auto; margin-top: 0; overflow: hidden; }
  .home-screen__slider { overflow: hidden; }
  .home-screen__slider, .slider__items, .slider__item { height: 60vw; min-height: 240px; max-height: 420px; }
  /* The 960px-wide prev/next controls overhang the viewport (left:-285) and were the
     literal source of the horizontal scroll; the carousel auto-advances, so drop them on mobile */
  .slider__controls { display: none; }
  .about-screen { margin-top: 0; }
  .about-screen__inner { padding-top: 28px; padding-bottom: 28px; }
  .first-screen { position: static; top: auto; }
  .service-screen, .tours-screen, .reservetion-screen {
    margin-top: 0; padding-top: 28px; padding-bottom: 28px;
  }
  .rooms-screen { margin-top: 0; padding-top: 28px; padding-bottom: 0; }
  .contacts-screen { margin-top: 0; padding-top: 28px; }
  .contacts-screen__inner { padding-bottom: 40px; }
  .about-parallax-container, .service-parallax-container {
    height: 0; margin-top: 0; display: none;
  }

  /* Hero overlay + booking form -> static, full width, stacked */
  .slider__overlay-wrap { position: static; height: auto; }
  .slider__overlay {
    width: auto; margin-left: 0; position: static; left: auto; top: auto;
    padding: 18px 0;
  }
  .slider__heading span { font-size: 26px; padding: 4px 12px; display: inline; line-height: 1.7; }
  .slider__heading .btn { position: static; top: auto; margin-left: 0; margin-top: 12px; display: inline-block; }
  .slider__room-order {
    position: static; width: auto; margin-top: 18px; right: auto; top: auto;
  }
  .slider__room-order .form-control { width: 100%; }
  .slider__pager { display: none; }

  /* Columns -> full-width stacked */
  .about-content__col-l, .about-content__col-r,
  .tours-content__col-l, .tours-content__col-r,
  .reservetion__form__col, .contacts__col-l, .contacts__col-r {
    float: none; width: auto; margin-right: 0;
  }

  /* Room grid -> single column */
  .room, .room:nth-child(2n) {
    float: none; width: auto; margin-right: 0; margin-bottom: 18px;
  }
  .room:hover { transform: none; }

  /* Booking + contact forms -> fluid */
  .reservetion__form { width: auto; }
  .reservetion__form .form-control,
  .reservetion__form select.form-control,
  .reservetion__form textarea.form-control { width: 100%; max-width: 100%; }
  .contact-form { width: auto; padding: 28px 18px; }
  .contact-form .form-control,
  .contact-form textarea.form-control { width: 100%; max-width: 100%; }

  /* Tours photo grid: let images shrink */
  .tours-content__col-r { margin-top: 18px; }
  .tours-content__photo, .tours-content__photo img { max-width: 46%; height: auto; }

  /* Service table -> linearised rows */
  .service-table, .service-table tbody, .service-table tr, .service-table td {
    display: block; width: 100%; text-align: center;
  }
  .service-table .icon { margin: 10px auto 4px; }

  /* Contacts block -> stacked + centered */
  .contacts__col-l, .contacts__col-r { text-align: center; }
  .telephones span, .telephones p { float: none; text-align: center; }
  .social-btn { margin-top: 24px; }
  .social-btn__text, .social-btn__icons { float: none; margin: 6px auto; text-align: center; }
  .social-btn__icon { display: inline-block; float: none; }
  .social-btn__icons { display: inline-block; }

  /* Footer -> static */
  .footer { position: static; bottom: auto; width: 100%; }
  .footer__inner { width: auto; }

  /* Type scale down */
  .screen-heading { font-size: 30px; }
  .contacts__heading { font-size: 34px; }
  .rooms__banner__heading { font-size: 30px; }

  /* Cookie banner stacks its actions on narrow screens */
  #pd-cookie-banner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }
  #pd-cookie-banner .pd-cookie-banner__text { flex: 0 0 auto; }
  #pd-cookie-banner .pd-cookie-banner__actions { justify-content: stretch; }
  #pd-cookie-banner .pd-btn { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .screen-heading { font-size: 26px; }
  .logo { font-size: 32px; }
  .slider__heading span { font-size: 21px; }
  .header-top__slogan { font-size: 17px; }
  .tours-content__photo, .tours-content__photo img { max-width: 100%; float: none; margin-right: 0; }
}