/* ==========================================================
   HEALBE AFFILIATES PORTAL - FINAL MASTER STYLES
   ========================================================== */

/* --- 1. ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ --- */
:root {
	--hb-bg: #fbf9ff;
	--hb-card: rgba(255, 255, 255, 0.92);
	--hb-text: #241d33;
	--hb-muted: #786f8a;
	--hb-line: rgba(72, 55, 110, 0.14);
	--hb-violet: #c9b8f7;
	--hb-violet-strong: #9a82dc;
	--hb-violet-dark: #654aa4;
	--hb-shadow: 0 24px 70px rgba(75, 55, 120, 0.14);
	--hb-radius-xl: 32px;
	--hb-radius-md: 16px;
}

.hb-portal-page {
	min-height: 100vh;
	padding: 56px 20px;
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	color: var(--hb-text);
	background:
		radial-gradient(
			circle at 12% 8%,
			rgba(201, 184, 247, 0.3),
			transparent 34%
		),
		radial-gradient(
			circle at 88% 18%,
			rgba(230, 221, 255, 0.48),
			transparent 32%
		),
		linear-gradient(180deg, #ffffff 0%, var(--hb-bg) 100%);
	box-sizing: border-box;
}

.hb-portal-page * {
	box-sizing: border-box;
}

/* --- 2. СЕТКА И ШАПКА ПОРТАЛА --- */
.hb-portal-shell {
	width: min(1100px, 100%);
	margin: 0 auto;
}

.hb-portal-header {
	margin-bottom: 24px;
	text-align: center;
}

.hb-portal-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 8px 13px;
	border: 1px solid rgba(154, 130, 220, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.76);
	color: var(--hb-violet-dark);
	font-size: 14px;
	font-weight: 800;
	box-shadow: 0 10px 30px rgba(75, 55, 120, 0.07);
}

.hb-portal-kicker::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--hb-violet);
	box-shadow: 0 0 0 6px rgba(201, 184, 247, 0.18);
}

.hb-portal-title {
	margin: 0;
	color: #20182f;
	font-size: clamp(34px, 5vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	font-weight: 900;
}

.hb-portal-subtitle {
	max-width: 690px;
	margin: 14px auto 24px;
	color: var(--hb-muted);
	font-size: 17px;
	line-height: 1.55;
}

/* --- 3. СТЕКЛОМОРФИЗМ (КАРТОЧКА) --- */
.hb-portal-card {
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: var(--hb-radius-xl);
	background:
		radial-gradient(
			circle at 100% 0%,
			rgba(201, 184, 247, 0.2),
			transparent 34%
		),
		var(--hb-card);
	box-shadow: var(--hb-shadow);
	backdrop-filter: blur(18px);
}

/* --- 4. КАСТОМНЫЕ ТАБЫ --- */
.hb-tab-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
	margin: 0 0 26px;
	padding: 6px;
	border: 1px solid var(--hb-line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.76);
}

.hb-tab-controls button.hb-tab-label {
	display: flex;
	width: 100%;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: none !important;
	border-radius: 999px;
	background: transparent;
	color: var(--hb-muted);
	font-family: inherit;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
}

.hb-tab-controls button.hb-tab-label.active {
	color: #fff !important;
	background: linear-gradient(
		135deg,
		var(--hb-violet),
		var(--hb-violet-strong)
	) !important;
	box-shadow: 0 12px 28px rgba(154, 130, 220, 0.22) !important;
}

/* --- 5. СТИЛИЗАЦИЯ ПОЛЕЙ WOOCOMMERCE / AFFILIATES --- */
.hb-portal-page form,
.hb-portal-page .coupon-affiliates,
.hb-portal-page .woocommerce {
	width: 100%;
}

.hb-portal-page .form-row,
#hb-plugin-wrapper p {
	margin: 0 0 16px !important;
}

.hb-portal-page label {
	display: block !important;
	margin: 0 0 8px !important;
	color: var(--hb-text) !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	font-weight: 850 !important;
}

.hb-portal-page input[type='text'],
.hb-portal-page input[type='email'],
.hb-portal-page input[type='password'],
.hb-portal-page input[type='tel'],
.hb-portal-page textarea,
.hb-portal-page select {
	width: 100% !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 14px 16px !important;
	border: 1px solid var(--hb-line) !important;
	border-radius: var(--hb-radius-md) !important;
	outline: none !important;
	background: rgba(255, 255, 255, 0.94) !important;
	color: var(--hb-text) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	box-shadow: 0 8px 22px rgba(75, 55, 120, 0.05) !important;
	transition: all 0.2s ease !important;
}

.hb-portal-page input:focus,
.hb-portal-page textarea:focus {
	border-color: rgba(154, 130, 220, 0.82) !important;
	background: #fff !important;
	box-shadow:
		0 0 0 4px rgba(201, 184, 247, 0.22),
		0 12px 28px rgba(75, 55, 120, 0.08) !important;
}

/* Главные кнопки */
.hb-portal-page input[type='submit'],
.hb-portal-page button[type='submit'],
.hb-portal-page .woocommerce-button {
	display: inline-flex !important;
	width: 100% !important;
	min-height: 56px !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 8px !important;
	padding: 15px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(
		135deg,
		var(--hb-violet),
		var(--hb-violet-strong)
	) !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	cursor: pointer !important;
	box-shadow: 0 16px 34px rgba(154, 130, 220, 0.24) !important;
	transition: all 0.2s ease !important;
}

.hb-portal-page input[type='submit']:hover,
.hb-portal-page button[type='submit']:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 20px 42px rgba(154, 130, 220, 0.3) !important;
}

/* --- 6. ХИРУРГИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ФОРМ --- */

/* Делаем главный контейнер гибким */
#hb-plugin-wrapper .wcusage-login-form-cols {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Растягиваем обе колонки на 100% */
#hb-plugin-wrapper .wcusage-login-form-col {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Скрываем родные заголовки плагина и мусор */
#hb-plugin-wrapper .wcusage-login-form-title,
#hb-plugin-wrapper .wcusage-register-form-title,
#hb-plugin-wrapper hr {
	display: none !important;
}

/* ПЕРЕКЛЮЧАТЕЛЬ: ВО ВКЛАДКЕ "ВХОД" СКРЫВАЕМ 2-Ю КОЛОНКУ (Регистрацию) */
#hb-plugin-wrapper.show-login .wcusage-login-form-cols > div:nth-child(2) {
	display: none !important;
}

/* ПЕРЕКЛЮЧАТЕЛЬ: ВО ВКЛАДКЕ "РЕГИСТРАЦИЯ" СКРЫВАЕМ 1-Ю КОЛОНКУ (Вход) */
#hb-plugin-wrapper.show-register .wcusage-login-form-cols > div:nth-child(1) {
	display: none !important;
}

#hb-plugin-wrapper {
	max-width: 100% !important;
	overflow-x: auto !important;
}

/* --- 7. СЕТКА: ВЫРАВНИВАНИЕ ПОЛЕЙ В ОДИН РЯД --- */

/* Перебиваем жесткие 300px от плагина */
#hb-plugin-wrapper .wcusage-login-form-col input[type='text'],
#hb-plugin-wrapper .wcusage-login-form-col input[type='email'],
#hb-plugin-wrapper .wcusage-login-form-col input[type='password'],
#hb-plugin-wrapper .wcusage-login-form-col input[type='tel'] {
	max-width: 100% !important;
}

/* Делаем сетку для формы регистрации */
#hb-plugin-wrapper .wcu_form_affiliate_register {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
}

/* Все поля и блоки очистки в форме регистрации по умолчанию 100% */
#hb-plugin-wrapper .wcu_form_affiliate_register > p,
#hb-plugin-wrapper .wcu_form_affiliate_register > div {
	width: 100% !important;
	clear: both !important;
	margin-bottom: 16px !important;
}

/* Ставим парные поля в один ряд (Имя/Фамилия и Пароль/Подтверждение) */
#hb-plugin-wrapper .wcu_form_affiliate_register .wcu-register-field-col-1,
#hb-plugin-wrapper .wcu_form_affiliate_register .wcu-register-field-col-2 {
	width: calc(50% - 8px) !important;
	clear: none !important;
	float: none !important;
	display: inline-block !important;
}

/* --- 8. АДАПТИВНОСТЬ (МОБИЛКИ) --- */
@media (max-width: 680px) {
	.hb-portal-page {
		padding: 34px 12px;
	}
	.hb-portal-card {
		padding: 22px;
		border-radius: 24px;
	}
	.hb-portal-title {
		font-size: 30px;
	}

	/* Табы вертикально */
	.hb-tab-controls {
		grid-template-columns: 1fr;
		border-radius: 24px;
	}

	/* Имя и фамилия на мобилках возвращаются в 100% */
	#hb-plugin-wrapper .wcu_form_affiliate_register .wcu-register-field-col-1,
	#hb-plugin-wrapper .wcu_form_affiliate_register .wcu-register-field-col-2 {
		width: 100% !important;
	}
}

/* --- ПРИНУДИТЕЛЬНЫЙ СТИЛЬ ДЛЯ КНОПКИ РЕГИСТРАЦИИ --- */
/* Используем связку ID, чтобы гарантированно перебить стили плагина */
#hb-plugin-wrapper #wcu-register-button {
	display: inline-flex !important;
	width: 100% !important;
	min-height: 56px !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 8px !important;
	padding: 15px 22px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(
		135deg,
		var(--hb-violet),
		var(--hb-violet-strong)
	) !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	box-shadow: 0 16px 34px rgba(154, 130, 220, 0.24) !important;
	transition: all 0.2s ease !important;
	/* Убираем любые лишние обводки, если плагин их добавил */
	text-shadow: none !important;
}

#hb-plugin-wrapper #wcu-register-button:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 20px 42px rgba(154, 130, 220, 0.3) !important;
	background: linear-gradient(
		135deg,
		var(--hb-violet),
		var(--hb-violet-strong)
	) !important;
}

/* --- 9. СТИЛИЗАЦИЯ ВКЛАДОК ВНУТРИ ЛИЧНОГО КАБИНЕТА (ДАШБОРДА) --- */

/* 1. Сбрасываем зеленый цвет и делаем неактивные табы красивыми */
#hb-plugin-wrapper .wcutab button {
	background: rgba(255, 255, 255, 0.76) !important;
	color: var(--hb-muted) !important;
	border: 1px solid var(--hb-line) !important;
	border-radius: 999px !important; /* Делаем их скругленными */
	margin-bottom: 8px !important; /* Даем им немного места, если они перенесутся на новую строку */
	box-shadow: none !important;
	text-shadow: none !important;
	font-family: inherit !important;
	font-weight: 800 !important;
	transition: all 0.2s ease !important;
}

/* 2. Применяем наш фиолетовый градиент для АКТИВНОГО таба и при наведении */
#hb-plugin-wrapper .wcutab button:hover,
#hb-plugin-wrapper .wcu-dash-coupon-area .wcutab .wcutab-active,
#hb-plugin-wrapper .wcutab button.active {
	background: linear-gradient(
		135deg,
		var(--hb-violet),
		var(--hb-violet-strong)
	) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 12px 28px rgba(154, 130, 220, 0.22) !important;
}

/* 3. Убираем странные отступы вокруг иконок FontAwesome внутри кнопок */
#hb-plugin-wrapper .wcutab button i {
	margin-right: 6px !important;
}

#wcu-input-phone {
	max-width: 100% !important;
}