.main-content-signup {min-height: 100vh;width: 100%;background: var(--card);border: 1px solid var(--border);padding: 2rem;display: flex;/*justify-content: center;*/align-items: center;flex-direction: column;}

/* --- COUNTRY SELECT --- */
.country-selected {flex: 1;display: flex;align-items: center;gap: 10px;padding: 22px 14px 0px 14px;color: var(--text);font-size: 16px;cursor: pointer;}
.country-selected span {color: var(--text3);}
.country-selected.active span {color: var(--text);}
.country-selected img {width: 20px;height: 14px;border-radius: 3px;}
.country-dropdown {position: absolute;top: calc(100% + 6px);left: 0;width: 100%;background: var(--card);border: 1px solid var(--border);border-radius: 10px;display: none;z-index: 100;}
.country-dropdown.open {display: block;}
.country-search-container {position: relative;}
.country-search-container i {position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: var(--text3);}
.country-search {width: 100%;padding: 10px 12px 10px 35px;border: none;border-bottom: 1px solid var(--border);border-top-left-radius: 10px;border-top-right-radius: 10px;background: var(--bg3);color: var(--text);outline: none;}
.country-list {max-height: 180px;overflow-y: auto;}
.country-item {display: flex;align-items: center;gap: 10px;padding: 10px 15px;cursor: pointer;color: var(--text2);transition: background 0.2s, color 0.2s;}
.country-item img {width: 18px;height: 12px;border-radius: 2px;}
.country-item:hover {background: var(--bg3);color: var(--text);}
.country-item.selected {background: rgba(202, 162, 75, 0.2);border: 1px solid var(--border2);color: var(--text);}
.country-select.open .custom-input-wrapper {border-color: var(--border2);}
.country-select.active .custom-input-label, .country-select.open .custom-input-label {top: 8px;font-size: 12px;color: var(--text2);transform: none;}
.country-list::-webkit-scrollbar {width: 8px;}
.country-list::-webkit-scrollbar-thumb {background: var(--bg3);border-radius: 4px;}

/* --- GENDER SELECT --- */
.gender-selected {flex: 1;display: flex;align-items: center;gap: 8px;padding: 22px 14px 0 14px;font-size: 16px;cursor: pointer;color: #eee;}
.gender-selected span {color: #777;}
.gender-selected.active span {color: #eee;}
.gender-selected i.gender-icon {font-size: 18px;}
.gender-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; background: #1f2024; border: 1px solid #444; border-radius: 10px; display: none; z-index: 100;}
.gender-dropdown.open { display: block; }
.gender-list { display: flex; flex-direction: column; }
.gender-item { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; gap: 10px; color: #d7d7db; }
.gender-item i { font-size: 16px; }
.gender-item:hover { background: #2a2b30; }
.gender-select.active .custom-input-label, .gender-select.open .custom-input-label {top: 8px;font-size: 12px;color: #bbb;transform: none;}
.gender-text-blue { color: #3498db; }
.gender-text-pink { color: #e91e63; }
.gender-text-purple { color: #9b59b6; }

/* --- TERMS CHECKBOX --- */
.checkbox-group {display: flex;align-items: center;margin-top: 15px;}
.checkbox-group input[type="checkbox"] {display: none;}
.checkbox-card {display: flex;align-items: center;gap: 10px;cursor: pointer;user-select: none;}
.checkbox-card .check-bg {width: 24px;height: 24px;background-color: var(--bg3);border: 2px solid var(--border);border-radius: 6px;display: flex;justify-content: center;align-items: center;transition: all 0.2s ease;}
.checkbox-card .checkmark {width: 16px;height: 16px;stroke-dasharray: 22;stroke-dashoffset: 22;transition: stroke-dashoffset 0.3s ease;}
.checkbox-group input[type="checkbox"]:checked + .checkbox-card .check-bg {background-color: var(--gold);border-color: var(--gold);}
.checkbox-group input[type="checkbox"]:checked + .checkbox-card .checkmark {stroke-dashoffset: 0;}
.checkbox-card .checkmark path {stroke-dasharray: 22;stroke-dashoffset: 22;stroke: var(--bg4);fill: none;stroke-linecap: round;stroke-linejoin: round;transition: stroke-dashoffset 0.3s ease;opacity: 0;}
.checkbox-group input[type="checkbox"]:checked + .checkbox-card .checkmark path {stroke-dashoffset: 0;opacity: 1;}
.checkbox-terms-text {font-size: 14px;color: var(--text);}
.checkbox-terms-text a {color: var(--gold);text-decoration: none;transition: 0.2s;}
.checkbox-terms-text a:hover {color: var(--gold-bright);text-decoration: underline;}/* --- VOCATION GRID --- */
/* --- VOCATION GRID --- */
.vocation-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 10px;
}

/* --- VOCATION CARD --- */
.vocation-card {
	background: #1f2024;
	border: 1px solid #333;
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	transition: 0.2s;
}

.vocation-card img {
	width: 100%;
	height: 80px;
	object-fit: contain;
	margin-bottom: 6px;
}

.vocation-card span {
	color: #ccc;
	font-size: 14px;
}

/* hover */
.vocation-card:hover {
	border-color: #555;
	transform: translateY(-2px);
}

/* active */
.vocation-card.active {
	border: 2px solid #4285F4;
	background: #1a2a40;
}

.vocation-card.active span {
	color: #fff;
}

.vocation-section.active .section-label {
	color: #bbb;
}

/* selected */
.vocation-selected {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 22px 14px 0 14px;
	color: #eee;
	cursor: pointer;
}

.vocation-selected span {
	color: #777;
}

.vocation-selected.active span {
	color: #eee;
}

.vocation-icon {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

/* dropdown */
.vocation-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	background: #1f2024;
	border: 1px solid #444;
	border-radius: 10px;
	display: none;
	z-index: 100;
}

.vocation-dropdown.open {
	display: block;
}

.vocation-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	cursor: pointer;
	color: #ddd;
}

.vocation-item img {
	width: 20px;
	height: 20px;
}

.vocation-item:hover {
	background: #2a2b30;
}

.vocation-item.selected {
	background: #2a2b30;
	color: #fff;
}

/* label active */
.vocation-select.active .custom-input-label,
.vocation-select.open .custom-input-label {
	top: 8px;
	font-size: 12px;
	color: #bbb;
	transform: none;
}

/* --- SERVER SELECT --- */
.server-selected {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 22px 14px 0 14px;
	color: #eee;
	cursor: pointer;
}

.server-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	background: #1f2024;
	border: 1px solid #444;
	border-radius: 10px;
	display: none;
	z-index: 100;
}

.server-dropdown.open {
	display: block;
}

.server-item {
	display:flex;
	padding: 10px 15px;
	cursor: pointer;
	color: #ddd;
}

.server-item:hover {
	background: #2a2b30;
}

.server-select.active .custom-input-label,
.server-select.open .custom-input-label {
	top: 8px;
	font-size: 12px;
	color: #bbb;
	transform: none;
}

.server-item.selected {
	background: #2a2b30;
	color: #fff;
}