/* ==========================================================================
   HungaryRealEstate.hu – Design & Témaválasztó Rendszer (CSS Tokens)
   ========================================================================== */

@layer theme {
/* 1. DUNA LUXURY & GRAFIT (Prémium ébenfekete, arany és high-end minimalizmus) */
[data-theme="duna-luxury"] {
	--c-primary: #18181b;
	--c-primary-600: #09090b;
	--c-primary-50: #f4f4f5;
	--c-accent: #c59b27;
	--c-accent-600: #a17c18;
	--c-text: #09090b;
	--c-muted: #52525b;
	--c-border: #e4e4e7;
	--c-bg: #f8f8fa;
	--c-surface: #ffffff;
	--shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .06);
	--shadow-lg: 0 14px 34px rgba(0, 0, 0, .15);
}
[data-theme="duna-luxury"] .hero {
	background: linear-gradient(135deg, #09090b 0%, #18181b 50%, #27272a 100%);
}
[data-theme="duna-luxury"] .hero-search .segmented input:checked + span {
	background: #18181b;
	color: #fff;
}
[data-theme="duna-luxury"] .site-header {
	border-bottom: 1px solid #e4e4e7;
}

/* 2. BALATONI AZÚR & HOMOK (Friss északi tengerparti, tiszta kék és aranyhomok) */
[data-theme="balaton-azur"] {
	--c-primary: #0284c7;
	--c-primary-600: #0369a1;
	--c-primary-50: #f0f9ff;
	--c-accent: #f59e0b;
	--c-accent-600: #d97706;
	--c-text: #0f172a;
	--c-muted: #475569;
	--c-border: #cbd5e1;
	--c-bg: #f8fafc;
	--c-surface: #ffffff;
	--shadow: 0 1px 3px rgba(2, 132, 199, .06), 0 6px 18px rgba(2, 132, 199, .08);
	--shadow-lg: 0 16px 36px rgba(2, 132, 199, .16);
}
[data-theme="balaton-azur"] .hero {
	background: linear-gradient(135deg, #0369a1 0%, #0284c7 50%, #38bdf8 100%);
}
[data-theme="balaton-azur"] .hero-search .segmented input:checked + span {
	background: #0284c7;
	color: #fff;
}

/* 3. BUDAI POLGÁRI & TERRAKOTTA (Meleg mediterrán terrakotta, polgári hangulat) */
[data-theme="terrakotta"] {
	--c-primary: #9a3412;
	--c-primary-600: #7c2d12;
	--c-primary-50: #fff7ed;
	--c-accent: #15803d;
	--c-accent-600: #166534;
	--c-text: #27140e;
	--c-muted: #6c544c;
	--c-border: #fed7aa;
	--c-bg: #fdfbf7;
	--c-surface: #ffffff;
	--shadow: 0 1px 3px rgba(154, 52, 18, .06), 0 5px 16px rgba(154, 52, 18, .07);
	--shadow-lg: 0 14px 32px rgba(154, 52, 18, .15);
}
[data-theme="terrakotta"] .hero {
	background: linear-gradient(135deg, #7c2d12 0%, #9a3412 55%, #c2410c 100%);
}
[data-theme="terrakotta"] .hero-search .segmented input:checked + span {
	background: #9a3412;
	color: #fff;
}

/* 4. OBSZIDIÁN ÉJ (Modern, kímélő prémium sötét mód – explicit vagy rendszer-szintű sötét módnál) */
[data-theme="midnight-dark"] {
	color-scheme: dark;
	--c-primary: #10b981;
	--c-primary-600: #059669;
	--c-primary-50: #064e3b;
	--c-accent: #f59e0b;
	--c-accent-600: #d97706;
	--c-text: #f1f5f9;
	--c-muted: #94a3b8;
	--c-border: #1e293b;
	--c-bg: #090d0c;
	--c-surface: #111a18;
	--c-warning-bg: #291e0a;
	--c-info-bg: #0c2331;
	--shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .45);
	--shadow-lg: 0 18px 40px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		--c-primary: #10b981;
		--c-primary-600: #059669;
		--c-primary-50: #064e3b;
		--c-accent: #f59e0b;
		--c-accent-600: #d97706;
		--c-text: #f1f5f9;
		--c-muted: #94a3b8;
		--c-border: #1e293b;
		--c-bg: #090d0c;
		--c-surface: #111a18;
		--c-warning-bg: #291e0a;
		--c-info-bg: #0c2331;
		--shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .45);
		--shadow-lg: 0 18px 40px rgba(0, 0, 0, .6);
	}
	:root:not([data-theme]) .site-header { background: #0d1413; border-bottom-color: #1e2d29; }
	:root:not([data-theme]) .hero { background: linear-gradient(135deg, #060a09 0%, #0d1715 50%, #152420 100%); }
	:root:not([data-theme]) .hero-search { background: #111a18; color: #f1f5f9; border: 1px solid #1e2d29; }
	:root:not([data-theme]) .card { background: #111a18; border: 1px solid #1e2d29; }
	:root:not([data-theme]) input[type=text],
	:root:not([data-theme]) input[type=email],
	:root:not([data-theme]) input[type=password],
	:root:not([data-theme]) input[type=tel],
	:root:not([data-theme]) input[type=number],
	:root:not([data-theme]) input[type=search],
	:root:not([data-theme]) select,
	:root:not([data-theme]) textarea { background: #15201d; color: #f1f5f9; border-color: #263834; }
	:root:not([data-theme]) .section-alt { background: #0d1413; border-color: #1e2d29; }
	:root:not([data-theme]) .btn-ghost { background: #15201d; color: #f1f5f9; border-color: #263834; }
	:root:not([data-theme]) .btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
	:root:not([data-theme]) .segmented { background: #090d0c; border-color: #1e2d29; }
	:root:not([data-theme]) .segmented span { color: #94a3b8; }
	:root:not([data-theme]) .segmented input:checked + span { background: #15201d; color: var(--c-primary); }
	:root:not([data-theme]) .site-footer { background: #050807; border-top: 1px solid #1e2d29; }
	:root:not([data-theme]) .card-facts { border-top-color: #1e2d29; }
}
[data-theme="midnight-dark"] .site-header {
	background: #0d1413;
	border-bottom-color: #1e2d29;
}
[data-theme="midnight-dark"] .hero {
	background: linear-gradient(135deg, #060a09 0%, #0d1715 50%, #152420 100%);
}
[data-theme="midnight-dark"] .hero-search {
	background: #111a18;
	color: #f1f5f9;
	border: 1px solid #1e2d29;
}
[data-theme="midnight-dark"] .card {
	background: #111a18;
	border: 1px solid #1e2d29;
}
[data-theme="midnight-dark"] input[type=text],
[data-theme="midnight-dark"] input[type=email],
[data-theme="midnight-dark"] input[type=password],
[data-theme="midnight-dark"] input[type=tel],
[data-theme="midnight-dark"] input[type=number],
[data-theme="midnight-dark"] input[type=search],
[data-theme="midnight-dark"] select,
[data-theme="midnight-dark"] textarea {
	background: #15201d;
	color: #f1f5f9;
	border-color: #263834;
}
[data-theme="midnight-dark"] .section-alt {
	background: #0d1413;
	border-color: #1e2d29;
}
[data-theme="midnight-dark"] .btn-ghost {
	background: #15201d;
	color: #f1f5f9;
	border-color: #263834;
}
[data-theme="midnight-dark"] .btn-ghost:hover {
	border-color: var(--c-primary);
	color: var(--c-primary);
}
[data-theme="midnight-dark"] .segmented {
	background: #090d0c;
	border-color: #1e2d29;
}
[data-theme="midnight-dark"] .segmented span {
	color: #94a3b8;
}
[data-theme="midnight-dark"] .segmented input:checked + span {
	background: #15201d;
	color: var(--c-primary);
}
[data-theme="midnight-dark"] .site-footer {
	background: #050807;
	border-top: 1px solid #1e2d29;
}
[data-theme="midnight-dark"] .card-facts {
	border-top-color: #1e2d29;
}
}

@layer components {
/* ==========================================================================
   Design Választó Lebegő Gomb (Floating Trigger)
   ========================================================================== */
.theme-trigger-btn {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--c-surface);
	color: var(--c-text);
	border: 1px solid var(--c-border);
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.88rem;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, border-color 0.2s;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.theme-trigger-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	border-color: var(--c-primary);
}
.theme-trigger-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--c-accent);
}
.theme-trigger-badge {
	font-size: 0.72rem;
	background: var(--c-primary-50);
	color: var(--c-primary);
	padding: 2px 7px;
	border-radius: 999px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Design Választó Modális (<dialog closedby="any"> + Top-Layer Animációk)
   ========================================================================== */
dialog.theme-modal {
	background: var(--c-surface);
	color: var(--c-text);
	width: calc(100% - 24px);
	max-width: 580px;
	border-radius: 20px;
	border: 1px solid var(--c-border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	padding: 0;
	max-height: 90vh;
	max-height: 90dvh;
	overflow-y: auto;
	opacity: 0;
	transform: translateY(20px) scale(0.96);
	transition:
		opacity 0.24s ease,
		transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
		overlay 0.24s allow-discrete,
		display 0.24s allow-discrete;
}

.theme-modal-surface {
	padding: 24px;
}

dialog.theme-modal::backdrop {
	background-color: rgba(13, 20, 18, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	transition:
		background-color 0.24s ease,
		backdrop-filter 0.24s ease,
		overlay 0.24s allow-discrete,
		display 0.24s allow-discrete;
}

:is(dialog.theme-modal[open]):where(:not([data-closing])) {
	opacity: 1;
	transform: translateY(0) scale(1);
}

:is(dialog.theme-modal[open]):where(:not([data-closing]))::backdrop {
	background-color: rgba(13, 20, 18, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

@starting-style {
	:is(dialog.theme-modal[open]):where(:not([data-closing])) {
		opacity: 0;
		transform: translateY(20px) scale(0.96);
	}
	:is(dialog.theme-modal[open]):where(:not([data-closing]))::backdrop {
		background-color: rgba(13, 20, 18, 0);
		backdrop-filter: blur(0px);
		-webkit-backdrop-filter: blur(0px);
	}
}

.theme-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 16px;
	margin-bottom: 20px;
}
.theme-modal-title {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.theme-modal-close {
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--c-muted);
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}
.theme-modal-close:hover {
	background: var(--c-border);
	color: var(--c-text);
}

.theme-options-grid {
	display: grid;
	gap: 12px;
	margin-bottom: 20px;
}

.theme-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	border: 2px solid var(--c-border);
	border-radius: var(--radius);
	background: var(--c-surface);
	cursor: pointer;
	text-align: left;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
	font: inherit;
	color: inherit;
}
.theme-card:hover {
	border-color: var(--c-primary);
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.theme-card.is-active {
	border-color: var(--c-primary);
	background: var(--c-primary-50);
	box-shadow: 0 0 0 1px var(--c-primary);
}

.theme-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}
.theme-name {
	font-weight: 700;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 8px;
}
.theme-desc {
	font-size: 0.82rem;
	color: var(--c-muted);
	line-height: 1.35;
}

.theme-swatches {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.theme-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.theme-check-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--c-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.6);
	transition: all 0.18s ease;
	flex-shrink: 0;
}
.theme-card.is-active .theme-check-icon {
	opacity: 1;
	transform: scale(1);
}

.theme-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--c-border);
	font-size: 0.84rem;
	color: var(--c-muted);
}

@media (max-width: 640px) {
	.theme-trigger-btn {
		bottom: 16px;
		right: 16px;
		padding: 8px 14px;
		font-size: 0.82rem;
	}
	.theme-trigger-badge {
		display: none;
	}
}
}