/*
 * Client (user-facing) support frontend.
 * Shared layout and components; colours come from the per-game theme_*.css files.
 */

:root {
	--page-bg: #f3f4f6;
	--page-art: none;
	--page-art-w: 1920px;
	--page-art-h: 1000px;
	--page-art-fade: 300px;
	--surface: #ffffff;
	--surface-2: #f8f9fb;
	--border: #e5e7eb;
	--text: #1f2328;
	--muted: #667085;
	--heading: #111827;
	--link: #0b6fa4;
	--accent: #2563eb;
	--accent-hover: #1d4ed8;
	--accent-contrast: #ffffff;
	--accent-soft: rgba(37, 99, 235, .10);
	--input-bg: #ffffff;
	--input-border: #d0d5dd;
	--danger: #c0262d;
	--danger-soft: #fdecec;
	--success: #1f7a3f;
	--success-soft: #e8f6ee;
	--warning: #8a5a00;
	--warning-soft: #fff5db;
	--radius: 16px;
	--radius-sm: 10px;
	--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .10);
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	padding: 0;
	background: var(--page-bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { color: var(--heading); line-height: 1.25; margin: 0 0 .5em; }

img { max-width: 100%; height: auto; border: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }

fieldset { border: 0; margin: 0; padding: 0; }

.clear { clear: both; }

/* ---------- Page frame ---------- */

/* The art image fades into --page-bg at its bottom and side edges instead of ending hard */
.main-container {
	min-height: 100vh;
	padding: 28px 16px 40px;
	background:
		linear-gradient(to bottom, transparent calc(var(--page-art-h) - var(--page-art-fade)), var(--page-bg) var(--page-art-h))
			center top / 100% var(--page-art-h) no-repeat,
		linear-gradient(to right, var(--page-bg), transparent 12%, transparent 88%, var(--page-bg))
			center top / var(--page-art-w) var(--page-art-h) no-repeat,
		var(--page-art) center top / var(--page-art-w) var(--page-art-h) no-repeat;
}

.no-background,
.no-background .main-container {
	background-image: none !important;
}

#container {
	max-width: 1040px;
	margin: 0 auto;
}

#completeHeader {
	position: relative;
	z-index: 20;
	background: var(--surface);
	border: 1px solid var(--border);
	border-bottom: 0;
	border-radius: var(--radius) var(--radius) 0 0;
	box-shadow: var(--shadow);
}

#content {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	padding: 36px 40px 40px;
}

/* ---------- Header ---------- */

.site-header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 18px 28px;
}

#logo { display: block; flex: 0 0 auto; line-height: 0; }
#logo img { max-height: 64px; width: auto; }

.site-tagline {
	flex: 1 1 auto;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.site-tagline span { color: var(--accent); }

#languageChooser { flex: 0 0 auto; }
#languageChooser > span { color: inherit !important; }

/* msDropDown language picker */
#languageChooser .dd {
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	background: var(--input-bg);
}
#languageChooser .dd .ddTitle {
	background: transparent;
	color: var(--text);
	border-radius: var(--radius-sm);
}
#languageChooser .dd .ddTitle .ddTitleText { padding: 7px 28px 7px 10px; }
#languageChooser .dd .divider { display: none; }
#languageChooser .dd .ddChild {
	margin-top: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow);
	color: var(--text);
}
#languageChooser .dd .ddChild li { padding: 6px 10px; }
#languageChooser .dd .ddChild li.hover,
#languageChooser .dd .ddChild li:hover { background: var(--accent-soft); }
#languageChooser .dd .ddChild li.optgroup .optgroupTitle {
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 10px 2px;
}

/* Hamburger (mobile only) */
#hamburgerNav {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	cursor: pointer;
	position: relative;
}
#hamburgerNav span,
#hamburgerNav span::before,
#hamburgerNav span::after {
	position: absolute;
	left: 50%;
	width: 20px;
	height: 2px;
	margin-left: -10px;
	border-radius: 2px;
	background: var(--text);
	content: "";
}
#hamburgerNav span { top: 50%; margin-top: -1px; }
#hamburgerNav span::before { top: -6px; }
#hamburgerNav span::after { top: 6px; }

/* ---------- Navigation ---------- */

#nav {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 10px 24px;
	list-style: none;
	border-top: 1px solid var(--border);
	background: var(--surface-2);
}
#nav li { margin: 0; padding: 0; }
#nav li a {
	display: block;
	padding: 8px 16px;
	border-radius: 999px;
	color: var(--text);
	font-weight: 600;
	font-size: 14px;
	background-image: none;
}
#nav li a:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
#nav li a.active { background: var(--accent); color: var(--accent-contrast); }

/* Order the links the way a user reads them: Home, New Ticket, Status/My Tickets, FAQ, Forum, Log Out */
#nav li:has(a.home) { order: 1; }
#nav li:has(a.new_ticket) { order: 2; }
#nav li:has(a.ticket_status), #nav li:has(a.my_tickets) { order: 3; }
#nav li:has(a.faq) { order: 4; }
#nav li:has(a.forum) { order: 5; }
#nav li:has(a.log_out) { order: 6; margin-left: auto; }

#closeMenu { display: none; }

/* ---------- Footer ---------- */

.site-footer {
	padding: 24px 16px 8px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
}
.site-footer > * { margin: 0 0 10px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
#powered_by { display: inline-block; opacity: .75; }
#powered_by:hover { opacity: 1; }

.no-background .site-footer { color: var(--text); }

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
textarea {
	font: inherit;
	color: var(--text);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	max-width: 100%;
	transition: border-color .15s, box-shadow .15s;
}
input[type="file"] { padding: 8px; }
textarea { width: 100%; min-height: 160px; resize: vertical; line-height: 1.5; }

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }

.button, .button2,
#content input[type="submit"],
#content input[type="reset"],
#content input[type="button"] {
	display: inline-block;
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	padding: 11px 22px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent);
	color: var(--accent-contrast);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, transform .05s;
}
.button:hover, .button2:hover,
#content input[type="submit"]:hover {
	background: var(--accent-hover);
	border-color: var(--accent-hover);
}
.button:active, .button2:active, #content input[type="submit"]:active { transform: translateY(1px); }

/* Secondary actions (Reset / Cancel) */
#content input[type="reset"],
#content input[type="button"] {
	background: transparent;
	color: var(--text);
	border-color: var(--input-border);
}
#content input[type="reset"]:hover,
#content input[type="button"]:hover {
	background: var(--surface-2);
	border-color: var(--muted);
}

.error, font.error { color: var(--danger); font-size: 13px; font-weight: 600; }

/* ---------- Messages ---------- */

#errormessage, #infomessage, #warnmessage, .warnmessage {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	border-left-width: 4px;
	text-align: left !important;
	font-weight: 500;
}
#errormessage { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
#infomessage { background: var(--success-soft); border-color: var(--success); color: var(--success); }
#warnmessage, .warnmessage { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }

.msg { font-weight: 600; color: var(--heading); }

/* ---------- Landing page ---------- */

#index #top h1 { font-size: 30px; font-weight: 750; letter-spacing: -.01em; }
.big { font-size: 16px; color: var(--muted); max-width: 70ch; margin: 0 0 8px; }

#index > hr, #index > br { display: none; }

#bottom {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 28px;
}
#bottom .lcol, #bottom .rcol {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
#bottom br { display: none; }
#bottom .lcol form { margin-top: auto; padding-top: 18px; }
#bottom .card-icon {
	display: block;
	width: 48px;
	height: 48px;
	margin-bottom: 14px;
}
#bottom h3 { font-size: 20px; margin-bottom: 6px; }
#bottom span { color: var(--muted); }
#bottom form { margin-top: 18px; }

#bottom .status_form fieldset { margin-bottom: 12px; }
#bottom .status_form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
#bottom .status_form input[type="text"] { width: 100%; }
#bottom .status_form fieldset:last-child label { display: none; }

/* ---------- New ticket form ---------- */

#content form[action="open.php"] > table {
	float: none;
	width: 100% !important;
	border-collapse: collapse;
}
#content form[action="open.php"] > table th,
#content form[action="open.php"] > table tr > td:first-child:not([colspan]) {
	width: 210px;
	padding: 14px 20px 14px 0;
	text-align: left;
	vertical-align: top;
	font-weight: 600;
	color: var(--heading);
	white-space: normal;
}
#content form[action="open.php"] > table td { padding: 8px 0; vertical-align: top; }
#content form[action="open.php"] > table tr[height] td { padding: 0; line-height: 0; font-size: 0; }
#content form[action="open.php"] input[type="text"],
#content form[action="open.php"] select { width: 100%; max-width: 520px; }
#content form[action="open.php"] textarea { width: 100% !important; max-width: 720px; }
#content form[action="open.php"] .inputWithText span {
	display: block;
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
}
#content form[action="open.php"] .inputWithText input[type="checkbox"] + span { display: inline; margin-left: 6px; }
#content form[action="open.php"] altcha-widget { display: block; margin: 8px 0; }

/* Custom help-topic picker (Booty Calls open.inc.php) */
#jsSelectOuter {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 520px;
	vertical-align: middle;
}
#jsSelectBox {
	position: relative;
	min-height: 44px;
	padding: 10px 36px 10px 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-sm);
	background: var(--input-bg);
	color: var(--text);
	cursor: pointer;
}
#jsSelectBox::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -6px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg);
	pointer-events: none;
}
#jsSelect {
	display: none;
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	max-height: 360px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface);
	box-shadow: var(--shadow);
	color: var(--text);
}
#jsSelect ul { list-style: none; margin: 0 0 6px; padding: 0; }
#jsSelect .jsSelectGroup {
	padding: 8px 10px 4px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
#jsSelect .jsSelectOption {
	padding: 8px 10px;
	border-radius: 8px;
	cursor: pointer;
}
#jsSelect .jsSelectOption:hover,
#jsSelect .jsSelectOption[selected] { background: var(--accent-soft); color: var(--accent); }

/* ---------- Login / check status ---------- */

#loginContent { margin: 0 0 24px !important; }
#loginContent p { color: var(--muted); }
#loginContent form { margin-top: 20px; }
#loginContent table {
	margin: 0 auto;
	background: transparent;
	border-collapse: separate;
	border-spacing: 0;
}
#loginContent tr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 12px;
	padding: 20px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2) !important;
}
#loginContent td { padding: 0; font-weight: 600; }
#loginContent td input.button { margin: 0; }

/* ---------- Ticket list ---------- */

#tickets { margin: 0 !important; overflow-x: auto; }
#tickets > table:first-child td { padding: 0 0 16px; vertical-align: middle; }
#tickets > table:first-child td.msg { font-size: 20px; }
#tickets > table:first-child td.msg span { color: var(--muted); font-size: 14px; font-weight: 500; }
#tickets > table:first-child td:last-child { text-align: right; white-space: nowrap; }
#tickets > table:first-child td:last-child a {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
}
#tickets > table:first-child td:last-child a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
#tickets > table:first-child td:last-child img { width: 16px; height: 16px; padding-right: 6px !important; }

table.tgrid {
	width: 100%;
	min-width: 640px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
table.tgrid th {
	padding: 12px 14px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
}
table.tgrid th a { color: inherit; }
table.tgrid td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
	text-align: left !important;
}
table.tgrid tr:last-child td { border-bottom: 0; }
table.tgrid tr:hover td { background: var(--accent-soft); }
table.tgrid td a.Icon { font-weight: 600; }

/* ---------- Single ticket ---------- */

#viewTicket { margin-bottom: 8px; border-collapse: separate; border-spacing: 0; }
#viewTicket > tbody > tr > td { vertical-align: top; padding: 0 12px 12px 0; }
#viewTicket > tbody > tr:first-child td.msg { font-size: 24px; padding-bottom: 16px; }
#viewTicket .Icon.refresh::before { content: "\21bb"; font-size: 18px; margin-left: 6px; }

table.infotable {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-2);
}
table.infotable th, table.infotable td { padding: 10px 14px; text-align: left; }
table.infotable th { width: 1%; white-space: nowrap; color: var(--muted); font-size: 13px; font-weight: 600; }

#content > div.msg { font-size: 17px; margin: 12px 0 4px; }

.Icon.thread {
	display: block;
	margin: 8px 0 12px;
	color: var(--heading);
	font-size: 18px;
	font-weight: 700;
}

#ticketthread table.message,
#ticketthread table.response {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--surface);
}
#ticketthread table.response {
	border-left: 4px solid var(--accent);
}
#ticketthread th {
	padding: 10px 16px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}
#ticketthread table.response th { background: var(--accent-soft); color: var(--heading); }
#ticketthread tr.header td { padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
#ticketthread tr.info td { padding: 16px; line-height: 1.65; overflow-wrap: anywhere; }

#reply { padding: 24px 0 0 !important; }
#reply form > div { margin-bottom: 16px; }
#reply textarea { margin-top: 6px; }

/* ---------- Thank you ---------- */

#thankYouContent { margin: 0 !important; font-size: 16px; }
#thankYouContent p { max-width: 70ch; }

/* ---------- FAQ ---------- */

#faq { margin-top: 24px; }
#faq .faq-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
#faq section {
	padding: 22px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
#faq .groupTitle { font-size: 19px; margin: 0 0 10px; }
#faq .question {
	position: relative;
	margin: 0;
	padding: 12px 28px 12px 0;
	border-top: 1px solid var(--border);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
#faq .question::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 10px;
	color: var(--accent);
	font-size: 18px;
	font-weight: 700;
}
#faq .question:hover { color: var(--accent); }
#faq .answer {
	display: none;
	padding: 0 0 14px;
	color: var(--text);
}

/* ---------- Mobile ---------- */

@media (max-width: 800px) {
	.main-container { padding: 0 0 24px; background-image: none; }

	#completeHeader, #content {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		box-shadow: none;
	}
	#completeHeader { position: sticky; top: 0; border-top: 0; border-bottom: 1px solid var(--border); }

	.site-header { gap: 12px; padding: 10px 16px; }
	#logo img { max-height: 48px; }
	.site-tagline { display: none; }
	#logo { flex-shrink: 1; min-width: 0; }
	#logo img { max-width: 100%; }
	#languageChooser { margin-left: auto; min-width: 0; }
	#languageChooser .dd { width: 132px !important; max-width: 100%; }
	#languageChooser .dd .ddChild { width: 220px !important; right: 0; left: auto !important; }
	#hamburgerNav { display: block; }

	/* Off-canvas menu, opened by openMenu() in js/mobileMenu.js */
	#nav {
		display: none !important;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1001;
		width: min(82vw, 320px);
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 4px;
		padding: 20px 16px;
		border-top: 0;
		background: var(--surface);
		box-shadow: -12px 0 32px rgba(0, 0, 0, .25);
		overflow-y: auto;
	}
	#nav[style*="block"] { display: flex !important; }
	#nav li a { padding: 12px 16px; font-size: 16px; border-radius: var(--radius-sm); }
	#nav li:has(a.log_out) { margin-left: 0; margin-top: auto; }
	/* Below #completeHeader (z-index 20), whose stacking context holds the drawer */
	#closeMenu {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 19;
		background: rgba(0, 0, 0, .45);
	}

	#content { padding: 24px 16px 28px; }
	#index #top h1 { font-size: 24px; }
	#bottom, #faq .faq-row { grid-template-columns: 1fr; gap: 16px; }
	#bottom .lcol, #bottom .rcol, #faq section { padding: 20px; }

	#content form[action="open.php"] > table,
	#content form[action="open.php"] > table tbody,
	#content form[action="open.php"] > table tr,
	#content form[action="open.php"] > table th,
	#content form[action="open.php"] > table td { display: block; width: 100% !important; }
	#content form[action="open.php"] > table th,
	#content form[action="open.php"] > table tr > td:first-child:not([colspan]) { padding: 12px 0 4px; }
	#content form[action="open.php"] > table tr[style*="none"] { display: none; }
	#content form[action="open.php"] > table tr[height] { display: none; }
	/* the required-marker asterisk wraps under full-width fields; error texts stay visible */
	#content form[action="open.php"] .error > span { display: none; }

	.button, .button2,
	#content input[type="submit"],
	#content input[type="reset"],
	#content input[type="button"] { width: 100%; margin: 0 0 10px; }

	#loginContent tr { flex-direction: column; align-items: stretch; }
	#loginContent td input { width: 100%; }

	#tickets > table:first-child, #tickets > table:first-child tbody,
	#tickets > table:first-child tr, #tickets > table:first-child td { display: block; width: auto !important; }
	#tickets > table:first-child td:last-child { text-align: left; white-space: normal; }
	#tickets > table:first-child td:last-child a { margin: 0 6px 8px 0; }

	#viewTicket, #viewTicket > tbody, #viewTicket > tbody > tr, #viewTicket > tbody > tr > td { display: block; width: auto !important; }
	#viewTicket > tbody > tr > td { padding-right: 0; }
	table.infotable { width: 100%; }
}