/* Интеграция макета с сайтом: реальные фото, состояния форм, капча.
   Файлы vip.css / vip-mobile.css / tokens.css держим один в один с Claude Design,
   чтобы обновление макета не приходилось вычищать от правок. */

/* ─── реальные изображения на месте плейсхолдеров ─── */
.svip-img,
.svip-media img,
.svip-media picture,
.svip-media source{width:100%;height:100%;object-fit:cover;display:block}
.svip-media{width:100%;height:100%;background:var(--bg-alt);display:block}
.v-gallery .main,.v-gallery .cell,.v-photos .p,.m-gal .g,.v-car .img,.m-car .img,.v-shot{background:var(--bg-alt)}
.svip-video-link{display:block;width:100%;height:100%;color:inherit}

/* ─── формы ─── */
.svip-form .svip-msg{display:none;margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);font-size:13px;line-height:1.45}
.svip-form .svip-msg.is-visible{display:block}
.svip-form .svip-msg.is-error{background:var(--danger-50);color:#B02222}
.svip-form .svip-msg.is-success{background:var(--success-50);color:#0E7A4A}
.svip-form input.has-error{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(239,68,68,.12) !important}
.svip-form.is-submitting{opacity:.75;pointer-events:none}
.svip-form.is-done .svip-fields{display:none}

.svip-captcha{margin:10px 0;min-height:0}
.svip-captcha:empty{display:none}

/* ─── шапка страницы: минимальная, лендинг не уводит с себя ─── */
.svip-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.svip-logo{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--text-primary)}
.svip-logo span{color:var(--inbiz-blue)}
.svip-back{margin-left:auto;font-size:13px;font-weight:600;color:var(--text-secondary)}
.svip-back:hover{color:var(--inbiz-blue)}

/* ─── подвал ─── */
.svip-foot{max-width:1320px;margin:0 auto;padding:28px 24px 40px;font-size:12px;color:var(--text-tertiary);line-height:1.6}
.m-body .svip-foot{max-width:408px;padding:20px 14px 28px}

/* ─── закрытые данные: что покупатель получает после заявки ─── */
.v-req .c .sub,
.m-req .sub{margin-top:4px;font-size:12px;color:var(--text-tertiary);line-height:1.4}

.v-locked{margin-top:20px;border:1.5px solid var(--inbiz-blue-100);background:var(--inbiz-blue-50);
	border-radius:var(--r-md);padding:20px}
.v-locked .hd{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;color:var(--inbiz-blue)}
.v-locked .hd h3{margin:0;font-size:15px;font-weight:700;color:var(--text-primary)}
.v-locked .hd p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.v-locked .gr{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.v-locked .i{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 14px}
.v-locked .i .ic{display:inline-flex;color:var(--text-tertiary);margin-bottom:6px}
.v-locked .i .t{font-size:13px;font-weight:700;color:var(--text-primary)}
.v-locked .i .s{margin-top:2px;font-size:12px;color:var(--text-tertiary);line-height:1.4}
.v-locked .i .dm{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.v-locked .i .dm .d{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.04em;
	color:var(--inbiz-blue);background:var(--inbiz-blue-50);border:1px dashed var(--inbiz-blue-100);
	border-radius:var(--r-sm);padding:3px 8px}
.v-locked-btn{margin-top:16px;width:100%;border:0;cursor:pointer;background:var(--inbiz-blue);color:#fff;
	border-radius:var(--r-sm);padding:13px 20px;font:inherit;font-size:14px;font-weight:700}
.v-locked-btn:hover{background:var(--inbiz-blue-600)}

.m-body .v-locked{margin-top:14px;padding:16px}
.m-body .v-locked .gr{grid-template-columns:1fr}

/* ─── видео: плитка с кадром-обложкой и плеер в оверлее ─── */
.svip-video-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;
	font:inherit;color:inherit;cursor:pointer;text-align:inherit}
.v-video,.m-video{position:relative;overflow:hidden}
.v-video.has-poster .svip-media,.m-video.has-poster .svip-media{position:absolute;inset:0;opacity:.45}
.v-video.has-poster>*:not(.svip-media),.m-video.has-poster>*:not(.svip-media){position:relative;z-index:1}
.svip-video-open:hover .play{background:rgba(255,255,255,.28)}

.svip-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(12,12,22,.92);
	display:flex;align-items:center;justify-content:center;padding:24px}
.svip-lightbox .box{position:relative;max-width:min(94vw,520px);width:100%}
.svip-lightbox video{display:block;width:100%;max-height:78vh;border-radius:var(--r-md);background:#000}
.svip-lightbox .cap{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center}
.svip-lightbox .x{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;
	border:0;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.svip-lightbox .x:hover{background:rgba(255,255,255,.3)}

/* фото: полный размер + листание */
.svip-lightbox.is-photo .box{max-width:min(96vw,1180px)}
.svip-lightbox img{display:block;width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r-md)}
.svip-lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
	border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.18);color:#fff;
	display:grid;place-items:center}
.svip-lightbox .nav:hover{background:rgba(255,255,255,.34)}
.svip-lightbox .nav.prev{left:-56px}
.svip-lightbox .nav.next{right:-56px}
@media (max-width:900px){
	.svip-lightbox .nav.prev{left:6px}
	.svip-lightbox .nav.next{right:6px}
}

.svip-photo-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}

/* Карточки транспорта: в макете под картинку отведена полоса 110/74 px, и
   квадратный снимок машины в ней обрезался по бокам. Окно тоже делаем квадратным
   — тогда фото ложится целиком. */
.v-car .img,
.m-car .img{height:auto;aspect-ratio:1/1}

/* доступность: скрытая подпись для чекбокса согласия и полей без видимого label */
.svip-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}