/*
 * GaDo Art - обвивките на плъгина denvelkoff-booking (задача 5).
 * Само рамката около шорткодовете: отстъп под хедъра, фон, екранът „Вход".
 * Вътрешността на плъгина (.dvb-*) НЕ се стилизира тук - тя чете токените --gado-*.
 * Макети: makets/final/zapazi-chas.1440.step-1.html, zapazi-chas.390.step-1.html,
 * moyat-grafik.390.html.
 */

/* ---------- Запази час ----------
   Макет: main 720px, padding 108px 20px 96px под фиксиран хедър 72px.
   .dvb-booking вече има 720px и padding 36px 20px 96px, затова тук е само височината
   на хедъра: h1 стои на 72 + 36 = 108px от горния край. */
.gado-booking-main {
	padding-top: var(--gado-header-h);
	background: var(--gado-bg);
}

/* Без плъгина: само заглавието, със същите отстъпи като .dvb-booking. */
.gado-booking-fallback {
	padding-top: 36px;
	padding-bottom: 96px;
}

/* ---------- Моят график (самостоятелен екран) ---------- */
body.gado-app {
	background: var(--gado-sand);
	color: var(--gado-text);
}

.gado-app__col {
	max-width: 430px;
	min-height: 100vh;
	margin: 0 auto;
	background: var(--gado-bg);
	display: flex;
	flex-direction: column;
}

.admin-bar .gado-app__col { min-height: calc(100vh - 32px); }

@media (max-width: 782px) {
	.admin-bar .gado-app__col { min-height: calc(100vh - 46px); }
}

.gado-schedule {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
}

/* Екран „Вход" */
.gado-login {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 28px;
	padding: 40px 24px;
}

.gado-login__brand {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
}

.gado-login__title {
	margin: 0;
	font-family: var(--gado-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: normal;
	color: var(--gado-dark);
}

.gado-login__sub {
	margin: 0;
	font-size: 12px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gado-gold-dark);
}

.gado-login__form,
.gado-login__form form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gado-login__form form { margin: 0; }

.gado-login__form .login-username,
.gado-login__form .login-password {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.gado-login__form label {
	font-size: 14px;
	font-weight: 500;
}

.gado-login__form .input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var(--gado-line-2);
	background: #fff;
	font-size: 16px;
	color: var(--gado-text);
}

.gado-login__form .input:focus-visible {
	outline: 2px solid var(--gado-dark);
	outline-offset: 0;
	border-color: var(--gado-dark);
}

.gado-login__form .input[aria-invalid="true"] { border-color: var(--gado-err); }

.gado-login__error {
	margin: -10px 0 0;
	font-size: 14px;
	color: var(--gado-err);
}

.gado-login__form .login-submit {
	margin: 8px 0 0;
}

.gado-login__form .login-submit .button {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 52px;
	padding: 0 24px;
	border-radius: var(--gado-pill);
	border: 1px solid var(--gado-dark);
	background: var(--gado-dark);
	color: #fff;
	font-family: var(--gado-sans);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.gado-login__form .login-submit .button:hover {
	background: transparent;
	color: var(--gado-dark);
}

.gado-login__form .login-submit .button:focus-visible {
	outline: 2px solid var(--gado-dark);
	outline-offset: 3px;
}

.gado-login__lost {
	display: block;
	padding: 10px;
	text-align: center;
	font-size: 14px;
	color: var(--gado-dark);
}