/* Overrides + bits missing from shipped CSS modules */
html {
  color-scheme: light;
}

[data-mantine-color-scheme="light"],
html:not([data-mantine-color-scheme]) {
  --mantine-color-body: #f6f7f9;
  --mantine-color-text: #081f2c;
}

/* Force Mantine typography to use local Gilroy */
:root {
  --mantine-font-family: "Gilroy", sans-serif;
  --mantine-font-family-headings: "Gilroy", sans-serif;
  --mantine-font-family-monospace: "Gilroy", monospace;
}

body {
  font-family: "Gilroy", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  /* Keep dark canvas behind rounded footer corners (matches base index css). */
  background-color: #081f2c !important;
  color: var(--mantine-color-text, #081f2c);
}

/* Hero: “Usual transfer” caption (Vt.dimmedTitle missing from CSS chunk) */
._mainImgBlock_1sxpc_32 > ._subBlockImg_1sxpc_23 > h2:not(._bold_1sxpc_190) {
  color: #6b7d88;
  font-weight: bold;
  font-size: 1.5em !important;
  margin: 0.83em 0 !important;
  display: block;
  unicode-bidi: isolate;
  text-align: center;
}

._mainImgBlock_1sxpc_32 > ._subBlockImg_1sxpc_23 h2 .bold-inline,
._mainImgBlock_1sxpc_32 > ._subBlockImg_1sxpc_23 h2 ._bold_1sxpc_190 {
  color: #e73c2b;
}

/* FAQ accordion open state (not in FAQ-BbJXb5Ak.css) */
._faqItem_w7utj_52._open_w7utj_87 ._answerWrapper_w7utj_81 {
  max-height: 520px;
}

/* FAQ: match centered layout from reference (all sizes) */
._container_w7utj_9 {
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

._titleBlock_w7utj_21 {
  width: min(100%, 700px) !important;
  align-self: center !important;
}

._title_w7utj_15 {
  margin: 0 0 8px 0 !important;
  text-align: center !important;
  position: relative;
  z-index: 2;
}

._faqList_w7utj_46 {
  width: min(100%, 700px) !important;
  margin: 0 auto !important;
}

/* Calculator (same as inline styles in SavingsCalculator chunk) */
.calc-swap-row {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 8px;
  align-items: end;
  width: 100%;
}

.calc-field-label {
  font-size: 12px;
  color: #6b7d88;
  margin-bottom: 6px;
  font-weight: 600;
}

.calc-field-input {
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid rgba(8, 31, 44, 0.2);
  border-radius: 10px;
  background: #fff;
  color: #081f2c;
  font-size: 14px;
  outline: none;
}

.calc-field-input:read-only {
  background: #f8fafc;
}

.calc-swap-btn {
  height: 42px;
  width: 42px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  line-height: 1;
  color: #000;
}

.calc-rate {
  font-size: 12px;
  color: #6b7d88;
  font-weight: 600;
}

/* Header: mimic reference site-logo container */
.site-logo {
  display: flex;
  align-items: center;
  padding: 2px 16px;
  background: #fff;
  border-bottom: 1px solid #eef1f5;
  position: relative;
  min-height: 42px;
}

/* Prevent PNG logo from being re-sampled oddly */
.site-logo img {
  display: block;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .site-logo {
    padding: 2px 12px;
    border-bottom: none !important;
  }
}

.reviews-arrow-btn {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-arrow-btn svg {
  display: block;
}

._trxRed_1988m_403 button.copy-trx,
._trxRed_1988m_403 img.copy-trx {
  cursor: pointer;
  vertical-align: middle;
  margin-left: 8px;
}

/* Footer: hide extra links on smaller screens */
@media (max-width: 768px) {
  ._brand_ze0gg_72,
  ._legalLink_ze0gg_89,
  ._cta_ze0gg_83 {
    display: none !important;
  }
  ._bottom_ze0gg_61 {
    justify-content: center;
  }
}

/* Header (PC) tune to match reference compact top bar */
@media (min-width: 769px) {
  ._header_1hjo0_1 {
    padding: 0px 0px !important;
  }

  ._left_1hjo0_13 {
    gap: 0px !important;
  }
}

/* Footer: force rounded top corners (match base styles) */
._footer_ze0gg_1 {
  border-radius: 50px 50px 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
}

@media (max-width: 600px) {
  /* Keep small-phone footer rounding (base index CSS) */
  ._footer_ze0gg_1 {
    border-radius: 24px 24px 0 0 !important;
  }
}

/* Mobile header compactness */
@media (max-width: 900px) {
  ._header_1hjo0_1 {
    padding: 0px !important;
    border-bottom: 1px solid #eef1f5 !important;
  }

  ._left_1hjo0_13 {
    gap: 0px !important;
  }
}

/* Hero: swap blocks to match reference (Purchase energy on the left) */
._hero_1sxpc_1 > ._right_1sxpc_133 {
  order: 1;
}

._hero_1sxpc_1 > ._left_1sxpc_117 {
  order: 2;
}

/* IMPORTANT: do not override hero sizing (max-width/padding) here.
   Base `index-*.css` already contains correct breakpoints matching reference.
   Only keep block order swap above + any truly pixel-level tweaks below. */

/* Hero: keep right/left blocks centered when hero switches to column */
@media (max-width: 1400px) {
  ._hero_1sxpc_1 {
    align-items: center !important;
  }

  ._right_1sxpc_133 {
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 0 !important;
  }

  ._left_1sxpc_117 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Purchase form mobile: reference layout (via DOM reorder in app.js) */
@media (max-width: 768px) {
  /* Base CSS uses a 2-col grid up to 1200px; on phone reference is stacked. */
  #purchase ._formBody_oog4s_33 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* BUY ENERGY: full width button under the two inputs */
  #purchase ._submitFullWidth_oog4s_52 {
    margin-top: 2px !important;
    width: 100% !important;
    justify-self: stretch !important;
    border-radius: 10px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Rental block should not create extra divider spacing */
  #purchase ._rentalGroup_oog4s_191 {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* About -> Testimonials divider: keep only thin line (no big whitespace) */
._separator_69e7h_149 {
  margin: 0 !important;
}

/* Header should scroll with the page (remove sticky positioning) */
header._header_1hjo0_1 {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

@media (max-width: 768px) {
  ._logo_1hjo0_42 {
    width: 107px;
    height: auto;
  }
}

/* Force header layout (match reference): hide main nav and "Sign in" buttons */
header._header_1hjo0_1 nav {
  display: none !important;
}

header._header_1hjo0_1 ._right_1hjo0_19 > button._outline_sulc3_33:not(.cw-connect-button) {
  display: none !important;
}

/* Header tweaks to match reference (desktop only).
   На mobile бургер и пункты drawer должны оставаться видимыми. */
@media (min-width: 769px) {
  ._desktopNav_1hjo0_25 {
    display: none !important;
  }

  ._mobileNav_1hjo0_72 {
    display: none !important;
  }
}

/* Our header uses fixed height from CSS modules; override for crisp PNG render */
._logo_1hjo0_42 {
  height: auto !important;
  display: block;
  object-fit: contain;
}

@media (min-width: 769px) {
  ._logo_1hjo0_42 {
    width: 147px !important;
  }
}