/* ==========================================================================
   HKN Energy — reusable form components (Cotiza tu Proyecto, Partners, …)
   ========================================================================== */

.hkn-form-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: var(--space-5);
}

.hkn-form-field label {
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hkn-gray-600);
}

.hkn-form-field input[type="text"],
.hkn-form-field input[type="email"],
.hkn-form-field input[type="tel"],
.hkn-form-field input[type="password"],
.hkn-form-field select,
.hkn-form-field textarea {
	border: var(--border-hair);
	border-radius: var(--radius-sm);
	padding: 0.85em 1em;
	font-size: var(--fs-small);
	background: #fff;
	color: var(--hkn-text);
}

.hkn-form-field input:focus,
.hkn-form-field select:focus,
.hkn-form-field textarea:focus {
	outline: 2px solid var(--hkn-blue);
	outline-offset: 1px;
	border-color: transparent;
}

.hkn-form-field textarea {
	resize: vertical;
	min-height: 100px;
}

.hkn-form-field--hint {
	font-size: var(--fs-metadata);
	color: var(--hkn-gray-600);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.hkn-address-map {
	width: 100%;
	height: 220px;
	border-radius: var(--radius-md);
	border: var(--border-hair);
	margin-top: var(--space-3);
	background: var(--hkn-off-white);
}

/* Google injects its own dropdown outside our DOM tree; keep it above the
   drawer/sticky headers and legible against our type scale. */
.pac-container {
	z-index: 1200;
	font-family: var(--font-body);
}

.hkn-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

@media (max-width: 640px) {
	.hkn-form-row {
		grid-template-columns: 1fr;
	}
}

.hkn-option-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

@media (max-width: 640px) {
	.hkn-option-cards {
		grid-template-columns: 1fr;
	}
}

.hkn-option-card {
	position: relative;
}

.hkn-option-card input {
	position: absolute;
	opacity: 0;
}

.hkn-option-card span {
	/* display:flex (not text-align:center) because the icon is an <svg>,
	   and base.css sets svg { display: block } globally — a block-level
	   child ignores its parent's text-align, so centering needs flexbox
	   regardless of what the icon itself is. */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-align: center;
	border: var(--border-hair);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--hkn-gray-600);
	cursor: pointer;
	transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.hkn-option-card .hkn-icon { width: 24px; height: 24px; }

.hkn-option-card input:checked+span {
	border-color: var(--hkn-blue);
	color: var(--hkn-text);
	background: rgba(47, 93, 250, 0.05);
}

.hkn-option-card input:focus-visible+span {
	outline: 2px solid var(--hkn-blue);
	outline-offset: 2px;
}

.hkn-upload {
	border: 1.5px dashed var(--hkn-gray-300);
	border-radius: var(--radius-md);
	padding: var(--space-6);
	text-align: center;
	color: var(--hkn-gray-600);
	position: relative;
	cursor: pointer;
	transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.hkn-upload:hover,
.hkn-upload.is-dragover {
	border-color: var(--hkn-blue);
	background: rgba(47, 93, 250, 0.03);
}

.hkn-upload input[type="file"] {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.hkn-upload .hkn-icon {
	margin: 0 auto var(--space-3);
	opacity: 0.6;
}

.hkn-upload__title {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--hkn-text);
}

.hkn-upload__hint {
	font-size: var(--fs-metadata);
	margin-top: 4px;
}

.hkn-upload__list {
	list-style: none;
	padding: 0;
	margin-top: var(--space-3);
	text-align: left;
}

.hkn-upload__list li {
	font-size: var(--fs-metadata);
	padding: 4px 0;
	color: var(--hkn-text);
}

/* Multi-step progress */
.hkn-steps-nav {
	display: flex;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.hkn-steps-nav__item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-bottom: var(--space-4);
	border-bottom: 2px solid var(--hkn-gray-100);
	color: var(--hkn-gray-600);
	font-size: var(--fs-small);
	font-weight: 600;
}

.hkn-steps-nav__item.is-active {
	border-color: var(--hkn-blue);
	color: var(--hkn-text);
}

.hkn-steps-nav__item.is-done {
	border-color: var(--hkn-green);
	color: var(--hkn-text);
}

.hkn-steps-nav__num {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.hkn-form-step {
	display: none;
}

.hkn-form-step.is-active {
	display: block;
}

.hkn-form-step__actions {
	display: flex;
	justify-content: space-between;
	margin-top: var(--space-7);
}

/* Status badge — shared across orders, quotes, payments, partner apps */
.hkn-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--fs-metadata);
	font-weight: 700;
	padding: 0.3em 0.8em;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hkn-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.hkn-status--neutral {
	background: var(--hkn-gray-100);
	color: var(--hkn-gray-600);
}

.hkn-status--progress {
	background: rgba(47, 93, 250, 0.1);
	color: var(--hkn-blue);
}

.hkn-status--success {
	background: rgba(164, 230, 53, 0.18);
	color: #4d7a0f;
}

.hkn-status--warning {
	background: #fdf1e0;
	color: #a15c00;
}

.hkn-status--danger {
	background: #fde8e8;
	color: #c0362c;
}

.hkn-icon--flip {
	transform: scaleX(-1);
}

/* Shared "form page" layout: hero + form/sidebar (Cotiza tu Proyecto, Partners).
   The background-image itself is set inline per page from an ACF field
   (hkn_cotiza_hero_image / hkn_partners_hero_image, each falling back to
   the original hero-instaladores.webp when unset) — not hardcoded here,
   so each page can have its own hero image. */
.hkn-quote-hero {
	background-color: var(--hkn-off-white);
	padding-block: var(--space-8) var(--space-7);
	border-bottom: var(--border-hair);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
}

@media screen and (min-width: 1200px) {
	.hkn-quote-hero {
		min-height: 546px;
	}
}

.hkn-quote-hero h1 {
	margin-top: var(--space-3);
	max-width: 13ch;
	font-size: 4rem;
	line-height: 90%;
}

.hkn-quote-hero h1 span {
	color: var(--hkn-blue);
}

.hkn-quote-hero__lead {
	max-width: 40ch;
	color: var(--hkn-gray-600);
	margin-top: var(--space-4);
	font-size: var(--fs-body-lg);
}

/* Last step of a multistep form (cotiza): the photo steps aside so the
   contact fields get the page. Toggled by main.js on [data-last-step]. */
.hkn-quote-hero.is-image-hidden {
	background-image: none;
}
.hkn-quote-hero.is-image-hidden::before {
	display: none;
}

@media (max-width: 640px) {
	.hkn-quote-hero {
		position: relative;
		isolation: isolate;
		background-size: cover;
		background-position: center;
		padding-block: var(--space-7) var(--space-6);
	}
	.hkn-quote-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(180deg, rgba(245, 243, 238, 0.9) 0%, rgba(245, 243, 238, 0.82) 100%);
	}
	.hkn-quote-hero .hkn-container {
		position: relative;
		z-index: 1;
	}
	.hkn-quote-hero h1 {
		font-size: 2.4rem;
		line-height: 1.05;
		max-width: none;
	}
	.hkn-quote-hero__lead {
		font-size: var(--fs-small);
		max-width: none;
	}

	.hkn-steps-nav {
		gap: var(--space-2);
		margin-bottom: var(--space-6);
	}
	.hkn-steps-nav__item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-2);
		min-width: 0;
		font-size: 12px;
		line-height: 1.25;
		padding-bottom: var(--space-3);
	}
	.hkn-steps-nav__num {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}
}

/* Autoscroll target for the announce bar's "Postula al programa Partners"
   link (#hkn-partner-form) — offset for .hkn-header's sticky height so the
   form doesn't land hidden under it. */
#hkn-partner-form { scroll-margin-top: 100px; }
#hkn-cotiza-form { scroll-margin-top: 100px; }

.hkn-quote-form-wrap {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--space-8);
	align-items: start;
}

.hkn-quote-form-wrap form {
	background: #fff;
	border: var(--border-hair);
	border-radius: var(--radius-lg);
	padding: var(--space-7);
}

/* Contact Form 7 (Contacto) — CF7 ships no CSS of its own by design, so
   every rule here is new; the HKN visual language (tokens, spacing,
   button style) is the same one every other form on the site already
   uses, just applied to CF7's own markup/class names instead of
   .hkn-form-field's (CF7 nests the control inside <label>, not as a
   sibling, so the selectors differ even though the look matches). */
.wpcf7-form p { margin: 0 0 var(--space-5); }
.wpcf7-form label {
	display: block;
	font-size: var(--fs-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hkn-gray-600);
}
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 7px; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	display: block;
	width: 100%;
	border: var(--border-hair);
	border-radius: var(--radius-sm);
	padding: 0.85em 1em;
	font-size: var(--fs-small);
	font-family: var(--font-body);
	background: #fff;
	color: var(--hkn-text);
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--hkn-blue);
	outline-offset: 1px;
	border-color: transparent;
}
.wpcf7-form textarea { resize: vertical; min-height: 120px; }

.wpcf7-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--fs-small);
	padding: 0.9em 1.6em;
	border-radius: var(--radius-md);
	border: none;
	background: var(--hkn-navy);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
	margin-top: var(--space-2);
}
.wpcf7-form input[type="submit"]:hover { background: #000; }
.wpcf7-form input[type="submit"]:disabled { opacity: 0.6; cursor: default; }

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	color: #c0362c;
	font-size: var(--fs-metadata);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin-top: 6px;
}
.wpcf7-form .wpcf7-response-output {
	border-radius: var(--radius-sm);
	padding: var(--space-3) var(--space-4);
	font-size: var(--fs-small);
	margin: var(--space-5) 0 0;
}
.wpcf7-form.sent .wpcf7-response-output { border: 1px solid #1a6b1a; background: #eafbe7; color: #1a6b1a; }
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output { border: 1px solid #c0362c; background: #fde8e8; color: #c0362c; }
.wpcf7-form.invalid .wpcf7-response-output { border: 1px solid #8a5a00; background: #fcf0d9; color: #8a5a00; }
.wpcf7-form .wpcf7-spinner { margin-left: var(--space-3); }

.hkn-quote-sidebar__card {
	background: var(--hkn-off-white);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	position: sticky;
	top: calc(var(--space-6) + 76px);
}

.hkn-quote-sidebar__card h3 {
	font-size: 1.05rem;
	margin-bottom: var(--space-4);
}

.hkn-quote-sidebar__card p {
	font-size: var(--fs-small);
	color: var(--hkn-gray-600);
	margin-top: var(--space-5);
}

.hkn-contact-details { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.hkn-contact-details li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); }
.hkn-contact-details .hkn-icon { flex-shrink: 0; color: var(--hkn-blue); }
.hkn-contact-details a:hover { color: var(--hkn-blue); }

@media (max-width: 900px) {
	.hkn-quote-form-wrap {
		grid-template-columns: 1fr;
	}

	.hkn-quote-form-wrap form {
		padding: var(--space-5);
	}
}

.hkn-form-section-title {
	font-size: var(--fs-eyebrow);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hkn-blue);
	margin: var(--space-7) 0 var(--space-5);
	padding-top: var(--space-6);
	border-top: var(--border-hair);
}

.hkn-form-section-title:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Mis Presupuestos — accept/reject an emitted COTIZAINSTA proposal.
   Reuses .hkn-btn / .hkn-form-field / .hkn-form-step__actions as-is. */
.hkn-cotiza-decision {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: var(--border-hair);
}

.hkn-cotiza-decision__actions {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.hkn-cotiza-decision__panel {
	max-width: 48ch;
}

.hkn-partner-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	padding-bottom: var(--space-8);
	border-bottom: var(--border-hair);
}

.hkn-partner-benefit {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
	padding: 0 1rem;
	border-right: 1px solid #ccc;
}

.hkn-partner-benefits .hkn-partner-benefit:last-child {
	border-right: 0 none;
}

.hkn-partner-benefit .hkn-icon {
	color: var(--hkn-blue);
	margin-bottom: var(--space-3);
	height: 60px;
	width: 60px;
	color: var(--hkn-navy-700);
}

.hkn-partner-benefit h3 {
	font-size: 1.05rem;
	margin-bottom: var(--space-2);
}

.hkn-partner-benefit p {
	font-size: var(--fs-small);
	color: var(--hkn-gray-600);
}

@media (max-width: 780px) {
	.hkn-partner-benefits {
		grid-template-columns: 1fr;
	}
}
/* Process explanation under the cotiza form (Sprint 6B.5). Horizontal
   numbered line on desktop, stacked list on phones. */
.hkn-process {
	padding-block: var(--space-7) var(--space-8);
	border-top: var(--border-hair);
}
.hkn-process__title { margin: var(--space-3) 0 var(--space-6); font-size: 1.6rem; max-width: 30ch; }
.hkn-process__steps {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0;
	counter-reset: none;
}
.hkn-process__step {
	position: relative;
	padding: var(--space-4) var(--space-4) 0 0;
	border-top: 2px solid var(--hkn-gray-100);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}
.hkn-process__step::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 40px;
	height: 2px;
	background: var(--hkn-blue);
}
.hkn-process__num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--fs-small);
	color: var(--hkn-blue);
}
.hkn-process__name { font-size: var(--fs-small); color: var(--hkn-text); }
.hkn-process__body { font-size: var(--fs-metadata); color: var(--hkn-gray-600); line-height: 1.5; }

@media (max-width: 900px) {
	.hkn-process__steps { grid-template-columns: 1fr; gap: var(--space-5); }
	.hkn-process__step { padding-right: 0; }
}