/*
 * Herweck Handyreparatur — form styles
 *
 * Covers:
 *   - .hwk-cond-hidden  conditional field visibility (mirrors theme convention)
 *   - Readonly price input styling (preis_brutto / preis_netto)
 *   - .hwk-muster       Android lock-pattern drawer (Sicherheitscode → Muster)
 */

/* ─── Conditional field visibility ─────────────────────────────────────────── */
/* Mirrors the convention used in components/elementor_form/scripts/elementor_form.js */
.hwk-cond-hidden {
	display: none !important;
}

/* ─── Readonly price display fields ─────────────────────────────────────────── */
/*
 * preis_netto + preis_brutto are regular Elementor text inputs JS sets to readOnly
 * (readOnly, NOT disabled — the value must still submit into the email). Set to 50%
 * width in the Elementor form so they sit side by side. Styled to look like disabled
 * fields with an accent underline: no box border, no rounding, left-aligned, muted.
 */
.hwk-handyreparatur-form [name="form_fields[preis_netto]"],
.hwk-handyreparatur-form [name="form_fields[preis_brutto]"] {
	background: transparent;
	border: none !important;
	border-bottom: 2px solid var(--color-accent, #474294) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding-inline-start: 12px !important;
	padding-inline-end: 0 !important;
	color: var(--color-text, #1f2d3d);
	font-weight: 700;
	opacity: 0.65; /* disabled look */
	cursor: default;
	pointer-events: none;
}

/* Hide the field while empty (before a repair is selected). */
.hwk-handyreparatur-form .elementor-field-group:has([name="form_fields[preis_netto]"]:placeholder-shown),
.hwk-handyreparatur-form .elementor-field-group:has([name="form_fields[preis_brutto]"]:placeholder-shown) {
	display: none;
}

/* ─── Cascade selects — subtle loading indicator ────────────────────────────── */
/*
 * While the feed is loading or the select only has the placeholder option
 * (i.e. no real choices yet), dim the disabled-looking state slightly.
 * This is a progressive enhancement — works in modern browsers only.
 */
.hwk-handyreparatur-form [name="form_fields[modell]"]:has(option:only-child),
.hwk-handyreparatur-form [name="form_fields[reparatur]"]:has(option:only-child) {
	opacity: 0.55;
}

/* ─── Muster (Android lock pattern) drawer ──────────────────────────────────── */
/*
 * Injected by JS into the security_code_value field group when "Muster" is
 * chosen in the Sicherheitscode dropdown. The readonly text input above it
 * shows the resulting sequence (e.g. "1-2-5-8-9").
 */
.hwk-muster {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin-block-start: 8px;
}

.hwk-muster__svg {
	width: 280px;
	max-width: 100%;
	aspect-ratio: 1;
	height: auto;
	touch-action: none; /* let pointer events drive the drawing, not scroll */
	background: var(--color-bg, #f5f7fa);
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	cursor: crosshair;
}

.hwk-muster__dot {
	fill: #fff;
	stroke: #9aa3ad;
	stroke-width: 2;
}

.hwk-muster__dot.is-active {
	fill: var(--color-neon, #e5ff00);
	stroke: #1f2d3d;
	stroke-width: 3;
}

/* First dot in the sequence — accent so the start is obvious; follow the line to the end. */
.hwk-muster__dot.is-start {
	fill: var(--color-accent, #474294);
	stroke: #1f2d3d;
}

.hwk-muster__line {
	fill: none;
	stroke: #1f2d3d;
	stroke-width: 6;
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* Raw value input while drawing a Muster: visually hidden but still in the DOM,
   focusable, and NOT display:none — so native `required` validation keeps working
   (display:none / readonly inputs are barred from constraint validation). */
.hwk-input-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Reset button uses the theme's .btn-primary.btn-small.btn-hover-neon styling.
   Positioning handled by the flex column above (gap), no extra margin needed. */

/* Required-field asterisk appended to IMEI / SN labels when pflicht applies. */
.hwk-req-star {
	color: var(--color-danger, #c0392b);
	font-weight: 700;
}

/* ─── Login gate (logged-out visitors) ──────────────────────────────────────── */
/*
 * The gate can render a theme text-module template inside the Elementor form
 * widget slot. The theme gives .hwk-module a full-bleed `width: 100vw` (a
 * :not(--cta,--navigation) rule meant for full-page sections), which overflows
 * and misaligns in this narrower slot. Scope it back to the container. !important
 * because the theme selector out-specifies this one (compound :not arg).
 */
.hwk-handyreparatur-login-gate .hwk-module {
	width: auto !important;
}