/* Doctorwow armory theme — matches warcry CMS dark + gold styling */

:root {
	--dw-bg: #070707;
	--dw-bg-card: rgba(0, 0, 0, 0.42);
	--dw-bg-elevated: rgba(255, 255, 255, 0.04);
	--dw-border: rgba(212, 175, 55, 0.2);
	--dw-border-strong: rgba(212, 175, 55, 0.42);
	--dw-gold: #d4af37;
	--dw-gold-dim: #9f741a;
	--dw-text: #cfc4a8;
	--dw-text-muted: #8c816d;
	--dw-online: #6ecf6e;
	--dw-offline: #c45c5c;
	--dw-radius: 12px;
	--dw-font-display: "Vazirmatn", Tahoma, Georgia, "Times New Roman", serif;
	--dw-font-body: "Vazirmatn", Tahoma, "Segoe UI", Arial, sans-serif;
}

html {
	background: var(--dw-bg);
	color: var(--dw-text);
	font-family: var(--dw-font-body);
}

body {
	background:
		radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.08), transparent 60%),
		var(--dw-bg);
	min-height: 100vh;
}

.section {
	padding: 0 16px 48px;
	max-width: 1280px;
	margin: 0 auto;
}

/* ── Top header ── */
.dw-armory-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(5, 5, 5, 0.92);
	border-bottom: 1px solid var(--dw-border);
	backdrop-filter: blur(10px);
	margin: 0 -16px 28px;
	padding: 0 16px;
}

.dw-armory-header__inner {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 14px 0;
}

.dw-armory-header__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.dw-armory-header__logo {
	font-family: var(--dw-font-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--dw-gold) !important;
	text-decoration: none !important;
	letter-spacing: 0.02em;
}

.dw-armory-header__logo:hover {
	color: #f0d060 !important;
}

.dw-armory-header__tag {
	font-size: 0.72rem;
	color: var(--dw-text-muted);
	letter-spacing: 0.04em;
}

.dw-armory-header__nav {
	display: flex;
	gap: 8px;
	flex: 1;
	justify-content: flex-start;
}

.dw-armory-header[dir="rtl"] .dw-armory-header__nav {
	justify-content: flex-start;
}

.dw-armory-nav-link {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 8px;
	color: var(--dw-text) !important;
	text-decoration: none !important;
	font-size: 0.92rem;
	border: 1px solid transparent;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.dw-armory-nav-link:hover {
	background: var(--dw-bg-elevated);
	border-color: var(--dw-border);
	color: var(--dw-gold) !important;
}

.dw-armory-nav-link.is-active {
	background: rgba(212, 175, 55, 0.1);
	border-color: var(--dw-border-strong);
	color: var(--dw-gold) !important;
	font-weight: 600;
}

.dw-armory-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 10px 18px;
	border-radius: 10px;
	text-decoration: none !important;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: filter 0.15s, transform 0.1s;
}

.dw-armory-btn:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.dw-armory-btn--site {
	background: linear-gradient(180deg, #d7b842 0%, #9f741a 100%);
	color: #1b1207 !important;
	border: 1px solid rgba(255, 220, 120, 0.35);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.dw-armory-btn__fa {
	font-size: 0.82rem;
}

.dw-armory-btn__en {
	font-size: 0.72rem;
	opacity: 0.85;
	font-weight: 600;
}

/* ── Page cards ── */
.dw-page-card {
	background: var(--dw-bg-card);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	padding: 24px;
	margin-bottom: 20px;
}

.dw-page-title {
	font-family: var(--dw-font-display);
	color: var(--dw-gold);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 8px;
}

.dw-page-lead {
	color: var(--dw-text-muted);
	margin: 0 0 20px;
	font-size: 0.95rem;
}

/* ── Character header ── */
.dw-char-header {
	margin-bottom: 20px;
}

.dw-char-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.dw-char-tab {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--dw-bg-elevated);
	border: 1px solid rgba(255, 255, 255, 0.06);
	color: var(--dw-text) !important;
	text-decoration: none !important;
	font-size: 0.9rem;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.dw-char-tab:hover {
	border-color: var(--dw-border);
	color: var(--dw-gold) !important;
}

.dw-char-tab.is-active {
	background: rgba(212, 175, 55, 0.12);
	border-color: var(--dw-border-strong);
	color: var(--dw-gold) !important;
	font-weight: 600;
}

.dw-char-identity {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 24px;
	padding: 18px 20px;
	background: var(--dw-bg-card);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
}

.dw-char-name {
	font-family: var(--dw-font-display);
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 0 !important;
	line-height: 1.1;
}

.dw-char-guild {
	font-size: 1.1rem !important;
	margin: 0 !important;
}

.dw-char-guild a {
	color: #7eb8ff !important;
	text-decoration: none !important;
}

.dw-char-guild a:hover {
	text-decoration: underline !important;
}

.dw-char-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	align-items: center;
	color: var(--dw-text-muted);
	font-size: 0.95rem;
}

.dw-char-meta strong {
	color: var(--dw-text);
	font-weight: 600;
}

.dw-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 600;
}

.dw-status--online {
	background: rgba(110, 207, 110, 0.12);
	color: var(--dw-online);
	border: 1px solid rgba(110, 207, 110, 0.35);
}

.dw-status--offline {
	background: rgba(196, 92, 92, 0.12);
	color: var(--dw-offline);
	border: 1px solid rgba(196, 92, 92, 0.35);
}

.dw-status__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

/* Class-colored character names */
.dw-class-1 .dw-char-name { color: #c69b6d; }
.dw-class-2 .dw-char-name { color: #f48cba; }
.dw-class-3 .dw-char-name { color: #aad372; }
.dw-class-4 .dw-char-name { color: #fff468; }
.dw-class-5 .dw-char-name { color: #fff; }
.dw-class-6 .dw-char-name { color: #c41e3a; }
.dw-class-7 .dw-char-name { color: #2359ff; }
.dw-class-8 .dw-char-name { color: #68ccef; }
.dw-class-9 .dw-char-name { color: #9382c9; }
.dw-class-11 .dw-char-name { color: #ff7c0a; }

/* ── Model area ── */
#model-container {
	background: var(--dw-bg-card);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	padding: 12px 8px 4px;
	margin-bottom: 16px;
	overflow: hidden;
}

#model {
	min-height: 420px;
}

#equipment-bottom {
	margin-bottom: 16px;
}

/* ── Controls ── */
#3d-viewer-options {
	background: var(--dw-bg-card);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	padding: 16px 20px;
	margin-top: 0 !important;
}

#3d-viewer-options .checkbox {
	color: var(--dw-text);
	margin-bottom: 8px;
}

#3d-viewer-options .button.is-primary,
.dw-armory-btn--action {
	background: linear-gradient(180deg, #d7b842 0%, #9f741a 100%) !important;
	border: none !important;
	color: #1b1207 !important;
	font-weight: 700;
	border-radius: 8px !important;
}

#3d-viewer-options .button.is-primary:hover {
	filter: brightness(1.05);
}

#3d-viewer-options .box,
#list-transmogs.box,
#mounts.box {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--dw-border);
	color: var(--dw-text);
}

/* ── DataTables (search page) ── */
#select-realm-container .realm-label {
	color: var(--dw-text-muted);
}

#select-realm-container .select select {
	background: #0b0b0b;
	border-color: var(--dw-border);
	color: var(--dw-text);
	border-radius: 8px;
}

table.dataTable {
	border-collapse: separate !important;
	border-spacing: 0;
	width: 100% !important;
}

table.dataTable thead th,
table.dataTable thead td {
	/* Use background-color only — shorthand `background` resets
	   background-repeat to repeat and tiles DataTables sort PNGs. */
	background-color: rgba(212, 175, 55, 0.1) !important;
	background-image: none !important;
	color: var(--dw-gold) !important;
	border-bottom: 1px solid var(--dw-border) !important;
	padding: 12px 18px !important;
	font-family: var(--dw-font-display);
	text-align: center !important;
	vertical-align: middle !important;
	position: relative;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
	cursor: pointer;
	background-image: none !important;
	background-repeat: no-repeat !important;
}

table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
	background-color: rgba(212, 175, 55, 0.2) !important;
	color: #f0d060 !important;
}

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
	background-color: rgba(212, 175, 55, 0.22) !important;
	box-shadow: inset 0 -2px 0 var(--dw-gold);
	color: #f0d060 !important;
}

/* Clean CSS sort chevrons instead of CDN PNG sprites */
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 8px;
	vertical-align: middle;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	opacity: 0.45;
}

table.dataTable thead th.sorting:after {
	border-top: 5px solid currentColor;
	border-bottom: none;
	opacity: 0.3;
}

table.dataTable thead th.sorting_asc:after {
	border-bottom: 5px solid currentColor;
	border-top: none;
	opacity: 0.95;
}

table.dataTable thead th.sorting_desc:after {
	border-top: 5px solid currentColor;
	border-bottom: none;
	opacity: 0.95;
}

table.dataTable tbody td {
	background-color: rgba(255, 255, 255, 0.02) !important;
	background-image: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
	color: var(--dw-text) !important;
	padding: 11px 14px !important;
	vertical-align: middle !important;
	text-align: center !important;
}

table.dataTable tbody tr:hover td {
	background: rgba(212, 175, 55, 0.06) !important;
}

table.dataTable tbody tr.dw-char-row {
	cursor: pointer;
}

table.dataTable tbody tr.dw-char-row:hover td {
	background: rgba(212, 175, 55, 0.11) !important;
}

.dw-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1;
	border: 1px solid transparent;
}

.dw-status__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}

.dw-status--online {
	color: #b7efb7;
	background: rgba(110, 207, 110, 0.12);
	border-color: rgba(110, 207, 110, 0.28);
}

.dw-status--online .dw-status__dot {
	background: #6ecf6e;
	box-shadow: 0 0 8px rgba(110, 207, 110, 0.7);
}

.dw-status--offline {
	color: #efb7b7;
	background: rgba(196, 92, 92, 0.12);
	border-color: rgba(196, 92, 92, 0.28);
}

.dw-status--offline .dw-status__dot {
	background: #c45c5c;
}

table.dataTable a {
	color: var(--dw-gold) !important;
	text-decoration: none !important;
	font-weight: 600;
}

table.dataTable a:hover {
	text-decoration: underline !important;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	background: #0b0b0b !important;
	border: 1px solid var(--dw-border) !important;
	color: var(--dw-text) !important;
	border-radius: 8px !important;
	padding: 6px 10px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
	color: var(--dw-text-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--dw-text) !important;
	border-radius: 6px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: rgba(212, 175, 55, 0.2) !important;
	border-color: var(--dw-border-strong) !important;
	color: var(--dw-gold) !important;
}

#results_processing {
	color: var(--dw-text-muted);
}

/* ── Guild page ── */
#guild-header {
	background: var(--dw-bg-card);
	border: 1px solid var(--dw-border);
	border-radius: var(--dw-radius);
	padding: 20px;
	margin-bottom: 20px;
}

/* ── Error page ── */
.dw-error-page {
	text-align: center;
	padding: 48px 24px;
}

.dw-error-page .title {
	color: var(--dw-gold) !important;
	font-family: var(--dw-font-display);
}

.dw-error-page .subtitle {
	color: var(--dw-text-muted) !important;
}

.dw-error-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}

/* ── Links ── */
a {
	color: #7eb8ff;
}

.title {
	color: var(--dw-gold);
}

.subtitle {
	color: var(--dw-text-muted);
}

.dw-search-toolbar {
	margin-bottom: 16px;
}

#select-arena-type-container {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

#select-arena-type-container .arena-type-label {
	color: var(--dw-text-muted);
}
@media (max-width: 768px) {
	.dw-armory-header__inner {
		flex-direction: column;
		align-items: stretch;
	}

	.dw-armory-header__nav {
		order: 3;
	}

	.dw-armory-btn--site {
		width: 100%;
	}

	#model {
		min-height: 320px;
	}

	.dw-char-identity {
		flex-direction: column;
		align-items: flex-start;
	}
}