/*------------------------------- Custom Select --------------------------------------------*/

:root {
	--cs-bg: #fff; --cs-border: #ccc; --cs-hover: #f0f0f0;
	--cs-active: #007bff; --cs-text: #333; --cs-disabled: #999;
	--cs-radius: 6px; --cs-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/*
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: system-ui, -apple-system, sans-serif;
	background: #f8f9fa; color: var(--cs-text);
	padding: 24px; line-height: 1.5;
}
.wrap { max-width: 800px; margin: 0 auto; display: grid; gap: 20px; }
.card {
	background: var(--cs-bg); border-radius: var(--cs-radius);
	padding: 16px 20px; box-shadow: var(--cs-shadow);
}
.card h3 { margin: 0 0 8px; font-size: 1rem; color: #222; }
.card p { margin: 0 0 12px; font-size: 0.85rem; color: #666; }
label { display: block; font-size: 0.9rem; margin: 0 0 6px; color: #444; }
*/
/* === Custom Select Styles === */
.custom-select-container { position: relative; width: 100%; max-width: 360px; user-select: none; }
.select-selected {
	background: var(--cs-bg); border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius); padding: 10px 32px 10px 12px;
	cursor: pointer; position: relative; transition: border-color 0.2s;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 769px) {
	.select-selected:hover { border-color: #999; }
}
.select-selected::after {
	content: ''; position: absolute; right: 12px; top: 50%;
	transform: translateY(-50%); width: 0; height: 0;
	border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid #666; transition: transform 0.2s;
}
.custom-select-container.open .select-selected::after {
	transform: translateY(-50%) rotate(180deg);
}
.select-items {
	position: absolute; top: calc(100% + 4px); left: 0; right: 0;
	background: var(--cs-bg); border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius); box-shadow: var(--cs-shadow);
	z-index: 100; max-height: 240px; overflow-y: auto; padding: 4px 0;
}
.select-hide { display: none; }
.select-item {
	padding: 9px 12px 9px 32px; cursor: pointer; position: relative;
	transition: background 0.15s; font-size: 0.95rem;
}
@media (min-width: 769px) {
	.select-item:hover {background: var(--cs-hover);}
}
.select-item.disabled { color: var(--cs-disabled); cursor: not-allowed; opacity: 0.6; }
.select-item input {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	width: 16px; height: 16px; cursor: pointer;
}
.select-item input:disabled { cursor: not-allowed; }

/* Scrollbar */
.select-items::-webkit-scrollbar { width: 6px; }
.select-items::-webkit-scrollbar-track { background: transparent; }
.select-items::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
@media (min-width: 769px) {
	.select-items::-webkit-scrollbar-thumb:hover { background: #aaa; }
}

@media (max-width: 575px) {
	/*body { padding: 16px; }*/
	.custom-select-container { max-width: 100%; }
}