/**
 * Contact page Elementor widget styles (from new-theme-html pages.css).
 *
 * @since 1.0.0
 */

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	align-items: start;
}

.contact-grid > * {
	min-width: 0;
}

.sec.contact-sec {
	padding-top: 26px;
}

.card-box {
	background: #fff;
	border: 1px solid var(--g3);
	border-radius: var(--r);
	box-shadow: var(--sh-xs);
	padding: 22px;
}

.card-box > h2 {
	font-size: 19px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.card-box > h2 .ic {
	width: 36px;
	height: 36px;
	border-radius: var(--r-sm);
	background: var(--orange1);
	color: var(--orange5);
	display: grid;
	place-items: center;
	flex: none;
}

.contact-sidebar {
	display: grid;
	gap: 16px;
}

.contact-info {
	display: grid;
	gap: 12px;
}

.ci {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: #fff;
	border: 1px solid var(--g3);
	border-radius: var(--r);
	padding: 16px;
	box-shadow: var(--sh-xs);
}

.ci .ic {
	width: 44px;
	height: 44px;
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	flex: none;
}

.ci .ic.ci-tone--orange {
	background: var(--orange1);
	color: var(--orange5);
}

.ci .ic.ci-tone--blue {
	background: var(--blueL);
	color: var(--blue);
}

.ci .ic.ci-tone--green {
	background: var(--greenL);
	color: var(--green-d);
}

.ci .ic.ci-tone--purple {
	background: var(--purpleL);
	color: var(--purple);
}

.ci b {
	font-size: 13.5px;
	display: block;
	margin-bottom: 5px;
}

.ci span,
.ci a {
	font-size: 13px;
	color: var(--g7);
	line-height: 1.9;
	display: block;
}

.ci a:hover {
	color: var(--orange5);
}

.ci .ci-cta {
	color: var(--orange5);
	font-weight: 600;
	margin-top: 4px;
}

.ci .ci-meta {
	color: var(--g6);
	font-size: 12px;
}

.map {
	border-radius: var(--r);
	overflow: hidden;
	height: 290px;
	position: relative;
	background: linear-gradient(135deg, #2A2D35, #3B404C);
	display: grid;
	place-items: center;
}

.map::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 26px),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 26px);
}

.map .pin {
	position: relative;
	z-index: 1;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--orange);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 0 0 10px rgba(255, 150, 6, .22);
}

.map .lbl {
	position: absolute;
	bottom: 16px;
	inset-inline-end: 16px;
	z-index: 1;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--r-sm);
	padding: 9px 14px;
	font-size: 12.5px;
	font-weight: 600;
}

.map.map--embed {
	background: #fff;
	padding: 0;
}

.map.map--embed::before {
	display: none;
}

.map.map--embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-form-slot {
	margin-top: 4px;
}

.contact-form-hint {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	font-size: 12.5px;
	color: var(--g6);
}

/* Elementor Form skin inside the contact card. */
.contact-form-slot .elementor,
.contact-form-slot .elementor-element,
.contact-form-slot .elementor-widget-container,
.contact-form-slot .elementor-widget-form {
	width: 100%;
	max-width: 100%;
	background: transparent;
}

.contact-form-slot .elementor-section,
.contact-form-slot .e-con,
.contact-form-slot .elementor-container,
.contact-form-slot .elementor-column,
.contact-form-slot .elementor-column-wrap,
.contact-form-slot .elementor-widget-wrap {
	padding: 0;
	margin: 0;
	background: transparent;
	box-shadow: none;
	border: none;
}

/* Elementor's own .elementor-col-* classes set an inline-equivalent
   width (e.g. 50%) meant for its native flex column system; inside our
   CSS-grid field wrapper that shrinks each field to 50% of its already
   50%-wide grid cell. The grid handles column placement, so cancel
   Elementor's own width here. */
.contact-form-slot .elementor-field-group {
	width: 100%;
	max-width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.contact-form-slot .elementor-form-fields-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0;
	width: 100%;
}

.contact-form-slot .elementor-field-group.elementor-field-type-textarea,
.contact-form-slot .elementor-field-group.elementor-field-type-submit {
	grid-column: 1 / -1;
}

.contact-form-slot .elementor-field-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--g8);
	margin-bottom: 7px;
}

.contact-form-slot .elementor-field-textual,
.contact-form-slot input.elementor-field,
.contact-form-slot select.elementor-field,
.contact-form-slot textarea.elementor-field {
	width: 100%;
	border: 1px solid var(--g3) !important;
	border-inline-start: 1px solid var(--g3) !important;
	border-radius: var(--r-sm) !important;
	padding: 11px 14px;
	font-size: 14px;
	background: #fff;
	color: var(--g9);
	box-shadow: none !important;
	outline: none;
}

/* Elementor Pro's own default form skin marks required/invalid fields with
   a colored border-inline-start (visible as a thick bar on one edge of the
   field) -- harmless when it only appears on real invalid input, but some
   Elementor versions render it unconditionally, before any interaction.
   Force it off here instead of hunting the exact conflicting rule per
   install; :focus keeps a normal (non-colored) outline for accessibility. */
.contact-form-slot .elementor-field-textual:required,
.contact-form-slot .elementor-field-textual.elementor-invalid,
.contact-form-slot input.elementor-field:required,
.contact-form-slot select.elementor-field:required,
.contact-form-slot textarea.elementor-field:required {
	border-color: var(--g3) !important;
	box-shadow: none !important;
}

.contact-form-slot .elementor-field-textual:focus,
.contact-form-slot input.elementor-field:focus,
.contact-form-slot select.elementor-field:focus,
.contact-form-slot textarea.elementor-field:focus {
	border-color: var(--orange) !important;
	box-shadow: none !important;
}

.contact-form-slot textarea.elementor-field {
	min-height: 120px;
	resize: vertical;
}

.contact-form-slot .elementor-button {
	background: var(--orange);
	color: #fff;
	border: none;
	border-radius: var(--r-sm);
	padding: 12px 22px;
	font-weight: 700;
	cursor: pointer;
}

/* Elementor renders the submit result (success/error) as a plain, unstyled
   <div class="elementor-message">; without explicit styling it inherits the
   tiny default text size and is easy to miss. */
.contact-form-slot .elementor-message {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: var(--r-sm);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.contact-form-slot .elementor-message::before {
	font-family: 'eicons';
	flex: none;
	font-size: 18px;
}

.contact-form-slot .elementor-message-success {
	background: var(--greenL);
	color: var(--green-d);
}

.contact-form-slot .elementor-message-success::before {
	content: "\e8a8";
}

.contact-form-slot .elementor-message-danger {
	background: #fdeceb;
	color: #c0392b;
}

.contact-form-slot .elementor-message-danger::before {
	content: "\e900";
}

/* Per-field errors: quiet red text under the field, not a boxed alert */
.contact-form-slot .elementor-message.elementor-help-inline {
	display: block;
	margin: 6px 2px 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	color: #d92d20;
}

.contact-form-slot .elementor-message.elementor-help-inline::before {
	content: none;
}

.contact-form-slot .elementor-field-group.elementor-error input.elementor-field,
.contact-form-slot .elementor-field-group.elementor-error .file-pick {
	border-color: #f0b4ae !important;
}

/* Form-level message: one calm line under the button */
.contact-form-slot .elementor-message:not(.elementor-help-inline) {
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
}

/* Browser autofill keeps the white field instead of pale blue */
.contact-form-slot input:-webkit-autofill,
.contact-form-slot input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 40px #fff inset !important;
	-webkit-text-fill-color: var(--g9);
}

.contact-form-slot .form-hint {
	margin: -4px 2px 0;
	font-size: 12px;
	color: var(--g6);
}

/* Collaboration page: illustration beside the form card */
.collab-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 32px;
	align-items: center;
}

.collab-grid--solo {
	grid-template-columns: minmax(0, 720px);
	justify-content: center;
}

.collab-art img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-inline: auto;
}

.collab-lead {
	color: var(--g7);
	font-size: 14px;
	line-height: 2;
	margin: -6px 0 18px;
}

/* Fields set to 100% width span both grid columns */
.contact-form-slot .elementor-field-group.elementor-col-100 {
	grid-column: 1 / -1;
}

/* File field: Persian button + name drawn over the invisible native input */
.file-pick {
	position: relative;
	flex: 1 1 100%;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 46px;
	padding: 6px 8px;
	border: 1px dashed var(--g4);
	border-radius: var(--r-sm);
	background: #fff;
	transition: border-color 0.18s;
}

.file-pick:hover,
.file-pick:focus-within {
	border-color: var(--orange);
}

.file-pick__btn {
	flex: none;
	padding: 7px 16px;
	border-radius: var(--r-sm);
	background: var(--orange1);
	color: var(--orange6);
	font-size: 13px;
	font-weight: 700;
}

.file-pick__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--g6);
	font-size: 13px;
}

.file-pick.has-file .file-pick__name {
	color: var(--g9);
}

.file-pick input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	border: none !important;
}

/* Without JS: keep a tidy native field */
.contact-form-slot input.elementor-upload-field:not([data-file-pick]) {
	width: 100%;
	border: 1px dashed var(--g4);
	border-radius: var(--r-sm);
	padding: 10px 14px;
	font-size: 13px;
	background: #fff;
	color: var(--g7);
}

@media (max-width: 980px) {
	.collab-grid {
		grid-template-columns: 1fr;
	}

	.collab-art img {
		max-width: 280px;
	}
}

@media (max-width: 1100px) {
	.contact-grid {
		grid-template-columns: 1fr 330px;
	}
}

@media (max-width: 980px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.card-box {
		padding: 16px;
	}

	.card-box > h2 {
		font-size: 16.5px;
	}

	.contact-form-slot .elementor-form-fields-wrapper {
		grid-template-columns: 1fr;
	}
}