/* ==========================================================================
   Дъга — съвместимост с блоковете на Гутенберг

   Секциите са изградени от стандартни блокове, за да могат да се
   редактират в редактора. Тук изчистваме служебните стилове на ядрото
   и довеждаме блоковете до вида от дизайна.
   ========================================================================== */

.daga-section .wp-block-group,
.daga-section .wp-block-buttons { margin-block: 0; }
.daga-container > * { margin-block: 0; }
.wp-block-heading { margin-block: 0; }

/* Отстоянията, които нулирането по-горе би изяло. */
.daga-section .wp-block-group.daga-head { margin-bottom: clamp(32px, 4vw, 56px); }
.daga-section .wp-block-group.daga-tabs { margin-bottom: 44px; }
.daga-section .wp-block-group.daga-faq-cta { margin-top: 34px; }
/* Заглавието на класическата карта — `.wp-block-heading` по-горе изяжда
   отстоянието му, а надписът под него не бива да е залепен. */
.daga-section .wp-block-heading.daga-pkg__title { margin-bottom: 14px; }
/* Хоризонталната черта над цената не бива да опира в последната добавка. */
.daga-section .wp-block-group.daga-addons { margin-bottom: 20px; }
.daga-container > .daga-more { margin-top: 40px; }
.daga-container > .daga-contact-cards { margin-bottom: 44px; }
.daga-section .wp-block-group.daga-pkgs + .wp-block-group.daga-pkgs { margin-top: 0; }

/* Ядрото слага `margin-block-start` на всяко второ и следващо дете чрез
   `.is-layout-flow`. Вътре в собствените ни flex/grid контейнери това
   разминава елементите по вертикала — затова го нулираме. */
.daga-tabs > *,
.daga-pkgs > *,
.daga-reviews > *,
.daga-contact-cards > *,
.daga-addons > *,
.daga-addon > *,
.daga-pkg__total > *,
.daga-review__top > *,
.daga-review__who > * { margin-block: 0; }

/* --- Заглавна група на секция --- */

.daga-head > * + * { margin-top: 0; }
/* Родителят също трябва да се разшири — иначе той реже параграфа. */
.daga-head--wide { max-width: 940px; }
.daga-head--wide p { max-width: 940px; }
.daga-lead { color: var(--muted); font-size: 1.0625rem; margin-top: 14px; }
.daga-head .daga-lead:first-of-type { margin-top: 20px; }

/* --- Бутони на ядрото със стила на темата --- */

.wp-block-button.daga-btn { background: none; padding: 0; }
.daga-btn > .wp-block-button__link {
	min-width: 280px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--btn-bg, var(--pink)); color: #fff;
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
	padding: calc(15px - var(--optical)) 30px calc(15px + var(--optical));
	border: 0; border-radius: var(--pill);
	transition: filter .18s ease, transform .18s ease;
}
.daga-btn > .wp-block-button__link:hover { color: #fff; filter: brightness(.94); transform: translateY(-1px); }

/* Цената и бутонът стоят залепени за долния ръб на картата, независимо
   колко дълъг е списъкът с добавки над тях. */
.daga-section .wp-block-group.daga-pkg__total { margin-top: auto; }
.daga-section .wp-block-buttons.daga-pkg__cta {
	display: block; width: 100%; margin-top: 14px;
}

/* Стрелка след текста, както е в дизайна. */
.daga-pkg__cta .wp-block-button__link::after {
	content: ""; width: 16px; height: 16px; flex: none;
	background: currentColor;
	transform: translateY(var(--icon-nudge));
	transition: transform .2s var(--ease);
	-webkit-mask: var(--icon-arrow) center / contain no-repeat;
	        mask: var(--icon-arrow) center / contain no-repeat;
}
.daga-pkg__cta .wp-block-button__link:hover::after {
	transform: translate(3px, var(--icon-nudge));
}

/* Добавките се разделят една от друга. Селекторът е дълъг, защото
   нулирането на marginите в началото на файла е по-тежко. */
.daga-section .wp-block-group.daga-addon { margin-bottom: 10px; }
.daga-section .wp-block-group.daga-addon:last-child { margin-bottom: 0; }
.daga-section .wp-block-group.daga-addon__opts,
.daga-section .wp-block-group.daga-addon__subs { margin-top: 10px; }
.daga-btn--block { width: 100%; }
.daga-btn--block > .wp-block-button__link { display: flex; width: 100%; padding-block: calc(17px - var(--optical)) calc(17px + var(--optical)); }

.daga-btn--ig > .wp-block-button__link::before,
.daga-btn--fb > .wp-block-button__link::before {
	content: ""; width: 18px; height: 18px; flex: none; margin-top: 0px;
	background: currentColor;
	transform: translateY(var(--icon-nudge));
}
.daga-btn--ig > .wp-block-button__link::before {
	-webkit-mask: var(--icon-instagram) center / contain no-repeat;
	        mask: var(--icon-instagram) center / contain no-repeat;
}
.daga-btn--fb > .wp-block-button__link::before {
	-webkit-mask: var(--icon-facebook) center / contain no-repeat;
	        mask: var(--icon-facebook) center / contain no-repeat;
}

/* Ревюта — „Виж още" е връзка към Google, но изглежда като текстов бутон */
.wp-block-buttons.daga-more { display: flex; justify-content: center; margin-top: 40px; }
.wp-block-button.daga-more__btn { background: none; padding: 0; }
.daga-more__btn > .wp-block-button__link {
	background: none; border: 0; color: var(--ink);
	font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	padding: 6px 4px; border-radius: 0;
	transition: color .18s ease;
}
.daga-more__btn > .wp-block-button__link:hover { color: var(--pink); }

/* --- Hero --- */

div.wp-block-cover.daga-hero { margin: 0; }

/* --- Пакети --- */

figure.wp-block-image.daga-pkg__rainbow { margin: 0 auto 12px; }
p.daga-tab { margin: 0; }

.daga-addon__name::before {
	content: ""; width: 16px; height: 16px; flex: none;
	background: var(--accent);
	/* Иконата ляга на първия ред, а не в средата на многоредово име —
	   затова центрирането е спрямо височината на реда, не на кутията. */
	margin-top: calc((1.45em - 16px) / 2);
	transform: translateY(var(--icon-nudge));
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
.daga-addon__name--clock::before   { -webkit-mask-image: var(--icon-clock);   mask-image: var(--icon-clock); }
.daga-addon__name--cake::before    { -webkit-mask-image: var(--icon-cake);    mask-image: var(--icon-cake); }
.daga-addon__name--check::before   { -webkit-mask-image: var(--icon-check);   mask-image: var(--icon-check); }
.daga-addon__name--balloon::before { -webkit-mask-image: var(--icon-balloon); mask-image: var(--icon-balloon); }
.daga-addon__name--drink::before   { -webkit-mask-image: var(--icon-drink);   mask-image: var(--icon-drink); }
.daga-addon__name--camera::before  { -webkit-mask-image: var(--icon-camera);  mask-image: var(--icon-camera); }
.daga-addon__name--smile::before   { -webkit-mask-image: var(--icon-smile);   mask-image: var(--icon-smile); }

.daga-pkg__intro { text-align: center; color: var(--body); font-size: var(--text-sm); margin: 0 0 14px; }
.daga-pkg__highlight {
	text-align: center; margin: 0 0 22px;
	background: var(--accent-chip); color: var(--accent);
	font-size: var(--text-sm); font-weight: 700; border-radius: var(--pill);
	padding: calc(8px - var(--optical)) 18px calc(8px + var(--optical));
}
/* Табелката „Нова услуга“ седи в горния десен ъгъл, извън потока —
   така главите на всички карти остават еднакво високи. */
.daga-pkg:not(.daga-pkg--art) .daga-pkg__head > .daga-pkg__badge {
	position: absolute; top: 16px; right: 16px; z-index: 2;
	margin: 0; display: inline-block;
}

/* --- Галерия --- */

figure.wp-block-gallery.daga-gallery {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
	margin: 0; padding: 0;
}
/* Ядрото задава width през селектор с :not(#individual-image), който носи
   тежест на ID. Затова тук е нужно !important. */
figure.wp-block-gallery.daga-gallery > figure.wp-block-image {
	margin: 0; width: 100% !important; max-width: none; flex: none;
	aspect-ratio: 8 / 5; overflow: hidden; border-radius: var(--radius);
}
/* Първата снимка заема два реда; следващите две запълват тези редове,
   за да няма празнини вдясно — както е в дизайна. */
figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(1) {
	grid-column: span 2; grid-row: span 2; aspect-ratio: 4 / 3;
}
figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(2),
figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(3) {
	aspect-ratio: auto; height: 100%;
}
figure.wp-block-gallery.daga-gallery > figure.wp-block-image > img {
	width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius);
	transition: transform .4s ease;
}
figure.wp-block-gallery.daga-gallery > figure.wp-block-image:hover > img { transform: scale(1.04); }
figure.wp-block-gallery.daga-gallery > figure.wp-block-image[hidden] { display: none; }

/* --- Instagram --- */

figure.wp-block-gallery.daga-insta {
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
	margin: 0; padding: 0;
}
figure.wp-block-gallery.daga-insta > figure.wp-block-image {
	margin: 0; width: 100% !important; max-width: none; flex: none;
	aspect-ratio: 1; overflow: hidden; border-radius: 14px;
}
figure.wp-block-gallery.daga-insta > figure.wp-block-image > img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 14px;
	transition: transform .4s ease;
}
figure.wp-block-gallery.daga-insta > figure.wp-block-image:hover > img { transform: scale(1.06); }
.wp-block-buttons.daga-social-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* --- Ревюта --- */

.daga-review__avatar { margin: 0; }
.daga-review__avatar--pink   { background: var(--pink); }
.daga-review__avatar--blue   { background: var(--blue); }
.daga-review__avatar--yellow { background: var(--yellow); }
.daga-review__avatar--teal   { background: var(--pkg-teal); }
.daga-review__name, .daga-review__when { margin: 0; }

.daga-review__top { position: relative; padding-right: 30px; }
.daga-review__top::after {
	content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px;
	background: var(--icon-google) center / contain no-repeat;
}
/* Звездите са отделен елемент, а не псевдо на текста — иначе заемат
   от редовете, когато текстът се реже. */
/*
 * Лентата със звезди се пълни частично: отдолу стои градиент, който
 * превключва от златно към сиво на `--daga-star-fill`, а маската изрязва
 * формите на звездите. Така една кутия показва и 4, и 4,7 звезди.
 * Лентата е 90px = 5 × 18px, значи една звезда = 20%.
 */
p.daga-review__stars,
p.daga-rating::before {
	width: 90px; height: 16px;
	/* Стойността по подразбиране е във `var()`, а не отделна декларация —
	   иначе би победила и модификаторите, и inline стойността, която
	   се наследява от `p.daga-rating`. */
	background: linear-gradient( 90deg,
		var(--star-on) var(--daga-star-fill, 100%),
		var(--star-off) var(--daga-star-fill, 100%) );
	-webkit-mask: var(--icon-star-mask) left center / 18px 16px repeat-x;
	        mask: var(--icon-star-mask) left center / 18px 16px repeat-x;
}
p.daga-review__stars { display: block; margin: 20px 0 16px; }

p.daga-review__stars--5 { --daga-star-fill: 100%; }
p.daga-review__stars--4 { --daga-star-fill: 80%; }
p.daga-review__stars--3 { --daga-star-fill: 60%; }
p.daga-review__stars--2 { --daga-star-fill: 40%; }
p.daga-review__stars--1 { --daga-star-fill: 20%; }

/* Дълъг текст се реже на 5 реда; скриптът добавя „Прочети цялото“. */
.daga-review__text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	        line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.daga-review.is-expanded .daga-review__text {
	-webkit-line-clamp: unset;
	        line-clamp: unset;
	overflow: visible;
}

.daga-review__more {
	display: inline-block; margin-top: 10px; padding: 0;
	background: none; border: 0; cursor: pointer;
	font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: var(--pink);
	transition: color .18s ease;
}
.daga-review__more:hover {
	color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
/* Авторският `display` побеждава `[hidden]` на браузъра — казваме го изрично. */
.daga-review__more[hidden] { display: none; }

p.daga-rating {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-top: 22px; color: var(--muted); font-size: 14px;
}
p.daga-rating::before {
	content: ""; flex: none;
	transform: translateY(var(--icon-nudge));
}
p.daga-rating strong { font-size: 1.375rem; font-weight: 700; color: var(--ink); }

/* --- Контактни карти --- */

.daga-contact-card__body { display: block; min-width: 0; }

/* --- Форма --- */

.daga-form label { display: block; }
.daga-form input[type="submit"] {
	background: var(--pink) var(--icon-send) left 26px top calc(50% + var(--icon-nudge) - var(--optical)) / 17px no-repeat;
	color: #fff; border: 0; border-radius: var(--pill);
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
	padding: calc(17px - var(--optical)) 32px calc(17px + var(--optical)) 52px;
	cursor: pointer; width: auto;
	transition: filter .18s ease, transform .18s ease;
	-webkit-appearance: none; appearance: none;
}
.daga-form input[type="submit"]:hover { filter: brightness(.94); transform: translateY(-1px); }
.daga-form__hint::before {
	content: ""; width: 16px; height: 16px; flex: none; margin-top: -5px;
	background: var(--icon-clock-pink) center / contain no-repeat;
	transform: translateY(var(--icon-nudge));
}

/* --- Лайтбокс за галерията --- */

.daga-gallery .wp-block-image { cursor: zoom-in; }

body.daga-no-scroll { overflow: hidden; }

.daga-lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(16px, 4vw, 56px);
	background: rgba(20, 20, 32, .92);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	animation: daga-fade .22s var(--ease, ease);
}
.daga-lightbox[hidden] { display: none; }

@keyframes daga-fade { from { opacity: 0; } to { opacity: 1; } }

.daga-lightbox__stage {
	display: flex; align-items: center; justify-content: center;
	max-width: 100%; max-height: 100%;
}
.daga-lightbox__img {
	max-width: 100%; max-height: calc(100vh - clamp(80px, 12vw, 160px));
	width: auto; height: auto;
	border-radius: var(--radius);
	box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
	animation: daga-zoom .24s var(--ease, ease);
}

@keyframes daga-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.daga-lightbox__close,
.daga-lightbox__nav {
	position: absolute; z-index: 2;
	display: grid; place-items: center;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff; cursor: pointer;
	border-radius: 50%;
	transition: background .18s ease, transform .18s ease;
}
.daga-lightbox__close:hover,
.daga-lightbox__nav:hover { background: rgba(255, 255, 255, .3); }

.daga-lightbox__close {
	top: 18px; right: 18px; width: 44px; height: 44px; font-size: 17px; line-height: 1;
}
.daga-lightbox__nav {
	top: 50%; transform: translateY(-50%);
	width: 52px; height: 52px; font-size: 30px; line-height: 1; padding-bottom: 4px;
}
.daga-lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.daga-lightbox__nav--prev { left: 18px; }
.daga-lightbox__nav--next { right: 18px; }

.daga-lightbox__count {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	font-size: 13px; font-weight: 600; letter-spacing: .1em;
	color: rgba(255, 255, 255, .75);
}

@media (max-width: 560px) {
	.daga-lightbox__nav { width: 42px; height: 42px; font-size: 24px; }
	.daga-lightbox__nav--prev { left: 8px; }
	.daga-lightbox__nav--next { right: 8px; }
	.daga-lightbox__close { top: 10px; right: 10px; }
	.daga-form input[type="submit"] { margin: auto; }
}

/* --- Календар на български --- */

.daga-date { position: relative; }

/* Родното поле остава във формата заради Contact Form 7, но не се вижда. */
.daga-date__native {
	position: absolute; left: 0; bottom: 0;
	width: 1px; height: 1px; padding: 0; border: 0;
	opacity: 0; pointer-events: none;
}

.daga-form .daga-date__field {
	cursor: pointer;
	background-image: var(--icon-calendar);
	background-repeat: no-repeat;
	background-position: right 14px top calc(50% + var(--icon-nudge));
	background-size: 18px;
	padding-right: 44px;
}
.daga-date.is-invalid .daga-date__field { border-color: #D6336C; background-color: #FFF5F8; }

.daga-date__pop {
	position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
	width: min(316px, 84vw);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 12px 40px rgba(26, 26, 46, .14);
	padding: 14px;
}
.daga-date__pop[hidden] { display: none; }

.daga-date__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.daga-date__title { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.daga-date__nav {
	width: 32px; height: 32px; padding: 0;
	background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
	color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.daga-date__nav:hover:not(:disabled) { background: var(--pink); border-color: var(--pink); color: #fff; }
.daga-date__nav:disabled { opacity: .35; cursor: default; }

.daga-date__week,
.daga-date__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.daga-date__week {
	margin-bottom: 4px;
	font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
	color: var(--muted); text-align: center;
}

.daga-date__day {
	aspect-ratio: 1; padding: 0;
	background: none; border: 0; border-radius: 8px;
	font-family: inherit; font-size: 14px; color: var(--ink);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.daga-date__day:hover:not(:disabled) { background: var(--pink-bg); }
.daga-date__day:disabled { color: #D2D2D9; cursor: default; }
.daga-date__day.is-today { box-shadow: inset 0 0 0 1px var(--pink); }
.daga-date__day.is-selected { background: var(--pink); color: #fff; font-weight: 700; }
.daga-date__blank { display: block; }

/* --- Видео --- */

figure.wp-block-video.daga-video__media-wrap {
	margin: 0; display: flex; align-items: center; justify-content: center;
}

/* Видеото се вижда цялото: височината е ограничена от екрана, а
   ширината следва съотношението 16:9. Тъмни ленти отстрани се появяват
   само на нисък прозорец. */
/* Селекторът носи [poster], за да бие вътрешното правило на ядрото
   `.wp-block-video [poster] { object-fit: cover }`. */
.daga-video video,
.daga-video video[poster] {
	width: auto; max-width: 100%;
	height: min(calc(100vh - var(--header-h-sm) - 24px), 56.25vw);
	object-fit: contain; display: block;
}

/* Вертикалната версия на телефон. И тук видеото се вижда цяло —
   ако съотношението на лентата не съвпада, отстрани остават тъмни
   ленти, вместо кадърът да се реже. */
@media (max-width: 560px) {
	.daga-video video,
	.daga-video video[poster] {
		width: 100%; height: min(78vh, calc(100vw * 16 / 9));
		object-fit: contain;
	}
}

/*
 * Преди първото пускане върху постера стои само нашият бутон: Safari на
 * iPhone рисува собствен голям бутон върху видео без контроли, а Chrome
 * добавя такъв в средата. И двата лягат точно върху нашия, затова ги
 * скриваме — но само дотогава.
 *
 * След като видеото е пуснато, централният бутон на Chrome трябва да
 * остане: на Android той е единственият начин видеото да се спре. Там
 * долната лента носи само времето, прогреса и „цял екран", а play/pause
 * е точно този overlay бутон — скрит ли е, видеото не може да се паузира.
 * (На десктоп и iOS play/pause стои в самата лента, затова там проблемът
 * не се вижда.) Нашият бутон вече е скрит от `.is-playing`, така че двата
 * не се припокриват.
 */
.daga-video:not(.is-playing) video::-webkit-media-controls-start-playback-button,
.daga-video:not(.is-playing) video::-webkit-media-controls-overlay-play-button {
	display: none;
	-webkit-appearance: none;
}

/* --- Отзивчивост --- */

@media (max-width: 900px) {
	figure.wp-block-gallery.daga-insta { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
	figure.wp-block-gallery.daga-gallery { grid-template-columns: repeat(2, 1fr); }
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(1) {
		grid-column: span 2; grid-row: span 1; aspect-ratio: 8 / 5;
	}
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(2),
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(3) {
		aspect-ratio: 8 / 5; height: auto;
	}
}

@media (max-width: 560px) {
	/* Заглавните части се смаляват заедно с типографията си — виж
	   същия праг в main.css. */
	.daga-section .wp-block-group.daga-head { margin-bottom: 30px; }
	.daga-section .wp-block-group.daga-tabs { margin-bottom: 34px; }

	/* Всяка снимка е на собствен ред — иначе двете в редица излизат
	   твърде дребни, за да се види каквото и да е по тях. */
	figure.wp-block-gallery.daga-gallery { grid-template-columns: 1fr; gap: 10px; }
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image,
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(1),
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(2),
	figure.wp-block-gallery.daga-gallery > figure.wp-block-image:nth-child(3) {
		grid-column: auto; grid-row: auto; aspect-ratio: 8 / 5; height: auto;
	}
}

@media (max-width: 480px) {
	figure.wp-block-gallery.daga-insta { grid-template-columns: repeat(2, 1fr); }
}
