/* === Mostbet Country Guide: visual uniqueness layer === */

:root {
  --mbg-blue-top: #062f5d;
  --mbg-blue-bottom: #084f96;
  --mbg-blue-card: #073b73;
  --mbg-page-bg: #dfe8f2;
  --mbg-orange: #ff6a1a;
  --mbg-orange-dark: #e94d00;
}

/* Page background */
body {
  background: var(--mbg-page-bg) !important;
}

/* Header */
.headerTop {
  background: linear-gradient(180deg, #073e78 0%, var(--mbg-blue-top) 100%) !important;
  padding: 8px 18px !important;
}

.headerBottom {
  background: linear-gradient(180deg, var(--mbg-blue-bottom) 0%, #073f7c 100%) !important;
  padding: 12px 18px !important;
}

/* Keep betting UI, but make controls more polished */
.headerTop a,
.headerTop button,
.headerTop .settings,
.headerTop .btn,
.btn-registration,
.btn-login {
  border-radius: 999px !important;
}

/* Main layout */
.main-layout {
  background: var(--mbg-page-bg) !important;
}

/* Slider */
.main-layout .swiper,
.main-layout .swiper-slide,
.main-layout .swiper-slide img {
  border-radius: 20px !important;
}

.main-layout .swiper {
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(0, 25, 65, 0.28) !important;
}

/* Content card */
.layout__head {
  border-radius: 16px 16px 0 0 !important;
  background: linear-gradient(90deg, #eaf1f8 0%, #ffffff 100%) !important;
}

.layout__text {
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 8px 24px rgba(0, 30, 70, 0.12) !important;
}

/* CTA buttons */
.btn-registration,
.first-deposit__btn,
.comments-wrapper__submit {
  background: linear-gradient(180deg, var(--mbg-orange) 0%, var(--mbg-orange-dark) 100%) !important;
  box-shadow: 0 8px 18px rgba(255, 106, 26, 0.35) !important;
  border-radius: 999px !important;
}

/* Footer */
.footer {
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -10px 28px rgba(0, 30, 70, 0.18) !important;
}

/* Mobile polish */
@media (max-width: 760px) {
  .headerTop {
    padding: 6px 12px !important;
  }

  .headerBottom {
    padding: 10px 12px !important;
  }

  .main-layout .swiper,
  .main-layout .swiper-slide,
  .main-layout .swiper-slide img {
    border-radius: 16px !important;
  }

  .layout__head,
  .layout__text {
    border-radius: 14px !important;
  }
}