/* currency-converter.css — IndiaRealTime Currency Converter
   The page shell (header, footer, .wrap/.ir-wrap, .pghead, .ir-bc, fonts,
   colors) comes from the theme's own ir-tokens.css/ir-home-v2.css/ir-home.css,
   loaded before this file - see irt_cc_enqueue_assets(). Only the currency-
   widget-specific pieces below (converter, index list) are this plugin's
   own, and they use the theme's CSS custom properties so they always match
   its current palette instead of a second, hardcoded copy. */

.irt-cc-converter {
	margin-bottom: 32px;
}

.irt-cc-convert-summary {
	font-size: 1em;
	color: var(--ink-secondary, #5B5650);
	margin: 0 0 4px;
}

.irt-cc-rate-headline {
	font-size: 1.9em;
	font-weight: 700;
	color: var(--ink, #1A1C22);
	margin: 0 0 6px;
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.irt-cc-updated {
	font-size: 0.85em;
	color: var(--ink-secondary, #5B5650);
	margin: 0 0 20px;
}

.irt-cc-boxes {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.irt-cc-box {
	flex: 1 1 220px;
	background: var(--surface, #FFFDFA);
	border: 1.5px solid var(--border, #E5E3DC);
	border-radius: var(--radius-m, 12px);
	padding: 12px 14px;
}

/* Swap only reorders which box appears on which side - both inputs stay
   fully live either way, so this is a pure visual flip. */
.irt-cc-boxes.irt-cc-swapped .irt-cc-box:first-of-type {
	order: 2;
}
.irt-cc-boxes.irt-cc-swapped .irt-cc-swap {
	order: 1;
}
.irt-cc-boxes.irt-cc-swapped .irt-cc-box:last-of-type {
	order: 0;
}

.irt-cc-box-label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--ink-secondary, #5B5650);
	margin-bottom: 6px;
}

#irt-cc-input-inr,
#irt-cc-input-fx {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0;
	font-size: 1.3em;
	font-weight: 600;
	color: var(--ink, #1A1C22);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

#irt-cc-input-inr:focus,
#irt-cc-input-fx:focus {
	outline: none;
}

.irt-cc-swap {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--brand-tint-50, #FFF3EA);
	color: var(--brand, #FF6200);
	border: 1px solid var(--brand-tint-100, #FFE3D1);
	font-size: 1.2em;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.irt-cc-swap:hover {
	background: var(--brand-tint-100, #FFE3D1);
}

.irt-cc-about p {
	line-height: 1.7;
	color: var(--ink-secondary, #43485A);
}

.irt-cc-index-intro {
	color: var(--ink-secondary, #43485A);
	line-height: 1.7;
	margin-bottom: 8px;
}

/* Index (dedicated /currency/ page and the [irt_currency_index] shortcode) */
.irt-cc-index h2 {
	margin-top: 28px;
	margin-bottom: 12px;
}

.irt-cc-index-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.irt-cc-index-list a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--brand-tint-50, #FFF3EA);
	border-radius: var(--radius-pill, 50px);
	font-size: 0.9em;
	text-decoration: none;
	color: var(--brand-text, #A83D0A);
}

.irt-cc-index-list a:hover {
	background: var(--brand-tint-100, #FFE3D1);
}

.irt-cc-index-all summary {
	cursor: pointer;
	font-weight: 600;
	margin: 12px 0;
	padding: 8px 0;
}

.irt-cc-index-letter-group h3 {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--ink-muted, #8A8478);
	margin: 18px 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.irt-cc-unavailable {
	color: var(--ink-secondary, #5B5650);
}