/* ═══════════════════════════════════════════════════════════
   GLACIER — Premium SMM Panel Theme
   Version 2.0 · Built for Bootstrap 3 · 2026
   ═══════════════════════════════════════════════════════════ */

/* ─── 1. Design Tokens ─── */

:root {
	/* Palette */
	--bg: #f0f4fa;
	--bg-deep: #e4ecf7;
	--surface: rgba(255, 255, 255, 0.82);
	--surface-strong: #ffffff;
	--surface-muted: #f5f8fc;
	--surface-elevated: rgba(255, 255, 255, 0.96);
	--glass: rgba(255, 255, 255, 0.62);

	/* Lines */
	--line: rgba(200, 215, 235, 0.72);
	--line-strong: rgba(185, 202, 225, 0.88);

	/* Text */
	--text: #0e1726;
	--text-secondary: #384860;
	--muted: #5e6f84;

	/* Brand */
	--primary: #0d7377;
	--primary-dark: #095c5f;
	--primary-soft: #d6f5f0;
	--accent: #3b6cf0;
	--accent-dark: #2b54c7;
	--accent-soft: #e6eeff;

	/* Status */
	--success: #0e7a4f;
	--success-soft: #dff7ec;
	--warning: #b87a1a;
	--warning-soft: #fdf5e3;
	--danger: #c03a3a;
	--danger-soft: #fdeaea;

	/* Radii */
	--r-xs: 8px;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 28px;
	--r-pill: 999px;

	/* Shadows */
	--sh-xs: 0 1px 3px rgba(14, 23, 38, 0.04);
	--sh-sm: 0 4px 12px rgba(14, 23, 38, 0.05);
	--sh-md: 0 8px 30px rgba(14, 23, 38, 0.07);
	--sh-lg: 0 16px 48px rgba(14, 23, 38, 0.09);
	--sh-xl: 0 24px 64px rgba(14, 23, 38, 0.11);
	--sh-glow-primary: 0 8px 32px rgba(13, 115, 119, 0.18);
	--sh-glow-accent: 0 8px 32px rgba(59, 108, 240, 0.18);
	--sh-inset: inset 0 0 0 1px var(--line);

	/* Motion */
	--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--t-fast: 0.15s;
	--t-base: 0.22s;
	--t-slow: 0.36s;
}


/* ─── 2. Reset & Foundation ─── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

::selection {
	background: rgba(13, 115, 119, 0.16);
	color: var(--text);
}

html {
	background: var(--bg);
	scroll-behavior: smooth;
}

body.panel-theme {
	position: relative;
	min-height: 100vh;
	margin: 0;
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	font-size: 14px;
	color: var(--text);
	line-height: 1.65;
	background:
		radial-gradient(ellipse at 10% 0%, rgba(13, 115, 119, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 90% 5%, rgba(59, 108, 240, 0.08) 0%, transparent 45%),
		linear-gradient(172deg, #f6f9ff 0%, var(--bg) 40%, var(--bg-deep) 100%);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


/* ─── 3. Ambient Layer ─── */

.site-backdrop {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.6;
	background:
		radial-gradient(circle 600px at 75% 20%, rgba(235, 195, 50, 0.06), transparent),
		radial-gradient(circle 500px at 15% 80%, rgba(13, 115, 119, 0.06), transparent);
}

.site-navbar,
.site-main,
.site-footer,
#notify-wrapper {
	position: relative;
	z-index: 1;
}


/* ─── 4. Typography ─── */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	color: var(--text);
	font-family: 'Sora', system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.2;
}

h1, h2, h3 { margin-bottom: 14px; }
h4, h5, h6 { margin-bottom: 10px; }

p,
.help-block,
.service-description,
.site-footer__text {
	color: var(--muted);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}

a:hover,
a:focus {
	color: var(--primary-dark);
	text-decoration: none;
}

form { margin-bottom: 0; }

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--primary);
}


/* ─── 5. Navbar ─── */

.site-navbar {
	margin: 16px 16px 0;
	min-height: 68px;
	border: 0;
	border-radius: var(--r-xl);
	background: var(--glass);
	box-shadow: var(--sh-md), var(--sh-inset);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	transition:
		background var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease);
}

.is-scrolled .site-navbar {
	background: var(--surface-elevated);
	box-shadow: var(--sh-lg);
}

.site-navbar__inner {
	padding-left: 22px;
	padding-right: 22px;
}

.site-navbar__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	height: auto;
	padding: 15px 0;
	color: var(--text) !important;
	font-family: 'Sora', sans-serif;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.site-navbar__logo {
	width: auto;
	max-height: 40px;
}

.site-navbar__brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	background: linear-gradient(140deg, var(--primary) 0%, var(--accent) 100%);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	box-shadow: var(--sh-glow-accent);
}

.site-navbar__brand-text {
	white-space: nowrap;
}

.site-navbar__toggle {
	margin-top: 14px;
	margin-right: 0;
	border: 0;
	border-radius: var(--r-sm);
	background: var(--surface-strong);
	box-shadow: var(--sh-inset);
	transition: background var(--t-fast) var(--ease);
}

.site-navbar__toggle:hover {
	background: var(--surface-muted);
}

.site-navbar__toggle .icon-bar {
	width: 18px;
	border-radius: var(--r-pill);
	background: var(--text);
}

.site-navbar__menu {
	border-top: 0;
	box-shadow: none;
}

.site-nav {
	margin-top: 8px;
	margin-bottom: 8px;
}

.site-nav > li {
	margin: 3px 4px 3px 0;
}

.site-nav > li > a {
	display: flex;
	align-items: center;
	gap: 9px;
	border-radius: var(--r-sm);
	padding: 10px 14px !important;
	color: var(--muted) !important;
	font-size: 13.5px;
	font-weight: 700;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.site-nav > li > a:hover,
.site-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background: var(--surface-muted);
	color: var(--text) !important;
}

.site-nav > li.active > a,
.site-nav > li.active > a:hover,
.site-nav > li.active > a:focus {
	background: var(--primary-soft);
	color: var(--primary-dark) !important;
	box-shadow: inset 0 0 0 1px rgba(13, 115, 119, 0.14);
}

.site-nav--secondary > li > a {
	background: rgba(255, 255, 255, 0.6);
	box-shadow: var(--sh-inset);
}

.site-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	font-size: 14px;
}

.site-nav__label {
	white-space: nowrap;
}

/* Guest navbar auth CTA buttons */
.site-nav__auth-group {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	padding: 8px 0;
}

.site-nav__btn {
	padding: 9px 18px;
	font-size: 13px;
	border-radius: var(--r-sm);
	white-space: nowrap;
}

.site-nav__btn--cta {
	box-shadow: var(--sh-glow-accent);
}

/* Balance badge */
.site-balance-trigger {
	gap: 10px;
}

.site-balance-badge {
	padding: 7px 13px;
	border-radius: var(--r-pill);
	background: linear-gradient(140deg, var(--primary), var(--accent));
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	box-shadow: var(--sh-glow-accent);
	letter-spacing: 0.01em;
}

/* Dropdown */
.dropdown-menu {
	margin-top: 10px;
	padding: 8px;
	border: 0;
	border-radius: var(--r-md);
	background: var(--surface-elevated);
	box-shadow: var(--sh-xl);
}

.dropdown-menu > li > a {
	border-radius: var(--r-xs);
	padding: 9px 14px;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 600;
	transition: background var(--t-fast) var(--ease);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background: var(--surface-muted);
	color: var(--primary-dark);
}

.dropdown-max-height {
	max-height: 320px;
	overflow-y: auto;
}


/* ─── 6. Page Hero ─── */

.page-hero {
	padding: 20px 0 18px;
}

.page-hero__inner {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	overflow: hidden;
	padding: 28px 32px;
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.65));
	box-shadow: var(--sh-md);
}

.page-hero__inner::after {
	content: "";
	position: absolute;
	top: -80px;
	right: -50px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(59, 108, 240, 0.12) 0%, transparent 70%);
	pointer-events: none;
}

.page-hero__content,
.page-hero__aside {
	position: relative;
	z-index: 1;
}

.page-hero__content {
	max-width: 720px;
}

.page-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--primary-soft);
	color: var(--primary-dark);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.page-hero__title {
	margin: 12px 0 8px;
	font-size: clamp(2rem, 3.8vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.page-hero__subtitle {
	max-width: 64ch;
	margin-bottom: 0;
	font-size: 15px;
	line-height: 1.7;
}

/* Hero stats aside */
.page-hero__aside {
	display: grid;
	gap: 12px;
	min-width: 220px;
}

.page-hero__stat {
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: var(--sh-sm);
}

.page-hero__stat-label {
	display: block;
	margin-bottom: 4px;
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.page-hero__stat strong {
	display: block;
	color: var(--text);
	font-size: 16px;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
}

/* Guest compact hero */
.panel-theme--guest .page-hero {
	padding: 10px 0 4px;
}

.panel-theme--guest .page-hero__inner {
	padding: 14px 22px;
	border-radius: var(--r-lg);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.55));
}

.panel-theme--guest .page-hero__title {
	margin: 0;
	font-size: clamp(1.15rem, 2vw, 1.55rem);
	line-height: 1.35;
}

.panel-theme--guest .page-hero__inner::after {
	width: 140px;
	height: 140px;
	top: -50px;
	right: -30px;
	opacity: 0.5;
}


/* ─── 7. Page Content ─── */

.page-content {
	padding-bottom: 36px;
}

.panel-theme--guest .page-content {
	padding-bottom: 28px;
}


/* ─── 8. Cards, Wells & Panels ─── */

.well,
.border-solid.border-rounded,
.modal-content {
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--sh-md);
}

.well,
.modal-content {
	padding: 26px;
}

.page-card,
.info-card {
	padding: 28px;
}

.page-card.data-card {
	padding: 0;
	overflow: hidden;
}

.page-card.data-card .nav-pills {
	margin: 18px 18px 0;
}

.page-card.data-card .table-responsive {
	margin-bottom: 0;
}

.page-card--sticky {
	position: sticky;
	top: 104px;
}

.info-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 253, 0.88));
}

.content-card,
.info-card,
.blog-card,
.api-card,
.ticket-thread {
	position: relative;
	overflow-wrap: break-word;
}

.border-solid.border-rounded {
	padding: 16px 18px;
	min-height: 80px;
	background: var(--surface-strong);
	color: var(--muted);
}

.data-card {
	overflow-x: auto;
	overflow-y: hidden;
}


/* ─── 9. Navigation Pills ─── */

.nav-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	padding: 5px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.68);
	box-shadow: var(--sh-sm);
}

.nav-pills > li {
	float: none;
	margin: 0;
}

.nav-pills > li + li {
	margin-left: 0;
}

.nav-pills > li > a {
	border-radius: var(--r-md);
	padding: 10px 16px;
	color: var(--muted);
	font-size: 13px;
	font-weight: 800;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease);
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
	background: var(--surface-muted);
	color: var(--text);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
	background: var(--primary-soft);
	color: var(--primary-dark);
	box-shadow: inset 0 0 0 1px rgba(13, 115, 119, 0.14);
}

.nav-pills .btn.dropdown-toggle {
	height: 48px;
	padding: 0 16px;
	border-radius: var(--r-md);
}

.nav-pills .dropdown,
.nav-pills .dropdown .btn {
	width: 100%;
}

.nav-pills .search {
	float: none !important;
	width: min(100%, 300px);
	margin-left: auto;
}

.nav-pills.pull-right {
	float: none !important;
	justify-content: flex-end;
}

.nav-pills .input-group {
	width: 100%;
}


/* ─── 10. Tables ─── */

.table-responsive {
	border: 0;
	margin-bottom: 0;
}

.table {
	margin-bottom: 0;
}

.well-float .table,
.data-card .table,
.table-responsive .table {
	min-width: 720px;
}

.table > thead > tr > th {
	padding: 14px 16px;
	border-bottom: 2px solid var(--line-strong);
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--surface-muted);
}

.table > tbody > tr > td {
	padding: 14px 16px;
	border-top: 1px solid rgba(200, 215, 235, 0.5);
	color: var(--text);
	font-size: 13.5px;
	vertical-align: middle;
}

.table > tbody > tr:nth-child(even) {
	background: rgba(245, 248, 252, 0.45);
}

.table > tbody > tr:hover {
	background: rgba(214, 245, 240, 0.28);
}

.table > tbody > tr > td[colspan="100%"] {
	background: rgba(214, 245, 240, 0.5);
	color: var(--primary-dark);
	font-weight: 600;
}

.table > tbody > tr > td:only-child {
	text-align: center;
	padding: 40px 16px;
	color: var(--muted);
	font-weight: 600;
}

.table-bordered {
	border-color: var(--line-strong);
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
	border-color: var(--line-strong);
}

.favorite-active,
[data-favorite-service-id] {
	color: var(--warning);
}


/* ─── 11. Buttons ─── */

.btn {
	border: 0;
	border-radius: var(--r-sm);
	padding: 11px 20px;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition:
		transform var(--t-fast) var(--ease),
		box-shadow var(--t-base) var(--ease),
		background var(--t-fast) var(--ease),
		opacity var(--t-fast) var(--ease);
}

.btn:hover,
.btn:focus {
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0) scale(0.98);
}

.btn-primary {
	background: linear-gradient(140deg, var(--primary) 0%, var(--accent) 100%);
	color: #fff;
	box-shadow: var(--sh-glow-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.active:hover,
.btn-primary.active:focus {
	background: linear-gradient(140deg, var(--primary-dark) 0%, var(--accent-dark) 100%);
	color: #fff;
	box-shadow: 0 12px 40px rgba(59, 108, 240, 0.24);
}

.btn-default {
	background: var(--surface-strong);
	color: var(--text);
	box-shadow: var(--sh-inset);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
	background: var(--surface-muted);
	color: var(--text);
	box-shadow: inset 0 0 0 1px var(--line-strong);
}

.btn-xs {
	padding: 6px 10px;
	border-radius: var(--r-xs);
	font-size: 12px;
}

.btn-block {
	display: block;
	width: 100%;
}

.btn-link {
	padding: 0;
	background: none;
	color: var(--accent);
	font-weight: 800;
	box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
	color: var(--primary-dark);
	text-decoration: none;
	transform: none;
	box-shadow: none;
}

.btn-group > .btn + .btn { margin-left: 0; }
.btn-group > .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.btn-group > .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }


/* ─── 12. Forms ─── */

.form-group {
	margin-bottom: 18px;
}

.control-label {
	margin-bottom: 6px;
	color: var(--text-secondary);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.form-control {
	height: 48px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-strong);
	box-shadow: none;
	color: var(--text);
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 500;
	transition:
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease),
		background var(--t-fast) var(--ease);
}

textarea.form-control {
	height: auto;
	min-height: 110px;
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.6;
}

.form-control:focus {
	border-color: rgba(13, 115, 119, 0.4);
	box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
	background: #fff;
}

.form-control::placeholder {
	color: #9eaec0;
	font-weight: 500;
}

.form-control[readonly],
.form-control[disabled] {
	background: var(--surface-muted);
	color: var(--text-secondary);
	opacity: 0.85;
}

select.form-control {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235e6f84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}

.input-group {
	display: flex;
}

.input-group .form-control {
	flex: 1;
}

.input-group .form-control:first-child {
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.input-group-btn {
	display: flex;
}

.input-group-btn > .btn {
	height: 48px;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.checkbox label,
.terms {
	color: var(--muted);
	font-weight: 600;
}

.form-group__password {
	position: relative;
}

.form-group__password .form-control {
	padding-right: 130px;
}

.forgot-password {
	position: absolute;
	right: 14px;
	bottom: 14px;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent);
}

.auth-form .form-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.auth-form .form-inline .form-group {
	margin-bottom: 0;
}


/* ─── 13. Alerts ─── */

.alert {
	border: 0;
	border-radius: var(--r-md);
	padding: 16px 18px;
	font-weight: 600;
	font-size: 13.5px;
}

.alert-success {
	color: var(--success);
	background: var(--success-soft);
}

.alert-danger {
	color: var(--danger);
	background: var(--danger-soft);
}

.alert-info {
	color: var(--accent);
	background: var(--accent-soft);
}

.alert .close {
	opacity: 0.5;
	font-size: 18px;
	transition: opacity var(--t-fast);
}

.alert .close:hover {
	opacity: 0.9;
}


/* ─── 14. Pagination ─── */

.pagination {
	margin: 0;
}

.pagination > li > a,
.pagination > li > span {
	margin: 0 3px;
	padding: 9px 14px;
	border: 0;
	border-radius: var(--r-sm) !important;
	background: rgba(255, 255, 255, 0.7);
	color: var(--muted);
	font-weight: 700;
	font-size: 13px;
	box-shadow: var(--sh-inset);
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

.pagination > li > a:hover,
.pagination > li > a:focus {
	background: var(--surface-muted);
	color: var(--text);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
	background: linear-gradient(140deg, var(--primary), var(--accent));
	color: #fff;
	box-shadow: none;
}

.pagination-wrapper,
.orders-page .pagination,
.dripfeed-page .pagination,
.subscriptions-page .pagination,
.refill-page .pagination,
.updates-page .pagination,
.refunds-page .pagination,
.affiliate-page .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 18px;
}


/* ─── 15. Modals ─── */

.modal-content {
	padding: 0;
	overflow: hidden;
}

.modal-header,
.modal-body,
.modal-footer {
	padding: 18px 22px;
	border: 0;
}

.modal-header {
	border-bottom: 1px solid var(--line);
}

.modal-footer {
	border-top: 1px solid var(--line);
	background: var(--surface-muted);
}


/* ─── 16. Labels & Badges ─── */

.badge {
	font-weight: 700;
	border-radius: var(--r-pill);
}

.label {
	font-weight: 700;
	font-size: 11.5px;
	border-radius: var(--r-xs);
	padding: 4px 9px;
}

.label-default {
	background: var(--surface-muted);
	color: var(--muted);
	box-shadow: var(--sh-inset);
}

.label-primary {
	background: linear-gradient(140deg, var(--primary), var(--accent));
	color: #fff;
}

.label-success {
	background: var(--success-soft);
	color: var(--success);
}

.label-danger {
	background: var(--danger-soft);
	color: var(--danger);
}

.label-warning {
	background: var(--warning-soft);
	color: var(--warning);
}

.label-info {
	background: var(--accent-soft);
	color: var(--accent);
}


/* ─── 17. Auth Pages ─── */

.auth-page {
	margin-bottom: 10px;
}

.auth-page--support {
	margin-top: -6px;
}

.auth-card {
	position: relative;
	padding: 38px 36px;
	border-radius: var(--r-xl);
	background: #fff !important;
	border: 1px solid rgba(200, 215, 235, 0.55);
	box-shadow:
		0 1px 2px rgba(14, 23, 38, 0.03),
		0 6px 20px rgba(14, 23, 38, 0.05),
		0 20px 56px rgba(14, 23, 38, 0.08);
}

.auth-card__header {
	text-align: center;
	margin-bottom: 26px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(200, 215, 235, 0.55);
}

.auth-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: var(--r-md);
	background: linear-gradient(140deg, var(--primary), var(--accent));
	color: #fff;
	box-shadow: var(--sh-glow-primary);
}

.auth-card__title {
	margin: 0 0 5px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.03em;
}

.auth-card__desc {
	margin: 0;
	color: var(--muted);
	font-size: 13.5px;
	font-weight: 500;
}

/* Auth form controls override */
.auth-card .form-group {
	margin-bottom: 20px;
}

.auth-card .form-control {
	height: 50px;
	font-size: 14.5px;
	border-color: rgba(200, 215, 235, 0.7);
	background: #fafcfe;
}

.auth-card .form-control:focus {
	background: #fff;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
}

.auth-card .control-label {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text-secondary);
}

/* Auth actions */
.auth-actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 6px;
}

.auth-actions__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: 100%;
}

.auth-actions__group--primary {
	width: 100%;
}

.auth-actions__group--secondary {
	justify-content: center;
	padding-top: 14px;
	border-top: 1px solid rgba(200, 215, 235, 0.55);
}

.auth-actions__submit {
	min-width: 140px;
	padding: 13px 22px;
	font-size: 14.5px;
	border-radius: var(--r-sm);
	letter-spacing: 0.015em;
	box-shadow: var(--sh-glow-accent);
}

.auth-actions__submit:hover {
	box-shadow: 0 14px 40px rgba(59, 108, 240, 0.26);
}

.auth-actions__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.auth-actions__divider {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.auth-actions__divider::before,
.auth-actions__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}

.auth-actions__switch {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted);
	font-weight: 600;
	font-size: 13.5px;
	gap: 4px;
	flex-wrap: wrap;
}

.auth-actions__switch a {
	font-weight: 800;
}

.auth-support-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 248, 252, 0.88));
}


/* ─── 18. Settings Page ─── */

.settings-page__stack {
	display: grid;
	gap: 16px;
}

.settings-page__stack > .well {
	margin-bottom: 0;
}

.settings-tabs {
	margin-bottom: 18px;
}

.notifications-table {
	margin-top: 16px;
}


/* ─── 19. Orders & Actions ─── */

.order-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	width: auto;
}

.order-actions .btn {
	margin-bottom: 0;
}

.service-name,
.link {
	word-break: break-word;
}


/* ─── 20. Toast / Notification ─── */

#notify-wrapper {
	top: 22px;
	right: 22px;
	min-width: 280px;
	max-width: 400px;
	border-radius: var(--r-md);
	box-shadow: var(--sh-xl);
	font-size: 13.5px;
}


/* ─── 21. Footer ─── */

.site-footer {
	padding: 0 0 28px;
}

.site-footer__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: 22px 26px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: rgba(255, 255, 255, 0.7);
	box-shadow: var(--sh-sm);
}

.site-footer__main {
	flex: 1;
	min-width: 180px;
}

.site-footer__brand {
	display: block;
	margin-bottom: 5px;
	color: var(--text);
	font-family: 'Sora', sans-serif;
	font-size: 17px;
	font-weight: 800;
}

.site-footer__text {
	max-width: 56ch;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 1.65;
}

.site-footer__nav {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.site-footer__link {
	padding: 5px 11px;
	border-radius: var(--r-xs);
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 700;
	transition:
		background var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease);
}

.site-footer__link:hover,
.site-footer__link:focus {
	background: var(--surface-muted);
	color: var(--primary-dark);
}

.site-footer__year {
	white-space: nowrap;
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 700;
}


/* ─── 22. Content Cards (Blog, API, Ticket, Finance) ─── */

.content-card > :last-child,
.info-card > :last-child,
.blog-card__body > :last-child,
.ticket-message > :last-child,
.api-card__body > :last-child {
	margin-bottom: 0;
}

.content-card h1, .content-card h2, .content-card h3,
.content-card h4, .content-card h5, .content-card h6,
.info-card h1, .info-card h2, .info-card h3,
.info-card h4, .info-card h5, .info-card h6,
.blog-card h1, .blog-card h2, .blog-card h3,
.blog-card h4, .blog-card h5, .blog-card h6,
.ticket-thread h1, .ticket-thread h2, .ticket-thread h3,
.ticket-thread h4, .ticket-thread h5, .ticket-thread h6 {
	margin-top: 0;
}

.content-card p, .content-card li, .content-card blockquote,
.info-card p, .info-card li,
.blog-card__body p, .blog-card__body li,
.api-card p, .api-card li,
.ticket-thread .message, .ticket-thread .message p, .ticket-thread .message li {
	font-size: 14.5px;
	line-height: 1.75;
}

.content-card ul, .content-card ol,
.info-card ul, .info-card ol,
.blog-card__body ul, .blog-card__body ol,
.api-card ul, .api-card ol {
	padding-left: 18px;
}

.content-card blockquote,
.info-card blockquote,
.blog-card__body blockquote,
.ticket-message blockquote,
.api-card blockquote {
	margin: 16px 0;
	padding: 14px 18px;
	border-left: 3px solid var(--primary);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: rgba(214, 245, 240, 0.35);
	color: var(--text);
}

.content-card img,
.info-card img,
.blog-card__media img,
.blog-card--full img {
	width: 100%;
	height: auto;
	border-radius: var(--r-lg);
}

/* Blog */
.blog-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 253, 0.9));
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.blog-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-lg);
}

.blog-card__title {
	margin-bottom: 14px;
	font-size: 22px;
}

.blog-card__media {
	margin: 0 0 16px;
}

.blog-card__body {
	color: var(--muted);
}

.blog-card__actions {
	margin-top: 20px;
}

.blog-card__actions .btn {
	min-width: 140px;
}

.blog-page--post .blog-card { margin-bottom: 16px; }

.blog-page--listing .blog-card + .blog-card,
.blog-page--listing .well + .well,
.settings-page__stack > .well + .well,
.affiliate-page .well + .well,
.finance-page--history .well + .nav-pills {
	margin-top: 16px;
}

/* API card */
.api-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 248, 255, 0.9));
}

.api-card__body { max-width: 100%; }
.api-card h2 { margin-bottom: 18px; }
.api-card .m-t-md { margin-top: 26px; }
.api-card .m-b-md { margin-bottom: 22px; }
.api-card .table { min-width: 560px; }

.api-card pre {
	margin: 12px 0 22px;
	padding: 16px 18px;
	border: 1px solid rgba(30, 40, 60, 0.12);
	border-radius: var(--r-md);
	background: #0f172a;
	color: #d4e4ff;
	font-size: 12.5px;
	line-height: 1.75;
	white-space: pre-wrap;
	word-break: break-word;
}

.api-card .form-inline {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.api-card__toolbar {
	margin-bottom: 14px;
}

/* Finance */
.finance-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 253, 0.9));
	transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.finance-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sh-lg);
}

/* Confirm email */
.confirm-email {
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 253, 0.9));
}

.confirm-email h3 {
	margin-bottom: 16px;
}

.confirm-email__description {
	max-width: 40ch;
	margin: 0 auto 16px;
	color: var(--muted);
}

.confirm-email__action {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}


/* ─── 23. Tickets ─── */

.ticket-title,
.titcket-title {
	margin-bottom: 22px;
	color: var(--text);
	font-family: 'Sora', sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.ticket-thread {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 253, 0.92));
}

.ticket-message-block {
	margin-bottom: 20px;
	max-width: 88%;
}

.ticket-message-right {
	margin-left: auto;
}

.ticket-message {
	border-radius: var(--r-lg);
	padding: 16px 18px;
	box-shadow: var(--sh-sm);
}

.ticket-message-right .ticket-message {
	background: linear-gradient(140deg, rgba(13, 115, 119, 0.1), rgba(59, 108, 240, 0.08));
	border: 1px solid rgba(13, 115, 119, 0.12);
}

.ticket-message-left .ticket-message {
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--line);
}

.ticket-message .message {
	color: var(--text);
}

.ticket-message .message a {
	font-weight: 700;
}

.ticket-message .message hr,
.ticket-message hr {
	border-top-color: var(--line);
}

.ticket-message-right .info,
.ticket-message-left .info {
	display: flex;
	gap: 8px;
	margin-top: 8px;
	color: var(--muted);
	font-size: 11.5px;
	align-items: center;
}

.ticket-message-right .info {
	justify-content: flex-end;
}

.ticket-thread .panel-border-top {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.ticket-message__files {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(200, 215, 235, 0.45);
}

.ticket-message__files a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 0;
	font-size: 12.5px;
	font-weight: 600;
}

.tickets-uploader {
	padding: 14px 16px;
	border: 1px dashed rgba(13, 115, 119, 0.25);
	border-radius: var(--r-md);
	background: rgba(214, 245, 240, 0.25);
}


/* ─── 24. Page-Specific Scoped Rules ─── */

.child-panel-order-page .alert-info,
.refunds-page .alert-info {
	border: 0;
	border-radius: var(--r-md);
}

.child-panel-order-page .alert-info ul {
	margin-top: 10px;
	margin-bottom: 0;
}

.affiliate-page .data-card .table,
.finance-page .data-card .table,
.tickets-page .data-card .table,
.child-panel-page .data-card .table,
.dripfeed-page .data-card .table,
.subscriptions-page .data-card .table,
.refunds-page .data-card .table,
.refill-page .data-card .table,
.updates-page .data-card .table {
	min-width: 680px;
}

.content-page,
.blog-page,
.docs-page,
.affiliate-page,
.tickets-page,
.finance-page,
.child-panel-page,
.child-panel-order-page,
.confirm-email-page,
.dripfeed-page,
.subscriptions-page,
.refunds-page,
.refill-page,
.updates-page {
	margin-bottom: 10px;
}


/* ─── 25. Utilities ─── */

.nowrap { white-space: nowrap; }
.width-40 { width: 40%; }
.width-service-name { width: 38%; }
.search { width: 300px; }
.well-float { float: none; width: 100%; }

.pull-right-middle {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--muted);
	font-weight: 600;
}

.panel-body {
	padding: 14px 16px;
}

.help-block {
	margin-top: 5px;
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
}

.text-muted   { color: var(--muted) !important; }
.text-success { color: var(--success) !important; }
.text-danger  { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--primary) !important; }


/* ─── 26. RTL Support ─── */

.rtl-nav {
	float: none;
	direction: rtl;
	width: 100%;
	padding-right: 6px;
}

.rtl-nav > li { float: none; }

.rtl-nav .search {
	margin-left: 0;
	margin-right: auto;
}

.rtl-form .form-group__password .form-control {
	padding-left: 130px;
	padding-right: 14px;
}

.rtl-form .auth-actions__switch {
	text-align: right;
}

.rtl-form .forgot-password {
	left: 14px;
	right: auto;
}

.rtl-form select.form-control {
	background-position: left 14px center;
	padding-right: 14px;
	padding-left: 40px;
}

.rtl-search .input-group input,
.rtl-nav .pull-right .input-group input {
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.rtl-search .input-group-btn > .btn,
.rtl-nav .pull-right .input-group-btn > .btn {
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}

.modal-rtl .modal-header,
.modal-rtl .modal-body,
.modal-rtl .modal-footer {
	direction: rtl;
	text-align: right;
}

.modal-rtl .close { float: left; }


/* ─── 27. Navbar Collapse State ─── */

.site-navbar.navbar-collapsed-before {
	padding-bottom: 10px;
}

.site-navbar.navbar-collapsed-before .site-nav {
	margin-top: 4px;
}


/* ─── 28. Animations ─── */

.site-main .well,
.page-hero__inner,
.site-footer__inner {
	animation: glacierUp 0.4s var(--ease) both;
}

.auth-card {
	animation: glacierCard 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes glacierUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes glacierCard {
	from {
		opacity: 0;
		transform: translateY(14px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* ─── 29. Responsive — XL ≥ 1200 ─── */

@media (min-width: 1200px) {
	.site-navbar {
		width: calc(100% - 40px);
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}
}


/* ─── 30. Responsive — LG ≤ 1199 ─── */

@media (max-width: 1199px) {
	.page-hero__inner {
		flex-direction: column;
	}

	.page-hero__aside {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		width: 100%;
	}
}


/* ─── 31. Responsive — MD ≤ 991 ─── */

@media (max-width: 991px) {
	.site-navbar {
		margin: 12px 12px 0;
		border-radius: var(--r-lg);
	}

	.site-navbar__inner {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-nav > li { margin-right: 0; }

	.page-hero { padding-top: 16px; }

	.page-hero__inner {
		padding: 22px 20px;
		border-radius: var(--r-lg);
	}

	.well,
	.modal-content,
	.page-card,
	.info-card {
		padding: 22px;
	}

	.auth-card {
		padding: 26px 22px;
	}

	.nav-pills .search {
		width: 100%;
		margin-left: 0;
	}

	.rtl-nav .search { margin-right: 0; }

	.form-group__password .form-control,
	.rtl-form .form-group__password .form-control {
		padding-left: 14px;
		padding-right: 14px;
	}

	.forgot-password,
	.rtl-form .forgot-password {
		position: static;
		display: inline-block;
		margin-top: 8px;
	}

	.pull-right-middle {
		min-height: 0;
		margin-top: 12px;
	}

	.page-card--sticky { position: static; }

	.site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.site-footer__nav {
		padding-top: 12px;
		border-top: 1px solid var(--line);
		width: 100%;
	}
}


/* ─── 32. Responsive — SM ≤ 767 ─── */

@media (max-width: 767px) {
	.site-navbar__inner {
		padding-left: 14px;
		padding-right: 14px;
	}

	.site-navbar__brand {
		max-width: calc(100% - 68px);
		padding: 14px 0;
	}

	.site-navbar__brand-text {
		max-width: 170px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.site-nav > li > a {
		justify-content: flex-start;
	}

	.site-nav__auth-group {
		margin-left: 0;
		padding: 4px 0 8px;
		width: 100%;
	}

	.site-nav__btn {
		flex: 1;
		text-align: center;
	}

	.page-hero__title {
		font-size: clamp(1.8rem, 8vw, 2.6rem);
	}

	.page-hero__subtitle { font-size: 14px; }

	.auth-form .form-inline {
		flex-direction: column;
		align-items: stretch;
	}

	.auth-actions,
	.auth-actions__group {
		flex-direction: column;
		align-items: stretch;
	}

	.auth-actions__group--secondary { width: 100%; }
	.auth-actions__switch { justify-content: center; }

	.auth-actions__submit,
	.auth-actions__social {
		width: 100%;
	}

	.confirm-email__action {
		flex-direction: column;
	}

	.confirm-email__action .btn { width: 100%; }

	.ticket-title,
	.titcket-title {
		font-size: 22px;
	}

	.ticket-message { padding: 14px; }

	.ticket-message-block { max-width: 100%; }

	.blog-card__title { font-size: 20px; }

	.input-group {
		flex-direction: column;
	}

	.input-group .form-control:first-child,
	.input-group-btn > .btn,
	.rtl-search .input-group input,
	.rtl-search .input-group-btn > .btn,
	.rtl-nav .pull-right .input-group input,
	.rtl-nav .pull-right .input-group-btn > .btn {
		border-radius: var(--r-sm);
	}

	.input-group-btn {
		display: block;
		width: 100%;
	}

	.input-group-btn > .btn {
		width: 100%;
		margin-top: 8px;
	}

	#notify-wrapper {
		left: 12px;
		right: 12px;
		min-width: 0;
	}

	.order-actions { flex-direction: column; }

	.table > thead > tr > th,
	.table > tbody > tr > td {
		padding: 11px 12px;
	}
}


/* ─── 33. Responsive — XS ≤ 480 ─── */

@media (max-width: 480px) {
	.site-navbar {
		margin: 8px 8px 0;
	}

	.page-hero__inner {
		padding: 16px 14px;
		border-radius: var(--r-lg);
	}

	.well,
	.modal-content,
	.page-card,
	.info-card {
		padding: 16px;
		border-radius: var(--r-md);
	}

	.auth-card {
		padding: 22px 16px;
		border-radius: var(--r-lg);
	}

	.auth-card__icon {
		width: 44px;
		height: 44px;
		border-radius: var(--r-sm);
	}

	.auth-card__title { font-size: 19px; }

	.page-hero__stat {
		padding: 12px 14px;
	}

	.ticket-message-right .info,
	.ticket-message-left .info {
		flex-direction: column;
		align-items: flex-start;
	}

	.ticket-message-right .info {
		align-items: flex-end;
	}

	.nav-pills {
		padding: 4px;
		border-radius: var(--r-md);
	}

	.nav-pills > li > a {
		padding: 8px 12px;
		font-size: 12.5px;
	}

	.btn {
		padding: 10px 16px;
		font-size: 13px;
	}

	.form-control {
		height: 44px;
		padding: 9px 12px;
		font-size: 13.5px;
	}

	.table > thead > tr > th {
		font-size: 10px;
		padding: 10px 8px;
	}

	.table > tbody > tr > td {
		padding: 10px 8px;
		font-size: 12.5px;
	}
}


/* ─── 34. Scrollbar ─── */

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: var(--r-pill);
	background: rgba(94, 111, 132, 0.2);
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(94, 111, 132, 0.36);
}


/* ─── 35. Focus & Accessibility ─── */

:focus-visible {
	outline: 2px solid rgba(13, 115, 119, 0.5);
	outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus-visible,
.nav-pills > li > a:focus-visible {
	outline: 2px solid rgba(13, 115, 119, 0.5);
	outline-offset: 2px;
}

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


/* ─── 36. Card Hover Lift ─── */

.blog-card,
.finance-card,
.order-card,
.api-card {
	transition:
		transform var(--t-base) var(--ease),
		box-shadow var(--t-base) var(--ease);
}


/* ─── 37. Tickets Page ─── */

.tickets-page .nav-pills {
	margin-bottom: 14px;
}