/**
 * Currency desktop (≥769px) — Figma Currency converter.
 * Mobile styles stay in currency-rates-card/lc-currency-figma.css.
 */

.lc-currency-keypad-label {
  display: none;
}

@media (min-width: 769px) {
  body.lc-desk-currency {
    --lc-desk-sidebar: 248px;
    --lc-desk-topbar: 72px;
    --lc-desk-gutter: 32px;
    background: #F3F8F8 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  body.lc-desk-currency .site-header,
  body.lc-desk-currency .site-footer,
  body.lc-desk-currency .lc-desktop-footer-note,
  body.lc-desk-currency .lcmtm-mobile-shell,
  body.lc-desk-currency .lcmtm-mobile-top,
  body.lc-desk-currency .lcmtm-mobile-bottom {
    display: none !important;
  }

  body.lc-desk-currency .site-content {
    margin-left: var(--lc-desk-sidebar) !important;
    padding-top: var(--lc-desk-topbar) !important;
    width: calc(100% - var(--lc-desk-sidebar)) !important;
    max-width: calc(100% - var(--lc-desk-sidebar)) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    background: #F3F8F8 !important;
  }

  body.lc-desk-currency .site-content .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: var(--lc-desk-gutter) !important;
    padding-right: var(--lc-desk-gutter) !important;
    box-sizing: border-box !important;
  }

  body.lc-desk-currency .lc-desk-topbar {
    left: var(--lc-desk-sidebar) !important;
    right: 0 !important;
    width: auto !important;
    max-width: calc(100% - var(--lc-desk-sidebar)) !important;
    padding-left: var(--lc-desk-gutter) !important;
    padding-right: var(--lc-desk-gutter) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.lc-desk-currency .page__title,
  body.lc-desk-currency .entry-header,
  body.lc-desk-currency .entry-title,
  body.lc-desk-currency .page__text > .lc-sos-listen,
  body.lc-desk-currency .entry-content > .lc-sos-listen,
  body.lc-desk-currency .site-main > .lc-sos-listen {
    display: none !important;
  }

  body.lc-desk-currency .joinchat,
  body.lc-desk-currency #wa-widget,
  body.lc-desk-currency .ht-ctc,
  body.lc-desk-currency .ht-ctc-chat,
  body.lc-desk-currency .a11y-toolbar,
  body.lc-desk-currency .pojo-a11y-toolbar {
    display: none !important;
  }

  body.lc-desk-currency .page__text,
  body.lc-desk-currency .entry-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 28px 0 48px !important;
    background: transparent !important;
  }

  body.lc-desk-currency .lc-currency-page {
    max-width: 760px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 22px !important;
  }

  body.lc-desk-currency .lc-currency-page__rates {
    flex-direction: row !important;
    gap: 16px !important;
  }

  body.lc-desk-currency .lc-currency-rate {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-height: 58px !important;
    padding: 12px 18px !important;
    border-radius: 999px !important;
    gap: 10px !important;
  }

  body.lc-desk-currency .lc-currency-rate__flag,
  body.lc-desk-currency .lc-currency-page .crc-flag {
    width: 26px !important;
    height: 26px !important;
    border-radius: 4px !important;
  }

  body.lc-desk-currency .lc-currency-rate__text {
    flex: 0 1 auto !important;
    font-size: 16px !important;
    white-space: nowrap !important;
  }

  body.lc-desk-currency .lc-currency-page__label {
    font-size: 22px !important;
    color: #0A4650 !important;
    margin: 4px 0 0 !important;
  }

  body.lc-desk-currency .lc-currency-converter {
    min-height: 92px !important;
    padding: 18px 28px !important;
    background: #ffffff !important;
    border: 2px solid #0B4852 !important;
    border-radius: 18px !important;
    gap: 16px !important;
  }

  body.lc-desk-currency .lc-currency-converter__badge {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
  }

  body.lc-desk-currency .lc-currency-converter__badge img {
    width: 22px !important;
    height: 22px !important;
  }

  body.lc-desk-currency .lc-currency-converter__amount,
  body.lc-desk-currency .lc-currency-converter__result {
    font-size: 40px !important;
    color: #0A4650 !important;
  }

  body.lc-desk-currency .lc-currency-converter__output {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
  }

  body.lc-desk-currency .lc-currency-converter__eq {
    font-size: 32px !important;
    color: #0A4650 !important;
  }

  body.lc-desk-currency .lc-currency-keypad-label {
    display: block !important;
    margin: 8px 0 0 !important;
    color: #0A4650 !important;
    font-family: "Abhaya Libre", "Noto Sans Tamil", Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
  }

  body.lc-desk-currency .lc-currency-keypad {
    gap: 14px !important;
  }

  body.lc-desk-currency .lc-currency-keypad__row {
    gap: 14px !important;
  }

  body.lc-desk-currency .lc-currency-key,
  body.lc-desk-currency button.lc-currency-key {
    min-height: 76px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 16px -8px rgba(10, 69, 79, 0.22) !important;
    font-size: 28px !important;
    color: #0A4650 !important;
  }

  body.lc-desk-currency button.lc-currency-key--back {
    border: 2px solid #E53935 !important;
    color: #E53935 !important;
    box-shadow: 0 4px 16px -8px rgba(229, 57, 53, 0.22) !important;
  }

  body.lc-desk-currency button.lc-currency-key:active,
  body.lc-desk-currency button.lc-currency-key.is-pressed {
    background-color: #137578 !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  body.lc-desk-currency button.lc-currency-key--back:active,
  body.lc-desk-currency button.lc-currency-key--back.is-pressed {
    background-color: #E53935 !important;
    border-color: #C62828 !important;
    color: #ffffff !important;
  }

  @media (max-width: 1100px) {
    body.lc-desk-currency .lc-currency-page {
      max-width: 100% !important;
    }

    body.lc-desk-currency .lc-currency-rate__text {
      font-size: 14px !important;
    }

    body.lc-desk-currency .lc-currency-converter__amount,
    body.lc-desk-currency .lc-currency-converter__result {
      font-size: 32px !important;
    }
  }
}