/* ==========================================================================
   DOST GO — Contact Us Page Stylesheet
   Loaded only on pages using page-templates/template-contact.php
   (see functions.php).
   ========================================================================== */
 
.dostgo-contact-options {
	position: relative;
	padding: 84px 0;
	background: linear-gradient(180deg, #fff 0%, var(--dostgo-light) 100%);
	overflow: hidden;
}
 
/* soft decorative color glows behind the cards — subtle premium depth */
.dostgo-contact-options__glow {
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .35;
	pointer-events: none;
	z-index: 0;
}
 
.dostgo-contact-options__glow--one {
	top: -140px;
	left: -120px;
	background: radial-gradient(circle, var(--dostgo-300), transparent 70%);
}
 
.dostgo-contact-options__glow--two {
	bottom: -160px;
	right: -120px;
	background: radial-gradient(circle, #f59e0b, transparent 70%);
	opacity: .18;
}
 
.dostgo-contact-options .dostgo-container {
	position: relative;
	z-index: 1;
}
 
.dostgo-contact-options__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin-top: 44px;
}
 
.dostgo-contact-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--dostgo-border);
	border-radius: 18px;
	padding: 32px 26px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
 
.dostgo-contact-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--dostgo-400), var(--dostgo-600));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
 
.dostgo-contact-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(29, 146, 140, .16);
	border-color: transparent;
}
 
.dostgo-contact-card:hover::before {
	transform: scaleX(1);
}
 
.dostgo-contact-card__icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--dostgo-400), var(--dostgo-600));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
	box-shadow: 0 8px 18px rgba(29, 146, 140, .25);
	transition: transform .3s ease;
}
 
.dostgo-contact-card:hover .dostgo-contact-card__icon {
	transform: scale(1.08) rotate(-4deg);
}
 
.dostgo-contact-card__title {
	font-family: var(--dostgo-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 8px;
}
 
.dostgo-contact-card__subtitle {
	font-family: var(--dostgo-font-body);
	color: #6b7280;
	font-size: .88rem;
	line-height: 1.5;
	margin: 0 0 26px;
	min-height: 42px;
	word-break: break-word;
}
 
.dostgo-contact-card__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dostgo-font-body);
	font-weight: 700;
	font-size: .92rem;
	color: var(--dostgo-600);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	transition: gap .25s ease, color .2s ease;
}
 
.dostgo-contact-card__btn svg {
	transition: transform .25s ease;
}
 
.dostgo-contact-card__btn:hover {
	gap: 12px;
}
 
.dostgo-contact-card__btn:hover svg {
	transform: translate(3px, -3px);
}
 
.dostgo-contact-card__btn:active {
	transform: scale(.97);
}
 
/* ---- per-card color accents (icon + link color + top bar + hover glow) ---- */
 
/* Chat / WhatsApp — green */
.dostgo-contact-card--chat::before { background: linear-gradient(90deg, #25D366, #128C7E); }
.dostgo-contact-card--chat .dostgo-contact-card__icon {
	background: linear-gradient(135deg, #25D366, #128C7E);
	box-shadow: 0 8px 18px rgba(37, 211, 102, .28);
}
.dostgo-contact-card--chat .dostgo-contact-card__btn {
	color: #128C7E;
}
.dostgo-contact-card--chat:hover {
	box-shadow: 0 20px 40px rgba(37, 211, 102, .2);
}
 
/* Email — indigo */
.dostgo-contact-card--email::before { background: linear-gradient(90deg, #6366f1, #4338ca); }
.dostgo-contact-card--email .dostgo-contact-card__icon {
	background: linear-gradient(135deg, #6366f1, #4338ca);
	box-shadow: 0 8px 18px rgba(67, 56, 202, .28);
}
.dostgo-contact-card--email .dostgo-contact-card__btn {
	color: #4338ca;
}
.dostgo-contact-card--email:hover {
	box-shadow: 0 20px 40px rgba(67, 56, 202, .18);
}
 
/* Call / Help Centre — brand teal (default link/icon colors, no override needed) */
 
/* Visit us / Map — amber */
.dostgo-contact-card--pin::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.dostgo-contact-card--pin .dostgo-contact-card__icon {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	box-shadow: 0 8px 18px rgba(217, 119, 6, .28);
}
.dostgo-contact-card--pin .dostgo-contact-card__btn {
	color: #d97706;
}
.dostgo-contact-card--pin:hover {
	box-shadow: 0 20px 40px rgba(217, 119, 6, .18);
}
 
@media (max-width: 992px) {
	.dostgo-contact-options__grid { grid-template-columns: repeat(2, 1fr); }
}
 
@media (max-width: 576px) {
	.dostgo-contact-options { padding: 54px 0; }
	.dostgo-contact-options__glow { width: 260px; height: 260px; filter: blur(60px); }
	.dostgo-contact-options__grid { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
	.dostgo-contact-card { padding: 28px 22px; }
	.dostgo-contact-card__subtitle { min-height: 0; }
}


/* ---------- Contact Form Section (image left / CF7 form right) ---------- */
.dostgo-contact-form-section {
	padding: 70px 0 90px;
}
 
.dostgo-contact-form-layout {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: 50px;
	align-items: stretch;
}
 
.dostgo-contact-form-layout__image {
	border-radius: 18px;
	overflow: hidden;
	min-height: 100%;
}
 
.dostgo-contact-form-layout__image img {
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
	display: block;
}
 
.dostgo-contact-form-layout__form {
	background: #fff;
	border: 1px solid var(--dostgo-border);
	border-radius: 18px;
	padding: 36px;
	box-shadow: 0 4px 20px rgba(16, 24, 40, .05);
}
 
/* ---------- Contact Form 7 field styling ---------- */

.dostgo-contact-form-layout__form .wpcf7-form-control-wrap {
	display: block;
}

.dostgo-cf7-field {
	margin-bottom: 10px;
}

.dostgo-cf7-field > label {
	display: block;
	font-family: var(--dostgo-font-heading);
	font-weight: 600;
	font-size: .85rem;
	margin-bottom: 10px;
	color: var(--dostgo-black);
	line-height: 1.2;
}

/* Name + Email side by side, Contact Number full width below */
.dostgo-cf7-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	align-items: start;
}

.dostgo-cf7-row .dostgo-cf7-field {
	margin-bottom: 10px;
}

.dostgo-cf7-row .dostgo-cf7-field:last-child {
	grid-column: 1 / -1;
}

.dostgo-contact-form-layout__form input[type="text"],
.dostgo-contact-form-layout__form input[type="email"],
.dostgo-contact-form-layout__form input[type="tel"],
.dostgo-contact-form-layout__form select {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--dostgo-font-body);
	font-size: .9rem;
	line-height: 1.2;
	border: 1px solid var(--dostgo-border);
	background: var(--dostgo-light);
	border-radius: 8px;
	padding: 8px 14px;
	margin: 0;
	transition: border-color .2s ease, background .2s ease;
}

.dostgo-contact-form-layout__form textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: var(--dostgo-font-body);
	font-size: .9rem;
	border: 1px solid var(--dostgo-border);
	background: var(--dostgo-light);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0;
	min-height: 90px;
	resize: vertical;
	transition: border-color .2s ease, background .2s ease;
}

.dostgo-contact-form-layout__form input:focus,
.dostgo-contact-form-layout__form select:focus,
.dostgo-contact-form-layout__form textarea:focus {
	outline: none;
	border-color: var(--dostgo-primary);
	background: #fff;
}

/* "I'm interested in..." — equal-width single row */
.dostgo-cf7-field .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: center;
	gap: 10px;
}

.dostgo-cf7-field .wpcf7-list-item {
	margin: 0;
	white-space: nowrap;
}

/* CF7 wraps input+text inside its own <label> (use_label_element).
   The generic ".dostgo-cf7-field label { display:block }" rule above
   leaks into this nested label and pushes the text below the radio
   circle — force it back to an inline row, !important as a safety
   net against that block rule / any theme-level label reset. */
.dostgo-cf7-field .wpcf7-list-item label {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	margin: 0 !important;
	font-family: var(--dostgo-font-body);
	font-size: .82rem;
	font-weight: 500;
	color: var(--dostgo-black);
	cursor: pointer;
	line-height: 1;
	/* touch-friendly hit area on mobile without changing visual gap */
	padding: 4px 0;
}

.dostgo-cf7-field .wpcf7-list-item-label {
	display: inline;
}

.dostgo-cf7-field input[type="radio"] {
	width: 14px;
	height: 14px;
	margin: 0;
	accent-color: var(--dostgo-primary);
	cursor: pointer;
	flex-shrink: 0;
}

/* Phone row: one combined pill field — country code + number,
   separated by a divider line, matching reference design. */
.dostgo-cf7-phone-row {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--dostgo-border);
	border-radius: 30px;
	background: var(--dostgo-light);
	overflow: hidden;
	transition: border-color .2s ease, background .2s ease;
}

.dostgo-cf7-phone-row:focus-within {
	border-color: var(--dostgo-primary);
	background: #fff;
}

.dostgo-cf7-phone-row .wpcf7-form-control-wrap {
	display: contents !important;
}

.dostgo-cf7-phone-row select#dostgo-country-code {
	box-sizing: border-box;
	flex: 0 0 140px !important;
	width: 140px !important;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 8px 14px !important;
	border: none !important;
	border-right: 1px solid var(--dostgo-border) !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.dostgo-cf7-phone-row input[type="tel"] {
	box-sizing: border-box;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
	padding: 8px 14px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.dostgo-cf7-phone-row select:focus,
.dostgo-cf7-phone-row input[type="tel"]:focus {
	outline: none;
	background: transparent;
}

/* Submit button */
.dostgo-cf7-submit-row {
	margin-top: 10px;
}

.dostgo-contact-form-layout__form input[type="submit"] {
	width: 100%;
	font-family: var(--dostgo-font-body);
	font-weight: 700;
	font-size: .95rem;
	color: #fff;
	background: linear-gradient(135deg, var(--dostgo-400), var(--dostgo-600));
	border: none;
	border-radius: 30px;
	padding: 12px 18px;
	cursor: pointer;
	transition: opacity .2s ease, transform .15s ease;
}

.dostgo-contact-form-layout__form input[type="submit"]:hover {
	opacity: .9;
}

.dostgo-contact-form-layout__form input[type="submit"]:active {
	transform: scale(.98);
}

/* CF7 validation / response messages */
.dostgo-contact-form-layout__form .wpcf7-not-valid-tip {
	color: #d33;
	font-size: .8rem;
	margin-top: 4px;
}

.dostgo-contact-form-layout__form .wpcf7-response-output {
	margin-top: 20px;
	border-radius: 10px;
	padding: 12px 16px;
	font-size: .9rem;
}

/* Global safety net — stops any fixed-width/negative-margin element
   anywhere on the page from creating horizontal scroll on mobile */
html, body {
	overflow-x: hidden !important;
	max-width: 100% !important;
}

/* Prevent right-side overflow / off-center layout on small screens */
.dostgo-contact-form-layout {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 auto !important;
}

.dostgo-contact-form-layout,
.dostgo-contact-form-layout * {
	box-sizing: border-box !important;
}

/* Grid items default to min-width:auto, which lets their intrinsic
   content size (a wide select, an image, a long unbreakable string)
   force the column wider than the viewport even though width:100%
   is set above. min-width:0 lets them actually shrink to fit. */
.dostgo-contact-form-layout__form,
.dostgo-contact-form-layout__image {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
}

.dostgo-contact-form-layout__form * {
	max-width: 100% !important;
}

.dostgo-cf7-row,
.dostgo-cf7-field,
.dostgo-cf7-phone-row,
.wpcf7-form-control-wrap {
	min-width: 0 !important;
}

/* Left-side image — scale with its container, never overflow */
.dostgo-contact-form-layout__image {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

.dostgo-contact-form-layout__image img {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.dostgo-contact-form-layout {
		grid-template-columns: minmax(0, 1fr) !important;
		margin: 0 auto !important;
	}
	.dostgo-contact-form-layout__image img {
		min-height: 220px;
		max-height: 320px;
	}
	.dostgo-contact-form-layout__form {
		padding: 22px;
	}
	.dostgo-cf7-row {
		grid-template-columns: repeat(2, 1fr);
	}
	.dostgo-cf7-row .dostgo-cf7-field:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.dostgo-contact-form-layout__image img {
		min-height: 180px;
		max-height: 240px;
	}
	.dostgo-contact-form-layout__form {
		padding: 16px;
	}
	.dostgo-cf7-row {
		grid-template-columns: 1fr;
	}
	.dostgo-cf7-row .dostgo-cf7-field:last-child {
		grid-column: auto;
	}
	.dostgo-cf7-field .wpcf7-radio {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 8px;
	}
	/* larger tap targets on touch screens */
	.dostgo-cf7-field input[type="radio"] {
		width: 16px;
		height: 16px;
	}
	.dostgo-contact-form-layout__form input[type="submit"] {
		padding: 14px 18px;
		font-size: 1rem;
	}
}

@media (max-width: 480px) {
	.dostgo-cf7-phone-row select#dostgo-country-code {
		flex: 0 0 92px !important;
		width: 92px !important;
		font-size: .8rem;
		padding: 8px 8px !important;
	}
	.dostgo-cf7-phone-row input[type="tel"] {
		font-size: .8rem;
		padding: 8px 10px !important;
	}
	.dostgo-cf7-field .wpcf7-radio {
		grid-template-columns: 1fr;
		row-gap: 10px;
	}
	.dostgo-cf7-field > label {
		font-size: .8rem;
	}
}

@media (max-width: 360px) {
	.dostgo-cf7-phone-row select#dostgo-country-code {
		flex: 0 0 78px !important;
		width: 78px !important;
		font-size: .75rem;
		padding: 8px 6px !important;
	}
	.dostgo-cf7-phone-row input[type="tel"] {
		font-size: .8rem;
		padding: 8px 8px !important;
	}
	.dostgo-contact-form-layout__form {
		padding: 14px;
	}
}

/* Extra-narrow phones (older/smaller devices) — stack the phone
   country-code selector above the number field so nothing gets
   squeezed unreadably small */
@media (max-width: 320px) {
	.dostgo-cf7-phone-row {
		flex-direction: column;
		border-radius: 12px;
	}
	.dostgo-cf7-phone-row select#dostgo-country-code {
		width: 100% !important;
		flex: 1 1 auto !important;
		border-right: none !important;
		border-bottom: 1px solid var(--dostgo-border) !important;
	}
	.dostgo-cf7-phone-row input[type="tel"] {
		width: 100% !important;
	}
}