/**
 * Contact Page Styles — Moto Deal Fribourg
 * Loaded conditionally on the contact page (/contact).
 */

/* ==========================================================================
   Contact Page
   ========================================================================== */

.mdf-page-contact {
	overflow-x: hidden;
	width: 100%;
}

.mdf-page-contact .mdf-container {
	padding-left: var(--space-md) !important;
	padding-right: var(--space-md) !important;
	box-sizing: border-box;
	overflow: hidden;
}

/* Ensure form fields don't exceed container */
.mdf-page-contact input,
.mdf-page-contact textarea,
.mdf-page-contact select {
	box-sizing: border-box;
	max-width: 100%;
}

@media (min-width: 48em) {
	.mdf-page-contact .mdf-container {
		padding-left: var(--space-lg);
		padding-right: var(--space-lg);
	}
}

/* --- Two-column grid --- */
.mdf-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

@media (min-width: 64em) {
	.mdf-contact-grid {
		grid-template-columns: 1fr 420px;
	}
}

/* --- Contact form --- */
.mdf-contact-form__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: var(--space-lg);
}

.mdf-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.mdf-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 30em) {
	.mdf-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.mdf-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.mdf-form__field label {
	font-weight: 500;
	font-size: 0.875rem;
	color: var(--color-text);
}

.mdf-form__field input[readonly] {
	opacity: 0.7;
	cursor: default;
}

/* --- Alert messages --- */
.mdf-alert {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding: var(--space-md);
	border-radius: var(--radius-md);
	font-size: 0.9375rem;
	font-weight: 500;
	margin-bottom: var(--space-md);
}

.mdf-alert svg {
	flex-shrink: 0;
}

.mdf-alert--success {
	background-color: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: #22C55E;
}

.mdf-alert--error {
	background-color: var(--color-accent-bg);
	border: 1px solid var(--color-accent-border);
	color: var(--color-accent);
}

/* --- Info cards --- */
.mdf-contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.mdf-info-card {
	display: flex;
	gap: var(--space-md);
	padding: var(--space-lg);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.mdf-info-card__icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-accent-bg);
	border-radius: var(--radius-md);
	color: var(--color-accent);
}

.mdf-info-card__content {
	flex: 1;
	min-width: 0;
}

.mdf-info-card__content h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 var(--space-xs);
}

.mdf-info-card__content p {
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin: 0;
}

.mdf-info-card__content p em {
	color: var(--color-muted);
	font-style: normal;
	font-size: 0.8125rem;
}

.mdf-info-card__content a {
	color: var(--color-accent);
	font-weight: 500;
	word-break: break-all;
}

.mdf-info-card__phone {
	font-family: var(--font-heading);
	font-size: 1.25rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.mdf-info-card__hint {
	color: var(--color-muted);
	font-size: 0.8125rem;
	margin-top: var(--space-xs);
}

.mdf-info-card__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--space-sm);
	font-size: 0.875rem;
}

/* --- Hours table --- */
.mdf-hours-table {
	width: 100%;
	border-collapse: collapse;
	background: none;
	border: none;
}

.mdf-hours-table td {
	padding: 4px 0;
	font-size: 0.875rem;
	color: var(--color-text);
	border: none;
	text-align: left;
}

.mdf-hours-table td:first-child {
	color: var(--color-muted);
	width: 45%;
}

/* --- Social links --- */
.mdf-social-links {
	display: flex;
	gap: var(--space-md);
}

.mdf-social-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	background-color: var(--color-surface-2);
	border: 1px solid var(--color-border);
	border-radius: 100px;
	color: var(--color-text);
	font-size: 0.875rem;
	font-weight: 500;
	transition: all var(--transition-fast);
}

.mdf-social-link:hover {
	border-color: var(--color-accent-border);
	color: var(--color-accent);
}

/* Hide label text on mobile, keep icons only */
@media (max-width: 47.99em) {
	.mdf-social-link__label {
		display: none;
	}

	.mdf-social-link {
		padding: 10px;
		border-radius: 50%;
		width: 44px;
		height: 44px;
		justify-content: center;
	}
}

/* --- Google Maps --- */
.mdf-contact-map {
	margin-bottom: var(--space-xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
}

.mdf-contact-map iframe {
	display: block;
	width: 100%;
	height: 300px;
}

@media (min-width: 48em) {
	.mdf-contact-map iframe {
		height: 400px;
	}
}

/* --- CF7 form styling (when installed) --- */
.mdf-contact-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.mdf-contact-form .wpcf7-form p {
	margin: 0;
}

.mdf-contact-form .wpcf7-response-output {
	border-radius: var(--radius-md);
	padding: var(--space-md);
	font-size: 0.9375rem;
}

.mdf-contact-form .wpcf7-mail-sent-ok {
	background-color: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.3);
	color: #22C55E;
}

.mdf-contact-form .wpcf7-not-valid-tip {
	color: var(--color-accent);
	font-size: 0.8125rem;
	margin-top: var(--space-xs);
}