/* Форми й модалки: запит (03), співпраця (15), «Написати нам» (14). */

/* ---------- Модалка ---------- */
.vv-modal { position: fixed; inset: 0; z-index: 140; overflow-y: auto; overscroll-behavior: contain; background: var(--vv-white); }
.vv-modal[hidden] { display: none; }
.vv-modal__backdrop { display: none; }
.vv-modal__box { position: relative; min-height: 100%; background: var(--vv-white); }
.vv-modal__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 16px; background: var(--vv-white); border-bottom: 1px solid var(--vv-black); }
.vv-modal__bar-title { font: var(--vv-nav); letter-spacing: .16em; text-transform: uppercase; color: var(--vv-black); }
.vv-modal__x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -10px; color: var(--vv-black); }
.vv-hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Поля ---------- */
.vv-form { display: flex; flex-direction: column; }
.vv-fs { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vv-fs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vv-fl > span { display: block; }
@media (max-width: 1023px) { .vv-fl > .vv-hide-m { display: none; } .vv-drop__pick > .vv-hide-m { display: none; } }
.vv-drop__pick > span { display: block; }
.vv-fl { display: block; padding: 0; font: 500 10px/12px var(--vv-font); letter-spacing: .18em; text-transform: uppercase; color: var(--vv-ink-2); }
.vv-fs__hint { font: 400 12px/20px var(--vv-font); color: var(--vv-stone); }
.vv-form__row { display: flex; flex-direction: column; gap: 24px; }
.vv-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vv-form .vv-input, .vv-form .vv-textarea { background: transparent; }
.vv-form .vv-textarea { min-height: 96px; }
.vv-form .is-invalid .vv-input, .vv-form .is-invalid .vv-textarea { border-color: var(--vv-wine); }
.vv-field-error { display: block; font: 400 12px/18px var(--vv-font); color: var(--vv-wine); }
.vv-field-error[hidden] { display: none; }
.vv-form__msg { font: 400 13px/22px var(--vv-font); color: var(--vv-wine); }
.vv-form .vv-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.vv-form .vv-check__input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1px solid var(--vv-line-strong); border-radius: 0; background: transparent center / 12px no-repeat; appearance: none; cursor: pointer; }
.vv-form .vv-check__input:checked { border-color: var(--vv-wine); background-color: var(--vv-wine); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 6.2 2.6 2.6L10 3.4' fill='none' stroke='%23F6F5F1' stroke-width='1.4'/%3E%3C/svg%3E"); }
.vv-form .vv-check__text { font: 400 13px/22px var(--vv-font); color: var(--vv-ink-2); }
.vv-form__consent { flex-wrap: wrap; }
.vv-form__consent .vv-check__text { flex: 1; min-width: 0; }
.vv-form__consent .vv-field-error { flex-basis: 100%; }

/* Чипи */
.vv-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.vv-opt { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--vv-line); font: 500 11px/12px var(--vv-font); letter-spacing: .1em; text-transform: uppercase; color: var(--vv-ink-2); }
.vv-opt.is-on { border-color: var(--vv-wine); color: var(--vv-wine); font-weight: 600; }
.vv-opts--cat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vv-opts--cat .vv-opt { grid-column: span 2; }
.vv-opts--cat .vv-opt:nth-child(4), .vv-opts--cat .vv-opt:nth-child(5) { grid-column: span 3; }
.vv-opts--cat .vv-opt:nth-child(6) { grid-column: span 6; }
.vv-opts--kind { display: grid; grid-template-columns: 1fr 1fr; }
.vv-opts--kind .vv-opt:nth-child(3) { grid-column: span 2; }

/* Відтінки */
.vv-shades { display: flex; flex-wrap: wrap; gap: 12px; }
.vv-shades__dot { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.vv-shades__dot--d { display: none; }
.vv-shades__dot.is-on { box-shadow: 0 0 0 2px var(--vv-white), 0 0 0 3px var(--vv-wine); }
.vv-shades__dot--q { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--vv-stone); font: 500 13px/13px var(--vv-font); color: var(--vv-ink-2); }

/* Фото */
.vv-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 96px; border: 1px dashed var(--vv-line-strong); cursor: pointer; text-align: center; transition: border-color .2s var(--vv-ease), background-color .2s var(--vv-ease); }
.vv-drop.is-over, .vv-drop:hover { border-color: var(--vv-wine); }
.vv-drop:focus-within { outline: 1px solid var(--vv-black); outline-offset: 2px; }
.vv-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.vv-drop__icon { color: var(--vv-black); }
.vv-request .vv-fs:has(.vv-drop) { gap: 8px; }
@media (max-width: 1023px) { .vv-fs__head { display: block; } }
.vv-drop__pick { font: 500 11px/12px var(--vv-font); letter-spacing: .14em; text-transform: uppercase; color: var(--vv-black); }
.vv-drop__or { font: 400 13px/22px var(--vv-font); color: var(--vv-stone); }
.vv-drop__thumbs { display: flex; gap: 8px; }
.vv-drop__thumbs:empty { display: none; }
.vv-drop__thumb { position: relative; width: 72px; height: 72px; background: var(--vv-sand); }
.vv-drop__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vv-drop__rm { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; background: rgba(21,21,21,.6); color: var(--vv-ivory); font: 400 11px/22px var(--vv-font); }

/* Подяка після відправки */
.vv-form__done { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 64px 24px; text-align: center; }
.vv-form__done[hidden] { display: none; }
.vv-form__done-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vv-wine); color: var(--vv-ivory); }
.vv-form__done-text { max-width: 420px; font: 400 16px/28px var(--vv-font); color: var(--vv-black); }

/* ---------- Запит (телефон) ---------- */
.vv-request__head { padding: 24px 16px 0; }
.vv-request__head[hidden], .vv-collab__head[hidden] { display: none; }
.vv-request__intro, .vv-collab__intro { font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }
.vv-request__body { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 0; }
.vv-request__body .vv-form__row { flex-direction: row; gap: 11px; }
.vv-request__body .vv-form__row .vv-form__field { flex: 1; }
.vv-request__body .vv-form__row:last-child { flex-direction: column; gap: 24px; }
.vv-request__foot { display: flex; flex-direction: column; gap: 24px; padding: 24px 16px 32px; }
.vv-request__note { padding: 16px; background: var(--vv-ivory); font: 400 13px/22px var(--vv-font); color: var(--vv-ink-2); }
.vv-request__submit { display: flex; flex-direction: column; gap: 24px; }
.vv-request__btn, .vv-collab__btn { width: 100%; }

/* ---------- Співпраця (телефон) ---------- */
.vv-collab { gap: 24px; padding: 24px 16px 32px; }
.vv-collab .vv-fl { font: 500 10px/12px var(--vv-font); }
.vv-collab__foot { display: flex; flex-direction: column-reverse; align-items: center; gap: 24px; }
.vv-collab__note { font: 400 12px/20px var(--vv-font); color: var(--vv-stone); }
.vv-collab .vv-textarea { min-height: 120px; }
.vv-collab .vv-form__consent .vv-check__text { flex: 0 1 auto; }

@media (min-width: 1024px) {
	.vv-modal { display: flex; align-items: flex-start; justify-content: center; padding: 96px 32px 64px; background: rgba(27,4,14,.56); }
	.vv-modal__backdrop { display: block; position: fixed; inset: 0; }
	.vv-modal__box { flex: none; width: 880px; min-height: 0; background: var(--vv-ivory); }
	.vv-fl { font: 500 13px/22px var(--vv-font); letter-spacing: 0; text-transform: none; color: var(--vv-black); }
	.vv-fs__hint { font-size: 13px; line-height: 22px; }
	.vv-form .vv-input, .vv-form .vv-textarea { background: var(--vv-white); }
	.vv-form .vv-check__input { width: 14px; height: 14px; margin-top: 5px; background-size: 10px; }
	.vv-form .vv-check__text { font-size: 14px; line-height: 24px; }
	.vv-opt { height: auto; padding: 10px 16px; font: 400 13px/22px var(--vv-font); letter-spacing: 0; text-transform: none; }
	.vv-opt.is-on { background: var(--vv-wine); color: var(--vv-ivory); font-weight: 500; }
	.vv-opts--cat { display: flex; }
	.vv-shades { gap: 10px; }
	.vv-shades__dot { width: 28px; height: 28px; }
	.vv-shades__dot--d { display: block; }
	.vv-shades__dot.is-on { box-shadow: 0 0 0 2px var(--vv-ivory), 0 0 0 3px var(--vv-wine); }
	.vv-shades__dot--q { display: flex; background: var(--vv-sand); font: 400 14px/14px var(--vv-font); }
	.vv-drop { height: 112px; background: var(--vv-white); }
	.vv-drop__pick { font: 500 14px/24px var(--vv-font); letter-spacing: 0; text-transform: none; color: var(--vv-wine); }
	.vv-drop__pick > span { padding-bottom: 2px; border-bottom: 1px solid currentColor; }
	.vv-request .vv-fs:has(.vv-drop) { gap: 12px; }
	.vv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

	.vv-request__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 40px 48px 32px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-request__headtext { flex: none; width: 688px; display: flex; flex-direction: column; gap: 12px; }
	.vv-request__eyebrow { color: var(--vv-stone); }
	.vv-request__title { font: 700 34px/40px var(--vv-font); letter-spacing: .01em; text-transform: uppercase; color: var(--vv-black); }
	.vv-request__intro { font-size: 15px; line-height: 26px; white-space: nowrap; }
	.vv-request__x { flex: none; font: 400 20px/20px var(--vv-font); color: var(--vv-stone); }
	.vv-request__body { padding: 32px 48px; border-bottom: 1px solid var(--vv-line-soft); }
	.vv-request__body .vv-form__row, .vv-request__body .vv-form__row:last-child { display: grid; gap: 24px; }
	.vv-request .vv-textarea { height: 96px; min-height: 96px; }
	.vv-request__foot { gap: 20px; padding: 24px 48px 32px; }
	.vv-request__note { padding: 16px 20px; border-left: 2px solid var(--vv-wine); background: var(--vv-sand); }
	.vv-request__notein { display: block; font: 400 14px/24px var(--vv-font); color: var(--vv-ink-2); }
	.vv-request__submit { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
	.vv-request__submit .vv-form__consent { flex: none; width: 368px; align-items: center; }
	.vv-request__submit .vv-check__input { margin-top: 0; }
	.vv-request__submit .vv-check__text { flex: none; }
	.vv-request__btn { flex: none; width: auto; }

	.vv-modal--collab .vv-modal__box { width: 720px; background: var(--vv-white); }
	.vv-collab { gap: 32px; padding: 48px; }
	.vv-collab__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
	.vv-collab__headtext { flex: none; width: 552px; display: flex; flex-direction: column; gap: 12px; }
	.vv-collab__title { font: 600 26px/32px var(--vv-font); color: var(--vv-black); }
	.vv-collab__intro { font-size: 15px; line-height: 26px; }
	.vv-collab__x { flex: none; color: var(--vv-stone); }
	.vv-collab .vv-fl { font: 400 13px/22px var(--vv-font); letter-spacing: 0; text-transform: none; color: var(--vv-stone); }
	.vv-opts--kind { display: flex; }
	.vv-opts--kind .vv-opt { height: 40px; padding: 0; font: 500 11px/12px var(--vv-font); letter-spacing: .14em; text-transform: uppercase; }
	.vv-opts--kind .vv-opt:nth-child(1) { width: 200px; }
	.vv-opts--kind .vv-opt:nth-child(2) { width: 180px; }
	.vv-opts--kind .vv-opt:nth-child(3) { width: 120px; }
	.vv-opts--kind .vv-opt.is-on { background: none; color: var(--vv-wine); }
	.vv-collab .vv-form__row { gap: 24px; }
	.vv-collab .vv-check__input { width: 16px; height: 16px; margin-top: 4px; }
	.vv-collab .vv-check__text { font-size: 13px; }
	.vv-collab__foot { flex-direction: row; justify-content: space-between; gap: 24px; padding-top: 8px; }
	.vv-collab__note { flex: none; width: 344px; font-size: 13px; line-height: 22px; }
	.vv-collab .vv-form__consent .vv-check__text { flex: 1; }
	.vv-collab__btn { width: 240px; padding: 0; }
	.vv-form__done { padding: 96px 48px; }
}