/* GOV-like UI override for MiroTalk SFU (visual only) */

/* ===== Base ===== */
html, body {
  background: #f4f6fa !important;
  color: #0b1f3a !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif !important;
}

.body-wrap { background: transparent !important; }

/* Hide decorative floating stuff */
.snowflake, .snow, .snowflakes, .winter, .particles, canvas {
  display: none !important;
}

/* ===== Header (clear separation) ===== */
.site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e6e9f2 !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

.site-header-inner { padding: 14px 0 !important; }

.site-header .brand.header-brand,
.site-header .brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.header-logo-image {
  width: 36px !important;
  height: auto !important;
  filter: none !important;
}

/* Header title text (single, no duplicates) */
.brand.header-brand::after {
  content: "" !important;
  font-size: 16px;
  font-weight: 600;
  color: #0b1f3a;
  letter-spacing: -0.01em;
}

/* ===== Kill hero diagonal/triangle + hero decorations ===== */
.hero,
.hero .container,
.hero-inner {
  background: transparent !important;
  background-image: none !important;
  clip-path: none !important;
}

.hero::before,
.hero::after,
.hero .container::before,
.hero .container::after,
.hero-inner::before,
.hero-inner::after,
.body-wrap::before,
.body-wrap::after,
main::before,
main::after {
  content: none !important;
  display: none !important;
}

/* Disable hero right illustration */
.hero-figure,
.hero .hero-figure,
.hero-back-illustration,
.hero-top-illustration {
  display: none !important;
}

/* Hide original hero text */
.hero-copy,
#appTitle,
#appDescription,
.hero-title,
.hero-paragraph,
#newRoomTitle,
#newRoomDescription {
  display: none !important;
}

/* ===== CTA card ===== */
.cta-inner {
  background: #ffffff !important;
  border: 1px solid #e6e9f2 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(12, 29, 58, 0.08) !important;
  padding: 22px !important;
}

.section-title,
#joinDescription {
  color: #0b1f3a !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

/* ===== Input + buttons (same height + aligned) ===== */
.form-group-desktop {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.form-group-desktop #roomName,
.form-group-desktop #genRoomButton,
.form-group-desktop #joinRoomButton {
  height: 44px !important;
  box-sizing: border-box !important;
}

.form-input,
#roomName {
  background: #f6f8fc !important;
  border: 1px solid #d9e0ef !important;
  border-radius: 10px !important;
  color: #0b1f3a !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  outline: none !important;
  line-height: 44px !important;
}

#roomName:focus {
  border-color: #2f6fed !important;
  box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.15) !important;
}

#joinRoomButton {
  background: #2f6fed !important;
  border: 1px solid #2f6fed !important;
  color: #ffffff !important;
  min-width: 84px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 16px !important;
}

#joinRoomButton:hover {
  background: #2459c7 !important;
  border-color: #2459c7 !important;
}

#genRoomButton {
  background: #eaf0ff !important;
  border: 1px solid #cfe0ff !important;
  color: #2f6fed !important;
  width: 44px !important;
  padding: 0 !important;
  border-radius: 10px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;

  transform: none !important;
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
}

#genRoomButton:hover,
#genRoomButton:active,
#genRoomButton:focus {
  transform: none !important;
  background: #dfe9ff !important;
}

/* Remove pulse */
.pulse { animation: none !important; }

/* Last room hint */
.last-room,
#lastRoomContainer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #eef1f7 !important;
  color: #4b5b75 !important;
}

#joinLastLabel {
  color: #4b5b75 !important;
  font-weight: 600 !important;
}

#lastRoom {
  color: #2f6fed !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
#lastRoom:hover { text-decoration: underline !important; }

/* ===== Hide sponsors/footer blocks ===== */
hr,
#topSponsors,
.clients.section,
.site-footer,
footer,
section.clients,
section.features,
section.teams,
section.testimonial,
section.pricing {
  display: none !important;
}

/* ===== GOV blocks ===== */
main,
.body-wrap,
.body-wrap main {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

.gov-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding: 28px 0 10px;
  position: relative !important;
  z-index: 10 !important;
}

.gov-container {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
  display: block !important;
}

.gov-grid {
  display: grid !important;
  gap: 22px;
}

.gov-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gov-card {
  background: #ffffff;
  border: 1px solid rgba(12, 30, 50, 0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(12, 30, 50, 0.08);
  position: relative;
  display: block !important;
}

.gov-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 18px;
}

.gov-title {
  font-size: 18px;
  font-weight: 700;
  color: #0b1f33;
  margin-bottom: 8px;
}

.gov-text {
  font-size: 14px;
  line-height: 1.45;
  color: #5a6b7b;
}

.gov-h2 {
  margin: 36px 0 18px;
  font-size: 28px;
  font-weight: 800;
  color: #0b1f33;
}

.gov-step {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #1f66eb;
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .gov-grid-3 { grid-template-columns: 1fr; }
  .gov-h2 { font-size: 22px; }
}
/* ===== HARD KILL diagonal overlay from landing.css (skewY) ===== */
.hero-bg,
.hero-bg::before,
.hero-bg::after,
.hero-bg-inner,
.hero-bg-inner::before,
.hero-bg-inner::after,
.hero-bg-inner .hero-bg-svg,
.hero-bg-inner .hero-bg-svg::before,
.hero-bg-inner .hero-bg-svg::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  transform: none !important;
}
/* ===== Hide everything after CTA except our GOV blocks ===== */
section.cta + section:not(.gov-section),
section.cta ~ section:not(.gov-section) {
  display: none !important;
}

/* Keep GOV blocks visible */
section.gov-section {
  display: block !important;
}
/* =========================================================
   FINAL OVERRIDES: remove diagonal overlay + hide extra blocks
   ========================================================= */

/* 1) KILL the diagonal overlay (usually pseudo-elements + skewY) */
.hero::before,
.hero::after,
.body-wrap::before,
.body-wrap::after,
main::before,
main::after,
.hero .container::before,
.hero .container::after,
.hero-inner::before,
.hero-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  transform: none !important;
}

/* Sometimes diagonal is applied directly via transforms/backgrounds */
.hero,
.hero-inner,
.hero .container {
  background-image: none !important;
  transform: none !important;
  clip-path: none !important;
}

/* Ensure our important blocks are above everything */
section.cta.section,
section.gov-section {
  position: relative !important;
  z-index: 10 !important;
}

/* 2) Hide everything below our GOV blocks (and sponsors/team/etc) */
#topSponsors,
section.clients,
section.features,
section.teams,
section.testimonial,
section.pricing,
.site-footer,
footer,
hr {
  display: none !important;
}

/* If there are any leftover generic sections after CTA, hide them,
   but keep GOV section visible */
section.cta + section:not(.gov-section),
section.cta ~ section:not(.gov-section) {
  display: none !important;
}
section.gov-section {
  display: block !important;
}
/* ===== KILL THE TRIANGLE THAT BLOCKS CLICKS (landing.css .site-header::before) ===== */
@media (min-width: 641px) {
  .site-header::before,
  .site-header::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    transform: none !important;
    pointer-events: none !important;
  }
}

/* extra safety: if something still draws over the page */
.site-header::before,
.site-header::after {
  pointer-events: none !important;
}

/* ===== FIX: vertically center input + buttons in CTA ===== */

/* main CTA card layout */
.cta-inner {
  display: flex !important;
  align-items: center !important;   /* ВОТ ЭТО ГЛАВНОЕ */
  justify-content: space-between !important;
  gap: 24px !important;
}

/* left text block */
.cta-inner > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* right form block */
.form-group-desktop {
  align-items: center !important;
}
/* === FIX: CTA CENTER (input + buttons exactly centered) === */
/* FIX: CTA CENTER */

section.cta.section .cta-inner.section-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

/* левый блок (заголовок) не должен тянуть высоту из-за марджинов */
section.cta.section .cta-inner.section-inner > h3#joinDescription {
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* правый блок (контейнер с формой) центрируем внутри flex */
section.cta.section .cta-inner.section-inner > div {
  margin: 0 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* убираем верхний отступ у обёртки формы, он часто "поднимает" кнопки */
section.cta.section .cta-inner.section-inner .mb-24 {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* сама строка input+buttons */
section.cta.section .cta-inner.section-inner .form-group-desktop {
  margin: 0 !important;
  align-items: center !important;
}