@charset "UTF-8";

/* ========================================
   共通ダイアログ
   ======================================== */

/*
 * ステップ切替など「単独の .hidden」のみ上書きする。
 * `hidden md:block` のように属性内に `:` を含む（Tailwind バリアント）は除外し、ブレークポイントで表示切替できるようにする。
 */
.dialog .hidden:not([class*=":"]) {
    display: none !important;
}

/* 背景（x-dialog の modal プラグインが body 末尾に追加） */
.js-dialog_backdrop {
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.js-dialog_backdrop.is_open {
    opacity: 1;
    visibility: visible;
}

/* モーダル本体 */
.dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    z-index: 300;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: min(90vh, 900px);
    width: calc(100% - 40px);
    max-width: 520px;
    background: #fff;
    border-radius: 16px;
    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.1),
        0 45px 45px rgba(0, 0, 0, 0.09),
        0 101px 60px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.dialog.is_open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.dialog-large {
    max-width: 880px;
}

/* 出金ウォレットなどはタイトルをスロット内で出すため既定ヘッダーを隠す */
.dialog-withdrawal-wallet-address .dialog_header {
    display: none;
}

/* パスキー名称変更もタイトルをスロット内で出すため既定ヘッダーを隠す */
.dialog-passkey-rename .dialog_header {
    display: none;
}

/* 確認・メッセージは他ダイアログより手前（ウォレット画面と重ねる） */
#dialog-confirm.dialog,
#dialog-message.dialog {
    z-index: 310;
}

.dialog_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.dialog_close_button {
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px 8px;
}

.dialog_close_button:hover {
    color: #111;
}

.dialog_content {
    padding: 16px 20px;
    flex: 1;
    min-height: 0;
}

.dialog_content.is_scrollable {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dialog_error {
    position: relative;
    margin-bottom: 12px;
    padding: 12px 36px 12px 12px;
    border-radius: 8px;
    background: #fdecea;
    color: #b71c1c;
    font-size: 14px;
}

/* サイドバー: padding縮小 + 幅調整（「残高確認・返還申請・送金」1行表示を維持） */
@media (min-width: 768px) {
    .user-app-layout-sidebar-inner {
        padding-left: 28px !important;
        padding-right: 20px !important;
    }

    .user-app-layout-sidebar,
    .user-app-layout-sidebar-spacer {
        width: 260px !important;
    }
}

@media (min-width: 1024px) {
    .user-app-layout-sidebar-inner {
        padding-left: 36px !important;
        padding-right: 24px !important;
    }

    .user-app-layout-sidebar,
    .user-app-layout-sidebar-spacer {
        width: 335px !important;
    }
}

@media (min-width: 1280px) {
    .user-app-layout-sidebar-inner {
        padding-left: 44px !important;
        padding-right: 28px !important;
    }

    .user-app-layout-sidebar,
    .user-app-layout-sidebar-spacer {
        width: 440px !important;
    }
}

@media (min-width: 1536px) {
    .user-app-layout-sidebar-inner {
        padding-left: 48px !important;
        padding-right: 32px !important;
    }

    .user-app-layout-sidebar,
    .user-app-layout-sidebar-spacer {
        width: 480px !important;
    }
}

.internal-transfer-warning {
    border-color: #ef4444;
    background: #fdecea;
    color: #b71c1c;
}

.internal-transfer-warning p {
    color: inherit;
}

/* 内部送金確認ダイアログ */
.dialog.internal-transfer-dialog {
    max-width: 560px;
}

.dialog.internal-transfer-dialog .dialog_header {
    color: #111;
}

.dialog.internal-transfer-dialog .dialog_actions .button.approve {
    background: #00584c;
}

.dialog.internal-transfer-dialog .dialog_actions .button.approve:hover {
    opacity: 0.9;
}

/* setUserDialogErrorMessage は textContent 挿入のため、改行は CSS で表現 */
.dialog .js-dialog_error_message {
    white-space: pre-line;
}

.dialog_error_close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #b71c1c;
}

.dialog_form {
    min-width: 0;
}

.dialog_actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 20px 16px;
    border-top: 1px solid #e8e8e8;
    flex-shrink: 0;
}

.dialog_actions .button {
    min-width: 100px;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.dialog_actions .button.cancel {
    background: #f0f0f0;
    color: #333;
}

.dialog_actions .button.approve {
    background: var(--color-primary, #0d6efd);
    color: #fff;
}

.dialog_actions .button.approve.loading {
    opacity: 0.7;
    pointer-events: none;
}

.dialog_actions .button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* アカウント系フロー：コンポーネントのヘッダー／フッター／エラーを隠す */
.dialog.user-dialog-flow .dialog_header,
.dialog.user-dialog-flow .dialog_actions {
    display: none !important;
}

.dialog.user-dialog-flow .dialog_error {
    display: none !important;
}

.dialog.user-dialog-flow .dialog_content {
    padding: 24px 20px;
}

@media (min-width: 640px) {
    .dialog.user-dialog-flow .dialog_content {
        padding: 32px 24px;
    }
}

@media (min-width: 1024px) {
    .dialog.user-dialog-flow .dialog_content {
        padding: 40px 32px;
    }
}

/* レンディング／プレミアム申請ダイアログ幅 */
.dialog.user-dialog-flow.user-dialog-lending {
    max-width: 800px;
    box-shadow:
        0 11px 25px rgba(0, 0, 0, 0.1),
        0 45px 45px rgba(0, 0, 0, 0.09),
        0 101px 60px rgba(0, 0, 0, 0.05),
        0 179px 72px rgba(0, 0, 0, 0.01),
        0 279px 78px rgba(0, 0, 0, 0);
}

/* お問い合わせ */
.dialog.dialog-contact {
    max-width: 940px;
}

.dialog.dialog-contact .dialog_header {
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 0;
}

.dialog.dialog-contact .js-dialog_title:empty {
    display: none;
}

.dialog.dialog-contact .dialog_content {
    padding-top: 0;
}

/* 新規貸出ダイアログ: タイトルを持たないため空の標準ヘッダーの枠線・余白を消し、
   閉じる×だけを右上に表示する（お問い合わせダイアログと同じ扱い）。
   これによりスマホ表示で×が本文中に埋もれる問題と、上部の区切り線のズレを解消する。 */
.dialog.user-dialog-lending-subscribe .dialog_header {
    justify-content: flex-end;
    border-bottom: none;
    padding-bottom: 0;
}

.dialog.user-dialog-lending-subscribe .js-dialog_title:empty {
    display: none;
}

.dialog.user-dialog-lending-subscribe .dialog_content {
    padding-top: 0;
}

/* ========================================
   Sumsub WebSDK（親コンテナ幅いっぱいにSDKを展開）
   ======================================== */
#js-sumsub_websdk_container,
#js-reapply_sumsub_websdk_container {
  width: 100%;
  min-height: 480px;
}

#js-sumsub_websdk_container iframe,
#js-reapply_sumsub_websdk_container iframe,
#js-sumsub_websdk_container > div,
#js-reapply_sumsub_websdk_container > div {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ========================================
   アカウント情報ページ用カスタムCSS
   ======================================== */
@media (min-width: 1024px) {
  .account-label-col {
    width: 260px;
    white-space: nowrap;
  }
}

@media (min-width: 1280px) {
  .account-label-col {
    width: 320px;
  }
}

@media (min-width: 1536px) {
  .account-label-col {
    width: 360px;
  }
}

/* ========================================
   グローバルダイアログ用 z-index
   （Tailwind 任意値 z-[900] が効かない環境向け。ページ専用モーダル z-[200] より手前）
   ======================================== */
.z-index-900 {
  z-index: 900;
}

/* ========================================
   出金先ウォレットアドレス管理ページ用カスタムCSS
   ======================================== */
.withdrawal-wallet-address-warning {
  width: 100%;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 5px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}

@media (min-width: 768px) {
  .withdrawal-wallet-address-warning {
    font-size: 15px;
  }
}

/*
 * PC 一覧（lg 以上表示）：5 列を grid-template-columns で固定。
 * flex + lg:w-[任意px] がビルド／優先度で効かず列が潰れて 1 行に見える問題の回避。
 */
.withdrawal-wallet-address-desktop-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 10px;
  grid-template-columns: 96px 56px minmax(0, 1fr) 100px 76px;
  align-items: stretch;
}

.withdrawal-wallet-address-desktop-grid > * {
  min-width: 0;
}

@media (min-width: 1280px) {
  .withdrawal-wallet-address-desktop-grid {
    column-gap: 14px;
    grid-template-columns: 112px 64px minmax(0, 1fr) 118px 84px;
  }
}

@media (min-width: 1536px) {
  .withdrawal-wallet-address-desktop-grid {
    column-gap: 16px;
    grid-template-columns: 128px 72px minmax(0, 1fr) 132px 92px;
  }
}

/* ================================================================
   パスキー管理テーブル（5列: 操作 / 名称 / 登録日時 / 最終使用日時 / 削除）
   ================================================================ */
.passkey-desktop-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 10px;
  grid-template-columns: 56px minmax(0, 1fr) 140px 140px 56px;
}

.passkey-desktop-grid > * {
  min-width: 0;
}

@media (min-width: 1280px) {
  .passkey-desktop-grid {
    column-gap: 14px;
    grid-template-columns: 64px minmax(0, 1fr) 160px 160px 64px;
  }
}

@media (min-width: 1536px) {
  .passkey-desktop-grid {
    column-gap: 16px;
    grid-template-columns: 72px minmax(0, 1fr) 180px 180px 72px;
  }
}

/* ================================================================
   ステルスログインバナー
   ================================================================ */
.user-stealth-login {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background-color: #dc3545;
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
  font-size: 0.875rem;
  min-width: 280px;
  max-width: 350px;
}

.user-stealth-login__title {
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-stealth-login__user {
  margin-bottom: 0.75rem;
  padding-left: 1.75rem;
  word-break: break-all;
}

.user-stealth-login__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  color: #dc3545;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  justify-content: center;
}

.user-stealth-login__button:hover {
  background-color: #f8f9fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 767px) {
  .user-stealth-login {
    bottom: 10px;
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
    padding: 0.875rem 1rem;
  }

  .user-stealth-login__title {
    font-size: 0.875rem;
  }

  .user-stealth-login__user {
    font-size: 0.813rem;
    padding-left: 1.5rem;
  }

  .user-stealth-login__button {
    padding: 0.625rem 1rem;
    font-size: 0.813rem;
  }
}

/* ========================================
   フラッシュメッセージ
========================================= */
.user-flash-message {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  min-width: 320px;
  max-width: 600px;
  background-color: #e8f5e9;
  border: 1px solid #a5d6a7;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.user-flash-message__text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #2e7d32;
}

.user-flash-message__close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #2e7d32;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.6;
}

.user-flash-message__close:hover {
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .user-flash-message {
    min-width: auto;
    max-width: none;
    left: 16px;
    right: 16px;
    transform: translateX(0);
  }

}

/* ========================================
  返還申請画面（/return）
========================================= */
.return-withdrawal_form .return-balance-row .return-balance-label {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
}

.return-withdrawal_form .return-balance-row .return-balance-value {
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .return-withdrawal_form .return-balance-row .return-balance-value {
    font-size: 3.25rem !important;
  }
}

@media (min-width: 768px) {
  .return-withdrawal_form .return-balance-row .return-balance-value {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 1024px) {
  .return-withdrawal_form .return-balance-row .return-balance-value {
    font-size: 4.25rem !important;
  }
}

.return-withdrawal_form .return-balance-row .return-balance-unit {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
}

@media (min-width: 768px) {
  .return-withdrawal_form .return-balance-row .return-balance-unit {
    font-size: 1.625rem !important;
  }
}

.return-withdrawal_form .return-submit_row {
  margin-top: 2.25rem !important;
}

@media (min-width: 768px) {
  .return-withdrawal_form .return-submit_row {
    margin-top: 2.75rem !important;
  }
}

.deposit-section .deposit-balance-row .deposit-balance-label {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
}

.deposit-section .deposit-balance-row .deposit-balance-value {
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .deposit-section .deposit-balance-row .deposit-balance-value {
    font-size: 3.25rem !important;
  }
}

@media (min-width: 768px) {
  .deposit-section .deposit-balance-row .deposit-balance-value {
    font-size: 3.75rem !important;
  }
}

@media (min-width: 1024px) {
  .deposit-section .deposit-balance-row .deposit-balance-value {
    font-size: 4.25rem !important;
  }
}

.deposit-section .deposit-balance-row .deposit-balance-unit {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #2d5e4e !important;
}

@media (min-width: 768px) {
  .deposit-section .deposit-balance-row .deposit-balance-unit {
    font-size: 1.625rem !important;
  }
}

/* ========================================
   Swap（ユーザー画面）— 返還画面と共通クラス + 見積もりのみ
========================================= */
.return-withdrawal_form .swap-max_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  cursor: pointer !important;
  font: inherit !important;
}

.return-withdrawal_form .swap-amount_section {
  width: 100% !important;
  max-width: 100% !important;
}

.return-withdrawal_form .swap-amount_controls {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.return-withdrawal_form .swap-amount_input_row {
  min-width: 0 !important;
  max-width: 100% !important;
}

.return-withdrawal_form .swap-amount_input {
  flex: 1 1 10rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.return-withdrawal_form .swap-amount_controls .swap-max_btn {
  margin-top: 12px !important;
}

@media (min-width: 640px) {
  .return-withdrawal_form .swap-amount_controls .swap-max_btn {
    margin-top: 0 !important;
  }
}

.return-withdrawal_form .swap-amount_unit {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 9rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.return-withdrawal_form .swap-quote_list .swap-quote_row {
  display: grid !important;
  grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr) !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  align-items: baseline !important;
}

.return-withdrawal_form .swap-quote_list .swap-quote_row dt {
  margin: 0 !important;
}

.return-withdrawal_form .swap-quote_list .swap-quote_row dd {
  margin: 0 !important;
  text-align: right !important;
  justify-self: end !important;
  word-break: break-word !important;
}

.return-withdrawal_form .swap-quote_list .swap-quote_row--receive dd {
  font-weight: 700 !important;
  color: #2d5e4e !important;
}

.return-withdrawal_form .return-submit_btn_wrap .js-return_submit_btn,
.return-withdrawal_form .return-submit_btn_wrap .js-transfer_submit_btn {
  display: block !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  color: inherit !important;
  font: inherit !important;
}

.return-withdrawal_form .return-submit_btn_wrap .js-return_submit_btn:focus-visible,
.return-withdrawal_form .return-submit_btn_wrap .js-transfer_submit_btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.65) !important;
  outline-offset: 2px !important;
}

.return-withdrawal_form .return-submit_btn_wrap {
  transition: opacity 0.2s ease !important;
}

.return-withdrawal_form .return-submit_btn_wrap:has(.js-return_submit_btn:disabled),
.return-withdrawal_form .return-submit_btn_wrap:has(.js-transfer_submit_btn:disabled) {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.return-withdrawal_form .return-submit_btn_wrap:has(.js-return_submit_btn:disabled) .js-return_submit_btn,
.return-withdrawal_form .return-submit_btn_wrap:has(.js-transfer_submit_btn:disabled) .js-transfer_submit_btn {
  cursor: not-allowed !important;
}

.return-withdrawal_form .return-submit_btn_wrap:has(.js-return_submit_btn:not(:disabled)):hover,
.return-withdrawal_form .return-submit_btn_wrap:has(.js-transfer_submit_btn:not(:disabled)):hover {
  opacity: 0.9 !important;
}

.return-withdrawal_form .return-amount_input {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.return-withdrawal_form .return-wallet-address-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23464646' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}

/* ========================================
   パスキー認証オーバーレイ
========================================= */
.passkey-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.passkey-overlay.hidden {
  display: none;
}

.passkey-overlay__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.passkey-overlay__dialog {
  position: relative;
  z-index: 10;
  background-color: #fff;
  border-radius: 18px;
  padding: 32px 24px;
  width: calc(100% - 32px);
  max-width: 360px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.passkey-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.passkey-overlay__icon {
  width: 48px;
  height: 48px;
  color: var(--color-primary, #2563eb);
}

.passkey-overlay__message {
  font-size: 16px;
  font-weight: 700;
  color: #333;
}

.passkey-overlay__cancel {
  font-size: 14px;
  color: #666;
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.passkey-overlay__cancel:hover {
  opacity: 0.8;
}

/* ========================================
   貸出申込ダイアログ（/lending）
   - Tailwind の peer-checked / sr-only / arbitrary translate-x が
     現状ビルドに含まれないため、独自クラスで賄う
   ======================================== */

/* 視覚的に隠す（input[type=radio/checkbox] の本体を隠し、a11y には残す） */
.lending-dialog__visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 期間ラジオのピル表示。input は visually_hidden で隠し、隣接 span を見せる */
.lending-dialog__period_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 40px;
  padding: 0 16px;
  border: 2px solid #e84f4f;
  border-radius: 6px;
  background-color: #ffffff;
  color: #e84f4f;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.lending-dialog__period_input:checked + .lending-dialog__period_pill {
  background-color: #e84f4f;
  color: #ffffff;
}

/* 申込ダイアログ: ボーナス対象期間タブ（Izakaya FormRadio_bonus 相当） */
.lending-duration-tab--bonus .lending-dialog__period_pill {
  color: #7a5200;
  background-color: #fff7e0;
  border-color: #c9972a;
  border-width: 2px;
  box-shadow: inset 4px 0 0 #e8a000;
}

.lending-duration-tab--bonus .lending-dialog__period_input:checked + .lending-dialog__period_pill {
  color: #ffffff;
  background-color: #c9972a;
  border-color: #a67c1a;
  box-shadow: none;
}

/* 申込ダイアログ: ボーナス承認告知（Izakaya 下部赤枠相当） */
.lending-bonus-approval-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background-color: #fff0f0;
  border: 2px solid #e84f4f;
  border-radius: 6px;
  color: #e84f4f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 10px 12px;
}

.lending-bonus-approval-notice.hidden {
  display: none;
}

.lending-bonus-approval-notice__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

@media (min-width: 1024px) {
  .lending-bonus-approval-notice {
    font-size: 13px;
  }
}

/* 自動継続トグルスイッチ。input は visually_hidden で隠し、隣接 span が track + ::after が thumb */
.lending-dialog__toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  background-color: #c9c9c9;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.lending-dialog__toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 9999px;
  transition: transform 0.15s ease;
}

.lending-dialog__toggle_input:checked + .lending-dialog__toggle {
  background-color: var(--color-primary, #1a5b4a);
}

.lending-dialog__toggle_input:checked + .lending-dialog__toggle::after {
  transform: translateX(24px);
}

/* 運用中の自動継続スライドトグル（track + thumb + 状態ラベル）
   - button タグ自体には背景/枠を持たせず、内部の track/thumb で状態を表す
   - .is-on でスライド + 色変化（OS の設定スイッチ風） */
.lending-auto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 12px 0;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.lending-auto-toggle__track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #c9c9c9;
  border-radius: 9999px;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
}

.lending-auto-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.lending-auto-toggle__label {
  font-weight: 700;
  font-size: 13px;
  color: #909090;
  transition: color 0.15s ease;
  min-width: 28px;
  text-align: left;
}

.lending-auto-toggle.is-on .lending-auto-toggle__track {
  background-color: var(--color-primary, #1a5b4a);
}

.lending-auto-toggle.is-on .lending-auto-toggle__thumb {
  transform: translateX(20px);
}

.lending-auto-toggle.is-on .lending-auto-toggle__label {
  color: var(--color-primary, #1a5b4a);
}

.lending-auto-toggle:disabled,
.lending-auto-toggle.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (min-width: 1280px) {
  .lending-auto-toggle__track {
    width: 48px;
    height: 26px;
  }
  .lending-auto-toggle__thumb {
    width: 22px;
    height: 22px;
  }
  .lending-auto-toggle.is-on .lending-auto-toggle__thumb {
    transform: translateX(22px);
  }
  .lending-auto-toggle__label {
    font-size: 14px;
  }
}

/* 自動継続列: 長い不可メッセージでテーブルが横に広がらないようにする
   table-layout:auto では td の max-width が効かないため、内側に固定幅を置いて折り返す。
   IZ EarnBalance__autoLendingCell と同様に white-space / word-break も明示する。 */
.lending-auto-lending-cell {
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 12rem;
  max-width: 12rem;
}

.lending-auto-lending-cell__inner {
  box-sizing: border-box;
  width: 11rem;
  max-width: 11rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lending-auto-lending-message {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
  color: #E84F4F;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (min-width: 1280px) {
  .lending-auto-lending-cell {
    width: 13.5rem;
    max-width: 13.5rem;
  }
  .lending-auto-lending-cell__inner {
    width: 12.5rem;
    max-width: 12.5rem;
  }
  .lending-auto-lending-message {
    font-size: 12px;
  }
}

@media (min-width: 1536px) {
  .lending-auto-lending-message {
    font-size: 13px;
  }
}

/* 新規貸出ダイアログの申し込みボタン disabled スタイル
   ビルド済み user CSS に Tailwind の disabled:bg-* 等が含まれないため、ここで明示する。
   bg-primary / text-white / shadow / hover:opacity を !important で上書きしてグレーアウトを徹底する。 */
.lending-dialog__submit_button:disabled {
  background-color: #d1d5db !important;
  color: #6b7280 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.lending-dialog__submit_button:disabled:hover {
  opacity: 1 !important;
}

/* ================================================================
   履歴ページ（貸出履歴・返還履歴 共通 + タブ別グリッド）
   将来「入金」「交換」タブが追加されても、共通スタイルを再利用できるよう
   タブ別の grid-template-columns のみクラスを分けて定義する。
   ================================================================ */
.user__history_empty {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
  padding: 32px 12px;
}

@media (max-width: 1023px) {
  .user__history_tabs.flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    min-width: 0;
  }

  a.user__history_tab {
    box-sizing: border-box;
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: auto;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }
}

.user__history_row {
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  color: #111827;
}

.user__history_row:last-child {
  border-bottom: none;
}

/* 貸出履歴: 6列（日付 / 年利 / 預け額 / 利益 / 終了日 / ステータス）
   全列等分にすることでヘッダー（センタリング）と数値（右寄せ）のズレを最小化する。
   預け額・利益は通貨アイコン+金額+単位で内容が長いため 1.4fr で広めに取る。 */
.user__history_lending_grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr 1.4fr 1.4fr 1fr 1fr;
  align-items: center;
}

/* ボディ行: 利益列のボーナス行など複数行セルに合わせて行高を伸ばす */
.user__history_lending_grid.user__history_row {
  align-items: start;
}

.user__history_lending_cell {
  display: flex;
  min-width: 0;
  min-height: 23px;
  padding: 2px 0;
}

.user__history_lending_cell--profit {
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 2px;
}

.user__history_lending_grid.user__history_row > .user__history_lending_cell:not(.user__history_lending_cell--profit) {
  align-self: center;
}

.user__history_lending_grid.user__history_row--has_bonus_follow {
  border-bottom: none;
  padding-bottom: 4px;
}

.user__history_lending_grid.user__history_row--bonus {
  margin-top: 0;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

.user__history_lending_cell--bonus_label {
  grid-column: 2 / 4;
}

.user__history_card--bonus {
  margin-top: -8px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}

@media (min-width: 1280px) {
  .user__history_lending_cell {
    min-height: 30px;
  }
}

@media (min-width: 1536px) {
  .user__history_lending_cell {
    min-height: 33px;
  }
}

.user__history_lending_grid > * {
  min-width: 0;
}

@media (min-width: 1280px) {
  .user__history_lending_grid {
    column-gap: 14px;
  }
}

@media (min-width: 1536px) {
  .user__history_lending_grid {
    column-gap: 16px;
  }
}

/* 入金履歴: 3列（日付 / 送金元 / 入金額）等分 */
.user__history_deposit_grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.user__history_deposit_grid > * {
  min-width: 0;
}

.user__history_deposit_grid.user__history_row,
.user__history_return_grid.user__history_row {
  align-items: stretch;
}

.user__history_grid_cell {
  display: flex;
  min-width: 0;
  min-height: 33px;
  padding: 6px 0;
  align-items: center;
  justify-content: center;
}

.user__history_grid_cell--end {
  justify-content: flex-end;
}

.user__history_grid_cell--multiline {
  align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}

.user__history_address_text {
  display: block;
  width: 100%;
  line-height: 1.6;
  word-break: break-all;
  text-align: center;
}

@media (min-width: 1280px) {
  .user__history_deposit_grid {
    column-gap: 14px;
  }
}

@media (min-width: 1536px) {
  .user__history_deposit_grid {
    column-gap: 16px;
  }
}

/* 返還履歴: 6列（日付 / 種別 / 返還額 / 送金先 / ステータス / 操作） */
.user__history_return_grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 10px;
  grid-template-columns: 1fr 0.8fr 1.4fr 1.4fr 1fr 0.9fr;
  align-items: center;
}

.user__history_return_grid > * {
  min-width: 0;
}

@media (min-width: 1280px) {
  .user__history_return_grid {
    column-gap: 14px;
  }
}

@media (min-width: 1536px) {
  .user__history_return_grid {
    column-gap: 16px;
  }
}

.user__history_cancel_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 12px;
  color: #b91c1c;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.user__history_cancel_button:hover {
  background: #fef2f2;
}

/* Swap履歴: 6列（日時 / 変換元 / 変換先 / レート / 手数料 / ステータス） */
.user__history_swap_grid {
  display: grid;
  width: 100%;
  min-width: 0;
  column-gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
}

.user__history_swap_grid > * {
  min-width: 0;
}

@media (min-width: 1280px) {
  .user__history_swap_grid {
    column-gap: 10px;
  }
}

@media (min-width: 1536px) {
  .user__history_swap_grid {
    column-gap: 12px;
  }
}

/* モバイル: カード型 */
.user__history_card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #ffffff;
  min-width: 0;
  overflow-x: hidden;
}

.user__history_card_row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.user__history_card_label {
  color: #6b7280;
  flex-shrink: 0;
}

.user__history_card_value {
  color: #111827;
  font-weight: 500;
  flex: 1;
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.user__history_card_row--action {
  flex-direction: column;
  align-items: stretch;
}

.user__history_card_row--action .user__history_card_label {
  text-align: left;
}

.user__history_card_row--action .user__history_card_value {
  width: 100%;
  text-align: right;
}

.user__history_card_row--action .js-cancel_reservation_form {
  display: block;
  width: 100%;
  max-width: 100%;
}

.user__history_card_row--action .user__history_cancel_button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 通貨アイコン + 数量の表示 */
.user__history_amount {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Swap履歴の「変換元/変換先」は狭幅で改行を許可して重なりを防ぐ */
.user__history_swap_grid .user__history_amount {
  white-space: normal;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 2px;
  min-width: 0;
  word-break: break-word;
}

/* Lending履歴の「預け額/利益」は狭幅で改行を許可して重なりを防ぐ */
.user__history_lending_grid .user__history_amount {
  white-space: normal;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 2px;
  min-width: 0;
  word-break: break-word;
}

/* 履歴モバイルカードの金額行は折り返しを許可して単位の切れを防ぐ */
.user__history_card .user__history_amount {
  white-space: normal;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 2px;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
}

.user__history_amount_icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.user__history_amount_value {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   共通ページネーション（components/pagination.blade.php 用）
   ユーザー画面の他一覧（履歴・報酬等）で共通利用される。
   Blade 側は .pagination / .pagination__btn / .pagination__btn--active / .pagination__dots を出力する。
   ================================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-primary, #1a5b4a);
  border-radius: 6px;
  background-color: #ffffff;
  color: var(--color-primary, #1a5b4a);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.pagination__btn:hover:not(:disabled):not(.pagination__btn--active) {
  background-color: #d9e6d3;
  color: var(--color-primary, #1a5b4a);
  border-color: var(--color-primary, #1a5b4a);
}

.pagination__btn:disabled,
.pagination__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__btn--active {
  background-color: var(--color-primary, #1a5b4a);
  color: #ffffff;
  cursor: default;
}

.pagination__icon {
  width: 14px;
  height: 14px;
}

@media (min-width: 768px) {
  .pagination__icon {
    width: 16px;
    height: 16px;
  }
}

.pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 36px;
  color: #6b7280;
  font-size: 14px;
}

@media (min-width: 768px) {
  .pagination {
    gap: 8px;
  }
  .pagination__btn {
    min-width: 40px;
    height: 40px;
    font-size: 15px;
  }
  .pagination__dots {
    min-width: 28px;
    height: 40px;
    font-size: 15px;
  }
}

/* ========================================
   認証系レイアウト（ログイン・新規登録など）
   - Copyright: カードの下に配置（重ならない）
   - 短い画面: カードを上下中央、Copyright は画面下端
   - 長い画面: ページ全体をスクロール
========================================= */
.auth-layout {
  position: relative;
  width: 100%;
}

.auth-layout__main {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-layout__main-inner {
  display: flex;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  flex-direction: column;
}

.auth-layout__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  padding: 48px 16px 0;
}

.auth-layout__card-wrap {
  flex-shrink: 0;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  width: 100%;
  max-width: 400px;
}

@media (min-width: 768px) {
  .auth-layout__card-wrap {
    width: 400px;
    max-width: none;
  }
}

@media (min-width: 1536px) {
  .auth-layout__card-wrap {
    width: 500px;
  }
}

.auth-layout__footer {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 32px 16px calc(38px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.auth-layout__footer p {
  margin: 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
}

@media (min-width: 640px) {
  .auth-layout__footer p {
    font-size: 11px;
  }
}

@media (min-width: 768px) {
  .auth-layout__footer p {
    font-size: 13px;
  }
}

@media (min-width: 1536px) {
  .auth-layout__footer p {
    font-size: 14px;
  }
}

/* ========================================
   ページバナー（auth レイアウト）
   スマホ: 白カードの上に縦積み / PC(md以上): 白カードの左横に表示
   ======================================== */
.auth-layout__banner {
  width: 100%;
  margin-bottom: 20px;
}

.auth-layout__banner-link {
  display: block;
  width: 100%;
}

.auth-layout__banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

@media (min-width: 640px) {
  .auth-layout__banner {
    margin-bottom: 24px;
  }

  .auth-layout__banner img {
    border-radius: 22px;
  }
}

@media (min-width: 768px) {
  /* バナーあり時はカードラップを横並びにし、バナーを白カードの左に置く */
  .auth-layout__card-wrap--has-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    width: fit-content;
    max-width: none;
  }

  .auth-layout__card-wrap--has-banner .auth-layout__banner {
    width: 400px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .auth-layout__card-wrap--has-banner .auth-layout__card {
    width: 400px;
    flex-shrink: 0;
  }

  .auth-layout__banner img {
    border-radius: 24px;
  }
}

@media (min-width: 1536px) {
  .auth-layout__card-wrap--has-banner .auth-layout__banner {
    width: 500px;
  }

  .auth-layout__card-wrap--has-banner .auth-layout__card {
    width: 500px;
  }

  .auth-layout__banner img {
    border-radius: 26px;
  }
}

/* ========================================
   認証コード入力（auth レイアウト）
   Tailwind arbitrary tracking がビルド CSS に含まれないため user.css で定義
   ======================================== */
.auth-verification-code-input {
  text-align: center;
  letter-spacing: 8px;
}

.auth-verification-code-input::placeholder {
  letter-spacing: normal;
}

/* ========================================
   通貨セレクタ（currency-selector コンポーネント）
   ======================================== */

/*
 * ネットワーク絞り込みのポップオーバーは absolute のため、
 * dialog_content の overflow で切れないようにする（リスト側でスクロール）。
 */
.dialog-currency-selector .dialog_content.is_scrollable {
  overflow: visible !important;
}

.dialog-currency-selector {
  min-height: min(65vh, 520px) !important;
}

.currency_selector {
  display: inline-block;
  max-width: 100%;
}

.currency_selector__dialog {
  display: flex !important;
  flex-direction: column !important;
  min-height: min(55vh, 420px) !important;
}

.currency_selector__trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  border: 2px solid #bfbfbf !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  color: #2d5e4e !important;
  cursor: pointer !important;
  font-family: 'Roboto Condensed', 'Roboto Condensed Fallback', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.currency_selector__trigger:hover {
  background-color: #f8faf9 !important;
}

.currency_selector__trigger:focus-visible {
  outline: 2px solid rgba(45, 94, 78, 0.45) !important;
  outline-offset: 2px !important;
}

.currency_selector__trigger_icon_wrap {
  display: inline-flex !important;
  height: 24px !important;
  width: 24px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background-color: #f0f0f0 !important;
}

.currency_selector__trigger_icon {
  height: 18px !important;
  width: 18px !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.currency_selector__trigger_code {
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.currency_selector__trigger_chevron {
  flex-shrink: 0 !important;
  color: #2d5e4e !important;
}

.currency_selector__title {
  margin: 0 0 16px !important;
  font-weight: 700 !important;
  font-size: 1.125rem !important;
  color: #2d5e4e !important;
  text-align: left !important;
}

.currency_selector__toolbar {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

.currency_selector__search_wrap {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.currency_selector__search_icon {
  position: absolute !important;
  top: 50% !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  color: #888 !important;
  pointer-events: none !important;
}

.currency_selector__search {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0 !important;
  height: 44px !important;
  padding: 0 12px 0 38px !important;
  border: 2px solid #bfbfbf !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  font-size: 0.875rem !important;
  color: #464646 !important;
}

.currency_selector__search:focus {
  outline: none !important;
  border-color: #2d5e4e !important;
  box-shadow: 0 0 0 2px rgba(45, 94, 78, 0.2) !important;
}

.currency_selector__network {
  position: relative !important;
  flex: 0 0 auto !important;
  max-width: 46% !important;
}

.currency_selector__network_trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 8px 12px !important;
  border: none !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #3a7a65 0%, #2d5e4e 100%) !important;
  color: #fff !important;
  cursor: pointer !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  box-shadow: 0 2px 8px rgba(45, 94, 78, 0.25) !important;
  transition: filter 0.15s ease, box-shadow 0.15s ease !important;
}

.currency_selector__network_trigger:hover {
  filter: brightness(1.05) !important;
  box-shadow: 0 4px 12px rgba(45, 94, 78, 0.3) !important;
}

.currency_selector__network_trigger:focus-visible {
  outline: 2px solid rgba(45, 94, 78, 0.45) !important;
  outline-offset: 2px !important;
}

.currency_selector__network_trigger_icon {
  flex-shrink: 0 !important;
  color: #fff !important;
}

.currency_selector__network_trigger_label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.currency_selector__network_list {
  position: absolute !important;
  z-index: 3 !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  left: auto !important;
  min-width: 220px !important;
  width: max-content !important;
  max-width: min(90vw, 280px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  max-height: min(40vh, 280px) !important;
  overflow-y: auto !important;
  border: 2px solid #bfbfbf !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14) !important;
}

.currency_selector__network_option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  cursor: pointer !important;
  color: #464646 !important;
  font-size: 0.875rem !important;
}

.currency_selector__network_option:hover,
.currency_selector__network_option.is-selected {
  background-color: #f0f6f3 !important;
}

.currency_selector__network_option.is-selected {
  color: #2d5e4e !important;
  font-weight: 700 !important;
}

.currency_selector__network_option_icon_wrap {
  display: inline-flex !important;
  height: 24px !important;
  width: 24px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background-color: #f0f0f0 !important;
  color: #2d5e4e !important;
}

.currency_selector__network_option_icon {
  height: 18px !important;
  width: 18px !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.currency_selector__network_option_globe {
  display: block !important;
}

.currency_selector__network_option_name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.currency_selector__network_option_check {
  flex-shrink: 0 !important;
  color: #2d5e4e !important;
  opacity: 0 !important;
}

.currency_selector__network_option.is-selected .currency_selector__network_option_check {
  opacity: 1 !important;
}

.currency_selector__zero_filter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
  font-size: 0.875rem !important;
  color: #464646 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.currency_selector__zero_filter input[type='checkbox'] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  accent-color: #2d5e4e !important;
  cursor: pointer !important;
}

.currency_selector__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: min(40vh, 280px) !important;
  max-height: min(60vh, 360px) !important;
  overflow-y: auto !important;
}

.currency_selector__option {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 52px !important;
  padding: 10px 8px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: #464646 !important;
}

.currency_selector__option:hover,
.currency_selector__option.is-active {
  background-color: #f0f6f3 !important;
}

.currency_selector__option.is-selected {
  background-color: #e8f2ed !important;
}

.currency_selector__option.is-selected .currency_selector__option_name,
.currency_selector__option.is-selected .currency_selector__option_code {
  color: #2d5e4e !important;
  font-weight: 700 !important;
}

.currency_selector__option.is-excluded {
  display: none !important;
}

.currency_selector__option_icon_wrap {
  display: inline-flex !important;
  height: 36px !important;
  width: 36px !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  background-color: #f0f0f0 !important;
}

.currency_selector__option_icon {
  height: 24px !important;
  width: 24px !important;
  object-fit: contain !important;
  pointer-events: none !important;
}

.currency_selector__option_text {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.currency_selector__option_name {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.currency_selector__option_code {
  font-family: 'Roboto Condensed', 'Roboto Condensed Fallback', system-ui, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: #888 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.currency_selector__empty {
  margin: 12px 0 0 !important;
  text-align: center !important;
  font-size: 0.875rem !important;
  color: #888 !important;
}

@media (min-width: 768px) {
  .currency_selector__trigger {
    min-height: 46px !important;
    padding: 9px 16px !important;
  }
}