/**
 * Cascading attribute filter widget
 *
 * Layout:
 * - Desktop / tablet (≥768px): fields + button stay on ONE row (no wrap)
 * - Mobile (<768px): each field on its own row; button full width
 *
 * Visual skin:
 * - .jwt-caf--skin-theme  → inherit WoodMart / WooCommerce form + button styles
 * - .jwt-caf--skin-custom → plugin-owned look (Elementor color controls)
 */

.jwt-caf {
	--jwt-caf-gap: 12px;
	direction: rtl;
	width: 100%;
}

.jwt-caf.is-loading {
	opacity: 0.72;
	pointer-events: none;
}

/* Desktop + tablet: single horizontal row */
.jwt-caf__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: var(--jwt-caf-gap);
	width: 100%;
}

.jwt-caf__fields {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: var(--jwt-caf-gap);
	flex: 1 1 auto;
	min-width: 0;
}

.jwt-caf__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 0;
	min-width: 0;
}

.jwt-caf__label {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.jwt-caf__select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.jwt-caf__select:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.jwt-caf__footer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 10px;
	flex: 0 0 auto;
	margin: 0;
}

.jwt-caf__count {
	font-size: 13px;
	color: #666;
	white-space: nowrap;
	align-self: center;
}

.jwt-caf__submit {
	flex: 0 0 auto;
	white-space: nowrap;
	max-width: 100%;
}

.jwt-caf__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.jwt-caf__status {
	margin-top: 8px;
	font-size: 12px;
	color: #666;
}

.jwt-caf__status.is-error {
	color: #b42318;
}

.jwt-caf--empty {
	padding: 12px 14px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #646970;
	font-size: 13px;
}

/* --- Theme skin --- */
.jwt-caf--skin-theme .jwt-caf__label {
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
}

.jwt-caf--skin-theme .jwt-caf__select--theme {
	min-height: 0;
	appearance: auto;
	-webkit-appearance: menulist;
	background-image: none;
}

.jwt-caf--skin-theme .jwt-caf__submit.btn,
.jwt-caf--skin-theme .jwt-caf__submit.button {
	cursor: pointer;
}

/* --- Custom skin --- */
.jwt-caf--skin-custom .jwt-caf__label {
	color: #222;
}

.jwt-caf--skin-custom .jwt-caf__select {
	min-height: 44px;
	padding: 0.55rem 2rem 0.55rem 0.75rem;
	border: 1px solid #d7d7d7;
	border-radius: 8px;
	background-color: #fff;
	color: #222;
	font-size: 14px;
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333333' d='M1.4 0.6L6 5.2 10.6 0.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 10px 7px;
}

.jwt-caf--skin-custom .jwt-caf__select:disabled {
	background-color: #f5f5f5;
}

.jwt-caf--skin-custom .jwt-caf__submit {
	border: 0;
	border-radius: 8px;
	min-height: 44px;
	padding: 0 22px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	background-color: #e31c23;
	color: #fff;
}

/* Mobile: one field per row */
@media (max-width: 767px) {
	.jwt-caf__row {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.jwt-caf__fields {
		flex-direction: column;
		flex-wrap: nowrap;
		width: 100%;
	}

	.jwt-caf__field {
		flex: none;
		width: 100%;
	}

	.jwt-caf__label {
		white-space: normal;
	}

	.jwt-caf__footer {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.jwt-caf__count {
		align-self: flex-start;
	}

	.jwt-caf__submit {
		width: 100%;
	}
}