/**
 * Currency Calculator — frontend styles
 *
 * Правило: цветовые переменные устанавливаются через wp_head из выбранного пресета.
 * В :root здесь хранятся ТОЛЬКО структурные переменные (радиусы, переходы).
 * Все цветовые var() имеют fallback из дефолтного пресета cosmic.
 */

:root {
	/* Только структурные — не зависят от пресета */
	--cc-radius: 16px;
	--cc-radius-sm: 10px;
	--cc-radius-pill: 999px;
	--cc-transition: 0.25s ease;
	--cc-font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/* ══════════════════════════════════════════════════════════════════════
   1. ВВОДНОЕ ОПИСАНИЕ (над калькулятором, без пресета — самостоятельный стиль)
   ══════════════════════════════════════════════════════════════════════ */
.cc-intro {
	max-width: 800px;
	margin: 0 auto 1.25rem;
	padding: 0 20px;
	font-family: var(--cc-font-family);
	font-size: 0.95rem;
	line-height: 1.55;
	color: #333;
}
.cc-intro p { margin: 0 0 0.5rem; }
.cc-intro p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════
   2. ОБЁРТКА КАЛЬКУЛЯТОРА
   ══════════════════════════════════════════════════════════════════════ */
.cc-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(18px, 3vw, 28px);
	background: var(--cc-bg, linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #16213e 100%));
	border-radius: var(--cc-radius);
	box-shadow: var(--cc-shadow, 0 8px 32px rgba(0, 0, 0, 0.3));
	color: var(--cc-text, #f0f0f5);
	font-family: var(--cc-font-family);
	box-sizing: border-box;
}
.cc-wrapper *, .cc-wrapper *::before, .cc-wrapper *::after {
	box-sizing: border-box;
}

/* Заголовок и дата курса */
.cc-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.cc-title {
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	font-weight: 700;
	color: var(--cc-text, #f0f0f5);
	letter-spacing: -0.01em;
}
.cc-meta {
	font-size: 0.82rem;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cc-meta__label { opacity: 0.85; }
.cc-meta__date {
	font-weight: 600;
	color: var(--cc-text, #f0f0f5);
	background: var(--cc-surface, rgba(255,255,255,0.08));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	padding: 2px 8px;
	border-radius: var(--cc-radius-pill);
}
.cc-meta--error {
	color: var(--cc-warning, #ff6b6b);
	font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   3. КОНВЕРТЕР — ДВЕ КОЛОНКИ + КНОПКА СВАПА
   ══════════════════════════════════════════════════════════════════════ */
.cc-converter {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: end;
	gap: 12px;
}

.cc-side { min-width: 0; }
.cc-side__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.cc-input-group {
	background: var(--cc-surface, rgba(255,255,255,0.08));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
	transition: border-color var(--cc-transition), box-shadow var(--cc-transition), background var(--cc-transition);
}
.cc-input-group:focus-within {
	border-color: var(--cc-accent, #00d4aa);
	box-shadow: 0 0 0 3px var(--cc-accent-soft, rgba(0,212,170,0.2));
	background: var(--cc-surface-hover, rgba(255,255,255,0.12));
}

.cc-amount {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--cc-text, #f0f0f5);
	font-size: clamp(1.25rem, 3.2vw, 1.9rem);
	font-weight: 700;
	padding: 10px 14px 6px;
	font-family: inherit;
	outline: none;
	letter-spacing: -0.01em;
	min-width: 0;
}
.cc-amount::placeholder { color: var(--cc-text-muted, rgba(255,255,255,0.65)); }

.cc-currency {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	border-top: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	background-color: transparent;
	/* Чёрно-белая стрелка: один SVG-шеврон, цвет наследуется от color
	   через currentColor (т.е. всегда совпадает с цветом текста темы). */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: right 12px center;
	background-size: 10px 6px;
	background-repeat: no-repeat;
	padding: 10px 32px 10px 14px;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--cc-text, #f0f0f5);
	cursor: pointer;
	width: 100%;
	outline: none;
	transition: background-color var(--cc-transition);
}
.cc-currency:hover { background-color: var(--cc-surface-hover, rgba(255,255,255,0.12)); }
.cc-currency:focus { background-color: var(--cc-surface-hover, rgba(255,255,255,0.12)); }
/* Тёмная тема option — невозможно стилизовать в Safari, но для Chrome/Firefox поможет */
.cc-currency option {
	background: #1a1a3e;
	color: #f0f0f5;
}

.cc-rate-line {
	font-size: 0.75rem;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	margin-top: 6px;
	min-height: 1.1em;
	line-height: 1.35;
}
.cc-rate-line .cc-trend-up {
	color: #69ff47;
	font-weight: 700;
	margin-left: 4px;
}
.cc-rate-line .cc-trend-down {
	color: var(--cc-warning, #ff6b6b);
	font-weight: 700;
	margin-left: 4px;
}
.cc-rate-line .cc-trend-flat {
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	margin-left: 4px;
}

/* Кнопка свапа между колонками */
.cc-swap {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	background: var(--cc-surface, rgba(255,255,255,0.08));
	color: var(--cc-accent, #00d4aa);
	width: 44px;
	height: 44px;
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-bottom: 18px;
	transition: transform var(--cc-transition), background var(--cc-transition), border-color var(--cc-transition);
}
.cc-swap:hover {
	background: var(--cc-accent-soft, rgba(0,212,170,0.2));
	border-color: var(--cc-accent, #00d4aa);
	transform: rotate(180deg);
}
.cc-swap:focus-visible {
	outline: 2px solid var(--cc-accent, #00d4aa);
	outline-offset: 2px;
}
.cc-swap:active { transform: rotate(180deg) scale(0.95); }

/* ══════════════════════════════════════════════════════════════════════
   4. СТРОКА РЕЗУЛЬТАТА
   ══════════════════════════════════════════════════════════════════════ */
.cc-result {
	margin-top: 16px;
	padding: 12px 16px;
	background: var(--cc-accent-soft, rgba(0,212,170,0.2));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	color: var(--cc-text, #f0f0f5);
	font-size: 0.95rem;
	line-height: 1.4;
	min-height: 2.8em;
	display: flex;
	align-items: center;
}
.cc-result b {
	color: var(--cc-accent, #00d4aa);
	font-weight: 700;
	margin: 0 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   5. БЫСТРЫЕ СУММЫ (ЧИПСЫ)
   ══════════════════════════════════════════════════════════════════════ */
.cc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
}
.cc-chips__label {
	font-size: 0.78rem;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	margin-right: 4px;
}
.cc-chip {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	background: var(--cc-surface, rgba(255,255,255,0.08));
	color: var(--cc-text, #f0f0f5);
	padding: 5px 12px;
	border-radius: var(--cc-radius-pill);
	font-size: 0.82rem;
	font-weight: 500;
	cursor: pointer;
	font-family: inherit;
	transition: background var(--cc-transition), color var(--cc-transition), border-color var(--cc-transition), transform var(--cc-transition);
}
.cc-chip:hover {
	background: var(--cc-accent-soft, rgba(0,212,170,0.2));
	color: var(--cc-accent, #00d4aa);
	border-color: var(--cc-accent, #00d4aa);
}
.cc-chip:active { transform: scale(0.96); }

/* ══════════════════════════════════════════════════════════════════════
   6. ГРАФИК ДИНАМИКИ КУРСА
   ══════════════════════════════════════════════════════════════════════ */
.cc-chart-box {
	margin-top: 20px;
	background: var(--cc-surface, rgba(255,255,255,0.08));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	padding: 14px 16px 12px;
}
.cc-chart-box__header {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.cc-chart-box__title {
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--cc-text, #f0f0f5);
}
.cc-chart-box__title [data-cc-role="chart-currency-label"] {
	color: var(--cc-accent, #00d4aa);
	font-weight: 700;
	padding: 0 2px;
}
.cc-chart-box__periods {
	display: inline-flex;
	background: var(--cc-bg, rgba(0,0,0,0.3));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-pill);
	padding: 2px;
	gap: 2px;
}
.cc-chart-period {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	padding: 5px 12px;
	font-size: 0.8rem;
	font-family: inherit;
	font-weight: 500;
	border-radius: var(--cc-radius-pill);
	cursor: pointer;
	transition: background-color var(--cc-transition), color var(--cc-transition);
	line-height: 1;
}
.cc-chart-period:hover { color: var(--cc-text, #f0f0f5); }
.cc-chart-period--active {
	background: var(--cc-accent, #00d4aa);
	color: var(--cc-bg, #0a0a1a);
}
.cc-chart-period--active:hover { color: var(--cc-bg, #0a0a1a); }

.cc-chart-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.cc-chart-stats:empty { display: none; }
.cc-chart-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 10px;
	background: var(--cc-bg, rgba(0,0,0,0.2));
	border-radius: var(--cc-radius-sm);
}
.cc-chart-stat__label {
	font-size: 0.7rem;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.cc-chart-stat__value {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cc-text, #f0f0f5);
	font-variant-numeric: tabular-nums;
}
.cc-chart-stat--trend.cc-chart-trend--up   .cc-chart-stat__value { color: #69ff47; }
.cc-chart-stat--trend.cc-chart-trend--down .cc-chart-stat__value { color: var(--cc-warning, #ff6b6b); }
.cc-chart-stat--trend.cc-chart-trend--flat .cc-chart-stat__value { color: var(--cc-text-muted, rgba(255,255,255,0.65)); }

.cc-chart-canvas {
	width: 100%;
	overflow: hidden;
	border-radius: var(--cc-radius-sm);
}
.cc-chart-svg {
	display: block;
	width: 100%;
	height: auto;
	/* currentColor используется stroke'ом линии и fill'ом маркеров */
	color: var(--cc-accent, #00d4aa);
}
.cc-chart-svg.cc-chart-line--up   { color: #69ff47; }
.cc-chart-svg.cc-chart-line--down { color: var(--cc-warning, #ff6b6b); }
.cc-chart-svg.cc-chart-line--flat { color: var(--cc-text-muted, rgba(255,255,255,0.65)); }

.cc-chart-grid {
	stroke: var(--cc-border, rgba(255,255,255,0.15));
	stroke-width: 1;
	stroke-dasharray: 2 4;
	opacity: 0.6;
}
.cc-chart-axis-label {
	fill: var(--cc-text-muted, rgba(255,255,255,0.65));
	font-size: 10px;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
}
.cc-chart-dot {
	fill: currentColor;
	stroke: var(--cc-bg, #0a0a1a);
	stroke-width: 1.5;
}
.cc-chart-empty {
	padding: 24px 12px;
	text-align: center;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	font-size: 0.85rem;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.cc-chart-box__header { flex-direction: column; align-items: stretch; }
	.cc-chart-box__periods { align-self: flex-start; }
	.cc-chart-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════
   7. ТАБЛИЦА КРОСС-КУРСОВ
   ══════════════════════════════════════════════════════════════════════ */
.cc-rates-box {
	margin-top: 20px;
	background: var(--cc-surface, rgba(255,255,255,0.08));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	padding: 14px 16px;
}
.cc-rates-box__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}
.cc-rates-box__title {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--cc-text, #f0f0f5);
}
.cc-rates-box__hint {
	font-size: 0.72rem;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
}

.cc-rates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 8px;
}
.cc-rates-grid__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: var(--cc-surface-hover, rgba(255,255,255,0.12));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	font-size: 0.82rem;
	line-height: 1.3;
}
.cc-rates-grid__item .cc-rates-code {
	font-weight: 700;
	color: var(--cc-text, #f0f0f5);
}
.cc-rates-grid__item .cc-rates-flag {
	margin-right: 4px;
	font-size: 1em;
}
.cc-rates-grid__item .cc-rates-value {
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	font-variant-numeric: tabular-nums;
}
.cc-rates-grid__item .cc-rates-value b {
	color: var(--cc-text, #f0f0f5);
	font-weight: 700;
}

/* Пустое состояние */
.cc-empty {
	padding: 18px;
	background: var(--cc-surface, rgba(255,255,255,0.08));
	border: 1px solid var(--cc-border, rgba(255,255,255,0.15));
	border-radius: var(--cc-radius-sm);
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
	font-size: 0.92rem;
	line-height: 1.5;
	text-align: center;
}
.cc-empty p { margin: 0; }

/* ══════════════════════════════════════════════════════════════════════
   7. ДИСКЛАЙМЕР ВНУТРИ ОБЁРТКИ (мелкий, приглушённый)
   ══════════════════════════════════════════════════════════════════════ */
.cc-disclaimer-inline {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--cc-text-muted, rgba(255,255,255,0.65));
}
.cc-disclaimer-inline p { margin: 0 0 0.35rem; }
.cc-disclaimer-inline p:last-child { margin-bottom: 0; }

/* Для светлых пресетов разделительная линия должна быть тёмной */
.cc-wrapper[style*="--cc-text: #1"], /* примерная проверка — светлые пресеты имеют тёмный текст */
.cc-wrapper[style*="--cc-text: #2"] {
	/* без эффекта — оставим логику на универсальный разделитель */
}

/* ══════════════════════════════════════════════════════════════════════
   8. БЛОКИ ВНЕ ОБЁРТКИ — ИНСТРУКЦИЯ, НАУЧНОЕ, FAQ
   ══════════════════════════════════════════════════════════════════════ */
.cc-plain {
	max-width: 800px;
	margin: 2rem auto 0;
	padding: 0 20px;
	font-family: var(--cc-font-family);
}
.cc-plain .cc-disclaimer {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e0e0e0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #333;
}
.cc-plain .cc-disclaimer-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1d2327;
	margin: 0 0 1rem;
	letter-spacing: -0.01em;
}
.cc-plain .cc-disclaimer-text {
	margin: 0;
	font-size: 1rem;
	font-weight: normal;
	color: #333;
	line-height: 1.55;
}
.cc-plain .cc-disclaimer-text p { margin: 0 0 0.6rem; }
.cc-plain .cc-disclaimer-text p:last-child { margin-bottom: 0; }
.cc-plain .cc-disclaimer-text code {
	background: #f5f5f7;
	border: 1px solid #e5e5e8;
	border-radius: 3px;
	padding: 1px 5px;
	font-size: 0.9em;
	font-family: Menlo, Consolas, "Courier New", monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   9. FAQ — АККОРДЕОН
   ══════════════════════════════════════════════════════════════════════ */
.cc-plain .cc-faq { margin-top: 1rem; }

.cc-plain .cc-faq-item {
	margin-bottom: 0.5rem;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 0.2s;
}
.cc-plain .cc-faq-item.cc-faq-item--expanded {
	border-color: #c0c4cb;
}

.cc-plain .cc-faq-ask {
	width: 100%;
	display: block;
	padding: 0.5rem 0.75rem 0.5rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	color: #333 !important;
	text-align: left;
	background: rgba(0, 0, 0, 0.04) !important;
	background-color: rgba(0, 0, 0, 0.04) !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
	position: relative;
	font-family: inherit;
	line-height: 1.4;
	margin: 0;
	outline: none;
}
.cc-plain .cc-faq-ask:hover,
.cc-plain .cc-faq-ask:focus,
.cc-plain .cc-faq-ask:active {
	background: rgba(0, 0, 0, 0.07) !important;
	background-color: rgba(0, 0, 0, 0.07) !important;
	color: #333 !important;
	box-shadow: none !important;
	outline: none;
}

.cc-plain .cc-faq-ask::before {
	content: '\25BA';  /* ► U+25BA BLACK RIGHT-POINTING POINTER — не emoji, всегда рендерится монохромно */
	position: absolute;
	left: 0.6rem;
	font-family: Arial, Helvetica, sans-serif;  /* не-emoji шрифт, чтобы браузер не подменил на цветной глиф */
	color: #333 !important;
	transition: transform 0.2s;
}
.cc-plain .cc-faq-item.cc-faq-item--expanded .cc-faq-ask::before {
	transform: rotate(90deg);
}

.cc-plain .cc-faq-answer-wrap {
	display: none;
	padding: 0.9rem 1.1rem;
	background: #fff;
	border-top: 1px solid #e0e0e0;
}
.cc-plain .cc-faq-item.cc-faq-item--expanded .cc-faq-answer-wrap {
	display: block;
}

.cc-plain .cc-faq-answer-text {
	margin: 0;
	font-size: 1rem;
	font-weight: normal;
	color: #333;
	line-height: 1.55;
}
.cc-plain .cc-faq-answer-text p { margin: 0 0 0.55rem; }
.cc-plain .cc-faq-answer-text p:last-child { margin-bottom: 0; }
.cc-plain .cc-faq-answer-text code {
	background: #f5f5f7;
	border: 1px solid #e5e5e8;
	border-radius: 3px;
	padding: 1px 5px;
	font-size: 0.9em;
	font-family: Menlo, Consolas, "Courier New", monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   10. АДАПТИВ
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
	.cc-converter {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.cc-swap {
		order: 2;
		margin: 4px auto 8px;
		transform: rotate(90deg);
	}
	.cc-swap:hover { transform: rotate(270deg); }
	.cc-swap:active { transform: rotate(270deg) scale(0.95); }
	.cc-side--to { order: 3; }
	.cc-side--from { order: 1; }
	.cc-amount { font-size: 1.35rem; }
	.cc-rates-grid {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	.cc-header { gap: 6px; }
}