/**
 * bc-booking account pages ([bcb_account]). Builds on booking.css
 * (tokens on .bcb-app, .bcb-btn, .bcb-input, .bcb-tabs, .bcb-alert …);
 * this file only adds what the account forms and dashboard need.
 * All selectors are prefixed with .bcb-.
 */

/* ------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------ */

.bcb-acct__card {
	max-width: 30rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem;
	background: var(--bcb-bg);
	border: 1px solid var(--bcb-border);
	border-radius: var(--bcb-radius);
	box-shadow: var(--bcb-shadow);
}

@media (min-width: 576px) {
	.bcb-acct__card {
		padding: 2rem;
	}
}

.bcb-acct__title {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.25;
}

.bcb-acct__intro {
	margin: 0 0 1.25rem;
	color: var(--bcb-muted);
	font-size: 0.95rem;
}

.bcb-acct__card > .bcb-alert,
.bcb-acct__panel > .bcb-alert {
	margin-bottom: 1.25rem;
}

.bcb-acct .bcb-alert:focus {
	outline: none;
}

.bcb-alert--success {
	background: rgba(46, 125, 79, 0.08);
	border: 1px solid rgba(46, 125, 79, 0.3);
	color: #1f5536;
}

/* ------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */
.bcb-acct__form {
	display: grid;
	gap: 1rem;
	margin: 0;
}

.bcb-acct__grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 576px) {
	.bcb-acct__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.bcb-acct .bcb-label {
	font-size: 0.875rem;
	color: var(--bcb-text);
}

.bcb-req {
	color: var(--bcb-danger);
}

.bcb-acct__hint {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--bcb-muted);
}


.bcb-acct__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.bcb-acct__link {
	color: var(--bcb-primary);
	font-size: 0.95rem;
	text-decoration: underline;
	text-decoration-color: var(--bcb-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.bcb-acct__link:hover {
	color: var(--bcb-text);
}

.bcb-acct__submit {
	width: 100%;
	margin-top: 0.25rem;
}

.bcb-acct__form > .bcb-btn:not(.bcb-acct__submit) {
	justify-self: start;
}

.bcb-acct__switch {
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bcb-border);
	text-align: center;
	font-size: 0.95rem;
	color: var(--bcb-muted);
}

.bcb-captcha {
	min-height: 78px;
}

/* Checkbox */
.bcb-check {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0 0.6rem;
}

.bcb-check__input {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--bcb-text);
	cursor: pointer;
}

.bcb-check__label {
	font-size: 0.95rem;
	cursor: pointer;
	/* Trim the line box to the letters, then center the first line's capitals on the box (QA 17). */
	text-box: trim-both cap alphabetic;
	margin-top: calc((1.15rem - 1cap) / 2);
}

.bcb-check .bcb-field-error {
	grid-column: 2;
}

.bcb-check.has-error .bcb-check__input {
	outline: 2px solid var(--bcb-danger);
	outline-offset: 1px;
}

/* Password with show/hide toggle */
.bcb-pw {
	position: relative;
}

.bcb-pw__input {
	padding-right: 3rem;
}

.bcb-pw__toggle {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--bcb-radius-sm);
	background: transparent;
	color: var(--bcb-muted);
	cursor: pointer;
}

.bcb-pw__toggle:hover,
.bcb-pw__toggle[aria-pressed='true'] {
	color: var(--bcb-text);
}

.bcb-pw__toggle[aria-pressed='true'] .bcb-icon {
	opacity: 0.55;
}

/* ------------------------------------------------------------------
 * Dashboard
 * ------------------------------------------------------------------ */
.bcb-acct__tabs .bcb-tabs__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.bcb-acct__tabs .bcb-tabs__tab[aria-current='page'] {
	background: var(--bcb-bg);
	color: var(--bcb-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

@media (max-width: 575.98px) {
	.bcb-acct__tabs {
		flex-wrap: wrap;
	}

	.bcb-acct__tabs .bcb-tabs__tab {
		flex: 1 1 calc(50% - 0.25rem);
	}
}

.bcb-acct__panel {
	max-width: 40rem;
}

.bcb-acct__greeting {
	margin: 0 0 1.25rem;
	font-size: 1.15rem;
	font-weight: 500;
}

.bcb-acct__next {
	margin-bottom: 1.5rem;
}

.bcb-acct__subtitle {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bcb-muted);
}

.bcb-acct__booking {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--bcb-primary);
	border-radius: var(--bcb-radius-sm);
	background: var(--bcb-primary-soft);
}

.bcb-acct__room {
	margin: 0;
	font-weight: 600;
}

.bcb-acct__time {
	margin: 0.15rem 0 0;
	color: var(--bcb-text);
}

/* «Meine Buchungen» embedded in «Mein Konto» */
.bcb-acct .bcb-app {
	padding: 0;
}