/* ===================================================================
   OverTheAirwaves — modern layer
   Loads after every other sheet so it can safely override colors,
   radii and add motion without touching the base stylesheets.
=================================================================== */

:root{
	--ota-accent:#c9c9ce;
	--ota-accent-dark:#87878d;
	--ota-accent-glow:rgba(201,201,206,0.28);
	--ota-blue:#5ea3f1;
	--ota-blue-dark:#3576c9;
	--ota-blue-glow:rgba(94,163,241,0.35);
	--ota-surface:#181818;
	--ota-surface-2:#1e1e1e;
	--ota-border:#2b2b2b;
	--ota-text:#c9c9c9;
	--ota-text-soft:#8a8a8f;
	--ota-text-bright:#f2f2f2;
	--ota-radius:10px;
	--ota-ease:cubic-bezier(.22,.68,0,1.71);
	--ota-ease-soft:cubic-bezier(.4,0,.2,1);
}

* { scrollbar-width: thin; scrollbar-color: var(--ota-accent) #101010; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#101010; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--ota-accent),var(--ota-accent-dark)); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ota-accent); }

::selection{ background:var(--ota-accent); color:#0c0c0c; }

@keyframes ota-fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes ota-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ota-glow-pulse{ 0%,100%{ box-shadow:0 0 6px 0 var(--ota-accent-glow); } 50%{ box-shadow:0 0 20px 4px var(--ota-accent-glow); } }
@keyframes ota-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-4px); } }
@keyframes ota-shimmer{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }

/* Page entrance — animate .wrapper (not #container/#header, which the
   footer is nested inside; a transform on either would make it a
   positioning root for the footer's position:absolute and pull the
   footer up over the page content). */
.wrapper{ animation: ota-fade-up .5s var(--ota-ease-soft) both; }
.post{ animation: ota-fade-in .4s var(--ota-ease-soft) both; }

/* Header bar — glassmorphism */
.haut{
	background: rgba(24,24,24,0.72) !important;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(192,20,47,0.25);
	box-shadow: 0 4px 24px rgba(0,0,0,0.35);
	transition: background .3s var(--ota-ease-soft);
}

/* Logo — gradient wordmark */
#logo, #logo:hover{
	color: var(--ota-accent) !important;
	font-family: 'Poppins', 'Raleway', sans-serif !important;
	font-weight: 700;
	letter-spacing: .3px;
	font-size: 21px !important;
	background: linear-gradient(90deg, #ffffff 0%, var(--ota-accent) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

#logo i{
	color: var(--ota-accent);
	-webkit-text-fill-color: var(--ota-accent);
	animation: ota-float 3s ease-in-out infinite;
	filter: drop-shadow(0 0 6px var(--ota-accent-glow));
}

/* Nav — animated underline */
#menu-deroulant li{ transition: background .3s var(--ota-ease-soft), color .3s; }
#menu-deroulant li a{ position: relative; }
#menu-deroulant li a:after{
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 10px;
	height: 2px;
	background: var(--ota-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ota-ease-soft);
}
#menu-deroulant li:hover a:after{ transform: scaleX(1); }

/* Header banner — glow + depth */
#header_block{
	position: relative;
	overflow: hidden;
	border-bottom: 2px solid var(--ota-accent);
	animation: bganim 29s linear infinite, ota-glow-pulse 6s ease-in-out infinite;
}
#header_block:before{
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}

/* Buttons — gradient hover + lift + light-sweep */
button, input.button, a.button{
	position: relative;
	overflow: hidden;
	border-radius: var(--ota-radius) !important;
	transition: transform .25s var(--ota-ease), box-shadow .25s var(--ota-ease-soft), background .3s !important;
}
button:before, input.button:before, a.button:before{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.25) 48%, transparent 76%);
	background-size: 220% 100%;
	background-position: 140% 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--ota-ease-soft);
}
button:hover, input.button:hover, a.button:hover{
	background: linear-gradient(135deg, var(--ota-accent), var(--ota-accent-dark)) !important;
	color: #0c0c0c !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -6px var(--ota-accent-glow);
}
button:hover:before, input.button:hover:before, a.button:hover:before{
	opacity: 1;
	background-position: -40% 0;
	transition: background-position .6s var(--ota-ease-soft), opacity .2s var(--ota-ease-soft);
}
button:active, input.button:active, a.button:active{ transform: translateY(0) scale(.98); }

/* Icons inside interactive elements — a small pop + tilt on hover so
   icons read as clickable, not just static glyphs */
button i, input.button i, a.button i,
.postbit_buttons > a i, .usercp_nav_item i, .modcp_nav_item i,
.scrollToTop i, .scrollToDown i, #logo i{
	display: inline-block;
	transition: transform .3s var(--ota-ease);
}
button:hover i, input.button:hover i, a.button:hover i,
.postbit_buttons > a:hover i{
	transform: scale(1.15) rotate(-6deg);
}

/* Cards */
.tborder, .post, .thead, .tcat{ border-radius: var(--ota-radius) !important; }
.post{ transition: transform .3s var(--ota-ease-soft), box-shadow .3s var(--ota-ease-soft), border-color .3s; }
.post:hover{ border-color: rgba(192,20,47,0.35); box-shadow: 0 10px 30px -12px rgba(0,0,0,0.6); }
.trow1, .trow2{ transition: background .25s var(--ota-ease-soft); }
tr:hover > .trow1, tr:hover > .trow2{ background: #252525 !important; }

/* Pagination — pill style */
.pagination a, .pagination .pagination_current{
	border-radius: 999px !important;
	transition: transform .25s var(--ota-ease), box-shadow .25s, background .25s !important;
}
.pagination a:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px -6px var(--ota-accent-glow); }

/* Inputs — focus glow */
input.textbox, textarea, select{
	border-radius: 8px !important;
	transition: border-color .25s, box-shadow .25s;
}
input.textbox:focus, textarea:focus, select:focus{
	border-color: var(--ota-accent) !important;
	box-shadow: 0 0 0 3px var(--ota-accent-glow);
}

/* Scroll to top/down — floating circular buttons */
.scrollToTop, .scrollToDown{
	border-radius: 50% !important;
	width: 42px; height: 42px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,0.5);
	transition: transform .3s var(--ota-ease), box-shadow .3s !important;
}
.scrollToTop:hover, .scrollToDown:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px -6px var(--ota-accent-glow); }

/* Footer — modern glass strip with shimmering top edge */
.footer-distributed{
	background: linear-gradient(180deg, #1c1c1c, #141414) !important;
	border-top: none !important;
}
.footer-distributed:before{
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 3px;
	background: linear-gradient(90deg, transparent, var(--ota-accent), transparent);
	background-size: 200% 100%;
	animation: ota-shimmer 4s linear infinite;
}
.footer-distributed .footer-links{ font-size: 13px; opacity: .85; }
.footer-distributed .footer-icons a{
	background: var(--ota-surface-2);
	transition: transform .3s var(--ota-ease), background .3s, color .3s, box-shadow .3s;
}
.footer-distributed .footer-icons a:hover{
	transform: translateY(-4px);
	background: var(--ota-accent);
	box-shadow: 0 8px 18px -6px var(--ota-accent-glow);
}
.footer-distributed .footer-icons a:hover i{ color: #0c0c0c !important; }

/* Dark-mode fixes for third-party popups (modal / jGrowl / impromptu) */
.modal{
	background: var(--ota-surface) !important;
	color: var(--ota-text) !important;
	border: 1px solid var(--ota-border);
	box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7) !important;
}
.modal a.close-modal{ color: var(--ota-text); }

div.jqi{
	background-color: var(--ota-surface) !important;
	border: 1px solid var(--ota-border) !important;
	color: var(--ota-text) !important;
}
div.jqi .jqistate{ background-color: var(--ota-surface) !important; }
div.jqi .jqititle{ border-bottom: 1px solid var(--ota-border) !important; color: #fff; }
div.jqi .jqimessage{ color: var(--ota-text) !important; }
div.jqi .jqibuttons{ background-color: #1a1a1a !important; border-top: 1px solid var(--ota-border) !important; }
div.jqi .jqibuttons button{ color: var(--ota-text) !important; border-left: 1px solid var(--ota-border) !important; }
div.jqi .jqibuttons button.jqidefaultbutton{ color: var(--ota-accent) !important; }

.jGrowl .jGrowl-notification, .jGrowl .jGrowl-closer{
	background-color: var(--ota-surface) !important;
	border: 1px solid var(--ota-border);
	border-left: 3px solid var(--ota-accent);
}

/* Avatar hover cards — dark glass */
.avatarep_usern, .avatarep_usern_hov{
	background: rgba(20,20,20,0.85) !important;
	color: var(--ota-text) !important;
	backdrop-filter: blur(6px);
}
.avatarep_profile, .avatarep_profile a{ color: var(--ota-text) !important; }
.avatarep_uname{ color: var(--ota-accent) !important; }

/* User CP / Mod CP nav — hover slide */
.usercp_nav_item, .modcp_nav_item{
	border-radius: 8px;
	padding: 6px 8px !important;
	transition: background .25s var(--ota-ease-soft), padding-left .25s var(--ota-ease-soft);
}
.usercp_nav_item:hover, .modcp_nav_item:hover{
	background: rgba(192,20,47,0.12);
	padding-left: 14px !important;
}

/* Mobile header — keep Home/Members/Team/Help/Search reachable instead
   of hiding .useroptions outright. Stacks logo above a horizontally
   scrollable nav strip, with a matching fixed height so the spacer
   directly after .haut (an unclassed sibling div in the header
   template) doesn't leave the header overlapping the page content. */
@media (max-width: 768px){
	.haut{
		backdrop-filter: blur(10px);
		height: 84px !important;
		display: block;
		text-align: center;
	}
	.haut + div{ height: 84px !important; }
	#logo{
		display: block;
		float: none !important;
		text-align: center;
		padding: 8px 0 2px !important;
		top: 0 !important;
		font-size: 18px !important;
	}
	.useroptions{
		display: block !important;
		width: 100%;
	}
	#menu-deroulant{
		float: none !important;
		right: 0 !important;
		display: flex;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		padding: 0 10px;
		gap: 2px;
	}
	#menu-deroulant li{ display: inline-block; flex: 0 0 auto; }
	#menu-deroulant li a{ padding: 8px 10px !important; font-size: 13px !important; }
	#menu-deroulant li a:after{ bottom: 4px; }

	/* a little extra breathing room under the shorter stacked footer */
	body{ margin-bottom: 220px !important; }
}

/* ===================================================================
   "Thank You" plugin block — its markup ships with its own inline
   styles and a plain collapse.png icon, so it's restyled here to sit
   quietly inside a post instead of clashing with the theme. IDs are
   numbered per-post (tyl_a_expcol_1, _2, …) so these all match on the
   stable prefix rather than a specific number.
=================================================================== */
.tyl_collapsible_summary,
[id^="tyl_data_"]{
	display: block;
	font-size: 12px;
	color: var(--ota-text);
	line-height: 1.7;
	opacity: .9;
}

.tyl_collapsible_summary{
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px dashed var(--ota-border);
}

.tyl_collapsible_summary:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f004";
	color: var(--ota-accent);
	margin-right: 6px;
	font-size: 11px;
}

[id^="tyl_data_"]{
	padding-left: 26px;
}

.tyl_collapsible_summary a,
[id^="tyl_data_"] a{
	transition: color .2s var(--ota-ease-soft);
}

.tyl_collapsible_summary a:hover,
[id^="tyl_data_"] a:hover{
	color: var(--ota-accent);
	text-decoration: none;
}

/* the plugin reuses MyBB's usergroup name-color span (often a plain
   "green") for the mentioned user — swapped for the theme accent so
   it doesn't clash, scoped to just this block */
.tyl_collapsible_summary span[style*="color: green"],
[id^="tyl_data_"] span[style*="color: green"]{
	color: var(--ota-accent) !important;
}

a[id^="tyl_a_expcol_"]{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px; height: 20px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--ota-surface-2);
	color: var(--ota-accent);
	font-size: 10px;
	vertical-align: middle;
	transition: background .25s var(--ota-ease-soft), transform .25s var(--ota-ease), color .25s;
}

a[id^="tyl_a_expcol_"]:hover{
	background: var(--ota-accent);
	color: #0c0c0c;
	transform: scale(1.08);
}

/* the plugin's own collapse.png is swapped for an FA glyph that
   flips with the title MyBB.tgl() writes ("[-]" open / "[+]" closed) */
a[id^="tyl_a_expcol_"] img{ display: none; }

a[id^="tyl_a_expcol_"]:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f068";
}

a[id^="tyl_a_expcol_"][title="[+]"]:before{ content: "\f067"; }

/* ===================================================================
   Modern form controls — native selects, checkboxes/radios, and the
   Select2 widget MyBB uses for "search for a user" style fields.
   Select2's own CSS can load after ours depending on when the widget
   inits, so these use !important to stay on top regardless of order.
=================================================================== */

select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--ota-accent) 50%), linear-gradient(135deg, var(--ota-accent) 50%, transparent 50%);
	background-position: calc(100% - 18px) center, calc(100% - 13px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 32px !important;
	cursor: pointer;
}
select option{ background: var(--ota-surface); color: var(--ota-text); }

input[type="checkbox"], input[type="radio"]{
	accent-color: var(--ota-accent);
	width: 15px; height: 15px;
	cursor: pointer;
	vertical-align: middle;
	transition: transform .2s var(--ota-ease);
}
input[type="checkbox"]:hover, input[type="radio"]:hover{ transform: scale(1.08); }

/* Select2 (v3) — single select */
.select2-container .select2-choice{
	background: var(--ota-surface-2) !important;
	border: 1px solid var(--ota-border) !important;
	border-radius: 8px !important;
	color: var(--ota-text) !important;
	height: 38px !important;
	line-height: 36px !important;
	padding: 0 10px !important;
	box-shadow: none !important;
	transition: border-color .25s var(--ota-ease-soft), box-shadow .25s !important;
}
.select2-container.select2-dropdown-open .select2-choice,
.select2-container-active .select2-choice{
	border-color: var(--ota-accent) !important;
	box-shadow: 0 0 0 3px var(--ota-accent-glow) !important;
}
.select2-container .select2-choice .select2-chosen{ color: var(--ota-text) !important; }
.select2-container .select2-choice abbr{ filter: none !important; opacity: .6; }
.select2-container .select2-choice .select2-arrow{
	background: transparent !important;
	border-left: none !important;
}
.select2-container .select2-choice .select2-arrow b{
	background: none !important;
}
.select2-container .select2-choice .select2-arrow:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f107";
	color: var(--ota-accent);
	position: relative;
	left: 3px;
}

/* Select2 — multi select / tag style */
.select2-container-multi .select2-choices{
	background: var(--ota-surface-2) !important;
	border: 1px solid var(--ota-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}
.select2-container-multi.select2-container-active .select2-choices{
	border-color: var(--ota-accent) !important;
	box-shadow: 0 0 0 3px var(--ota-accent-glow) !important;
}
.select2-container-multi .select2-choices .select2-search-choice{
	background: var(--ota-surface) !important;
	border: 1px solid var(--ota-border) !important;
	color: var(--ota-text) !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	padding: 3px 18px 3px 10px !important;
}
.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close{ opacity: .6; }
.select2-container .select2-input{
	background: transparent !important;
	color: var(--ota-text) !important;
	border: none !important;
}

/* Select2 — results dropdown */
.select2-drop, .select2-drop-active{
	background: var(--ota-surface) !important;
	border: 1px solid var(--ota-border) !important;
	color: var(--ota-text) !important;
	border-radius: 10px !important;
	box-shadow: 0 16px 40px -10px rgba(0,0,0,0.6) !important;
	overflow: hidden;
}
.select2-search input{
	background-color: var(--ota-surface-2) !important;
	background-image: none !important;
	border: 1px solid var(--ota-border) !important;
	color: var(--ota-text) !important;
	border-radius: 8px !important;
}
.select2-results{ margin: 4px; padding: 0; }
.select2-results .select2-result-label{ color: var(--ota-text) !important; }
.select2-results .select2-highlighted{
	background: var(--ota-accent) !important;
	color: #0c0c0c !important;
	border-radius: 6px;
}
.select2-results .select2-no-results,
.select2-results .select2-searching{
	background: transparent !important;
	color: var(--ota-text) !important;
}

/* ===================================================================
   Member profile — modern header card
=================================================================== */
.ota-profile-card{
	display: flex;
	align-items: center;
	gap: 20px;
	background: linear-gradient(160deg, var(--ota-surface) 0%, var(--ota-surface-2) 100%);
	border: 1px solid var(--ota-border);
	border-radius: 14px;
	padding: 20px 24px;
	box-shadow: 0 14px 34px -16px rgba(0,0,0,0.55);
}

.ota-profile-avatar{ flex: 0 0 auto; }
.ota-profile-avatar img{
	border-radius: 14px !important;
	border: 2px solid var(--ota-border);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 8px 20px -6px var(--ota-accent-glow);
	transition: transform .3s var(--ota-ease), box-shadow .3s var(--ota-ease-soft);
}
.ota-profile-avatar img:hover{
	transform: scale(1.03) rotate(-1deg);
	box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 12px 28px -6px var(--ota-accent-glow);
}

.ota-profile-info{ flex: 1 1 auto; min-width: 0; text-align: left; }
.ota-profile-name{
	display: inline-block;
	font-family: 'Poppins', 'Raleway', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: .2px;
	color: #fff;
}
.ota-profile-title{
	display: inline-block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ota-accent);
	background: rgba(192,20,47,0.12);
	border: 1px solid rgba(192,20,47,0.3);
	border-radius: 999px;
	padding: 3px 12px;
}
.ota-profile-details{
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--ota-text);
}
.ota-profile-details strong{ color: #ddd; margin-right: 4px; }
.ota-profile-status .online{ color: #37d67a; }
.ota-profile-status a{ text-decoration: none; }

.ota-profile-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 768px){
	.ota-profile-card{ flex-direction: column; text-align: center; padding: 20px; }
	.ota-profile-info{ text-align: center; }
	.ota-profile-details{ justify-content: center; }
}

/* ===================================================================
   Member profile — info cards below the header (Forum Info, Custom
   Fields, reputation/warning badges, buddy/ignore/report row).
   Several of these panels (reputation, warning level, custom fields,
   referrals) are rendered by MyBB's master templates rather than this
   theme's, so they're re-skinned by their existing stable classes
   instead of by editing template markup we don't have the source of.
=================================================================== */

#mobile_profile .tborder,
#profile_desktop .tborder{
	margin-bottom: 16px;
	overflow: hidden;
}

.ota-card-head i{ color: rgba(255,255,255,0.85); margin-right: 4px; }

.ota-stat-row td{ transition: background .2s var(--ota-ease-soft); }
.ota-stat-row:hover td{ background: #262626 !important; }
.ota-stat-row td:first-child i{
	color: var(--ota-accent);
	width: 16px;
	text-align: center;
	margin-right: 6px;
}
.ota-stat-sub{ color: #888; font-size: 11px; }

.ota-pill-link{
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ota-surface-2);
	border: 1px solid var(--ota-border);
	color: var(--ota-text) !important;
	text-decoration: none !important;
	transition: background .25s var(--ota-ease-soft), color .25s, border-color .25s;
}
.ota-pill-link:hover{
	background: var(--ota-accent);
	border-color: var(--ota-accent);
	color: #0c0c0c !important;
}

/* Reputation + warning level badges (master-template output) */
.reputation_positive, .reputation_neutral, .reputation_negative,
.high_warning, .moderate_warning, .low_warning, .normal_warning{
	display: inline-block;
	padding: 2px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
.reputation_positive{ background: rgba(55,214,122,0.15); color: #37d67a; }
.reputation_neutral{ background: rgba(255,255,255,0.08); color: #bbb; }
.reputation_negative{ background: rgba(220,53,69,0.15); color: #ff5c6c; }
.normal_warning{ background: rgba(55,214,122,0.15); color: #37d67a; }
.low_warning{ background: rgba(255,193,7,0.15); color: #ffc107; }
.moderate_warning{ background: rgba(255,140,0,0.15); color: #ff8c00; }
.high_warning{ background: rgba(220,53,69,0.18); color: #ff5c6c; }

/* Custom profile fields table + any additional tfixed panel */
.tborder.tfixed .thead{ display: flex; align-items: center; gap: 6px; }

/* Desktop two-column profile layout — breathing room between panels */
#profile_desktop > tbody > tr > td,
#profile_desktop > tr > td{ padding: 0 10px; }
#profile_desktop > tbody > tr > td:first-child,
#profile_desktop > tr > td:first-child{ padding-left: 0; }
#profile_desktop > tbody > tr > td:last-child,
#profile_desktop > tr > td:last-child{ padding-right: 0; }

.ota-profile-actions-center{ justify-content: center; margin: 10px 0; }

/* ===================================================================
   Leftover Light-theme pastels — the base "Dark" theme never adapted
   these semantic row/alert colors (shaded rows, unapproved/deleted
   posts, selected rows, the "select all" bar, PM/error alerts) from
   the Light theme, so they show up as jarring pink/purple/yellow
   blocks (e.g. Quick Reply's message column). Swapped for dark
   surfaces with a colored left accent bar instead of a solid fill.
=================================================================== */
.trow_shaded{
	background: #232323 !important;
	border: none !important;
	border-left: 3px solid var(--ota-accent) !important;
}

.post.unapproved_post{
	background: #202020 !important;
	border-left: 3px solid #ffc107;
}
.post.unapproved_post .post_author{ border-bottom-color: rgba(255,193,7,0.35) !important; }
.post.classic.unapproved_post .post_author{ border-color: rgba(255,193,7,0.35) !important; }
.post.unapproved_post .post_controls{ border-top-color: rgba(255,193,7,0.35) !important; }

.trow_deleted, .post.deleted_post{
	background: #202020 !important;
	border-left: 3px solid #ff5c6c;
}

.trow_selected, tr.trow_selected td{
	background: rgba(192,20,47,0.16) !important;
	color: var(--ota-text) !important;
	border-bottom-color: rgba(192,20,47,0.35) !important;
}
.trow_selected a:link, .trow_selected a:visited, .trow_selected a:hover, .trow_selected a:active{
	color: var(--ota-text) !important;
}

.selectall{
	background: var(--ota-surface-2) !important;
	border-bottom: 1px solid var(--ota-border) !important;
	border-left: 3px solid #ffc107;
	color: var(--ota-text) !important;
}

.pm_alert{
	background: var(--ota-surface-2) !important;
	border-left: 3px solid #ffc107;
	color: var(--ota-text) !important;
	border-radius: 8px !important;
}

.red_alert{
	background: rgba(220,53,69,0.12) !important;
	border-left: 3px solid #ff5c6c;
	color: #ff8a94 !important;
	border-radius: 8px !important;
}
.red_alert a:link, .red_alert a:visited, .red_alert a:hover, .red_alert a:active{ color: #ff8a94 !important; }

div.error{
	background: var(--ota-surface-2) !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: 3px solid #ffc107;
	border-radius: 8px;
}
div.error p{ color: var(--ota-text) !important; }
div.error p em{ color: #ff5c6c !important; }

/* some plugins/templates render an avatar img with an empty src when
   the user has none set, leaving a broken-image icon */
img[src=""]{ display: none !important; }

/* Expand/collapse chip — quick reply, category collapse, etc. share
   this markup (sometimes a raw collapse.png, sometimes an <i>) */
.expcolimage{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--ota-surface-2);
	cursor: pointer;
	transition: background .25s var(--ota-ease-soft), transform .2s var(--ota-ease);
}
.expcolimage:hover{ background: var(--ota-accent); transform: scale(1.08); }
.expcolimage img{ filter: invert(1) brightness(1.6); width: 12px; height: 12px; }
.expcolimage i{ color: var(--ota-accent); font-size: 11px; }
.expcolimage:hover i{ color: #0c0c0c; }

/* ===================================================================
   Team page leaderboard (showteam_usergroup / showteam_moderators) —
   staggered entrance, hover glow, and a CSS counter for a rank badge
   since MyBB doesn't hand this template a rank number.
=================================================================== */
.ota-team-table{ counter-reset: ota-team-rank; }

.ota-team-row{
	opacity: 0;
	animation: ota-fade-up .45s var(--ota-ease-soft) forwards;
}
.ota-team-row:nth-child(1){ animation-delay: .05s; }
.ota-team-row:nth-child(2){ animation-delay: .1s; }
.ota-team-row:nth-child(3){ animation-delay: .15s; }
.ota-team-row:nth-child(4){ animation-delay: .2s; }
.ota-team-row:nth-child(5){ animation-delay: .25s; }
.ota-team-row:nth-child(6){ animation-delay: .3s; }
.ota-team-row:nth-child(n+7){ animation-delay: .35s; }

.ota-team-row td{ transition: background .25s var(--ota-ease-soft), transform .25s var(--ota-ease-soft); }
.ota-team-row:hover td{ background: #262626 !important; }
.ota-team-row:hover{ transform: translateX(2px); }

.ota-team-name{ position: relative; }
.ota-team-rank{ counter-increment: ota-team-rank; }
.ota-team-rank:before{
	content: counter(ota-team-rank);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	margin-right: 10px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ota-accent), var(--ota-accent-dark));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	box-shadow: 0 4px 10px -3px var(--ota-accent-glow);
	vertical-align: middle;
}

.ota-team-name span[style*="color: green"]{ color: var(--ota-accent) !important; }
.ota-team-name a{ transition: color .2s var(--ota-ease-soft); }
.ota-team-name a:hover{ color: var(--ota-accent) !important; text-decoration: none; }

/* Email/PM/Report/Delete etc. buttons — a flexible pill rather than a
   fixed circle, since this same markup is used both icon-only (post
   controls, team page) and with a text label (reputation report's
   "Report"/"Delete" links), which a fixed 30x30 circle would crush. */
.postbit_buttons > a{
	border-radius: 999px !important;
	min-width: 30px;
	height: 30px;
	padding: 0 11px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: var(--ota-surface-2);
	transition: background .25s var(--ota-ease-soft), color .25s, transform .25s var(--ota-ease) !important;
}
.postbit_buttons > a:hover{
	background: var(--ota-accent) !important;
	color: #0c0c0c !important;
	transform: translateY(-2px) scale(1.03);
	opacity: 1 !important;
}
.postbit_buttons > a > span{ font-size: 12px; font-weight: 600; letter-spacing: .2px; }
.postbit_buttons.float_right{ display: inline-flex; gap: 6px; margin-left: 8px; }

/* the reputation report re-uses .postbit_report/.postbit_qdelete as
   plain text links (<a><span>Report</span></a>, no icon) — give them
   an icon too, scoped to the span so the icon-only post-view versions
   of these same classes aren't touched */
a.postbit_report > span:before{
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f024"; margin-right: 5px;
}
a.postbit_qdelete > span:before{
	font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f2ed"; margin-right: 5px;
}

/* ===================================================================
   Reputation — same leftover-pastel bug as the other status rows
   (light green/pink fill that only looked right on hover, when the
   generic dark hover rule took over). Base state is now dark with a
   colored accent instead of relying on hover to fix the color.
=================================================================== */
.trow_reputation_positive{
	background: #202020 !important;
	border-left: 3px solid #37d67a;
	animation: ota-fade-in .35s var(--ota-ease-soft) both;
}
.trow_reputation_negative{
	background: #202020 !important;
	border-left: 3px solid #ff5c6c;
	animation: ota-fade-in .35s var(--ota-ease-soft) both;
}

.repbox{ border-radius: 999px !important; border: none !important; }
._plus{ background: rgba(55,214,122,0.15) !important; color: #37d67a !important; border: none !important; }
._minus{ background: rgba(220,53,69,0.15) !important; color: #ff5c6c !important; border: none !important; }
._neutral{ background: rgba(255,255,255,0.08) !important; color: #bbb !important; border: none !important; }

/* the reputation breakdown table (Positives/Neutrals/Negatives over
   time) is given the .trow2 + .tborder classes directly on the table
   itself in the master template, turning it into a flat pastel-less
   panel here instead of a plain bordered grid */
table.tborder.trow2{
	background: var(--ota-surface) !important;
	border-radius: var(--ota-radius) !important;
	overflow: hidden;
}
table.tborder.trow2 tr:hover td{ background: #262626 !important; }

/* ===================================================================
   Links inside post content — MyBB wraps every auto-linked URL and
   [url] bbcode tag in .mycode_url, but it inherits the plain gray
   link color by default and disappears into the post text. Bold +
   accent so they actually stand out, with a lighter tint on hover.
=================================================================== */
a.mycode_url, .mycode_url{
	font-weight: 700;
	color: var(--ota-accent) !important;
	text-decoration: none;
	transition: color .2s var(--ota-ease-soft);
}
a.mycode_url:hover, .mycode_url:hover{
	color: #ff6b7f !important;
	text-decoration: underline;
}
a.mycode_url[target="_blank"]:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f35d";
	font-size: 10px;
	margin-right: 4px;
	opacity: .75;
}

/* ===================================================================
   Colour rebalance — the base stylesheets lean on red (#c0142f /
   #8c0f26) for nearly every accent: every link hover, every sidebar
   icon, every section header bar, both floating scroll buttons, the
   nav underline *and* the nav border. This section, loaded last,
   replaces that with light gray as the one primary accent. Blue is
   kept only as a single small "unread" signal; red is kept only
   where it's a genuine error/danger indicator elsewhere in the
   theme (those rules are untouched).
=================================================================== */

/* Site-wide link hover */
a:hover{ color: var(--ota-text-bright) !important; }

/* Top nav — the animated underline (added above) already marks the
   hovered item, so the extra coloured border under it is just noise */
#menu-deroulant li:hover{ border-bottom-color: transparent !important; }
#menu-deroulant li:hover ul li:hover{ color: var(--ota-text-bright) !important; }

/* Misc base-theme labels that defaulted to red text */
.wo_title{ color: var(--ota-text-bright) !important; }
#home_bit{ color: var(--ota-text-soft) !important; }
#home_bit:hover{ color: var(--ota-accent) !important; }
.nav_link{ color: var(--ota-text) !important; }
.nav_link:hover{ background: var(--ota-surface-2) !important; border-bottom-color: var(--ota-accent) !important; }
.navigation{ color: var(--ota-text) !important; }
.headerlist{ border-bottom-color: var(--ota-border) !important; }
.headerlist ul{ color: var(--ota-text) !important; }

/* Every section/table header on every page was a solid red bar */
.thead{
	background: var(--ota-surface-2) !important;
	color: var(--ota-text-bright) !important;
	border-bottom: 2px solid var(--ota-border);
}
.thead a:link, .thead a:visited{ color: var(--ota-text-bright) !important; }

/* Mobile member widget — was a solid red block */
#mobile_member{ background: var(--ota-surface-2) !important; color: var(--ota-text-bright) !important; }

/* Pagination hover — was a solid red fill */
.pagination a:hover{
	background: var(--ota-accent) !important;
	border-color: var(--ota-accent) !important;
	color: #0c0c0c !important;
}

/* Circular header icon button */
#iconbouton{
	background: var(--ota-surface-2) !important;
	color: var(--ota-accent) !important;
	transition: transform .3s var(--ota-ease), background .3s, color .3s;
}
#iconbouton:hover{ background: var(--ota-accent) !important; color: #0c0c0c !important; transform: scale(1.1) rotate(8deg); }

/* Floating scroll buttons — matching dark circles with a light-gray
   ring instead of solid red fills */
.scrollToTop, .scrollToDown{
	background: var(--ota-surface-2) !important;
	color: var(--ota-text-bright) !important;
	border: 1px solid var(--ota-border);
}
.scrollToTop:hover, .scrollToDown:hover{ background: var(--ota-accent) !important; color: #0c0c0c !important; }

/* Sidebar nav icons (User CP / Mod CP) — a whole column of red glyphs
   regardless of state told the eye nothing. Idle icons are now a
   quiet gray and only light up on hover/active. */
.usercp_nav_item:before, .modcp_nav_item:before{
	color: var(--ota-text-soft) !important;
	transition: color .25s var(--ota-ease-soft), transform .3s var(--ota-ease);
}
.usercp_nav_item:hover:before, .modcp_nav_item:hover:before{
	color: var(--ota-accent) !important;
	transform: scale(1.15) rotate(-6deg);
}

/* Forum-listing status icons (forum on/off, subforum minis) — flat
   red regardless of state */
.forum_on, .subforum_minion{ color: var(--ota-blue) !important; }
.forum_off, .forum_offlock, .forum_offlink,
.subforum_minioff, .subforum_miniofflock, .subforum_miniofflink{ color: var(--ota-text-soft) !important; }

/* Thread status folder icons — every thread in a forum listing was
   the same red regardless of state. Recoloured so the colour itself
   is informative: gray = read, light gray = hot, blue = unread. */
.thread_status.dot_folder:before, .thread_status.folder:before,
.thread_status.dot_lockfolder:before, .thread_status.lockfolder:before,
.thread_status.dot_hotlockfolder:before, .thread_status.hotlockfolder:before{
	color: var(--ota-text-soft) !important;
}
.thread_status.dot_hotfolder:before, .thread_status.hotfolder:before{
	color: var(--ota-accent) !important;
}
.thread_status.dot_newfolder:before, .thread_status.newfolder:before,
.thread_status.dot_newhotfolder:before, .thread_status.newhotfolder:before,
.thread_status.dot_newhotlockfolder:before, .thread_status.newhotlockfolder:before,
.thread_status.dot_newlockfolder:before, .thread_status.newlockfolder:before{
	color: var(--ota-blue) !important;
}
.thread_status:before{ transition: transform .3s var(--ota-ease), color .25s var(--ota-ease-soft); }
tr:hover .thread_status:before{ transform: scale(1.12); }

/* Star rating widget — hover state was hardcoded red with !important */
.star_rating_notrated li:hover a,
.star_rating_notrated li:hover ~ li a{ color: var(--ota-accent) !important; }