/*
 Theme Name:   Unipix Child
 Theme URI:    https://themewant.com/products/wordpress/unipix
 Description:  Unipix Child
 Author:       ReacThemes
 Author URI:   http://reactheme.com
 Template:     unipix
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

/* ==========================================================================
   Contact Form 7 — Soft card UI
   Markup: wrap CF7 form with class "ho-contact-form"
   ========================================================================== */

.ho-contact-form,
.wpcf7 form.ho-contact-form {
	--ho-cf7-primary: var(--color-primary, #890c25);
	--ho-cf7-title: #1a1a1a;
	--ho-cf7-body: #6b6b6b;
	--ho-cf7-placeholder: #9b9b9b;
	--ho-cf7-input-bg: #f4f4f5;
	--ho-cf7-input-bg-focus: #efeff1;
	--ho-cf7-card-bg: #ffffff;
	--ho-cf7-radius: 10px;
	--ho-cf7-radius-sm: 8px;
	--ho-cf7-gap: 18px 16px;
	--ho-cf7-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
		0 12px 28px -4px rgba(0, 0, 0, 0.08);

	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	box-sizing: border-box;
	background: var(--ho-cf7-card-bg);
	border-radius: 16px;
	box-shadow: var(--ho-cf7-shadow);
	padding: 28px 28px 30px;
    overflow: hidden;
}

.ho-contact-form .wpcf7-form,
.wpcf7 form.ho-contact-form {
	margin: 0;
}

.ho-contact-form p,
.wpcf7 form.ho-contact-form p {
	margin: 0;
}

.ho-contact-form br,
.wpcf7 form.ho-contact-form br {
	display: none;
}

/* Grid */
.ho-cf7-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	align-items: start;
}

.ho-cf7-grid .ho-cf7-full {
	grid-column: 1 / -1;
}

/*
 * Conditional Fields — full-width row that collapses when hidden
 */
.ho-cf7-grid [data-class="wpcf7cf_group"],
.ho-contact-form [data-class="wpcf7cf_group"] {
	grid-column: 1 / -1;
	box-sizing: border-box;
	min-height: 0;
}

.ho-cf7-grid [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden),
.ho-contact-form [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden) {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--ho-cf7-gap);
	width: 100%;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
}

.ho-cf7-grid [data-class="wpcf7cf_group"].wpcf7cf-hidden,
.ho-contact-form [data-class="wpcf7cf_group"].wpcf7cf-hidden,
.ho-cf7-grid [data-class="wpcf7cf_group"][style*="display: none"],
.ho-contact-form [data-class="wpcf7cf_group"][style*="display: none"] {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	visibility: hidden;
	pointer-events: none;
}

/* Field block */
.ho-cf7-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}

.ho-cf7-field > label {
	display: block;
	font-family: var(--font-secondary, Inter, sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ho-cf7-title);
	margin: 0;
	letter-spacing: -0.01em;
}

.ho-cf7-field > label .ho-required,
.ho-cf7-field > label .required {
	color: #e11d48;
	margin-left: 2px;
	font-weight: 700;
}

.ho-cf7-hint {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ho-cf7-body);
	margin-top: -2px;
}

/* Controls — soft filled inputs */
.ho-contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
    height: 71px;
}
.ho-contact-form .wpcf7-form-control-wrap[data-name="your-message"] {
    height: initial;
}

.ho-contact-form input.wpcf7-form-control,
.ho-contact-form select.wpcf7-form-control,
.ho-contact-form textarea.wpcf7-form-control,
.wpcf7 form.ho-contact-form input.wpcf7-form-control,
.wpcf7 form.ho-contact-form select.wpcf7-form-control,
.wpcf7 form.ho-contact-form textarea.wpcf7-form-control {
	width: 100%;
	max-width: 100%;
	height: 48px;
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--ho-cf7-input-bg);
	border: 1px solid transparent;
	border-radius: var(--ho-cf7-radius-sm);
	color: var(--ho-cf7-title);
	font-family: var(--font-secondary, Inter, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	padding: 12px 16px;
	margin: 0;
	outline: none;
	box-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ho-contact-form textarea.wpcf7-form-control,
.wpcf7 form.ho-contact-form textarea.wpcf7-form-control {
	height: 96px;
	min-height: 96px;
	max-height: 220px;
	resize: vertical;
	padding: 12px 16px;
	line-height: 1.55;
}

.ho-contact-form select.wpcf7-form-control,
.wpcf7 form.ho-contact-form select.wpcf7-form-control {
	cursor: pointer;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b6b6b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 11px 7px;
	background-color: var(--ho-cf7-input-bg);
}

/* Blank / placeholder option — match input placeholder color */
.ho-contact-form select.wpcf7-form-control:required:invalid,
.ho-contact-form select.wpcf7-form-control:has(option[value=""]:checked),
.wpcf7 form.ho-contact-form select.wpcf7-form-control:required:invalid,
.wpcf7 form.ho-contact-form select.wpcf7-form-control:has(option[value=""]:checked) {
	color: var(--ho-cf7-placeholder);
}

.ho-contact-form select.wpcf7-form-control option,
.wpcf7 form.ho-contact-form select.wpcf7-form-control option {
	color: var(--ho-cf7-title);
}

.ho-contact-form select.wpcf7-form-control option[value=""],
.wpcf7 form.ho-contact-form select.wpcf7-form-control option[value=""] {
	color: var(--ho-cf7-placeholder);
}

.ho-contact-form input.wpcf7-form-control::placeholder,
.ho-contact-form textarea.wpcf7-form-control::placeholder,
.wpcf7 form.ho-contact-form input.wpcf7-form-control::placeholder,
.wpcf7 form.ho-contact-form textarea.wpcf7-form-control::placeholder {
	color: var(--ho-cf7-placeholder);
	opacity: 1;
}

.ho-contact-form input.wpcf7-form-control:hover,
.ho-contact-form select.wpcf7-form-control:hover,
.ho-contact-form textarea.wpcf7-form-control:hover,
.wpcf7 form.ho-contact-form input.wpcf7-form-control:hover,
.wpcf7 form.ho-contact-form select.wpcf7-form-control:hover,
.wpcf7 form.ho-contact-form textarea.wpcf7-form-control:hover {
	background-color: var(--ho-cf7-input-bg-focus);
	border-color: transparent;
}

.ho-contact-form input.wpcf7-form-control:focus,
.ho-contact-form select.wpcf7-form-control:focus,
.ho-contact-form textarea.wpcf7-form-control:focus,
.wpcf7 form.ho-contact-form input.wpcf7-form-control:focus,
.wpcf7 form.ho-contact-form select.wpcf7-form-control:focus,
.wpcf7 form.ho-contact-form textarea.wpcf7-form-control:focus {
	background-color: #fff;
	border-color: rgba(137, 12, 37, 0.35);
	box-shadow: 0 0 0 3px rgba(137, 12, 37, 0.1);
}

/* Invalid state */
.ho-contact-form .wpcf7-not-valid,
.wpcf7 form.ho-contact-form .wpcf7-not-valid {
	border-color: #e11d48 !important;
	background-color: #fff5f6 !important;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08) !important;
}

.ho-contact-form .wpcf7-not-valid-tip,
.wpcf7 form.ho-contact-form .wpcf7-not-valid-tip {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: #e11d48;
	margin-top: 6px;
	font-weight: 500;
}

/* Preferred date/time picker */
.ho-contact-form .wpcf7-form-control-wrap[data-name="preferred-times"],
.wpcf7 form.ho-contact-form .wpcf7-form-control-wrap[data-name="preferred-times"] {
	min-width: 0;
}

.ho-contact-form input.ho-datetime-alt,
.wpcf7 form.ho-contact-form input.ho-datetime-alt {
	cursor: pointer;
	min-width: 0;
	max-width: 100%;
	padding-right: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px 16px;
}

.ho-contact-form input.ho-datetime-picker.flatpickr-input,
.wpcf7 form.ho-contact-form input.ho-datetime-picker.flatpickr-input {
	display: none !important;
}

.ho-contact-form .wpcf7-form-control-wrap[data-name="preferred-times"]:has(.wpcf7-not-valid) .ho-datetime-alt,
.wpcf7 form.ho-contact-form .wpcf7-form-control-wrap[data-name="preferred-times"]:has(.wpcf7-not-valid) .ho-datetime-alt {
	border-color: #e11d48 !important;
	background-color: #fff5f6 !important;
	box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.08) !important;
}

.flatpickr-calendar.ho-fp {
	font-family: var(--font-secondary, Inter, sans-serif);
	border-radius: 12px;
	border: 1px solid #ececef;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
		0 12px 28px -4px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

.flatpickr-calendar.ho-fp .flatpickr-months .flatpickr-month,
.flatpickr-calendar.ho-fp .flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-calendar.ho-fp .flatpickr-current-month input.cur-year {
	color: #1a1a1a;
	font-weight: 600;
}

.flatpickr-calendar.ho-fp .flatpickr-weekdays,
.flatpickr-calendar.ho-fp span.flatpickr-weekday {
	color: #6b6b6b;
	font-weight: 600;
}

.flatpickr-calendar.ho-fp .flatpickr-day.today {
	border-color: #890c25;
}

.flatpickr-calendar.ho-fp .flatpickr-day.selected,
.flatpickr-calendar.ho-fp .flatpickr-day.selected:hover,
.flatpickr-calendar.ho-fp .flatpickr-day.startRange,
.flatpickr-calendar.ho-fp .flatpickr-day.endRange {
	background: #890c25;
	border-color: #890c25;
	color: #fff;
}

.flatpickr-calendar.ho-fp .flatpickr-day:hover,
.flatpickr-calendar.ho-fp .flatpickr-day.today:hover {
	background: #f4f4f5;
}

.flatpickr-calendar.ho-fp .flatpickr-day.selected:hover {
	background: #890c25;
}

.flatpickr-calendar.ho-fp .flatpickr-time input:hover,
.flatpickr-calendar.ho-fp .flatpickr-time .flatpickr-am-pm:hover {
	background: #f4f4f5;
}

.flatpickr-calendar.ho-fp .flatpickr-time .flatpickr-am-pm {
	font-weight: 600;
}

/* Submit */
.ho-cf7-actions {
	grid-column: 1 / -1;
	margin-top: 6px;
	position: relative;
}

.ho-cf7-actions > p {
	position: relative;
	margin: 0;
	display: block;
}

.ho-contact-form input.wpcf7-submit,
.wpcf7 form.ho-contact-form input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 48px;
	padding: 0 24px;
	border: none;
	border-radius: var(--ho-cf7-radius-sm);
	background: #002153;
	color: #fff;
	font-family: var(--font-secondary, Inter, sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.15s ease;
}

.ho-contact-form input.wpcf7-submit:hover,
.wpcf7 form.ho-contact-form input.wpcf7-submit:hover {
	background: #000000;
	opacity: 1;
	transform: translateY(-1px);
}

.ho-contact-form input.wpcf7-submit:active,
.wpcf7 form.ho-contact-form input.wpcf7-submit:active {
	transform: translateY(0);
}

/* Spinner centered inside the submit button (no extra space below) */
.ho-contact-form .ho-cf7-actions .wpcf7-spinner,
.wpcf7 form.ho-contact-form .ho-cf7-actions .wpcf7-spinner,
.ho-contact-form .wpcf7-spinner,
.wpcf7 form.ho-contact-form .wpcf7-spinner {
	position: absolute;
	right: 0;
	top: 50%;
	width: 22px;
	height: 22px;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.92);
	opacity: 1;
	pointer-events: none;
	z-index: 2;
}

.ho-contact-form .ho-cf7-actions .wpcf7-spinner::before,
.wpcf7 form.ho-contact-form .ho-cf7-actions .wpcf7-spinner::before,
.ho-contact-form .wpcf7-spinner::before,
.wpcf7 form.ho-contact-form .wpcf7-spinner::before {
	background-color: var(--ho-cf7-primary, #890c25);
	top: 4px;
	left: 4px;
	width: 5px;
	height: 5px;
	transform-origin: 7px 7px;
}

.ho-contact-form form.submitting .ho-cf7-actions input.wpcf7-submit,
.wpcf7 form.ho-contact-form.submitting .ho-cf7-actions input.wpcf7-submit,
.ho-contact-form form.submitting input.wpcf7-submit,
.wpcf7 form.ho-contact-form.submitting input.wpcf7-submit {
	color: transparent;
	pointer-events: none;
}

/* Response messages */
.ho-contact-form .wpcf7-response-output,
.wpcf7 form.ho-contact-form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-radius: var(--ho-cf7-radius-sm);
	border-width: 1px;
	font-size: 13px;
	line-height: 1.5;
}

.ho-contact-form .wpcf7-mail-sent-ok,
.ho-contact-form form.sent .wpcf7-response-output,
.wpcf7 form.ho-contact-form.sent .wpcf7-response-output {
	border-color: #2e7d32;
	background: #f1f8f2;
	color: #1b5e20;
}

.ho-contact-form form.failed .wpcf7-response-output,
.ho-contact-form form.aborted .wpcf7-response-output,
.ho-contact-form form.invalid .wpcf7-response-output,
.ho-contact-form form.unaccepted .wpcf7-response-output,
.wpcf7 form.ho-contact-form.failed .wpcf7-response-output,
.wpcf7 form.ho-contact-form.invalid .wpcf7-response-output {
	border-color: #e11d48;
	background: #fff5f6;
	color: #9f1239;
}

/* Optional outer panel (if you wrap shortcode in Elementor with this class) */
.ho-cf7-panel {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.ho-cf7-panel .ho-contact-form,
.ho-cf7-panel .wpcf7 {
	max-width: none;
}

/* ==========================================================================
   intl-tel-input — country code phone field
   ========================================================================== */

.ho-contact-form .iti__flag,
.wpcf7 .iti__flag {
	background-image: url("assets/images/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.ho-contact-form .iti__flag,
	.wpcf7 .iti__flag {
		background-image: url("assets/images/flags@2x.png");
	}
}

.ho-contact-form .iti,
.wpcf7 .iti {
	display: block;
	width: 100%;
	margin: 0;
}

.ho-contact-form .iti__flag-container,
.wpcf7 .iti__flag-container {
	z-index: 2;
}

.ho-contact-form .iti__selected-flag,
.wpcf7 .iti__selected-flag {
	padding: 0 8px 0 12px;
	border-radius: var(--ho-cf7-radius-sm, 8px) 0 0 var(--ho-cf7-radius-sm, 8px);
	background: transparent;
}

.ho-contact-form .iti__selected-flag:hover,
.ho-contact-form .iti__selected-flag:focus,
.wpcf7 .iti__selected-flag:hover,
.wpcf7 .iti__selected-flag:focus {
	background: rgba(0, 0, 0, 0.03);
}

.ho-contact-form .iti__selected-dial-code,
.wpcf7 .iti__selected-dial-code {
	font-size: 14px;
	font-weight: 500;
	color: var(--ho-cf7-title, #1a1a1a);
	margin-left: 6px;
}

.ho-contact-form .iti__arrow,
.wpcf7 .iti__arrow {
	border-top-color: #6b6b6b;
	margin-left: 6px;
}

.ho-contact-form .iti input.wpcf7-form-control,
.ho-contact-form .iti input[type="tel"],
.wpcf7 .iti input.wpcf7-form-control,
.wpcf7 .iti input[type="tel"] {
	width: 100%;
	padding-left: 16px;
}

.ho-contact-form .iti__country-list,
.wpcf7 .iti__country-list {
	border: 1px solid #e8e8ea;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
	z-index: 20;
	max-height: 220px;
	font-family: var(--font-secondary, Inter, sans-serif);
	font-size: 13px;
}

.ho-contact-form .iti__country.iti__highlight,
.wpcf7 .iti__country.iti__highlight {
	background-color: #f4f4f5;
}

.ho-contact-form .iti__divider,
.wpcf7 .iti__divider {
	border-bottom-color: #ececef;
}

/* Responsive */
@media (max-width: 767px) {
	.ho-contact-form,
	.wpcf7 form.ho-contact-form {
		padding: 22px 18px 24px;
		border-radius: 14px;
		max-width: none;
	}

	.ho-cf7-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ho-cf7-grid [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden),
	.ho-contact-form [data-class="wpcf7cf_group"]:not(.wpcf7cf-hidden) {
		grid-template-columns: 1fr;
	}
}