:root {
  --bg: #f4f4f2;
  --white: #ffffff;
  --black: #191919;
  --text: #262626;
  --gray: #777;
  --grayLight: #a2a2a2;
  --line: #dededb;
  --red: #e31d25;
  --redDark: #c9131a;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, Arial, sans-serif;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
}


/* =========================
   HEADER
========================= */

.mainHeader,
.siteHeader,
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  padding: 0 5.5vw;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(14px);
}

.brand,
.logo,
.siteLogo,
.footerBrand {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--black);
  text-decoration: none;

  font-weight: 800;
  letter-spacing: .02em;
}

.brandMark,
.logoMark,
.logoSquare {
  width: 31px;
  height: 31px;

  display: grid;
  place-items: center;

  background: var(--black);
  color: #fff;

  font-size: 10px;
  font-weight: 800;
}

.brand span:last-child,
.logo span:last-child,
.siteLogo span:last-child {
  font-size: 12px;
}

.mainNav,
.headerNav,
.header nav,
nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.mainNav a,
.headerNav a,
.header nav a,
nav a {
  color: #555;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
}

.mainNav a:hover,
.headerNav a:hover,
.header nav a:hover,
nav a:hover {
  color: var(--red);
}

.headerBtn,
.headerAction,
.headerButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 17px;

  background: var(--black);
  border: 1px solid var(--black);

  color: #fff;
  text-decoration: none;

  font-size: 9px;
  font-weight: 800;

  transition: .18s ease;
}

.headerBtn:hover,
.headerAction:hover,
.headerButton:hover {
  background: var(--red);
  border-color: var(--red);
}


/* =========================
   MAIN CATALOG
========================= */

.catalogPage {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 5.5vw 110px;
}

.catalogFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  padding-bottom: 21px;

  border-bottom: 1px solid var(--line);
}

.catalogFilter {
  padding: 9px 13px;

  background: transparent;
  border: 1px solid #d4d4d1;

  color: #686868;

  font-size: 9px;
  font-weight: 600;

  cursor: pointer;

  transition: .18s ease;
}

.catalogFilter:hover,
.catalogFilter.active {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

.catalogHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: end;
  gap: 80px;

  padding: 58px 0 48px;
}

.catalogOverline,
.headingLabel {
  color: #858585;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.catalogHeader h1 {
  margin: 14px 0 0;

  color: var(--black);

  font-size: clamp(39px, 5.7vw, 74px);
  line-height: .98;

  letter-spacing: -.065em;
  font-weight: 800;
}

.catalogHeader h1 span {
  display: block;
  color: #8b8b8b;
}

.catalogSideText {
  color: #747474;

  font-size: 12px;
  line-height: 1.75;
}


/* =========================
   QUEST CARDS
========================= */

.questCatalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.catalogCard {
  display: block;

  background: var(--white);

  color: var(--text);
  text-decoration: none;

  border: 1px solid #dededb;

  overflow: hidden;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.catalogCard:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 35px rgba(0,0,0,.08);
}

.cardImage {
  position: relative;

  height: 370px;

  overflow: hidden;
}

.shizofreniyaImage {
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(185,19,29,.95) 0,
      rgba(117,13,19,.88) 17%,
      rgba(39,14,16,.95) 42%,
      #111 78%
    );
}

.shizofreniyaImage::before {
  content: "";

  position: absolute;

  width: 235px;
  height: 235px;

  left: 50%;
  top: 50%;

  transform: translate(-50%,-50%);

  border-radius: 50%;

  border: 1px solid rgba(255,255,255,.18);

  box-shadow:
    0 0 110px rgba(230,25,35,.32),
    inset 0 0 60px rgba(0,0,0,.5);
}

.shizofreniyaImage::after {
  content: "ШИЗОФРЕНИЯ";

  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%,-50%)
    rotate(-7deg);

  color: rgba(255,255,255,.16);

  font-size: clamp(24px, 3.5vw, 45px);
  font-weight: 800;

  letter-spacing: -.055em;

  white-space: nowrap;
}

.imageDark {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      140deg,
      transparent 0 45%,
      rgba(255,255,255,.04) 46%,
      transparent 47%
    );
}

.cardImage::selection {
  background: transparent;
}

.cardNew,
.cardAge {
  position: absolute;
  top: 18px;

  z-index: 5;

  padding: 8px 10px;

  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

.cardNew {
  left: 18px;

  background: var(--red);

  color: #fff;
}

.cardAge {
  right: 18px;

  background: rgba(0,0,0,.28);

  border: 1px solid rgba(255,255,255,.4);

  color: #fff;
}

.cardTitleOverlay {
  position: absolute;

  left: 20px;
  bottom: 18px;

  z-index: 5;

  color: rgba(255,255,255,.7);

  font-size: 8px;
  letter-spacing: .15em;
}

.cardInfo {
  padding: 24px 24px 27px;
}

.cardInfo h2 {
  margin: 0 0 19px;

  color: var(--black);

  font-size: 25px;
  line-height: 1;

  letter-spacing: -.045em;

  font-weight: 800;
  text-transform: uppercase;
}

.cardMeta {
  display: flex;
  gap: 23px;

  padding: 14px 0;

  border-top: 1px solid #e4e4e1;
}

.metaItem {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #555;

  font-size: 10px;
}

.metaIcon {
  color: var(--red);
  font-size: 12px;
}

.cardAddress {
  display: flex;
  align-items: center;
  gap: 7px;

  padding-top: 12px;

  color: #777;

  font-size: 9px;
}

.addressIcon {
  color: var(--red);
}

.comingImage {
  background:
    radial-gradient(
      circle at 50% 45%,
      #777 0,
      #414141 34%,
      #222 70%,
      #181818 100%
    );
}

.secondComingImage {
  background:
    radial-gradient(
      circle at 45% 45%,
      #653034 0,
      #392426 32%,
      #202020 68%,
      #151515 100%
    );
}

.comingText {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
}

.comingText span {
  color: rgba(255,255,255,.45);

  font-size: 8px;
  letter-spacing: .22em;
}

.comingText strong {
  margin-top: 12px;

  color: rgba(255,255,255,.75);

  font-size: 25px;
  letter-spacing: -.055em;
}


/* =========================
   ABOUT / CONTACTS
========================= */

.aboutSection,
.contactsSection {
  max-width: 1400px;
  margin: 0 auto;

  padding: 100px 5.5vw;

  border-top: 1px solid var(--line);

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9vw;
}

.aboutColumn h2,
.contactsSection h2 {
  margin: 18px 0 0;

  color: var(--black);

  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.02;

  letter-spacing: -.06em;
}

.aboutColumn h2 span,
.contactsSection h2 span {
  color: #888;
}

.aboutText,
.contactBlock {
  align-self: end;

  max-width: 540px;

  color: #777;

  font-size: 14px;
  line-height: 1.8;
}

.contactBlock {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.contactBlock strong {
  color: var(--black);
  font-size: 13px;
}

.contactBlock span {
  color: #777;
  font-size: 11px;
}


/* =========================
   BOOKING COMPONENTS
========================= */

.section {
  padding: 100px 6vw;

  border-top: 1px solid var(--line);
}

.booking,
.bookingPageSection {
  background: var(--bg);
}

.bookingHead,
.bookingHeadNew {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;

  margin-bottom: 45px;
}

.bookingHead h2,
.bookingHeadNew h2,
.questBlock h2,
.faq h2 {
  margin: 15px 0 0;

  color: var(--black);

  font-size: clamp(34px, 4.7vw, 62px);
  line-height: 1;

  letter-spacing: -.06em;
}

.bookingHead h2 span,
.bookingHeadNew h2 span,
.questBlock h2 span,
.faq h2 span {
  color: #888;
}

.price {
  text-align: right;
}

.price small {
  display: block;

  color: #777;

  font-size: 8px;
  letter-spacing: .12em;
}

.price strong {
  display: block;

  margin-top: 4px;

  color: var(--black);

  font-size: 22px;
}

.price span {
  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 8px;
}

.bookingGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
}

.calendarCard,
.slotsCard,
.formWrap {
  background: #fff;

  border: 1px solid #dddcd8;
}

.calendarCard {
  padding: 25px;
}

.calendarTop,
.calendarHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 27px;
}

.calendarTop button,
.calendarHeader button {
  width: 37px;
  height: 37px;

  background: #fff;

  border: 1px solid #ddd;

  color: #333;

  font-size: 22px;

  cursor: pointer;
}

.calendarTop strong,
.calendarHeader strong {
  color: #222;

  font-size: 12px;
}

.week,
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.week span {
  padding-bottom: 7px;

  text-align: center;

  color: #888;

  font-size: 7px;
}

.day {
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  background: #fafafa;

  border: 1px solid #e3e3e0;

  color: #222;

  font-size: 10px;

  cursor: pointer;
}

.day:hover {
  border-color: #444;
}

.day.muted {
  color: #c0c0c0;
  background: #f5f5f4;
}

.day.disabled {
  color: #c6c6c6;
  cursor: default;
}

.day.selected {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.slotsCard {
  min-height: 330px;

  padding: 25px;

  display: flex;
  flex-direction: column;
}

.slotsTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  color: #777;

  font-size: 8px;
  letter-spacing: .1em;
}

.slotsTop strong {
  color: #222;
  letter-spacing: 0;
}

.slots {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;

  margin-top: 20px;
}

.slot {
  padding: 13px 8px;

  border: 1px solid #ddd;

  background: #fafafa;

  color: #222;

  cursor: pointer;

  font-size: 11px;
  font-weight: 700;
}

.slot:hover {
  border-color: #333;
}

.slot.busy {
  color: #bbb;

  text-decoration: line-through;

  cursor: not-allowed;
}

.slot.active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.chosen {
  margin-top: auto;

  padding-top: 22px;

  border-top: 1px solid #e0e0dd;

  display: flex;
  justify-content: space-between;

  color: #777;

  font-size: 8px;
}

.chosen strong {
  color: #222;
}

.formWrap {
  margin-top: 18px;

  padding: 38px;

  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 55px;
}

.formInfo h3 {
  margin: 17px 0;

  color: #222;

  font-size: 28px;
  line-height: 1.05;
}

.formInfo h3 span {
  color: #777;
}

.formInfo p {
  max-width: 370px;

  color: #777;

  font-size: 12px;
  line-height: 1.7;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 7px;

  color: #777;

  font-size: 9px;
}

label:nth-child(4),
.submitButton,
.formMsg {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;

  padding: 13px;

  border: 1px solid #d5d5d2;

  background: #fff;

  color: #222;

  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #555;
}

textarea {
  min-height: 90px;
  resize: vertical;
}

.submitButton {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;

  border: 0;

  background: var(--red);

  color: #fff;

  cursor: pointer;

  font-size: 10px;
  font-weight: 800;
}

.submitButton:hover {
  background: var(--redDark);
}

.optional {
  color: #aaa;
}

.hidden {
  display: none !important;
}


/* =========================
   FAQ
========================= */

.faq {
  max-width: 1100px;
  margin: 0 auto;

  background: #fff;
}

.faqList {
  margin-top: 45px;

  border-top: 1px solid #ddd;
}

details {
  border-bottom: 1px solid #ddd;
}

summary {
  list-style: none;

  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 20px;

  padding: 23px 0;

  cursor: pointer;

  color: #222;

  font-size: 13px;
  font-weight: 700;
}

summary::-webkit-details-marker {
  display: none;
}

summary b {
  color: var(--red);

  font-size: 20px;
  font-weight: 400;

  text-align: right;
}

details p {
  max-width: 700px;

  margin: 0 0 24px;

  color: #777;

  font-size: 12px;
  line-height: 1.7;
}


/* =========================
   QUEST PAGE
========================= */

.questPage {
  background: var(--bg);
}

.questHero {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 25px;

  padding: 38px 5.5vw 60px;
}

.questHeroInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: 20px;
}

.backLink,
.questBack {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 43px;

  color: #777;

  text-decoration: none;

  font-size: 9px;
}

.questHeroInfo h1,
.questPageTitle {
  margin: 15px 0 0;

  color: var(--black);

  font-size: clamp(43px, 6vw, 76px);
  line-height: .95;

  letter-spacing: -.07em;

  text-transform: uppercase;
}

.questType {
  color: #858585;

  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tagline,
.questPageDescription {
  max-width: 520px;

  margin: 25px 0;

  color: #777;

  font-size: 13px;
  line-height: 1.75;
}

.mainStats,
.questStats {
  display: grid;
  grid-template-columns: repeat(3,1fr);

  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.mainStats div,
.questStats div {
  padding: 15px 10px;

  border-right: 1px solid #ddd;
}

.mainStats div:last-child,
.questStats div:last-child {
  border-right: 0;
}

.mainStats span,
.questStats span {
  display: block;

  margin-bottom: 6px;

  color: #888;

  font-size: 7px;
}

.mainStats strong,
.questStats strong {
  font-size: 10px;
}

.ratings {
  display: flex;
  gap: 24px;

  margin-top: 20px;
}

.ratingLabel {
  display: block;

  margin-bottom: 5px;

  color: #888;

  font-size: 7px;
}

.stars {
  color: #222;

  font-size: 10px;
  letter-spacing: 2px;
}

.questPriceLine {
  display: flex;
  align-items: baseline;
  gap: 8px;

  margin-top: 23px;
}

.questPriceLine small {
  color: #888;
  font-size: 8px;
}

.questPriceLine strong {
  color: #222;
  font-size: 22px;
}

.questPriceLine span {
  color: #888;
  font-size: 8px;
}

.heroBook,
.questBookButton {
  width: 100%;

  margin-top: 17px;

  padding: 16px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: var(--red);

  color: #fff;

  text-decoration: none;

  font-size: 9px;
  font-weight: 800;
}

.heroBook:hover,
.questBookButton:hover {
  background: var(--redDark);
}

.heroPoster,
.questHeroVisual {
  min-height: 560px;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(176,21,29,.9) 0,
      rgba(82,12,17,.7) 25%,
      #1b1515 50%,
      #111 80%
    );
}

.heroPoster::before,
.questHeroVisual::before {
  content: "";

  position: absolute;

  width: 65%;
  height: 65%;

  left: 17.5%;
  top: 17.5%;

  border: 1px solid rgba(255,255,255,.14);

  transform: rotate(5deg);
}

.questPageNav,
.questMenu {
  position: sticky;
  top: 72px;
  z-index: 30;

  display: flex;
  gap: 28px;

  padding: 13px 5.5vw;

  overflow-x: auto;

  background: rgba(255,255,255,.97);

  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.questPageNav a,
.questMenu a {
  white-space: nowrap;

  color: #666;

  text-decoration: none;

  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
}

.questPageNav a:hover,
.questMenu a:hover {
  color: var(--red);
}

.questBlock {
  padding: 90px 5.5vw;

  background: #fff;

  border-bottom: 1px solid #ddd;
}

.questBlock.alt {
  background: #f3f3f1;
}

.questBlockGrid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 9vw;
}

.longText,
.questLongText {
  max-width: 680px;

  margin: 0;

  color: #707070;

  font-size: 13px;
  line-height: 1.9;
}

.facts,
.questFacts {
  border-top: 1px solid #ddd;
}

.fact,
.questFact {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding: 16px 0;

  border-bottom: 1px solid #ddd;

  color: #777;

  font-size: 10px;
}

.fact strong,
.questFact strong {
  color: #222;
}

.gallery {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  grid-template-rows: 190px 190px;
  gap: 12px;
}

.galleryItem {
  position: relative;

  overflow: hidden;

  border: 1px solid #ddd;

  background:
    linear-gradient(135deg,#d9d9d7,#858585);
}

.galleryItem:first-child {
  grid-row: 1 / span 2;

  background:
    linear-gradient(135deg,#252525,#69171b 48%,#151515);
}

.galleryItem span {
  position: absolute;
  left: 14px;
  bottom: 12px;

  color: rgba(255,255,255,.75);

  font-size: 8px;
  letter-spacing: .14em;
}

.featureGrid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
}

.featureBox {
  min-height: 140px;

  padding: 22px;

  background: #fff;

  border: 1px solid #dededb;
}

.featureBox strong {
  display: block;

  margin-top: 27px;

  color: #222;

  font-size: 12px;
}

.featureBox p {
  color: #858585;

  font-size: 10px;
  line-height: 1.6;
}

.priceTable {
  border-top: 1px solid #ddd;
}

.priceRow {
  display: flex;
  justify-content: space-between;

  padding: 16px 0;

  border-bottom: 1px solid #ddd;

  color: #555;

  font-size: 10px;
}

.priceRow strong {
  color: #222;
}

.safety {
  margin-top: 25px;

  padding: 18px;

  background: #fff;

  border-left: 3px solid var(--red);

  color: #666;

  font-size: 10px;
  line-height: 1.7;
}


/* =========================
   FOOTER
========================= */

.footer,
.siteFooter {
  min-height: 82px;

  padding: 24px 5.5vw;

  background: #1b1b1b;

  color: #8e8e8e;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  font-size: 8px;
}

.footer .brand,
.siteFooter .siteLogo,
.footerBrand {
  color: #fff;
}

.footer .brandMark,
.siteFooter .logoSquare {
  background: #fff;
  color: #1b1b1b;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

  .mainNav,
  .headerNav,
  .header nav,
  nav {
    display: none;
  }

  .catalogHeader,
  .aboutSection,
  .contactsSection,
  .questHero,
  .questBlockGrid,
  .bookingGrid,
  .formWrap {
    grid-template-columns: 1fr;
  }

  .catalogHeader {
    gap: 25px;
  }

  .questCatalog {
    grid-template-columns: 1fr;
  }

  .questHeroVisual,
  .heroPoster {
    min-height: 400px;
    order: -1;
  }

  .price,
  .priceBlock {
    text-align: left;
  }

  .bookingHead,
  .bookingHeadNew {
    align-items: flex-start;
  }

}

@media (max-width: 600px) {

  .mainHeader,
  .siteHeader,
  .header {
    padding: 0 5vw;
  }

  .headerBtn,
  .headerAction,
  .headerButton {
    display: none;
  }

  .catalogPage,
  .questHero,
  .questBlock,
  .aboutSection,
  .contactsSection {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .catalogHeader h1 {
    font-size: 38px;
  }

  .cardImage {
    height: 275px;
  }

  .cardInfo {
    padding: 21px;
  }

  .cardInfo h2 {
    font-size: 22px;
  }

  .mainStats,
  .questStats {
    grid-template-columns: 1fr;
  }

  .mainStats div,
  .questStats div {
    border-right: 0;
    border-bottom: 1px solid #ddd;
  }

  .mainStats div:last-child,
  .questStats div:last-child {
    border-bottom: 0;
  }

  .ratings {
    flex-direction: column;
    gap: 10px;
  }

  form {
    grid-template-columns: 1fr;
  }

  label:nth-child(4),
  .submitButton,
  .formMsg {
    grid-column: auto;
  }

  .formWrap {
    padding: 24px;
  }

  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3,160px);
  }

  .galleryItem:first-child {
    grid-row: auto;
  }

  .featureGrid {
    grid-template-columns: 1fr;
  }

  .footer,
  .siteFooter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================
   HORROR DARK THEME
   ========================= */

:root {
  --bg: #070707;
  --bg-soft: #0d0d0d;
  --card: #121212;
  --card-hover: #181818;
  --text: #f2f2f2;
  --muted: #9b9b9b;
  --red: #8f1010;
  --red-bright: #c51b1b;
  --border: rgba(255,255,255,.08);
}

html {
  background: var(--bg) !important;
  color-scheme: dark;
}

body {
  margin: 0 !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(120,0,0,.20), transparent 40%),
    linear-gradient(180deg, #050505 0%, #090909 45%, #050505 100%) !important;
  color: var(--text) !important;
  font-family: Arial, Helvetica, sans-serif;
}

/* Все основные блоки */

header,
nav,
section,
main,
footer,
.container,
.content,
.hero,
.booking,
.about,
.gallery,
.features,
.contacts,
.faq {
  color: var(--text);
}

/* Заголовки */

h1,
h2,
h3,
h4 {
  color: #fff !important;
  letter-spacing: -0.02em;
}

h1 {
  text-shadow: 0 0 25px rgba(170,0,0,.25);
}

/* Обычный текст */

p,
span,
label,
li {
  color: inherit;
}

small,
.muted,
.description,
.subtitle {
  color: var(--muted) !important;
}

/* Карточки */

.card,
.quest-card,
.quest,
.feature,
.price-card,
.booking-card,
.info-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow:
    0 15px 45px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.card:hover,
.quest-card:hover,
.quest:hover,
.feature:hover,
.price-card:hover,
.booking-card:hover,
.info-card:hover {
  background: var(--card-hover) !important;
  border-color: rgba(160,20,20,.45) !important;
  transform: translateY(-3px);
  transition: .25s ease;
}

/* Навигация */

nav,
.navbar,
.header {
  background: rgba(5,5,5,.88) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

nav a,
.navbar a,
.header a {
  color: #ddd !important;
}

nav a:hover,
.navbar a:hover,
.header a:hover {
  color: #d51c1c !important;
}

/* Кнопки */

button,
.btn,
.button,
a.button,
input[type="submit"] {
  background: linear-gradient(135deg, #8b0d0d, #bc1717) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 8px 25px rgba(150,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition: .2s ease;
}

button:hover,
.btn:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #aa1111, #df1c1c) !important;
  box-shadow:
    0 10px 35px rgba(180,0,0,.4);
  transform: translateY(-2px);
}

/* Поля */

input,
textarea,
select {
  background: #101010 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

input::placeholder,
textarea::placeholder {
  color: #777 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: rgba(170,20,20,.7) !important;
  box-shadow: 0 0 0 3px rgba(150,0,0,.12) !important;
}

/* Разделители */

hr {
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}

/* Ссылки */

a {
  color: #c91b1b;
}

a:hover {
  color: #ef2a2a;
}

/* Скроллбар */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #050505;
}

::-webkit-scrollbar-thumb {
  background: #3a0909;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #691010;
}

/* Выделение текста */

::selection {
  background: rgba(150,0,0,.5);
  color: #fff;
}

/* Красное свечение для важных элементов */

.price,
.cost,
.highlight,
.accent,
.rating,
.quest-title {
  color: #d51b1b !important;
}

/* Фото */

img {
  border-color: rgba(255,255,255,.08);
}

/* Затемнение вокруг главной части страницы */

main {
  background: transparent !important;
}

/* Мобильная адаптация */

@media (max-width: 700px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 28px;
  }
}


/* =========================================================
   ДОМ ТЬМЫ — PANIKA STYLE REDESIGN
   ========================================================= */

:root {
  --dt-bg: #0a0a0a;
  --dt-panel: #111111;
  --dt-panel-2: #151515;
  --dt-line: #292929;
  --dt-text: #f4f4f4;
  --dt-muted: #999999;
  --dt-red: #a30000;
  --dt-red-light: #d01818;
}

/* Базовая страница */

html {
  background: var(--dt-bg) !important;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(120, 0, 0, .16), transparent 34%),
    var(--dt-bg) !important;
  color: var(--dt-text) !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   HEADER
   ========================================================= */

.mainHeader,
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  box-sizing: border-box;

  background: rgba(8, 8, 8, .96) !important;
  border-bottom: 1px solid var(--dt-line) !important;
  backdrop-filter: blur(14px);
}

.mainHeader {
  min-height: 68px;
  padding: 0 36px !important;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.siteHeader {
  min-height: 68px;
  padding: 0 36px !important;
}

.brand,
.siteLogo {
  text-decoration: none !important;
  display: flex;
  align-items: center;
  gap: 11px;
  color: white !important;
}

.brandMark,
.logoSquare {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border: 1px solid #777;
  background: #111;
  color: white;

  font-size: 14px;
  font-weight: 800;
}

#brandName {
  font-size: 16px;
  letter-spacing: .08em;
  font-weight: 800;
  color: #fff !important;
}

.mainNav,
.headerNav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.mainNav a,
.headerNav a {
  color: #aaa !important;
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mainNav a:hover,
.headerNav a:hover {
  color: #fff !important;
}

/* Основная кнопка */

.headerBtn,
.headerAction,
.heroBook,
.submitButton {
  border: 0 !important;
  background: var(--dt-red) !important;
  color: white !important;
  text-decoration: none !important;

  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;

  transition: .2s ease;
}

.headerBtn:hover,
.headerAction:hover,
.heroBook:hover,
.submitButton:hover {
  background: var(--dt-red-light) !important;
  transform: translateY(-1px);
}

/* =========================================================
   ГЛАВНАЯ — КАТАЛОГ
   ========================================================= */

.catalogPage {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 36px 90px !important;
}

/* Категории как у Panika */

.catalogFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 42px;
  padding-bottom: 16px;

  border-bottom: 1px solid var(--dt-line);
}

.catalogFilter {
  border: 1px solid #303030 !important;
  background: #111 !important;
  color: #aaa !important;

  padding: 10px 15px !important;

  font-size: 11px !important;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .06em;

  cursor: pointer;
}

.catalogFilter:hover,
.catalogFilter.active {
  background: #fff !important;
  color: #050505 !important;
  border-color: #fff !important;
}

/* Заголовок каталога */

.catalogHeader {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;

  align-items: end;

  margin-bottom: 34px;
}

.catalogOverline {
  margin-bottom: 11px;

  color: #777 !important;

  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.catalogHeader h1 {
  margin: 0;

  font-size: clamp(42px, 6vw, 78px) !important;
  line-height: .95;

  font-weight: 800 !important;
  letter-spacing: -.045em;

  color: #fff !important;
}

.catalogHeader h1 span {
  display: block;

  margin-top: 9px;

  color: #666 !important;
  font-weight: 400;
}

.catalogSideText {
  color: #8e8e8e !important;
  font-size: 14px !important;
  line-height: 1.65;
}

/* =========================================================
   КАРТОЧКИ КВЕСТОВ
   ========================================================= */

.questCatalog {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.catalogCard {
  min-width: 0;

  background: var(--dt-panel) !important;
  border: 1px solid var(--dt-line) !important;

  overflow: hidden;

  transition: transform .22s ease, border-color .22s ease;
}

.catalogCard:hover {
  transform: translateY(-4px);
  border-color: #555 !important;
}

.cardImage {
  position: relative;

  height: 380px !important;

  background-color: #080808 !important;
  overflow: hidden;
}

.cardImage::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.05) 35%,
      rgba(0,0,0,.88) 100%
    );

  pointer-events: none;
}

.imageDark {
  opacity: .08 !important;
}

.cardAge,
.cardNew {
  z-index: 3;
}

.cardAge {
  background: #050505 !important;
  border: 1px solid #444 !important;
  color: #fff !important;
}

.cardNew {
  background: var(--dt-red) !important;
  color: white !important;
}

.cardTitleOverlay {
  z-index: 4;

  font-size: clamp(25px, 3vw, 39px) !important;
  font-weight: 800 !important;

  letter-spacing: -.03em;
}

/* Информация карточки */

.cardInfo {
  padding: 23px 24px 25px !important;

  background: #111 !important;
}

.cardInfo h2 {
  margin: 0 0 17px !important;

  color: #fff !important;

  font-size: 26px !important;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.cardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 19px;

  margin-bottom: 17px;
}

.metaItem {
  display: flex;
  align-items: center;
  gap: 7px;

  color: #999 !important;

  font-size: 12px !important;
}

.metaIcon {
  color: #fff !important;
}

.cardAddress {
  padding-top: 15px;

  border-top: 1px solid #242424;

  color: #777 !important;
  font-size: 12px !important;
}

.cardAddress span {
  color: inherit !important;
}

/* Будущие квесты */

.comingCard {
  opacity: .7;
}

.comingCard:hover {
  opacity: 1;
}

/* =========================================================
   СТРАНИЦА КВЕСТА
   ========================================================= */

.questPage {
  max-width: 1280px;
  margin: 0 auto;
}

/* Hero */

.questHero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);

  min-height: 620px;

  border-bottom: 1px solid var(--dt-line);
}

.questHeroInfo {
  padding: 58px 50px 60px 36px !important;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.backLink {
  color: #777 !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}

.questType {
  margin-top: 26px;

  color: #999 !important;

  font-size: 11px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.questHero h1 {
  margin: 13px 0 14px !important;

  color: white !important;

  font-size: clamp(54px, 7vw, 96px) !important;
  line-height: .88;
  letter-spacing: -.055em;

  font-weight: 800 !important;
}

.tagline {
  max-width: 580px;

  color: #9a9a9a !important;
  line-height: 1.65;
}

.mainStats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;

  margin-top: 30px;
  padding-top: 24px;

  border-top: 1px solid #252525;
}

.mainStats strong {
  display: block;

  color: #fff !important;
  font-size: 22px !important;
}

.mainStats span {
  color: #777 !important;
  font-size: 10px !important;
  text-transform: uppercase;
}

.ratings {
  margin-top: 22px;
}

.rating {
  color: #888 !important;
}

.stars {
  color: var(--dt-red-light) !important;
}

.heroPoster {
  position: relative;

  background: #080808 !important;

  min-height: 620px;
  overflow: hidden;

  border-left: 1px solid var(--dt-line);
}

.posterContent {
  min-height: 100%;
}

/* Кнопка брони */

.heroBook {
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 32px;

  min-height: 52px;
  padding: 0 25px;

  font-size: 11px;
}

/* =========================================================
   МЕНЮ СТРАНИЦЫ — как горизонтальная навигация Panika
   ========================================================= */

.questMenu {
  position: sticky;
  top: 68px;
  z-index: 100;

  display: flex;
  align-items: center;
  gap: 0;

  overflow-x: auto;

  background: rgba(10,10,10,.97) !important;
  border-bottom: 1px solid var(--dt-line) !important;

  scrollbar-width: none;
}

.questMenu::-webkit-scrollbar {
  display: none;
}

.questMenu a {
  flex: 0 0 auto;

  padding: 19px 22px !important;

  color: #777 !important;
  text-decoration: none;

  font-size: 11px !important;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: .07em;

  border-right: 1px solid #202020;
}

.questMenu a:hover {
  color: #fff !important;
  background: #141414 !important;
}

/* =========================================================
   СЕКЦИИ
   ========================================================= */

.questBlock {
  padding: 82px 36px !important;

  border-bottom: 1px solid var(--dt-line) !important;

  background: #0a0a0a !important;
}

.questBlock.alt {
  background: #0f0f0f !important;
}

.questBlockGrid {
  display: grid;
  grid-template-columns: 255px minmax(0, 1fr);
  gap: 55px;
}

.headingLabel {
  color: #6e6e6e !important;

  font-size: 11px !important;
  font-weight: 800;

  text-transform: uppercase;
  letter-spacing: .14em;
}

.longText {
  max-width: 760px;

  color: #d0d0d0 !important;

  font-size: 16px !important;
  line-height: 1.85;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;

  background: #262626;
}

.fact {
  padding: 22px;

  background: #111 !important;
}

.fact strong {
  color: white !important;
}

.fact span {
  color: #777 !important;
}

/* =========================================================
   ГАЛЕРЕЯ
   ========================================================= */

.gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.galleryItem {
  min-height: 250px;

  background: #111 !important;
  border: 1px solid #242424 !important;
}

/* =========================================================
   FEATURES
   ========================================================= */

.featureGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.featureBox {
  min-height: 150px;

  padding: 24px !important;

  background: #111 !important;
  border: 1px solid #242424 !important;
}

.featureBox:hover {
  border-color: #444 !important;
}

.miniLabel {
  color: var(--dt-red-light) !important;
}

/* =========================================================
   ЦЕНЫ
   ========================================================= */

.priceTable {
  border-top: 1px solid #282828;
}

.priceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 19px 0;

  border-bottom: 1px solid #282828;
}

.priceRow strong {
  color: #fff !important;
  font-size: 20px;
}

.priceRow span {
  color: #777 !important;
}

/* =========================================================
   БРОНИРОВАНИЕ
   ========================================================= */

.bookingArea {
  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(150,0,0,.13),
      transparent 35%
    ),
    #090909 !important;
}

.bookingHeadNew {
  border-bottom: 1px solid #292929;
  padding-bottom: 30px;
}

.price {
  color: #fff !important;
}

.calendarCard,
.slotsCard,
.formWrap {
  background: #111 !important;
  border: 1px solid #292929 !important;
}

button#prev,
button#next {
  background: #171717 !important;
  border: 1px solid #303030 !important;
  color: white !important;
}

.slot,
.calendar button {
  background: #151515 !important;
  border-color: #303030 !important;
  color: white !important;
}

.slot:hover,
.slot.active,
.calendar button:hover,
.calendar button.active {
  background: var(--dt-red) !important;
  border-color: var(--dt-red-light) !important;
}

/* =========================================================
   FAQ
   ========================================================= */

.faqList {
  border-top: 1px solid #282828;
}

.faqItem {
  border-bottom: 1px solid #282828;
  color: #ddd !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

.siteFooter,
.footer {
  margin-top: 0 !important;
  padding: 45px 36px !important;

  background: #050505 !important;
  border-top: 1px solid #222 !important;
}

.footerBrand {
  opacity: .9;
}

/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================= */

@media (max-width: 800px) {

  .mainHeader,
  .siteHeader {
    padding: 0 18px !important;
  }

  .mainNav,
  .headerNav {
    gap: 10px;
  }

  .mainNav a:not(.headerBtn),
  .headerNav a:not(.headerAction) {
    display: none;
  }

  .catalogPage {
    padding: 22px 18px 60px !important;
  }

  .catalogHeader {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .questCatalog {
    grid-template-columns: 1fr !important;
  }

  .cardImage {
    height: 340px !important;
  }

  .questHero {
    grid-template-columns: 1fr;
  }

  .heroPoster {
    min-height: 460px;
    border-left: 0;
    border-top: 1px solid var(--dt-line);
  }

  .questHeroInfo {
    padding: 40px 20px !important;
  }

  .questBlock {
    padding: 55px 20px !important;
  }

  .questBlockGrid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .gallery {
    grid-template-columns: 1fr 1fr !important;
  }

  .featureGrid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   ДОМ ТЬМЫ — БРОНИРОВАНИЕ В СТИЛЕ PANIKA
   ========================================================= */

.dt-booking {
  background: #111116 !important;
  padding: 54px 4vw 90px !important;
}

.dt-booking-head {
  border-bottom: 1px solid #303038;
  padding-bottom: 28px;
  margin-bottom: 30px;
}

.dt-booking-title {
  margin: 0 !important;
  color: #f3f3f3 !important;
  font-size: clamp(38px, 6vw, 68px) !important;
  line-height: .98 !important;
  font-weight: 400 !important;
  letter-spacing: -.04em;
}

.dt-booking-subtitle {
  margin: 12px 0 0;
  color: #9ca4b5 !important;
  font-size: 18px;
}

.dt-price-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 3px 0 15px;
  margin-top: 28px;
  scrollbar-width: none;
}

.dt-price-strip::-webkit-scrollbar {
  display: none;
}

.dt-price-pill {
  flex: 0 0 auto;
  min-width: 120px;
  padding: 14px 20px;
  border-radius: 999px;
  text-align: center;
  color: #fff !important;
  font-size: 18px;
  font-weight: 500;
  box-sizing: border-box;
  border: 0;
}

.dt-price-pill:nth-child(4n + 1) {
  background: #a57cff !important;
}

.dt-price-pill:nth-child(4n + 2) {
  background: #45239b !important;
}

.dt-price-pill:nth-child(4n + 3) {
  background: #842827 !important;
}

.dt-price-pill:nth-child(4n + 4) {
  background: #b00057 !important;
}

.dt-days {
  display: flex;
  flex-direction: column;
}

.dt-day {
  padding: 34px 0 36px;
  border-bottom: 1px solid #3a3a42;
}

.dt-day-title {
  margin: 0 0 24px;
  text-align: center;
  color: #f1f1f1 !important;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  letter-spacing: -.025em;
}

.dt-slots {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.dt-slot {
  min-height: 76px;
  border: 0 !important;
  border-radius: 7px;
  background: #242429 !important;
  color: #8e8e96 !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  transition: transform .18s ease, filter .18s ease, background .18s ease;
  cursor: pointer;
}

.dt-slot.available:nth-child(4n + 1) {
  background: #9d78f7 !important;
  color: #fff !important;
}

.dt-slot.available:nth-child(4n + 2) {
  background: #45249a !important;
  color: #fff !important;
}

.dt-slot.available:nth-child(4n + 3) {
  background: #832926 !important;
  color: #fff !important;
}

.dt-slot.available:nth-child(4n + 4) {
  background: #ae0055 !important;
  color: #fff !important;
}

.dt-slot.available:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.dt-slot.busy,
.dt-slot:disabled {
  background: #202024 !important;
  color: #5f6067 !important;
  cursor: not-allowed;
  opacity: .72;
}

.dt-booking-note {
  margin-top: 16px;
  color: #777a84 !important;
  font-size: 13px;
  text-align: center;
}

/* ---------- МОДАЛЬНОЕ ОКНО ---------- */

.dt-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.dt-modal.open {
  display: flex;
}

.dt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}

.dt-modal-box {
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  max-height: min(760px, 92vh);
  overflow-y: auto;
  background: #1b1b23;
  border: 1px solid #454550;
  border-radius: 22px;
  box-shadow: 0 25px 90px rgba(0,0,0,.65);
  padding: 24px 28px 26px;
  box-sizing: border-box;
}

.dt-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid #e6e6e6;
}

.dt-modal-title {
  margin: 0;
  color: #f4f4f5;
  font-size: 21px;
  font-weight: 700;
}

.dt-modal-close {
  width: 42px;
  height: 42px;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 39px !important;
  line-height: 1;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0 !important;
}

.dt-selected {
  margin: 20px auto;
  display: grid;
  grid-template-columns: 130px 1fr;
  border: 2px solid #efeff2;
  border-radius: 42px;
  overflow: hidden;
  background: #34343d;
}

.dt-clock {
  min-height: 128px;
  display: grid;
  place-items: center;
  border-right: 1px solid #aaaab2;
  font-size: 66px;
  color: #fff;
}

.dt-selected-info {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.dt-selected-line {
  color: #f5f5f7;
  font-size: 20px;
  border-bottom: 1px solid #aaaab2;
  padding-bottom: 8px;
}

.dt-selected-line strong {
  color: #9d9da6;
  font-weight: 700;
}

.dt-field-title {
  margin: 18px 0 10px;
  color: #efeff1;
  font-size: 20px;
}

.dt-counter {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 18px;
}

.dt-counter button {
  width: 58px;
  min-height: 48px;
  border: 0 !important;
  background: #ffef00 !important;
  color: #111 !important;
  font-size: 29px !important;
  font-weight: 800;
  box-shadow: none !important;
}

.dt-counter-value {
  min-width: 130px;
  display: grid;
  place-items: center;
  background: #17171d;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-top: 2px solid #ffef00;
  border-bottom: 2px solid #ffef00;
}

.dt-payment {
  margin-top: 20px;
  padding: 18px 0;
  border-top: 1px solid #a6a6ad;
  border-bottom: 1px solid #a6a6ad;
}

.dt-payment-title {
  color: #f1f1f3;
  font-size: 18px;
  margin-bottom: 13px;
}

.dt-payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 18px;
}

.dt-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff000;
  box-sizing: border-box;
}

.dt-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 17px;
  color: #f3f3f4;
  font-size: 24px;
  font-weight: 700;
}

.dt-total-price {
  color: #ffef00;
  font-size: 31px;
}

.dt-next {
  border: 0 !important;
  border-radius: 7px !important;
  background: #ffef00 !important;
  color: #111 !important;
  min-width: 145px;
  min-height: 52px;
  padding: 0 25px;
  font-size: 19px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.dt-step2 {
  display: none;
}

.dt-step2.active {
  display: block;
}

.dt-step1.hidden {
  display: none;
}

.dt-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.dt-form label {
  display: grid;
  gap: 7px;
  color: #e8e8eb;
  font-size: 15px;
}

.dt-form input,
.dt-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #303039 !important;
  color: #fff !important;
  border: 1px solid #555560 !important;
  border-radius: 10px;
  padding: 14px 15px;
  font-size: 16px;
}

.dt-form textarea {
  min-height: 90px;
  resize: vertical;
}

.dt-submit {
  width: 100%;
  min-height: 54px;
  border: 0 !important;
  border-radius: 9px !important;
  background: #ffef00 !important;
  color: #101010 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  cursor: pointer;
}

.dt-back {
  border: 1px solid #555560 !important;
  background: transparent !important;
  color: #fff !important;
  min-height: 46px;
  border-radius: 9px !important;
  width: 100%;
}

.dt-message {
  min-height: 22px;
  margin-top: 10px;
  color: #d8d8dc;
  font-size: 14px;
}

body.dt-modal-open {
  overflow: hidden;
}

@media (max-width: 900px) {
  .dt-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dt-selected {
    grid-template-columns: 100px 1fr;
  }
}

@media (max-width: 600px) {
  .dt-booking {
    padding: 38px 18px 75px !important;
  }

  .dt-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .dt-slot {
    min-height: 64px;
    font-size: 17px !important;
  }

  .dt-day-title {
    font-size: 28px;
    margin-bottom: 18px;
  }

  .dt-modal-box {
    padding: 18px;
    border-radius: 17px;
  }

  .dt-selected {
    grid-template-columns: 82px 1fr;
    border-radius: 28px;
  }

  .dt-clock {
    min-height: 104px;
    font-size: 48px;
  }

  .dt-selected-line {
    font-size: 16px;
  }

  .dt-total-row {
    font-size: 20px;
  }

  .dt-total-price {
    font-size: 26px;
  }
}


/* ===== ЦЕНЫ В СТИЛЕ PANIKA ===== */

.pricesImageStyle {
  background: #111116;
}

.pricesImageStyle .questBlockGrid {
  display: block;
}

.pricesImageStyle .headingLabel {
  display: none;
}

.pricesImageContent {
  max-width: 1200px;
  margin: 0 auto;
}

.pricesImageContent h2 {
  margin: 0 0 70px;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.04em;
}

.priceInfoRow {
  display: grid;
  grid-template-columns: 235px minmax(0, 1fr);
  align-items: center;
  gap: 45px;
  margin-bottom: 58px;
}

.pricePill {
  min-height: 105px;
  padding: 18px 28px;
  border-radius: 70px;
  background: linear-gradient(
    135deg,
    #596322 0%,
    #3e4721 45%,
    #34372c 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.pricePill strong {
  color: #f4f4f4;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}

.priceInfoRow p {
  margin: 0;
  max-width: 900px;
  color: #eeeeef;
  font-size: clamp(25px, 3vw, 43px);
  line-height: 1.35;
  font-weight: 300;
}

@media (max-width: 700px) {
  .pricesImageContent h2 {
    margin-bottom: 50px;
    font-size: 54px;
  }

  .priceInfoRow {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 52px;
  }

  .pricePill {
    width: max-content;
    min-width: 190px;
    min-height: 88px;
    padding: 16px 30px;
  }

  .pricePill strong {
    font-size: 32px;
  }

  .priceInfoRow p {
    font-size: 27px;
    line-height: 1.4;
  }
}


/* =========================================================
   МОБИЛЬНАЯ ВЕРСИЯ СТРАНИЦЫ КВЕСТА — УМЕНЬШАЕМ МАСШТАБ
   ========================================================= */

@media (max-width: 700px) {

  body {
    font-size: 14px !important;
  }

  .questHero {
    min-height: auto !important;
  }

  .questHeroInfo {
    padding: 28px 18px 34px !important;
  }

  .questHero h1 {
    font-size: 42px !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
  }

  .questType {
    margin-top: 18px !important;
    font-size: 10px !important;
  }

  .tagline {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .mainStats {
    gap: 20px !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
  }

  .mainStats strong {
    font-size: 18px !important;
  }

  .mainStats span {
    font-size: 9px !important;
  }

  .ratingLabel {
    font-size: 10px !important;
  }

  .heroBook {
    min-height: 48px !important;
    padding: 0 20px !important;
    font-size: 11px !important;
  }

  .heroPoster {
    min-height: 330px !important;
  }

  .questMenu {
    top: 60px !important;
  }

  .questMenu a {
    padding: 15px 16px !important;
    font-size: 9px !important;
  }

  .questBlock {
    padding: 42px 18px !important;
  }

  .questBlockGrid {
    gap: 20px !important;
  }

  .headingLabel {
    font-size: 9px !important;
  }

  .longText {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .facts {
    grid-template-columns: 1fr 1fr !important;
  }

  .fact {
    padding: 16px !important;
  }

  .fact strong {
    font-size: 15px !important;
  }

  .fact span {
    font-size: 10px !important;
  }

  .featureBox {
    min-height: 110px !important;
    padding: 18px !important;
  }

  .featureBox strong,
  .featureBox p {
    font-size: 13px !important;
  }

  .priceInfoRow {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-bottom: 35px !important;
  }

  .pricesImageContent h2 {
    font-size: 42px !important;
    margin-bottom: 35px !important;
  }

  .pricePill {
    min-width: 165px !important;
    width: max-content !important;
    min-height: 70px !important;
    padding: 13px 25px !important;
  }

  .pricePill strong {
    font-size: 27px !important;
  }

  .priceInfoRow p {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }

  .dt-booking {
    padding: 35px 16px 60px !important;
  }

  .dt-booking-title {
    font-size: 38px !important;
  }

  .dt-booking-subtitle {
    font-size: 14px !important;
  }

  .dt-day {
    padding: 27px 0 !important;
  }

  .dt-day-title {
    font-size: 25px !important;
  }

  .dt-slot {
    min-height: 58px !important;
    font-size: 16px !important;
  }

  .gallery {
    gap: 6px !important;
  }

  .galleryItem {
    min-height: 150px !important;
  }

  .siteFooter,
  .footer {
    padding: 35px 18px !important;
  }
}


/* =========================================================
   ФИНАЛЬНО УМЕНЬШАЕМ ЦЕНЫ И БРОНИРОВАНИЕ НА ТЕЛЕФОНЕ
   ========================================================= */

@media (max-width: 700px) {

  /* ---------- ЦЕНЫ ---------- */

  .pricesImageStyle {
    padding: 32px 16px !important;
  }

  .pricesImageContent h2 {
    font-size: 34px !important;
    margin: 0 0 28px !important;
  }

  .priceInfoRow {
    display: grid !important;
    grid-template-columns: 135px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
  }

  .pricePill {
    width: 135px !important;
    min-width: 135px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 14px !important;
    border-radius: 40px !important;
  }

  .pricePill strong {
    font-size: 21px !important;
  }

  .priceInfoRow p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  /* ---------- БРОНИРОВАНИЕ ---------- */

  .dt-booking {
    padding: 28px 16px 45px !important;
  }

  .dt-booking-head {
    padding-bottom: 20px !important;
    margin-bottom: 14px !important;
  }

  .dt-booking-title {
    font-size: 31px !important;
    line-height: 1.05 !important;
  }

  .dt-booking-subtitle {
    margin-top: 8px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .dt-price-strip {
    gap: 7px !important;
    margin-top: 17px !important;
    padding-bottom: 5px !important;
  }

  .dt-price-pill {
    min-width: 92px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .dt-day {
    padding: 22px 0 24px !important;
  }

  .dt-day-title {
    font-size: 21px !important;
    margin-bottom: 14px !important;
  }

  .dt-slots {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .dt-slot {
    min-height: 48px !important;
    height: 48px !important;
    font-size: 14px !important;
    border-radius: 6px !important;
  }

  /* ---------- ОКНО БРОНИРОВАНИЯ ---------- */

  .dt-modal {
    padding: 10px !important;
  }

  .dt-modal-box {
    width: 100% !important;
    max-height: 94vh !important;
    padding: 16px !important;
    border-radius: 15px !important;
  }

  .dt-modal-title {
    font-size: 17px !important;
  }

  .dt-modal-close {
    width: 34px !important;
    height: 34px !important;
    font-size: 30px !important;
  }

  .dt-selected {
    grid-template-columns: 68px 1fr !important;
    margin: 14px 0 !important;
    border-radius: 20px !important;
  }

  .dt-clock {
    min-height: 78px !important;
    font-size: 37px !important;
  }

  .dt-selected-info {
    padding: 11px 13px !important;
    gap: 7px !important;
  }

  .dt-selected-line {
    font-size: 13px !important;
    padding-bottom: 5px !important;
  }

  .dt-field-title {
    margin: 13px 0 7px !important;
    font-size: 15px !important;
  }

  .dt-counter {
    margin-bottom: 12px !important;
  }

  .dt-counter button {
    width: 47px !important;
    min-height: 42px !important;
    font-size: 22px !important;
  }

  .dt-counter-value {
    min-width: 90px !important;
    font-size: 18px !important;
  }

  .dt-payment {
    margin-top: 12px !important;
    padding: 13px 0 !important;
  }

  .dt-payment-title {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .dt-payment-option {
    font-size: 14px !important;
  }

  .dt-radio {
    width: 18px !important;
    height: 18px !important;
  }

  .dt-total-row {
    padding-top: 13px !important;
    font-size: 17px !important;
    flex-wrap: wrap !important;
  }

  .dt-total-price {
    font-size: 22px !important;
  }

  .dt-next {
    min-width: 110px !important;
    min-height: 43px !important;
    padding: 0 16px !important;
    font-size: 15px !important;
  }

  .dt-form {
    gap: 10px !important;
    margin-top: 15px !important;
  }

  .dt-form label {
    font-size: 13px !important;
    gap: 5px !important;
  }

  .dt-form input,
  .dt-form textarea {
    padding: 10px 11px !important;
    font-size: 14px !important;
    border-radius: 7px !important;
  }

  .dt-form textarea {
    min-height: 70px !important;
  }

  .dt-submit,
  .dt-back {
    min-height: 44px !important;
    font-size: 15px !important;
  }
}


@media (max-width: 700px) {

  /* ЦЕНЫ — ещё компактнее */
  .pricesImageStyle {
    padding: 26px 14px !important;
  }

  .pricesImageContent h2 {
    font-size: 30px !important;
    margin-bottom: 24px !important;
  }

  .priceInfoRow {
    grid-template-columns: 115px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 22px !important;
  }

  .pricePill {
    width: 115px !important;
    min-width: 115px !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 6px 10px !important;
    border-radius: 30px !important;
  }

  .pricePill strong {
    font-size: 18px !important;
  }

  .priceInfoRow p {
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  /* БРОНИРОВАНИЕ */
  .dt-booking {
    padding: 23px 13px 38px !important;
  }

  .dt-booking-title {
    font-size: 28px !important;
  }

  .dt-booking-subtitle {
    font-size: 11px !important;
  }

  .dt-price-strip {
    gap: 5px !important;
    margin-top: 13px !important;
  }

  .dt-price-pill {
    min-width: 82px !important;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }

  .dt-day {
    padding: 18px 0 20px !important;
  }

  .dt-day-title {
    font-size: 19px !important;
    margin-bottom: 11px !important;
  }

  .dt-slots {
    gap: 5px !important;
  }

  .dt-slot {
    min-height: 43px !important;
    height: 43px !important;
    font-size: 13px !important;
    border-radius: 5px !important;
  }

  /* МОДАЛЬНОЕ ОКНО */
  .dt-modal {
    padding: 7px !important;
  }

  .dt-modal-box {
    padding: 13px !important;
    border-radius: 13px !important;
  }

  .dt-modal-title {
    font-size: 15px !important;
  }

  .dt-selected {
    grid-template-columns: 58px 1fr !important;
    margin: 11px 0 !important;
    border-radius: 17px !important;
  }

  .dt-clock {
    min-height: 68px !important;
    font-size: 32px !important;
  }

  .dt-selected-info {
    padding: 9px 11px !important;
  }

  .dt-selected-line {
    font-size: 12px !important;
  }

  .dt-field-title {
    font-size: 14px !important;
    margin: 10px 0 6px !important;
  }

  .dt-counter button {
    width: 42px !important;
    min-height: 38px !important;
    font-size: 20px !important;
  }

  .dt-counter-value {
    min-width: 80px !important;
    font-size: 16px !important;
  }

  .dt-payment {
    margin-top: 9px !important;
    padding: 10px 0 !important;
  }

  .dt-payment-title,
  .dt-payment-option {
    font-size: 13px !important;
  }

  .dt-total-row {
    font-size: 15px !important;
  }

  .dt-total-price {
    font-size: 20px !important;
  }

  .dt-next {
    min-width: 95px !important;
    min-height: 39px !important;
    font-size: 14px !important;
  }

  .dt-form input,
  .dt-form textarea {
    padding: 9px 10px !important;
    font-size: 13px !important;
  }

  .dt-submit,
  .dt-back {
    min-height: 41px !important;
    font-size: 14px !important;
  }
}


.price-card {
  padding: 8px 12px !important;
  min-width: 110px !important;
  border-radius: 10px !important;
}

.price-card .price {
  font-size: 22px !important;
  line-height: 1 !important;
}

.price-card .label {
  font-size: 11px !important;
}



/* ===== КАРТОЧКА КВЕСТА — НОВЫЙ ДИЗАЙН ===== */

.catalogCard {
  position: relative !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #050505 !important;
  box-shadow: 0 15px 45px rgba(0,0,0,.45);
}

.catalogCard:hover {
  transform: translateY(-4px) !important;
  border: 0 !important;
}

.cardImage {
  position: relative !important;
  width: 100% !important;
  height: 460px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background-size: cover !important;
  background-position: center !important;
}

.cardImage::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.08) 38%,
      rgba(0,0,0,.28) 58%,
      rgba(0,0,0,.92) 100%
    ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.imageDark {
  opacity: .02 !important;
}

.cardNew {
  display: none !important;
}

.cardAge {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 6 !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.94) !important;
  border: 0 !important;
  color: #111 !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,.28);
}

.cardTitleOverlay {
  position: absolute !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 78px !important;
  z-index: 7 !important;
  color: #ffd900 !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  text-transform: uppercase !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.75);
}

.cardInfo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr auto !important;
  align-items: end !important;
  padding: 20px 24px 22px !important;
  background: transparent !important;
  pointer-events: none !important;
}

.cardInfo h2 {
  display: none !important;
}

.cardMeta {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
}

.metaItem {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.metaIcon {
  color: #fff !important;
  font-size: 23px !important;
  width: 24px !important;
  text-align: center !important;
}

.cardAddress {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  align-self: end !important;
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-align: right !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
}

.cardAddress span {
  color: #fff !important;
}

@media (max-width: 700px) {
  .cardImage {
    height: 390px !important;
  }

  .cardTitleOverlay {
    left: 18px !important;
    bottom: 88px !important;
    font-size: 31px !important;
  }

  .cardInfo {
    padding: 18px !important;
  }

  .metaItem {
    font-size: 14px !important;
  }

  .cardAddress {
    font-size: 13px !important;
  }
}

/* ===== КОНЕЦ НОВОГО ДИЗАЙНА ===== */


.cardAge {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  top: 14px !important;
  left: 14px !important;
  font-size: 14px !important;
}


/* ===== СТИЛЬНАЯ КАРТОЧКА КВЕСТА ===== */

.catalogCard {
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
}

.catalogCard:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 26px 65px rgba(0,0,0,.65),
    0 0 35px rgba(90,0,0,.12) !important;
}

.cardImage {
  height: 470px !important;
  border-radius: 20px !important;
  background-size: cover !important;
  background-position: center !important;
}

.cardImage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,.05),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0,0,0,.18) 58%,
      rgba(0,0,0,.70) 82%,
      rgba(0,0,0,.94) 100%
    );
}

.cardImage::after {
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.04) 0%,
      rgba(0,0,0,.02) 38%,
      rgba(0,0,0,.22) 58%,
      rgba(0,0,0,.88) 100%
    ) !important;
}

.catalogCard:hover .cardImage {
  transform: scale(1.015);
}

.cardTitleOverlay {
  left: 24px !important;
  bottom: 88px !important;
  font-size: clamp(32px, 4vw, 50px) !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  color: #ffd83d !important;
  text-shadow:
    0 2px 5px rgba(0,0,0,.75),
    0 8px 25px rgba(0,0,0,.65) !important;
}

.cardAge {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  top: 16px !important;
  left: 16px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow:
    0 6px 20px rgba(0,0,0,.35),
    0 0 0 4px rgba(255,255,255,.10) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.cardInfo {
  padding: 20px 24px 24px !important;
}

.metaItem {
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.metaIcon {
  opacity: .9;
}

.cardAddress {
  color: rgba(255,255,255,.90) !important;
  font-size: 14px !important;
}


/* ===== ЛОГОТИП ДОМА ТЬМЫ СВЕРХУ ===== */

.topLogo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 20px 10px;
  background: #050505;
}

.topLogo img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  box-shadow: 0 8px 25px rgba(0,0,0,.45);
}

@media (max-width: 600px) {
  .topLogo {
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .topLogo img {
    width: 50px;
    height: 50px;
  }
}


/* ===== ИСПРАВЛЕНИЕ МОБИЛЬНОЙ КАРТОЧКИ ===== */

@media (max-width: 600px) {

  .cardTitleOverlay {
    bottom: 125px !important;
    left: 22px !important;
    font-size: 34px !important;
    line-height: 1 !important;
  }

  .cardInfo {
    padding: 18px 22px 22px !important;
  }

  .cardInfo h2 {
    margin-bottom: 12px !important;
  }

  .cardMeta {
    gap: 14px !important;
    margin-bottom: 12px !important;
  }

}


@media (max-width: 600px) {

  .cardImage {
    height: 390px !important;
  }

}


/* ===== ИСПРАВЛЕНИЕ КАРТОЧКИ НА ПК ===== */

@media (min-width: 601px) {

  .cardImage {
    height: 420px !important;
  }

  .cardTitleOverlay {
    bottom: 125px !important;
    left: 24px !important;
    line-height: 1 !important;
  }

  .cardInfo {
    padding: 20px 24px 22px !important;
  }

  .cardMeta {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

}


/* ===== ЦВЕТОВЫЕ ТАРИФЫ ===== */

#price[data-price-tier="4000"],
#bookingPrice[data-price-tier="4000"] {
  color: #ff3b30 !important;
}

#price[data-price-tier="4200"],
#bookingPrice[data-price-tier="4200"] {
  color: #ffb020 !important;
}

#price[data-price-tier="4600"],
#bookingPrice[data-price-tier="4600"] {
  color: #b46cff !important;
}

#price[data-price-tier="4800"],
#bookingPrice[data-price-tier="4800"] {
  color: #4da3ff !important;
}


/* ===== ЦВЕТА ЦЕНОВЫХ ТАРИФОВ ===== */

.pricesImageContent .priceInfoRow:nth-child(1) .pricePill {
  border-color: #ff3b30 !important;
  background: rgba(255, 59, 48, .10) !important;
  color: #ff3b30 !important;
  box-shadow: 0 0 24px rgba(255, 59, 48, .08);
}

.pricesImageContent .priceInfoRow:nth-child(2) .pricePill {
  border-color: #ffad1f !important;
  background: rgba(255, 173, 31, .10) !important;
  color: #ffad1f !important;
  box-shadow: 0 0 24px rgba(255, 173, 31, .08);
}

.pricesImageContent .priceInfoRow:nth-child(3) .pricePill {
  border-color: #a66cff !important;
  background: rgba(166, 108, 255, .10) !important;
  color: #a66cff !important;
  box-shadow: 0 0 24px rgba(166, 108, 255, .08);
}

.pricesImageContent .pricePill strong {
  color: inherit !important;
}


/* ===== ЦВЕТА ВРЕМЕННЫХ СЛОТОВ ===== */

/* 4 000 ₽ */
.slot[data-time="10:00"]:not(.busy),
.slot[data-time="11:30"]:not(.busy),
.slot[data-time="13:00"]:not(.busy),
.slot[data-time="14:30"]:not(.busy) {
  background: rgba(255, 59, 48, .10) !important;
  border-color: rgba(255, 59, 48, .55) !important;
  color: #ff5a52 !important;
}

.slot[data-time="10:00"]:not(.busy):hover,
.slot[data-time="11:30"]:not(.busy):hover,
.slot[data-time="13:00"]:not(.busy):hover,
.slot[data-time="14:30"]:not(.busy):hover,
.slot[data-time="10:00"].active,
.slot[data-time="11:30"].active,
.slot[data-time="13:00"].active,
.slot[data-time="14:30"].active {
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  color: #fff !important;
}

/* 4 200 ₽ */
.slot[data-time="16:00"]:not(.busy),
.slot[data-time="17:30"]:not(.busy),
.slot[data-time="19:00"]:not(.busy),
.slot[data-time="20:30"]:not(.busy) {
  background: rgba(255, 173, 31, .10) !important;
  border-color: rgba(255, 173, 31, .55) !important;
  color: #ffb020 !important;
}

.slot[data-time="16:00"]:not(.busy):hover,
.slot[data-time="17:30"]:not(.busy):hover,
.slot[data-time="19:00"]:not(.busy):hover,
.slot[data-time="20:30"]:not(.busy):hover,
.slot[data-time="16:00"].active,
.slot[data-time="17:30"].active,
.slot[data-time="19:00"].active,
.slot[data-time="20:30"].active {
  background: #ffad1f !important;
  border-color: #ffad1f !important;
  color: #111 !important;
}

/* 4 600 ₽ */
.slot[data-time="22:00"]:not(.busy),
.slot[data-time="23:30"]:not(.busy) {
  background: rgba(166, 108, 255, .10) !important;
  border-color: rgba(166, 108, 255, .55) !important;
  color: #b779ff !important;
}

.slot[data-time="22:00"]:not(.busy):hover,
.slot[data-time="23:30"]:not(.busy):hover,
.slot[data-time="22:00"].active,
.slot[data-time="23:30"].active {
  background: #a66cff !important;
  border-color: #a66cff !important;
  color: #fff !important;
}

/* 4 800 ₽ */
.slot[data-time="01:00"]:not(.busy),
.slot[data-time="02:30"]:not(.busy) {
  background: rgba(77, 163, 255, .10) !important;
  border-color: rgba(77, 163, 255, .55) !important;
  color: #63adff !important;
}

.slot[data-time="01:00"]:not(.busy):hover,
.slot[data-time="02:30"]:not(.busy):hover,
.slot[data-time="01:00"].active,
.slot[data-time="02:30"].active {
  background: #4da3ff !important;
  border-color: #4da3ff !important;
  color: #fff !important;
}


/* =========================================================
   БРОНИРОВАНИЕ — ЛЕГЕНДА ЦЕН И ЦВЕТА СЛОТОВ
   ========================================================= */

.bookingLegendHead {
  display: block !important;
  width: 100%;
  margin-bottom: 44px;
}

.bookingLegendWrap {
  width: 100%;
}

.bookingLegendTitle {
  margin: 0 !important;
  font-size: clamp(42px, 6vw, 68px) !important;
  line-height: 1.05 !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em;
}

.bookingLegendSubtitle {
  margin: 24px 0 38px !important;
  color: #9da8c2;
  font-size: clamp(21px, 2.8vw, 33px);
  line-height: 1.2;
}

.priceLegend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 950px;
}

.priceLegendItem {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.priceLegend4000 {
  background: #a47cf5;
  box-shadow: 0 12px 35px rgba(164, 124, 245, .15);
}

.priceLegend4200 {
  background: #43259a;
  box-shadow: 0 12px 35px rgba(67, 37, 154, .15);
}

.priceLegend4600 {
  background: #842d2b;
  box-shadow: 0 12px 35px rgba(132, 45, 43, .15);
}

.priceLegend4800 {
  background: #a9004f;
  box-shadow: 0 12px 35px rgba(169, 0, 79, .15);
}

.bookingPriceHidden {
  display: none !important;
}


/* =========================
   ЦВЕТА ВРЕМЕННЫХ СЛОТОВ
   ========================= */

/* 4 800 ₽ — 01:00 / 02:30 */
.slot[data-time="01:00"]:not(.busy),
.slot[data-time="02:30"]:not(.busy) {
  background: #a9004f !important;
  border-color: #a9004f !important;
  color: #fff !important;
}

.slot[data-time="01:00"]:not(.busy):hover,
.slot[data-time="02:30"]:not(.busy):hover,
.slot[data-time="01:00"].active,
.slot[data-time="02:30"].active {
  background: #c0005b !important;
  border-color: #c0005b !important;
  color: #fff !important;
}


/* 4 000 ₽ — 10:00 / 11:30 / 13:00 / 14:30 */
.slot[data-time="10:00"]:not(.busy),
.slot[data-time="11:30"]:not(.busy),
.slot[data-time="13:00"]:not(.busy),
.slot[data-time="14:30"]:not(.busy) {
  background: #a47cf5 !important;
  border-color: #a47cf5 !important;
  color: #fff !important;
}

.slot[data-time="10:00"]:not(.busy):hover,
.slot[data-time="11:30"]:not(.busy):hover,
.slot[data-time="13:00"]:not(.busy):hover,
.slot[data-time="14:30"]:not(.busy):hover,
.slot[data-time="10:00"].active,
.slot[data-time="11:30"].active,
.slot[data-time="13:00"].active,
.slot[data-time="14:30"].active {
  background: #b18df8 !important;
  border-color: #b18df8 !important;
  color: #fff !important;
}


/* 4 200 ₽ — 16:00 / 17:30 / 19:00 / 20:30 */
.slot[data-time="16:00"]:not(.busy),
.slot[data-time="17:30"]:not(.busy),
.slot[data-time="19:00"]:not(.busy),
.slot[data-time="20:30"]:not(.busy) {
  background: #43259a !important;
  border-color: #43259a !important;
  color: #fff !important;
}

.slot[data-time="16:00"]:not(.busy):hover,
.slot[data-time="17:30"]:not(.busy):hover,
.slot[data-time="19:00"]:not(.busy):hover,
.slot[data-time="20:30"]:not(.busy):hover,
.slot[data-time="16:00"].active,
.slot[data-time="17:30"].active,
.slot[data-time="19:00"].active,
.slot[data-time="20:30"].active {
  background: #5431b8 !important;
  border-color: #5431b8 !important;
  color: #fff !important;
}


/* 4 600 ₽ — 22:00 / 23:30 */
.slot[data-time="22:00"]:not(.busy),
.slot[data-time="23:30"]:not(.busy) {
  background: #842d2b !important;
  border-color: #842d2b !important;
  color: #fff !important;
}

.slot[data-time="22:00"]:not(.busy):hover,
.slot[data-time="23:30"]:not(.busy):hover,
.slot[data-time="22:00"].active,
.slot[data-time="23:30"].active {
  background: #9c3835 !important;
  border-color: #9c3835 !important;
  color: #fff !important;
}


/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================= */

@media (max-width: 700px) {

  .priceLegend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .priceLegendItem {
    min-height: 68px;
    font-size: 20px;
  }

  .bookingLegendSubtitle {
    margin-bottom: 24px !important;
  }

}


/* ===== ЦЕНОВЫЕ ГРУППЫ БРОНИРОВАНИЯ ===== */

/* Плашки цен сверху */
.dt-price-strip {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.dt-price-pill {
  min-width: 180px !important;
  height: 74px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #fff !important;
  border: none !important;
  box-sizing: border-box !important;
}

.dt-price-pill.dt-price-4000 {
  background: #9b73f5 !important;
  box-shadow: 0 8px 24px rgba(155, 115, 245, .20) !important;
}

.dt-price-pill.dt-price-4200 {
  background: #43249a !important;
  box-shadow: 0 8px 24px rgba(67, 36, 154, .20) !important;
}

.dt-price-pill.dt-price-4600 {
  background: #8d2f2d !important;
  box-shadow: 0 8px 24px rgba(141, 47, 45, .20) !important;
}

.dt-price-pill.dt-price-4800 {
  background: #bd0058 !important;
  box-shadow: 0 8px 24px rgba(189, 0, 88, .20) !important;
}

/* ===== СЛОТЫ ПО ЦЕНОВЫМ ГРУППАМ ===== */

/* 4 000 ₽ */
.dt-slot.available.dt-price-4000 {
  background: #9b73f5 !important;
  border-color: #9b73f5 !important;
  color: #fff !important;
}

.dt-slot.available.dt-price-4000:hover {
  background: #aa86ff !important;
  border-color: #aa86ff !important;
  color: #fff !important;
}

/* 4 200 ₽ */
.dt-slot.available.dt-price-4200 {
  background: #43249a !important;
  border-color: #43249a !important;
  color: #fff !important;
}

.dt-slot.available.dt-price-4200:hover {
  background: #5030ad !important;
  border-color: #5030ad !important;
  color: #fff !important;
}

/* 4 600 ₽ */
.dt-slot.available.dt-price-4600 {
  background: #8d2f2d !important;
  border-color: #8d2f2d !important;
  color: #fff !important;
}

.dt-slot.available.dt-price-4600:hover {
  background: #9d3735 !important;
  border-color: #9d3735 !important;
  color: #fff !important;
}

/* 4 800 ₽ */
.dt-slot.available.dt-price-4800 {
  background: #bd0058 !important;
  border-color: #bd0058 !important;
  color: #fff !important;
}

.dt-slot.available.dt-price-4800:hover {
  background: #cf0965 !important;
  border-color: #cf0965 !important;
  color: #fff !important;
}

/* Занятые слоты всегда остаются тёмными */
.dt-slot.busy {
  background: #1f1f24 !important;
  border-color: #2b2b32 !important;
  color: #777 !important;
}


/* ===== УМЕНЬШАЕМ ПЛАШКИ ЦЕН ===== */

.dt-price-pill {
  min-width: 130px !important;
  height: 48px !important;
  padding: 0 20px !important;
  font-size: 18px !important;
  border-radius: 999px !important;
}

.dt-price-strip {
  gap: 10px !important;
}


/* ===== ЭКРАН УСПЕШНОЙ БРОНИ ===== */

.dt-success-screen {
  padding: 42px 34px 34px;
  text-align: center;
}

.dt-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 175, 80, .12);
  border: 1px solid rgba(76, 175, 80, .45);
  color: #72d572;
  font-size: 34px;
  font-weight: 700;
}

.dt-success-label {
  color: #777;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.dt-success-title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.dt-success-info {
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;
  margin-bottom: 22px;
}

.dt-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #202020;
  text-align: left;
}

.dt-success-row:last-child {
  border-bottom: 0;
}

.dt-success-row span {
  color: #777;
  font-size: 13px;
}

.dt-success-row strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}

.dt-success-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  margin-bottom: 12px;
}

.dt-success-total span {
  color: #999;
  font-size: 14px;
}

.dt-success-total strong {
  color: #fff;
  font-size: 25px;
}

.dt-success-text {
  margin: 0 0 25px;
  color: #888;
  font-size: 13px;
  line-height: 1.6;
}

.dt-success-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--dt-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.dt-success-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .dt-success-screen {
    padding: 32px 20px 24px;
  }

  .dt-success-title {
    font-size: 24px;
  }

  .dt-success-row {
    padding: 13px 0;
  }
}


/* ===== ЭКРАН УСПЕШНОЙ БРОНИ ===== */

.dt-success-screen {
  padding: 42px 34px 34px;
  text-align: center;
}

.dt-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 175, 80, .12);
  border: 1px solid rgba(76, 175, 80, .45);
  color: #72d572;
  font-size: 34px;
  font-weight: 700;
}

.dt-success-label {
  color: #777;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.dt-success-title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.dt-success-info {
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;
  margin-bottom: 22px;
}

.dt-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #202020;
  text-align: left;
}

.dt-success-row:last-child {
  border-bottom: 0;
}

.dt-success-row span {
  color: #777;
  font-size: 13px;
}

.dt-success-row strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}

.dt-success-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  margin-bottom: 12px;
}

.dt-success-total span {
  color: #999;
  font-size: 14px;
}

.dt-success-total strong {
  color: #fff;
  font-size: 25px;
}

.dt-success-text {
  margin: 0 0 25px;
  color: #888;
  font-size: 13px;
  line-height: 1.6;
}

.dt-success-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--dt-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.dt-success-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .dt-success-screen {
    padding: 32px 20px 24px;
  }

  .dt-success-title {
    font-size: 24px;
  }

  .dt-success-row {
    padding: 13px 0;
  }
}


/* ===== ЭКРАН УСПЕШНОЙ БРОНИ ===== */

.dt-success-screen {
  padding: 42px 34px 34px;
  text-align: center;
}

.dt-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 175, 80, .12);
  border: 1px solid rgba(76, 175, 80, .45);
  color: #72d572;
  font-size: 34px;
  font-weight: 700;
}

.dt-success-label {
  color: #777;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.dt-success-title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.dt-success-info {
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;
  margin-bottom: 22px;
}

.dt-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #202020;
  text-align: left;
}

.dt-success-row:last-child {
  border-bottom: 0;
}

.dt-success-row span {
  color: #777;
  font-size: 13px;
}

.dt-success-row strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}

.dt-success-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  margin-bottom: 12px;
}

.dt-success-total span {
  color: #999;
  font-size: 14px;
}

.dt-success-total strong {
  color: #fff;
  font-size: 25px;
}

.dt-success-text {
  margin: 0 0 25px;
  color: #888;
  font-size: 13px;
  line-height: 1.6;
}

.dt-success-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--dt-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.dt-success-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .dt-success-screen {
    padding: 32px 20px 24px;
  }

  .dt-success-title {
    font-size: 24px;
  }

  .dt-success-row {
    padding: 13px 0;
  }
}


/* ===== ЭКРАН УСПЕШНОЙ БРОНИ ===== */

.dt-success-screen {
  padding: 42px 34px 34px;
  text-align: center;
}

.dt-success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(76, 175, 80, .12);
  border: 1px solid rgba(76, 175, 80, .45);
  color: #72d572;
  font-size: 34px;
  font-weight: 700;
}

.dt-success-label {
  color: #777;
  font-size: 11px;
  letter-spacing: .18em;
  margin-bottom: 10px;
}

.dt-success-title {
  margin: 0 0 28px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.dt-success-info {
  border-top: 1px solid #292929;
  border-bottom: 1px solid #292929;
  margin-bottom: 22px;
}

.dt-success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid #202020;
  text-align: left;
}

.dt-success-row:last-child {
  border-bottom: 0;
}

.dt-success-row span {
  color: #777;
  font-size: 13px;
}

.dt-success-row strong {
  color: #fff;
  font-size: 15px;
  text-align: right;
}

.dt-success-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  margin-bottom: 12px;
}

.dt-success-total span {
  color: #999;
  font-size: 14px;
}

.dt-success-total strong {
  color: #fff;
  font-size: 25px;
}

.dt-success-text {
  margin: 0 0 25px;
  color: #888;
  font-size: 13px;
  line-height: 1.6;
}

.dt-success-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--dt-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}

.dt-success-button:hover {
  opacity: .9;
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .dt-success-screen {
    padding: 32px 20px 24px;
  }

  .dt-success-title {
    font-size: 24px;
  }

  .dt-success-row {
    padding: 13px 0;
  }
}