в .daga-head — трябва по-тежък селектор. */ .daga-head p.daga-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .25em; margin: 0 0 18px; max-width: none; } /* -------------------------------------------------------------------------- Бутони -------------------------------------------------------------------------- */ .daga-btn { --btn-bg: var(--pink); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--btn-bg); color: var(--btn-fg); font-family: inherit; font-size: 14px; font-weight: 500; padding: calc(10px - var(--optical)) 20px calc(10px + var(--optical)); border: 0; border-radius: var(--pill); cursor: pointer; text-align: center; transition: filter .18s ease, transform .18s ease, box-shadow .18s ease; } .daga-btn:hover { color: var(--btn-fg); filter: brightness(.94); transform: translateY(-1px); } .daga-btn:active { transform: translateY(0); } .daga-btn .daga-icon { width: 18px; height: 18px; flex: none; transform: translateY(var(--icon-nudge)); } .daga-btn--block { display: flex; width: 100%; padding-block: calc(17px - var(--optical)) calc(17px + var(--optical)); } /* Текстов бутон „ВИЖ ОЩЕ" */ .daga-more { text-align: center; margin-top: 40px; } .daga-more__btn { background: none; border: 0; padding: 6px 4px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); transition: color .18s ease; } .daga-more__btn:hover { color: var(--pink); } .daga-more__count { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); } /* -------------------------------------------------------------------------- Хедър -------------------------------------------------------------------------- */ .daga-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } .daga-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 16px rgba(26, 26, 46, .05); } .daga-header__inner { max-width: var(--w-header); margin-inline: auto; padding-inline: var(--gutter); min-height: var(--header-h); display: flex; align-items: center; gap: 24px; transition: min-height .32s var(--ease); } .daga-brand { flex: none; display: block; line-height: 0; } .daga-brand svg, .daga-brand img { width: auto; height: var(--logo-h); transition: height .32s var(--ease); } /* Смаляване при скролване */ .daga-header.is-shrunk .daga-header__inner { min-height: var(--header-h-sm); } .daga-header.is-shrunk .daga-brand svg, .daga-header.is-shrunk .daga-brand img { height: var(--logo-h-sm); } .daga-header.is-shrunk .daga-btn { padding-block: 12px; } .daga-header.is-shrunk .daga-header__phone { font-size: 14px; } .daga-header .daga-btn, .daga-header__phone { transition: padding .32s var(--ease), font-size .32s var(--ease), color .18s ease; } .daga-nav { margin-inline: auto; } .daga-nav ul { display: flex; align-items: center; gap: 44px; list-style: none; margin: 0; padding: 0; } .daga-nav a { color: var(--nav); font-size: 14px; font-weight: 500; padding: 8px 0; position: relative; display: inline-block; } .daga-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--pink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .daga-nav a:hover, .daga-nav a.is-active { color: var(--ink); } .daga-nav a:hover::after, .daga-nav a.is-active::after { transform: scaleX(1); } .daga-header__actions { flex: none; display: flex; align-items: center; gap: 22px; } .daga-header__phone { display: inline-flex; align-items: center; gap: 9px; color: var(--nav); font-weight: 600; font-size: 14px; line-height: 1; } /* Иконата се подравнява по оптичния център на цифрите, не по line-box-а. */ .daga-header__phone .daga-icon { width: 18px; height: 18px; flex: none; color: var(--nav); display: block; transform: translateY(var(--icon-nudge-num)); } .daga-header__phone > span { display: block; line-height: 1; color: #1A1A2E73; } .daga-header__phone:hover { color: var(--pink); } .daga-header__phone:hover .daga-icon { color: var(--pink); } .daga-burger { display: none; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; align-items: center; justify-content: center; } .daga-burger span { display: block; position: relative; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: background .2s; } .daga-burger span::before, .daga-burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s ease; } .daga-burger span::before { top: -7px; } .daga-burger span::after { top: 7px; } .daga-burger[aria-expanded="true"] span { background: transparent; } .daga-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .daga-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ /* Снимката, затъмняването и позиционирането ги прави core/cover — тук само размерът и типографията върху нея. */ .daga-hero { min-height: clamp(340px, 52vw, 720px); padding: clamp(56px, 7vw, 104px) var(--gutter); text-align: center; } .daga-hero .wp-block-cover__inner-container { max-width: 860px; } .daga-hero h1 { margin: 0 0 18px; color: #fff; font-size: clamp(2.2rem, 1.1rem + 3.2vw, 4rem); line-height: 1.14; text-shadow: 0 2px 26px rgba(0, 0, 0, .3); } .daga-hero__text { margin: 0 auto; max-width: 660px; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 16px rgba(0, 0, 0, .34); } /* -------------------------------------------------------------------------- Пакети -------------------------------------------------------------------------- */ .daga-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 44px; flex-wrap: wrap; } .daga-tab { min-width: 170px; background: var(--white); color: var(--body); border: 1px solid var(--line); border-radius: var(--pill); /* Изрично, за да не зависи от `normal` — той се смени с метриките. */ padding: calc(17px - var(--optical)) 30px calc(17px + var(--optical)); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .daga-tab:hover { color: var(--ink); border-color: #DDDDE4; } .daga-tab[aria-selected="true"] { background: var(--pink); border-color: var(--pink); color: #fff; font-weight: 600; box-shadow: 0 6px 18px rgba(245, 135, 168, .32); } /* * Неселектираната опция диша с разсеян розов ореол — иначе мнозина не * забелязват, че пакетите са два вида. Само сянка, без промяна на размера, * за да не подскача редът. Пулсът се мести заедно с избора. */ @keyframes daga-tab-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 135, 168, 0); } 50% { box-shadow: 0 0 26px 8px rgba(245, 135, 168, .42); } } .daga-tabs.is-hinting .daga-tab[aria-selected="false"] { animation: daga-tab-halo 2.4s var(--ease) infinite; } /* Всички карти са с еднаква височина: редовете се делят поравно, а тялото на картата се разпъва, за да остане бутонът долепен долу. */ .daga-pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; grid-auto-rows: 1fr; } .daga-pkgs[hidden] { display: none; } /* Панел с една карта — тя не се разлива на цялата ширина. */ .daga-pkgs--solo { grid-template-columns: minmax(0, 540px); justify-content: center; } .daga-pkg { --accent: #F472B6; --accent-bg: #FEE5F3; --accent-soft: #FFF6FB; --accent-line: rgba(244, 114, 182, .28); --accent-dot: rgba(244, 114, 182, .22); --accent-chip: rgba(244, 114, 182, .16); border: 1px solid var(--accent-line); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); display: flex; flex-direction: column; } .daga-pkg--pink { --accent: #F472B6; --accent-bg: #FEE5F3; --accent-soft: #FFF6FB; --accent-line: rgba(244, 114, 182, .28); --accent-dot: rgba(244, 114, 182, .22); --accent-chip: rgba(244, 114, 182, .16); } .daga-pkg--blue { --accent: #3B82F6; --accent-bg: #E0EDFE; --accent-soft: #F5F9FF; --accent-line: rgba(59, 130, 246, .28); --accent-dot: rgba(59, 130, 246, .22); --accent-chip: rgba(59, 130, 246, .14); } .daga-pkg--gold { --accent: #D4980A; --accent-bg: #FBF2D9; --accent-soft: #FFFCF4; --accent-line: rgba(212, 152, 10, .30); --accent-dot: rgba(212, 152, 10, .22); --accent-chip: rgba(212, 152, 10, .16); } .daga-pkg--teal { --accent: #2A9D8F; --accent-bg: #DFF2F0; --accent-soft: #F5FBFA; --accent-line: rgba(42, 157, 143, .28); --accent-dot: rgba(42, 157, 143, .22); --accent-chip: rgba(42, 157, 143, .14); } .daga-pkg--sky { --accent: #3FA9E0; --accent-bg: #E3F4FD; --accent-soft: #F4FBFE; --accent-line: rgba(63, 169, 224, .30); --accent-dot: rgba(63, 169, 224, .22); --accent-chip: rgba(63, 169, 224, .16); } /* — Класически пакет (Рожден ден) — */ .daga-pkg__head { position: relative; overflow: hidden; background: var(--accent-bg); padding: 34px 28px 30px; text-align: center; border-bottom: 1px solid var(--accent-line); } /* Точките зад съдържанието на главата. */ .daga-pkg__head::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, var(--accent-dot) 46%, transparent 47%), radial-gradient(circle, var(--accent-chip) 46%, transparent 47%), radial-gradient(circle, var(--accent-dot) 46%, transparent 47%), radial-gradient(circle, var(--accent-chip) 46%, transparent 47%); background-repeat: no-repeat; background-size: 15px 15px, 11px 11px, 13px 13px, 9px 9px; background-position: 20% 62%, 12% 34%, 80% 62%, 88% 30%; } /* Сърчицата, звездичките и искриците от дизайна. Три слоя маска в цвета на пакета — по две едри фигури встрани и една малка. */ .daga-pkg__head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--accent); opacity: .9; -webkit-mask-image: var(--orn), var(--orn), var(--orn); mask-image: var(--orn), var(--orn), var(--orn); -webkit-mask-repeat: no-repeat, no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat, no-repeat; -webkit-mask-size: 26px 26px, 26px 26px, 15px 15px; mask-size: 26px 26px, 26px 26px, 15px 15px; -webkit-mask-position: 5% 30%, 95% 23%, 15% 55%; mask-position: 5% 30%, 95% 23%, 15% 55%; } .daga-pkg--pink .daga-pkg__head { --orn: var(--orn-heart); } .daga-pkg--blue .daga-pkg__head { --orn: var(--orn-star); } .daga-pkg--gold .daga-pkg__head { --orn: var(--orn-sparkle); } .daga-pkg--teal .daga-pkg__head { --orn: var(--orn-dot); } .daga-pkg--sky .daga-pkg__head { --orn: var(--orn-star); } .daga-pkg__rainbow { width: 62px; height: auto; margin: 0 auto 12px; position: relative; } /* Отстоянието отдолу е в blocks.css — там, където се връща изяденото от нулирането на `.wp-block-heading`. */ .daga-pkg__title { position: relative; font-size: 1.375rem; font-weight: 600; color: var(--accent); margin: 0; letter-spacing: -.01em; } .daga-pkg__meta { position: relative; display: block; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .daga-pkg__body { padding: 26px 28px 28px; background: var(--accent-soft); flex: 1; display: flex; flex-direction: column; } .daga-pkg__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 13px; } .daga-pkg__list li { position: relative; padding-left: 32px; font-size: var(--text); line-height: 1.5; color: var(--ink); } .daga-pkg__list li::before { content: ""; position: absolute; left: 0; top: calc((1.5em - 20px) / 2 + var(--icon-nudge)); width: 20px; height: 20px; border-radius: 50%; background: var(--accent-chip); } .daga-pkg__list li::after { content: ""; position: absolute; left: 4px; top: calc((1.5em - 12px) / 2 + var(--icon-nudge)); width: 12px; height: 12px; background: var(--accent); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; } /* — Добавки по избор — */ p.daga-addons__title { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } /* Пунктиран борд в цвета на пакета — както при бележките в дизайна. */ .daga-addon { background: var(--white); border: 1px dashed color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; transition: border-color .18s ease, background-color .18s ease; } .daga-addon:last-child { margin-bottom: 0; } /* Избраната добавка остава по-светла от тялото на картата — иначе се слива с фона му и се губи. */ .daga-addon.is-picked { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--white)); } /* Редът става избираем чак когато скриптът е сложил полето — дотогава стои като обикновен списък с цени. */ .daga-addon.is-ready .daga-addon__row { cursor: pointer; } .daga-addon.is-ready:hover { border-color: var(--accent); } .daga-addon__row { display: flex; align-items: flex-start; gap: 10px; } .daga-addon__body { flex: 1; min-width: 0; } .daga-addon p { margin: 0; } p.daga-addon__name { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); } p.daga-addon__price { flex: none; margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* Самото поле — кутийка и кръгче в цвета на пакета. */ .daga-addon__input { flex: none; -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; padding: 0; /* Оптически на височината на първия ред текст. */ transform: translateY(1px); background: var(--field-bg, #F9F9FB); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .daga-addon__input[type="radio"] { border-radius: 50%; } .daga-addon__input:hover { border-color: var(--accent); } .daga-addon__input:checked { background: var(--accent); border-color: var(--accent); } .daga-addon__input[type="checkbox"]:checked::after { content: ""; display: block; width: 100%; height: 100%; background: var(--white); -webkit-mask: var(--icon-check) center / 14px 14px no-repeat; mask: var(--icon-check) center / 14px 14px no-repeat; } /* Кръгчето се рисува като градиент върху цялата кутия: центърът му е центърът на полето, независимо какви полета му дава браузърът. */ .daga-addon__input[type="radio"]:checked::after { content: ""; display: block; width: 100%; height: 100%; background: radial-gradient(circle at 50% 50%, var(--white) 0 3px, transparent 3.5px); } .daga-addon__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Нивата и допълненията излизат под реда, щом добавката е включена. */ .daga-addon__opts, .daga-addon__subs { margin-top: 10px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--accent) 32%, transparent); display: grid; gap: 8px; } .daga-addon__opts[hidden], .daga-addon__subs[hidden] { display: none; } .daga-addon__opt, .daga-addon__sub { margin: 0; } p.daga-addon__opt-name, p.daga-addon__sub-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.4; } p.daga-addon__opt-desc { font-size: 12.5px; color: var(--body); line-height: 1.45; margin-top: 2px; } p.daga-addon__opt-price, p.daga-addon__sub-price { flex: none; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; } /* — Цената над бутона — */ .daga-pkg__total { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--accent-line); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 14px; } p.daga-pkg__total-label { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } p.daga-pkg__price { margin: 0; text-align: right; font-size: 1.75rem; font-weight: 600; line-height: 1.05; color: var(--accent); } p.daga-pkg__total-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12.5px; color: var(--body); } p.daga-pkg__total-note[hidden] { display: none; } .daga-pkg__cta { margin-top: 14px; padding-top: 0; } .daga-pkg .daga-btn { --btn-bg: var(--accent); } /* — Арт пакет — */ .daga-pkg--art .daga-pkg__head { text-align: left; padding: 26px 26px 24px; } .daga-pkg--art .daga-pkg__head::before { background-size: 13px 13px, 9px 9px, 11px 11px, 7px 7px; background-position: 88% 64%, 81% 36%, 95% 46%, 78% 80%; } /* Арт картите са с точки по дизайн — без сърца и звезди. */ .daga-pkg--art .daga-pkg__head::after { display: none; } .daga-pkg__badge { background: var(--accent); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; white-space: nowrap; } /* В арт картите табелката стои в потока — вече няма цена до нея. */ .daga-pkg--art .daga-pkg__badge { position: relative; display: inline-block; margin: 0 0 14px; } .daga-pkg__name { position: relative; font-size: 1.1875rem; font-weight: 600; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); margin: 0 0 4px; } .daga-pkg__for { position: relative; display: block; font-style: italic; font-weight: 600; font-size: 14px; color: var(--accent); margin: 0px; } .daga-pkg__chip { position: relative; display: inline-block; margin: 10px 0px; background: var(--accent-chip); color: var(--accent); font-size: 13px; font-weight: 600; border-radius: var(--pill); padding: calc(5px - var(--optical)) 14px calc(5px + var(--optical)); } .daga-pkg__desc { position: relative; font-size: var(--text-sm); color: var(--body); margin: 0; } .daga-pkg--art .daga-pkg__list li { font-size: var(--text-sm); } .daga-pkg--art p.daga-addon__name { font-size: 13.5px; } /* -------------------------------------------------------------------------- Видео -------------------------------------------------------------------------- */ /* Уводът над видеото е отделна секция — вътре в `.daga-video` бутонът за пускане би се центрирал спрямо текста, а фонът е тъмен. */ .daga-section--video-intro { padding-bottom: 0; } /* На десктоп върви хоризонталната (16:9) версия и запълва лентата от дизайна. На тесни екрани скриптът подменя източника с вертикалната. */ .daga-video { position: relative; overflow: hidden; background: var(--ink); } .daga-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease, opacity .2s ease; } .daga-video__play .daga-icon { width: 26px; height: 26px; margin-left: 0px; } .daga-video__play:hover { background: rgba(255, 255, 255, .3); transform: translate(-50%, -50%) scale(1.06); } .daga-video.is-playing .daga-video__play { opacity: 0; pointer-events: none; } /* -------------------------------------------------------------------------- Галерия -------------------------------------------------------------------------- */ .daga-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .daga-gallery__item { margin: 0; aspect-ratio: 8 / 5; } .daga-gallery__item--feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .daga-gallery__item[hidden] { display: none; } .daga-gallery a { display: block; overflow: hidden; border-radius: var(--radius); height: 100%; } .daga-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; transition: transform .4s ease; } .daga-gallery a:hover img { transform: scale(1.04); } /* -------------------------------------------------------------------------- Ревюта -------------------------------------------------------------------------- */ .daga-rating { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; } .daga-stars { display: inline-flex; gap: 4px; } .daga-stars .daga-icon { width: 17px; height: 17px; color: var(--yellow); } .daga-rating__score { font-size: 1.375rem; font-weight: 600; color: var(--ink); line-height: 1; } .daga-rating__count { font-size: 14px; color: var(--muted); } .daga-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .daga-review { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px 26px; box-shadow: var(--shadow-sm); } .daga-review__top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .daga-review__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 14px; font-weight: 600; /* * Оптически на центъра, както при хапчетата: разликата се изважда от * горния падинг и се добавя към долния. Едностранен падинг не върши * работа — там, където поправката е отрицателна, браузърът реже * отрицателния падинг до нула и инициалите остават изместени. * Основата 4px само гарантира, че и двете страни остават положителни. */ padding-block: calc(4px - var(--optical)) calc(4px + var(--optical)); } .daga-review__who { flex: 1; min-width: 0; } .daga-review__name { display: block; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .daga-review__when { display: block; font-size: 12px !important; color: var(--muted); } .daga-review__g { flex: none; width: 20px; height: 20px; } .daga-review .daga-stars { margin-block: 4px 16px; } .daga-review p { font-size: var(--text); line-height: 1.5; margin: 0; } .daga-review[hidden] { display: none; } /* -------------------------------------------------------------------------- Контакт -------------------------------------------------------------------------- */ .daga-contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 44px; } .daga-contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px; text-align: center; transition: box-shadow .2s ease, transform .2s ease; } .daga-contact-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .daga-contact-card__icon { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; } .daga-contact-card__icon .daga-icon { width: 20px; height: 20px; } .daga-contact-card--pink .daga-contact-card__icon { background: var(--pink-bg); color: var(--pink); } .daga-contact-card--blue .daga-contact-card__icon { background: var(--blue-bg); color: var(--blue); } .daga-contact-card--yellow .daga-contact-card__icon { background: var(--yellow-bg); color: var(--yellow); } .daga-contact-card__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .daga-contact-card__value { display: block; font-size: 16px; font-weight: 600; color: var(--ink); } a.daga-contact-card:hover .daga-contact-card__value { color: var(--pink); } .daga-contact-card--viber .daga-contact-card__icon { background: var(--viber-bg); color: var(--viber); } a.daga-contact-card--viber:hover .daga-contact-card__value { color: var(--viber); } .daga-form-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow); overflow: hidden; } .daga-form-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--rainbow); } /* Форма — важи и за Contact Form 7, и за резервния HTML вариант */ .daga-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 22px; } .daga-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .daga-form__field--full { grid-column: 1 / -1; } .daga-form__field > label, .daga-form__field > .daga-form__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--label); } .daga-form__req { color: var(--pink); } .daga-form input[type="text"], .daga-form input[type="tel"], .daga-form input[type="email"], .daga-form input[type="date"], .daga-form input[type="number"], .daga-form select, .daga-form textarea { width: 100%; background: var(--field-bg); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 15px 17px; font-family: inherit; font-size: var(--text); color: var(--ink); /* Само цветът — `background` би анимирал и стрелката на дропдауна. */ transition: border-color .18s ease, background-color .18s ease; -webkit-appearance: none; appearance: none; } .daga-form textarea { min-height: 132px; resize: vertical; line-height: 1.5; } .daga-form select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23A4ACB6'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; padding-right: 42px; /* Имената на пакетите са дълги — малко по-дребен шрифт ги побира. */ font-size: 14px; text-overflow: ellipsis; } .daga-form select option { font-size: 14px; } .daga-form ::placeholder { color: #C4C4CE; opacity: 1; } .daga-form input:focus, .daga-form select:focus, .daga-form textarea:focus { /* `background` е съкращение и трие `background-image` — стрелката. */ outline: none; background-color: var(--white); border-color: var(--pink); } .daga-form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; } .daga-form__hint { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--muted); line-height: 1; } .daga-form__hint .daga-icon { width: 16px; height: 16px; } /* * Избраният пакет * * Кутията се пълни от скрипта при щракане на „Резервирайте сега" и е * жив образ на картата — затова стойностите ѝ отиват в скритите полета * `paket` и `dobavki`, а те заминават с писмото. */ .daga-form__selection { display: none; } .daga-summary { grid-column: 1 / -1; background: var(--pink-bg); border: 1px solid rgba(245, 135, 168, .35); border-radius: var(--radius); padding: 18px 20px; } .daga-summary[hidden] { display: none; } .daga-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .daga-summary__eyebrow { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); } .daga-summary__clear { padding: 0; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--body); transition: color .18s ease; } .daga-summary__clear:hover { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; } .daga-summary__name { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--ink); } .daga-summary__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .daga-summary__item { display: flex; align-items: baseline; gap: 10px; font-size: var(--text-sm); color: var(--body); line-height: 1.45; } .daga-summary__label { flex: 1; min-width: 0; } .daga-summary__price { flex: none; font-weight: 600; color: var(--ink); white-space: nowrap; } .daga-summary__item--base { color: var(--ink); } .daga-summary__drop { flex: none; width: 22px; height: 22px; padding: 0; /* Редът се подравнява по базовата линия, но бутонът няма текстова такава — затова го центрираме спрямо височината на самия ред. */ align-self: flex-start; margin-top: calc((var(--text-sm) * 1.45 - 22px) / 2); display: grid; place-items: center; background: rgba(255, 255, 255, .7); border: 1px solid rgba(245, 135, 168, .4); border-radius: 50%; cursor: pointer; font-family: inherit; font-size: 14px; line-height: 1; color: var(--pink); transition: background .18s ease, color .18s ease; } .daga-summary__drop:hover { background: var(--pink); border-color: var(--pink); color: #fff; } .daga-summary__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(245, 135, 168, .5); } .daga-summary__total-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); } .daga-summary__total-sum { font-size: 1.375rem; font-weight: 700; color: var(--ink); } /* Съгласие с Политиката за поверителност — отметката стои над бутона */ .daga-form__consent { margin-top: 4px; } .daga-form__consent .wpcf7-list-item { margin: 0; } .daga-form__consent label { display: flex; align-items: flex-start; gap: 11px; margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--body); cursor: pointer; } .daga-form__consent input[type="checkbox"] { flex: none; -webkit-appearance: none; appearance: none; width: 19px; height: 19px; margin: 0; /* Оптически на височината на първия ред текст. */ transform: translateY(1px); background: var(--field-bg); border: 1.5px solid #DDDDE4; border-radius: 6px; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .daga-form__consent input[type="checkbox"]:hover { border-color: var(--pink); } .daga-form__consent input[type="checkbox"]:checked { background: var(--pink); border-color: var(--pink); } .daga-form__consent input[type="checkbox"]:checked::after { content: ""; display: block; width: 100%; height: 100%; background: var(--white); -webkit-mask: var(--icon-check) center / 15px 15px no-repeat; mask: var(--icon-check) center / 15px 15px no-repeat; } .daga-form__consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; } .daga-form__consent a { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; } .daga-form__consent a:hover { color: var(--ink); } .daga-form__consent .wpcf7-not-valid-tip { margin-top: 6px; } /* Съобщения на Contact Form 7 */ .wpcf7 form .wpcf7-response-output { grid-column: 1 / -1; margin: 8px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14.5px; } .wpcf7 form.sent .wpcf7-response-output { border-color: #2A9D8F; background: #F0FAF8; color: #1F6F65; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--pink); background: #FFF5F8; color: #B4436B; } .wpcf7-not-valid-tip { font-size: 13px; color: #D6336C; margin-top: 2px; } .wpcf7-spinner { margin: 0 0 0 10px; } .daga-form .wpcf7-form-control-wrap { display: block; } /* -------------------------------------------------------------------------- Често задавани въпроси -------------------------------------------------------------------------- */ .daga-faq { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .daga-faq__item + .daga-faq__item { border-top: 1px solid var(--line); } /* Въпросът е