/* The support layer, and nothing else.

   Every page of this theme carries its own stylesheet inside its own template, exactly as the
   page does on staging — that is what makes the live page the same page. So this file holds
   only what belongs to no page in particular: the bits of markup PerfectPanel renders itself,
   dressed in our design instead of Bootstrap's.

   It must stay small. Anything that describes how a page looks belongs in that page's template,
   which is generated from the approved build by `Working website/Build scripts/build-theme.mjs`.

   Tokens come from the page (`--bg`, `--line`, `--neon`, `--err`, and the rest); the fallbacks
   are here so a panel screen we never designed still reads. */

/* ---------- what the panel toggles from JavaScript ---------- */
.hidden { display: none !important; }
/* The insistence is needed: this file loads before the stylesheet a page carries, so a plain
   `.sr-only` loses to any page rule that names an element — and a control meant to be out of
   sight would then take up room. */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0 !important;
}
.pull-right { float: right; }
.pull-left { float: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ---------- a tab that is a link ----------
   Some rows of tabs here change the page rather than the panel beneath them: the type of an order,
   the status of a list. On this panel those are separate routes, so the honest markup is a link —
   and a page's own stylesheet draws a tab as a button. This gives the link that same button. */
.cab-tabs a {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-card, #131731);
	color: var(--txt-soft, #9aa2cc);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 8px 15px;
	border-radius: 20px;
	white-space: nowrap;
	text-decoration: none;
	transition: color .2s, border-color .2s, background .2s, transform .12s ease, filter .12s ease;
}
@media (hover: hover) {
	.cab-tabs a:hover { color: var(--txt, #e9ecff); border-color: var(--violet, #8b7cff); }
}
.cab-tabs a:active { transform: scale(.96); filter: brightness(1.15); }
html.reduce-motion .cab-tabs a:active { transform: none; }
.cab-tabs a[aria-selected="true"] {
	color: #0b0e1d;
	background: linear-gradient(90deg, var(--violet, #8b7cff), var(--neon, #00e5ff));
	border-color: transparent;
}

/* ---------- notices ----------
   `#notify-wrapper` is the panel's own strip: it is emptied and shown for anything from a saved
   setting to a failed order, so it has to be legible on every page we draw. */
#notify-wrapper {
	position: fixed;
	z-index: 3000;
	right: 16px;
	bottom: 16px;
	max-width: min(420px, calc(100vw - 32px));
	padding: 13px 16px;
	border-radius: 13px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-card, #131731);
	color: var(--txt, #e9ecff);
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
#notify-wrapper.alert-success { border-color: rgba(47, 230, 167, .45); }
#notify-wrapper.alert-danger { border-color: rgba(255, 122, 138, .5); }

.alert {
	padding: 13px 16px;
	margin: 0 0 14px;
	border-radius: 13px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-soft, #181d3d);
	color: var(--txt, #e9ecff);
	font-size: 14px;
	line-height: 1.5;
}
.alert-success {
	border-color: rgba(47, 230, 167, .45);
	background: rgba(47, 230, 167, .08);
}
.alert-danger,
.alert-error {
	border-color: rgba(255, 122, 138, .5);
	background: rgba(255, 122, 138, .08);
}
.alert-warning {
	border-color: rgba(255, 180, 0, .45);
	background: rgba(255, 180, 0, .08);
}
.alert-info {
	border-color: rgba(0, 229, 255, .35);
	background: rgba(0, 229, 255, .06);
}
.alert a { color: var(--neon, #00e5ff); }
.alert .close {
	float: right;
	margin: -2px -4px 0 10px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--txt-soft, #9aa2cc);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
}
.alert .close:hover { color: var(--txt, #e9ecff); }

/* ---------- the panel's modal ----------
   Some confirmations are Bootstrap modals driven by the panel's own script. The markup has to
   stay for the script to work; the look does not. */
.modal {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	overflow-x: hidden;
	overflow-y: auto;
	background: rgba(4, 6, 16, .72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.modal.in { display: block; }
.modal-open { overflow: hidden; }
.modal-backdrop { display: none; }
.modal-dialog {
	width: min(520px, calc(100vw - 28px));
	margin: 6vh auto;
}
.modal-content {
	border-radius: 16px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-card, #131731);
	color: var(--txt, #e9ecff);
	box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
	overflow: hidden;
}
.modal-header,
.modal-footer {
	padding: 16px 18px;
	border-color: var(--line, #252b52);
}
.modal-header { border-bottom: 1px solid var(--line, #252b52); }
.modal-footer {
	border-top: 1px solid var(--line, #252b52);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
}
.modal-title { margin: 0; font-size: 18px; font-weight: 700; }
.modal-body { padding: 16px 18px; font-size: 14px; color: var(--txt-soft, #9aa2cc); }
.modal-header .close {
	float: right;
	border: 0;
	background: none;
	color: var(--txt-soft, #9aa2cc);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
}
.modal-header .close:hover { color: var(--txt, #e9ecff); }

/* ---------- paging ----------
   Orders, services and payment history are as long as the account is old, and the panel pages
   them with its own markup. */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.pagination > li > a,
.pagination > li > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-card, #131731);
	color: var(--txt-soft, #9aa2cc);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.pagination > li > a:hover {
	color: var(--neon, #00e5ff);
	border-color: var(--violet, #8b7cff);
}
.pagination > .active > a,
.pagination > .active > span {
	color: #0b0e1d;
	border-color: transparent;
	background: linear-gradient(90deg, var(--violet, #8b7cff), var(--neon, #00e5ff));
}
.pagination > .disabled > a,
.pagination > .disabled > span { opacity: .45; pointer-events: none; }

/* ---------- fields the panel writes itself ----------
   A ticket's subject decides what else is asked for, an order's service decides what a service needs,
   and both are written into the page by the panel when the choice is made. That markup cannot be
   rewritten, so it is dressed: the same border, the same radius, the same sixteen pixels our own
   fields use. Everything here is inside a card of the cabinet, so no public page can be touched by
   it. A page that needs more than this — the list the order form drops, say — says so in its own
   template. */
.cab-card .form-group { margin-bottom: 14px; }
.cab-card .form-group:last-child { margin-bottom: 0; }
.cab-card .form-group.hidden,
.cab-card .depend-fields.hidden { display: none; }
.cab-card .control-label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--txt-soft, #9aa2cc);
	letter-spacing: .2px;
	margin-bottom: 6px;
}
.cab-card .form-control {
	width: 100%;
	background: var(--bg-soft, #181d3d);
	border: 1px solid var(--line, #252b52);
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inherit;
	line-height: 1.5;
	color: var(--txt, #e9ecff);
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.cab-card textarea.form-control { min-height: 132px; resize: vertical; }
/* A list of the panel's own, given the box and the arrow our own lists have — the arrow is drawn
   rather than the browser's, so a select beside one of ours does not read as a different control. */
.cab-card select.form-control {
	height: 48px;
	padding: 0 38px 0 14px;
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--txt-soft, #9aa2cc) 50%), linear-gradient(135deg, var(--txt-soft, #9aa2cc) 50%, transparent 50%);
	background-position: right 19px center, right 13px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	cursor: pointer;
}
.cab-card select.form-control option { background: var(--bg-card, #131731); color: var(--txt, #e9ecff); }
.cab-card .form-control::placeholder { color: #6a72a3; }
.cab-card .form-control:focus {
	border-color: var(--violet, #8b7cff);
	box-shadow: 0 0 0 3px rgba(139, 124, 255, .16);
}
.cab-card .form-control[readonly] {
	background: var(--bg, #0b0e1d);
	color: var(--txt-soft, #9aa2cc);
	cursor: default;
}
/* A box the page has just refused, marked the way our own fields are marked. */
.cab-card .form-control.wrong { border-color: rgba(255, 122, 138, .6); }

/* A box the browser filled in itself is painted by the browser: Chrome and Safari put their own
   pale background on it and no property turns that off, so in a dark form the field goes white and
   the text in it is invisible until a character is rubbed out (owner's report, 2026-09-07 — an
   address pasted from the suggestion above the keyboard). What does cover it is an inset shadow as
   tall as the box in the box's own colour, and the text and the caret have to be named again
   because the browser paints those too.

   The site's own fields have had this since 2026-08-20; these are the panel's, drawn by it inside
   our cards with `form-control`, which no rule of ours reached. Same colours, same order as the
   paint above: the soft colour for a box that can be typed in, the page colour for one that
   cannot. */
.cab-card .form-control:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 200px var(--bg-soft, #181d3d);
	box-shadow: inset 0 0 0 200px var(--bg-soft, #181d3d);
}
/* Focus keeps its ring: the fill is one shadow, the ring is the next. */
.cab-card .form-control:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 200px var(--bg-soft, #181d3d), 0 0 0 3px rgba(139, 124, 255, .16);
	box-shadow: inset 0 0 0 200px var(--bg-soft, #181d3d), 0 0 0 3px rgba(139, 124, 255, .16);
}
.cab-card .form-control[readonly]:-webkit-autofill,
.cab-card .form-control:disabled:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 200px var(--bg, #0b0e1d);
	box-shadow: inset 0 0 0 200px var(--bg, #0b0e1d);
}
.cab-card .form-control:-webkit-autofill {
	-webkit-text-fill-color: var(--txt, #e9ecff);
	caret-color: var(--txt, #e9ecff);
}
/* Firefox marks its own with a picture and a filter rather than a colour. */
.cab-card .form-control:autofill {
	background-image: none;
	filter: none;
}
.cab-card .help-block {
	display: block;
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #6a72a3;
}
/* A row of two, and the field in it has already had its gap from the row. */
.cab-card .fld-row .form-group,
.cab-card .fld-row .form-group:last-child { margin-bottom: 0; }

/* On a phone our own fields stand 44px tall, and 42px on a screen too short to spare the room; the
   panel's kept their desktop size and stood six pixels taller than the field above them - the Order
   ID on a ticket beside our own boxes showed it plainly (owner, 2026-09-05). Staging's numbers, and
   the sixteen pixels of text stay: Safari zooms into anything smaller and never zooms back. */
@media (max-width: 767px) {
	.cab-card .form-group { margin-bottom: 12px; }
	.cab-card .control-label { font-size: 12px; margin-bottom: 5px; }
	.cab-card .form-control { padding: 9px 12px; }
}
@media (min-width: 768px) and (max-height: 430px) {
	.cab-card .control-label { font-size: 12px; margin-bottom: 4px; }
	.cab-card .form-control { padding: 8px 12px; }
}

/* The panel's tick box, drawn as the switch the rest of the site uses. */
.cab-card .form-group__checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cab-card .form-group__label-title {
	order: 1;
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--txt, #e9ecff);
	cursor: pointer;
}
.cab-card .form-group__checkbox-label {
	order: 2;
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}
.cab-card .form-group__checkbox-label input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.cab-card .checkmark {
	display: block;
	width: 40px;
	height: 22px;
	border-radius: 20px;
	border: 1px solid var(--line, #252b52);
	background: var(--bg-soft, #181d3d);
	pointer-events: none;
}
.cab-card .checkmark::after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: 2px;
	border-radius: 50%;
	background: var(--txt-soft, #9aa2cc);
	transition: transform .18s ease, background .18s ease;
}
.cab-card input:checked + .checkmark {
	background: linear-gradient(90deg, var(--violet, #8b7cff), var(--neon, #00e5ff));
	border-color: transparent;
}
.cab-card input:checked + .checkmark::after {
	transform: translateX(18px);
	background: #0b0e1d;
}
html.reduce-motion .cab-card .checkmark::after { transition: none; }

/* ---------- attaching a picture to a ticket ----------
   The panel's uploader is a hidden file input and a paperclip. Staging shows a box with a button in
   it and a word about what is attached, so the paperclip is given that box and that word.

   This is now the fallback: the ticket templates put staging's own control in front of this one and
   hide it, because the panel's button goes away with the first file attached and a second could
   never be added. What is drawn here is what the reader gets if the panel's uploader never starts,
   and it is the control that still does the uploading in either case. */
.cab-card .tickets-uploader .files-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 7px 10px;
	border: 1px solid var(--line, #252b52);
	border-radius: 12px;
	background: var(--bg-soft, #181d3d);
}
.cab-card .tickets-uploader #uploader-button { cursor: pointer; }
.cab-card .tickets-uploader .paperclip {
	gap: 8px;
	height: 34px;
	padding: 0 13px;
	border: 1px solid var(--line, #252b52);
	border-radius: 10px;
	background: var(--bg-card, #131731);
	color: var(--txt-soft, #9aa2cc);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
/* The plugin writes its own word beside the clip — «Choose files» — so a second one added here
   read as «Attach files Choose files» on the page. */
.cab-card .tickets-uploader .paperclip:hover {
	color: var(--txt, #e9ecff);
	border-color: var(--violet, #8b7cff);
}
.cab-card .tickets-uploader .paperclip svg { width: 18px; height: 18px; }
.cab-card .tickets-uploader .file-item,
.cab-card .tickets-uploader .files-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--txt-soft, #9aa2cc);
}

/* ---------- the panel's own icons ----------
   Font Awesome comes from outside the theme and the panel puts icons in menu rows it builds.
   Our header lists its own sections, so an icon that slips through should take no space. */
.nav-links-scroll i.fa,
.cab-nav i.fa { display: none; }

/* ---------- signing in with Google ----------
   Google draws its own button, inside an iframe of its own, and it cannot be restyled — a press
   has to land on that iframe or no sign-in happens. So the dialog keeps the button the site is
   drawn with and lays Google's over it, the same size and invisible: the reader sees ours, the
   press goes to Google's. Ours is out of the tab order and hidden from a screen reader, which
   reach Google's button instead and read its own label.

   The stand-alone sign-up card is drawn the same way, so both mounts sit inside a wrapper and a
   mount outside one is not something this theme puts on a page. */
.auth-google-wrap { position: relative; }
.auth-google-wrap .g_id_signin {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}
/* Google sizes its frame to the box it is given, so the box is the width of our button. */
.auth-google-wrap .g_id_signin > div { width: 100%; }