/**
 * Help Center + Fluent Support portal — dark shell fixes.
 */

/* ---- Help intro cards: do not stretch to fill the viewport ---- */
.gpbid-help {
	max-width: 920px;
	margin: 0 auto;
	padding: 4px 0 28px;
	box-sizing: border-box;
}

.gpbid-help .help-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
	align-items: stretch;
	min-height: 0 !important;
	height: auto !important;
}

.gpbid-help .help-cards > br {
	display: none !important;
}

.gpbid-help .help-cards a,
body.gpbid-surface--cms .gpbid-help .help-cards a {
	flex: 0 1 240px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	align-self: flex-start !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	gap: 4px;
	text-align: center;
	padding: 14px 16px !important;
	border-radius: 12px;
	text-decoration: none !important;
	font-weight: 700;
	line-height: 1.35;
	color: #fff !important;
	box-sizing: border-box;
}

.gpbid-help .help-faq {
	background: #1a1a1a !important;
	border: 1px solid #333;
}

.gpbid-help .help-ticket {
	background: #0b6e4f !important;
	border: 1px solid #0d8660;
}

.gpbid-help .help-cards a span {
	font-weight: 400 !important;
	font-size: 13px !important;
	opacity: 0.85;
	color: inherit !important;
}

.gpbid-help .help-note,
body.gpbid-surface--cms .gpbid-help .help-note {
	color: #aaa !important;
	font-size: 14px;
	margin: 0 0 16px;
	line-height: 1.55;
}

body.logged-in .gpbid-help .help-note--guest {
	display: none !important;
}

@media (max-width: 640px) {
	.gpbid-help .help-cards {
		flex-direction: column;
	}

	.gpbid-help .help-cards a,
	body.gpbid-surface--cms .gpbid-help .help-cards a {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

/* ---- Fluent Support auth / login blocks ---- */
body.gpbid-app-shell--cms .fst_login_wrapper,
body.gpbid-app-shell--cms .fst_login_form_auth_wrapper,
body.gpbid-surface--cms .fst_login_wrapper {
	background: #151515 !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 12px !important;
	padding: 16px !important;
	color: #eee !important;
}

body.gpbid-app-shell--cms .fst_login_wrapper label,
body.gpbid-app-shell--cms .fst_login_wrapper p,
body.gpbid-surface--cms .fst_login_wrapper label,
body.gpbid-surface--cms .fst_login_wrapper p {
	color: #ccc !important;
}

body.gpbid-app-shell--cms .fst_login_wrapper input[type="text"],
body.gpbid-app-shell--cms .fst_login_wrapper input[type="password"],
body.gpbid-app-shell--cms .fst_login_wrapper input[type="email"],
body.gpbid-surface--cms .fst_login_wrapper input[type="text"],
body.gpbid-surface--cms .fst_login_wrapper input[type="password"],
body.gpbid-surface--cms .fst_login_wrapper input[type="email"] {
	background: #0a0a0a !important;
	border: 1px solid #555 !important;
	color: #eee !important;
	border-radius: 8px !important;
	min-height: 44px !important;
}

body.gpbid-app-shell--cms .fst_login_wrapper #wp-submit,
body.gpbid-surface--cms .fst_login_wrapper #wp-submit {
	background: linear-gradient(90deg, #f5c518, #ff9800) !important;
	border: 0 !important;
	color: #111 !important;
	font-weight: 800 !important;
	border-radius: 10px !important;
	min-height: 44px !important;
	width: 100% !important;
}

/* ---- Fluent Support customer portal (Element Plus) ---- */
body.gpbid-app-shell--cms #fluent_support_client_app,
body.gpbid-surface--cms #fluent_support_client_app {
	--el-bg-color: #161616;
	--el-bg-color-overlay: #1c1c1c;
	--el-bg-color-page: #0f0f0f;
	--el-fill-color: #1f1f1f;
	--el-fill-color-blank: #161616;
	--el-fill-color-light: #222;
	--el-fill-color-lighter: #2a2a2a;
	--el-fill-color-dark: #111;
	--el-text-color-primary: #f2f2f2;
	--el-text-color-regular: #ddd;
	--el-text-color-secondary: #aaa;
	--el-text-color-placeholder: #777;
	--el-border-color: #333;
	--el-border-color-light: #2a2a2a;
	--el-border-color-lighter: #252525;
	--el-border-color-extra-light: #222;
	--el-color-primary: #f5c518;
	--el-color-primary-light-3: #ffd54f;
	--el-color-primary-light-5: #ffe082;
	--el-color-primary-light-7: #333;
	--el-color-primary-light-8: #2a2a2a;
	--el-color-primary-light-9: #1f1f1f;
	--el-color-primary-dark-2: #c9a014;
	--el-mask-color: rgba(0, 0, 0, 0.65);
	--el-box-shadow: none;
	--el-box-shadow-light: none;
	background: #161616 !important;
	color: #eee !important;
	border: 1px solid #2a2a2a !important;
	border-radius: 14px !important;
	min-height: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 20px !important;
	overflow: hidden;
}

body.gpbid-app-shell--cms #fluent_support_client_app .fs_loading_text,
body.gpbid-app-shell--cms #fluent_support_client_app .fs_customer_restriction {
	color: #ccc !important;
	padding: 20px !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .fs_ticket,
body.gpbid-app-shell--cms #fluent_support_client_app .fs_create_ticket_container,
body.gpbid-app-shell--cms #fluent_support_client_app .fs_tickets_container {
	background: transparent !important;
	color: #eee !important;
	padding: 14px !important;
}

/* White cards / panels → dark */
body.gpbid-app-shell--cms #fluent_support_client_app .el-card,
body.gpbid-app-shell--cms #fluent_support_client_app .el-dialog,
body.gpbid-app-shell--cms #fluent_support_client_app .el-drawer,
body.gpbid-app-shell--cms #fluent_support_client_app .el-popover,
body.gpbid-app-shell--cms #fluent_support_client_app .el-dropdown-menu,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table tr,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table th.el-table__cell,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table td.el-table__cell,
body.gpbid-app-shell--cms #fluent_support_client_app .el-pagination,
body.gpbid-app-shell--cms #fluent_support_client_app .el-pager li {
	background: #1a1a1a !important;
	background-color: #1a1a1a !important;
	color: #eee !important;
	border-color: #2e2e2e !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-card__header,
body.gpbid-app-shell--cms #fluent_support_client_app .el-card__body {
	background: transparent !important;
	color: #eee !important;
	border-color: #2e2e2e !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-input__wrapper,
body.gpbid-app-shell--cms #fluent_support_client_app .el-textarea__inner,
body.gpbid-app-shell--cms #fluent_support_client_app .el-select__wrapper,
body.gpbid-app-shell--cms #fluent_support_client_app .el-input-group__append,
body.gpbid-app-shell--cms #fluent_support_client_app .el-input-group__prepend {
	background: #0f0f0f !important;
	box-shadow: 0 0 0 1px #3a3a3a inset !important;
	color: #eee !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-input__inner,
body.gpbid-app-shell--cms #fluent_support_client_app .el-input__wrapper input,
body.gpbid-app-shell--cms #fluent_support_client_app input,
body.gpbid-app-shell--cms #fluent_support_client_app textarea {
	color: #eee !important;
	background: transparent !important;
	-webkit-text-fill-color: #eee !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-input__inner::placeholder,
body.gpbid-app-shell--cms #fluent_support_client_app input::placeholder,
body.gpbid-app-shell--cms #fluent_support_client_app textarea::placeholder {
	color: #777 !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #777 !important;
}

/* Ticket rows: light text on dark */
body.gpbid-app-shell--cms #fluent_support_client_app .el-table .cell,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table th,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table td,
body.gpbid-app-shell--cms #fluent_support_client_app a,
body.gpbid-app-shell--cms #fluent_support_client_app span,
body.gpbid-app-shell--cms #fluent_support_client_app p,
body.gpbid-app-shell--cms #fluent_support_client_app div,
body.gpbid-app-shell--cms #fluent_support_client_app label {
	color: inherit;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-table__row,
body.gpbid-app-shell--cms #fluent_support_client_app .el-table__row:hover > td.el-table__cell {
	background: #141414 !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-table__row:hover > td.el-table__cell {
	background: #1f1f1f !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-button--primary {
	--el-button-bg-color: #f5c518;
	--el-button-border-color: #f5c518;
	--el-button-text-color: #111;
	--el-button-hover-bg-color: #ffd54f;
	--el-button-hover-border-color: #ffd54f;
	--el-button-hover-text-color: #111;
	background: #f5c518 !important;
	border-color: #f5c518 !important;
	color: #111 !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-button--default,
body.gpbid-app-shell--cms #fluent_support_client_app .el-button.is-plain {
	background: #222 !important;
	border-color: #3a3a3a !important;
	color: #eee !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-radio-button__inner,
body.gpbid-app-shell--cms #fluent_support_client_app .el-segmented,
body.gpbid-app-shell--cms #fluent_support_client_app .el-tabs__nav-wrap,
body.gpbid-app-shell--cms #fluent_support_client_app .el-tabs__item {
	background: #1a1a1a !important;
	color: #ccc !important;
	border-color: #333 !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-radio-button__original-radio:checked + .el-radio-button__inner,
body.gpbid-app-shell--cms #fluent_support_client_app .el-tabs__item.is-active {
	background: #2a2a2a !important;
	color: #f5c518 !important;
	border-color: #f5c518 !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-tag,
body.gpbid-app-shell--cms #fluent_support_client_app .el-tag--info {
	background: #2a2a2a !important;
	border-color: #3a3a3a !important;
	color: #ddd !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-dropdown-menu__item,
body.gpbid-app-shell--cms #fluent_support_client_app .el-dropdown-menu__item:hover {
	background: #1a1a1a !important;
	color: #eee !important;
}

body.gpbid-app-shell--cms #fluent_support_client_app .el-pagination button,
body.gpbid-app-shell--cms #fluent_support_client_app .el-pagination .el-select .el-input__wrapper {
	background: #1a1a1a !important;
	color: #eee !important;
}

/* Soften any remaining pure-white panels inside portal */
body.gpbid-app-shell--cms #fluent_support_client_app [style*="background: rgb(255"],
body.gpbid-app-shell--cms #fluent_support_client_app [style*="background:#fff"],
body.gpbid-app-shell--cms #fluent_support_client_app [style*="background: #fff"],
body.gpbid-app-shell--cms #fluent_support_client_app [style*="background-color: rgb(255"],
body.gpbid-app-shell--cms #fluent_support_client_app [style*="background-color:#fff"] {
	background: #1a1a1a !important;
	background-color: #1a1a1a !important;
}