/* =========================================================
   CONTACT PAGE — page-templates/page-contact.php
   ========================================================= */

.ubl-contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; }

/* ---------- Left column: channels + quick FAQs ---------- */
.ubl-contact-side-label {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--ubl-color-text-muted); margin-bottom: 14px;
}
.ubl-contact-side-label--spaced { margin-top: 36px; }
.ubl-contact-channels { display: flex; flex-direction: column; gap: 14px; }
.ubl-contact-channel-card {
	display: flex; gap: 14px; align-items: flex-start;
	border: 1px solid var(--ubl-color-border); border-radius: var(--ubl-radius-card);
	padding: 18px 20px; background: #fff;
}
.ubl-contact-channel-card .ubl-icon-circle {
	margin-bottom: 0;
	flex-shrink: 0;
	background: rgba(251, 178, 1, .12);
	width: 45px;
	height: 45px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
}
.ubl-contact-channel-card h5 { margin: 0 0 4px; font-size: 15px; }
.ubl-contact-channel-value { margin: 0 0 4px; font-weight: 700; font-size: 14px; color: var(--ubl-color-black); }
.ubl-contact-channel-text { margin: 0; font-size: 13px; color: var(--ubl-color-text-muted); line-height: 1.5; }

.ubl-contact-quick-faqs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ubl-color-border); }
.ubl-contact-quick-faqs li { border-bottom: 1px solid var(--ubl-color-border); }
.ubl-contact-quick-faqs a {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 2px; font-size: 14px; color: var(--ubl-color-text); font-weight: 600;
}
.ubl-contact-quick-faqs a svg { flex-shrink: 0; color: var(--ubl-color-text-muted); transition: transform var(--ubl-transition); }
.ubl-contact-quick-faqs a:hover svg { transform: translateX(3px); color: var(--ubl-color-accent); }
.ubl-contact-browse-faqs { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; font-weight: 700; color: var(--ubl-color-black); }
.ubl-contact-browse-faqs:hover svg { transform: translateX(3px); }
.ubl-contact-browse-faqs svg { transition: transform var(--ubl-transition); }

/* ---------- Right column: form card ---------- */
.ubl-contact-form-card { border: 1px solid var(--ubl-color-border); border-radius: var(--ubl-radius-card); padding: 34px; background: #fff; }
.ubl-contact-form-card h2 { margin: 0 0 6px; font-size: 24px; }
.ubl-contact-form-intro { margin: 0 0 20px; color: var(--ubl-color-text-muted); font-size: 14px; }

.ubl-contact-notice {
	display: flex; gap: 12px; align-items: flex-start;
	background: rgba(251,178,1,.08); border: 1px solid rgba(251,178,1,.35); border-radius: var(--ubl-radius-card);
	padding: 16px 18px; margin-bottom: 22px;
}
.ubl-contact-notice svg { flex-shrink: 0; color: var(--ubl-color-accent); margin-top: 2px; }
.ubl-contact-notice p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ubl-color-text); }

.ubl-contact-subject-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.ubl-contact-subject-btn {
	padding: 9px 16px; border: 1px solid var(--ubl-color-border); border-radius: 20px;
	background: #fff; font-size: 13px; font-weight: 600; color: var(--ubl-color-text-muted); cursor: pointer;
	transition: background var(--ubl-transition), border-color var(--ubl-transition), color var(--ubl-transition);
}
.ubl-contact-subject-btn:hover { border-color: var(--ubl-color-accent); color: var(--ubl-color-text); }
.ubl-contact-subject-btn.is-active { background: var(--ubl-color-accent); border-color: var(--ubl-color-accent); color: var(--ubl-color-accent-text); }

.ubl-contact-form-card .form-field { margin-bottom: 18px; }
.ubl-contact-form-card label { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ubl-color-text-muted); margin-bottom: 8px; }
.ubl-contact-optional { text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 11px; }
.ubl-contact-charcount { text-transform: none; font-weight: 400; letter-spacing: 0; font-size: 11px; }
.ubl-contact-form-card textarea { resize: vertical; }

.ubl-contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ubl-contact-consent {
	display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 18px;
	font-size: 13px; color: var(--ubl-color-text-muted); line-height: 1.6; cursor: pointer;
}
.ubl-contact-consent input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; }

.ubl-contact-status { font-size: 14px; font-weight: 600; margin-bottom: 4px; min-height: 0; }
.ubl-contact-status:not(:empty) { margin-bottom: 16px; }
.ubl-contact-status.is-success { color: var(--ubl-color-success); }
.ubl-contact-status.is-error { color: var(--ubl-color-error); }

.ubl-contact-form-card button[type="submit"] { display: inline-flex; align-items: center; gap: 8px; }
.ubl-contact-form-card button[type="submit"]:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ---------- Bottom notice ---------- */
.ubl-contact-bottom-notice {
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--ubl-color-bg-alt); border-radius: var(--ubl-radius-card);
	padding: 22px 26px; margin-top: 40px;
}
.ubl-contact-bottom-notice svg { flex-shrink: 0; color: var(--ubl-color-accent); margin-top: 2px; }
.ubl-contact-bottom-notice h5 { margin: 0 0 6px; font-size: 15px; }
.ubl-contact-bottom-notice p { margin: 0; font-size: 13px; color: var(--ubl-color-text-muted); line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.ubl-contact-layout { grid-template-columns: 1fr; gap: 34px; }
	.ubl-contact-side-label--spaced { margin-top: 24px; }
}
@media (max-width: 640px) {
	.ubl-contact-form-card { padding: 22px; }
	.ubl-contact-form-card .ubl-grid-2 { grid-template-columns: 1fr; }
}