/**
 * Contact page (page-contact.php) — 2026-09-16 redesign.
 * Dark page canvas + hero, help-topic tiles, a white form card (same card
 * language as the article body and policy pages), contact-specific sidebar,
 * and a full restyle of Contact Form 7's markup.
 */

:root {
	--psp-c-ink: #16233c;
	--psp-c-text: #33405c;
	--psp-c-muted: #6b7a99;
	--psp-c-line: #dfe6f2;
	--psp-c-soft: #f3f6fb;
	--psp-c-blue: #1e5087;
	--psp-c-blue-2: #3a86e0;
	--psp-c-gold: #ffb020;
	--psp-c-ice: #eaf4ff;
	--psp-c-ice-muted: rgba( 234, 244, 255, 0.64 );
	--psp-c-glass: rgba( 255, 255, 255, 0.04 );
	--psp-c-border: rgba( 255, 255, 255, 0.1 );
	--psp-c-display: 'Outfit', 'PT Sans', sans-serif;
	--psp-c-mono: 'JetBrains Mono', Consolas, monospace;
	--psp-c-ease: cubic-bezier( 0.22, 1, 0.36, 1 );
}

.cricket-contact-page {
	position: relative;
	margin-bottom: 30px;
	padding: 56px 32px 64px;
	border-radius: 14px;
	background:
		radial-gradient( 60% 50% at 85% 0%, rgba( 255, 176, 32, 0.12 ), transparent 70% ),
		radial-gradient( 120% 90% at 15% 0%, #16305c 0%, #0a1830 45%, #050d1c 100% );
	overflow: hidden;
}

/* ---------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------- */

.cricket-contact-hero {
	max-width: 760px;
	margin: 0 auto 44px;
	text-align: center;
	animation: psp-contact-rise 0.7s var( --psp-c-ease ) both;
}

.cricket-contact-hero__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 16px;
	border-radius: 18px;
	color: #1a1200;
	background: linear-gradient( 135deg, #ffb020, #ff6b6b );
	box-shadow: 0 14px 30px -10px rgba( 255, 140, 60, 0.55 );
}

.cricket-contact-hero__eyebrow {
	display: block;
	margin-bottom: 8px;
	font-family: var( --psp-c-mono );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --psp-c-gold );
}

.cricket-contact-hero__title {
	margin: 0 0 12px;
	font-family: var( --psp-c-display );
	font-size: clamp( 30px, 4.6vw, 46px );
	font-weight: 800;
	line-height: 1.08;
	color: #f5f8ff;
	text-wrap: balance;
}

.cricket-contact-hero__sub {
	margin: 0 auto;
	max-width: 56ch;
	font-size: 17px;
	line-height: 1.6;
	color: var( --psp-c-ice-muted );
}

/* ---------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------- */

.cricket-contact-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 320px;
	gap: 28px;
	align-items: start;
	max-width: 1100px;
	margin: 0 auto;
}

.cricket-contact-main {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.cricket-contact-section-title {
	margin: 0;
	font-family: var( --psp-c-display );
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------
 * Help topics
 * ------------------------------------------------------------------- */

.cricket-contact-topics .cricket-contact-section-title {
	margin-bottom: 14px;
	color: var( --psp-c-ice );
}

.cricket-contact-topics__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cricket-contact-topic {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 14px 16px;
	border-radius: 14px;
	background: var( --psp-c-glass );
	border: 1px solid var( --psp-c-border );
	animation: psp-contact-rise 0.6s var( --psp-c-ease ) both;
	transition: border-color 0.2s ease, transform 0.2s var( --psp-c-ease ), background 0.2s ease;
}

.cricket-contact-topic:nth-child( 2 ) { animation-delay: 0.05s; }
.cricket-contact-topic:nth-child( 3 ) { animation-delay: 0.1s; }
.cricket-contact-topic:nth-child( 4 ) { animation-delay: 0.15s; }

.cricket-contact-topic:hover {
	transform: translateY( -2px );
	border-color: color-mix( in srgb, var( --tone ) 45%, transparent );
	background: color-mix( in srgb, var( --tone ) 7%, rgba( 255, 255, 255, 0.03 ) );
}

.cricket-contact-topic__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	color: var( --tone );
	background: color-mix( in srgb, var( --tone ) 16%, transparent );
}

.cricket-contact-topic__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var( --psp-c-ice-muted );
}

.cricket-contact-topic__text b {
	font-family: var( --psp-c-display );
	font-size: 15px;
	font-weight: 700;
	color: var( --psp-c-ice );
}

/* ---------------------------------------------------------------------
 * Form card
 * ------------------------------------------------------------------- */

.cricket-contact-card {
	padding: 32px 34px 34px;
	border-radius: 18px;
	background: rgba( 255, 255, 255, 0.98 );
	box-shadow: 0 24px 50px -24px rgba( 0, 0, 0, 0.6 );
	color: var( --psp-c-text );
	animation: psp-contact-rise 0.7s var( --psp-c-ease ) 0.1s both;
}

.cricket-contact-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.cricket-contact-card .cricket-contact-section-title {
	font-size: 24px;
	color: var( --psp-c-ink );
}

.cricket-contact-card__req {
	font-family: var( --psp-c-mono );
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --psp-c-muted );
}

.cricket-contact-note {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 24px;
	padding: 13px 16px;
	border-radius: 12px;
	background: #fff7e6;
	border: 1px solid #ffe2a8;
	color: #7a4b00;
}

.cricket-contact-note svg {
	flex: none;
	margin-top: 2px;
	color: #d98a00;
}

.cricket-contact-note p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}

.cricket-contact-note strong {
	color: #5c3800;
}

.cricket-contact-card__fallback {
	margin: 0;
	padding: 16px;
	border-radius: 12px;
	background: var( --psp-c-soft );
	color: var( --psp-c-text );
}

/* --- Contact Form 7 markup ------------------------------------------- */

/* Contact Form 7 auto-wraps the template in <p> + <br> tags. Make those
   wrappers layout-transparent so the grid row and field spacing come
   purely from the template's own classes. */
.cricket-contact-card .wpcf7 form p {
	display: contents;
	margin: 0;
}

.cricket-contact-card .wpcf7 form br {
	display: none;
}

.cricket-contact-card .psp-cf-row {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
}

.cricket-contact-card .psp-cf-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0 0 18px;
	font-weight: 400;
}

.cricket-contact-card .psp-cf-label {
	font-family: var( --psp-c-mono );
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --psp-c-ink );
}

.cricket-contact-card .wpcf7-form-control-wrap {
	display: block;
}

.cricket-contact-card .wpcf7-form-control:where( input, select, textarea ) {
	width: 100%;
	min-height: 50px;
	padding: 12px 15px;
	border: 1.5px solid var( --psp-c-line );
	border-radius: 12px;
	background: #f8fafd;
	color: var( --psp-c-ink );
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cricket-contact-card .wpcf7-form-control:where( input, select, textarea )::placeholder {
	color: #9aa6bd;
}

.cricket-contact-card .wpcf7-form-control:where( input, select, textarea ):hover {
	border-color: #c5d2e6;
}

.cricket-contact-card .wpcf7-form-control:where( input, select, textarea ):focus {
	outline: none;
	background: #ffffff;
	border-color: var( --psp-c-blue-2 );
	box-shadow: 0 0 0 4px rgba( 58, 134, 224, 0.18 );
}

.cricket-contact-card select.wpcf7-form-control {
	padding-right: 44px;
	cursor: pointer;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231e5087' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.cricket-contact-card textarea.wpcf7-form-control {
	min-height: 160px;
	height: 160px;
	resize: vertical;
}

/* Invalid state — colour plus the tip text, never colour alone. */
.cricket-contact-card .wpcf7-not-valid {
	border-color: #e5484d !important;
	background: #fff6f6 !important;
}

.cricket-contact-card .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #c62a2f;
}

.cricket-contact-card .psp-cf-submit {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.cricket-contact-card .wpcf7-form-control.wpcf7-submit {
	width: auto;
	min-width: 190px;
	background-color: transparent;
	border: 0;
}

.cricket-contact-card .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 10px 24px -8px rgba( 255, 140, 60, 0.6 );
	transition: transform 0.2s var( --psp-c-ease ), box-shadow 0.2s ease, filter 0.2s ease;
}

.cricket-contact-card .wpcf7-submit:hover,
.cricket-contact-card .wpcf7-submit:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 16px 30px -10px rgba( 255, 140, 60, 0.7 );
	color: #1a1200;
}

.cricket-contact-card .wpcf7-submit:focus-visible {
	outline: 3px solid rgba( 58, 134, 224, 0.5 );
	outline-offset: 3px;
}

.cricket-contact-card .wpcf7-submit:disabled {
	filter: grayscale( 0.4 );
	cursor: progress;
	transform: none;
}

.cricket-contact-card .wpcf7-spinner {
	margin: 0;
	background-color: var( --psp-c-blue );
}

/* Response banner after submit. */
.cricket-contact-card .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 13px 16px;
	border: 0;
	border-left: 4px solid var( --psp-c-muted );
	border-radius: 10px;
	background: var( --psp-c-soft );
	font-size: 14.5px;
	line-height: 1.5;
	color: var( --psp-c-ink );
}

.cricket-contact-card .wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #2c9a5a;
	background: #eaf8f0;
	color: #1d5c39;
}

.cricket-contact-card .wpcf7 form.invalid .wpcf7-response-output,
.cricket-contact-card .wpcf7 form.unaccepted .wpcf7-response-output,
.cricket-contact-card .wpcf7 form.payment-required .wpcf7-response-output {
	border-left-color: #e5a100;
	background: #fff7e6;
	color: #7a4b00;
}

.cricket-contact-card .wpcf7 form.failed .wpcf7-response-output,
.cricket-contact-card .wpcf7 form.aborted .wpcf7-response-output,
.cricket-contact-card .wpcf7 form.spam .wpcf7-response-output {
	border-left-color: #e5484d;
	background: #fff1f1;
	color: #8f1d22;
}

/* ---------------------------------------------------------------------
 * Sidebar
 * ------------------------------------------------------------------- */

.cricket-contact-side {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	animation: psp-contact-rise 0.7s var( --psp-c-ease ) 0.18s both;
}

.cricket-contact-side__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 18px;
	border-radius: 16px;
	background: linear-gradient( 180deg, rgba( 13, 32, 56, 0.92 ), rgba( 10, 24, 48, 0.92 ) );
	border: 1px solid var( --psp-c-border );
	box-shadow: 0 18px 38px -18px rgba( 0, 0, 0, 0.6 ), inset 0 1px 0 rgba( 255, 255, 255, 0.05 );
	color: var( --psp-c-ice );
}

.cricket-contact-side__card--account {
	background:
		radial-gradient( circle at 100% 0%, rgba( 255, 176, 32, 0.22 ), transparent 50% ),
		linear-gradient( 135deg, #1c3f74 0%, #122c56 45%, #0a1830 100% );
	border-color: rgba( 255, 255, 255, 0.14 );
}

.cricket-contact-side__eyebrow {
	font-family: var( --psp-c-mono );
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --psp-c-gold );
}

.cricket-contact-side__title {
	margin: 0;
	font-family: var( --psp-c-display );
	font-size: 18px;
	font-weight: 800;
	line-height: 1.2;
	color: var( --psp-c-ice );
}

.cricket-contact-side__text,
.cricket-contact-side__hint {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var( --psp-c-ice-muted );
}

.cricket-contact-side__hint {
	padding-top: 10px;
	border-top: 1px solid var( --psp-c-border );
	font-size: 12.5px;
}

.cricket-contact-side__btns {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 8px;
	margin-top: 4px;
}

.cricket-contact-side__btn,
.cricket-contact-side__btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #1a1200;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s var( --psp-c-ease ), background 0.2s ease, border-color 0.2s ease;
}

.cricket-contact-side__btn:hover,
.cricket-contact-side__btn:focus-visible {
	color: #1a1200;
	transform: translateY( -2px );
}

.cricket-contact-side__btn--ghost,
.cricket-contact-side__btn--ghost:visited {
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.24 );
	color: #ffffff;
}

.cricket-contact-side__btn--ghost:hover,
.cricket-contact-side__btn--ghost:focus-visible {
	background: rgba( 255, 255, 255, 0.16 );
	color: #ffffff;
}

.cricket-contact-side__card--account > .cricket-contact-side__btn--ghost {
	align-self: flex-start;
}

.cricket-contact-account {
	display: flex;
	align-items: center;
	gap: 12px;
}

.cricket-contact-account__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cricket-contact-account__name {
	font-family: var( --psp-c-display );
	font-size: 17px;
	font-weight: 700;
	color: var( --psp-c-ice );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cricket-contact-links {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.cricket-contact-links li {
	margin: 0;
}

.cricket-contact-links a,
.cricket-contact-links a:visited {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, 0.04 );
	border: 1px solid transparent;
	color: var( --psp-c-ice );
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cricket-contact-links a svg {
	flex: none;
	color: var( --psp-c-ice-muted );
	transition: transform 0.2s var( --psp-c-ease ), color 0.18s ease;
}

.cricket-contact-links a:hover,
.cricket-contact-links a:focus-visible {
	background: rgba( 255, 176, 32, 0.1 );
	border-color: rgba( 255, 176, 32, 0.35 );
	color: #ffffff;
}

.cricket-contact-links a:hover svg,
.cricket-contact-links a:focus-visible svg {
	color: var( --psp-c-gold );
	transform: translateX( 3px );
}

.cricket-contact-telegram,
.cricket-contact-telegram:visited {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	background: linear-gradient( 135deg, #1c6fb8, #229ed9 );
	border-color: rgba( 255, 255, 255, 0.18 );
	color: #ffffff;
	text-decoration: none;
	transition: transform 0.2s var( --psp-c-ease ), box-shadow 0.2s ease;
}

.cricket-contact-telegram:hover,
.cricket-contact-telegram:focus-visible {
	color: #ffffff;
	transform: translateY( -2px );
	box-shadow: 0 22px 40px -18px rgba( 34, 158, 217, 0.7 );
}

.cricket-contact-telegram__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.18 );
	font-size: 20px;
}

.cricket-contact-telegram__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.cricket-contact-telegram__title {
	font-family: var( --psp-c-display );
	font-size: 16px;
	font-weight: 700;
}

.cricket-contact-telegram__sub {
	font-size: 12.5px;
	color: rgba( 255, 255, 255, 0.82 );
}

.cricket-contact-telegram__arrow {
	flex: none;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------
 * Motion + responsive
 * ------------------------------------------------------------------- */

@keyframes psp-contact-rise {
	from {
		opacity: 0;
		transform: translateY( 14px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media ( max-width: 991px ) {
	.cricket-contact-layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.cricket-contact-side {
		position: static;
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		align-items: start;
	}

	.cricket-contact-telegram {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 640px ) {
	.cricket-contact-page {
		padding: 36px 14px 44px;
	}

	.cricket-contact-hero {
		margin-bottom: 30px;
	}

	.cricket-contact-hero__icon {
		width: 52px;
		height: 52px;
		border-radius: 15px;
	}

	.cricket-contact-hero__sub {
		font-size: 15.5px;
	}

	.cricket-contact-topics__grid,
	.cricket-contact-card .psp-cf-row,
	.cricket-contact-side {
		grid-template-columns: minmax( 0, 1fr );
	}

	.cricket-contact-card .psp-cf-row {
		gap: 0;
	}

	.cricket-contact-card {
		padding: 24px 18px 26px;
		border-radius: 16px;
	}

	.cricket-contact-card__head {
		flex-direction: column;
		gap: 4px;
	}

	.cricket-contact-card .wpcf7-form-control.wpcf7-submit {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cricket-contact-hero,
	.cricket-contact-topic,
	.cricket-contact-card,
	.cricket-contact-side {
		animation: none;
	}

	.cricket-contact-topic,
	.cricket-contact-side__btn,
	.cricket-contact-links a,
	.cricket-contact-links a svg,
	.cricket-contact-telegram,
	.cricket-contact-card .wpcf7-submit {
		transition: none;
	}

	.cricket-contact-topic:hover,
	.cricket-contact-side__btn:hover,
	.cricket-contact-telegram:hover,
	.cricket-contact-card .wpcf7-submit:hover {
		transform: none;
	}
}