/* === SCATVILLE MODERN DARK THEME === */
/* Color scheme: Deep dark bg, amber/gold accents */

:root {
	--bg-primary: #0f0f1a;
	--bg-secondary: #1a1a2e;
	--bg-card: #16213e;
	--bg-card-hover: #1c2a4a;
	--accent: #e2a308;
	--accent-hover: #f5b731;
	--accent-dark: #b8860b;
	--text-primary: #e8e8f0;
	--text-secondary: #9ca3af;
	--text-muted: #6b7280;
	--border-color: #2d2d44;
	--success: #22c55e;
	--danger: #ef4444;
}

* {
	font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--text-primary);
	text-align: left;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	border-radius: 0;
	box-shadow: none;
}

*:focus-visible {
	outline: 2px solid #e2a308;
	outline-offset: 2px;
}

html, body {
	height: 100%;
}

body {
	background: var(--bg-primary);
	width: 100%;
	display: block;
	float: left;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', 'Open Sans', -apple-system, sans-serif;
	font-weight: 700;
	margin: 0;
	color: var(--text-primary);
}

h1, h1 a { font-size: 22px; }
h2, h2 a { font-size: 20px; }
h3, h3 a { font-size: 18px; }
h4, h4 a { font-size: 16px; }
h5, h5 a { font-size: 14px; }
h6, h6 a { font-size: 13px; }

.description h2, .description h2 a {
	font-family: 'Inter', 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 400;
}

a {
	color: var(--text-primary);
	text-decoration: none;
	transition: all 0.25s ease;
}

a:hover {
	color: var(--accent);
}

a.button, button, input[type="submit"] {
	background: var(--accent);
	display: block;
	float: left;
	color: #000;
	font-weight: 700;
	padding: 6px 16px;
	border: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: all 0.25s ease;
}

a.button:hover, button:hover, input[type="submit"]:hover {
	background: var(--accent-hover);
	padding: 6px 16px;
}

.btn-default, .btn-default:hover {
	background: var(--bg-card);
	font-size: 18px;
	padding: 6px 20px;
}

input[type="submit"] {
	width: auto;
	margin-top: 4px;
}

a.button span, button span {
	color: #000;
}

a.button.center, button.center {
	display: table !important;
	float: none;
	margin: 0 auto;
}

a.button .sub-label-on, a.button.active .sub-label-off { display: none; }
a.button.active .sub-label-on, a.button .sub-label-off { display: block; }

img {
	display: block;
	float: left;
}

img.responsive {
	width: 100%;
	height: auto;
}

p {
	width: 100%;
	display: block;
	float: left;
}

p.cat {
	padding: 12px;
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.7;
}

ul, ol {
	list-style: none;
}

label span {
	width: 100%;
	display: block;
	float: left;
	color: var(--text-primary);
	font-weight: 700;
	font-size: 16px;
	margin-top: 10px;
}

.checkboxes label span {
	width: auto !important;
	font-size: 14px !important;
	margin-top: 0 !important;
}

label img {
	margin-top: 10px;
}

input, textarea, select {
	background: var(--bg-secondary);
	width: 100%;
	display: block;
	float: left;
	color: var(--text-primary);
	padding: 10px 14px;
	border: 1px solid var(--border-color);
	border-radius: 4px;
	transition: border-color 0.25s ease;
}

input:focus, textarea:focus, select:focus {
	border-color: var(--accent);
}

input { min-height: 36px; }

textarea {
	height: 200px;
	min-height: 200px;
	max-height: 400px;
	resize: vertical;
}

select { width: 200px; }
select, option { color: var(--text-primary); }

form#login-form, form#forgot-pass-form, form#signup-form {
	width: 90%;
	max-width: 400px;
	display: table;
	margin: 0 auto;
}

form#login-form input, form#forgot-pass-form input, form#signup-form input {
	margin: 8px 0;
}

form#login-form button, form#forgot-pass-form button, form#signup-form button {
	float: left;
	margin-top: 10px;
}

iframe { border: 0 !important; }

/* === LAYOUT === */
.wrapper {
	width: 100%;
	max-width: 1480px;
	display: block;
	margin: 0 auto;
	padding: 0 10px;
}

.wrapper.video-wrapper {
	width: 95% !important;
	max-width: 1480px !important;
}

.wrapper.video-wrapper .col-9 {
	background: var(--bg-secondary);
	padding: 16px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
}

.box {
	background: var(--bg-secondary);
	padding: 10px 0 20px 0;
	margin: 0 10px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
	display: block;
	float: left;
}

.col-1 { width: 8.333%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

.col-1.margin, .col-2.margin, .col-3.margin, .col-4.margin, .col-5.margin, .col-6.margin, .col-7.margin, .col-8.margin, .col-9.margin, .col-10.margin, .col-11.margin, .col-12.margin {
	margin: 0 0 0 0.6% !important;
}

.col-1.margin.first, .col-2.margin.first, .col-3.margin.first, .col-4.margin.first, .col-5.margin.first, .col-6.margin.first, .col-7.margin.first, .col-8.margin.first, .col-9.margin.first, .col-10.margin.first, .col-11.margin.first, .col-12.margin.first {
	margin-left: 0 !important;
}

.col-1.margin { width: 7.783% !important; }
.col-2.margin { width: 16.16% !important; }
.col-3.margin { width: 24.55% !important; }
.col-4.margin { width: 32.93% !important; }
.col-5.margin { width: 41.31% !important; }
.col-6.margin { width: 49.7% !important; }
.col-7.margin { width: 58.08% !important; }
.col-8.margin { width: 66.46% !important; }
.col-9.margin { width: 74.85% !important; }
.col-10.margin { width: 83.23% !important; }
.col-11.margin { width: 91.61% !important; }
.col-12.margin { width: 100% !important; }

.col-12-clear {
	width: 100%;
	display: block;
	float: left;
	padding: 0 10px;
}

/* === VIDEO GRID ITEMS === */
.col-item {
	width: 20%;
	display: inline-block;
	vertical-align: top;
	float: none;
	padding: 6px;
}

.col-item i { color: var(--text-primary); }
.col-item.no-padding { padding: 0 !important; }
.col-item.channel { width: 16.666%; }

.col-item a .image {
	position: relative;
	width: 100%;
	display: block;
	float: left;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 278 / 170;
	background: var(--bg-secondary);
}

.col-item a .image img {
	transition: transform 0.3s ease, filter 0.3s ease;
}

.col-item a:hover .image img {
	transform: scale(1.05);
	filter: brightness(1.15);
}

.col-item a .image .rating, .col-item a .image .views, .col-item a .image .time {
	position: absolute;
	background: rgba(0, 0, 0, 0.75);
	font-size: 12px;
	color: #fff;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 600;
}

.col-item a .image .rating {
	top: 6px;
	right: 6px;
}

.col-item a .image .views {
	top: 30px;
	right: 6px;
	display: block;
	font-size: 11px;
}

.col-item a .image .time {
	bottom: 6px;
	right: 6px;
}

.col-item a .image .rating i, .col-item a .image .views i, .col-item a .image .time i {
	font-size: 14px;
	margin-right: 2px;
}

.col-item a .title, .col-item .edit {
	background: var(--bg-card);
	width: 100%;
	display: block;
	float: left;
	font-size: 13px;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-primary);
	padding: 8px 10px;
	overflow: hidden;
	border-radius: 0 0 6px 6px;
	transition: background 0.25s ease;
}

.col-item a:hover .title, .col-item .edit:hover {
	color: var(--accent);
	background: var(--bg-card-hover);
}

.col-item a .title.channel {
	text-align: center;
	font-weight: 600;
}

.col-item .edit {
	padding-top: 2px;
	padding-bottom: 2px;
}

.col-item .edit, .col-item .edit a {
	float: left;
	font-size: 12px;
	margin-top: -2px;
	margin-bottom: 2px;
}

/* === LAYOUT HELPERS === */
.col-left { float: left; }
.col-right { float: right; }
.col-center { display: table !important; float: none !important; margin: 0 auto !important; }
.col-margin { float: left; margin: 10px; }

.clear, .clear.responsive { clear: both; }

.spacer {
	width: 100%;
	display: block;
	float: left;
	margin-top: 20px;
}

.spacer.half { margin-top: 10px; }

.border {
	background: var(--border-color);
	width: 100%;
	height: 1px;
	display: block;
	float: left;
	margin: 20px 0;
}

/* === NOTIFICATIONS === */
.notification {
	width: 100%;
	display: block;
	float: left;
	color: #000;
	font-size: 14px;
	padding: 10px 14px;
	margin: 10px 0;
	border-radius: 4px;
}

.notification a, .notification * a { color: #000 !important; font-size: 14px !important; }
.notification * { color: #000 !important; }
.notification.success { background: #d1fae5; }
.notification.info { background: #dbeafe; }
.notification.alert { background: #fef3c7; }
.notification.error { background: #fee2e2; }

/* === HEADER === */
#header {
	background: var(--bg-secondary);
	width: 100%;
	display: block;
	float: left;
	margin-bottom: 0;
	border-bottom: 2px solid var(--accent);
}

#header .wrapper {
	padding: 0 16px;
}

#header a#logo {
	font-family: 'Inter', 'Open Sans', -apple-system, sans-serif;
	position: relative;
	font-size: 32px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -1px;
	color: var(--accent);
	float: left;
	margin: 20px 0;
}

#header a#logo i {
	position: absolute;
	top: 60%;
	right: -34px;
	font-size: 32px;
	line-height: 1;
	color: var(--accent);
	transform: translateY(-50%) rotate(10deg);
}

#header form {
	float: left;
	margin: 22px 0 22px 60px;
}

#header form input {
	width: 240px;
	display: block;
	float: left;
	padding: 8px 14px;
	border-right: 0;
	border-radius: 4px 0 0 4px;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	border-right: 0;
}

#header form button {
	background: var(--accent);
	text-align: center;
	padding: 8px 16px;
	border: 1px solid var(--accent);
	border-left: 0;
	border-radius: 0 4px 4px 0;
}

#header form button i {
	font-size: 18px;
	color: #000;
}

#header ul.toolbar {
	float: right;
	margin: 10px 10px 16px 0;
}

#header ul.toolbar.top {
	margin-bottom: 0;
}

#header ul.toolbar li, #header ul.toolbar li a {
	float: left;
}

#header ul.toolbar li a i {
	color: var(--text-secondary);
}

#header ul.toolbar li.menu, #header ul#navigation li.menu {
	display: none;
}

#header ul.toolbar li a {
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 600;
	margin: 10px 0 0 12px;
	transition: color 0.25s ease;
}

#header ul.toolbar li a:hover {
	color: var(--accent);
}

#header ul.toolbar li:first-child a {
	margin-left: 0;
}

#header ul.toolbar li.login a {
	margin-left: 20px;
}

#header ul.toolbar li a.button {
	color: #000;
	margin-top: 3px;
	margin-left: 4px;
}

/* === NAVIGATION BAR === */
#header .container {
	background: var(--bg-primary);
	width: 100%;
	display: block;
	float: left;
	border-top: 1px solid var(--border-color);
}

#header .container .wrapper {
	padding-top: 0;
}

#header ul#navigation {
	width: 100%;
	max-width: 1480px;
	display: block;
	padding: 0 10px;
	margin: 0 auto;
}

#header ul#navigation li, #header ul#navigation li a {
	float: left;
}

#header ul#navigation li a {
	font-size: 15px;
	color: var(--text-secondary);
	font-weight: 600;
	padding: 10px 24px;
	transition: all 0.25s ease;
}

#header ul#navigation li.current a,
#header ul#navigation li a:hover {
	background: var(--accent);
	color: #000;
}

#header ul#navigation li a i {
	color: inherit;
	margin-right: 6px;
}

#header ul#navigation li:first-child a i {
	margin-right: 0;
}

/* === SIDEBAR === */
#sidebar {
	display: block;
	float: left;
	padding: 0 10px;
	overflow: auto;
}

#sidebar h2, #sidebar a.menu {
	color: var(--text-primary);
	padding: 8px 15px;
	font-size: 16px;
}

#sidebar a.menu {
	width: 100%;
	display: none;
	float: left;
	font-size: 16px;
	text-align: center;
}

#sidebar a.menu i { color: var(--text-primary); }

#sidebar ul {
	width: 100%;
	display: block;
	float: left;
}

#sidebar ul li a {
	background: var(--bg-card);
	width: 100%;
	display: block;
	float: left;
	padding: 8px 15px;
	margin-bottom: 2px;
	border-radius: 4px;
	transition: all 0.25s ease;
}

#sidebar ul li:last-child a { margin-bottom: 0; }

#sidebar ul li a:hover {
	background: var(--bg-card-hover);
	color: var(--accent);
}

#sidebar ul li.active a, #sidebar ul li a.active {
	background: var(--bg-card-hover);
	border-left: 3px solid var(--accent);
}

#sidebar ul li a .sub-label {
	font-size: 14px;
	color: var(--text-primary);
}

#sidebar ul li a .counter {
	float: right;
	font-size: 13px;
	color: var(--text-muted);
}

/* === MAIN CONTENT === */
#main {
	display: block;
	float: left;
	padding-right: 10px;
}

#main h1 {
	float: left;
	padding: 0 10px;
	color: var(--text-primary);
}

#main ul.toolbar {
	float: right;
	padding: 0 10px;
}

#main ul.toolbar li, #main ul.toolbar li a {
	float: left;
}

#main ul.toolbar li a {
	background: var(--bg-card);
	font-size: 13px;
	color: var(--text-secondary);
	padding: 5px 14px;
	margin-bottom: 4px;
	margin-left: 4px;
	border-radius: 4px;
	font-weight: 600;
	transition: all 0.25s ease;
}

#main ul.toolbar li a:hover, #main ul.toolbar li.active a {
	background: var(--accent);
	color: #000;
}

/* === VIDEO PLAYER === */
#player {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	display: block;
	float: left;
	margin-bottom: 12px;
	border-radius: 6px;
	overflow: hidden;
}

#player #thisPlayer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
	overflow: hidden;
}

.vjs-default-skin * { color: #fff !important; }

.col-12-clear h1 {
	width: auto !important;
	padding: 0 !important;
}

/* === RATING === */
ul#rating_options {
	float: right;
}

ul#rating_options li, ul#rating_options li a {
	float: left;
	font-size: 18px;
}

ul#rating_options li {
	margin-left: 8px;
}

ul#rating_options li a .icon {
	font: normal normal normal 14px/1 FontAwesome;
	display: inline-block;
	font-size: 24px;
	-webkit-font-smoothing: antialiased;
}

ul#rating_options li a .icon.i-thumbs-up:before {
	content: '\f164';
	color: var(--success);
}

ul#rating_options li a .icon.i-thumbs-down:before {
	content: '\f165';
	color: var(--danger);
}

/* === TABS === */
[data-mb=tab-content].active {
	width: 100%;
	display: block;
	float: left;
}

[data-expand=comments],[data-mb=tab-content] {
	width: 100%;
	display: none;
	float: left;
}

ul.tabs-list {
	width: 100%;
	display: block;
	float: left;
	margin: 12px 0;
}

ul.tabs-list li, ul.tabs-list--mailbox li {
	width: 25%;
	display: block;
	float: left;
	text-align: center;
}

ul.tabs-list--mailbox li * { color: var(--text-primary); }

.user-profile ul.tabs-list li, ul.tabs-list--mailbox li {
	width: 100%;
}

ul.tabs-list.logged-in li {
	width: 20%;
}

ul.tabs-list li a, ul.tabs-list--mailbox li a {
	width: 100%;
	display: block;
	float: left;
	text-align: center;
}

ul.tabs-list li a, ul.tabs-list--mailbox li a {
	background: var(--bg-card);
	font-size: 14px;
	color: var(--text-secondary);
	padding: 10px 0;
	font-weight: 600;
	transition: all 0.25s ease;
}

.user-profile ul.tabs-list li a, ul.tabs-list--mailbox li a {
	background: var(--bg-card);
	text-align: left;
	padding: 8px 15px;
	border-bottom: 1px solid var(--border-color);
}

.user-profile ul.tabs-list li:last-child a, ul.tabs-list--mailbox li:last-child a { border: 0; }

ul.tabs-list li a:hover, ul.tabs-list--mailbox li a:hover {
	background: var(--bg-card-hover);
	color: var(--accent);
}

ul.tabs-list li.active a {
	background: var(--accent);
	color: #000;
}

/* === AVATAR & STATS === */
h3.add { margin-bottom: 6px; }

.avatar {
	width: 10%;
	display: block;
	float: left;
	text-align: center;
}

.user-profile .avatar {
	width: 100%;
	margin-top: 4px;
}

.avatar * { font-size: 12px; }

.avatar a {
	width: 100%;
	display: block;
	float: left;
	text-align: center;
}

.avatar img {
	width: 100%;
	height: auto;
	display: block;
	float: left;
	border-radius: 50%;
}

.avatar .user {
	font-weight: 700;
	text-align: center;
	color: var(--accent);
}

.contents {
	width: 90%;
	display: block;
	float: left;
	padding: 0 0 0 12px;
}

ul.stats-list {
	width: 100%;
	display: block;
	float: left;
	margin-bottom: 8px;
}

ul.stats-list li {
	float: left;
	padding-right: 12px;
	margin-right: 12px;
	border-right: 1px solid var(--border-color);
	color: var(--text-secondary);
}

ul.stats-list li:last-child {
	padding: 0;
	margin: 0;
	border: 0;
}

ul.stats-list li i {
	margin-right: 4px;
	color: var(--accent);
}

ul.stats-list li a {
	color: var(--accent);
}

.contents .description {
	width: 100%;
	display: block;
	float: left;
	color: var(--text-secondary);
	line-height: 1.7;
}

.contents p {
	width: 100%;
	display: block;
	float: left;
}

/* === SHARE TAB === */
.tab-wrapper textarea {
	height: 80px;
	min-height: 80px;
	max-height: 80px;
	resize: none;
}

ul.share-list {
	width: 100%;
	display: block;
	float: left;
}

ul.share-list li, ul.share-list li a { float: left; }

ul.share-list li a i {
	color: var(--text-primary);
	font-size: 40px;
	margin: 10px 8px 0 0;
	transition: color 0.25s ease;
}

ul.share-list li a:hover i {
	color: var(--accent);
}

/* === COMMENTS === */
ul.ul-comments, ul.ul-comments li {
	width: 100%;
	display: block;
	float: left;
}

ul.ul-comments.more-comments { display: none; }

ul.ul-comments li {
	margin-top: 6px;
	margin-bottom: 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border-color);
}

ul.ul-comments li .contents { padding: 0 0 0 10px; }

ul.ul-comments li .contents .comment {
	width: 100%;
	display: block;
	float: left;
	margin-top: 6px;
	color: var(--text-secondary);
}

form.sendCommentsBox input, form.sendCommentsBox textarea, form.sendCommentsBox img, .col-upload form input, .col-upload form img, form.user-profile-private-message input, form.user-profile-private-message textarea, .col-contact input, .col-contact textarea, .col-contact img {
	margin-bottom: 8px;
}

form.user-profile-private-message textarea {
	height: 200px !important;
	min-height: 200px !important;
	max-height: 400px !important;
	resize: vertical !important;
}

.user-profile-clear-padding h2, .user-profile-clear-padding ul.profile-list, .user-profile-clear-padding h3, .user-profile-clear-padding form.user-profile-private-message {
	padding: 0 0 0 10px;
}

.user-profile-clear-padding a.button, .user-profile-clear-padding .table-responsive {
	margin-left: 10px !important;
}

.user-profile-clear-padding .table-responsive { margin-top: 4px; }

.user-profile-clear-padding table a.button {
	margin-top: 10px !important;
	margin-right: 2px !important;
	margin-left: 0 !important;
}

/* === IMAGE DISPLAY === */
.img-current {
	width: 100%;
	display: block;
	float: left;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	margin-top: 6px;
}

.gallery-controls { display: table; margin: 10px auto 0 auto; }
.gallery-controls a.button { margin: 0 1px; }

.col-upload, .col-edit-profile, .col-contact {
	width: 60%;
	display: table;
	padding: 0 0 0 10px;
	margin: 0 auto;
}

.col-upload form label {
	width: 100%;
	display: block;
	float: left;
	margin-bottom: 4px;
}

.upload-status, .fine-uploader {
	width: 100%;
	display: block;
	float: left;
}

.checkboxes {
	width: 100%;
	display: block;
	float: left;
	margin-top: 3px;
}

.checkboxes .checkbox-inline {
	width: 100%;
	display: block;
	float: left;
	margin: 3px 0;
}

.group-checkboxes {
	width: 25%;
	display: block;
	float: left;
}

.checkboxes input {
	width: auto !important;
	min-height: auto !important;
	float: left !important;
	margin-right: 4px;
}

input.hidden-field { display: none; }

.checkboxes .sub-label {
	float: left;
	margin-left: 6px;
}

/* === USER PROFILE === */
ul.user-profile-actions {
	width: 100%;
	display: block;
	float: left;
}

ul.user-profile-actions li {
	width: 20%;
	display: block;
	float: left;
	padding: 0 0 0 10px;
}

ul.user-profile-actions li a {
	background: var(--bg-card);
	width: 100%;
	display: block;
	float: left;
	font-size: 16px;
	text-align: center;
	font-weight: 700;
	color: var(--text-primary);
	padding: 20px;
	border-radius: 6px;
	transition: all 0.25s ease;
}

ul.user-profile-actions li a:hover {
	background: var(--accent);
	color: #000;
}

ul.user-profile-actions li a i {
	width: 100%;
	display: block;
	float: left;
	font-size: 32px;
	text-align: center;
	color: var(--accent);
	margin-bottom: 10px;
}

ul.user-profile-actions li a:hover i {
	color: #000;
}

.bootstrap-select .dropdown-toggle, .bootstrap-select .dropdown-menu {
	display: none !important;
}

/* === MAILBOX === */
.mailbox-nav-col {
   	width: 16.16% !important;
	float: left;
	padding-left: 10px;
}

.mailbox-content-col {
	width: 83.23% !important;
	float: left;
	padding-left: 10px;
	margin: 0 0 0 0.6% !important;
}

#mailbox .pagination-col {
	width: 100%;
	display: block;
	float: left;
	margin: 10px 0;
}

#mailbox .pagination-inner-col {
	display: table;
	float: none;
	margin: 0 auto;
}

/* === PAGINATION === */
.pagination {
	width: 100%;
	display: block;
	float: left;
	padding: 0 10px 10px 10px;
}

.pagination .border {
	margin: 10px 0 20px 0;
}

.pagination .pages {
	display: table;
	margin: 0 auto;
}

.pagination a, .pagination span {
	float: left;
	font-size: 14px;
	padding: 6px 12px;
	margin: 0 2px;
	border-radius: 4px;
	font-weight: 600;
}

.pagination.tags a {
	padding: 6px 12px;
	margin-bottom: 4px;
}

.pagination a {
	background: var(--bg-card);
	color: var(--text-secondary);
}

.pagination span, .pagination a:hover, .pagination.tags a.active {
	background: var(--accent);
	color: #000;
}

.pagination.tags a.active, .pagination.tags a.active:hover {
	background: var(--accent) !important;
}

.pagination a.prev, .pagination a.next {
	background: var(--bg-card);
}

.pagination a.prev:hover, .pagination a.next:hover {
	background: var(--accent);
	color: #000;
}

/* === FOOTER === */
#footer {
	width: 100%;
	display: block;
	float: left;
	margin-top: 30px;
}

#footer .toolbar {
	background: var(--bg-secondary);
	width: 100%;
	display: block;
	float: left;
	padding: 20px 0 10px 0;
	border-top: 2px solid var(--accent);
}

#footer .toolbar ul {
	display: table;
	margin: 0 auto;
}

#footer .toolbar ul li, #footer .toolbar ul li a { float: left; }

#footer .toolbar ul li a {
	font-size: 14px;
	color: var(--text-secondary);
	margin: 0 12px;
	transition: color 0.25s ease;
}

#footer .toolbar ul li a:hover {
	color: var(--accent);
}

#footer #copyright {
	background: var(--bg-primary);
	width: 100%;
	display: block;
	float: left;
	padding: 16px 0;
}

#footer #copyright .wrapper, #footer #copyright .wrapper a {
	font-size: 13px;
	text-align: center;
	color: var(--text-muted);
}

/* === SEO FOOTER SECTIONS === */
.seo-footer {
	background: var(--bg-secondary);
	width: 100%;
	display: block;
	float: left;
	padding: 30px 0;
	border-top: 1px solid var(--border-color);
}

.seo-footer .wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.seo-footer-section {
	flex: 1;
	min-width: 200px;
}

.seo-footer-section h3 {
	color: var(--accent);
	font-size: 16px;
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.seo-footer-section ul {
	list-style: none;
}

.seo-footer-section ul li {
	margin-bottom: 6px;
}

.seo-footer-section ul li a {
	color: var(--text-secondary);
	font-size: 13px;
	transition: color 0.25s ease;
}

.seo-footer-section ul li a:hover {
	color: var(--accent);
}

.seo-footer-text {
	width: 100%;
	padding: 20px 0 0 0;
	color: var(--text-muted);
	font-size: 13px;
	line-height: 1.7;
}

/* === BREADCRUMBS === */
.breadcrumbs {
	width: 100%;
	display: block;
	float: left;
	padding: 8px 0;
	margin-bottom: 5px;
	font-size: 13px;
	color: var(--text-muted);
}

.breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.breadcrumbs li + li::before {
	content: '\f105';
	font-family: FontAwesome;
	margin: 0 8px;
	color: #555;
}

.breadcrumbs a {
	color: #4fc3f7;
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs li.active span {
	color: #ccc;
}

.breadcrumbs span {
	margin: 0 6px;
	color: var(--text-muted);
}

/* === RELATED VIDEOS SECTION === */
.related-videos {
	width: 100%;
	display: block;
	float: left;
	margin-top: 20px;
}

.related-videos h3 {
	padding: 0 10px;
	margin-bottom: 10px;
	color: var(--text-primary);
}

/* === POPULAR CATEGORIES HOMEPAGE === */
.popular-categories {
	width: 100%;
	display: block;
	float: left;
	padding: 20px 10px;
}

.popular-categories h2 {
	margin-bottom: 15px;
}

/* === STATIC/SEO PAGES === */
.col-12-clear h1 {
	margin-bottom: 12px;
}

.col-12-clear p, .col-12-clear div {
	line-height: 1.8;
	color: var(--text-secondary);
}

.col-12-clear h2 {
	margin: 20px 0 10px 0;
	font-size: 18px;
}

.col-12-clear h3 {
	margin: 16px 0 8px 0;
	font-size: 16px;
}

.col-12-clear a {
	color: var(--accent);
}

.col-12-clear a:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* === MODAL === */
.modal, .modal-open { overflow: hidden; }
.modal, .modal-backdrop { top: 0; right: 0; bottom: 0; left: 0; }

.modal {
	position: fixed;
	display: none;
	z-index: 1050;
	-webkit-overflow-scrolling: touch;
	outline: 0;
}

.modal * { color: #000; }
.modal .btn-default, .modal button, .modal button * { color: #fff !important; }
.modal button { border-radius: 4px; }

.modal.fade .modal-dialog {
	transform: translate(0,-25%);
	transition: transform .3s ease-out;
}

.modal.in .modal-dialog { transform: translate(0,0); }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-dialog {
	position: relative;
	width: auto;
	margin: 20px auto;
}

.modal-content {
	width: 100%;
	display: block;
	float: left;
	position: relative;
	background: #fff;
	outline: 0;
	border-radius: 8px;
}

.modal-backdrop {
	position: fixed;
	z-index: 1040;
	background: #000;
}

.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .5; }

.modal-header {
	width: 100%;
	display: block;
	float: left;
	padding: 20px 20px 10px 20px;
}

.modal-header .close {
	position: absolute;
	top: 0;
	right: 0;
}

.modal-title { margin: 0; }

.modal-body {
	position: relative;
	width: 100%;
	display: block;
	float: left;
	padding: 0 20px;
}

.modal-footer {
	width: 100%;
	display: block;
	float: left;
	padding: 10px 20px 20px 20px;
}

.modal-footer:after, .modal-footer:before { content: ' '; display: table; }

@media (min-width:768px) { .modal-dialog { width: 80%; } }
@media (min-width:1040px) { .modal-dialog { width: 700px; } }

/* === FORM VALIDATION === */
.formError .formErrorContent { z-index:0; }
.ui-dialog .formError .formErrorContent { z-index:5001; }
.formError .formErrorContent {
	width:100%;
	background:#ee0101;
	position:relative;
	color:#fff;
	min-width:7.5rem;
	font-size:.6875rem;
	border:.125rem solid #ddd;
	box-shadow:0 0 .375rem #000;
	padding:.25rem .625rem;
	border-radius:.375rem;
}
.formError.inline .formErrorContent { box-shadow:none; border:none; border-radius:0; }
.greenPopup .formErrorContent { background:#33be40; }
.blackPopup .formErrorContent { background:#393939; color:#FFF; }

/* === FILE UPLOAD === */
.qq-uploader { position:relative; width:100%; }
.qq-upload-button {
	background: var(--accent);
	width: 100%;
	display: block;
	float: left;
	color: #000;
	font-weight: 700;
	padding: 6px 16px;
	border-radius: 4px;
}
.qq-upload-button * { color:#000; }
.qq-upload-button-hover { background: var(--accent-hover); }
.qq-upload-drop-area, .qq-upload-extra-drop-area {
	position:absolute; top:0; left:0; width:100%; height:100%; min-height:1.875rem; z-index:2; background:#FF9797; text-align:center;
}
.qq-upload-drop-area span { display:block; position:absolute; top:50%; width:100%; margin-top:-.5rem; font-size:1rem; }
.qq-upload-extra-drop-area { position:relative; margin-top:3.125rem; font-size:1rem; padding-top:1.875rem; height:1.25rem; min-height:2.5rem; }
.qq-upload-drop-area-active { background:#FF7171; }
.qq-upload-list { width: 100%; display: block; float: left; margin:0; padding:0; list-style:none; }
.qq-upload-list li { margin:0; padding:.5625rem; line-height:.9375rem; font-size:1rem; background-color:#FFF0BD; }
.qq-upload-cancel, .qq-upload-failed-text, .qq-upload-file, .qq-upload-finished, .qq-upload-retry, .qq-upload-size, .qq-upload-spinner { margin-right:.75rem; }
.qq-upload-file { color:#000; font-size:.875rem; }
.qq-upload-spinner { display:inline-block; background:url("/templates/scatville/css/loading.gif"); width:.9375rem; height:.9375rem; vertical-align:text-bottom; }
.qq-drop-processing { display:none; }
.qq-drop-processing-spinner { display:inline-block; background:url("/templates/scatville/css/processing.gif"); width:1.5rem; height:1.5rem; vertical-align:text-bottom; }
.qq-upload-finished { display:none; width:.9375rem; height:.9375rem; vertical-align:text-bottom; }
.qq-upload-retry { display:none; }
.qq-upload-retryable .qq-upload-retry { display:inline; }
.qq-upload-cancel, .qq-upload-retry, .qq-upload-size { font-size:.75rem; font-weight:400; color:#900; }
.qq-upload-failed-text { display:none; font-style:italic; font-weight:700; }
.qq-upload-failed-icon { display:none; width:.9375rem; height:.9375rem; vertical-align:text-bottom; }
.qq-upload-fail .qq-upload-failed-text { display:inline; }
.qq-upload-retrying .qq-upload-failed-text { display:inline; color:#D60000; }
.qq-upload-list li.qq-upload-success { background-color:#5DA30C; color:#FFF; }
.qq-upload-list li.qq-upload-fail { background-color:#D60000; color:#FFF; }
.qq-progress-bar {
	background:linear-gradient(to bottom,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);
	width:0; height:.9375rem; border-radius:.375rem; margin-bottom:.1875rem; display:none;
}

/* === TABLES === */
table { width:100%; border-collapse:collapse; border-spacing:0; }
td, th { padding:0; }
.table { width:100%; }
thead * { font-weight: 700; }
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th { padding:.5rem; line-height:1.429; vertical-align:top; border-top:1px solid var(--border-color); }
.table>thead>tr>th { vertical-align:bottom; border-bottom:2px solid var(--border-color); }
.table>caption+thead>tr:first-child>td,.table>caption+thead>tr:first-child>th,.table>colgroup+thead>tr:first-child>td,.table>colgroup+thead>tr:first-child>th,.table>thead:first-child>tr:first-child>td,.table>thead:first-child>tr:first-child>th { border-top:0; }
.table>tbody+tbody { border-top:2px solid var(--border-color); }
.table .table { background-color:var(--bg-primary); }
.table-responsive { overflow-x:auto; min-height:.01%; }

/* === RESPONSIVE === */
@media only screen and (min-width: 1025px) {
	#header ul.toolbar.top li, #header ul#navigation li, #sidebar #show-categories, #show-categories.opened h2 {
		display: block !important;
	}
	#header ul.toolbar li.menu, #header ul#navigation li.menu, #sidebar a.menu {
		display: none !important;
	}
}

@media only screen and (max-width: 1280px) {
	.col-center .col-margin, #header .col-left, #header .col-right, #header ul.toolbar {
		display: table;
		float: none;
		margin: 10px auto;
	}
	#header a#logo, #header form { margin-top: 0; margin-bottom: 0; }
	#header ul.toolbar.top { margin: 0; }
	#main ul.toolbar {
		width: 100%;
		display: block;
		float: left;
		margin-top: 2px;
	}
	#main ul.toolbar li a {
		padding: 4px 8px;
		margin-left: 0;
		margin-right: 4px;
	}
	.col-item { width: 25%; }
	.col-edit-profile .avatar { width: 120px; }
}

@media only screen and (max-width: 1024px) {
	#sidebar ul li a .counter {
		width: 100%;
		display: block;
		float: left;
	}
	.col-item { width: 25%; }
}

@media only screen and (max-width: 860px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
	.col-1.margin, .col-2.margin, .col-3.margin, .col-4.margin, .col-5.margin, .col-6.margin, .col-7.margin, .col-8.margin, .col-9.margin, .col-10.margin, .col-11.margin, .col-12.margin {
		width: 100% !important;
		margin-left: 0 !important;
	}
	.col-item { width: 33.333% !important; }
	.col-2 .avatar { width: auto !important; display: table !important; float: none !important; margin: 0 auto !important; }
	.mailbox-nav-col { width: 100% !important; padding: 0 10px !important; margin-bottom: 10px !important; }
	#header { margin-bottom: 0; }
	#header .col-left, #header .col-right, #header ul.toolbar { margin-top: 0; margin-bottom: 0; }
	#header a#logo { position: relative; display: table; float: none; margin: 10px auto; }
	#header .col-left, #header .col-right { width: 100%; }
	#header form { display: table; float: none; margin: 0 auto; }
	#header ul.toolbar { width: 100%; margin-top: 10px; margin-bottom: 10px; }
	#header ul.toolbar.top { margin-bottom: 0; }
	#header ul.toolbar li a { margin-left: 0; }
	#header ul.toolbar li { width: 50%; }
	#header ul.toolbar li:first-child { width: 49%; margin-right: 1%; }
	#header ul.toolbar li a { width: 100%; float: left; text-align: center; }
	#header ul.toolbar li.full { width: 100%; margin-right: 0; }
	#header ul.toolbar.top { margin-top: 4px; }
	#header ul.toolbar.top, #header ul.toolbar.top li, #header ul.toolbar.top li a { width: 100%; margin-right: 0; }
	#header ul#navigation, #header ul#navigation li, #header ul#navigation li a { width: 100%; }
	#header ul#navigation li a { text-align: center; }
	#header ul.toolbar.top li, #header ul#navigation li { display: none; }
	#header ul.toolbar li.menu, #header ul#navigation li.menu { display: block; }
	#header ul.toolbar.top.opened li, #header ul#navigation.opened li { display: block !important; }
	#sidebar { margin-bottom: 10px !important; }
	#sidebar a.menu, #sidebar #show-categories.opened { display: block; }
	#sidebar #show-categories, #sidebar #show-categories.opened h2 { display: none; }
	#sidebar ul li a .counter { width: auto; display: inline-block; float: right; }
	.user-profile-clear-padding h2, .user-profile-clear-padding ul.profile-list, .user-profile-clear-padding h3, .user-profile-clear-padding form.user-profile-private-message { padding-left: 0; }
	.user-profile-clear-padding a.button, .user-profile-clear-padding .table-responsive { margin-left: 0 !important; }
	ul.user-profile-actions li { padding: 0 10px 0 0; }
	ul.user-profile-actions li:last-child { padding-right: 0; }
	.col-upload, .col-edit-profile, .col-contact { width: 100%; display: block; float: left; padding: 0 10px; margin: 0; }
	.seo-footer .wrapper { flex-direction: column; }
}

@media only screen and (max-width: 640px) {
	.col-item { width: 50% !important; }
	#header a#logo { font-size: 26px; }
	#footer .toolbar ul li, #footer .toolbar ul li a { width: 100%; text-align: center; margin: 0; }
	ul.user-profile-actions li { width: 50%; padding: 0 2px; margin-bottom: 4px; }
	ul.user-profile-actions li a { padding: 6px; }
	ul.user-profile-actions li:nth-of-type(odd) { padding-left: 0; }
	ul.user-profile-actions li:nth-of-type(even) { padding-right: 0; }
	ul.user-profile-actions li:last-child { width: 100%; padding: 0; margin-bottom: 0; }
	ul.tabs-list li a, ul.tabs-list--mailbox li a { font-size: 12px; }
	.group-checkboxes { width: 50%; }
}

@media only screen and (max-width: 480px) {
	.col-item:nth-of-type(2n) { clear: none; }
	#header a#logo { font-size: 22px; }
	#header .toolbar a.button { font-size: 13px; }
	ul.user-profile-actions li { width: 100%; padding: 0; }
	ul.user-profile-actions li:last-child { margin-bottom: 0; }
	.group-checkboxes { width: 100%; }
}

@media screen and (max-width:767px) {
	.table-responsive { width:100%; margin-bottom:1rem; overflow-y:hidden; border:1px solid var(--border-color); }
	.table-responsive>.table { margin-bottom:0; }
	.table-responsive>.table>tbody>tr>td,.table-responsive>.table>tbody>tr>th,.table-responsive>.table>tfoot>tr>td,.table-responsive>.table>tfoot>tr>th,.table-responsive>.table>thead>tr>td,.table-responsive>.table>thead>tr>th { white-space:nowrap; }
}

/* ========================================
   BLOG STYLES
   ======================================== */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin: 20px 0;
}
.blog-card {
	background: var(--bg-card);
	border-radius: 8px;
	padding: 24px;
	border: 1px solid var(--border-color);
	transition: all 0.25s ease;
}
.blog-card:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.blog-card h2 {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.4;
}
.blog-card h2 a {
	color: var(--text-primary);
	font-weight: 600;
	text-decoration: none;
}
.blog-card h2 a:hover {
	color: var(--accent);
}
.blog-card .blog-meta {
	color: var(--text-muted);
	font-size: 12px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.blog-card .blog-meta i {
	color: var(--text-muted);
	margin-right: 4px;
	font-size: 11px;
}
.blog-card .blog-excerpt {
	color: var(--text-secondary);
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 12px;
}
.blog-card .blog-read-more {
	color: var(--accent);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.blog-card .blog-read-more:hover {
	color: var(--accent-hover);
}
.blog-article {
	max-width: 800px;
	margin: 0 auto;
}
.blog-article .blog-back-meta {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	color: var(--text-muted);
}
.blog-article .blog-back-meta a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: none;
}
.blog-article .blog-back-meta i {
	color: var(--text-muted);
	margin-right: 4px;
}
.blog-content {
	color: var(--text-secondary);
	font-size: 15px;
	line-height: 1.8;
}
.blog-content h2, .blog-content h3 {
	color: var(--text-primary);
	margin: 24px 0 12px;
}
.blog-content p {
	margin-bottom: 16px;
	color: var(--text-secondary);
}
.blog-content a {
	color: var(--accent);
	font-weight: 500;
}
.blog-content ul, .blog-content ol {
	margin: 12px 0;
	padding-left: 24px;
}
.blog-content li {
	margin-bottom: 6px;
	color: var(--text-secondary);
}
.blog-tags {
	margin: 28px 0;
	padding-top: 16px;
	border-top: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.blog-tags strong {
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 4px;
}
.blog-tags a {
	display: inline-block;
	padding: 4px 12px;
	background: var(--bg-secondary);
	color: var(--text-secondary);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	border: 1px solid var(--border-color);
	transition: all 0.15s ease;
	text-decoration: none;
}
.blog-tags a:hover {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
.blog-related {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
}
.blog-related h3 {
	margin-bottom: 16px;
	color: var(--text-primary);
}
.blog-related .col-3 {
	margin-bottom: 16px;
}
.blog-related img {
	border-radius: 6px;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.blog-related a:hover img {
	transform: scale(1.05);
}
.blog-related p {
	font-size: 13px;
	font-weight: 500;
	color: var(--text-primary);
	margin-top: 6px;
	line-height: 1.4;
}
.blog-pagination {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	margin: 32px 0;
}
.blog-pagination a,
.blog-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	background: var(--bg-card);
	color: var(--text-secondary);
	border: 1px solid var(--border-color);
	text-decoration: none;
	transition: all 0.15s ease;
}
.blog-pagination a:hover {
	background: var(--bg-card-hover);
	color: var(--text-primary);
}
.blog-pagination .blog-page-active {
	background: var(--accent);
	color: #fff;
	border-color: var(--accent);
}
@media screen and (max-width: 767px) {
	.blog-grid { grid-template-columns: 1fr; }
}