/*
 * Fosooli Theme 1.2.2
 * Educational Arabic interface for Question2Answer 1.8.x
 */

:root {
	--fosooli-primary: #0f8f7c;
	--fosooli-primary-dark: #08685e;
	--fosooli-secondary: #2878d8;
	--fosooli-accent: #ffd166;
	--fosooli-ink: #172033;
	--fosooli-muted: #65708a;
	--fosooli-bg: #f4f6fb;
	--fosooli-surface: #ffffff;
	--fosooli-line: #e4e8f2;
	--fosooli-soft: #e8f7f3;
	--fosooli-success: #1f9d6a;
	--fosooli-danger: #d94a61;
	--fosooli-warning: #d9971c;
	--fosooli-radius-sm: 10px;
	--fosooli-radius: 16px;
	--fosooli-radius-lg: 26px;
	--fosooli-shadow-sm: 0 6px 20px rgba(34, 43, 74, .07);
	--fosooli-shadow: 0 18px 50px rgba(34, 43, 74, .11);
	--fosooli-container: 1180px;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
}

body.qa-theme-fosooli {
	margin: 0;
	background: var(--fosooli-bg) !important;
	color: var(--fosooli-ink);
	font-family: Tahoma, "Segoe UI", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

body.qa-theme-fosooli * {
	box-sizing: border-box;
}

body.qa-theme-fosooli a {
	color: var(--fosooli-primary);
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.qa-theme-fosooli a:hover,
body.qa-theme-fosooli a:focus {
	color: var(--fosooli-primary-dark);
	text-decoration: none;
}

body.qa-theme-fosooli img {
	max-width: 100%;
}

body.qa-theme-fosooli button,
body.qa-theme-fosooli input,
body.qa-theme-fosooli textarea,
body.qa-theme-fosooli select {
	font-family: inherit;
}

/* Top navigation */
#qam-topbar {
	position: sticky;
	top: 0;
	z-index: 1000;
	min-height: 76px;
	background: rgba(255, 255, 255, .96);
	border-bottom: 1px solid rgba(228, 232, 242, .9);
	box-shadow: 0 5px 22px rgba(32, 42, 73, .06);
	backdrop-filter: blur(14px);
}

.qam-main-nav-wrapper {
	width: min(var(--fosooli-container), calc(100% - 32px));
	min-height: 76px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
}

.qa-logo {
	float: none !important;
	margin: 0 !important;
	flex: 0 0 auto;
	line-height: 1;
}

.fosooli-brand-link {
	display: inline-flex;
	align-items: center;
	width: 185px;
	min-height: 58px;
}

.fosooli-brand-link img {
	display: block;
	width: 185px;
	height: auto !important;
}

.qa-nav-main {
	float: none !important;
	flex: 1 1 auto;
	margin: 0 !important;
	background: transparent !important;
}

.qa-nav-main-list {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 0;
}

.qa-nav-main-item {
	float: none !important;
	margin: 0 !important;
}

.qa-nav-main-link {
	display: flex !important;
	align-items: center;
	min-height: 42px;
	padding: 8px 13px !important;
	border-radius: 12px;
	color: #3f4961 !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4 !important;
	background: transparent !important;
}

.qa-nav-main-link:before {
	display: none !important;
}

.qa-nav-main-link:hover,
.qa-nav-main-link:focus {
	background: var(--fosooli-soft) !important;
	color: var(--fosooli-primary) !important;
}

.qa-nav-main-link.qa-nav-main-selected {
	background: var(--fosooli-primary) !important;
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(15, 143, 124, .22);
}

.qa-nav-main-ask .qa-nav-main-link {
	background: rgba(46, 159, 130, .10) !important;
	color: #19745f !important;
}

.qa-nav-main-ask .qa-nav-main-link:hover {
	background: var(--fosooli-secondary) !important;
	color: #fff !important;
}

.qa-nav-sub {
	width: min(var(--fosooli-container), calc(100% - 32px));
	margin: 0 auto;
	padding: 0 0 10px;
	background: transparent !important;
	border: 0 !important;
}

.qa-nav-sub-list {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.qa-nav-sub-link {
	display: inline-flex;
	padding: 5px 11px;
	border: 1px solid var(--fosooli-line);
	border-radius: 999px;
	background: #fff;
	color: var(--fosooli-muted) !important;
	font-size: 12px;
	font-weight: 700;
}

.qa-nav-sub-link.qa-nav-sub-selected,
.qa-nav-sub-link:hover {
	border-color: rgba(15, 143, 124, .35);
	background: var(--fosooli-soft);
	color: var(--fosooli-primary) !important;
}

.qam-account-items-wrapper {
	float: none !important;
	flex: 0 0 auto;
}

#qam-account-toggle {
	min-width: 44px;
	height: 44px;
	padding: 5px 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--fosooli-line);
	border-radius: 14px;
	background: #fff;
	color: var(--fosooli-ink);
	cursor: pointer;
}

#qam-account-toggle:hover,
#qam-account-toggle.account-active {
	border-color: rgba(15, 143, 124, .4);
	box-shadow: var(--fosooli-shadow-sm);
}

#qam-account-toggle img {
	width: 32px !important;
	height: 32px !important;
	border-radius: 10px;
}

.qam-account-handle {
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 700;
}

.qam-account-items {
	margin-top: 12px;
	min-width: 280px;
	padding: 16px;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff;
	box-shadow: var(--fosooli-shadow);
}

.qam-account-items input[type="text"],
.qam-account-items input[type="password"] {
	width: 100%;
	margin: 0 0 10px;
	padding: 11px 12px;
	border: 1px solid var(--fosooli-line);
	border-radius: 10px;
	background: #fafbfe;
}

.qam-account-items input:focus {
	border-color: var(--fosooli-primary);
	outline: 0;
	box-shadow: 0 0 0 3px rgba(15, 143, 124, .10);
}

.qam-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin: 0 !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fosooli-line);
	border-radius: 12px;
	background: #fff;
	color: var(--fosooli-primary);
}

/* Hero */
.fosooli-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 20%, rgba(255, 209, 102, .24), transparent 30%),
		radial-gradient(circle at 86% 14%, rgba(46, 159, 130, .20), transparent 34%),
		linear-gradient(135deg, #08685e 0%, #0f8f7c 56%, #2878d8 100%);
	color: #fff;
}

.fosooli-hero:before,
.fosooli-hero:after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .14);
}

.fosooli-hero:before {
	width: 340px;
	height: 340px;
	top: -190px;
	left: -80px;
}

.fosooli-hero:after {
	width: 460px;
	height: 460px;
	bottom: -320px;
	right: -120px;
}

.fosooli-hero__inner {
	position: relative;
	z-index: 2;
	width: min(var(--fosooli-container), calc(100% - 32px));
	min-height: 430px;
	margin: 0 auto;
	padding: 64px 0;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
	align-items: center;
	gap: 54px;
}

.fosooli-hero__content {
	max-width: 690px;
}

.fosooli-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 15px;
	padding: 7px 13px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 999px;
	background: rgba(255,255,255,.10);
	font-size: 13px;
	font-weight: 700;
}

.fosooli-hero__eyebrow:before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fosooli-accent);
	box-shadow: 0 0 0 5px rgba(255, 209, 102, .16);
}

.fosooli-hero h1 {
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(34px, 5vw, 57px);
	line-height: 1.35;
	font-weight: 800;
	letter-spacing: -.8px;
}

.fosooli-hero p {
	max-width: 650px;
	margin: 0;
	color: rgba(255,255,255,.84);
	font-size: 17px;
	line-height: 2;
}

.fosooli-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.fosooli-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 20px;
	border-radius: 13px;
	font-weight: 800;
	font-size: 14px;
}

.fosooli-btn--primary {
	background: #fff;
	color: var(--fosooli-primary) !important;
	box-shadow: 0 12px 30px rgba(23, 32, 51, .18);
}

.fosooli-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 38px rgba(23, 32, 51, .24);
}

.fosooli-btn--ghost {
	border: 1px solid rgba(255,255,255,.35);
	background: rgba(255,255,255,.08);
	color: #fff !important;
}

.fosooli-btn--ghost:hover {
	background: rgba(255,255,255,.17);
	transform: translateY(-2px);
}

.fosooli-hero__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}

.fosooli-book-card {
	position: relative;
	width: min(100%, 410px);
	padding: 25px 24px 15px;
	border: 1px solid rgba(255,255,255,.27);
	border-radius: 34px;
	background: rgba(255,255,255,.12);
	box-shadow: 0 30px 70px rgba(25, 24, 75, .24);
	backdrop-filter: blur(15px);
	transform: rotate(-2deg);
}

.fosooli-book-card:after {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	z-index: -1;
	border-radius: 34px;
	background: rgba(255,255,255,.08);
}

.fosooli-book-card svg {
	display: block;
	width: 100%;
	height: auto;
}

.fosooli-book-card__badge {
	position: absolute;
	top: 20px;
	right: 22px;
	z-index: 3;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--fosooli-accent);
	color: #5a4311;
	font-size: 11px;
	font-weight: 800;
}

/* Shortcut strip */
.fosooli-shortcuts {
	position: relative;
	z-index: 5;
	margin-top: -28px;
}

.fosooli-shortcuts__inner {
	width: min(var(--fosooli-container), calc(100% - 32px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.fosooli-shortcut {
	min-height: 92px;
	padding: 17px;
	display: flex;
	align-items: center;
	gap: 13px;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff;
	box-shadow: var(--fosooli-shadow-sm);
	color: var(--fosooli-ink) !important;
}

.fosooli-shortcut:hover {
	transform: translateY(-4px);
	border-color: rgba(15,143,124,.28);
	box-shadow: var(--fosooli-shadow);
}

.fosooli-shortcut__icon {
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 13px;
	background: var(--fosooli-soft);
	color: var(--fosooli-primary);
	font-size: 20px;
	font-weight: 800;
}

.fosooli-shortcut strong,
.fosooli-shortcut small {
	display: block;
}

.fosooli-shortcut strong {
	margin-bottom: 2px;
	font-size: 14px;
}

.fosooli-shortcut small {
	color: var(--fosooli-muted);
	font-size: 11px;
	line-height: 1.5;
}

/* Main layout */
.qa-body-wrapper {
	width: min(var(--fosooli-container), calc(100% - 32px));
	margin: 0 auto;
	padding: 36px 0 64px;
	background: transparent !important;
}

.fosooli-home .qa-body-wrapper {
	padding-top: 38px;
}

.qa-main-wrapper {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.qa-main {
	float: none !important;
	width: calc(100% - 324px) !important;
	min-width: 0;
	margin: 0 !important;
}

.qa-sidepanel {
	position: sticky;
	top: 96px;
	float: none !important;
	width: 300px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

.qa-main-heading {
	margin: 0 0 18px !important;
	padding: 19px 22px !important;
	display: flex;
	align-items: center;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff !important;
	box-shadow: var(--fosooli-shadow-sm);
	color: var(--fosooli-ink) !important;
}

.qa-main-heading h1 {
	margin: 0;
	color: var(--fosooli-ink) !important;
	font-size: 22px;
	line-height: 1.5;
	font-weight: 800;
}

.qa-main-heading h1 a {
	color: var(--fosooli-ink) !important;
}

.qa-main-heading h1 a:hover {
	color: var(--fosooli-primary) !important;
}

.qa-part-custom,
.qa-part-form,
.qa-part-form-profile,
.qa-part-form-password,
.qa-part-form-register,
.qa-part-form-login,
.qa-part-form-forgot,
.qa-part-form-feedback,
.qa-part-message-list,
.qa-part-ranking,
.qa-part-nav-list {
	margin-bottom: 20px;
	padding: 22px;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff;
	box-shadow: var(--fosooli-shadow-sm);
}

/* Search */
.qam-search .qa-search {
	margin: 0 0 18px;
	padding: 5px !important;
	display: flex;
	border: 1px solid var(--fosooli-line);
	border-radius: 14px;
	background: #fff !important;
	box-shadow: var(--fosooli-shadow-sm);
}

.qa-search form {
	width: 100%;
	display: flex;
}

.qa-search-field {
	width: 100% !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 8px 13px !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--fosooli-ink);
	outline: 0;
}

.qa-search-button {
	width: 44px !important;
	height: 44px !important;
	flex: 0 0 44px;
	border: 0 !important;
	border-radius: 11px;
	background-color: var(--fosooli-primary) !important;
	background-position: center !important;
}

.qa-search-button:hover {
	background-color: var(--fosooli-primary-dark) !important;
}

/* Educational sidebar */
.fosooli-side-card,
.qa-sidebar,
.qa-sidepanel .qa-widget-side,
.qa-feed {
	margin: 0 0 18px !important;
	padding: 20px !important;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff !important;
	box-shadow: var(--fosooli-shadow-sm);
	color: var(--fosooli-ink) !important;
}

.fosooli-side-card {
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, #ffffff, #f5f4ff) !important;
}

.fosooli-side-card:before {
	content: "";
	position: absolute;
	width: 110px;
	height: 110px;
	left: -48px;
	top: -48px;
	border-radius: 50%;
	background: rgba(15,143,124,.08);
}

.fosooli-side-card h2,
.qa-sidebar h1,
.qa-sidebar h2,
.qa-sidepanel .qa-widget-side h2 {
	position: relative;
	margin: 0 0 8px;
	color: var(--fosooli-ink) !important;
	font-size: 17px;
	font-weight: 800;
}

.fosooli-side-card p {
	position: relative;
	margin: 0 0 14px;
	color: var(--fosooli-muted);
	font-size: 13px;
	line-height: 1.8;
}

.fosooli-side-card a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
	padding: 9px 11px;
	border-radius: 10px;
	background: var(--fosooli-soft);
	color: var(--fosooli-primary) !important;
	font-size: 13px;
	font-weight: 700;
}

.fosooli-side-card a:after {
	content: "←";
}

.fosooli-side-card a:hover {
	background: var(--fosooli-primary);
	color: #fff !important;
}

.qa-sidebar a {
	color: var(--fosooli-primary) !important;
}

/* Lesson/article cards */
.qa-q-list {
	margin: 0 !important;
}

.qa-q-list-item {
	position: relative;
	margin: 0 0 15px !important;
	padding: 20px !important;
	display: flex;
	gap: 18px;
	border: 1px solid var(--fosooli-line) !important;
	border-radius: var(--fosooli-radius) !important;
	background: #fff !important;
	box-shadow: var(--fosooli-shadow-sm);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.qa-q-list-item:hover {
	transform: translateY(-2px);
	border-color: rgba(15,143,124,.27) !important;
	box-shadow: var(--fosooli-shadow);
}

.qa-q-list-item:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	inset-inline-start: 0;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--fosooli-primary), var(--fosooli-secondary));
	opacity: 0;
	transition: opacity .18s ease;
}

.qa-q-list-item:hover:before {
	opacity: 1;
}

.qa-q-item-stats {
	float: none !important;
	width: 92px;
	flex: 0 0 92px;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.qa-q-item-stats .qa-voting,
.qa-q-item-stats .qa-a-count,
.qa-q-item-stats .qa-view-count {
	float: none !important;
	width: 100% !important;
	min-height: 52px;
	margin: 0 !important;
	padding: 7px 5px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border: 1px solid var(--fosooli-line);
	border-radius: 11px;
	background: #fafbfe !important;
	color: var(--fosooli-muted) !important;
}

.qa-vote-buttons {
	margin: 2px auto !important;
	opacity: .88;
}

.qa-netvote-count-data,
.qa-a-count-data,
.qa-view-count-data {
	color: var(--fosooli-ink) !important;
	font-size: 16px !important;
	font-weight: 800;
	line-height: 1.2;
}

.qa-netvote-count-pad,
.qa-a-count-pad,
.qa-view-count-pad {
	font-size: 10px !important;
	line-height: 1.2;
}

.qa-q-item-main {
	float: none !important;
	width: auto !important;
	min-width: 0;
	flex: 1 1 auto;
	padding: 0 !important;
}

.qa-q-item-title {
	position: relative;
	margin: 0 0 8px !important;
	padding-inline-start: 30px;
	font-size: 18px !important;
	line-height: 1.65 !important;
	font-weight: 800;
}

.qa-q-item-title:before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: .32em;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background:
		linear-gradient(90deg, transparent 46%, rgba(255,255,255,.95) 46% 54%, transparent 54%),
		linear-gradient(135deg, var(--fosooli-primary), #7567ef);
	box-shadow: 0 4px 10px rgba(15,143,124,.2);
}

.qa-q-item-title a {
	color: var(--fosooli-ink) !important;
}

.qa-q-item-title a:hover {
	color: var(--fosooli-primary) !important;
}

.qa-q-item-content {
	margin: 0 0 12px;
	color: var(--fosooli-muted);
	font-size: 13px;
	line-height: 1.8;
}

.qa-q-item-avatar-meta {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	color: var(--fosooli-muted);
	font-size: 11px;
}

.qa-q-item-avatar img {
	width: 28px !important;
	height: 28px !important;
	border-radius: 9px;
}

.qa-q-item-meta,
.qa-q-item-meta a {
	color: var(--fosooli-muted) !important;
}

.qa-q-item-meta a:hover {
	color: var(--fosooli-primary) !important;
}

.qa-q-item-tag-list,
.qa-q-view-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0 0 !important;
	padding: 0 !important;
}

.qa-tag-link,
.qa-q-item-tag-item,
.qa-q-view-tag-item {
	border: 0 !important;
}

.qa-tag-link {
	display: inline-flex;
	padding: 4px 9px !important;
	border-radius: 999px;
	background: #f0f2f8 !important;
	color: #5f6880 !important;
	font-size: 11px;
	font-weight: 700;
}

.qa-tag-link:hover {
	background: var(--fosooli-soft) !important;
	color: var(--fosooli-primary) !important;
}

/* Single lesson page */
.qa-part-q-view,
.qa-a-list-item {
	margin-bottom: 18px;
	padding: 24px;
	border: 1px solid var(--fosooli-line);
	border-radius: var(--fosooli-radius);
	background: #fff;
	box-shadow: var(--fosooli-shadow-sm);
}

.qa-q-view,
.qa-a-item-main {
	border: 0 !important;
	background: transparent !important;
}

.qa-q-view-main,
.qa-a-item-main {
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
}

.qa-q-view-stats {
	float: none !important;
	margin: 0 0 18px;
	display: flex;
	gap: 8px;
}

.qa-q-view-stats > div {
	min-width: 80px;
	padding: 8px 11px !important;
	border: 1px solid var(--fosooli-line);
	border-radius: 11px;
	background: #fafbfe;
}

.qa-q-view-content,
.qa-a-item-content,
.entry-content {
	color: #30394f;
	font-size: 15px;
	line-height: 2;
}

.qa-q-view-content h2,
.qa-q-view-content h3,
.qa-a-item-content h2,
.qa-a-item-content h3,
.entry-content h2,
.entry-content h3 {
	margin-top: 1.7em;
	color: var(--fosooli-ink);
	line-height: 1.5;
}

.qa-q-view-content img,
.qa-a-item-content img,
.entry-content img {
	border-radius: 13px;
}

.qa-q-view-content blockquote,
.qa-a-item-content blockquote,
.entry-content blockquote {
	margin: 20px 0;
	padding: 16px 18px;
	border: 0;
	border-inline-start: 4px solid var(--fosooli-primary);
	border-radius: 11px;
	background: var(--fosooli-soft);
	color: #3d4660;
}

.qa-q-view-content pre,
.qa-a-item-content pre,
.entry-content pre {
	padding: 16px;
	border: 0;
	border-radius: 12px;
	background: #20263a;
	color: #e9ecf7;
}

.qa-a-list-item.qa-a-list-item-selected {
	border-color: rgba(46,159,130,.48);
	box-shadow: 0 15px 40px rgba(46,159,130,.10);
}

.qa-a-selected-text {
	color: var(--fosooli-success) !important;
	font-weight: 800;
}

.qa-c-list-item {
	margin-top: 10px !important;
	padding: 13px 15px !important;
	border: 1px solid var(--fosooli-line) !important;
	border-radius: 12px;
	background: #fafbfe !important;
}

/* Category/ranking cards */
.qa-part-ranking .qa-ranking-list,
.qa-part-ranking .qa-ranking-items,
.qa-part-ranking .qa-browse-cat-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.qa-ranking-item,
.qa-browse-cat-item {
	width: auto !important;
	min-height: 82px;
	margin: 0 !important;
	padding: 15px !important;
	border: 1px solid var(--fosooli-line);
	border-radius: 13px;
	background: #fafbfe;
}

.qa-ranking-item:hover,
.qa-browse-cat-item:hover {
	border-color: rgba(15,143,124,.3);
	background: var(--fosooli-soft);
}

.qa-ranking-label,
.qa-browse-cat-link {
	color: var(--fosooli-ink) !important;
	font-weight: 800 !important;
}

.qa-ranking-score,
.qa-browse-cat-note {
	color: var(--fosooli-muted) !important;
	font-size: 11px;
}

/* Forms */
.qa-form-tall-table,
.qa-form-wide-table {
	width: 100%;
}

.qa-form-tall-label,
.qa-form-wide-label,
.qa-form-light-label {
	padding: 10px 0 5px !important;
	color: var(--fosooli-ink) !important;
	font-size: 13px;
	font-weight: 800;
}

.qa-form-tall-data,
.qa-form-wide-data {
	padding: 0 0 12px !important;
}

.qa-form-tall-text,
.qa-form-tall-number,
.qa-form-tall-select,
.qa-form-wide-text,
.qa-form-wide-number,
.qa-form-wide-select,
.qa-form-light-text,
.qa-form-light-select,
.qa-form-tall-textarea,
.qa-form-wide-textarea {
	width: 100% !important;
	padding: 11px 13px !important;
	border: 1px solid var(--fosooli-line) !important;
	border-radius: 11px !important;
	background: #fafbfe !important;
	color: var(--fosooli-ink) !important;
	font-size: 14px !important;
	line-height: 1.6;
	outline: 0;
}

.qa-form-tall-text:focus,
.qa-form-tall-select:focus,
.qa-form-wide-text:focus,
.qa-form-wide-select:focus,
.qa-form-light-text:focus,
.qa-form-tall-textarea:focus,
.qa-form-wide-textarea:focus {
	border-color: var(--fosooli-primary) !important;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(15,143,124,.09);
}

.qa-form-tall-button,
.qa-form-wide-button,
.qa-form-light-button,
.qa-form-basic-button,
.qa-form-tall-button-login,
.qa-form-tall-button-register {
	min-height: 42px;
	padding: 9px 16px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: var(--fosooli-primary) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 800 !important;
	cursor: pointer;
	box-shadow: 0 8px 18px rgba(15,143,124,.18);
}

.qa-form-tall-button:hover,
.qa-form-wide-button:hover,
.qa-form-light-button:hover,
.qa-form-basic-button:hover {
	background: var(--fosooli-primary-dark) !important;
	transform: translateY(-1px);
}

.qa-form-light-button-answer,
.qa-form-light-button-comment {
	background: var(--fosooli-secondary) !important;
	box-shadow: 0 8px 18px rgba(46,159,130,.17);
}

.qa-form-tall-note,
.qa-form-wide-note,
.qa-form-light-note {
	color: var(--fosooli-muted) !important;
	font-size: 11px;
}

.qa-form-tall-error,
.qa-form-wide-error {
	color: var(--fosooli-danger) !important;
	font-size: 12px;
}

/* Messages */
.qa-error,
.qa-warning,
.qa-success,
.qa-notice {
	margin: 0 auto 14px !important;
	padding: 13px 16px !important;
	border: 0 !important;
	border-radius: 12px;
	box-shadow: var(--fosooli-shadow-sm);
	color: #fff !important;
}

.qa-error { background: var(--fosooli-danger) !important; }
.qa-warning { background: var(--fosooli-warning) !important; }
.qa-success { background: var(--fosooli-success) !important; }
.qa-notice { background: #3c4761 !important; }

/* Pagination */
.qa-page-links-list {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 24px 0;
	padding: 0;
}

.qa-page-links-item {
	margin: 0 !important;
}

.qa-page-link,
.qa-page-selected,
.qa-page-next,
.qa-page-prev {
	min-width: 38px;
	height: 38px;
	padding: 7px 11px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--fosooli-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--fosooli-muted) !important;
}

.qa-page-selected,
.qa-page-link:hover {
	border-color: var(--fosooli-primary) !important;
	background: var(--fosooli-primary) !important;
	color: #fff !important;
}

/* Mobile ask/search controls */
.qam-ask-search-box {
	z-index: 980;
}

.qam-ask-mobile a.fosooli-accent {
	background: var(--fosooli-secondary) !important;
	color: #fff !important;
}

.qam-search-mobile.fosooli-accent {
	background-color: var(--fosooli-primary) !important;
}

/* Footer */
.fosooli-footer-intro {
	padding: 42px 0;
	background: #20283b;
	color: #fff;
}

.fosooli-footer-intro__inner {
	width: min(var(--fosooli-container), calc(100% - 32px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.fosooli-footer-brand img {
	width: 185px;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
}

.fosooli-footer-brand p {
	max-width: 520px;
	margin: 14px 0 0;
	color: #b8c0d2;
	font-size: 13px;
}

.fosooli-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fosooli-footer-links a {
	padding: 8px 12px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 10px;
	color: #e8ebf3 !important;
	font-size: 12px;
}

.fosooli-footer-links a:hover {
	border-color: rgba(255,255,255,.3);
	background: rgba(255,255,255,.08);
}

.qam-footer-box {
	padding: 18px 0 !important;
	background: #171d2b !important;
	color: #949eb3 !important;
}

.qa-footer {
	width: min(var(--fosooli-container), calc(100% - 32px));
	margin: 0 auto !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.qa-footer a,
.qa-attribution a {
	color: #cbd1df !important;
}

.qa-attribution,
.qa-nav-footer {
	color: #949eb3 !important;
	font-size: 11px;
}

/* Admin compatibility */
.qa-template-admin .qa-main {
	width: 100% !important;
}

.qa-template-admin .qa-sidepanel {
	display: none !important;
}

.qa-template-admin .qa-nav-tabs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.qa-template-admin .qa-nav-tabs-link {
	display: inline-flex;
	padding: 7px 10px;
	border: 1px solid var(--fosooli-line);
	border-radius: 9px;
	background: #fff;
}

.qa-template-admin .qa-nav-tabs-selected {
	background: var(--fosooli-primary);
	color: #fff !important;
}

/* Responsive */
@media (max-width: 1100px) {
	.qam-main-nav-wrapper {
		gap: 14px;
	}

	.qa-nav-main-link {
		padding-inline: 9px !important;
		font-size: 13px;
	}

	.fosooli-shortcuts__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1100px) {
	#qam-topbar {
		min-height: 68px;
	}

	.qam-main-nav-wrapper {
		width: min(var(--fosooli-container), calc(100% - 24px));
		min-height: 68px;
		position: relative;
	}

	.qam-menu-toggle {
		display: inline-flex !important;
		order: -1;
	}

	.fosooli-brand-link,
	.fosooli-brand-link img {
		width: 154px;
	}

	.qa-nav-main {
		position: absolute !important;
		top: 62px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		padding: 12px !important;
		border: 1px solid var(--fosooli-line);
		border-radius: 15px;
		background: #fff !important;
		box-shadow: var(--fosooli-shadow);
	}

	.qa-nav-main-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
	}

	.qa-nav-main-link {
		justify-content: center;
	}

	.qa-nav-sub {
		display: none;
	}

	.fosooli-hero__inner {
		min-height: auto;
		padding: 50px 0 72px;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.fosooli-hero__content {
		max-width: 760px;
		text-align: center;
	}

	.fosooli-hero__eyebrow,
	.fosooli-hero__actions {
		justify-content: center;
	}

	.fosooli-hero p {
		margin-inline: auto;
	}

	.fosooli-hero__visual {
		display: none;
	}

	.qa-main-wrapper {
		display: block;
	}

	.qa-main {
		width: 100% !important;
	}

	.qa-sidepanel {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		z-index: 1200;
		width: min(340px, 88vw) !important;
		padding: 18px !important;
		overflow-y: auto;
		background: var(--fosooli-bg) !important;
		box-shadow: var(--fosooli-shadow);
	}

	#qam-sidepanel-toggle {
		background: var(--fosooli-primary) !important;
		color: #fff !important;
	}
}

@media (max-width: 700px) {
	.fosooli-hero h1 {
		font-size: 34px;
	}

	.fosooli-hero p {
		font-size: 15px;
	}

	.fosooli-shortcuts {
		margin-top: -22px;
	}

	.fosooli-shortcuts__inner {
		grid-template-columns: 1fr;
		gap: 9px;
	}

	.fosooli-shortcut {
		min-height: 78px;
	}

	.qa-body-wrapper {
		width: calc(100% - 20px);
		padding-top: 24px;
	}

	.qa-q-list-item {
		padding: 16px !important;
		display: block;
	}

	.qa-q-item-stats {
		width: 100%;
		margin-bottom: 12px !important;
		flex-direction: row;
	}

	.qa-q-item-stats .qa-voting,
	.qa-q-item-stats .qa-a-count,
	.qa-q-item-stats .qa-view-count {
		min-height: 48px;
		flex: 1 1 0;
	}

	.qa-part-ranking .qa-ranking-list,
	.qa-part-ranking .qa-ranking-items,
	.qa-part-ranking .qa-browse-cat-list {
		grid-template-columns: 1fr;
	}

	.fosooli-footer-intro__inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 480px) {
	.qam-main-nav-wrapper {
		width: calc(100% - 16px);
		gap: 7px;
	}

	.fosooli-brand-link,
	.fosooli-brand-link img {
		width: 130px;
	}

	#qam-account-toggle {
		min-width: 40px;
		width: 40px;
		padding: 4px;
	}

	.qam-account-handle {
		display: none;
	}

	.fosooli-hero__inner {
		width: calc(100% - 24px);
		padding-top: 38px;
	}

	.fosooli-hero h1 {
		font-size: 29px;
	}

	.fosooli-hero__actions {
		flex-direction: column;
	}

	.fosooli-btn {
		width: 100%;
	}

	.fosooli-shortcuts__inner {
		width: calc(100% - 20px);
	}

	.qa-main-heading,
	.qa-part-custom,
	.qa-part-form,
	.qa-part-form-profile,
	.qa-part-form-password,
	.qa-part-ranking,
	.qa-part-nav-list,
	.qa-part-q-view,
	.qa-a-list-item {
		padding: 16px !important;
	}

	.qa-main-heading h1 {
		font-size: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}