/* --- 1. Custom Properties --- */

.kw-amenity-wrapper,
.kw-amenity-overflow {
	--kwl-am-accent: var(--kwl-accent, #BD9B5C);
	--kwl-am-icon-color: var(--kwl-am-accent);
	--kwl-am-name-color: var(--kwl-text, #1a202c);
	--kwl-am-desc-color: var(--kwl-text-muted, #718096);
	--kwl-am-pill-bg: color-mix(in srgb, var(--kwl-am-accent) 6%, transparent);
	--kwl-am-pill-border: color-mix(in srgb, var(--kwl-am-accent) 18%, transparent);
	--kwl-am-pill-radius: var(--kwl-radius-full, 9999px);
}

/* --- 2. Pills Layout --- */

.kw-layout-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-layout-pills .kw-amenity-item {
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.375rem);
	padding: 6px 14px 6px 10px;
	background: var(--kwl-am-pill-bg);
	border: 1px solid var(--kwl-am-pill-border);
	border-radius: var(--kwl-am-pill-radius);
	min-height: 44px;
	transition: background-color var(--kwl-transition, 200ms ease),
		box-shadow var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-layout-pills .kw-amenity-item:hover {
		background: color-mix(in srgb, var(--kwl-am-accent) 14%, transparent);
		box-shadow: var(--kwl-shadow-sm);
	}
}

.kw-layout-pills .kw-amenity-item:active {
	box-shadow: none;
}

/* --- 3. Columns Layout --- */

.kw-layout-columns {
	column-count: 1;
	column-gap: var(--kwl-space-md, 1rem);
}

@media (min-width: 481px) {
	.kw-layout-columns {
		column-count: 2;
	}
}

@media (min-width: 769px) {
	.kw-layout-columns {
		column-count: 3;
	}
}

.kw-layout-columns .kw-amenity-item {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-xs, 0.375rem) 0 var(--kwl-space-xs, 0.375rem) var(--kwl-space-sm, 0.5rem);
	border-bottom: 1px solid color-mix(in srgb, var(--kwl-am-accent) 12%, transparent);
	break-inside: avoid;
	min-height: 44px;
	transition: background-color var(--kwl-transition, 200ms ease);
}

.kw-layout-columns .kw-amenity-item:last-child {
	border-bottom: none;
}

@media (hover: hover) {
	.kw-layout-columns .kw-amenity-item:hover {
		background: color-mix(in srgb, var(--kwl-am-accent) 5%, transparent);
	}
}

/* --- 4. Icons Layout --- */

.kw-layout-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-layout-icons .kw-amenity-item {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--kwl-transition, 200ms ease);
}

@media (hover: hover) {
	.kw-layout-icons .kw-amenity-item:hover {
		transform: scale(1.1);
	}
}

.kw-layout-icons .kw-amenity-item:active {
	transform: scale(0.95);
}

/* --- 5. Content Wrapper --- */

.kw-layout-columns .kw-amenity-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* --- 6. Icon --- */

.kw-layout-pills .kw-amenity-icon,
.kw-layout-columns .kw-amenity-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--kwl-am-icon-color);
}

.kw-layout-pills .kw-amenity-icon svg,
.kw-layout-columns .kw-amenity-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.kw-layout-pills .kw-amenity-icon img,
.kw-layout-columns .kw-amenity-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}


.kw-layout-icons .kw-amenity-icon[data-kwl-icon-circle] {
	--kwl-icon-color: var(--kwl-am-icon-color, var(--kwl-accent, #BD9B5C));
	--kwl-icon-size: 48px;
	--kwl-icon-svg-size: 55%;
}

.kw-layout-icons .kw-amenity-icon img {
	display: block;
	width: 55%;
	height: 55%;
	object-fit: contain;
}

/* --- 7. Name --- */

.kw-amenity-name {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-medium);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-am-name-color);
	white-space: nowrap;
}

.kw-layout-columns .kw-amenity-name {
	white-space: normal;
}

/* --- 8. Description --- */

.kw-amenity-desc {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-am-desc-color);
}

/* --- 9. Focus Visible --- */

.kw-amenity-item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-am-pill-radius);
}

.kw-layout-columns .kw-amenity-item:focus-visible {
	border-radius: var(--kwl-radius-sm, 4px);
}

.kw-layout-icons .kw-amenity-item:focus-visible {
	border-radius: var(--kwl-radius-full, 9999px);
}

/* --- 10. Details Overflow (CSS-Only) --- */

.kw-amenity-details {
	interpolate-size: allow-keywords;
	display: flex;
	flex-direction: column;
}

.kw-amenity-details::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: block-size 400ms var(--kwl-ease-entrance, ease-out),
		opacity 300ms var(--kwl-ease-entrance, ease-out),
		content-visibility 400ms ease allow-discrete;
}

.kw-amenity-details[open]::details-content {
	block-size: auto;
	opacity: 1;
}

@starting-style {
	.kw-amenity-details[open]::details-content {
		block-size: 0;
		opacity: 0;
	}
}

.kw-amenity-overflow {
	margin-top: var(--kwl-space-sm, 0.5rem);
}

/* --- 11. Toggle Summary (Shared Component) --- */

.kw-amenity-toggle {
	list-style: none;
	font-size: var(--kwl-fsize-small, 0.875rem);
	order: 1;
	align-self: center;
	margin-top: var(--kwl-space-sm, 0.5rem);
}

.kw-amenity-toggle::-webkit-details-marker {
	display: none;
}

.kw-amenity-details:not([open]) .kw-amenity-toggle__less {
	display: none;
}

.kw-amenity-details[open] .kw-amenity-toggle__more {
	display: none;
}

.kw-amenity-toggle__arrow {
	font-size: 0.8em;
	display: inline-block;
	transition: transform var(--kwl-transition, 200ms ease);
}

.kw-amenity-details[open] .kw-amenity-toggle__arrow {
	transform: rotate(180deg);
}

/* --- 12. Scroll-Reveal --- */

@supports (animation-timeline: view()) {
	.kw-amenity-wrapper {
		animation: kwl-reveal-up linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 25%;
	}
}

/* --- 13. Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kw-amenity-wrapper,
	.kw-amenity-overflow {
		--kwl-am-accent: var(--kwl-accent, #d4b87a);
		--kwl-am-name-color: var(--kwl-text, #f7fafc);
		--kwl-am-desc-color: var(--kwl-text-muted, #a0aec0);
		--kwl-am-pill-bg: color-mix(in srgb, var(--kwl-am-accent) 10%, transparent);
		--kwl-am-pill-border: color-mix(in srgb, var(--kwl-am-accent) 22%, transparent);
	}

	.kw-layout-columns .kw-amenity-item {
		border-bottom-color: color-mix(in srgb, var(--kwl-am-accent) 18%, transparent);
	}

	.kw-amenity-item:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* --- 14. Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
	.kw-layout-pills .kw-amenity-item {
		transition: none;
	}

	.kw-layout-columns .kw-amenity-item {
		transition: none;
	}

	.kw-layout-icons .kw-amenity-item {
		transition: none;
	}

	@media (hover: hover) {
		.kw-layout-icons .kw-amenity-item:hover {
			transform: none;
		}
	}

	.kw-amenity-details::details-content {
		transition: none;
	}

	.kw-amenity-toggle__arrow {
		transition: none;
	}

	@supports (animation-timeline: view()) {
		.kw-amenity-wrapper {
			animation: none;
		}
	}
}

/* --- 15. V4 Focus-Reset --- */

.elementor-widget .kw-amenity-item:focus:not(:hover) {
	color: var(--kwl-am-name-color);
}