/*
 * Responsive layout corrections for the Crypto Ruda public landing.
 * Responsible for stabilizing exported artboards, preventing horizontal overflow, aligning primary
 * CTA/form control heights, presenting intent-toggle states, adapting the application form, guaranteeing dark converter first paint,
 * and applying reviewed small-screen visual calibration to semantically mapped artwork/text atoms.
 * Must not define exchange calculations, currency-selection behavior, contact-channel search behavior,
 * form submission behavior, or backend integration.
 * Important constraint: selectors that override generated inline page styles must be intentionally
 * more specific because the generated record styles appear later in the document.
 *
 * AI CONTEXT:
 * - This stylesheet is part of the first-party static runtime under vendor/source-site and is loaded from the document head.
 * - Import rate-converter.css before ordinary rules so converter presentation participates in the render-blocking stylesheet chain.
 * - Keep an immediate #12001e converter-record fallback here so the section can never first-paint white.
 * - The converter amount input establishes the exact 48px reference height for primary interactive controls.
 * - Keep shared primary-control sizing centralized through --cr-primary-control-height instead of duplicating independent pixel contracts.
 * - Intent buttons are neutral while inactive; semantic buy/sell colors belong only to .cr-toggle-active states.
 * - Keep the contact-form amount input and currency dropdown in one visual flex control at every supported width.
 * - The application amount input mirrors the converter amount typography, padding, and wrapper-owned corners.
 * - Preserve flex: 1 1 auto plus min-width: 0/width: 0 so the amount input cannot push the bounded currency dropdown out.
 * - Generated page170983009.html still contains a mobile rule that stacks .cr-amount-row; override it here instead of hand-editing the exported HTML.
 * - Application-card artwork is decorative and must never capture pointer input intended for the form underneath it.
 * - On <=479px, reserve at least 18px of visual clearance between the generated application artwork and the first form control.
 * - On mobile only, remove the large gray .cr-card surface and horizontal card padding so fields keep useful viewport width.
 * - Reviewed <=639px Inspect adjustments belong on inner image/text atoms through semantic data-cr-* selectors; do not replace registry anchor geometry with manual left/top overrides.
 * - Currency dropdown visual details remain owned by css/currency-dropdown.css.
 * - Contact method/input/search visual details remain owned by css/contact-channel.css.
 * - Converter-specific component layout remains owned by css/rate-converter.css after this render-blocking import.
 * - Keep public-page layout fixes visual only; do not add business logic here.
 */

@import url("./rate-converter.css");

:root {
  --cr-primary-control-height: 48px;
  --cr-intent-neutral-background: rgba(78, 78, 90, 0.62);
  --cr-intent-neutral-border: rgba(180, 180, 198, 0.34);
  --cr-intent-buy-background: rgba(31, 128, 85, 0.72);
  --cr-intent-buy-border: rgba(74, 222, 128, 0.78);
  --cr-intent-sell-background: rgba(153, 47, 47, 0.72);
  --cr-intent-sell-border: rgba(248, 113, 113, 0.78);
}

/* Converter first-paint fallback: this rule is known before body parsing because this stylesheet is head-loaded. */
#rec2814397301 {
  background-color: #12001e;
}

/* Ensure the t396 grid stays centered at all viewport sizes.
   Site uses left:calc(50% - Xpx + Ypx) which assumes a centered grid.
   This fix prevents shift when scrollbar appears/disappears. */
#allrecords { overflow-x: hidden; }

/*
 * Primary control height contract.
 * The converter amount input is the 48px reference. Every primary form control and both generated
 * hero CTAs use the same exact border-box height so padding, borders, adapters, and generated inline
 * dimensions cannot make one control visibly taller than another.
 * CAPTCHA and consent controls are intentionally excluded because they have independent accessibility sizing.
 */
body.t-body #allrecords #rec2814397301 .cr-converter-input {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2744395801 .tn-elem[data-elem-id="1784965655184"],
body.t-body #allrecords #rec2744395801 .tn-elem[data-elem-id="1785309970425000009"] {
  height: var(--cr-primary-control-height, 48px) !important;
  min-height: var(--cr-primary-control-height, 48px) !important;
  max-height: var(--cr-primary-control-height, 48px) !important;
  box-sizing: border-box;
}

body.t-body #allrecords #rec2744395801 .tn-elem[data-elem-id="1784965655184"] .tn-atom,
body.t-body #allrecords #rec2744395801 .tn-elem[data-elem-id="1785309970425000009"] .tn-atom {
  height: var(--cr-primary-control-height, 48px) !important;
  min-height: var(--cr-primary-control-height, 48px) !important;
  max-height: var(--cr-primary-control-height, 48px) !important;
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-input {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

/*
 * Application card layering and clearance contract.
 * The hero artwork is decorative and must stay visually separated from the first form control.
 * It must never participate in pointer hit-testing, while the form keeps an explicit stacking layer.
 */
body.t-body #allrecords #rec2814322001 .cr-card-image,
body.t-body #allrecords #rec2814322001 .cr-card-image img {
  pointer-events: none;
}

body.t-body #allrecords #rec2814322001 .cr-form {
  z-index: 3;
}

body.t-body #allrecords #rec2814322001 .cr-contact-channel-field {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-contact-channel-input {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-contact-channel-dropdown__trigger {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--cr-intent-neutral-background) !important;
  border-color: var(--cr-intent-neutral-border) !important;
  color: #ececf9 !important;
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-toggle-btn:not(.cr-toggle-active):hover {
  background: rgba(94, 94, 108, 0.68) !important;
  border-color: rgba(196, 196, 210, 0.48) !important;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-toggle-btn.cr-toggle-active[data-value="buy"] {
  background: var(--cr-intent-buy-background) !important;
  border-color: var(--cr-intent-buy-border) !important;
  color: #ececf9 !important;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-toggle-btn.cr-toggle-active[data-value="sell"] {
  background: var(--cr-intent-sell-background) !important;
  border-color: var(--cr-intent-sell-border) !important;
  color: #ececf9 !important;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-row {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 #cr-currency-toggle-group .cr-currency-dropdown__trigger {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  box-sizing: border-box;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-submit-btn {
  height: var(--cr-primary-control-height, 48px);
  min-height: var(--cr-primary-control-height, 48px);
  max-height: var(--cr-primary-control-height, 48px);
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/*
 * Application amount + currency control.
 * The generated record stacks these controls below 479px; the higher-specificity
 * selectors below deliberately preserve one shared row and one focus surface.
 */
body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
  border: 1px solid #5d5d5d;
  border-radius: 10px;
  background: rgba(18, 0, 30, 0.6);
  overflow: visible;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-row:focus-within {
  border-color: #7f2eff;
  box-shadow: 0 0 0 2px rgba(127, 46, 255, 0.3);
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #ececf9;
  font-family: 'Arial', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-input:focus {
  border: 0;
  box-shadow: none;
}

body.t-body #allrecords #rec2814322001 .cr-form .cr-currency-toggle {
  flex: 0 0 126px;
  min-width: 126px;
  max-width: 126px;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  flex-wrap: nowrap;
}

@media screen and (max-width: 410px) {
  body.t-body #allrecords #rec2814322001 .cr-form .cr-currency-toggle {
    flex-basis: 112px;
    min-width: 112px;
    max-width: 112px;
  }
}

/* Intermediate breakpoint: large tablets / small laptops (1024-1199px).
   Site jumps from 960 to 1200 with nothing between.
   This smooths the transition by adjusting the grid offset. */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  /* Elements positioned for 1200px grid get nudged to fit 1024-1199 */
  #rec2744395801 .t396__artboard,
  #rec2744395901 .t396__artboard,
  #rec2744396101 .t396__artboard,
  #rec2744396301 .t396__artboard,
  #rec2744396501 .t396__artboard,
  #rec2744396701 .t396__artboard,
  #rec2744396801 .t396__artboard,
  #rec2814322001 .t396__artboard {
    margin: 0 auto;
  }
}

/* Tablet portrait (768-959px) - improve spacing and font sizes */
@media screen and (min-width: 768px) and (max-width: 959px) {
  /* Ensure artboards don't overflow on tablet portrait */
  .t396__artboard {
    overflow: hidden !important;
  }
}

/* Small tablet / large phone (480-767px) - tighter spacing */
@media screen and (min-width: 480px) and (max-width: 767px) {
  .t396__artboard {
    overflow: hidden !important;
  }
}

/* Very small screens (320-479px) - prevent horizontal scroll */
@media screen and (max-width: 479px) {
  #allrecords {
    overflow-x: hidden;
  }
  .t396__artboard {
    overflow: hidden !important;
  }
}

/* Contact form responsive improvements for intermediate screens */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #rec2814322001 .cr-form-wrapper {
    width: 500px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
  #rec2814322001 .cr-form-wrapper {
    width: 400px !important;
  }
  #rec2814322001 .cr-input {
    font-size: 15px;
  }
}

/* Google reCAPTCHA v2 is 304px wide. Scale only on the mobile application surface. */
#rec2814322001 .cr-google-recaptcha {
  min-height: 78px;
}

@media screen and (max-width: 479px) {
  body.t-body #allrecords #rec2814322001 .cr-card-wrapper {
    width: calc(100% - 32px) !important;
    max-width: 380px;
  }

  body.t-body #allrecords #rec2814322001 .cr-card {
    min-height: 0 !important;
    padding: 128px 0 20px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1;
  }

  body.t-body > div#allrecords > div#rec2814322001 > div.t396 > div.t396__artboard.rendered > div.cr-card-wrapper > div.cr-card > form#cr-contact-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  body.t-body #allrecords #rec2814322001 .cr-form .cr-amount-input {
    font-size: 18px;
  }

  body.t-body #allrecords #rec2814322001 .cr-submit-btn {
    border: 1px solid rgba(161, 90, 255, 0.72);
    box-shadow: 0 8px 24px rgba(127, 46, 255, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  #rec2814322001 .cr-captcha-wrapper {
    height: 63px;
    overflow: visible;
  }

  #rec2814322001 .cr-google-recaptcha {
    width: 304px;
    height: 78px;
    min-height: 78px;
    transform: scale(0.8);
    transform-origin: left top;
  }

  body.t-body > div#allrecords > div#rec2814322001 > div.t396 > div.t396__artboard.rendered > div.cr-card-wrapper > div.cr-card > form#cr-contact-form > div.cr-captcha-wrapper > div#cr-captcha-placeholder > div.cr-captcha-preview-box {
    transform: scale(0.8);
    transform-origin: left top;
  }
}

/*
 * Reviewed small-screen visual calibration.
 * These offsets reproduce the accepted browser-Inspect adjustments on inner presentation atoms only.
 * Anchor wrappers keep their registry-owned X/Y geometry, media lifecycle observers, and containment behavior unchanged.
 */
@media screen and (max-width: 639px) {
  body.t-body #allrecords [data-cr-media="cashless-documents"] .tn-atom__img {
    transform: translate(-10px, 0px);
  }

  body.t-body #allrecords [data-cr-media="russian-ip-qr"] .tn-atom__img {
    transform: translate(-50px, 0px);
  }

  body.t-body #allrecords [data-cr-media="process-summary"] .tn-atom__img {
    transform: translate(40px, -60px);
  }

  body.t-body #allrecords [data-cr-media="uid-transfer-illustration"] .tn-atom__img,
  body.t-body #allrecords [data-cr-media="onchain-transfer-illustration"] .tn-atom__img,
  body.t-body #allrecords [data-cr-media="bybit-order-illustration"] .tn-atom__img {
    transform: translate(-35px, 0px);
  }

  body.t-body #allrecords [data-cr-section="exchange-steps"][data-cr-card="manager-support"][data-cr-role="body"] > .tn-atom {
    transform: translate(10px, 40px);
  }
}