/*
 * Dose Easy HUD primitives.
 * Colours and fonts come from Elementor Global Colors / Fonts (CSS variables
 * Elementor prints for the active kit), with fallbacks for non-Elementor pages.
 * Utility classes are applied from Elementor > Advanced > CSS Classes.
 */
:root {
	--de-bg: var(--e-global-color-de_bg, #030608);
	--de-panel: var(--e-global-color-de_panel, #071116);
	--de-line: var(--e-global-color-de_line, #12404a);
	--de-cyan: var(--e-global-color-primary, #2ee6f0);
	--de-cyan-dim: var(--e-global-color-secondary, #0fa3b1);
	--de-text: var(--e-global-color-text, #e6fbff);
	--de-muted: var(--e-global-color-de_muted, #8fb3ba);
	--de-amber: var(--e-global-color-accent, #ffb547);
	--de-mono: var(--e-global-typography-de_mono-font-family, "JetBrains Mono"), ui-monospace, monospace;
	--de-display: var(--e-global-typography-primary-font-family, "Chakra Petch"), system-ui, sans-serif;
	--de-body: var(--e-global-typography-text-font-family, "IBM Plex Sans"), system-ui, sans-serif;
}

/* ---------- frame with cut corners + corner brackets (the card in the reference) ---------- */
.de-hud-frame {
	position: relative;
	background: linear-gradient(180deg, rgba(46, 230, 240, 0.035), rgba(46, 230, 240, 0) 40%), var(--de-panel);
	clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
	isolation: isolate;
}
.de-hud-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	padding: 1px;
	background: linear-gradient(135deg, var(--de-cyan) 0 8%, var(--de-line) 20% 80%, var(--de-cyan) 92% 100%);
	clip-path: inherit;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: -1;
}

/* small mono label like "07_LEVEL_SYSTEM" */
.de-hud-label .elementor-heading-title,
.de-hud-label {
	font-family: var(--de-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--de-cyan);
}

/* tick rail along an edge, as in the reference card's side markings */
.de-tick-rail { position: relative; }
.de-tick-rail::after {
	content: "";
	position: absolute;
	top: 12%;
	bottom: 12%;
	right: 10px;
	width: 6px;
	background: repeating-linear-gradient(180deg, var(--de-cyan) 0 2px, transparent 2px 9px);
	opacity: 0.45;
	pointer-events: none;
}

/* dotted/grid background for full sections */
.de-grid-bg {
	background-color: var(--de-bg);
	background-image:
		radial-gradient(rgba(46, 230, 240, 0.16) 1px, transparent 1.2px),
		linear-gradient(rgba(46, 230, 240, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(46, 230, 240, 0.045) 1px, transparent 1px);
	background-size: 22px 22px, 88px 88px, 88px 88px;
	background-position: 0 0, -1px -1px, -1px -1px;
}

.de-glow-text .elementor-heading-title,
.de-glow-text .elementor-counter-number-wrapper {
	color: var(--de-cyan);
	text-shadow: 0 0 18px rgba(46, 230, 240, 0.55), 0 0 2px rgba(46, 230, 240, 0.9);
}

/* ---------- Elementor Progress Bar restyled as segmented HUD bars ---------- */
.de-hud-bars .elementor-title,
.de-hud-bars .elementor-progress-percentage {
	font-family: var(--de-mono);
	color: var(--de-cyan);
	letter-spacing: 0.06em;
}
.de-hud-bars .elementor-progress-wrapper {
	height: 12px;
	border: 1px solid var(--de-cyan-dim);
	border-radius: 0;
	background: transparent;
	padding: 2px;
	box-sizing: border-box;
}
.de-hud-bars .elementor-progress-bar {
	height: 100%;
	line-height: 1;
	border-radius: 0;
	background: repeating-linear-gradient(90deg, var(--de-cyan) 0 2px, transparent 2px 4px) !important;
	box-shadow: 0 0 10px rgba(46, 230, 240, 0.35);
}
.de-hud-bars .elementor-progress-text { display: none; }
/* Elementor draws the percentage inside the bar, where the stripes make it unreadable:
   lift it onto the title row, right-aligned, as in the reference */
.de-hud-bars { position: relative; }
.de-hud-bars .elementor-progress-wrapper,
.de-hud-bars .elementor-progress-bar { position: static; }
.de-hud-bars .elementor-progress-percentage {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 14px;
	line-height: 1.4;
}

/* buttons in HUD style never break mid-label */
.de-btn .elementor-button { white-space: nowrap; }

/* ---------- 3D scene ---------- */
.de-hud-scene {
	position: relative;
	width: 100%;
	height: var(--de-scene-h, 620px);
	min-height: 360px;
	overflow: hidden;
	touch-action: pan-y;
}
.de-hud-scene__stage,
.de-hud-scene__stage canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	display: block;
}
.de-hud-scene__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.6s ease;
}
.de-hud-scene.is-ready .de-hud-scene__poster { opacity: 0; pointer-events: none; }
.de-hud-scene.is-fallback .de-hud-scene__stage { display: none; }
.de-hud-scene__caption {
	position: absolute;
	left: 12px;
	bottom: 10px;
	margin: 0;
	font: 500 11px/1.4 var(--de-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--de-muted);
}
@media (max-width: 767px) {
	.de-hud-scene { height: var(--de-scene-h-mobile, 440px); }
}

/* ---------- reconstitution calculator ---------- */
.de-calc { font-family: var(--de-mono); color: var(--de-text); }
.de-calc__grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .de-calc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .de-calc__grid { grid-template-columns: 1fr; } }
.de-calc label { display: block; font-size: 13px; letter-spacing: 0.06em; color: var(--de-text); margin-bottom: 6px; }
.de-calc input[type="text"],
.de-calc select {
	/* [type] beats Hello Elementor's input[type=text] rule, which shrank inputs to 37px beside the 48px select */
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	background: var(--de-bg);
	color: var(--de-text);
	border: 1px solid var(--de-line);
	border-radius: 0;
	padding: 12px 12px;
	font: 500 16px/1.2 var(--de-mono);
}
.de-calc input[type="text"]:focus-visible,
.de-calc select:focus-visible { outline: 2px solid var(--de-cyan); outline-offset: 1px; border-color: var(--de-cyan); }
.de-calc__out { margin-top: 22px; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--de-line); border: 1px solid var(--de-line); }
.de-calc__cell { background: var(--de-panel); padding: 14px; }
.de-calc__cell span { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--de-muted); }
.de-calc__cell strong { display: block; margin-top: 6px; font: 600 26px/1.1 var(--de-display); color: var(--de-cyan); }
.de-calc__msg { min-height: 1.4em; margin: 14px 0 0; font-size: 13px; color: var(--de-amber); }
.de-calc__note { margin: 14px 0 0; max-width: 75ch; font: 14px/1.6 var(--de-body, inherit); color: var(--de-text); }
.de-calc [hidden] { display: none !important; }
/* syringe / nasal-spray switch: two boxed options in the button language */
.de-calc__mode { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 0 20px; padding: 0; border: 0; }
.de-calc__mode legend { float: left; margin: 0 16px 0 0; padding: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--de-muted); text-transform: uppercase; }
.de-calc__mode label { display: inline-flex; margin: 0; cursor: pointer; }
.de-calc__mode input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.de-calc__mode span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border: 1px solid var(--de-line); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--de-text); }
.de-calc__mode label + label span { border-left: 0; }
.de-calc__mode input:checked + span { background: var(--de-cyan); border-color: var(--de-cyan); color: var(--de-bg); }
.de-calc__mode input:focus-visible + span { outline: 2px solid var(--de-cyan); outline-offset: 2px; }
@media (max-width: 767px) {
	.de-calc__mode legend { float: none; width: 100%; margin: 0 0 8px; }
	.de-calc__mode label { flex: 1 1 0; }
	.de-calc__mode span { width: 100%; justify-content: center; padding: 0 12px; }
}
/* amount + unit share one field row */
.de-calc__pair { display: flex; }
.de-calc__pair input[type="text"] { flex: 1 1 auto; min-width: 0; }
.de-calc .de-calc__pair select { flex: 0 0 84px; width: 84px; border-left: 0; }

/* ---------- motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
	.de-hud-bars .elementor-progress-bar { transition: none !important; }
}

/* ---------- buttons with a cut corner (add class de-btn — the section library does) ---------- */
.de-btn .elementor-button {
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.de-btn .elementor-button:hover { filter: drop-shadow(0 0 10px rgba(46, 230, 240, 0.45)); }
.de-btn .elementor-button:focus-visible { outline: 2px solid var(--de-cyan); outline-offset: 3px; }
/* outline buttons: the clip-path cuts the border off at the two chamfers, which read as a broken
   border — draw the chamfer edges back in, just inside the cut */
.de-btn--ghost .elementor-button {
	background-image:
		linear-gradient(to bottom right, transparent 50%, var(--de-cyan) 50%, var(--de-cyan) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
		linear-gradient(to top left, transparent 50%, var(--de-cyan) 50%, var(--de-cyan) calc(50% + 1.2px), transparent calc(50% + 1.2px));
	background-size: 10px 10px, 10px 10px;
	background-position: left top, right bottom;
	background-repeat: no-repeat;
	background-origin: border-box;
}
/* buttons in a stacked group share one width and one left edge */
.de-btn-stack { align-items: stretch; }
.de-btn-stack .de-btn .elementor-button { width: 100%; justify-content: center; }

/* ---------- long-form text (policies) ---------- */
.de-prose h2, .de-prose h3 { font-family: var(--de-display); color: var(--de-text); margin: 1.6em 0 0.5em; }
.de-prose a { color: var(--de-cyan); text-underline-offset: 3px; }
.de-prose ul { padding-left: 1.2em; }

/* ================= site-wide consistency pass (QA 2026-10-29) ================= */

/* one button system: same height, same minimum width, label centred */
.de-btn .elementor-button { min-height: 48px; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
@media (max-width: 767px) {
	/* button groups stack full width on phones, so pairs line up and centred sections stay centred */
	.de-btn-group { width: 100%; align-items: stretch; }
	.de-btn-group .de-btn, .de-btn-group .de-btn .elementor-button { width: 100%; }
}

/* pricing: equal-height cards, button pinned to the bottom and sized like the header CTA, hanging indent on features */
.elementor-widget-price-table.de-hud-frame { height: 100%; }
.elementor-widget-price-table.de-hud-frame .elementor-price-table { height: 100%; display: flex; flex-direction: column; background: var(--de-panel); }
.elementor-widget-price-table.de-hud-frame .elementor-price-table__footer { margin-top: auto; display: flex; justify-content: center; padding: 40px 24px 32px; }
.elementor-widget-price-table.de-hud-frame .elementor-price-table__button { width: auto; min-width: 240px; min-height: 56px; padding: 0 32px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
@media (max-width: 767px) { .elementor-widget-price-table.de-hud-frame .elementor-price-table__button { width: 100%; min-width: 0; } }
.elementor-price-table__feature-inner { display: flex; gap: 10px; align-items: flex-start; text-align: start; }
.elementor-price-table__feature-inner i, .elementor-price-table__feature-inner svg { flex: 0 0 auto; margin-top: 0.25em; }

/* forms (Elementor Pro): one 48px field style, HUD submit button, visible checkbox */
.de-form .elementor-field-textual, .de-form select.elementor-field { min-height: 48px; border-radius: 0; font-family: var(--de-body, inherit); }
.de-form .elementor-field-type-acceptance .elementor-field-subgroup { display: flex; align-items: center; min-height: 44px; }
.de-form input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--de-cyan); margin-right: 10px; }
.de-form .elementor-mark-required .elementor-field-label::after { color: var(--de-cyan); }
.de-form .elementor-button { min-height: 48px; border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }

/* lists: icon sits on the first line of a wrapped item */
.de-list { --icon-vertical-align: flex-start; --icon-vertical-offset: 0.55em; } /* Elementor's own icon-list vars */
.de-list .elementor-icon-list-item { align-items: flex-start; }
@media (max-width: 767px) { .de-footer-links .elementor-icon-list-item { padding: 7px 0; } }

/* accordion: room between the +/- icon and the question */
.elementor-accordion .elementor-accordion-icon { margin-right: 14px; }

/* hero bars: percentage flush with the bar end */
.de-hud-bars .elementor-progress-percentage { padding: 0; }

/* tick rail would collide with text on phones */
@media (max-width: 767px) { .de-tick-rail::after { display: none; } }

/* 3D scene: cap the height below desktop so it doesn't eat the screen */
@media (max-width: 1024px) and (min-width: 768px) { .de-hud-scene { height: min(var(--de-scene-h, 620px), 480px); } }

/* readable long-form text and notes */
.de-prose { max-width: 760px; }
.de-prose h2 { font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; }
.de-prose h3 { font-size: 19px; }
.de-note { max-width: 720px; margin-inline: auto; }

/* ================= line icons (QA 2026-10-29) =================
   Elementor prints Font Awesome as inline <svg class="e-fas-NAME">. For the names below, hide the FA
   paths and paint the matching doseeasy-hud line icon (assets/icons/*.svg) through a mask, so every
   widget keeps its normal FA setting in the editor but the site shows one consistent thin-line set. */
:is(svg.e-fas-user-slash, svg.e-fas-mobile-alt, svg.e-fas-trash-alt, svg.e-fas-trash, svg.e-fas-fingerprint, svg.e-fas-envelope, svg.e-fas-check-circle, svg.e-fas-lock, svg.e-fas-file-export, svg.e-fas-check, svg.e-fas-angle-right, svg.e-fas-plus, svg.e-fas-minus, svg.e-fas-vial, svg.e-fas-calculator, svg.e-fas-calendar-alt, svg.e-fas-bell, svg.e-fas-book, svg.e-fas-shield-alt, svg.e-fas-clock, svg.e-fas-chart-line, svg.e-fas-truck, svg.e-fas-flask, svg.e-fas-image, svg.e-fas-layer-group, svg.e-fas-tasks) {
	background-color: var(--de-cyan);
	-webkit-mask: var(--de-ico) center / contain no-repeat;
	mask: var(--de-ico) center / contain no-repeat;
}
:is(svg.e-fas-user-slash, svg.e-fas-mobile-alt, svg.e-fas-trash-alt, svg.e-fas-trash, svg.e-fas-fingerprint, svg.e-fas-envelope, svg.e-fas-check-circle, svg.e-fas-lock, svg.e-fas-file-export, svg.e-fas-check, svg.e-fas-angle-right, svg.e-fas-plus, svg.e-fas-minus, svg.e-fas-vial, svg.e-fas-calculator, svg.e-fas-calendar-alt, svg.e-fas-bell, svg.e-fas-book, svg.e-fas-shield-alt, svg.e-fas-clock, svg.e-fas-chart-line, svg.e-fas-truck, svg.e-fas-flask, svg.e-fas-image, svg.e-fas-layer-group, svg.e-fas-tasks) > * { display: none; }
svg.e-fas-user-slash { --de-ico: url("../icons/user-off.svg"); }
svg.e-fas-mobile-alt { --de-ico: url("../icons/phone.svg"); }
svg.e-fas-trash-alt { --de-ico: url("../icons/trash.svg"); }
svg.e-fas-trash { --de-ico: url("../icons/trash.svg"); }
svg.e-fas-fingerprint { --de-ico: url("../icons/face-id.svg"); }
svg.e-fas-envelope { --de-ico: url("../icons/mail.svg"); }
svg.e-fas-check-circle { --de-ico: url("../icons/check-circle.svg"); }
svg.e-fas-lock { --de-ico: url("../icons/lock.svg"); }
svg.e-fas-file-export { --de-ico: url("../icons/export.svg"); }
svg.e-fas-check { --de-ico: url("../icons/check.svg"); }
svg.e-fas-angle-right { --de-ico: url("../icons/chevron.svg"); }
svg.e-fas-plus { --de-ico: url("../icons/plus.svg"); }
svg.e-fas-minus { --de-ico: url("../icons/minus.svg"); }
svg.e-fas-vial { --de-ico: url("../icons/vial.svg"); }
svg.e-fas-calculator { --de-ico: url("../icons/calculator.svg"); }
svg.e-fas-calendar-alt { --de-ico: url("../icons/calendar.svg"); }
svg.e-fas-bell { --de-ico: url("../icons/bell.svg"); }
svg.e-fas-book { --de-ico: url("../icons/journal.svg"); }
svg.e-fas-shield-alt { --de-ico: url("../icons/shield.svg"); }
svg.e-fas-clock { --de-ico: url("../icons/clock.svg"); }
svg.e-fas-chart-line { --de-ico: url("../icons/chart.svg"); }
svg.e-fas-truck { --de-ico: url("../icons/truck.svg"); }
svg.e-fas-flask { --de-ico: url("../icons/flask.svg"); }
svg.e-fas-image { --de-ico: url("../icons/image.svg"); }
svg.e-fas-layer-group { --de-ico: url("../icons/layers.svg"); }
svg.e-fas-tasks { --de-ico: url("../icons/list.svg"); }

/* ================= menu: boxed hover/active state, same language as the buttons ================= */
.de-nav .elementor-nav-menu--main .elementor-item {
	padding: 10px 16px;
	border: 1px solid transparent;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.de-nav .elementor-nav-menu--main .elementor-item:hover,
.de-nav .elementor-nav-menu--main .elementor-item:focus-visible,
.de-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--de-cyan);
	border-color: var(--de-cyan-dim);
	background-color: rgba(46, 230, 240, 0.08);
	background-image:
		linear-gradient(to bottom right, transparent 50%, var(--de-cyan-dim) 50%, var(--de-cyan-dim) calc(50% + 1.2px), transparent calc(50% + 1.2px)),
		linear-gradient(to top left, transparent 50%, var(--de-cyan-dim) 50%, var(--de-cyan-dim) calc(50% + 1.2px), transparent calc(50% + 1.2px));
	background-size: 8px 8px, 8px 8px;
	background-position: left top, right bottom;
	background-repeat: no-repeat;
	background-origin: border-box;
}
.de-nav .elementor-nav-menu--main .elementor-item:focus-visible { outline: 2px solid var(--de-cyan); outline-offset: 2px; }
.de-nav .elementor-nav-menu--main > .elementor-nav-menu > li + li { margin-left: 6px; }

/* header: hairline under the bar, slightly translucent when it sticks */
.de-header { border-bottom: 1px solid var(--de-line); }
.de-header.elementor-sticky--effects { background-color: rgba(3, 6, 8, 0.86) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* hero dashboard: bars and the stat card side by side */
.de-hud-dash { align-items: stretch; }

/* card icons sit in a thin HUD tile */
.de-hud-frame .elementor-icon-box-icon .elementor-icon {
	padding: 11px;
	border: 1px solid var(--de-line);
	background: rgba(46, 230, 240, 0.05);
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}