/* =============================================================================
   Kuiraweb Quote Wizard  —  estilos con alta especificidad para sobrevivir
   a Woodmart y otros temas.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Reset base del contenedor
   --------------------------------------------------------------------------- */

#kuiraweb-wizard,
#kuiraweb-wizard * {
	box-sizing: border-box;
}

#kuiraweb-wizard {
	margin: 0 0 28px !important;
	padding: 0 !important;
	font-family: inherit;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Barra de progreso
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-progress {
	display: flex !important;
	align-items: flex-start !important;
	margin: 0 0 28px !important;
	padding: 0 !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	list-style: none !important;
	background: none !important;
	border: none !important;
}

#kuiraweb-wizard .kw-progress__item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	flex: 1 !important;
	min-width: 0;
	position: relative;
	text-align: center;
	padding: 0 !important;
	margin: 0 !important;
}

/* Línea entre dots */
#kuiraweb-wizard .kw-progress__item:not(:last-child)::after {
	content: '' !important;
	position: absolute !important;
	top: 11px !important;
	left: calc(50% + 13px) !important;
	right: calc(-50% + 13px) !important;
	height: 2px !important;
	background: #e2e8f0 !important;
	transition: background 0.3s;
	display: block !important;
}

#kuiraweb-wizard .kw-progress__item.is-done:not(:last-child)::after {
	background: var(--rfq-primary, #237a9e) !important;
}

#kuiraweb-wizard .kw-progress__dot {
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	background: #e2e8f0 !important;
	border: 2px solid #e2e8f0 !important;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	margin: 0 0 6px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.25s, border-color 0.25s;
}

#kuiraweb-wizard .kw-progress__item.is-active .kw-progress__dot {
	background: var(--rfq-primary, #237a9e) !important;
	border-color: var(--rfq-primary, #237a9e) !important;
}

#kuiraweb-wizard .kw-progress__item.is-done .kw-progress__dot {
	background: var(--rfq-primary, #237a9e) !important;
	border-color: var(--rfq-primary, #237a9e) !important;
}

#kuiraweb-wizard .kw-progress__item.is-done .kw-progress__dot::after {
	content: '✓' !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	display: block !important;
}

#kuiraweb-wizard .kw-progress__label {
	display: block !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #a0aec0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 72px;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

#kuiraweb-wizard .kw-progress__item.is-active .kw-progress__label,
#kuiraweb-wizard .kw-progress__item.is-done .kw-progress__label {
	color: var(--rfq-primary, #237a9e) !important;
	font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
   Paso actual
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-step {
	animation: kwFadeIn 0.2s ease;
}

@keyframes kwFadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: translateY(0); }
}

#kuiraweb-wizard .kw-step__title {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #1a202c !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	line-height: 1.4 !important;
	border: none !important;
	background: none !important;
}

/* ---------------------------------------------------------------------------
   Grid de opciones
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-options {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
	gap: 10px !important;
	margin: 0 0 20px !important;
	padding: 0 !important;
	list-style: none !important;
}

#kuiraweb-wizard .kw-options--color {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
}

/* ---------------------------------------------------------------------------
   Tarjeta de opción
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-card {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 16px 10px !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: 60px;

	background: #ffffff !important;
	border: 2px solid #e2e8f0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;

	cursor: pointer;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	color: #2d3748 !important;
	text-align: center !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;

	transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s, background 0.18s;

	/* Reset herencia del tema */
	outline: none;
	appearance: none;
	-webkit-appearance: none;
}

#kuiraweb-wizard .kw-card:hover {
	border-color: var(--rfq-primary, #237a9e) !important;
	box-shadow: 0 3px 12px rgba(0,0,0,0.1) !important;
	transform: translateY(-2px) !important;
	color: var(--rfq-primary, #237a9e) !important;
}

#kuiraweb-wizard .kw-card.kw-card--selected {
	border-color: var(--rfq-primary, #237a9e) !important;
	background: #edf6fb !important;
	color: var(--rfq-primary, #237a9e) !important;
	font-weight: 700 !important;
	box-shadow: 0 0 0 3px rgba(35,122,158,0.15) !important;
	transform: none !important;
}

#kuiraweb-wizard .kw-card--custom {
	border-style: dashed !important;
}

#kuiraweb-wizard .kw-card__label {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Swatch de color */
#kuiraweb-wizard .kw-card__swatch {
	display: block !important;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	border: 2px solid rgba(0,0,0,0.12) !important;
	flex-shrink: 0;
	margin: 0 !important;
}

#kuiraweb-wizard .kw-card__swatch--rainbow {
	background: conic-gradient(#f44336, #ff9800, #ffeb3b, #4caf50, #2196f3, #9c27b0, #f44336) !important;
}

/* ---------------------------------------------------------------------------
   Formulario de color personalizado
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-custom-form {
	grid-column: 1 / -1;
	margin-top: 6px !important;
	padding: 18px 20px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	animation: kwFadeIn 0.2s ease;
}

#kuiraweb-wizard .kw-custom-form__title {
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	color: #2d3748 !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
	display: block !important;
}

#kuiraweb-wizard .kw-custom-form__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
	gap: 14px !important;
}

#kuiraweb-wizard .kw-custom-form__field {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: #2d3748 !important;
	margin: 0 !important;
}

#kuiraweb-wizard .kw-custom-form__field span {
	display: block !important;
	font-size: 0.82rem !important;
	font-weight: 600 !important;
	color: #4a5568 !important;
	margin: 0 !important;
	padding: 0 !important;
}

#kuiraweb-wizard .kw-custom-input {
	display: block !important;
	width: 100% !important;
	padding: 8px 11px !important;
	border: 1px solid #cbd5e0 !important;
	border-radius: 6px !important;
	font-size: 0.82rem !important;
	color: #2d3748 !important;
	background: #fff !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#kuiraweb-wizard .kw-custom-input:focus {
	outline: none !important;
	border-color: var(--rfq-primary, #237a9e) !important;
	box-shadow: 0 0 0 3px rgba(35,122,158,0.15) !important;
}

#kuiraweb-wizard .kw-custom-input.kw-input--error {
	border-color: #e53e3e !important;
	box-shadow: 0 0 0 3px rgba(229,62,62,0.15) !important;
}

#kuiraweb-wizard .kw-custom-input--file {
	padding: 5px 8px !important;
	cursor: pointer;
}

#kuiraweb-wizard .kw-req {
	color: #e53e3e !important;
	font-style: normal !important;
}

/* ---------------------------------------------------------------------------
   Botones de navegación
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-nav {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 4px 0 0 !important;
	padding: 0 !important;
}

#kuiraweb-wizard .kw-nav__back.kw-hidden,
#kuiraweb-wizard .kw-nav__next.kw-hidden {
	display: none !important;
}

#kuiraweb-wizard .kw-nav__back,
#kuiraweb-wizard .kw-nav__next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 120px !important;
	padding: 10px 22px !important;
	border-radius: 6px !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, opacity 0.2s;
	text-decoration: none !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

#kuiraweb-wizard .kw-nav__back {
	background: transparent !important;
	color: #718096 !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: none !important;
}

#kuiraweb-wizard .kw-nav__back:hover {
	background: #f7fafc !important;
	border-color: #cbd5e0 !important;
}

#kuiraweb-wizard .kw-nav__next {
	background: var(--rfq-primary, #237a9e) !important;
	color: #fff !important;
	border: 1px solid var(--rfq-primary, #237a9e) !important;
	box-shadow: 0 2px 8px rgba(35,122,158,0.25) !important;
}

#kuiraweb-wizard .kw-nav__next:hover:not(:disabled) {
	filter: brightness(1.1) !important;
}

#kuiraweb-wizard .kw-nav__next:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   Resumen
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-step--summary .kw-step__title {
	margin-bottom: 18px !important;
}

#kuiraweb-wizard .kw-summary {
	list-style: none !important;
	margin: 0 0 22px !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

#kuiraweb-wizard .kw-summary__item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	background: #fff !important;
	border-radius: 8px !important;
	border-left: 3px solid var(--rfq-primary, #237a9e) !important;
	box-shadow: 0 1px 6px rgba(0,0,0,0.07) !important;
}

#kuiraweb-wizard .kw-summary__attr {
	font-weight: 700 !important;
	font-size: 0.88rem !important;
	color: #2d3748 !important;
}

#kuiraweb-wizard .kw-summary__val {
	font-size: 0.88rem !important;
	color: var(--rfq-primary, #237a9e) !important;
	font-weight: 500 !important;
}

/* ---------------------------------------------------------------------------
   Botones de acción (resumen)
   --------------------------------------------------------------------------- */

#kuiraweb-wizard .kw-actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
}

#kuiraweb-wizard .kw-action-form,
#kuiraweb-wizard .kw-action-wa {
	flex: 1 !important;
	min-width: 150px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 12px 20px !important;
	border-radius: 6px !important;
	font-size: 0.9rem !important;
	font-weight: 600 !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: filter 0.2s;
	letter-spacing: 0 !important;
	text-transform: none !important;
	line-height: 1.4 !important;
}

#kuiraweb-wizard .kw-action-form {
	background: var(--rfq-primary, #237a9e) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(35,122,158,0.25) !important;
}

#kuiraweb-wizard .kw-action-form:hover {
	filter: brightness(1.1) !important;
	color: #fff !important;
}

#kuiraweb-wizard .kw-action-wa {
	background: #25d366 !important;
	color: #fff !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba(37,211,102,0.25) !important;
}

#kuiraweb-wizard .kw-action-wa:hover {
	filter: brightness(1.07) !important;
	color: #fff !important;
}

#kuiraweb-wizard .kw-action-form:disabled {
	opacity: 0.55 !important;
	cursor: not-allowed !important;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
	#kuiraweb-wizard .kw-progress__label {
		display: none !important;
	}

	#kuiraweb-wizard .kw-options,
	#kuiraweb-wizard .kw-options--color {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	#kuiraweb-wizard .kw-custom-form__grid {
		grid-template-columns: 1fr !important;
	}

	#kuiraweb-wizard .kw-actions {
		flex-direction: column !important;
	}

	#kuiraweb-wizard .kw-action-form,
	#kuiraweb-wizard .kw-action-wa {
		min-width: 0 !important;
	}
}