/* ===== vmeste-panel.css — ПОЛНЫЕ СТИЛИ ДЛЯ VMESTEHOST ===== */

/* === БАЗА === */
* { box-sizing: border-box; }
body {
	margin: 0; padding: 0;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px; color: #333;
	background: #f5f7fa;
	line-height: 1.4;
}

/* === КНОПКИ И ФОРМЫ (базовые как на vmeste) === */
input, select, textarea {
	font-size: 13px; margin-bottom: 4px; padding: 8px;
	box-sizing: border-box; border: 1px #ccc solid;
	border-radius: 3px; background: #fff; max-width: 100%;
}
input[type=checkbox] { width: 20px; height: 20px; border: 0; vertical-align: middle; }
input[type=file] { border: 0; }
button, input[type=button], input[type=submit] {
	cursor: pointer; font-size: 13px; padding: 8.5px 12px;
	border: 0; color: white; background-color: #377BB5;
	border-radius: 3px; transition: background-color 0.2s; margin: 2px;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
	background-color: #4080c0;
}
input:invalid { background-color: lightpink; }

/* === ШАПКА === */
.vm-panel-header {
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	position: sticky;
	top: 0;
	z-index: 100;
}
.vm-panel-header-block {
	max-width: 900px;
  margin: 0px auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}

.vm-logo {
	display: flex; align-items: center; gap: 8px;
	text-decoration: none;
	color: #38c;
	text-shadow: 0 0 2px #fff, 3px 3px 3px #ccc;
	font-weight: bold;
	font-size: 18px;
	text-transform: uppercase;
}
.vm-logo img { width: 36px; height: 36px; }

.vm-header-right {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Баланс — ЧЁРНЫЙ цвет */
#user_money {
	color: #000 !important;
	font-weight: bold;
	font-size: 16px;
}
.vm-balance {
	display: flex; align-items: center; gap: 4px;
}
.vm-balance .rub { color: #000; font-size: 16px; }

/* === ПОДДЕРЖКА === */
.vm-support {
	background: #fff;
	padding: 8px 15px;
	text-align: center;
	font-size: 13px;
	color: #666;
	border-bottom: 1px solid #eee;
}
.vm-support a { color: #377BB5; text-decoration: none; }
.vm-support a:hover { text-decoration: underline; }

/* === КОНТЕЙНЕР === */
.vm-panel-wrap {
	max-width: 900px;
	min-height:500px;
	margin: 25px auto;
	padding: 0 15px;
}

/* === МЕНЮ ПОЛЬЗОВАТЕЛЯ === */
#user_menu {
	background: #fff;
	padding: 15px;
	border-radius: 8px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 4px 16px rgba(0,16,64,0.08);
	text-align: center;
	margin: 0 auto 20px;
}
#user_menu button { margin: 3px; }
#user_menu button.active {
	background-color: #295794 !important;
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
	position: relative;
}
#user_menu button.active::after {
	content: ''; position: absolute; bottom: -15px; left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #295794;
}
#user_menu button:last-child { background: #c62828; }
#user_menu button:last-child:hover { background: #d32f2f; }

/* === БЛОКИ КОНТЕНТА === */
#services_area, #orders_area, #pays_area, #settings_area, #support_area, #help_area {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 4px 16px rgba(0,16,64,0.08);
	margin: 0 auto 20px;
	max-width: 100%;
	text-align: left;
}
#orders_area h3, #pays_area h3, #settings_area h3, #support_area h3, #help_area h3 {
	margin: 0 0 15px;
	color: #295794;
	font-size: 16px;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}
#orders_content { font-size: 13px; color: #555; line-height: 1.5; }

/* === ВКЛАДКИ УСЛУГ === */
.vm-services-tabs {
	display: flex; justify-content: center; gap: 5px;
	margin-bottom: 15px; flex-wrap: wrap;
	border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.vm-tab-btn {
	background: #f5f5f5; color: #333; border: none;
	padding: 8px 14px; border-radius: 4px;
	cursor: pointer; font-size: 13px; font-family: inherit;
	transition: background 0.2s; min-width: 120px;
}
.vm-tab-btn:hover { background: #e8e8e8; }
.vm-tab-btn.active { background: #377BB5; color: white; }
.vm-tab-btn.active:hover { background: #4080c0; }
.vm-tab-content { display: none; }
.vm-tab-content.active { display: block; }

/* === СЕТКА ТАРИФОВ === */
.vm-tariffs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	justify-items: center;
}
.vm-tariff-card {
	background: #fafafa;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 15px;
	text-align: center;
	width: 100%;
	max-width: 260px;
	transition: box-shadow 0.2s;
}
.vm-tariff-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.vm-tariff-card.featured {
	border: 2px solid #377BB5;
	background: #f0f7ff;
}
.vm-tariff-card h4 {
	margin: 0 0 8px; color: #295794; font-size: 15px;
}
.vm-price {
	font-size: 18px; font-weight: bold; color: #333; margin: 10px 0;
}
.vm-price span { font-size: 11px; color: #666; font-weight: normal; }
.vm-features {
	list-style: none; padding: 0; margin: 12px 0;
	text-align: left; font-size: 12px; color: #555;
}
.vm-features li { padding: 3px 0; border-bottom: 1px dashed #eee; }
.vm-features li:last-child { border-bottom: none; }
.vm-order-btn { width: 100%; margin-top: 10px; }

/* === МОДАЛЬНОЕ ОКНО СОГЛАСИЯ === */
#consent_modal {
	display: none;
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 9999;
	align-items: center; justify-content: center;
	padding: 15px;
}
#consent_modal .vm-consent-box {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	max-width: 480px;
	width: 100%;
	box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
#consent_modal .vm-consent-header {
	display: flex; justify-content: space-between;
	align-items: center; margin-bottom: 15px;
}
#consent_modal .vm-consent-title {
	font-size: 16px; color: #295794; font-weight: bold;
}
#consent_modal .vm-consent-close {
	cursor: pointer; color: #999; font-size: 22px; font-weight: bold;
}
#consent_modal .vm-consent-close:hover { color: #333; }
#consent_modal .vm-consent-info {
	font-size: 13px; color: #444; line-height: 1.5; margin-bottom: 15px;
}
#consent_modal .vm-consent-info p { margin: 0 0 10px; }
#consent_modal .vm-consent-warning {
	background: #fff8e6; border: 1px solid #ffc107;
	border-radius: 4px; padding: 12px; margin-bottom: 15px;
	font-size: 12px; color: #664d03;
}
#consent_modal .vm-consent-label {
	display: flex; align-items: flex-start; gap: 8px;
	font-size: 12px; color: #333; margin-bottom: 15px; cursor: pointer;
}
#consent_modal .vm-consent-label input {
	width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0;
}
#consent_modal .vm-consent-actions {
	display: flex; gap: 8px; justify-content: flex-end;
}
#consent_modal .vm-consent-btn {
	padding: 10px 16px; border: none; border-radius: 4px;
	cursor: pointer; font-size: 13px; font-family: inherit;
}
#consent_modal .vm-consent-btn-cancel { background: #e0e0e0; color: #333; }
#consent_modal .vm-consent-btn-cancel:hover { background: #d0d0d0; }
#consent_modal .vm-consent-btn-confirm { background: #377BB5; color: white; }
#consent_modal .vm-consent-btn-confirm:hover { background: #4080c0; }
#consent_modal .vm-consent-btn-confirm:disabled {
	opacity: 0.5; pointer-events: none;
}

/* === ПОМОЩЬ === */
#help_area .help-section { margin-bottom: 25px; }
#help_area .help-section h4 {
	margin: 0 0 10px; color: #377BB5; font-size: 15px;
}
#help_area .help-section p,
#help_area .help-section ul {
	margin: 0 0 8px; font-size: 13px; color: #555; line-height: 1.5;
}
#help_area .help-section ul { padding-left: 20px; }
#help_area .help-section li { margin-bottom: 4px; }
#help_area .help-note {
	background: #f9f9f9; border-left: 3px solid #377BB5;
	padding: 10px 15px; margin: 10px 0; font-size: 12px; color: #666;
}

/* === ФУТЕР === */
#vm_footer {
	background: #fff;
	border-top: 1px solid #eee;
	padding: 20px 15px;
	margin-top: 40px;
	text-align: center;
	font-size: 12px;
	color: #666;
}
#vm_footer .vm-footer-copyright {
	margin-bottom: 10px;
}
#vm_footer .vm-footer-links {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 10px 20px;
}
#vm_footer .vm-footer-links a {
	color: #377BB5; text-decoration: none;
}
#vm_footer .vm-footer-links a:hover { text-decoration: underline; }

/* === СКРЫТИЕ ЭЛЕМЕНТОВ API === */
.vm_providers, .vm_auth_warning { display: none !important; }

/* === АДАПТИВ === */
@media (max-width: 650px) {
	.vm-panel-header { flex-direction: column; align-items: stretch; }
	.vm-header-right { justify-content: center; }
	#user_menu button, .vm-auth-btn, .vm-tab-btn, .vm-order-btn {
		width: 100%; margin: 3px 0;
	}
	.vm-tariffs-grid { grid-template-columns: 1fr; }
	.vm-services-tabs { flex-direction: column; align-items: center; }
	.vm-tab-btn { min-width: auto; }
	#consent_modal .vm-consent-actions { flex-direction: column-reverse; }
	#consent_modal .vm-consent-btn { width: 100%; }
	#vm_footer .vm-footer-links { flex-direction: column; gap: 8px; }
}