/* =========================================================================
   HERO - dark overlay, text left, form right.
   Gold checkmarks with white text, compact Google badge, mobile-first.
   Form: JS-driven 2 steps, 2x2 grid, natural height under 300px.
   ========================================================================= */

.wmoving-hero {
	--hero-gold:       #C5A059 !important;
	--hero-gold-light: #D4AF37 !important;
	--hero-dark:       #111111 !important;
	--hero-cream:      #F9F8F6 !important;
	--hero-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif !important;

	position: relative !important;
	width: 100% !important;
	background:
		linear-gradient(90deg, rgba(10, 10, 10, 0.88) 0%, rgba(15, 15, 15, 0.72) 100%),
		url('https://wmovingandstorage.com/wp-content/uploads/2026/07/white-glove-movers-miami-fine-art-handling-scaled.webp') center / cover no-repeat !important;
	color: #fff !important;
	box-sizing: border-box !important;
}

.wmoving-hero * {
	box-sizing: border-box !important;
}

.wmoving-hero__inner {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 32px !important;
	max-width: 1600px !important;
	margin: 0 auto !important;
	min-height: 600px !important;
	padding: 130px 8% 50px !important;
}

/* ----- LEFT ----- */
.wmoving-hero__left {
	max-width: 580px !important;
}

/* Google badge - plain HTML/CSS, not a live widget */
.wmoving-hero__badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin-bottom: 20px !important;
	padding: 6px 14px !important;
	background: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(197, 160, 89, 0.4) !important;
	border-radius: 20px !important;
	backdrop-filter: blur(5px) !important;
	-webkit-backdrop-filter: blur(5px) !important;
}

.wmoving-hero__badge-g {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 18px !important;
	height: 18px !important;
	background: #4285F4 !important;
	border-radius: 50% !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #fff !important;
}

.wmoving-hero__badge-stars {
	color: var(--hero-gold) !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
}

.wmoving-hero__badge-text {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--hero-cream) !important;
}

.wmoving-hero__title {
	margin: 0 0 15px !important;
	font-family: var(--hero-font-display) !important;
	font-size: 44px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.wmoving-hero__subtitle {
	margin: 0 0 25px !important;
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: #E2E2E2 !important;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.wmoving-hero__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wmoving-hero__list-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
	margin-bottom: 10px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}

.wmoving-hero__check {
	color: var(--hero-gold-light) !important;
	flex: 0 0 auto !important;
}

.wmoving-hero__check-text {
	color: #ffffff !important;
}

/* ----- RIGHT: form ----- */
.wmoving-hero__form-box {
	width: 520px !important;
	max-width: 100% !important;
	padding: 28px !important;
	background: rgba(15, 15, 15, 0.82) !important;
	border: 1px solid rgba(197, 160, 89, 0.6) !important;
	border-radius: 6px !important;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

.wmoving-hero__step {
	margin-bottom: 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	color: var(--hero-gold) !important;
}

/* Title with a separator line underneath */
.wmoving-hero__form-title {
	margin: 0 0 18px !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: #fff !important;
}

/* =========================================================================
   GRAVITY FORMS - 2x2 grid, light rounded inputs, centered uppercase text.
   !important is needed here - Gravity Forms ships its own CSS.
   ========================================================================= */

.wmoving-hero__form .gform_wrapper { margin: 0 !important; padding: 0 !important; }

/* Labels hidden - placeholders are used instead */
.wmoving-hero__form .gfield_label,
.wmoving-hero__form .gform_required_legend,
.wmoving-hero__form .gsection_title { display: none !important; }

/* Fields: 2 columns (flex wrap, works across GF versions) */
.wmoving-hero__form .gform_fields {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	grid-template-columns: none !important;
}

.wmoving-hero__form .gfield {
	flex: 0 0 calc(50% - 6px) !important;
	max-width: calc(50% - 6px) !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Textarea and full-width fields span the whole row */
.wmoving-hero__form .gfield--type-textarea,
.wmoving-hero__form .gfield--width-full,
.wmoving-hero__form .gfield.gf_full { 
	flex: 0 0 100% !important;
	max-width: 100% !important;
}

.wmoving-hero__form .ginput_container { margin-top: 0 !important; }

/* Inputs: light grey, rounded, centered uppercase text */
.wmoving-hero__form input[type="text"],
.wmoving-hero__form input[type="email"],
.wmoving-hero__form input[type="tel"],
.wmoving-hero__form input[type="number"],
.wmoving-hero__form input[type="url"],
.wmoving-hero__form input[type="date"],
.wmoving-hero__form select,
.wmoving-hero__form textarea {
	width: 100% !important;
	padding: 14px 12px !important;
	margin: 0 !important;
	background: #f0f0f0 !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: #333 !important;
}

.wmoving-hero__form textarea {
	min-height: 70px !important;
	resize: vertical !important;
	text-align: left !important;
	text-transform: none !important;
}

/* Placeholders: centered, uppercase */
.wmoving-hero__form input::placeholder,
.wmoving-hero__form textarea::placeholder {
	text-align: center !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	color: #555 !important;
	opacity: 1 !important;
}

/* Select: custom chevron on the right */
.wmoving-hero__form select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 34px !important;
}

/* Date field: room for the GF calendar icon */
.wmoving-hero__form .ginput_container_date input {
	padding-right: 34px !important;
}

/* GF validation error */
.wmoving-hero__form .gfield_error input,
.wmoving-hero__form .wmoving-step-invalid input,
.wmoving-hero__form .wmoving-step-invalid select {
	border-color: #d42f2f !important;
}

.wmoving-hero__form .gfield_validation_message,
.wmoving-hero__form .validation_message {
	margin: 4px 0 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	font-size: 11px !important;
	text-align: center !important;
	color: #ffb4b4 !important;
}

/* GF footer (submit) */
.wmoving-hero__form .gform_footer {
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

/* All buttons (submit, next, back) */
.wmoving-hero__form .gform_button,
.wmoving-step-next,
.wmoving-step-back {
	width: 100% !important;
	padding: 15px !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: 1px !important;
	cursor: pointer !important;
	transition: background-color 0.3s ease !important;
}

.wmoving-hero__form .gform_button,
.wmoving-step-next {
	background: var(--hero-gold) !important;
	color: #111 !important;
}

.wmoving-hero__form .gform_button:hover,
.wmoving-step-next:hover {
	background: var(--hero-gold-light) !important;
}

.wmoving-step-back {
	background: transparent !important;
	border: 1px solid rgba(197, 160, 89, 0.6) !important;
	color: var(--hero-gold) !important;
	margin-bottom: 8px !important;
}

.wmoving-step-back:hover {
	background: rgba(197, 160, 89, 0.12) !important;
}

.wmoving-step-nav {
	margin-top: 12px !important;
}

/* ----- STEP show/hide ----- */
.wmoving-hero__form-box[data-step="1"] .wmoving-step-2 { display: none !important; }
.wmoving-hero__form-box[data-step="1"] .wmoving-step-back { display: none !important; }
.wmoving-hero__form-box[data-step="1"] .gform_footer { display: none !important; }

.wmoving-hero__form-box[data-step="2"] .wmoving-step-1 { display: none !important; }
.wmoving-hero__form-box[data-step="2"] .wmoving-step-next { display: none !important; }
.wmoving-hero__form .ginput_container {
    position: relative !important;
}
.gform-theme--framework .gfield--input-type-datepicker.gfield--datepicker-default-icon .ginput_container_date::after {
    left: initial !important;
    right: 10px;
    top: calc(50% - 10px) !important;
    display: inline !important;
    translate: unset !important;
    transform: unset !important;
    position: absolute;

}
div#gform_wrapper_1 h2 {
    display: none;
}

select#input_1_8 {
    padding: 10px 34px!important;
}
/* =========================================================================
   RESPONSIVE (mobile-first)
   ========================================================================= */

@media all and (min-width: 992px) {

	.wmoving-hero__inner {
		flex-direction: row !important;
		align-items: center !important;
		gap: 44px !important;
		padding-top: 150px !important;
		padding-bottom: 90px !important;
	}

	.wmoving-hero__form-box {
		flex: 0 0 auto !important;
	}
}

@media all and (min-width: 1297px) {
	.wmoving-hero__title { font-size: 52px !important; }
	.wmoving-hero__inner { padding-top: 170px !important; }
}

@media all and (max-width: 767px) {

	.wmoving-hero__inner {
		padding: 108px 6% 44px !important;
		gap: 28px !important;
	}

	.wmoving-hero__title { font-size: 34px !important; }

	.wmoving-hero__form-box { width: 100% !important; }

	/* Single column on mobile */
	.wmoving-hero__form .gfield {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wmoving-hero * { transition-duration: 0.01ms !important; }
}