/* =========================================================
   تماس با ما (Contact) — page-specific styles. Only enqueued on
   page-contact.php (see functions.php). Every class below is
   prefixed `gym-contact-` per explicit client requirement, and
   every color/radius/spacing value reuses the theme's own design
   tokens from main.css's :root — the reference screenshot was
   followed for layout/structure/spacing/card positions only, not
   its own (approximate) colors, which are replaced with the
   theme's exact --color-yellow / --color-dark here.
   ========================================================= */

.gym-contact-page {
	background: var(--color-bg);
	padding-top: clamp(20px, 3vw, 50px);
	padding-bottom: clamp(50px, 6vw, 110px);
}

/* ---------- HERO BANNER ----------
   Asymmetric blob shape from the reference: a big scoop cut out of
   the top-left corner, both bottom corners curving upward. Achieved
   with per-corner border-radius rather than a uniform value. */
.gym-contact-hero {
	background: var(--color-yellow);
	border-radius: clamp(40px, 6vw, 120px) clamp(16px, 2vw, 32px) clamp(40px, 5vw, 90px) clamp(40px, 5vw, 90px);
	max-width: 1300px;
	margin: 0 auto clamp(40px, 5vw, 80px);
	padding: clamp(40px, 5.5vw, 100px) clamp(24px, 4vw, 64px);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(140px, 14vw, 220px);
}

.gym-contact-hero__title {
	margin: 0;
	color: var(--color-white);
	font-size: clamp(26px, 3.2vw, 46px);
	font-weight: 800;
	text-align: center;
}

/* ---------- MAIN TWO-COLUMN LAYOUT ----------
   Form on the physical left, contact-info cluster on the physical
   right — matches the reference image's exact arrangement rather
   than the default RTL auto-mirroring, per explicit instruction to
   follow the reference's layout faithfully. */
.gym-contact-layout {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(24px, 3vw, 56px);
	direction: ltr; /* so column 1 = left, column 2 = right, regardless of RTL page direction */
}

.gym-contact-layout > * {
	direction: rtl; /* content inside each column still reads RTL */
}

.gym-contact-form-panel {
	background: var(--color-dark);
	border-radius: clamp(24px, 2.6vw, 44px);
	padding: clamp(20px, 2.4vw, 34px);
	order: 1;
}

.gym-contact-info {
	order: 2;
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 36px);
}

/* ---------- CONTACT FORM ---------- */
.gym-contact-form {
	display: flex;
	flex-direction: column;
	gap: clamp(12px, 1.4vw, 18px);
}

.gym-contact-form__field {
	display: flex;
	flex-direction: column;
}

.gym-contact-form__field label {
	display: none; /* placeholders carry the labeling, matching the reference exactly; kept in markup for accessibility */
}

.gym-contact-form__input,
.gym-contact-form__select,
.gym-contact-form__textarea {
	width: 100%;
	background: var(--color-white);
	border: 2px solid var(--color-yellow);
	border-radius: var(--radius-pill);
	padding: clamp(12px, 1.2vw, 16px) clamp(18px, 1.8vw, 26px);
	font-family: inherit;
	font-size: clamp(13px, 0.95vw, 15px);
	color: var(--color-dark);
	text-align: right;
}

.gym-contact-form__textarea {
	border-radius: clamp(16px, 1.8vw, 26px);
	min-height: clamp(140px, 14vw, 220px);
	resize: vertical;
	font-family: inherit;
}

.gym-contact-form__input::placeholder,
.gym-contact-form__textarea::placeholder { color: rgba(34, 34, 34, 0.45); }

.gym-contact-form__input:focus,
.gym-contact-form__select:focus,
.gym-contact-form__textarea:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(252, 184, 39, 0.4);
}

.gym-contact-form__submit {
	align-self: center;
	margin-top: 6px;
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	border: none;
	border-radius: var(--radius-pill);
	padding: clamp(11px, 1.05vw, 15px) clamp(36px, 3.6vw, 56px);
	font-family: inherit;
	font-weight: 800;
	font-size: clamp(13.5px, 1vw, 16px);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.gym-contact-form__submit:hover,
.gym-contact-form__submit:focus-visible {
	background: var(--color-white);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.gym-contact-form__submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.gym-contact-form__feedback {
	margin: 4px 0 0;
	min-height: 1.4em;
	text-align: center;
	font-size: clamp(12.5px, 0.9vw, 14px);
	color: rgba(255, 255, 255, 0.8);
}

.gym-contact-form__feedback[data-state="success"] { color: #7CD98C; }
.gym-contact-form__feedback[data-state="error"] { color: #ff8a8a; }

/* ---------- CONTACT-METHOD CLUSTER ----------
   Overlapping staggered cards (Instagram / WhatsApp / phone / email),
   matching the reference's layered-card cluster. Collapses to a plain
   grid on tablet/mobile, since the desktop overlap can't stay legible
   at small sizes — a deliberate, expected responsive adaptation, not
   a redesign of the reference. */
.gym-contact-cluster {
	position: relative;
	min-height: clamp(180px, 15vw, 240px);
}

.gym-contact-cluster__card {
	position: absolute;
	background: var(--color-yellow);
	border-radius: clamp(20px, 2.2vw, 32px);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: clamp(14px, 1.6vw, 22px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gym-contact-cluster__card:hover,
.gym-contact-cluster__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.gym-contact-cluster__card svg {
	width: clamp(20px, 1.8vw, 28px);
	height: clamp(20px, 1.8vw, 28px);
	color: var(--color-text-on-yellow);
}

/* Positions approximate the reference's staggered overlap on desktop. */
.gym-contact-cluster__card--instagram { top: 0; right: 34%; width: 34%; height: 58%; z-index: 2; }
.gym-contact-cluster__card--whatsapp  { top: 30%; right: 34%; width: 34%; height: 40%; z-index: 3; align-items: flex-end; }
.gym-contact-cluster__card--phone     { top: 22%; right: 15%; width: 26%; height: 50%; z-index: 4; align-items: flex-start; }
.gym-contact-cluster__card--email     { top: 0; right: 0; width: 30%; height: 46%; z-index: 2; }

/* ---------- ADDRESS / HOURS (not in the reference's card cluster,
   added as a compact text row per the brief's information
   requirements — kept visually quiet so it doesn't compete with the
   reference's card layout). See "اطلاعات قابل ویرایش" block in
   page-contact.php for the actual editable values. ---------- */
.gym-contact-details {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 2vw, 32px);
	color: var(--color-white);
	font-size: clamp(12.5px, 0.9vw, 14px);
}

.gym-contact-details__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.gym-contact-details__item svg {
	width: 18px;
	height: 18px;
	color: var(--color-yellow);
	flex-shrink: 0;
}

/* ---------- MAP ---------- */
.gym-contact-map {
	position: relative;
	border-radius: var(--radius-pill);
	overflow: hidden;
	display: flex;
	min-height: clamp(140px, 12vw, 190px);
	background: var(--color-yellow);
}

.gym-contact-map__label {
	flex: 0 0 clamp(90px, 12vw, 160px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-on-yellow);
	font-weight: 800;
	font-size: clamp(14px, 1.1vw, 18px);
}

.gym-contact-map__frame-wrap {
	position: relative;
	flex: 1 1 auto;
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	overflow: hidden;
	background: var(--color-dark);
}

.gym-contact-map__frame {
	width: 100%;
	height: 100%;
	min-height: clamp(140px, 12vw, 190px);
	border: 0;
	display: block;
	filter: grayscale(0.3);
}

.gym-contact-map__pin {
	position: absolute;
	top: 14px;
	left: 14px;
	width: clamp(30px, 2.4vw, 40px);
	height: clamp(30px, 2.4vw, 40px);
	border-radius: 50%;
	background: var(--color-yellow);
	color: var(--color-text-on-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
}

.gym-contact-map__pin svg { width: 55%; height: 55%; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
	.gym-contact-layout { grid-template-columns: 1fr; }
	.gym-contact-form-panel { order: 1; }
	.gym-contact-info { order: 2; }
}

@media (max-width: 640px) {
	.gym-contact-cluster { min-height: 0; position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.gym-contact-cluster__card {
		position: static;
		width: auto !important;
		height: clamp(80px, 22vw, 110px) !important;
		top: auto !important;
		right: auto !important;
	}
	.gym-contact-hero { border-radius: clamp(30px, 10vw, 60px); }
	.gym-contact-map { flex-direction: column; }
	.gym-contact-map__label { flex-basis: auto; padding: 12px 0; }
	.gym-contact-map__frame-wrap { border-radius: 0 0 var(--radius-pill) var(--radius-pill); }
}

@media (prefers-reduced-motion: reduce) {
	.gym-contact-cluster__card,
	.gym-contact-form__submit {
		transition: none !important;
	}
}