/* Dark corporate luxury theme override (design-only). */
:root{
  --bg: #000000;
  --surface: rgba(0,0,0,.86);
  --surface-2: rgba(0,0,0,.80);
  --text: #e9d7a6;          /* gold-y main text */
  --muted: rgba(233,215,166,.72);
  --border: rgba(212,177,106,.22);
  --shadow: 0 14px 40px rgba(0,0,0,.55);
  --shadow-hover: 0 18px 56px rgba(0,0,0,.65);
  --radius: 18px;
  --accent: #d4b16a;        /* muted gold */
}

/* Make all surfaces follow the new palette */
body{
  background: var(--bg);
  color: var(--text);
}

/* Links */
a{color: var(--text);}
a:hover{opacity:.9}

/* HEADER: keep layout, change visuals only */
.topbar{
  background: transparent !important;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(212,177,106,.18) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.40) !important;
  position: sticky;
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.56) 55%, rgba(0,0,0,.88) 100%);
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  z-index:-1;
}

/* TP mark: white tile + black letters, same shape */
.dot{
  background:#fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
}
.dot::before{
  color:#000 !important;
}

/* Brand line (kept 1:1 content via ::after) */
.brandText::after{
  color: var(--text) !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
  font-size: 14px;
}

/* Contact/meta row */
.headerUnderBrand .meta,
.headerUnderBrand .meta *{
  color: var(--text) !important;
}
.headerUnderBrand .meta a{
  text-decoration: none;
  border-bottom: 1px solid rgba(212,177,106,.28);
}
.headerUnderBrand .meta a:hover{
  border-bottom-color: rgba(212,177,106,.55);
}

/* Russian logo with puddle: add light backing only behind it */
.brandSloganWrap{
  background: rgba(255,255,255,.86);
  padding: 6px 8px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
}
.brandSloganLogo{
  display:block;
  height: 30px;
  width: auto;
}

/* Menu */
.nav a{
  color: var(--text) !important;
}
.nav a:hover{
  background: rgba(212,177,106,.10) !important;
  border-color: rgba(212,177,106,.25) !important;
}

/* Language button */
.langToggle{
  background: rgba(212,177,106,.16) !important;
  border: 1px solid rgba(212,177,106,.28) !important;
  color: var(--text) !important;
}

/* HOME banner: replace image + fade into dark background */
.home-banner{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.home-banner img{
  display:block;
  object-fit: cover;
  width:100%;
  height: auto;
  transform: translateZ(0);
}
.home-banner::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 110px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(6,16,33,.78) 55%, rgba(6,16,33,1) 100%);
}

/* Cards / panels (keeps structure, only colors) */
.card, .panel, .heroCard, .tableWrap, .tabs, .filterBar, .sectionTitle, .box{
  background: rgba(14,14,14,.86) !important;
  border: 1px solid rgba(212,177,106,.18) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45) !important;
}
.sectionTitle h2, h1, h2, h3{
  color: var(--accent);
}
small, .muted{
  color: var(--muted) !important;
}

/* Tables */
table{
  color: var(--text);
}
th{
  background: rgba(212,177,106,.10) !important;
  color: var(--accent) !important;
}
td{
  border-color: rgba(212,177,106,.16) !important;
}

/* Inputs / buttons */
input, select, textarea{
  background: rgba(10,10,10,.80) !important;
  border: 1px solid rgba(212,177,106,.22) !important;
  color: var(--text) !important;
}
button, .btn{
  background: rgba(212,177,106,.14) !important;
  border: 1px solid rgba(212,177,106,.28) !important;
  color: var(--text) !important;
}
button:hover, .btn:hover{
  background: rgba(212,177,106,.20) !important;
}

/* Responsive header tightening (no text change) */
@media (max-width: 980px){
  .brandText::after{font-size: 13px;}
  .headerUnderBrand .meta{font-size: 12.5px;}
  .brandSloganLogo{height: 28px;}
}
@media (max-width: 640px){
  .brandText::after{
    font-size: 12px;
    white-space: normal !important;
    max-width: 92vw;
  }
  .headerUnderBrand .meta{
    font-size: 12px;
    gap: 8px;
  }
  .brandSloganLogo{height: 26px;}
  .brandSloganWrap{padding: 5px 7px;}
}


/* Prevent horizontal scrolling on narrow desktop windows */
html, body{overflow-x:hidden;}

/* Better header behavior on narrow (not-fullscreen) desktops */
@media (max-width: 1200px){
  .topbar .inner.headerWide .nav{min-width:0 !important; flex-basis:100% !important;}
  .topbar .headerUnderBrand{flex-wrap:wrap !important;}
  .topbar .headerUnderBrand .meta{
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 6px;
  }
  .topbar .nav a{font-size: 13px;}
}


/* HOME: make hero image continuous behind header (no separate header photo). */
body.is-home .topbar{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

body.is-home .home-banner{
  margin: 0 !important;
  height: clamp(440px, 62vh, 760px);
}

body.is-home main.container{
  padding: 0 !important;
  max-width: none !important;
}

body.is-home .hero{
  padding-left: 20px;
  padding-right: 20px;
}

body.is-home .grid{
  padding-left: 20px;
  padding-right: 20px;
}


body.is-home .home-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Soft transition from image into black background */
body.is-home .home-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.35) 0%,
    rgba(0,0,0,.10) 45%,
    rgba(0,0,0,.55) 72%,
    rgba(0,0,0,1) 100%);
  pointer-events:none;
}

/* Make first section sit closer to the fade line */
body.is-home .hero{
  margin-top: 0;
  padding-top: 22px;
}

body.is-home .heroCard{
  margin-top: 0;
}



/* === v4 fixes: remove hero band & improve narrow header === */

/* On home: header sits on hero image; do NOT paint its own background strip */
body.is-home .topbar{
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.is-home .topbar::before{display:none !important;}

/* Make hero overlay handle readability smoothly (no hard band) */
body.is-home .home-banner::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.30) 18%,
    rgba(0,0,0,.14) 40%,
    rgba(0,0,0,.20) 62%,
    rgba(0,0,0,.68) 82%,
    rgba(0,0,0,1) 100%) !important;
}

/* Narrow desktop + phone header: keep all text, just layout */
@media (max-width: 820px){
  .topbar .inner.headerWideV2{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .topbar .headerLeft{
    width: 100% !important;
  }

  .topbar .nav{
    width: 100% !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding-bottom: 6px;
  }
  .topbar .nav::-webkit-scrollbar{height: 6px;}
  .topbar .nav::-webkit-scrollbar-thumb{background: rgba(212,177,106,.20); border-radius: 10px;}
  .topbar .nav a{font-size: 13px; padding: 8px 10px;}
  .topbar .headerUnderBrand{width: 100% !important;}
  .topbar .headerUnderBrand .meta{justify-content:flex-start !important;}
  .topbar .brand{
    gap: 10px !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }
  .topbar .headerUnderBrand{
    width: 100% !important;
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }
  .topbar .headerUnderBrand .meta{
    width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  .topbar .nav{
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
  }
  .topbar .nav a{
    font-size: 12.5px !important;
    padding: 8px 10px !important;
  }
  .brandSloganLogo{height: 26px !important;}
}

/* Ultra small phones */
@media (max-width: 420px){
  .brandText::after{font-size: 11.5px !important;}
  .headerUnderBrand .meta{font-size: 11.5px !important;}
  .topbar .nav a{font-size: 12px !important;}
}

/* === v6 fixes (2026-02-20): home hero behind header + darker, and inner pages banner sizing === */

/* HOME: force header to overlay hero (styles.css has position:relative !important) */
body.is-home .topbar{ position:absolute !important; top:0; left:0; right:0; z-index:60; }

/* HOME: hero should start from top and sit behind header */
body.is-home .home-banner{ margin:0 !important; border-radius:0 !important; border:0 !important; box-shadow:none !important;
  width:100vw; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important;
  height: clamp(420px, 62vh, 760px) !important;
}
body.is-home .home-banner img{ width:100% !important; height:100% !important; object-fit:cover !important; display:block; filter: brightness(.55) contrast(1.08) saturate(1.05); }

/* Darken overlay like chilikov style */
body.is-home .home-banner::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.52) 22%,
    rgba(0,0,0,.28) 46%,
    rgba(0,0,0,.38) 64%,
    rgba(0,0,0,.78) 82%,
    rgba(0,0,0,1) 100%) !important;
}

/* Make the first section clearly separated from the hero image */
body.is-home .hero{ padding-top: 34px !important; }

/* Inner pages: keep banner image like a normal hero card (not full-bleed and not gigantic) */
body:not(.is-home) .home-banner{
  max-width: var(--max);
  margin: 26px auto 18px;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(212,177,106,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  width: auto;
}
body:not(.is-home) .home-banner img{
  width:100%;
  height: clamp(280px, 42vh, 520px);
  object-fit: cover;
  display:block;
  filter: brightness(.85) contrast(1.05) saturate(1.03);
}



/* === v7 final tweaks (design-only) === */
/* 1) Home hero image: keep navigation over dark sky (not bright city lights) */
body.is-home .home-banner img{
  object-position: center 12% !important; /* show more sky at the top */
}
/* Stronger dark overlay at the very top so nav sits on dark background */
body.is-home .home-banner::after{
  background: linear-gradient(180deg,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.84) 18%,
    rgba(0,0,0,.48) 52%,
    rgba(0,0,0,.86) 100%) !important;
}

/* 2) "Также рекомендуем" cards: white caption area => black text for readability */
.recommendCard .recommendText,
.recommendCard .recommendName{
  color: #111 !important;
}


/* ============================
   Premium polish (no text changes)
   ============================ */

:root{
  --gold-2: rgba(212,177,106,.22);
  --panel: rgba(16,16,16,.92);
}

html, body{
  background:#000 !important;
}

body{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: 0.01em;
}

h1, h2, h3{
  letter-spacing: 0.015em;
}

/* Header: slimmer, cleaner, always readable */
.topbar{
  background: transparent !important;
}

.topbar::before{
  /* stronger dark veil behind the header/nav so links never sit on bright lights */
  background: linear-gradient(180deg,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.78) 55%,
    rgba(0,0,0,.35) 100%);
}

.topbarInner{
  padding: 10px 16px !important;
  gap: 10px !important;
}

.brandLine{
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.metaLine{
  font-size: 13px !important;
  line-height: 1.25 !important;
}

.navRow{
  padding-top: 6px !important;
  gap: 10px !important;
}

.navRow a{
  font-size: 14px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(212,177,106,.22);
  backdrop-filter: blur(6px);
}

.navRow a:hover{
  background: rgba(0,0,0,.32);
  border-color: rgba(212,177,106,.35);
}

/* Hero: crop to keep sky behind header, remove the hard band and soften transition */
.home-banner{
  margin-top: 0 !important;
}

.home-banner img{
  height: 560px !important;
  object-fit: cover !important;
  object-position: center 18% !important; /* lift lights down */
  display:block;
}

/* Extra darkening like chilikovguide */
.home-banner::after{
  opacity: .55 !important;
}

/* Separation between hero and first title block */
.sectionTitle{
  margin-top: 16px !important;
}

/* Cards: more premium depth + softer hover */
.card{
  border: 1px solid rgba(212,177,106,.18) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,177,106,.32) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.62);
}

.card .button{
  border-radius: 12px !important;
}

.card .media img{
  transform: none !important;
}

/* Light blocks: make text readable (black) on beige/white strips */
.recommendCard,
.recommendCard *{
  color:#111 !important;
}

.recommendName{
  color:#111 !important;
}

.recommendCard .img{
  filter:none;
}

/* More comfortable vertical rhythm */
.container{
  padding-left: 18px !important;
  padding-right: 18px !important;
}

section{
  margin-top: 22px !important;
}

/* Responsive: when window is not fully expanded / on phone */
@media (max-width: 980px){
  .home-banner img{ height: 460px !important; object-position: center 20% !important; }
  .brandLine{ font-size: 14px !important; }
  .metaLine{ font-size: 12px !important; }
  .navRow a{ font-size: 13px !important; padding: 7px 10px !important; }
}

@media (max-width: 720px){
  .topbarInner{
    padding: 10px 12px !important;
  }
  .navRow{
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .home-banner img{ height: 380px !important; object-position: center 22% !important; }
}

@media (max-width: 420px){
  .home-banner img{ height: 330px !important; }
  .navRow a{ padding: 6px 9px !important; }
}