/* FRAX Chrome 1.1 — loaded after the original theme and merchant styles.
   Original logos, bank/currency artwork, layout hooks and JS remain intact.
   Both legacy theme modes intentionally use the same FRAX dark palette. */
:root, html.light, html.dark, body, body.light, body.dark {
  --frax-bg: #030809;
  --frax-panel: #0b1417;
  --frax-panel-raised: #111e22;
  --frax-line: rgba(166, 219, 226, .15);
  --frax-cyan: #40dce3;
  --frax-text: #f0f6f7;
  --frax-muted: #9cb1b8;
  --Big-Block-Fill: linear-gradient(135deg, #101d21, #0a1215 70%);
  --Order-Big-Block-Fill: #0b1417;
  --Small-Block-Fill: #101c20;
  --Table-2-Icon-Block: #111e22;
  --Widget-Block-Fill: #0d181c;
  --Colors-Fills-Comments-Timers: rgba(64,220,227,.12);
  --Colors-Fills-Cookies-Fill: #10272b;
  --Colors-Fills-Dropmenu-Burgermenu: #101e22;
  --Colors-Fills-Dividers: rgba(166,219,226,.12);
  --Colors-Fills-Error: #c83d50;
  --Colors-Fills-Form-Scrolls: #34575e;
  --Colors-Fills-Form-Dividers: rgba(166,219,226,.1);
  --Colors-Fills-Loading-Overlay: rgba(3,8,9,.88);
  --Colors-Fills-Popup-Overlay: rgba(0,4,6,.85);
  --Colors-Fills-Positive: #48dca1;
  --Colors-Fills-Primary: #40dce3;
  --Colors-Fills-Scrolls: #34575e;
  --Colors-Fills-Tab-Fill: #101c20;
  --Colors-Fills-Table-Header: #13272c;
  --Colors-Fills-Table-Item: #0c171b;
  --Colors-States-Accordeon-Hover: #173238;
  --Colors-States-Click-Button-Links-Controls-Strokes: rgba(64,220,227,.22);
  --Colors-States-Currency-Item-Hover: rgba(64,220,227,.08);
  --Colors-States-Currency-Item-Selected: rgba(64,220,227,.14);
  --Colors-States-Droplist-Item-Hover: #183238;
  --Colors-States-Droplist-Item-Selected: #1b3d43;
  --Colors-States-Dropmenu-Burgermenu-Hover: #1b3439;
  --Colors-States-Hover-Button-Links-Controls-Strokes: rgba(64,220,227,.12);
  --Colors-States-Personal-Account-Item-Hover: #173138;
  --Colors-States-Personal-Account-Item-Selected: #1a3b42;
  --Colors-Strokes-Big-Block-Stroke: rgba(166,219,226,.16);
  --Colors-Strokes-Dropdown-Menu-Strokes: #34575e;
  --Colors-Strokes-Form-Fields-Stroke: #30464c;
  --Colors-Strokes-Form-Stroke: rgba(64,220,227,.18);
  --Colors-Strokes-Secondary-Button-Stroke: #357078;
  --Colors-Strokes-Small-Block-Stroke: rgba(166,219,226,.14);
  --Colors-Strokes-Widget-Block-Stroke: rgba(166,219,226,.14);
  --Colors-Texts-Form-Button-Text: #032124;
  --Colors-Texts-Form-Link: #68e7ed;
  --Colors-Texts-Form-Secondary-Text: #9cb1b8;
  --Colors-Texts-Form-Text: #f0f6f7;
  --Colors-Texts-Link-Click: #36cbd4;
  --Colors-Texts-Link-Hover: #adfaff;
  --Colors-Texts-Link: #68e7ed;
  --Colors-Texts-On-Page: #f0f6f7;
  --Colors-Texts-On-Primary: #032124;
  --Colors-Texts-Primary-Button-Text: #032124;
  --Colors-Texts-Secondary-Button-Text: #b4f7fa;
  --Colors-Texts-Text-Dropmenu-Burgermenu: #f0f6f7;
  --Colors-Texts-Text-Notification: #ffffff;
  --Colors-Texts-Text-Secondary: #9cb1b8;
  --Colors-Texts-Text: #f0f6f7;
  --Colors-Texts-Text-Input: #f0f6f7;
  --Footer: #050c0e;
  --Form-Button-Click: #28b6c0;
  --Form-Button-Hover: #7aebf0;
  --Form-Button: #40dce3;
  --Form-Field-Fill: #081215;
  --Form-Field-Fill-Dark: #081215;
  --Form-Fill: #0b1417;
  --Form-Total-Field-Fill: #081215;
  --Form-headers: #f0f6f7;
  --Header-0: #0b1e22;
  --Header-1: transparent;
  --Header-2: #0b1417;
  --Header-Button-Click: #28b6c0;
  --Header-Button-Hover: #7aebf0;
  --Header-Primary-Button: #40dce3;
  --Secondary-Header-Button: #0f1e23;
  --Secondary-Header-Button-Hover: #173238;
  --Secondary-Header-Button-Click: #1b3d43;
  --Colors-Header-Footer-Footer-Link-Click: #36cbd4;
  --Colors-Header-Footer-Footer-Link-Hover: #adfaff;
  --Colors-Header-Footer-Footer-Link: #a8c3cb;
  --Colors-Header-Footer-Header-Button-Stroke: #304c53;
  --Colors-Header-Footer-Header-Link-Click: #36cbd4;
  --Colors-Header-Footer-Header-Link-Hover: #adfaff;
  --Colors-Header-Footer-Header-Link: #d5e7eb;
  --Colors-Header-Footer-Header-Primary-Button-Text: #032124;
  --Colors-Header-Footer-Header-Secondary-Button-Text: #d5e7eb;
  --Bg: #030809;
  --Field-Fill: #081215;
  --Total-Field-Fill: #081215;
  --Popup-Fill: #101d21;
  --Primary-Button-Click: #28b6c0;
  --Primary-Button-Hover: #7aebf0;
  --Primary-Button: #40dce3;
  --Secondary-Button-Click: #1b3d43;
  --Secondary-Button-Hover: #173238;
  --Page-Fill: transparent;
  --Gradient-Table-Dark: linear-gradient(145deg, #112125, #0a1215 70%);
  --H1-H2: #f0f6f7;
  --Mobile-Desktop-Header-Button-Corner: 1.2rem;
  --Desktop-Radius-Big-Block-Corner-Radius: 2rem;
  --Desktop-Radius-Button-L-Corner: 1.2rem;
  --Desktop-Radius-Button-S-Corner: 1rem;
  --Desktop-Radius-Corner-Radius: 1.2rem;
  --Desktop-Radius-Form-Block-Corner-Radius: 2.4rem;
  --Desktop-Radius-Inputs-Corner-Radius: 1.2rem;
  --Desktop-Radius-Main-Big-Block-Corner: 2rem;
  --Desktop-Radius-Page-Block-Corner-Radius: 2.4rem;
  --Desktop-Radius-Popup-Corner-Radius: 2rem;
  --Desktop-Radius-Small-Block-Corner-Radius: 1.6rem;
  --Mobile-Radius-Big-Block-Corner-Radius: 1.6rem;
  --Mobile-Radius-Form-Block-Corner-Radius: 1.6rem;
  --Mobile-Radius-Main-Big-Block-Corner: 1.6rem;
  --Mobile-Radius-Popup-Corner-Radius: 1.6rem;
  --pe-input-border-color: #30464c;
  --pe-hints-bg: #14262c;
  --pe-input-radius: 1.2rem;
  --pe-font-family: Rubik;
  --pe-headers-color: #f0f6f7;
  color-scheme: dark;
}
html, html.light, html.dark { background: #030809; color-scheme: dark; }
html body, html.light body, html.dark body {
  background: #030809;
  isolation: isolate;
  color: var(--frax-text);
  -webkit-font-smoothing: antialiased;
}
body ::selection { background: #40dce3; color: #032124; }
body :focus-visible { outline: 2px solid #7aebf0; outline-offset: 4px; }
body :is(input, textarea, select) { caret-color: var(--frax-cyan); }
body :is(input, textarea)::placeholder { color: #8aa3ab; opacity: 1; }
body input:-webkit-autofill {
  -webkit-text-fill-color: #f0f6f7;
  box-shadow: 0 0 0 1000px #102126 inset;
}
/* Header. No image filters: payment logos and the uploaded site logo keep their colours. */
html body .user-bar { padding: 1.8rem 0 1.4rem; }
html body .user-bar.sticky.active { background: #071114; }
html body .navigation__container {
  background: linear-gradient(110deg, rgba(20,37,42,.97), rgba(8,17,20,.98));
  border: 1px solid var(--frax-line);
  border-top-color: rgba(179,234,241,.3);
  border-radius: 1.8rem;
  padding: 2.2rem 2.8rem;
  box-shadow: 0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.025);
}
html body .logo img { object-fit: contain; }
html body .main-menu__list > li > a { font-weight: 500; }
html body .main-menu__list > .current-menu-item > a { color: #70eff4; }
html body :is(.user-bar__link, .langlist_title) { border-color: #304c53; }
html body .header_timetable { color: #a8bdc4; }
html body .header_timetable p { opacity: 1; }
html body .header__dark-mode { display: none !important; }
/* A compact intro keeps the actual exchange above the fold. */
.frax-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 3.6rem .4rem 3rem; }
.frax-intro__eyebrow { display: flex; align-items: center; gap: 1rem; font: 500 1.1rem/1.6 var(--font); letter-spacing: .2em; color: #77d9e0; margin: 0 0 1.2rem; }
.frax-intro__eyebrow::before { content: ''; width: 2.6rem; height: 2px; background: #40dce3; }
html body .frax-intro__title { font: 500 clamp(2.5rem, 3.2vw, 4.1rem)/1.28 var(--font-secondary); letter-spacing: -.035em; color: #f3f8f9; margin: 0 0 1.2rem; }
.frax-intro__description { margin: 0; color: #a9bec5; font-size: 1.5rem; line-height: 1.6; }
.frax-intro__label { color: #afd3d9; font-size: 1.1rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .12em; border: 1px solid #29434a; border-radius: 99px; padding: 1rem 1.5rem; white-space: nowrap; margin-bottom: .2rem; background: rgba(8,21,25,.85); }
/* The common page wrapper previously carried the pale blue fill. */
html body .homepage_wrap, html body .main-wrapper { padding: 0; background: transparent; }
html body .homepage_wrap > .main-form { padding: 2rem; border: 1px solid rgba(89,180,192,.22); border-radius: 2.4rem; background: rgba(7,17,21,.94); box-shadow: 0 30px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(200,242,247,.04); }
html body .main-form { margin-bottom: 5.6rem; }
/* All original table/list/tile variants retain their plugin DOM. */
html body .xchange_type_table.tbl1 :is(.xtt_left_col_table, .xtt_right_col_table),
html body .xchange_type_table.tbl4 :is(.xtt_left_col_table_ins, .xtt_right_col_table_ins),
html body .xchange_type_table.tbl5 :is(.xtt_left_col_table_ins, .xtt_right_col_table_ins, .xtt_data_col_table_ins),
html body :is(.xtp_table_wrap_ins, .xchange_type_list_ins, .homepage_wrap .xchange_div) {
  background: linear-gradient(135deg, #101d21, #0a1215 75%);
  border: 1px solid var(--frax-line);
  border-radius: 1.8rem;
  box-shadow: inset 0 1px 0 rgba(200,242,247,.035);
}
html body .xchange_type_table.tbl1 :is(.xtt_left_col_table, .xtt_right_col_table) { padding: 2.4rem; }
html body .xtt_left_col_table_ins { border-right-color: var(--frax-line); }
html body :is(.xtt_table_title1, .xtt_table_title2, .xtt_left_col_title, .xtt_left_incol_title, .xtt_right_col_title, .xtt_right_incol_title) { color: #f0f6f7; }
html body :is(.xtt_table_title1, .xtt_table_title2) { font-size: 2rem; line-height: 1.35; font-weight: 500; }
html body .xchange_type_table :is(.xtt_table_title3, .xtt_table_title4) { color: #9cb1b8; font-family: var(--font); font-size: 1.2rem; }
html body .tbl_icon { border: 1px solid rgba(139,200,208,.13); border-radius: .8rem; font-size: 1.1rem; letter-spacing: .035em; padding: .9rem 1.1rem; }
html body .tbl_icon.active { background: #40dce3; color: #032124; border-color: #64edf1; box-shadow: 0 2px 14px rgba(64,220,227,.1); font-weight: 500; }
html body .tbl_icon:hover:not(.active) { background: #17383e; color: #b4f7fa; border-color: #37737c; }
html body :is(.xtt_left_col_icon_ins, .xtt_right_col_icon_ins) { gap: .6rem; margin-bottom: 1.2rem; }
html body :is(.xtt_one_line_left, .xtt_one_line_right) { border-radius: 1rem; transition: background-color .16s ease, box-shadow .16s ease; }
html body .js_item_left.active .xtt_one_line_left,
html body .js_item_right.active .xtt_one_line_right { background: linear-gradient(90deg, rgba(64,220,227,.18), rgba(64,220,227,.045)); box-shadow: inset 3px 0 #40dce3, inset 0 0 0 1px rgba(64,220,227,.2); }
html body :is(.xtt_one_line_left, .xtt_one_line_right):hover { background-color: rgba(64,220,227,.08); }
html body :is(.xtt_one_line_curs, .xtt_one_line_reserv, .js_course_html, .js_reserve_html) { font-variant-numeric: tabular-nums; }
html body :is(.scroll-wrapper, #xtt_right_col_html, .select_js_ul, #hexch_html) { scrollbar-color: #34575e transparent; scrollbar-width: thin; }
/* Form controls, dropdowns, tooltips and modal surfaces. */
html body :is(input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']), textarea, select, .select_js_title) {
  background-color: #081215; color: #f0f6f7; border-color: #30464c;
}
html body :is(input, textarea, select):focus { border-color: #40dce3; }
html body :is(.select_js_ul, .select_js_ul_ins, .js_choice_ul, .js_purse_ul, .langlist_ul, .standart_windowins, .standart_window .standart_windowins, .info_window) {
  background: #101e23; color: #f0f6f7; border-color: #36565f;
}
html body .js_purse_line { border-color: #30464c; }
html body select option { background: #101e23; color: #f0f6f7; }
html body .hexch_info_line, html body .merch__title { color: #b8cbd1; }
html body :is(input[type='submit'], .btn-primary, .xtl_submit, .xchange_submit, .hexch_submit) {
  background: linear-gradient(115deg, #72edf0, #32c6d2); color: #032124; border-color: #6de8ed; font-weight: 500; text-shadow: none;
  box-shadow: 0 5px 20px rgba(21,152,166,.13);
}
html body :is(input[type='submit'], .btn-primary, .xtl_submit, .xchange_submit, .hexch_submit):hover:not(:disabled) { background: #8aeff3; color: #032124; }
html body :is(button, input[type='submit']):disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
html body .btn-secondary { border-color: #357078; color: #b4f7fa; background-color: transparent; }
html body .btn-secondary:hover { background-color: #16363d; }
/* Inner pages, account screens, reviews and content blocks share one material. */
html body :is(.widget_ins, .feedback, .news, .icon-card, .reserve-item, .crypto, .information__wrapper, .hometext-wrapper_ins, .disclaimer,
 .notice_message, .warning_message, .block_xchangedata, .block_payinfo, .block_statusbids,
 .many_reviews_ins, .rf_div_wrap, .single_news, #respond, .cf_div_wrap, .textblock, .checkstatus_div_wrap,
 .acf_div_wrap, .reg_div_wrap, .userwallets__container, .statstablediv, .userxchtable, .domacc_div_wrap,
 .iactable, .statuserdiv, .promouserdiv, .promopage, .plinkstable, .preferalstable, .paytext, .paydiv,
 .paytable, .userverify_table, .userapi_form, .userapi_table, .userverify_text, .userverify_div_wrap,
 .sitemap_block, .lp_div, .log_div, .promo_top, .promo_rules, .promo_sites-review, .zone_table) {
  background: linear-gradient(135deg, #101d21, #0a1215 80%); border-color: var(--frax-line);
}
html body :is(.feedback, .news, .icon-card, .reserve-item, .crypto) { border: 1px solid var(--frax-line); }
html body .notice_message { border-left: 3px solid #40dce3; }
html body .warning_message { border-left: 3px solid #ebba70; }
html body :is(.error_div, .resultfalse, .js_error) { color: #ff8997; }
html body .verify_status.wait { color: #ebba70; }
html body .one_reviews_answer { background: #10252b; border: 1px solid #29454e; }
html body .oncetoggle.active, html body .oncetoggle:hover { background: #132b31; }
html body .banner-slide { background-color: #10252b; border: 1px solid var(--frax-line); }
html body .section.merch { background: transparent; }
html body .footer { background: linear-gradient(180deg, rgba(7,18,22,.96), #030809); border-top: 1px solid #223c44; }
html body .hometext-wrapper__img { filter: none; }
@media (min-width: 641px) {
  html body .xchange_type_table.tbl1 .xtt_table_body_wrap,
  html body .xchange_type_table.tbl1 .xtt_icon_wrap { gap: 1.4rem; grid-template-columns: minmax(0, 35%) minmax(0, 1fr); }
  html body .xchange_type_table.tbl1 :is(.xtt_left_col_table, .xtt_right_col_table) { max-width: none; min-width: 0; }
}
@media (max-width: 1100px) {
  .frax-intro__label { display: none; }
  html body .navigation__container { padding: 2rem; }
}
@media (max-width: 640px) {
  html body .user-bar { padding: 1.2rem 1.5rem; }
  html body .navigation { padding: .8rem 1.2rem; }
  html body .navigation__container { padding: 1.6rem; border-radius: 1.4rem; }
  html body .navigation.sticky.active { background: #071114; }
  .frax-intro { padding: 2.2rem 1.6rem 2.4rem; }
  .frax-intro__eyebrow { font-size: .95rem; letter-spacing: .13em; }
  html body .frax-intro__title { font-size: clamp(2.2rem, 6vw, 3rem); letter-spacing: -.035em; }
  .frax-intro__description { font-size: 1.35rem; }
  html body .homepage_wrap > .main-form { width: calc(100% - 2.4rem); padding: 1rem; border-radius: 1.8rem; margin: 0 1.2rem 3.2rem; }
  html body .xchange_type_table.tbl1 :is(.xtt_left_col_table, .xtt_right_col_table) { padding: 1.2rem; border-radius: 1.2rem; min-width: 0; }
  html body .tbl_icon { font-size: 1rem; padding: .7rem .9rem; }
  html body :is(.xtt_left_col_icon_ins, .xtt_right_col_icon_ins) { gap: .4rem; }
  html body :is(.xtt_table_title1, .xtt_table_title2) { font-size: 1.6rem; }
  html body .main-menu__wrapper { background: #0b191e; }
  html body .main-wrapper { padding: 0 1.2rem; }
  html body .home .section { margin-bottom: 3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html body :is(.tbl_icon, .xtt_one_line_left, .xtt_one_line_right, .btn) { transition: none; }
}
/* A few legacy selectors are more specific; lock only the intended visual overrides. */
html body .navigation__container {
  background: linear-gradient(110deg, rgba(20,37,42,.97), rgba(8,17,20,.98)) !important;
  border-radius: 1.8rem !important;
  padding: 2.2rem 2.8rem !important;
}
html body .header_timetable { opacity: 1; }
html body .xchange_type_table.tbl1 .xtt_left_col_table_ins { border-right: none; padding-right: 0; }
html body .xchange_type_table.tbl1 .xtt_one_line_right { min-height: 6.8rem; padding: .8rem 1.2rem; }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid #7aebf0 !important; outline-offset: 3px !important; }
html body input[type='checkbox'], html body input[type='radio'] { width: 1.8rem; height: 1.8rem; padding: 0; accent-color: #40dce3; }
@media (max-width: 640px) {

  html body .navigation__container { border-radius: 1.4rem !important; padding: 1.6rem !important; }
  html body .xchange_type_table.tbl1 .xtt_one_line_right { min-height: 0; padding: 0; }
  html body .xchange_type_table.tbl1 .xtt_table_body_wrap { gap: .6rem; }
  html body .xchange_type_table.tbl1 .xtt_table_body_wrap > :is(.xtt_left_col_table, .xtt_right_col_table) { width: calc(50% - .3rem); }
}
@media (min-width: 641px) {
  html body .xchange_type_table.tbl4 :is(.xtt_left_col_table_ins, .xtt_right_col_table_ins) { padding: 2.8rem; }
}
@media (max-width: 640px) {
  html body .xchange_type_table.tbl4 .xtt_table_wrap { padding: 0; border: 0; background: transparent; }
  html body .xchange_type_table.tbl4 .xtt_table_body_wrap { gap: .6rem; }
  html body .xchange_type_table.tbl4 .xtt_table_body_wrap > :is(.xtt_left_col_table, .xtt_right_col_table) { width: calc(50% - .3rem); min-width: 0; }
  html body .xchange_type_table.tbl4 :is(.xtt_left_col_table_ins, .xtt_right_col_table_ins) { padding: 1rem !important; border: 1px solid var(--frax-line); border-radius: 1.2rem; }
  html body .xchange_type_table.tbl4 :is(.xtt_table_title1, .xtt_table_title2) { font: 500 1.5rem/1.35 var(--font); }
}

/* Viewport-sized layer: does not end when the document gets taller.
   Fixed pseudo-element also avoids iOS background-attachment: fixed limitations.
   Isolation keeps it above the body paint and below all controls and modals. */
html body::before {
  content: "";
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(3,8,9,.34), rgba(3,8,9,.34)),
    url('../images/frax/chrome-background.webp') center center / cover no-repeat;
}
@media (max-width: 640px) {
  html body::before {
    background-image: linear-gradient(rgba(3,8,9,.65), rgba(3,8,9,.65)),
      url('../images/frax/chrome-background.webp');
    background-position: center center, left center;
  }
}
