/* Costa Rica Luxe Adventures — Cotizador — Frontend */
.crlq-form-wrap {
	--crlq-primary: #254A42;
	--crlq-accent: #A0522D;
	--crlq-olive: #8A8752;
	--crlq-slate: #6E8B94;
	--crlq-bg: #FBF8F3;
	--crlq-border: #E4DFD3;
	--crlq-radius: 14px;

	/* Colores de texto personalizables (con valores por defecto de respaldo) */
	--crlq-heading-color: var(--crlq-primary);
	--crlq-text-color: #1F2D2A;
	--crlq-muted-color: #7C7A70;
	--crlq-price-color: var(--crlq-accent);
	--crlq-button-text-color: #FFFFFF;
	--crlq-header-title-color: #FFFFFF;
	--crlq-header-subtitle-color: #FFFFFF;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--crlq-text-color);
	max-width: 720px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(31, 45, 42, 0.08);
	overflow: hidden;
	box-sizing: border-box;
}
.crlq-form-wrap *, .crlq-form-wrap *::before, .crlq-form-wrap *::after { box-sizing: border-box; }

.crlq-form-header {
	background: linear-gradient(135deg, var(--crlq-primary) 0%, #1a3830 100%);
	padding: 32px 30px 26px;
	text-align: center;
}
.crlq-form-title { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: 0.2px; color: var(--crlq-header-title-color); }
.crlq-form-subtitle { margin: 0; font-size: 15px; color: var(--crlq-header-subtitle-color); opacity: .9; }

.crlq-form { padding: 26px 28px 30px; background: var(--crlq-bg); }

.crlq-noscript { padding: 16px; background: #fff3cd; color: #856404; }

/* Progress steps */
.crlq-progress {
	display: flex;
	justify-content: space-between;
	margin-bottom: 26px;
	position: relative;
}
.crlq-progress::before {
	content: "";
	position: absolute;
	top: 14px; left: 5%; right: 5%;
	height: 2px;
	background: var(--crlq-border);
	z-index: 0;
}
.crlq-progress-step {
	position: relative;
	z-index: 1;
	width: 28px; height: 28px;
	background: #fff;
	border: 2px solid var(--crlq-border);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; color: var(--crlq-muted-color);
	flex-direction: column;
}
.crlq-progress-step em { display: none; }
.crlq-progress-step.is-active, .crlq-progress-step.is-done {
	border-color: var(--crlq-primary);
	background: var(--crlq-primary);
	color: var(--crlq-button-text-color);
}
.crlq-progress-step.is-done { background: var(--crlq-accent); border-color: var(--crlq-accent); }

.crlq-section-title { font-size: 18px; margin: 0 0 14px; color: var(--crlq-heading-color); font-weight: 700; }
.crlq-section-title small { color: var(--crlq-muted-color); font-weight: 400; font-size: 13px; }
.crlq-hint { margin: -8px 0 14px; font-size: 13px; color: var(--crlq-muted-color); }

.crlq-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.crlq-grid-2 { grid-template-columns: 1fr 1fr; }
.crlq-grid-1 { grid-template-columns: 1fr; }

.crlq-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--crlq-text-color); }
.crlq-field label em { color: var(--crlq-accent); font-style: normal; }

.crlq-form input[type=text],
.crlq-form input[type=email],
.crlq-form input[type=tel],
.crlq-form input[type=number],
.crlq-form input[type=date],
.crlq-form input[type=time],
.crlq-form select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--crlq-border);
	border-radius: 10px;
	font-size: 14.5px;
	background: #fff;
	color: var(--crlq-text-color);
	transition: border-color .15s, box-shadow .15s;
}
.crlq-form input:focus, .crlq-form select:focus {
	outline: none;
	border-color: var(--crlq-primary);
	box-shadow: 0 0 0 3px rgba(37, 74, 66, 0.12);
}
.crlq-form input:invalid:not(:placeholder-shown) { border-color: #d9534f; }

.crlq-phone-group { display: flex; gap: 8px; }
.crlq-phone-group select { flex: 0 0 46%; }
.crlq-phone-group input { flex: 1; }

/* Radio cards (trip type / service type) */
.crlq-trip-type-selector, .crlq-service-type-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-bottom: 18px;
}
.crlq-radio-card {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	text-align: center;
	padding: 14px 8px;
	border: 1.5px solid var(--crlq-border);
	border-radius: 12px;
	cursor: pointer;
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--crlq-text-color);
	transition: all .15s;
}
.crlq-radio-card input { position: absolute; opacity: 0; }
.crlq-radio-card:hover { border-color: var(--crlq-primary); }
.crlq-radio-card:has(input:checked) {
	border-color: var(--crlq-primary);
	background: rgba(37, 74, 66, 0.07);
	color: var(--crlq-heading-color);
	box-shadow: 0 0 0 1px var(--crlq-primary) inset;
}

/* Legs (origin/destination blocks) */
.crlq-leg {
	background: #fff;
	border: 1.5px solid var(--crlq-border);
	border-radius: var(--crlq-radius);
	padding: 18px;
	margin-bottom: 14px;
	position: relative;
}
.crlq-leg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.crlq-leg-header strong { color: var(--crlq-heading-color); font-size: 14px; }
.crlq-leg-remove {
	background: none; border: none; color: var(--crlq-accent); cursor: pointer; font-size: 13px; font-weight: 600;
}
.crlq-flight-fields {
	margin-top: 12px;
	padding: 12px;
	background: rgba(110, 139, 148, 0.08);
	border-radius: 10px;
	border: 1px dashed var(--crlq-slate);
}
.crlq-flight-fields-title { font-size: 12.5px; font-weight: 700; color: var(--crlq-slate); margin-bottom: 8px; display:flex; align-items:center; gap:6px; }

.crlq-return-fields { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--crlq-border); }

/* Amenities */
.crlq-amenities-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.crlq-amenity-card {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: center;
	border: 1.5px solid var(--crlq-border);
	border-radius: 12px;
	padding: 10px;
	background: #fff;
	cursor: pointer;
	transition: all .15s;
}
.crlq-amenity-card:hover { border-color: var(--crlq-olive); }
.crlq-amenity-card.is-checked { border-color: var(--crlq-primary); background: rgba(37,74,66,.06); }
.crlq-amenity-thumb {
	width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--crlq-border);
}
.crlq-amenity-thumb.is-placeholder { display:flex; align-items:center; justify-content:center; font-size: 20px; }
.crlq-amenity-info { flex: 1; }
.crlq-amenity-name { font-size: 13.5px; font-weight: 700; display:block; color: var(--crlq-text-color); }
.crlq-amenity-price { font-size: 12px; font-weight: 700; }
.crlq-amenity-price.is-free { color: var(--crlq-olive); }
.crlq-amenity-price.is-paid { color: var(--crlq-price-color); }
.crlq-amenity-check { position: absolute; opacity: 0; }

/* Vehicle / price card */
.crlq-vehicle-card {
	display: flex;
	gap: 16px;
	background: #fff;
	border: 1.5px solid var(--crlq-border);
	border-radius: var(--crlq-radius);
	padding: 18px;
	align-items: center;
}
.crlq-vehicle-image { width: 130px; height: 100px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--crlq-border); }
.crlq-vehicle-image.is-placeholder { display:flex; align-items:center; justify-content:center; font-size: 34px; }
.crlq-vehicle-name { font-size: 17px; font-weight: 800; color: var(--crlq-heading-color); margin: 0 0 4px; }
.crlq-vehicle-range { font-size: 12px; color: var(--crlq-muted-color); margin-bottom: 6px; }
.crlq-vehicle-desc { font-size: 13px; color: var(--crlq-muted-color); margin-bottom: 8px; }
.crlq-vehicle-price { font-size: 22px; font-weight: 800; color: var(--crlq-price-color); }
.crlq-vehicle-price small { font-size: 12px; font-weight: 500; color: var(--crlq-muted-color); display:block; }
.crlq-price-loading, .crlq-price-unavailable {
	padding: 14px; text-align: center; color: var(--crlq-muted-color); font-size: 14px;
}

/* Buttons */
.crlq-btn-primary, .crlq-btn-secondary, .crlq-btn-ghost {
	border: none;
	border-radius: 10px;
	padding: 13px 22px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .1s, box-shadow .15s, opacity .15s;
}
.crlq-btn-primary { background: var(--crlq-accent); color: var(--crlq-button-text-color); box-shadow: 0 6px 16px rgba(160,82,45,.28); }
.crlq-btn-primary:hover { transform: translateY(-1px); }
.crlq-btn-primary:disabled { opacity: .6; cursor: not-allowed; transform:none; }
.crlq-btn-secondary { background: rgba(37,74,66,.08); color: var(--crlq-heading-color); width: 100%; margin-top: 4px; }
.crlq-btn-ghost { background: transparent; color: var(--crlq-heading-color); text-decoration: underline; padding-left: 4px; }

.crlq-step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap:10px; }
.crlq-step-actions-final { flex-direction: column-reverse; align-items: stretch; }
.crlq-step-actions-final .crlq-btn-submit { width: 100%; padding: 15px; font-size: 15.5px; }
.crlq-step-actions-final .crlq-btn-ghost { align-self: center; }

.crlq-form-message { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; display:none; }
.crlq-form-message.is-success { display:block; background: #E4EFE9; color: #1c4a34; }
.crlq-form-message.is-error { display:block; background: #FBE4E1; color: #8a2f24; }

@media (max-width: 600px) {
	.crlq-form-wrap { border-radius: 0; }
	.crlq-form { padding: 20px 16px 24px; }
	.crlq-form-header { padding: 26px 18px 22px; }
	.crlq-form-title { font-size: 21px; }
	.crlq-grid-2 { grid-template-columns: 1fr; }
	.crlq-trip-type-selector, .crlq-service-type-selector { grid-template-columns: 1fr; }
	.crlq-amenities-grid { grid-template-columns: 1fr; }
	.crlq-vehicle-card { flex-direction: column; text-align: center; }
	.crlq-vehicle-image { width: 100%; height: 140px; }
	.crlq-phone-group { flex-direction: column; }
	.crlq-phone-group select { flex: 1; }
	.crlq-step-actions:not(.crlq-step-actions-final) { flex-direction: row; }
}

/* Leyenda / Términos y Condiciones */
.crlq-legal-footer {
	padding: 16px 28px 26px;
	background: var(--crlq-bg);
	border-top: 1px solid var(--crlq-border);
	text-align: center;
}
.crlq-legend-text {
	font-size: 12px;
	line-height: 1.5;
	color: var(--crlq-muted-color);
	max-width: 560px;
	margin: 0 auto 12px;
}
.crlq-terms-link {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--crlq-heading-color);
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 4px 6px;
}
.crlq-terms-link:hover { color: var(--crlq-accent); }

@media (max-width: 600px) {
	.crlq-legal-footer { padding: 14px 16px 22px; }
}

/* Botón alternativo para abrir WhatsApp manualmente (respaldo visible) */
.crlq-wa-fallback-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
	text-decoration: none;
	background: #25D366;
	color: #fff !important;
	box-shadow: 0 6px 16px rgba(37, 211, 102, .3);
}
.crlq-wa-fallback-btn:hover { opacity: .92; }

/* Desglose del precio (traslado + amenidades) */
.crlq-price-breakdown {
	font-size: 12.5px;
	color: var(--crlq-muted-color);
	margin: 4px 0 2px;
}
.crlq-price-breakdown span { display: block; }