/* ============================================
 * swap.css - Swapページ専用スタイル
 * ============================================ */

/* ローディング表示 */
.swap-loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.swap-hide {
	display: none !important;
}

/* 数量入力フィールドのコンテナ */
.swap-amount-container {
	display: flex;
	gap: 10px;
}

.swap-amount-input {
	flex: 1;
}

/* 残高表示 */
.swap-balance {
	margin-top: 5px;
	font-size: 0.9em;
	color: #666;
}

.swap-balance-empty {
	color: #999;
}

/* リバースボタン */
.swap-reverse-btn {
	border-radius: 50%;
	width: 56px;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f3f5f7;
	border: none;
	cursor: pointer;
	padding: 0;
}

.swap-reverse-btn-container {
	margin: 20px 0;
	display: flex;
	justify-content: center;
}

/* 見積り表示 */
.swap-quote-display {
	margin-top: 20px;
	padding: 15px;
	background: #f5f5f5;
	border-radius: 5px;
	color: #333; /* デフォルトの文字色を濃いグレーに設定 */
}

.swap-quote-item {
	margin-bottom: 10px;
	color: #333; /* 濃いグレー */
}

.swap-quote-item-large {
	margin-bottom: 10px;
	font-size: 1.1em;
	color: #333; /* 濃いグレー */
}

.swap-quote-detail {
	margin-top: 10px;
	font-size: 0.9em;
	color: #555; /* グレーを濃くして見やすく */
}

.swap-amount-out {
	color: #4CAF50;
}

/* 見積り表示内のテキスト要素の色を明示的に設定 */
.swap-quote-display * {
	color: inherit;
}

.swap-quote-display .swap-quote-detail {
	color: #555;
}

/* エラー表示 */
.swap-error {
	margin-top: 15px;
	padding: 10px;
	background: #ffebee;
	color: #c62828;
	border-radius: 5px;
}

/* ボタンコンテナ */
.swap-buttons {
	margin-top: 20px;
}

.swap-execute-btn {
	display: none;
	margin-top: 10px;
}

.swap-execute-btn:not(.swap-hide) {
	display: block;
}

/* SVGアイコンのスタイリング */
.swap-reverse-btn svg {
	width: 70%;
	height: 70%;
}

/* ヘッダー内のボタンコンテナ */
.swap-header-button {
	margin-top: 15px;
}