/*
 * Допълнения към шаблона (main.css остава непроменен).
 */

/* Форма */

	input[type="tel"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background: none;
		border: solid 1px rgba(124, 128, 129, 0.2);
		color: inherit;
		display: block;
		line-height: 1em;
		outline: 0;
		padding: 0.75em;
		text-decoration: none;
		transition: border-color 0.2s ease-in-out;
		width: 100%;
	}

		input[type="tel"]:focus {
			border-color: #83d3c9;
		}

	/* Скрито поле-капан за ботове */
	.form-trap {
		height: 1px;
		left: -10000px;
		overflow: hidden;
		position: absolute;
		width: 1px;
	}

	.form-status {
		border-left: solid 4px #df7b77;
		margin: 0 0 1.5em 0;
		padding: 0.75em 1em;
		text-align: left;
	}

/* Телефони */

	#banner .inner p a.phone {
		border-bottom: dotted 1px;
		display: table;
		margin: 0 auto 0.25em auto;
	}

/* Карти и виртуална обиколка */

	iframe.embed {
		border: 0;
		display: block;
		height: 450px;
		margin: 1em auto;
		max-width: 800px;
		width: 100%;
	}

/* Формуляр за записване */

	.enroll-form {
		margin: 0 auto;
		max-width: 44em;
		text-align: left;
	}

		.enroll-form label {
			display: block;
			font-size: 0.9em;
			margin: 0 0 0.35em 0;
		}

		.enroll-form select {
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			background-color: transparent;
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c8081' stroke-width='1.5'/%3E%3C/svg%3E");
			background-position: right 0.9em center;
			background-repeat: no-repeat;
			background-size: 0.75em;
			border: solid 1px rgba(124, 128, 129, 0.2);
			border-radius: 0;
			color: inherit;
			display: block;
			font: inherit;
			line-height: 1.25em;
			outline: 0;
			padding: 0.625em 2.5em 0.625em 0.75em;
			width: 100%;
		}

			.enroll-form select:focus {
				border-color: #83d3c9;
			}

		.enroll-form .consent {
			display: flex;
			font-size: 0.8em;
			line-height: 1.5em;
		}

			.enroll-form .consent input {
				accent-color: #83d3c9;
				flex: none;
				height: 1.1em;
				margin: 0.2em 0.6em 0 0;
				width: 1.1em;
			}

		.enroll-form .buttons {
			text-align: center;
		}

	/* Секцията на главната - върху тъмния фон на #cta */

	#zapisvane .steps {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		margin: 1.5em 0 0 0;
		padding: 0;
	}

		#zapisvane .steps li {
			margin: 0 1em 0.5em 1em;
		}

	#zapisvane .enroll-form input[type="text"],
	#zapisvane .enroll-form input[type="email"],
	#zapisvane .enroll-form input[type="tel"],
	#zapisvane .enroll-form select,
	#zapisvane .enroll-form textarea {
		background-color: #fff;
		border-color: #fff;
		color: #5b5b5b;
	}

	#zapisvane .form-status {
		background: #fff;
		color: #5b5b5b;
		margin-left: auto;
		margin-right: auto;
		max-width: 44em;
	}

/* Лента "Обадете се / Пробен урок" - на мобилен и таблет */

	.cta-bar {
		display: none;
	}

	@media screen and (max-width: 840px) {

		body.has-cta-bar {
			padding-bottom: 4.5em;
		}

		.cta-bar {
			background: #fff;
			bottom: 0;
			box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.12);
			display: flex;
			flex-wrap: wrap;
			left: 0;
			padding: 0.6em 0.4em;
			position: fixed;
			right: 0;
			transition: transform 0.3s ease;
			z-index: 10000;
		}

			.cta-bar.is-hidden {
				transform: translateY(110%);
			}

			.cta-bar a {
				border: solid 1px #83d3c9;
				color: #83d3c9;
				flex: 1;
				font-size: 0.8em;
				font-weight: 900;
				letter-spacing: 1px;
				line-height: 1.25em;
				margin: 0 0.35em;
				padding: 1em 0.5em;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;
			}

			.cta-bar a.cta-viber {
				border-color: #7360f2;
				color: #7360f2;
				flex: none;
				padding-left: 0.9em;
				padding-right: 0.9em;
			}

			.cta-bar a.cta-call,
			.cta-bar.is-closed a.cta-form {
				background: #83d3c9;
				color: #fff;
			}

			.cta-bar .cta-hours {
				color: #7c8081;
				display: none;
				flex-basis: 100%;
				font-size: 0.75em;
				line-height: 1.5em;
				padding-top: 0.4em;
				text-align: center;
			}

			.cta-bar.is-closed .cta-call {
				display: none;
			}

			.cta-bar.is-closed .cta-hours {
				display: block;
			}

	}

	@media screen and (max-width: 360px) {

		.cta-bar a {
			font-size: 0.7em;
			letter-spacing: 0;
		}

			.cta-bar a.cta-viber {
				padding-left: 0.6em;
				padding-right: 0.6em;
			}

	}

/* Начало (banner) */

	#banner .inner p.tagline {
		font-size: 1.1em;
		letter-spacing: 0.05em;
		margin-bottom: 1em;
		text-transform: none;
	}

	/* Бутоните могат да се пренесат на два реда на тесен екран */
	#banner .inner .buttons .button {
		line-height: 1.5em;
		padding: 1.125em 1em;
	}

	/* Фиксираното меню да не закрива заглавието при преход към формата */
	#zapisvane,
	#forma {
		scroll-margin-top: 4em;
	}

/* Меню: 7 пункта се побират до логото и на по-тесен десктоп */

	@media screen and (max-width: 1340px) {

		#header nav ul li {
			margin-left: 0.5em;
		}

	}

	@media screen and (max-width: 1100px) {

		#header nav ul li {
			margin-left: 0.25em;
		}

		#header nav ul li a {
			padding-left: 0.5em;
			padding-right: 0.5em;
		}

	}

/* График и цени (генерират се от data/*.json с tools/build.py) */

	/* Цветовете са като в картинката на школата */
	.slot-individual { color: #a514a4; }
	.slot-beginner { color: #c0141b; }
	.slot-advanced { color: #1b995c; }
	.slot-master { color: #16659c; }
	.slot-modern { color: #c46f28; }
	.slot-ladies { color: #111; }
	.slot-repertoire { color: #910d16; }

	.schedule-filter {
		margin: 0 0 2em 0;
		text-align: center;
	}

		.schedule-filter span {
			display: block;
			margin-bottom: 0.5em;
		}

		.schedule-filter button {
			-moz-appearance: none;
			-webkit-appearance: none;
			appearance: none;
			background: none;
			border: solid 1px rgba(124, 128, 129, 0.35);
			color: inherit;
			cursor: pointer;
			font: inherit;
			font-size: 0.9em;
			margin: 0 0.2em 0.5em 0.2em;
			padding: 0.4em 0.9em;
		}

			.schedule-filter button.is-active {
				background: #83d3c9;
				border-color: #83d3c9;
				color: #fff;
			}

	/* Седмична таблица (по-широки екрани) */

	.schedule-grid {
		border-collapse: collapse;
		letter-spacing: 0;
		font-family: Cambria, Georgia, "Times New Roman", serif;
		font-size: 0.85em;
		font-weight: bold;
		line-height: 1.3em;
		margin: 0 0 3em 0;
		table-layout: fixed;
	}

		.schedule-grid caption {
			color: #000;
			font-size: 1.15em;
			padding-bottom: 0.75em;
		}

		.schedule-grid th,
		.schedule-grid td {
			border: solid 1px #000;
			padding: 0;
			text-align: center;
			vertical-align: top;
		}

		.schedule-grid th {
			color: #000;
			padding: 0.35em 0.2em;
		}

		.schedule-grid td.is-empty {
			color: #999;
			padding-top: 0.2em;
		}

		.schedule-grid .slot-time {
			border-bottom: solid 1px #000;
			display: block;
			padding: 0.15em 0.2em;
		}

		.schedule-grid .slot-name {
			display: block;
			padding: 0.2em 0.3em 0.3em 0.3em;
		}

		.schedule-grid td {
			transition: opacity 0.2s ease-in-out;
		}

			.schedule-grid td.is-dimmed {
				opacity: 0.15;
			}

	/* По дни (мобилни екрани) и групите по възраст */

	.schedule-groups,
	.schedule-days {
		display: grid;
		gap: 1em;
		grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
		margin: 0 0 2.5em 0;
	}

	.schedule-group,
	.schedule-day {
		border: solid 1px rgba(124, 128, 129, 0.2);
		padding: 1em 1.25em;
	}

		.schedule-group[hidden],
		.schedule-day li[hidden] {
			display: none;
		}

		.schedule-group h4,
		.schedule-day h4 {
			font-size: 1em;
			line-height: 1.4em;
			margin: 0 0 0.25em 0;
		}

		.schedule-group ul,
		.schedule-day ul {
			list-style: none;
			margin: 0.5em 0 0 0;
			padding: 0;
		}

		.schedule-group li,
		.schedule-day li {
			line-height: 1.5em;
			margin-bottom: 0.5em;
			padding: 0;
		}

		.schedule-meta {
			color: #7c8081;
			margin: 0;
		}

		.schedule-time {
			font-weight: 900;
			white-space: nowrap;
		}

	@media screen and (min-width: 981px) {

		.schedule-days {
			display: none;
		}

	}

	@media screen and (max-width: 1280px) {

		.schedule-grid {
			font-size: 0.78em;
		}

	}

	@media screen and (max-width: 980px) {

		.schedule-grid {
			display: none;
		}

	}

	.price-table .price-level {
		display: block;
		font-size: 0.9em;
		opacity: 0.75;
	}

	.price-table td {
		vertical-align: top;
	}

	@media screen and (max-width: 736px) {

		.price-table thead {
			display: none;
		}

		.price-table tr {
			display: block;
			padding: 0.75em 0;
		}

		.price-table td {
			display: block;
			padding: 0 0.5em;
		}

	}

/* Главна: лента с факти, "Прочетете повече", последните спектакли */

	.facts {
		display: grid;
		gap: 1.5em 1em;
		grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
		list-style: none;
		margin: 2em 0 2.5em 0;
		padding: 0;
	}

		.facts li {
			line-height: 1.4em;
			padding: 0;
			text-align: center;
		}

		.facts strong {
			color: #83d3c9;
			display: block;
			font-size: 2.5em;
			font-weight: 900;
			line-height: 1.2em;
		}

		.facts span {
			display: block;
			font-size: 0.9em;
		}

	@media screen and (max-width: 736px) {

		.facts {
			grid-template-columns: 1fr 1fr;
		}

			.facts strong {
				font-size: 2em;
			}

			.facts span {
				font-size: 0.8em;
			}

	}

	.more-text {
		margin: 0 0 2em 0;
	}

		.more-text summary {
			color: #83d3c9;
			cursor: pointer;
			display: inline-block;
			margin-bottom: 1.5em;
		}

	.latest-shows {
		margin: 0 0 3em 0;
	}

		.latest-shows ul:not(.buttons) {
			list-style: none;
			margin: 0 0 1.5em 0;
			padding: 0;
		}

		.latest-shows li {
			margin-bottom: 0.75em;
			padding: 0;
			text-align: center;
		}

		.latest-shows .button {
			line-height: 1.5em;
			padding: 1.125em 1em;
		}

/* Страница Спектакли */

	.shows {
		margin: 2em auto;
		max-width: 44em;
		text-align: left;
	}

		.shows-year {
			border-top: solid 1px rgba(124, 128, 129, 0.2);
			display: flex;
			padding: 0.75em 0;
		}

			.shows-year h4 {
				flex: none;
				margin: 0;
				width: 4em;
			}

			.shows-year ul {
				flex: 1;
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.shows-year li {
				margin-bottom: 0.4em;
				padding: 0;
			}

		.shows-count {
			opacity: 0.7;
		}

/* Контакти във футъра и телефон в хедъра */

	.footer-contacts {
		line-height: 1.8em;
		margin: 0 0 2em 0;
	}

		.footer-contacts p {
			text-align: center;
		}

		.footer-contacts a {
			white-space: nowrap;
		}

	/* Телефонът се побира до логото едва над 1500px */
	@media screen and (max-width: 1499px) {

		#header nav .nav-phone {
			display: none;
		}

	}

/* Главна: графикът за деня */

	.day-schedule {
		border: solid 1px rgba(124, 128, 129, 0.2);
		margin: 0 auto 3em auto;
		max-width: 34em;
		padding: 1.5em 1.5em 0.5em 1.5em;
	}

		.day-schedule h3 {
			margin: 0 0 0.75em 0;
		}

		.day-schedule-nav {
			align-items: center;
			display: flex;
			justify-content: space-between;
		}

			.day-schedule-nav button {
				-moz-appearance: none;
				-webkit-appearance: none;
				appearance: none;
				background: none;
				border: solid 1px rgba(124, 128, 129, 0.35);
				color: inherit;
				cursor: pointer;
				flex: none;
				font-size: 1.5em;
				height: 1.75em;
				line-height: 1em;
				padding: 0;
				width: 1.75em;
			}

				.day-schedule-nav button:hover {
					border-color: #83d3c9;
					color: #83d3c9;
				}

			.day-schedule-label {
				padding: 0 0.5em;
			}

		.day-schedule-pick {
			font-size: 0.9em;
			margin: 0.5em 0 1em 0;
		}

			.day-schedule-picker {
				background: none;
				border: solid 1px rgba(124, 128, 129, 0.35);
				color: inherit;
				font: inherit;
				padding: 0.2em 0.4em;
			}

		.day-schedule-list {
			list-style: none;
			margin: 0 0 1em 0;
			padding: 0;
			text-align: left;
		}

			.day-schedule-list li {
				border-top: solid 1px rgba(124, 128, 129, 0.15);
				line-height: 1.5em;
				padding: 0.5em 0;
			}

			.day-schedule-list li.is-past {
				opacity: 0.4;
			}

		.day-schedule-note {
			margin: 0 0 1em 0;
		}

/* "Заявете" в графика */

	.schedule-hint {
		background: rgba(131, 211, 201, 0.12);
		border: solid 1px #83d3c9;
		margin: 0 0 1.5em 0;
		padding: 1em 1em 1.25em 1em;
		text-align: center;
	}

		.schedule-hint p {
			margin: 0 0 0.75em 0;
		}

		.schedule-hint .button {
			line-height: 1.5em;
			min-width: 0;
			padding: 0.9em 1.5em;
		}

	/* "Заявете" във всяка клетка на таблицата; при посочване светва като бутон */
	.schedule-grid .slot-cta {
		display: inline-block;
		font-family: "Roboto", sans-serif;
		font-size: 0.85em;
		margin: 0 0 0.5em 0;
		padding: 0.1em 0.6em;
		text-decoration: underline;
	}

		.schedule-grid .slot-link:hover .slot-cta,
		.schedule-grid .slot-link:focus .slot-cta {
			background: #83d3c9;
			color: #fff;
			text-decoration: none;
		}

	/* В таблицата цялата клетка е линк */
	.schedule-grid .slot-link {
		color: inherit;
		display: block;
		text-decoration: none;
	}

		.schedule-grid .slot-link:hover,
		.schedule-grid .slot-link:focus {
			background: rgba(131, 211, 201, 0.18);
			outline: none;
		}

	.trial-small {
		color: #83d3c9;
		font-size: 0.85em;
		font-weight: 900;
		text-decoration: none;
		white-space: nowrap;
	}

		a.trial-small:hover {
			text-decoration: underline;
		}

	/* Индивидуални уроци: ред, който се разгъва с отделните часове */
	.slots-toggle {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background: none;
		border: 0;
		color: inherit;
		cursor: pointer;
		font: inherit;
		padding: 0;
		text-align: left;
	}

	.slots {
		display: flex;
		flex-wrap: wrap;
		margin-top: 0.5em;
	}

		.slots[hidden] {
			display: none;
		}

	.slot-chip {
		border: solid 1px currentColor;
		color: inherit;
		font-size: 0.85em;
		margin: 0 0.4em 0.4em 0;
		padding: 0.2em 0.6em;
		text-decoration: none;
		white-space: nowrap;
	}

		.slot-chip:hover {
			background: rgba(165, 20, 164, 0.1);
		}

		.slot-chip.is-past {
			opacity: 0.4;
		}

	.schedule-cta {
		margin: 0.75em 0 0 0;
	}

		.schedule-cta .button {
			line-height: 1.5em;
			min-width: 0;
			padding: 0.75em 1em;
		}

	.day-schedule .schedule-filter {
		font-size: 0.9em;
		margin-bottom: 1em;
	}


	/* Полетата, попълнени от графика, се открояват за момент */
	@keyframes prefilled {
		from { background-color: rgba(131, 211, 201, 0.45); }
		to { background-color: #fff; }
	}

	.enroll-form .is-prefilled {
		animation: prefilled 2s ease-out;
		border-color: #83d3c9 !important;
	}

	/* На по-тесен десктоп бутонът в менюто е "Заявете урок" */
	@media screen and (max-width: 1180px) {

		#header nav .nav-cta-extra {
			display: none;
		}

	}

	@media screen and (max-width: 1100px) {

		#header nav {
			letter-spacing: 0.03em;
		}

	}

/* "?" с описание на курса и легенда на цветовете в графика */

	.info-toggle {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		background: #fff;
		border: solid 1px #83d3c9;
		border-radius: 50%;
		color: #83d3c9;
		cursor: pointer;
		font: inherit;
		font-size: 0.75em;
		font-weight: 900;
		height: 1.6em;
		line-height: 1.4em;
		margin: 0 0.2em;
		padding: 0;
		text-transform: none;
		vertical-align: middle;
		width: 1.6em;
	}

		.info-toggle[aria-expanded="true"] {
			background: #83d3c9;
			color: #fff;
		}

	.info-bubble {
		background: #f3f6fa;
		border-left: solid 3px #83d3c9;
		color: #5b5b5b;
		display: block;
		font-size: 0.85em;
		font-weight: 400;
		line-height: 1.5em;
		margin: 0.4em 0;
		padding: 0.5em 0.75em;
		text-align: left;
		text-transform: none;
	}

		.info-bubble[hidden] {
			display: none;
		}

	.schedule-legend {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}

		.schedule-legend li {
			font-size: 0.9em;
			font-weight: 900;
			margin: 0 0.75em 0.5em 0.75em;
			padding: 0;
		}

		.legend-swatch {
			background: currentColor;
			display: inline-block;
			height: 0.8em;
			margin-right: 0.4em;
			width: 0.8em;
		}

		.schedule-legend .info-bubble {
			max-width: 22em;
		}

	/* "Изберете час ›" (бутон) изглежда като линка "Заявете ›" */
	.slots-toggle.trial-small {
		border-bottom: dotted 1px;
		color: #83d3c9;
		font-size: 0.85em;
		font-weight: 900;
	}

/* Групи само за записани, индивидуални уроци и минали часове */

	.closed-note {
		font-size: 0.85em;
		font-style: italic;
		opacity: 0.7;
		white-space: nowrap;
	}

	.slots-note {
		display: block;
		font-size: 0.85em;
		margin-top: 0.25em;
		opacity: 0.8;
	}

		.slots-note[hidden] {
			display: none;
		}

	.slots-toggle[disabled] {
		cursor: default;
	}

	/* Минал час (или минал ден) не може да се заяви */
	li.is-past .trial-link {
		display: none;
	}

/* Формуляр: как се плаща пробният урок и подсказка за индивидуалните уроци */

	.trial-payment {
		font-size: 0.95em;
	}

	.form-hint {
		background: #fff;
		border-left: solid 3px #83d3c9;
		color: #5b5b5b;
		font-size: 0.85em;
		line-height: 1.5em;
		margin: 0 0 1em 0;
		padding: 0.5em 0.9em;
		text-align: left;
	}

		.form-hint[hidden] {
			display: none;
		}