/*
	cs-gamers.net shop — "csgdark" template
	Palette, fonts and card work copied verbatim from /stats/assets/css/style.css
	so the shop and the stats pages read as one site. Nothing is loaded from a
	CDN and no CSS framework is used: the Bootstrap 3 and Bootstrap 4 class
	names the Twig markup already carries are reimplemented here by hand, so
	the templates did not have to be rewritten.
*/

:root {
	--bg:     #0a0707;
	--steel:  #171111;
	--steel2: #291f1f;
	--edge:   #332a2b;   /* hairlines - NEUTRAL, never red */
	--edge2:  #4d3f41;   /* raised borders */
	--red:    #b20e14;   /* dominant: active marks, 3px section rules */
	--red-b:  #ff3d44;   /* bright: only things you can click */
	--text:   #e8e2e1;
	--bright: #ffffff;
	--muted:  #9c9492;
	--new:    #22e5ff;
	--mid:    #ffb800;
	--vet:    #b20e14;
	--ok:     #2be84f;
	--gold:   #ffd23d;
	--silver: #b4b4b4;
	--bronze: #d98a44;
	--mono:   "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

/*
	Every length in this file is in rem, so the one number below sets the scale
	of the whole shop. Same bumps as the stats site: a 2560 wide panel is
	usually further from your face than a laptop. Phones stay at 16.
	Borders and shadows stay in px on purpose — a 1px hairline should not grow.
*/
html {
	overflow-x: hidden;
	font-size: 16px;
}
@media (min-width: 1280px) { html { font-size: 17px; } }
@media (min-width: 1600px) { html { font-size: 18px; } }
@media (min-width: 2000px) { html { font-size: 19px; } }
@media (min-width: 2500px) { html { font-size: 20.5px; } }
@media (min-width: 3200px) { html { font-size: 22.5px; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.875rem;
	line-height: 1.5;
	/* The shared footer carries the space at the end of the page now. */
	padding: 0;
	position: relative;
	overflow-x: hidden;
}

/* Same brushed grain the rest of the site uses. */
body::before {
	content: '';
	position: fixed; inset: 0;
	background:
		repeating-linear-gradient(118deg, rgba(255,255,255,.011) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(62deg, rgba(178,14,20,.045) 0 1px, transparent 1px 9px);
	pointer-events: none;
	z-index: 0;
}

a { color: var(--red-b); text-decoration: none; }
a:hover { color: var(--bright); }

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.75rem;
	color: var(--bright);
	font-weight: normal;
	letter-spacing: 0.0625rem;
}
h1 { font-size: 1.3125rem; text-transform: uppercase; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.875rem; }
h5, h6 { font-size: 0.8125rem; }
p { margin: 0 0 0.75rem; }
hr { border: 0; border-top: 1px solid var(--edge); margin: 1rem 0; }
small { font-size: 0.75rem; color: var(--muted); }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------- layout -- */
/*
	Width matched to the shared shell's .csg-wrap (90%, 94% under 1100, 96%
	under 767) so the bar, the shop content and the footer share one margin.
	The horizontal padding goes with it - the percentage is the gutter now.
*/
.container {
	width: 90%;
	max-width: none;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 1;
}
@media (max-width: 1100px) { .container { width: 94%; } }
@media (max-width: 767px)  { .container { width: 96%; } }
.container-fluid {
	width: 100%;
	margin: 0 auto;
	padding: 0 1.125rem;
	position: relative;
	z-index: 1;
}
.main-container, .absolute-wrapper { position: relative; z-index: 1; }

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -0.4375rem;
	margin-right: -0.4375rem;
}
.form-row { display: flex; flex-wrap: wrap; margin-left: -0.3125rem; margin-right: -0.3125rem; }
.form-row > [class*="col"] { padding-left: 0.3125rem; padding-right: 0.3125rem; }

[class*="col-"], .col {
	position: relative;
	width: 100%;
	padding-left: 0.4375rem;
	padding-right: 0.4375rem;
}
.col { flex: 1 0 0%; }

/* Mobile first: every column is full width until the breakpoint kicks in. */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 { flex: 0 0 auto; }
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }

@media (min-width: 768px) {
	.col-md-1  { flex: 0 0 auto; width: 8.333333%; }
	.col-md-2  { flex: 0 0 auto; width: 16.666667%; }
	.col-md-3  { flex: 0 0 auto; width: 25%; }
	.col-md-4  { flex: 0 0 auto; width: 33.333333%; }
	.col-md-5  { flex: 0 0 auto; width: 41.666667%; }
	.col-md-6  { flex: 0 0 auto; width: 50%; }
	.col-md-7  { flex: 0 0 auto; width: 58.333333%; }
	.col-md-8  { flex: 0 0 auto; width: 66.666667%; }
	.col-md-9  { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
	/* Bootstrap 3 offsets, still used by the admin screens. */
	.col-md-offset-1 { margin-left: 8.333333%; }
	.col-md-offset-2 { margin-left: 16.666667%; }
	.col-md-offset-3 { margin-left: 25%; }
	.col-md-offset-4 { margin-left: 33.333333%; }
	/*
		The login and lost-password forms carry a bootstrap 3 offset that was
		pushing them off to the right of an otherwise empty panel. Centred
		reads like the forum's own login box.
	*/
	.col-md-offset-5 { margin-left: auto; margin-right: auto; }
}

@media (min-width: 992px) {
	.col-lg-1  { flex: 0 0 auto; width: 8.333333%; }
	.col-lg-2  { flex: 0 0 auto; width: 16.666667%; }
	.col-lg-3  { flex: 0 0 auto; width: 25%; }
	.col-lg-4  { flex: 0 0 auto; width: 33.333333%; }
	.col-lg-6  { flex: 0 0 auto; width: 50%; }
	.col-lg-8  { flex: 0 0 auto; width: 66.666667%; }
	.col-lg-9  { flex: 0 0 auto; width: 75%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------------------- navbar -- */
.navbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
	border-bottom: 1px solid var(--edge);
	background: linear-gradient(180deg, #171111, #0a0707);
	position: relative;
	z-index: 20;
}
.navbar.fixed-top {
	position: sticky;
	top: 0;
	margin-bottom: 1.625rem;
}
.navbar > .container, .navbar > .container-fluid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	min-height: 3.25rem;
}
.navbar-brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--bright);
	white-space: nowrap;
}
.navbar-brand:hover { color: var(--red-b); }

.navbar-nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.navbar-nav .nav-item { display: block; }
.navbar-nav .nav-link {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0.5625rem 0.875rem;
	border: 1px solid var(--edge);
	border-right: 0;
	background: var(--steel);
	white-space: nowrap;
}
.navbar-nav .nav-item:last-child .nav-link { border-right: 1px solid var(--edge); }
.navbar-nav .nav-link:hover { color: var(--bright); background: var(--steel2); }
.navbar-nav .nav-link.active,
.navbar-nav .nav-item.active .nav-link {
	color: var(--bright);
	background: var(--steel2);
	box-shadow: inset 0 -2px 0 var(--red);
}
.ml-auto { margin-left: auto; }

/* Hamburger. The markup carries Bootstrap 4 data-toggle attributes; the tiny
   nav.js in this template drives them, so no framework JS is loaded. */
.navbar-toggler, .navbar-toggle {
	display: none;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--bright);
	background: var(--steel2);
	border: 1px solid var(--edge2);
	padding: 0.4375rem 0.625rem;
	cursor: pointer;
}
.navbar-toggler-icon {
	display: inline-block;
	width: 1rem;
	height: 0.75rem;
	background:
		linear-gradient(var(--red), var(--red)) 0 0 / 100% 2px no-repeat,
		linear-gradient(var(--bright), var(--bright)) 0 50% / 100% 2px no-repeat,
		linear-gradient(var(--bright), var(--bright)) 0 100% / 100% 2px no-repeat;
}
.icon-bar {
	display: block;
	width: 1rem;
	height: 2px;
	background: var(--bright);
	margin: 3px 0;
}

@media (max-width: 991px) {
	.navbar-toggler, .navbar-toggle { display: inline-flex; }
	.navbar-collapse { flex: 0 0 100%; }
	.navbar-collapse.collapse:not(.show) { display: none; }
	.navbar-nav { flex-direction: column; width: 100%; padding-bottom: 0.5rem; }
	.navbar-nav .nav-link { border-right: 1px solid var(--edge); border-bottom: 0; }
	.navbar-nav .nav-item:last-child .nav-link { border-bottom: 1px solid var(--edge); }
}
@media (min-width: 992px) {
	/* Desktop: the collapse wrapper is always open, whatever JS thinks. */
	.navbar-collapse.collapse { display: flex !important; flex: 1 1 auto; justify-content: flex-end; }
	.mobile-menu { display: none; }
}

/* Generic collapse used outside the navbar (sidebar menu, admin panels). */
.collapse:not(.show):not(.navbar-collapse) { display: none; }
.collapse.show { display: block; }
/* Forced open from the tablet breakpoint up only: below it the MENU button
   has to be able to close the sidebar again. */
@media (min-width: 768px) {
	.dont-collapse-sm { display: block !important; height: auto !important; visibility: visible !important; }
}

/* --------------------------------------------------------------- side -- */
.list-group { display: block; margin: 0 0 0.875rem; padding: 0; list-style: none; }
.list-group-item {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	/*
		The old Bootstrap theme filled a menu row by sliding a red panel in
		from the left rather than swapping the background in one step. Same
		trick here: a two-stop gradient twice the width of the row, parked on
		its right half, slid to the left half on hover.
	*/
	background: linear-gradient(to left, var(--steel) 50%, var(--red) 50%) right;
	background-size: 200%;
	border: 1px solid var(--edge);
	border-bottom: 0;
	padding: 0.625rem 0.875rem;
}
.list-group-item:last-child { border-bottom: 1px solid var(--edge); }
/*
	The old theme answered a hover with a plain background swap, and that read
	well enough that its loss was noticed. Same move here in dark: the row
	lifts, the text goes bright and the red marker the current page carries is
	previewed on the left edge.
*/
a.list-group-item {
	transition: background-position 0.3s ease-out, color 0.3s ease-out;
}
a.list-group-item:hover, a.list-group-item:focus {
	color: var(--bright);
	background-position: left;
	text-decoration: none;
}
/* The page you are on stays filled, and gets there instantly. */
.list-group-item.active {
	color: var(--bright);
	background-position: left;
	transition: none;
	box-shadow: inset 3px 0 0 var(--red-b);
}

.row > [class^="col-lg-"]:only-child { flex: 0 0 100%; max-width: 100%; width: 100%; }

/*
	The content card next to the menu carries .my-4, so the menu needs the same
	top offset or the panel starts a line lower than the menu beside it.
*/
.row > .col-lg-3 > .list-group { margin-top: 1.25rem; }

/* ------------------------------------------------------- cards, panels --
   Bootstrap 4 .card and Bootstrap 3 .panel are the same object here, so the
   front-end and the admin screens finally match. Flat, square, 1px --edge. */
.card, .panel {
	background: var(--steel);
	border: 1px solid var(--edge);
	border-radius: 0;
	margin-bottom: 0.875rem;
	/* The 1px white top edge. With neutral hairlines this is what separates
	   one panel from the next without painting the grid red. */
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
/*
	/stats marks every section with a 3px red rule down its left edge, and a
	shop page is one card with one heading, so the card header is where that
	mark belongs here. Same rule, same tracking, same steel2 field - the two
	apps now open a section the same way.
*/
.card-header, .panel-heading {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
	border-left: 3px solid var(--red);
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	background: linear-gradient(180deg, #1b1415, #16100f);
	border-bottom: 1px solid var(--edge);
	color: var(--bright);
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	font-weight: normal;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4,
.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4 {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	font-weight: normal;
	flex: 1 1 12.5rem;
}
.card-body, .panel-body { padding: 0.875rem 1rem; }
.card-outline-secondary, .panel-default { border-color: var(--edge); }
.card-footer, .panel-footer {
	padding: 0.625rem 1rem;
	background: var(--steel2);
	border-top: 1px solid var(--edge);
	font-size: 0.75rem;
	color: var(--muted);
}
.panel-collapse { border-top: 0; }

/* -------------------------------------------------------------- tables -- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table, .table {
	border-collapse: collapse;
	width: 100%;
	background: var(--steel);
}
.table th, .table td, table th, table td {
	padding: 0.5625rem 0.75rem;
	text-align: left;
	font-size: 0.75rem;
	border-bottom: 1px solid var(--edge);
	vertical-align: middle;
}
.table th, table th {
	background: var(--steel2);
	color: var(--muted);
	font-weight: normal;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	white-space: nowrap;
}
.table tbody tr:last-child td, table tbody tr:last-child td { border-bottom: 0; }
/* Flat rows on purpose - the forum theme carries no zebra striping. */
.table-hover tbody tr:hover td, table tbody tr:hover td { background: rgba(216,31,47,.05); }
.table-user-information td { border-bottom: 1px solid var(--edge); }

/* --------------------------------------------------------------- forms -- */
.form-group { margin-bottom: 0.875rem; }
label {
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0.3125rem;
}
.form-control,
select, input[type=text], input[type=number], input[type=search],
input[type=password], input[type=email], input[type=tel], textarea {
	display: block;
	width: 100%;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--bright);
	background: var(--steel);
	border: 1px solid var(--edge2);
	border-radius: 0;
	padding: 0.4375rem 0.5625rem;
	max-width: 100%;
}
select:focus, input:focus, textarea:focus, .form-control:focus {
	outline: 1px solid var(--red);
	border-color: var(--red);
}
.form-control::placeholder { color: var(--muted); }
.form-control[disabled], .form-control[readonly] { color: var(--muted); background: #0a0708; }
textarea.form-control { min-height: 7rem; resize: vertical; }
select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
	                  linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: right 0.85rem center, right 0.6rem center;
	background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
	background-repeat: no-repeat;
	padding-right: 1.75rem;
}

.input-group { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; }
.input-group > .form-control { flex: 1 1 auto; width: 1%; }
.input-group-addon, .input-group-text, .input-group-prepend, .input-group-append {
	display: flex;
	align-items: center;
	padding: 0.4375rem 0.625rem;
	font-size: 0.6875rem;
	color: var(--muted);
	background: var(--steel2);
	border: 1px solid var(--edge2);
}
.input-group > .form-control + .input-group-addon,
.input-group-append { border-left: 0; }
.input-group-prepend + .form-control, .input-group > .input-group-addon + .form-control { border-left: 0; }

input[type=checkbox], input[type=radio] { accent-color: var(--red); width: auto; display: inline-block; }
.radio label, .radio { font-size: 0.75rem; text-transform: none; letter-spacing: 0; color: var(--text); }

/* ------------------------------------------------------------- buttons -- */
.btn {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--bright);
	background: var(--steel2);
	border: 1px solid var(--edge2);
	border-radius: 0;
	padding: 0.4375rem 0.875rem;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
}
.btn:hover { color: var(--bright); background: var(--edge); border-color: var(--red); }
.btn:focus { outline: 1px solid var(--red); }
.btn[disabled], .btn.disabled { color: var(--muted); border-color: var(--edge); cursor: not-allowed; }
.btn-primary { border-color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }
.btn-primary:hover { background: var(--red); color: #fff; }
.btn-danger { color: var(--red-b); border-color: var(--edge2); }
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-success { color: var(--ok); border-color: var(--edge2); }
.btn-success:hover { background: var(--ok); color: #06210a; border-color: var(--ok); }
.btn-xs { font-size: 0.625rem; padding: 0.25rem 0.5rem; }
.btn-block { display: block; width: 100%; }
.btn-group { display: inline-flex; }
.btn-group .btn + .btn { border-left: 0; }
button.go { font-family: var(--mono); }

/* ------------------------------------------------- alerts, badges, tags -- */
.alert {
	padding: 0.75rem 1rem;
	border: 1px solid var(--edge2);
	background: var(--steel);
	color: var(--text);
	font-size: 0.75rem;
	margin-bottom: 0.875rem;
	box-shadow: inset 3px 0 0 var(--muted);
}
.alert-danger  { box-shadow: inset 3px 0 0 var(--red); color: var(--bright); }
.alert-success { box-shadow: inset 3px 0 0 var(--ok); }
.alert-warning { box-shadow: inset 3px 0 0 var(--mid); }
.alert-info    { box-shadow: inset 3px 0 0 var(--new); }

.badge {
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	padding: 0.0625rem 0.375rem;
	border: 1px solid currentColor;
	border-radius: 0;
	white-space: nowrap;
}

/* ---------------------------------------------------------- pagination -- */
.pagination { display: flex; flex-wrap: wrap; list-style: none; margin: 1rem 0; padding: 0; gap: 0; }
.page-item { display: block; }
.page-link {
	display: block;
	font-size: 0.6875rem;
	color: var(--muted);
	background: var(--steel);
	border: 1px solid var(--edge);
	border-right: 0;
	padding: 0.375rem 0.625rem;
}
.page-item:last-child .page-link { border-right: 1px solid var(--edge); }
.page-link:hover { color: var(--bright); background: var(--steel2); }
.page-item.active .page-link {
	color: var(--bright);
	background: var(--steel2);
	box-shadow: inset 0 -2px 0 var(--red);
}

/* ----------------------------------------------------------- the shop --
   Section headings and the item list carry the shop's own class names; they
   are styled here to the same rules as the stats cards. */
.section_title {
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--bright);
	border-left: 3px solid var(--red);
	padding: 0.125rem 0 0.125rem 0.875rem;
	margin: 1.5rem 0 0.75rem;
}
.section_description { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.875rem; }
.section_separator { border-top: 1px solid var(--edge); margin: 1.25rem 0; }

.list_item {
	display: block;
	background: var(--steel);
	border: 1px solid var(--edge);
	margin-bottom: 0.875rem;
}
.list_item:hover { border-color: var(--edge2); }
.item_link { display: block; color: var(--text); padding: 0.75rem; }
.item_link:hover { color: var(--bright); }
.item_image { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--edge); }

.content { position: relative; z-index: 1; }
.custome { color: var(--bright); }
.tab-contents { padding-top: 0.875rem; }
.footer {
	border-top: 1px solid var(--edge);
	margin-top: 2rem;
	padding: 1rem 0;
	font-size: 0.6875rem;
	color: var(--muted);
	text-align: center;
}
.divider { border-top: 1px solid var(--edge); margin: 0.75rem 0; }
.glow { color: var(--red-b); }
.underline { text-decoration: underline; }
/* The home page logo. Same sizing the old theme used: full width, capped. */
.img25 { width: 100%; max-width: 37.5rem; height: auto; }

.top-notification-bar {
	display: block;
	background: var(--steel2);
	border-bottom: 1px solid var(--edge);
	color: var(--text);
	font-size: 0.75rem;
	text-align: center;
	padding: 0.5rem 1rem;
	position: relative;
	z-index: 21;
}
.top-notification-bar:hover { color: var(--bright); background: var(--edge); }
.alert-bar-div { max-width: 73.75rem; margin: 0 auto; }
/*
	The notice hangs off the bottom of the shop bar, so it eats that bar's
	bottom margin and carries it below itself instead - two bars and a notice
	joined by hairlines, with the page gap under the lot.
*/
.navbar.fixed-top + .top-notification-bar {
	margin: -1.625rem 0 1.625rem;
	border-top: 0;
}

/*
	The shared bar keeps a gap under it for /stats and /amxbans, whose content
	starts right after it. Here the shop's own bar is next, and the two read as
	one header only when they touch.
*/
/* body, because csg_shell.css is linked after this file. */
body #csg-bar { margin-bottom: 0; }

/*
	Sticky footer: on a short page (login, an error, an empty log) the content
	does not reach the fold, and the shared footer used to float mid screen.
	body is a column so .csg-page - the wrapper that holds everything from the
	shop's own navbar down to the footer - can take the leftover height, and
	the footer inside it is pushed to the bottom by margin-top: auto.
*/
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body > .csg-page {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
body > .csg-page > #csg-foot { margin-top: auto; }
/* the bar keeps its own height, it must never be squeezed to make room. */
body > #csg-bar { flex: none; }

/* --------------------------------------------------------- utilities -- */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.pull-left   { float: left; }
.pull-right  { float: right; }
.my-4 { margin-top: 1.25rem; margin-bottom: 1.25rem; }
.mt-4 { margin-top: 1.25rem; }
.mb-4 { margin-bottom: 1.25rem; }
.inline-padding { padding: 0 0.5rem; }
.bg-dark { background: var(--steel); }
.hello-club-inline-block { display: block; }
.sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.caret {
	display: inline-block;
	width: 0; height: 0;
	margin-left: 0.25rem;
	vertical-align: middle;
	border-top: 0.25rem solid currentColor;
	border-right: 0.25rem solid transparent;
	border-left: 0.25rem solid transparent;
}

/* --------------------------------------------------------------- icons --
   The markup keeps its <i class="fa-duotone fa-home"> tags, but nothing here
   loads a webfont: each glyph is an inline SVG used as a CSS mask, so it
   inherits currentColor and costs no extra request. Bootstrap's template
   shipped 11MB of Font Awesome webfonts to draw the 21 icons below. */
.fa, .fas, .far, .fal, .fab, .fad, .fa-duotone, .fa-solid, .fa-regular,
[class*=" fa-"], [class^="fa-"] {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	-webkit-mask: var(--i) center / contain no-repeat;
	        mask: var(--i) center / contain no-repeat;
}
.fa-fw { width: 1.25em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
/* A tag with no glyph of its own must not paint a solid block. */
.fa, .fas, .far, .fal, .fab, .fad, .fa-duotone, .fa-solid, .fa-regular, .fa-fw { --i: none; background-color: transparent; }
[class*="fa-"][style*="--i"] { background-color: currentColor; }

.fa-home, .fa-house { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-database { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5'/%3E%3Cpath d='M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-user { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-trash { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M9 6V4h6v2M6 6l1 15h10l1-15'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-plus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-minus { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-wrench, .fa-screwdriver-wrench { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 5a5 5 0 0 1-6.5 6.5L6 19a2 2 0 0 1-3-3l7.5-7.5A5 5 0 0 1 17 2z'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-newspaper-o, .fa-newspaper { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='14'/%3E%3Cpath d='M7 9h6M7 13h6M17 9v6'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-gift { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12'/%3E%3Cpath d='M3 13h18M12 9v12'/%3E%3Cpath d='M12 9C9 9 7 8 7 6s3-2 5 3c2-5 5-4 5-3s-2 3-5 3z'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-coins { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cellipse cx='9' cy='7' rx='6' ry='3'/%3E%3Cpath d='M3 7v4c0 1.7 2.7 3 6 3s6-1.3 6-3V7'/%3E%3Cellipse cx='15' cy='16' rx='6' ry='3'/%3E%3Cpath d='M9 16v2c0 1.7 2.7 3 6 3s6-1.3 6-3v-2'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-tags { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 3h8l10 10-8 8L3 11z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-radiation { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M12 10V4M10.3 13 5.1 16M13.7 13l5.2 3'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-wand-magic-sparkles { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20 16 8'/%3E%3Cpath d='m15 3 1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M19 15l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-star-sharp-half, .fa-star { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 6.2 6.2.7-4.6 4.2 1.3 6.1L12 17.1 6.3 20.2l1.3-6.1L3 9.9l6.2-.7z'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-seal-question, .fa-cloud-question, .fa-question { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.3 9.3a2.8 2.8 0 0 1 5.4.9c0 1.9-2.7 2.3-2.7 4'/%3E%3Cpath d='M12 17.5v.01'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-clock-rotate-left { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1'/%3E%3Cpath d='M3 3v4h4'/%3E%3Cpath d='M12 8v4.5l3 1.8'/%3E%3C/svg%3E"); background-color: currentColor; }
.fa-chevrons-up { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3Cpath d='m6 9 6-6 6 6'/%3E%3C/svg%3E"); background-color: currentColor; }

/* ------------------------------------------------------------ sidebar --
   The left menu reuses .navbar-nav inside a .list-group, so the horizontal
   navbar rules above have to be undone here or the entries flow inline and
   come out ragged. It is a column of full width rows. */
.list-group .navbar-nav { flex-direction: column; width: 100%; margin: 0; }
.list-group .navbar-nav .nav-item { width: 100%; }
.list-group .navbar-nav .nav-link { border-right: 1px solid var(--edge); }
.list-group h6 { margin: 0; font-size: inherit; letter-spacing: 0; }
.list-group .list-group-item { width: 100%; border-bottom: 0; }
.list-group .nav-item:last-child .list-group-item { border-bottom: 1px solid var(--edge); }
.list-group .list-group-item i { color: var(--muted); }
.list-group .list-group-item:hover i,
.list-group .list-group-item.active i { color: var(--bright); }
.list-group br { display: none; }
.side-menu, .side-menu-container, .sidebar { position: relative; z-index: 1; }

/*
	.container is a flex item inside .navbar, so it shrinks to its content
	unless told otherwise. flex-basis stays auto so the 90/94/96 width above
	still applies - a basis of 100% would override it and run the shop's own
	navbar full-bleed, off the margin the shared bar and the content share.
	.container-fluid is deliberately full width, so it keeps the 100% basis.
*/
.navbar > .container { flex: 0 1 auto; width: 90%; margin: 0 auto; }
@media (max-width: 1100px) { .navbar > .container { width: 94%; } }
@media (max-width: 767px)  { .navbar > .container { width: 96%; } }
.navbar > .container-fluid { flex: 1 1 100%; }

/* ------------------------------------------------- off-palette inlines --
   The markup carries a handful of hard coded colours from the old theme —
   bright greens for coin amounts, a blue, a purple. The templates are shared
   wording-wise with the live shop so they are not edited here; the values are
   simply mapped onto palette tokens. Amber, not green: coins read as currency
   and the site has no green in it. */
[style*="#3ef83e" i], [style*="#00FF01" i], [style*="#007500" i] { color: var(--mid) !important; }
[style*="#ff0000" i], [style*="color:red" i], [style*="color: red" i]  { color: var(--red-b) !important; }
[style*="color: blue" i], [style*="color:blue" i] { color: var(--new) !important; }
[style*="#862165" i] { color: var(--red-b) !important; }

/* Not every submit in these templates carries .btn — the privilege, XP and
   redeem forms use a bare <input type="submit">. Style the elements too, so
   nothing falls back to the browser's grey chrome. */
button:not(.navbar-toggler):not(.navbar-toggle),
input[type=submit], input[type=button], input[type=reset] {
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--bright);
	background: var(--steel2);
	border: 1px solid var(--edge2);
	border-radius: 0;
	padding: 0.4375rem 0.875rem;
	cursor: pointer;
	width: auto;
}
button:not(.navbar-toggler):not(.navbar-toggle):hover,
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
}
input[type=submit] { box-shadow: inset 0 -2px 0 var(--red); }

/* -------------------------------------------------------- admin panel --
   The admin screens are Bootstrap 3 markup: the form fields sit inside an
   .input-group used as a plain wrapper, and the left menu is a .navbar nested
   inside a sidebar column. Both need the generic rules above undone. */

/* .input-group here only wraps a .form-group, so let the field fill it. */
.input-group > .form-group { flex: 1 1 100%; min-width: 0; }
.input-group > .form-group > .form-control { width: 100%; }

/* The sidebar's nested <nav class="navbar"> must not become a top bar. */
.sidebar .navbar, .side-menu .navbar {
	display: block;
	position: static;
	background: none;
	border: 0;
	margin: 0;
	min-height: 0;
}
.sidebar { padding-left: 0; padding-right: 0; }
.side-menu-container { width: 100%; }
.side-menu .nav, .sidebar .navbar-nav {
	display: block;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
.side-menu li { display: block; width: 100%; }
.side-menu li > a {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--steel);
	border: 1px solid var(--edge);
	border-bottom: 0;
	padding: 0.625rem 0.875rem;
	cursor: pointer;
}
.side-menu > .navbar > .side-menu-container > .nav > li:last-child > a { border-bottom: 1px solid var(--edge); }
.side-menu li > a:hover { color: var(--bright); background: var(--steel2); }
.side-menu li > a i { color: var(--muted); }
.side-menu li > a:hover i { color: var(--red-b); }

/* A collapsing entry is a plain row, not a card. */
.side-menu li.panel, .side-menu li.panel-default {
	background: none;
	border: 0;
	margin: 0;
}
.side-menu .panel-collapse .panel-body { padding: 0; background: none; border: 0; }
/* Second level sits inset, with the red rule marking the nesting. */
.side-menu .panel-collapse li > a {
	padding-left: 2.25rem;
	background: var(--bg);
	box-shadow: inset 2px 0 0 var(--edge2);
	text-transform: none;
	letter-spacing: 0.0625rem;
}
.side-menu .panel-collapse li > a:hover { box-shadow: inset 2px 0 0 var(--red); }
/*
	The collapse toggle is a 1.625rem bordered box further down this file. That
	is taller than a menu row's text, and floated it dropped out of the row and
	sat across the row below it. In the sidebar the row is a flex line instead,
	with the box centred in it and sized to fit.
*/
.side-menu [data-toggle="collapse"] {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-right: 0.5rem;
}
.side-menu [data-toggle="collapse"] .caret {
	float: none;
	margin: 0 0 0 auto;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

/* ---------------------------------------------------------- admin shell --
   The admin screens are two columns: the menu and the page beside it. The
   markup is Bootstrap 3 grid (.col-md-2 sidebar + .col-md-10 / .col-md-4
   .col-md-offset-3 content) but the two columns are NOT inside a .row, so the
   percentage widths and the offset were measured against the whole container
   and the page ended up sitting on top of the menu. Drive the shell as a flex
   row instead and neutralise the grid classes inside it: fixed menu column,
   the page takes whatever is left. */
.main-container {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
}
.main-container > .sidebar {
	flex: 0 0 13.75rem;
	width: 13.75rem;
	max-width: 13.75rem;
	margin: 0;
}
.main-container > .content {
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}
/* The narrow forms (settings, terms, add code…) stay narrow, but centred in
   the space left of the menu rather than pushed off it by the offset. */
.main-container > .content.col-md-4 > .panel,
.main-container > .content.col-md-4 > form { max-width: 34rem; margin-left: auto; margin-right: auto; }

@media (max-width: 767px) {
	.main-container { display: block; }
	.main-container > .sidebar {
		flex: none;
		width: 100%;
		max-width: none;
		margin-bottom: 1.125rem;
	}
}

/*
	The admin body prints a second <nav> above the shell that holds nothing but
	the two mobile toggles, so on a desktop it was an empty bar sitting under
	the shared site bar and reading as a broken header. It only earns its space
	where the sidebar collapses.
*/
.navbar-static-top { display: none; }
@media (max-width: 767px) {
	.navbar-static-top { display: flex; margin-bottom: 1.125rem; }
	.navbar-static-top .navbar-header { display: flex; align-items: center; gap: 0.5rem; }
	.navbar-toggle-sidebar::after { content: 'Menu'; }
}
/* Sidebar toggle: the shell has no off-canvas drawer, the menu simply stacks,
   so the class the script flips just hides it again. */
@media (max-width: 767px) {
	.sidebar .navbar-nav.slide-in { display: none; }
}

/* ------------------------------------------------------ admin dashboard --
   Four counters in one row. The old template floated four fixed 100px boxes,
   which stacked as soon as the column narrowed and left the numbers running
   down the page as a list. A grid of tiles instead: they share the row, wrap
   in pairs when narrow, and stop being able to overflow the panel. */
.information-box {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--edge);
	border: 1px solid var(--edge);
	text-align: left;
}
.information-box > div {
	display: block;
	float: none;
	width: auto;
	padding: 0.875rem 1rem;
	background: var(--steel2);
	border: 0;
	/* The markup carries a Bootstrap contextual colour inline on every tile
	   (red / green / cyan / blue). Off palette, and it painted the label the
	   same tone as the figure, so nothing had a hierarchy. */
	color: var(--text) !important;
}
.information-box > div span { display: block; }
.information-box > div strong {
	display: block;
	font-size: 1.75rem;
	line-height: 1.15;
	font-weight: normal;
	color: var(--bright);
	letter-spacing: 0.0313rem;
}
.information-box > div br { display: none; }
/* The label under the figure, in the same small caps the rest of the panel
   chrome uses. :last-child is the label span, :first-child the figure. */
.information-box > div span:last-child {
	margin-top: 0.25rem;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
}
/* One accent per tile, from the palette, on the top edge - the colour is the
   tile's identity, not the text colour. */
.information-box > div:nth-child(1) { box-shadow: inset 0 2px 0 var(--red); }
.information-box > div:nth-child(2) { box-shadow: inset 0 2px 0 var(--mid); }
.information-box > div:nth-child(3) { box-shadow: inset 0 2px 0 var(--new); }
.information-box > div:nth-child(4) { box-shadow: inset 0 2px 0 var(--muted); }
@media (max-width: 767px) {
	.information-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The tiles are the row's only child, and .row's negative gutters would push
   them out past the panel body's padding. */
.panel-body > .row:has(> .information-box) { margin-left: 0; margin-right: 0; }

/* Bootstrap 3 zebra striping, kept faint - the rest of the site is flat. */
.table-striped tbody tr:nth-child(odd) td { background: rgba(255,255,255,.018); }
.table-striped tbody tr:hover td { background: rgba(216,31,47,.05); }

/* Bootstrap 3 page title, used above a couple of admin screens. */
.page-header {
	margin: 0 0 0.875rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--edge);
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	color: var(--bright);
}

/* ------------------------------------------------ shared customs/add.css --
   The add-coins page pulls in customs/add.css, which is shared with the old
   template and cannot be edited here. It sets html{background:#fff} and a
   sans-serif stack, and it loads after this file, so the page ends up with a
   white surround. These are the only two declarations that have to be won
   back; the rest of that file still styles the payment widgets. */
html { background: var(--bg) !important; font-family: var(--mono) !important; }
body { background: var(--bg) !important; color: var(--text) !important; }

/* ===================================================== SCROLLBARS ======== */
/*
	Carried across from the forum's global.css. The shop is near-black; a
	default light scrollbar beside it reads as a hole punched in the page.
	Applied to the document and to every inner scroller - wide tables, the
	payment panes - so they all match.
*/
* {
	scrollbar-width: thin;
	scrollbar-color: var(--edge2) var(--bg);
}
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-corner { background: var(--bg); }
::-webkit-scrollbar-thumb {
	background: var(--edge2);
	border: 1px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--red); }
::-webkit-scrollbar-thumb:active { background: var(--red-b); }

/* ================================================ COLLAPSE TOGGLES ======= */
/*
	Same handle as the forum: a minus that becomes a plus, drawn in CSS inside
	a 1.625rem bordered box. The shop has no <img> expanders - its toggles are
	Bootstrap's data-toggle="collapse" anchors, which already carry a <span
	class="caret">. That span becomes the box, and state is read from the
	aria-expanded attribute nav.js maintains rather than from an image src.
*/
[data-toggle="collapse"] .caret,
[data-bs-toggle="collapse"] .caret {
	position: relative;
	float: right;
	width: 1.625rem;
	height: 1.625rem;
	border: 1px solid var(--edge2);
	background: var(--steel2);
	cursor: pointer;
	margin: 0;
	overflow: hidden;
	/* undo the triangle the Bootstrap markup expects */
	border-top-color: var(--edge2);
	border-left-color: var(--edge2);
	border-right-color: var(--edge2);
}
[data-toggle="collapse"]:hover .caret { border-color: var(--red); }

[data-toggle="collapse"] .caret::before,
[data-toggle="collapse"] .caret::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--muted);
	pointer-events: none;
	transition: background .12s linear, transform .12s ease;
}
/* The bar of the minus, always present. */
[data-toggle="collapse"] .caret::before {
	width: 0.625rem;
	height: 2px;
	margin: -1px 0 0 -0.3125rem;
}
/* The upright of the plus, only drawn once the panel is collapsed. */
[data-toggle="collapse"] .caret::after {
	width: 2px;
	height: 0.625rem;
	margin: -0.3125rem 0 0 -1px;
	transform: scaleY(0);
}
[data-toggle="collapse"]:hover .caret::before,
[data-toggle="collapse"]:hover .caret::after { background: var(--bright); }

[data-toggle="collapse"][aria-expanded="false"] .caret::after,
[data-toggle="collapse"].collapsed .caret::after { transform: scaleY(1); }
[data-toggle="collapse"][aria-expanded="false"] .caret::before,
[data-toggle="collapse"][aria-expanded="false"] .caret::after,
[data-toggle="collapse"].collapsed .caret::before,
[data-toggle="collapse"].collapsed .caret::after { background: var(--red-b); }

/* ============================================= HORIZONTAL OVERFLOW ======= */
/*
	Two things pushed the body wider than the viewport. Both are shrink
	failures, and both are fixed here rather than in customs/add.css, which
	is shared with the old template.

	1. The SkinPay charge modal is a flex row (.AccountChargeModal), and
	   customs/add.css gives .Modal width:auto from 1024px up. Flex children
	   default to min-width:auto, so the nav column and the section refused to
	   shrink and the row ran past the card between 1024 and 1440.
	2. <fieldset> carries min-inline-size:min-content in every browser, which
	   held the login form at its content width on a 390px phone.
*/
.Modal, .Modal .Modal_container { max-width: 100%; }
.AccountChargeModal { flex-wrap: wrap; }
.AccountChargeModal_navigation,
.AccountChargeModal_section,
.__vuescroll, .__panel, .__view { min-width: 0; max-width: 100%; }

fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }

/*
	Google renders reCAPTCHA at a fixed 304px, which is wider than a 360px
	phone once the container padding is taken off. The widget cannot be
	resized without breaking it, so it gets the treatment every other wide
	thing gets here: it scrolls inside its own box and the page body does not.
*/
.g-recaptcha,
.cf-turnstile {
	max-width: 100%;
	/* the iframe is inline, and its descender space was enough to make the
	   scroll box below spawn a vertical scrollbar of its own. */
	line-height: 0;
}
/*
	Only a phone narrower than the widget needs to scroll it, and it scrolls
	sideways only - overflow-x on its own computes overflow-y to auto too,
	which is where the second scrollbar came from.
*/
@media (max-width: 22rem) {
	.g-recaptcha,
	.cf-turnstile { overflow-x: auto; overflow-y: hidden; }
}

/* ------------------------------------------------- login / password forms --
	login, lostPassword and lostPasswordChange were a bootstrap 3 panel inside
	a bootstrap 4 card: a box drawn inside a box, so the form read as a little
	window floating in an empty page. The card is the box; the panel inside it
	is flattened to nothing.

	The column was a third of the card, which is narrower than the 304px
	reCAPTCHA renders at, so the widget got a scrollbar of its own on a screen
	with room to spare. The form is a fixed 20.5rem column instead - wide
	enough for the widget at every font step, sitting on the left directly
	under the line that tells you what to type.
*/
/*
	20.5rem was the Turnstile widget's width plus nothing, which is why every
	one of these forms read as a slot cut into an empty page: the fields were
	sized by the captcha rather than by the words above them. The floor stays
	(the widget still must not get a scrollbar of its own) but the ceiling is
	raised to a comfortable reading measure, so a login, a password reset and
	the paragraph explaining either of them all sit on lines you can read
	without the eye snapping back every four words.
*/
.csg-form-col {
	width: 100%;
	max-width: 32rem;
	min-width: 0;
	/* cancels the .row negative margin so the first field lines up with the
	   paragraph above it instead of hanging 7px further left. */
	margin: 0 0 0 0.4375rem;
}
.csg-form-col .login-panel,
.csg-form-col .panel {
	background: none;
	border: 0;
	box-shadow: none;
	margin: 0;
}
.csg-form-col .panel-body { padding: 0; }
.csg-form-col .form-group { margin-bottom: 0.625rem; }
.csg-form-col .g-recaptcha,
.csg-form-col .cf-turnstile { margin: 0.25rem 0 0; }
/* the <br> after the widget plus the button's own margin was a big gap. */
.csg-form-col .g-recaptcha + br,
.csg-form-col .cf-turnstile + br { display: none; }
.csg-form-col .custome { margin-top: 0.875rem; }

/* ------------------------------------------------- the .custome button --
   BUY / CHOOSE / LOGIN and friends. Carried over from the old Bootstrap
   theme: a big square block with four gradient hairlines chasing each other
   around the edge, one per <span> the templates already emit. Repainted in
   the shop's own red instead of the theme's #b02500.

   The :not() chain matches the specificity of the generic button rule above
   so these win on their own weight, not on source order alone. */
.custome:not(.navbar-toggler):not(.navbar-toggle) {
	position: relative;
	display: inline-block;
	overflow: hidden;
	font-family: var(--mono);
	font-size: 0.875rem;
	font-weight: bold;
	letter-spacing: 0.25rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--red-b);
	background: #000;
	border: 0;
	border-radius: 0;
	padding: 1.125rem 1.25rem;
	cursor: pointer;
	transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}
.custome:not(.navbar-toggler):not(.navbar-toggle):hover {
	color: #000;
	background: var(--red);
	border: 0;
	box-shadow: 0 0 0.3125rem var(--red-b), 0 0 0.625rem var(--red);
}

.custome span {
	position: absolute;
	display: block;
}
/* top, running left to right */
.custome span:nth-child(1) {
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, transparent, var(--red));
	animation: csg-edge-x 1s linear infinite;
}
@keyframes csg-edge-x {
	0%       { left: -100%; }
	50%,100% { left: 100%; }
}
/* right, running top to bottom */
.custome span:nth-child(2) {
	top: -100%; right: 0;
	width: 2px; height: 100%;
	background: linear-gradient(180deg, transparent, var(--red));
	animation: csg-edge-y 1s linear infinite;
	animation-delay: 0.25s;
}
@keyframes csg-edge-y {
	0%       { top: -100%; }
	50%,100% { top: 100%; }
}
/* bottom, running right to left */
.custome span:nth-child(3) {
	bottom: 0; right: -100%;
	width: 100%; height: 2px;
	background: linear-gradient(270deg, transparent, var(--red));
	animation: csg-edge-x-rev 1s linear infinite;
	animation-delay: 0.5s;
}
@keyframes csg-edge-x-rev {
	0%       { right: -100%; }
	50%,100% { right: 100%; }
}
/* left, running bottom to top */
.custome span:nth-child(4) {
	bottom: -100%; left: 0;
	width: 2px; height: 100%;
	background: linear-gradient(360deg, transparent, var(--red));
	animation: csg-edge-y-rev 1s linear infinite;
	animation-delay: 0.75s;
}
@keyframes csg-edge-y-rev {
	0%       { bottom: -100%; }
	50%,100% { bottom: 100%; }
}
/* The lines are decoration; hold them still for anyone who asked for that. */
@media (prefers-reduced-motion: reduce) {
	.custome span { animation: none; }
}

/*
	"Keep me signed in". It sits between the password and the captcha, reads
	as one line, and is quiet for the same reason the forgot link below is:
	the button is what the eye should land on.
*/
.csg-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--muted, #9c9492);
	cursor: pointer;
}
.csg-remember input {
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
	accent-color: var(--red, #b20e14);
	cursor: pointer;
}
.csg-remember label:hover {
	color: var(--text, #e8e2e1);
}

/*
	The forgot-password line under the login form. Quiet on purpose: it is
	the way out of a bad day, not a call to action, and it should never
	compete with the login button sitting right above it.
*/
.csg-forgot {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
}
.csg-forgot a {
	color: var(--muted, #9c9492);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}
.csg-forgot a:hover,
.csg-forgot a:focus {
	color: var(--red-b, #ff3d44);
	text-decoration: none;
}

/*
	The way out for an account with no e-mail on it: the recovery form. Set
	apart from the failed search above it by a rule, because it is not a
	restatement of the error - it is the next thing to do.
*/
.csg-recover {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--edge, #332a2b);
}
.csg-recover a.custome { display: inline-block; text-decoration: none; }
.csg-recover p {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--muted, #9c9492);
	line-height: 1.6;
}