/*--------------------------------------------------------------
 Подаръчни ваучери (/vaucheri/) — template-parts/voucher/builder.php
--------------------------------------------------------------*/
@font-face {font-family: 'PM Voucher'; src: url('../fonts/voucher/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap;}
@font-face {font-family: 'PM Voucher'; src: url('../fonts/voucher/Montserrat-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap;}

/* Цветът на вида: --voucher-tone е като в старите ваучери и в SVG четките */
.voucher-builder[data-tone="paint-wine"] {--voucher-tone: #620524; --voucher-tint: #6205241A; --voucher-brush: url(/wp-content/themes/paintme/img/background/voucher-paint-wine.svg);}
.voucher-builder[data-tone="kids"] {--voucher-tone: #E60019; --voucher-tint: #E600191A; --voucher-brush: url(/wp-content/themes/paintme/img/background/voucher-children.svg);}

/* Скритите опции на другия вид (d-flex на Bootstrap иначе надделява над hidden) */
.voucher-builder [hidden] {display: none !important;}

/* Вид: логото от менюто + името */
.voucher-type {border: 1px solid var(--border-color); border-radius: var(--product-border-radius); background: var(--product-background-color); cursor: pointer; transition: var(--transition);}
.voucher-type:hover {border-color: var(--main-dark-color);}
.voucher-type__logo {width: 3.25rem; height: 3.25rem; background: no-repeat center / contain;}
.voucher-type--paint-wine .voucher-type__logo {background-image: var(--icon-nav-paint-wine);}
.voucher-type--kids .voucher-type__logo {background-image: var(--icon-nav-children);}
.btn-check:checked + .voucher-type {border-color: var(--main-dark-color); background: var(--main-light-color); box-shadow: 0 0 0 1px var(--main-dark-color);}
.btn-check:focus-visible + .voucher-type,
.btn-check:focus-visible + .voucher-swatch,
.btn-check:focus-visible + .voucher-period {outline: 2px solid var(--main-darker-color); outline-offset: 2px;}

.voucher-builder {--voucher-title: #620524;} /* заглавието е бордо и за двата вида */
.voucher-name {font-size: 2.5rem; margin: 0; color: var(--voucher-title);}
/* Цената: черната четка от продуктовите страници, но по-едра — основната информация тук */
.voucher-price {background-size: cover; background-position: left center;}
.voucher-price__amount {font-size: 1.5rem; font-weight: 600; line-height: 1.2;}
.voucher-price__note {font-size: .9rem; font-style: italic; color: var(--text-light-color);}

/* Сивата кутия като на продукта, но с четката на вида отгоре (старите ваучери) */
.voucher-box {position: relative; margin-top: 2.5rem; background: var(--voucher-tint); border-top-left-radius: 0; border-top-right-radius: 0; transition: var(--transition);}
.voucher-box::before {content: ""; position: absolute; left: 0; right: 0; bottom: 100%; aspect-ratio: 279.48 / 20.16; background: var(--voucher-brush) no-repeat center bottom / 100% auto;}
.event-info .event-label.gift::before {background-image: var(--icon-gift-line); background-size: contain;}
.voucher-box legend.event-label {float: none; width: auto;}
.voucher-box .form-control:not(.quantity-input) {border: 0; border-radius: var(--input-border-radius); background: var(--main-light-color);}

/* Дизайн: кръгчета с панделката */
.voucher-swatch {cursor: pointer;}
.voucher-swatch__img {width: 4rem; height: 4rem; object-fit: cover; box-shadow: 0 0 0 2px var(--main-light-color); transition: var(--transition);}
.voucher-swatch:hover .voucher-swatch__img {box-shadow: 0 0 0 2px var(--main-light-color), 0 0 0 4px var(--border-color);}
.btn-check:checked + .voucher-swatch .voucher-swatch__img {box-shadow: 0 0 0 2px var(--main-light-color), 0 0 0 4px var(--main-dark-color);}
.btn-check:checked + .voucher-swatch span {color: var(--main-dark-color); font-weight: 600;}

/* Валидност: като периодите в старите ваучери */
.period-buttons {background: var(--main-light-color); border-radius: var(--input-border-radius); padding: .35rem; gap: .25rem;}
.voucher-period {border: 0; border-radius: var(--input-border-radius); color: var(--text-dark-color); transition: var(--transition);}
.voucher-period:hover {color: var(--main-dark-color);}
.btn-check:checked + .voucher-period {background: var(--main-dark-color); color: var(--main-light-color);}

/* Жив преглед — позициите са като в PDF-а (template-parts/voucher/pdf.php). RUS: кирилицата като в макета, не българските курсивни форми */
.voucher-preview {position: relative; max-width: 460px; container-type: inline-size; font-family: 'PM Voucher', sans-serif; font-style: italic; font-language-override: 'RUS'; line-height: 1.3; border-radius: var(--img-border-radius); box-shadow: 0 .5rem 1.5rem var(--dark-opacity);}
.voucher-preview__img--next {position: absolute; inset: 0; opacity: 0; transition: var(--transition);}
.voucher-preview__img--next.is-visible {opacity: 1;}
@media (prefers-reduced-motion: reduce) {.voucher-preview__img--next {transition: none;}}
.voucher-preview__msg {top: 65.5%; left: 6%; right: 6%; max-height: 8.6%; overflow: hidden; color: var(--main-darker-color); font-weight: 600; font-size: 2.15cqw; white-space: pre-line;}
.voucher-preview__from {top: 73.6%; right: 6%; color: var(--text-dark-color); font-size: 2.15cqw;}
.voucher-preview__period, .voucher-preview__code {top: 84.6%; color: var(--main-light-color); font-size: 2.1cqw;}
.voucher-preview__period {left: 4.5%;}
.voucher-preview__code {right: 4.5%;}
.voucher-preview__includes {top: 88.2%; left: 4.5%; right: 4.5%; color: var(--main-light-color); font-size: 1.75cqw;}
.voucher-preview__site {top: 95.3%; left: 45.7%; color: var(--main-light-color); font-size: 1.9cqw; font-style: normal;}
.voucher-preview b {font-weight: 600; margin-left: .3em;}
@media (min-width: 992px) {.voucher-preview {position: sticky; top: 6rem;}}
@media (max-width: 575px) {
    .voucher-preview {max-width: 320px;}
    .voucher-type {flex-direction: column; text-align: center; gap: .25rem !important;}
    .voucher-type__logo {width: 2.5rem; height: 2.5rem;}
    .voucher-name {font-size: 2rem;}
    .voucher-period {padding-inline: .25rem; white-space: nowrap;}
}