/**
 * Gold Rate Calculator Pro - Full-width premium finance layout
 * Kadence compatible. All styles scoped under .grcp-wrap to avoid theme conflicts.
 */

/* Full-width: break out of Kadence/content width; use viewport width */
.grcp-wrap {
	--grcp-gold: #d4af37;
	--grcp-gold-dark: #b8941f;
	--grcp-gold-light: #e8c84a;
	--grcp-white: #ffffff;
	--grcp-bg: #f7f8fa;
	--grcp-text: #1a1d21;
	--grcp-muted: #5c6370;
	--grcp-border: #e2e6eb;
	--grcp-shadow: 0 2px 16px rgba(0,0,0,0.06);
	--grcp-shadow-hover: 0 8px 28px rgba(212,175,55,0.14);
	--grcp-radius: 14px;
	--grcp-radius-sm: 10px;
	--grcp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
	font-family: var(--grcp-font);
	background: var(--grcp-bg);
	color: var(--grcp-text);
	padding: 2rem 0 4rem;
}

[data-theme="dark"] .grcp-wrap {
	--grcp-white: #1c1e22;
	--grcp-bg: #0e1012;
	--grcp-text: #e8eaed;
	--grcp-muted: #9aa0a6;
	--grcp-border: #2d3238;
	--grcp-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

.grcp-wrap *,
.grcp-wrap *::before,
.grcp-wrap *::after { box-sizing: border-box; }

.grcp-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1.5rem;
	position: relative;
}

/* Dark mode toggle */
.grcp-wrap .grcp-dark-toggle {
	position: absolute;
	top: 0.5rem;
	right: 1.5rem;
	width: 42px;
	height: 42px;
	border: 1px solid var(--grcp-border);
	border-radius: 50%;
	background: var(--grcp-white);
	cursor: pointer;
	z-index: 10;
	box-shadow: var(--grcp-shadow);
}
.grcp-wrap .grcp-dark-toggle:hover { border-color: var(--grcp-gold); }
.grcp-wrap .grcp-dark-toggle::before { content: '☀'; font-size: 1.15rem; }
[data-theme="dark"] .grcp-wrap .grcp-dark-toggle::before { content: '☾'; }

/* Stat cards - responsive grid */
.grcp-wrap .grcp-stat-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
	.grcp-wrap .grcp-stat-cards { grid-template-columns: repeat(4, 1fr); }
}
.grcp-wrap .grcp-stat {
	background: var(--grcp-white);
	border: 1px solid var(--grcp-border);
	border-radius: var(--grcp-radius-sm);
	padding: 1.1rem;
	box-shadow: var(--grcp-shadow);
}
.grcp-wrap .grcp-stat-label { display: block; font-size: 0.75rem; color: var(--grcp-muted); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.03em; }
.grcp-wrap .grcp-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--grcp-gold); }
@media (min-width: 640px) { .grcp-wrap .grcp-stat-value { font-size: 1.15rem; } }

/* Price change indicator */
.grcp-wrap .grcp-price-change {
	text-align: center;
	padding: 0.6rem 1rem;
	border-radius: var(--grcp-radius-sm);
	margin-bottom: 1.25rem;
	font-weight: 600;
	font-size: 0.95rem;
}
.grcp-wrap .grcp-price-change.up { background: #d4edda; color: #155724; }
.grcp-wrap .grcp-price-change.down { background: #f8d7da; color: #721c24; }

/* Calculator card */
.grcp-wrap .grcp-card {
	background: var(--grcp-white);
	border-radius: var(--grcp-radius);
	box-shadow: var(--grcp-shadow);
	padding: 2rem;
	border: 1px solid var(--grcp-border);
	transition: box-shadow 0.2s ease;
}
.grcp-wrap .grcp-card:hover { box-shadow: var(--grcp-shadow-hover); }

.grcp-wrap .grcp-loading { text-align: center; padding: 3rem 1.5rem; }
.grcp-wrap .grcp-spinner {
	display: inline-block;
	width: 44px;
	height: 44px;
	border: 3px solid var(--grcp-border);
	border-top-color: var(--grcp-gold);
	border-radius: 50%;
	animation: grcp-spin 0.7s linear infinite;
}
@keyframes grcp-spin { to { transform: rotate(360deg); } }
.grcp-wrap .grcp-loading p { margin-top: 1rem; color: var(--grcp-muted); }

.grcp-wrap .grcp-error {
	padding: 1rem 1.25rem;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--grcp-radius-sm);
	color: #991b1b;
}

/* Form - clean typography */
.grcp-wrap .grcp-form { display: flex; flex-direction: column; gap: 1.5rem; }
.grcp-wrap .grcp-field { display: flex; flex-direction: column; gap: 0.5rem; }
.grcp-wrap .grcp-field label { font-size: 0.875rem; font-weight: 600; color: var(--grcp-text); }
.grcp-wrap .grcp-field select,
.grcp-wrap .grcp-field input {
	padding: 0.9rem 1.2rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1px solid var(--grcp-border);
	border-radius: var(--grcp-radius-sm);
	background: var(--grcp-white);
	color: var(--grcp-text);
}
.grcp-wrap .grcp-field select option {
	background: #fff;
	color: #1a1d21;
}
[data-theme="dark"] .grcp-wrap .grcp-field select option {
	background: #1c1e22;
	color: #e8eaed;
}
.grcp-wrap .grcp-field select:focus,
.grcp-wrap .grcp-field input:focus {
	outline: none;
	border-color: var(--grcp-gold);
	box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
}
.grcp-wrap .grcp-field select:disabled,
.grcp-wrap .grcp-field input:disabled { opacity: 0.7; cursor: not-allowed; }
@media (max-width: 640px) {
	.grcp-wrap .grcp-field select,
	.grcp-wrap .grcp-field input { min-height: 48px; }
}

.grcp-wrap .grcp-notice {
	font-size: 0.85rem;
	color: var(--grcp-gold-dark);
	background: #fffbf0;
	padding: 0.75rem 1rem;
	border-radius: var(--grcp-radius-sm);
	border-left: 4px solid var(--grcp-gold);
}
[data-theme="dark"] .grcp-wrap .grcp-notice { background: rgba(212,175,55,0.08); }

.grcp-wrap .grcp-btn-calc {
	padding: 1rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--grcp-gold);
	border: none;
	border-radius: var(--grcp-radius-sm);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.grcp-wrap .grcp-btn-calc:hover:not(:disabled) { background: var(--grcp-gold-dark); transform: translateY(-1px); }
.grcp-wrap .grcp-btn-calc:disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 640px) {
	.grcp-wrap .grcp-btn-calc { min-height: 52px; }
}

/* Results */
.grcp-wrap .grcp-results { margin-top: 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--grcp-border); }
.grcp-wrap .grcp-result-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; }
.grcp-wrap .grcp-result-label { font-size: 0.9rem; color: var(--grcp-muted); }
.grcp-wrap .grcp-result-val { font-size: 1.1rem; font-weight: 600; color: var(--grcp-gold-dark); }
.grcp-wrap .grcp-total-box {
	background: linear-gradient(135deg, #fffbf5 0%, #fff9ed 100%);
	border: 1px solid rgba(212,175,55,0.25);
	border-radius: var(--grcp-radius-sm);
	padding: 1.5rem;
	margin-top: 1rem;
}
[data-theme="dark"] .grcp-wrap .grcp-total-box {
	background: linear-gradient(135deg, #2a2620 0%, #1f1b18 100%);
}
.grcp-wrap .grcp-total-box .grcp-result-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.grcp-wrap .grcp-total { font-size: 2rem; font-weight: 800; color: var(--grcp-gold); letter-spacing: -0.02em; display: block; margin: 0.25rem 0 0.75rem; }
.grcp-wrap .grcp-share { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.grcp-wrap .grcp-btn-action {
	padding: 0.45rem 0.9rem;
	font-size: 0.85rem;
	background: var(--grcp-gold);
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background 0.2s;
}
.grcp-wrap .grcp-btn-action:hover { background: var(--grcp-gold-dark); color: #fff; }
.grcp-wrap .grcp-total.animate { animation: grcp-pop 0.4s ease; }
@keyframes grcp-pop {
	0% { transform: scale(0.98); opacity: 0.8; }
	50% { transform: scale(1.02); }
	100% { transform: scale(1); opacity: 1; }
}

.grcp-wrap .grcp-updated { font-size: 0.8rem; color: var(--grcp-muted); text-align: center; margin-top: 1.5rem; }

/* Localized block (from page content) */
.grcp-wrap + .grcp-localized,
.grcp-localized { margin-top: 2rem; padding: 1.5rem; border-top: 1px solid var(--grcp-border); }