/* Hypnosis onboarding – vstupní stránka (Krok 1)
   Paleta je orientační (vychází z tmavého pozadí + výrazné akcentní barvy
   hypnosis.cz) – nahraďte přesnými brand hodnotami, jakmile je budete mít. */

.hyp-page {
	--hyp-bg: #0b0b0d;
	--hyp-bg-2: #17171b;
	--hyp-fg: #f5f5f2;
	--hyp-fg-muted: #a3a3a8;
	--hyp-accent: #c6ff3d;
	--hyp-accent-fg: #0b0b0d;
	--hyp-error: #ff6b6b;
	--hyp-border: #2a2a30;

	background: var(--hyp-bg) !important;
	color: var(--hyp-fg) !important;
	min-height: 100vh;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column;
}

.hyp-page * {
	box-sizing: border-box;
}

.hyp-header {
	padding: 28px clamp(20px, 5vw, 64px) 0;
}

.hyp-logo {
	display: block;
	height: 34px;
	width: auto;
}

.hyp-hero {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 48px clamp(20px, 5vw, 64px) 80px;
}

.hyp-hero-inner {
	max-width: 720px;
}

.hyp-eyebrow {
	color: var(--hyp-accent) !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 13px;
	margin-bottom: 18px;
}

.hyp-title {
	font-size: clamp(36px, 6vw, 68px);
	line-height: 1.03;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 22px;
	color: var(--hyp-fg) !important;
}

.hyp-title em {
	font-style: normal;
	color: var(--hyp-accent) !important;
}

.hyp-subtitle {
	font-size: clamp(16px, 2vw, 19px);
	color: var(--hyp-fg-muted) !important;
	line-height: 1.55;
	max-width: 560px;
	margin: 0 0 40px;
}

.hyp-form {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	max-width: 520px;
}

.hyp-form-row {
	display: flex;
	gap: 12px;
	width: 100%;
	flex-wrap: wrap;
}

.hyp-input {
	flex: 1 1 260px;
	min-width: 0;
	background: var(--hyp-bg-2);
	border: 1px solid var(--hyp-border);
	color: var(--hyp-fg);
	font-size: 16px;
	/* Výška pole cca na výšku dvou řádků textu (na žádost uživatele, 15. 9. 2026) –
	   šířka pole se neměnila, jen svislé odsazení bylo zbytečně velké. */
	padding: 10px 18px;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s ease;
}

.hyp-input:focus {
	border-color: var(--hyp-accent);
}

.hyp-input::placeholder {
	color: var(--hyp-fg-muted);
}

.hyp-submit {
	display: inline-block;
	flex: 0 0 auto;
	background: var(--hyp-accent);
	color: var(--hyp-accent-fg) !important;
	border: none;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 28px;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: opacity 0.15s ease, transform 0.05s ease;
	white-space: nowrap;
}

.hyp-submit--block {
	display: block;
	width: 100%;
	flex: initial;
	margin-top: 8px;
}

.hyp-submit:hover {
	opacity: 0.9;
}

.hyp-submit:active {
	transform: translateY(1px);
}

.hyp-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.hyp-microtext {
	margin-top: 16px;
	font-size: 13px;
	color: var(--hyp-fg-muted) !important;
	line-height: 1.5;
	max-width: 520px;
}

.hyp-microtext a {
	color: var(--hyp-fg-muted);
	text-decoration: underline;
}

.hyp-alert {
	max-width: 520px;
	border-radius: 8px;
	padding: 16px 18px;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.hyp-alert--success {
	background: rgba(198, 255, 61, 0.12);
	border: 1px solid var(--hyp-accent);
	color: var(--hyp-fg);
}

.hyp-alert--error {
	background: rgba(255, 107, 107, 0.1);
	border: 1px solid var(--hyp-error);
	color: var(--hyp-fg);
}

.hyp-footer {
	padding: 24px clamp(20px, 5vw, 64px) 32px;
	color: var(--hyp-fg-muted) !important;
	font-size: 13px;
	border-top: 1px solid var(--hyp-border);
}

/* Formulář osobních/smluvních údajů (Fáze 3, Krok 2) */
.hyp-data-form-wrap {
	max-width: 760px;
}

.hyp-data-form {
	max-width: 100%;
}

.hyp-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 16px;
	margin-bottom: 8px;
}

.hyp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.hyp-field--wide {
	grid-column: 1 / -1;
}

.hyp-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hyp-fg-muted);
}

/* Malá nápověda formátu pod popiskem pole (např. telefon) – na žádost
   uživatele, 15. 9. 2026. */
.hyp-field-hint {
	font-size: 12px;
	color: var(--hyp-fg-muted);
	opacity: 0.85;
}

.hyp-field .hyp-input {
	/* .hyp-input má „flex: 1 1 260px" kvůli vodorovnému formuláři v Kroku 1
	   (.hyp-form-row); uvnitř .hyp-field (sloupcový flex kontejner) by ale
	   flex-basis 260px platil pro VÝŠKU, a pole by se natahovalo na ~260px –
	   proto se tu flex explicitně resetuje a výšku určuje jen padding/font.
	   Oprava na žádost uživatele, 15. 9. 2026. */
	flex: 0 0 auto;
	width: 100%;
}

.hyp-textarea {
	resize: vertical;
	font-family: inherit;
}

select.hyp-input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--hyp-fg-muted) 50%), linear-gradient(135deg, var(--hyp-fg-muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 15px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

@media (max-width: 640px) {
	.hyp-field-grid {
		grid-template-columns: 1fr;
	}
}

/* Ověřovací stránka (Fáze 2 – minimální stav pro Krok 1) */
.hyp-verify-card {
	max-width: 560px;
	background: var(--hyp-bg-2);
	border: 1px solid var(--hyp-border);
	border-radius: 12px;
	padding: 40px;
}

.hyp-verify-icon {
	font-size: 40px;
	margin-bottom: 16px;
}

@media (max-width: 480px) {
	.hyp-form {
		flex-direction: column;
	}
	.hyp-submit {
		width: 100%;
	}
	.hyp-verify-card {
		padding: 28px;
	}
}