/* =========================================================
   Contact Section — Modern, theme-aware
   ========================================================= */

.section-contact {
	/* Theme accent — populated by teplo_custom_inline_style via --teplo-primary */
	--ci-accent:       var(--teplo-primary, #03c4eb);

	/* Light theme defaults */
	--ci-bg:           #f0f4f8;
	--ci-card-bg:      #ffffff;
	--ci-border:       rgba(0,0,0,.07);
	--ci-shadow:       0 2px 20px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
	--ci-shadow-h:     0 8px 40px rgba(0,0,0,.13);
	--ci-text:         #1a2535;
	--ci-muted:        #5a7184;
	--ci-label:        #8fa3b8;
	--ci-input-bg:     #f7fafc;
	--ci-input-border: #dce8f0;

	background: var(--ci-bg);
	position: relative;
	overflow: hidden;
}

/* Dark mode — body class set by theme JS, or system preference */
body.dark-theme .section-contact,
body.is-dark .section-contact,
[data-theme="dark"] .section-contact {
	--ci-bg:           #0f1621;
	--ci-card-bg:      #1a2535;
	--ci-border:       rgba(255,255,255,.07);
	--ci-shadow:       0 2px 20px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.3);
	--ci-shadow-h:     0 8px 40px rgba(0,0,0,.5);
	--ci-text:         #e8f0f8;
	--ci-muted:        #8fa8c0;
	--ci-label:        #5a7a95;
	--ci-input-bg:     #111d2e;
	--ci-input-border: #243347;
}

/* Decorative glows */
.section-contact::before {
	content: '';
	position: absolute;
	top: -120px; right: -120px;
	width: 480px; height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle,
		color-mix(in srgb, var(--ci-accent) 12%, transparent) 0%,
		transparent 70%
	);
	pointer-events: none;
}

/* ── Layout ── */
.contact-inner-wrap { position: relative; z-index: 1; }

.contact-inner-grid { display: grid; gap: 32px; align-items: start; }

/* WITH form */
.contact-inner-grid.ci-has-form {
	grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 960px) {
	.contact-inner-grid.ci-has-form { grid-template-columns: 1fr; }
}

/* WITHOUT form — cards fill width */
.contact-inner-grid.ci-no-form { grid-template-columns: 1fr; }
.ci-no-form .contact-info-panel {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.ci-no-form .ci-info-intro { grid-column: 1 / -1; }
@media (max-width: 580px) {
	.ci-no-form .contact-info-panel { grid-template-columns: 1fr; }
}

/* ── Form panel ── */
.contact-form-panel {
	background: var(--ci-card-bg);
	border-radius: 18px;
	box-shadow: var(--ci-shadow);
	border: 1px solid var(--ci-border);
	padding: 44px 40px;
	position: relative;
	overflow: hidden;
}
.contact-form-panel::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--ci-accent),
		color-mix(in srgb, var(--ci-accent) 50%, #4f8fff)
	);
}

/* Field labels */
.contact-form-panel label,
.contact-form-panel .wpcf7-form label,
.contact-form-panel .wpforms-field label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--ci-label);
	margin-bottom: 7px;
	display: block;
}
/* Inputs */
.contact-form-panel input[type="text"],
.contact-form-panel input[type="email"],
.contact-form-panel input[type="tel"],
.contact-form-panel input[type="url"],
.contact-form-panel textarea,
.contact-form-panel select {
	width: 100%;
	border: 1.5px solid var(--ci-input-border);
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 15px;
	color: var(--ci-text);
	background: var(--ci-input-bg);
	transition: border-color .2s, box-shadow .2s;
	outline: none;
	box-sizing: border-box;
}
.contact-form-panel input:focus,
.contact-form-panel textarea:focus {
	border-color: var(--ci-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ci-accent) 18%, transparent);
	background: var(--ci-card-bg);
}
.contact-form-panel textarea { min-height: 130px; resize: vertical; }

/* Submit button */
.contact-form-panel input[type="submit"],
.contact-form-panel button[type="submit"],
.contact-form-panel .wpcf7-submit {
	background: var(--ci-accent) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 14px 36px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	cursor: pointer !important;
	transition: opacity .2s, transform .15s !important;
	display: inline-block !important;
}
.contact-form-panel input[type="submit"]:hover,
.contact-form-panel button[type="submit"]:hover,
.contact-form-panel .wpcf7-submit:hover {
	opacity: .87 !important;
	transform: translateY(-1px) !important;
}

/* Placeholder when no form shortcode */
.ci-form-placeholder {
	text-align: center;
	padding: 40px 20px;
	color: var(--ci-muted);
}
.ci-form-placeholder-icon {
	width: 64px; height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--ci-accent) 12%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	color: var(--ci-accent);
}
.ci-form-placeholder p { font-size: 14px; line-height: 1.7; margin: 0; }
.ci-form-placeholder a { color: var(--ci-accent); text-decoration: underline; }

/* ── Info panel ── */
.contact-info-panel { color: var(--ci-text); }

.ci-info-intro {
	margin-bottom: 20px;
	color: var(--ci-muted);
	font-size: 15px;
	line-height: 1.75;
}
.ci-info-intro p { margin: 0; }

/* Stacked layout when form is visible */
.ci-has-form .contact-info-panel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Contact card */
.ci-card {
	background: var(--ci-card-bg);
	border: 1px solid var(--ci-border);
	border-radius: 14px;
	box-shadow: var(--ci-shadow);
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	text-decoration: none !important;
	color: var(--ci-text) !important;
	transition: box-shadow .25s, transform .2s, border-color .2s;
	position: relative;
	overflow: hidden;
}
.ci-card:hover {
	box-shadow: var(--ci-shadow-h);
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--ci-accent) 35%, transparent);
}
/* Left accent line on hover */
.ci-card::after {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--ci-accent);
	border-radius: 3px 0 0 3px;
	opacity: 0;
	transition: opacity .2s;
}
.ci-card:hover::after { opacity: 1; }

/* Icon container */
.ci-card-icon {
	flex-shrink: 0;
	width: 48px; height: 48px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ci-accent) 11%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--ci-accent);
	transition: background .2s, color .2s;
}
.ci-card:hover .ci-card-icon {
	background: var(--ci-accent);
	color: #fff;
}

/* Image icons */
.ci-card-icon img {
	width: 26px; height: 26px;
	object-fit: contain;
	border-radius: 4px;
	transition: filter .2s;
}
.ci-card:hover .ci-card-icon img {
	filter: brightness(0) invert(1);
}

/* FA icon normalisation — FA4 classes lack prefix, FA6 needs "fa-solid" */
.ci-card-icon .fa,
.ci-card-icon [class*="fa-"] {
	display: inline-block;
	width: 1em;
	text-align: center;
}

/* Text */
.ci-card-body { flex: 1; min-width: 0; }
.ci-card-label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ci-label);
	margin-bottom: 3px;
	line-height: 1;
}
.ci-card-value {
	font-size: 15px;
	color: var(--ci-text);
	font-weight: 500;
	line-height: 1.55;
	word-break: break-word;
}
.ci-card-value a { color: inherit !important; text-decoration: none !important; }
.ci-card-value a:hover { color: var(--ci-accent) !important; }

/* ── Entrance animations ── */
@keyframes ci-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none;             }
}
.contact-form-panel { animation: ci-rise .5s ease both; }
.ci-card            { animation: ci-rise .5s ease both; }
.ci-card:nth-child(1)  { animation-delay: .05s; }
.ci-card:nth-child(2)  { animation-delay: .12s; }
.ci-card:nth-child(3)  { animation-delay: .19s; }
.ci-card:nth-child(4)  { animation-delay: .26s; }
.ci-card:nth-child(5)  { animation-delay: .33s; }
.ci-card:nth-child(6)  { animation-delay: .40s; }
.ci-card:nth-child(7)  { animation-delay: .47s; }
.ci-card:nth-child(8)  { animation-delay: .54s; }
.ci-card:nth-child(9)  { animation-delay: .61s; }
.ci-card:nth-child(10) { animation-delay: .68s; }