/* Carpokes Header Dashboard - base image version */

/* Kill old Header Banner background/color behavior */
.headerbar,
.dashboard-header,
.headerbar .dashboard-header,
.headerbar .header-dashboard,
.headerbar .cp-headerdash-base-wrap,
.cp-headerdash-base-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
}

/* Also defeat inline background styles from ACP/config if present */
.headerbar[style],
.dashboard-header[style],
.header-dashboard[style] {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
}

/* Keep the phpBB/headerbar area from creating padding or horizontal scroll */
.headerbar {
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
}

/* Main dashboard wrapper */
.dashboard-header {
	position: relative;
	padding: 0 !important;
	margin: 0 auto !important;
	overflow: hidden !important;
}

.headerbar .header-dashboard {
	display: block !important;
	padding: 0 !important;
	margin: 0 auto !important;
	max-width: 100%;
	overflow: hidden !important;
}

/* Hide the original phpBB header identity block */
.headerbar #site-description,
.headerbar .site-description,
.headerbar h1,
.headerbar p.skiplink {
	display: none !important;
}

/* Keep our hidden accessibility block out of view */
.dashboard-header #hidden {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: -100;
}

/* Old IE fallback retained from original extension */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.headerbar .header-dashboard {
		width: 100% !important;
	}
}

/* Search box positions retained from original extension */
.headerdashboard-search-1 {
	top: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-2 {
	top: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-3 {
	bottom: 30px;
	left: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-4 {
	bottom: 30px;
	right: 30px;
	position: absolute;
	z-index: 5;
}

.headerdashboard-search-7 {
	bottom: -5px;
	left: 39%;
	position: absolute;
	z-index: 5;
}

/* Hide old mobile banner area from original extension */
.headerbar .mobile-header-dashboard {
	display: none !important;
}

/* Search styling retained from original extension */
.navbar #search-box {
	box-shadow: none;
	margin: auto;
	padding: 5px;
}

.rtl .navbar #search-box {
	float: left;
}

.navbar .button-search-end {
	border-radius: 0px 4px 4px 0px;
}

.rtl .navbar .button-search-end {
	border-radius: 4px 0px 0px 4px;
}

/* Base banner image wrapper */

.cp-headerdash-base-wrap {
	position: relative;
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: 10px auto 12px auto;
	line-height: 0;
	overflow: hidden;
	box-sizing: border-box;
}

/*
	Layer model:

	z-index 1 = photo windows BEHIND transparent PNG
	z-index 2 = base dashboard PNG
	z-index 3 = odometer digits ABOVE PNG
	z-index 4 = future SVG/CSS needles ABOVE PNG
	z-index 5 = full banner home link
	z-index 20 = store/terms links
*/

.cp-headerdash-base-image {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

/*
	Full-size positioning layer.

	Important: no z-index here.
	This lets child elements sit either below or above the base PNG.
	Photo windows use z-index: 1.
	Odometers use z-index: 3.
*/

.cp-headerdash-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------
   PHOTO WINDOW UNDERLAYS
   These sit BEHIND the transparent PNG openings.

   For calibration, the blue/yellow fill shows through the transparent
   openings. No red border, because the border was creating the red line
   at the bottom of the windows.
--------------------------------------------------------- */

.cp-photo-slot,
.cp-overlay-photo-1,
.cp-overlay-photo-2 {
	position: absolute;
	z-index: 1;
	box-sizing: border-box;
	overflow: hidden;
	border: 0;
	background: rgba(190, 220, 235, 0.82);
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	pointer-events: none;
}

.cp-photo-slot img,
.cp-overlay-photo-1 img,
.cp-overlay-photo-2 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Left transparent photo window - fine tuned */
.cp-photo-slot-left,
.cp-overlay-photo-1 {
	left: 23.0%;
	top: 30.7%;
	width: 26.7%;
	height: 50.8%;
}

/* Right transparent photo window - fine tuned */
.cp-photo-slot-right,
.cp-overlay-photo-2 {
	left: 50.7%;
	top: 30.7%;
	width: 26.7%;
	height: 50.8%;
}

/* ---------------------------------------------------------
   ODOMETER TEST OVERLAYS - PER-DIGIT DRUM VERSION

   Template should now use:

   <div class="cp-overlay-test cp-overlay-members cp-odo-drumset">
       <span>0</span><span>9</span><span>6</span><span>1</span><span>1</span>
   </div>

   <div class="cp-overlay-test cp-overlay-posts cp-odo-drumset">
       <span>5</span><span>7</span><span>5</span><span>2</span><span>3</span>
   </div>
--------------------------------------------------------- */

.cp-overlay-members,
.cp-overlay-posts,
.cp-odo-members,
.cp-odo-posts {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;
	white-space: nowrap;
	text-indent: 0;
	color: inherit;
	font-size: inherit;
	line-height: normal;
}

/* Members odometer position */
.cp-overlay-members,
.cp-odo-members {
	left: 6.9%;
	top: 67%;
	width: 9.15%;
	height: 5.15%;
}

/* Posts odometer position */
.cp-overlay-posts,
.cp-odo-posts {
	left: 84.3%;
	top: 67%;
	width: 9.15%;
	height: 5.15%;
}

/*
	Five physical-looking rolling drums.

	This avoids the old single browser-text overlay problem by styling
	each digit separately.
*/

.cp-odo-drumset {
	position: absolute;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;

	padding: 1px 3px;
	overflow: hidden;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(0, 0, 0, 0.28) 22%,
			rgba(0, 0, 0, 0.78) 50%,
			rgba(0, 0, 0, 0.42) 100%
		);

	border-radius: 1px;

	box-shadow:
		inset 0 1px 2px rgba(255, 255, 255, 0.045),
		inset 0 -1px 3px rgba(0, 0, 0, 0.95);
}

/* Individual odometer number wheels */
.cp-odo-drumset span {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;

	background:
		linear-gradient(
			to bottom,
			#171717 0%,
			#090909 23%,
			#000000 48%,
			#050505 72%,
			#111111 100%
		);

	border-radius: 1px;

	box-shadow:
		inset 1px 0 0 rgba(255, 255, 255, 0.030),
		inset -1px 0 0 rgba(0, 0, 0, 0.92),
		inset 0 1px 1px rgba(255, 255, 255, 0.030),
		inset 0 -1px 2px rgba(0, 0, 0, 0.95);

	color: #e6e1d0;

	font-family:
		"Arial Narrow",
		"Bahnschrift Condensed",
		"Helvetica Neue Condensed",
		"Roboto Condensed",
		Arial,
		sans-serif;

	font-size: clamp(9px, 1.28vw, 18px);
	font-weight: 500;
	font-stretch: condensed;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;

	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-indent: 0;

	transform: scaleY(1.08);
	transform-origin: center center;

	text-shadow:
		0 1px 1px #000,
		0 -1px 1px #000,
		1px 0 1px #000,
		-1px 0 1px #000;
}

/* Soft top/bottom mask so the whole strip sits inside the drum window */
.cp-odo-drumset::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.52) 0%,
			rgba(0, 0, 0, 0.06) 28%,
			rgba(0, 0, 0, 0.00) 44%,
			rgba(0, 0, 0, 0.00) 58%,
			rgba(0, 0, 0, 0.08) 72%,
			rgba(0, 0, 0, 0.55) 100%
		);
}

/*
	Very subtle individual drum curvature.
	This is intentionally light so it does not become flip-clock-like.
*/

.cp-odo-drumset span::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 0.020) 0%,
			rgba(255, 255, 255, 0.000) 32%,
			rgba(0, 0, 0, 0.22) 100%
		);
}

/*
	Top/bottom dimming on each individual digit.

	This makes each number look more like it is printed on a curved
	mechanical wheel instead of evenly lit browser text.
*/

.cp-odo-drumset span::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.34) 0%,
			rgba(0, 0, 0, 0.14) 20%,
			rgba(0, 0, 0, 0.00) 40%,
			rgba(0, 0, 0, 0.00) 60%,
			rgba(0, 0, 0, 0.14) 80%,
			rgba(0, 0, 0, 0.36) 100%
		);
}

/* Fallback if old .cp-odo text nodes are still present */
.cp-odo {
	position: absolute;
	z-index: 3;
	box-sizing: border-box;
	pointer-events: none;

	color: #dedbcc;
	font-family:
		"Arial Narrow",
		"Bahnschrift Condensed",
		"Helvetica Neue Condensed",
		Arial,
		sans-serif;
	font-size: clamp(9px, 1.24vw, 17px);
	font-weight: 500;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "tnum" 1, "lnum" 1;
	letter-spacing: 0.08em;
	line-height: 1;
	text-shadow: 0 1px 1px #000;
}

/* ---------------------------------------------------------
   NEEDLE PLACEHOLDERS FOR LATER
--------------------------------------------------------- */

.cp-needle {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	transform-origin: center bottom;
}

/* Members needle placeholder */
.cp-needle-members {
	left: 9.5%;
	top: 34.0%;
	width: 4.0%;
	height: 28.0%;
}

/* Posts needle placeholder */
.cp-needle-posts {
	left: 87.0%;
	top: 34.0%;
	width: 4.0%;
	height: 28.0%;
}

/* ---------------------------------------------------------
   LEGACY / CALIBRATION BOX SUPPORT
--------------------------------------------------------- */

.cp-overlay-test {
	position: absolute;
	box-sizing: border-box;
	pointer-events: none;
}

/*
	Optional calibration helper.
	Add this class only while aligning.
*/

.cp-calibrate {
	outline: 2px solid rgba(255, 0, 0, 0.95);
	background-color: rgba(255, 255, 0, 0.25);
}

/* ---------------------------------------------------------
   TRANSPARENT BANNER LINKS - TEMP CALIBRATION COLORS
   Remove the bright backgrounds/outlines after tuning.
--------------------------------------------------------- */

.cp-headerdash-link {
	position: absolute;
	display: block;
	pointer-events: auto;
	text-indent: -9999px;
	overflow: hidden;
}

/* Full banner click target back to Carpokes home */
.cp-headerdash-link-main {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;

	/* temporary calibration color */
	background: rgba(0, 80, 255, 0.10);
	outline: 2px dashed rgba(0, 80, 255, 0.55);
}

/* Store button click zone */
.cp-headerdash-link-store {
	left: 21.25%;
	top: 91.5%;
	width: 6.0%;
	height: 6.5%;
	z-index: 20;

	/* temporary calibration color */
	background: rgba(255, 0, 0, 0.45);
	outline: 2px solid red;
}

/* Terms button click zone */
.cp-headerdash-link-terms {
	left: 93.75%;
	top: 92%;
	width: 5.9%;
	height: 6.5%;
	z-index: 20;

	/* temporary calibration color */
	background: rgba(0, 255, 0, 0.45);
	outline: 2px solid lime;
}

/* Responsive */

@media only screen and (max-width: 900px) {
	.headerbar .header-dashboard {
		display: block !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 12px);
		max-width: 100%;
		margin: 8px auto 10px auto;
		overflow: hidden;
	}
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.headerbar .header-dashboard {
		display: block !important;
		border-radius: 0 !important;
	}

	.cp-headerdash-base-wrap {
		display: block !important;
		width: calc(100% - 8px) !important;
		max-width: 100% !important;
		margin: 6px auto 8px auto;
		overflow: hidden;
	}

	.cp-headerdash-base-image {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		border-radius: 6px;
	}

	.cp-headerdash-overlay {
		display: block !important;
	}

	.cp-photo-slot,
	.cp-overlay-photo-1,
	.cp-overlay-photo-2 {
		display: block !important;
	}

	.cp-odo-drumset span {
		font-size: clamp(6px, 1.18vw, 10px);
		transform: scaleY(1.04);
	}

	.cp-odo-drumset {
		gap: 1px;
		padding: 1px 2px;
	}
}