@charset "UTF-8";
/* ============================================================
   VIPdosug.biz — link.css
   Стили страницы анкеты (link.php)
   PHP 5.3+ / UTF-8
   ============================================================ */

/* ---------- 1. Хлебные крошки ---------- */
.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.375rem;
  font-size:.8125rem;
  font-weight:600;
  color:var(--muted);
  margin:0 0 1rem;
}
.breadcrumbs a{
  color:var(--violet);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.breadcrumbs a:hover{
  color:var(--pink);
  text-decoration:underline;
}
.breadcrumbs span[aria-hidden]{
  opacity:.4;
}

/* ---------- 2. Заголовок анкеты ---------- */
.anketa__header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  padding:0 0 1rem;
  border-bottom:2px solid var(--border);
  margin-bottom:1.25rem;
}
.anketa__name{
  font-size:clamp(1.25rem,4vw,1.75rem);
  font-weight:900;
  letter-spacing:-.02em;
  margin:0;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.anketa__city{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.25rem .625rem;
  border-radius:var(--radius-pill);
  background:var(--gradient-soft);
  border:1px solid var(--border);
  font-size:.8125rem;
  font-weight:700;
  color:var(--violet);
}
.anketa__city-icon{
  width:12px;
  height:12px;
  background-color:var(--pink);
  -webkit-mask:var(--icon-pin-simple) center/contain no-repeat;
  mask:var(--icon-pin-simple) center/contain no-repeat;
  flex-shrink:0;
}
.anketa__city a{
  color:inherit;
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.anketa__city a:hover{
  color:var(--pink);
  text-decoration:underline;
}
.anketa__verified{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.25rem .625rem;
  border-radius:var(--radius-pill);
  background:var(--lime);
  color:#fff;
  font-size:.75rem;
  font-weight:800;
  box-shadow:var(--shadow-lime);
}

/* ---------- 3. Сетка анкеты ---------- */
.anketa__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.5rem;
  margin-bottom:1.5rem;
}
.anketa__col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* ---------- 4. Галерея ---------- */
.gallery{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.gallery__big{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  max-height:520px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--gradient-soft);
  box-shadow:var(--shadow-md);
}
.gallery__big img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  cursor:zoom-in;
  transition:transform var(--dur) var(--ease);
  user-select:none;
  -webkit-user-drag:none;
}
.gallery__big img:hover{
  transform:scale(1.01);
}
.gallery__loading{
  position:absolute;
  inset:0;
  display:none;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:none;
}
.gallery__loading::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:36px;
  height:36px;
  margin:-18px 0 0 -18px;
  border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--pink);
  animation:spin .8s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg)}
}
.gallery__thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:.5rem;
}
.gallery__thumb{
  padding:0;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#fff;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.gallery__thumb img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:3/4;
  object-fit:cover;
}
.gallery__thumb:hover{
  border-color:var(--pink);
  transform:translateY(-2px);
}
.gallery__thumb.is-active{
  border-color:var(--violet);
  box-shadow:var(--shadow-violet);
}

/* ---------- 5. Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,8,25,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeInLightbox .2s ease;
  padding:20px;
}
.lightbox.is-open{
  display:flex;
}
@keyframes fadeInLightbox{
  from{opacity:0}
  to{opacity:1}
}
.lightbox__stage{
  position:relative;
  max-width:100%;
  max-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:ew-resize;
  user-select:none;
}
.lightbox__stage img{
  max-width:100%;
  max-height:calc(100vh - 80px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:var(--radius);
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  cursor:ew-resize;
  animation:zoomInLightbox .25s var(--ease);
  user-select:none;
  -webkit-user-drag:none;
}
@keyframes zoomInLightbox{
  from{opacity:0;transform:scale(.94)}
  to{opacity:1;transform:scale(1)}
}

/* Кнопка закрытия */
.lightbox__close{
  position:absolute;
  top:16px;
  right:16px;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-round);
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:28px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  z-index:3;
  border:1px solid rgba(255,255,255,.25);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.lightbox__close:hover{
  background:rgba(255,46,136,.6);
  transform:rotate(90deg);
}

/* Стрелки навигации */
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-round);
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:36px;
  font-weight:300;
  line-height:1;
  cursor:pointer;
  z-index:3;
  border:1px solid rgba(255,255,255,.25);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  user-select:none;
}
.lightbox__nav:hover{
  background:rgba(255,46,136,.6);
}
.lightbox__nav:active{
  transform:translateY(-50%) scale(.94);
}
.lightbox__nav--prev{left:16px;}
.lightbox__nav--next{right:16px;}

/* Счётчик внизу справа */
.lightbox__counter{
  position:absolute;
  right:24px;
  bottom:24px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.5rem .875rem;
  border-radius:var(--radius-pill);
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  font-size:.875rem;
  font-weight:800;
  letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  user-select:none;
  pointer-events:none;
}
.lightbox__counter-sep{
  opacity:.55;
  font-weight:400;
}
#photoLightboxCurrent{
  color:#fff;
}
#photoLightboxTotal{
  color:rgba(255,255,255,.7);
}

/* ---------- 6. Цены ---------- */
.prices{
  padding:1rem 1.125rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.prices__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.prices__group{
  margin-bottom:.75rem;
}
.prices__group:last-child{
  margin-bottom:0;
}
.prices__group-title{
  font-size:.8125rem;
  font-weight:900;
  color:var(--pink);
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:.375rem;
}
.prices__list{
  display:grid;
  gap:.25rem;
}
.prices__list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.875rem;
  padding:.375rem .5rem;
  border-radius:var(--radius-sm);
  background:var(--gradient-soft);
}
.prices__list span{
  color:var(--muted);
  font-weight:600;
}
.prices__list b{
  color:var(--violet);
  font-weight:900;
  font-variant-numeric:tabular-nums;
}

/* ---------- 7. Корзина ---------- */
.anketa__basket{
  display:flex;
  justify-content:center;
}
.btn-basket{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.75rem 1.5rem;
  border-radius:var(--radius-pill);
  font-size:.875rem;
  font-weight:800;
  color:#fff;
  text-decoration:none;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-basket--add{
  background:var(--lime);
  box-shadow:var(--shadow-lime);
}
.btn-basket--add:hover{
  background:#00c46f;
  box-shadow:0 12px 24px rgba(0,196,111,.5);
}
.btn-basket--remove{
  background:var(--pink);
  box-shadow:var(--shadow-pink);
}
.btn-basket--remove:hover{
  background:#e02175;
}
.btn-basket:active{
  transform:scale(.98);
}

/* ---------- 8. Параметры ---------- */
.params{
  padding:1rem 1.125rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.params__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.params__list{
  display:grid;
  gap:.25rem;
}
.params__list > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  padding:.375rem .5rem;
  border-radius:var(--radius-sm);
  background:var(--gradient-soft);
  font-size:.875rem;
}
.params__list dt{
  color:var(--muted);
  font-weight:600;
  flex-shrink:0;
}
.params__list dd{
  margin:0;
  color:var(--violet);
  font-weight:800;
  text-align:right;
}

/* ---------- 9. Контакты ---------- */
.contacts{
  padding:1rem 1.125rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.contacts__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.contacts__row{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
  padding:.5rem 0;
  border-bottom:1px dashed var(--border);
  font-size:.875rem;
}
.contacts__row:last-child{
  border-bottom:none;
}
.contacts__label{
  color:var(--muted);
  font-weight:600;
  flex-shrink:0;
}
.contacts__row a{
  color:var(--violet);
  font-weight:800;
  text-decoration:none;
}
.contacts__row a:hover{
  color:var(--pink);
  text-decoration:underline;
}
.contacts__row--phone{
  justify-content:center;
  padding-top:.75rem;
}

/* ---------- 10. Услуги ---------- */
.services{
  padding:1rem 1.125rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.services__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.services__list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.375rem;
}
.services__list li{
  position:relative;
  padding:.375rem .5rem .375rem 1.5rem;
  border-radius:var(--radius-sm);
  background:var(--gradient-soft);
  font-size:.8125rem;
  font-weight:600;
  color:var(--violet);
}
.services__list li::before{
  content:"";
  position:absolute;
  left:.5rem;
  top:50%;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 2px rgba(0,217,126,.25);
}

/* ---------- 11. Медиа ---------- */
.anketa__media{
  display:flex;
  justify-content:center;
}
.btn-media{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.75rem 1.5rem;
  border-radius:var(--radius-pill);
  background:var(--gradient-hot);
  color:#fff;
  font-weight:900;
  font-size:.875rem;
  box-shadow:var(--shadow-orange);
  cursor:pointer;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn-media:hover{
  box-shadow:var(--shadow-pink);
}
.btn-media:active{
  transform:scale(.98);
}

/* ---------- 12. О себе / доп. услуги ---------- */
.about{
  padding:1rem 1.125rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.about__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about__text{
  font-size:.9375rem;
  line-height:1.65;
  color:var(--text);
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ---------- 13. Предупреждения ---------- */
.anketa__warning{
  padding:1rem 1.125rem;
  border-radius:var(--radius-lg);
  background:#fff5f5;
  border:2px solid #ffd0d0;
  color:#a02020;
  font-size:.875rem;
  line-height:1.6;
}

/* ---------- 14. Голосование ---------- */
.vote{
  padding:1.25rem 1.5rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#fff0f7,#efe6ff);
  margin-bottom:1.5rem;
}
.vote__title{
  font-size:1rem;
  font-weight:900;
  margin:0 0 .75rem;
  text-align:center;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.vote__form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.75rem;
}
.vote__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-round);
  background:#fff;
  border:2px solid var(--border);
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.vote__item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.vote__item span{
  font-weight:900;
  color:var(--violet);
}
.vote__item:hover{
  border-color:var(--pink);
}
.vote__item input:checked + span{
  color:#fff;
}
.vote__item:has(input:checked){
  background:var(--gradient-brand);
  border-color:transparent;
}
.vote__submit{
  padding:.625rem 1.25rem;
  font-size:.8125rem;
  width:auto;
}

/* ---------- 15. Комментарии ---------- */
.comments{
  padding:1.25rem 1.5rem;
  border:2px solid var(--border);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.comments__title{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:1.0625rem;
  font-weight:900;
  margin:0 0 1rem;
  background:var(--gradient-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.comments__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 8px;
  border-radius:var(--radius-pill);
  background:var(--gradient-brand);
  color:#fff;
  font-size:.75rem;
  font-weight:900;
}
.comments__empty{
  color:var(--muted);
  font-style:italic;
  margin:0 0 1rem;
}
.comments__list{
  display:grid;
  gap:.75rem;
  margin-bottom:1.25rem;
}
.comments__item{
  padding:.75rem 1rem;
  border-radius:var(--radius);
  background:var(--gradient-soft);
  border-left:4px solid var(--violet);
}
.comments__text{
  font-size:.9375rem;
  line-height:1.55;
  color:var(--text);
}
.comments__meta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:.375rem;
  font-size:.75rem;
  color:var(--muted);
  font-weight:600;
}
.comments__form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  padding-top:1rem;
  border-top:2px dashed var(--border);
}
.comments__field{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.8125rem;
  font-weight:700;
  color:var(--muted);
}
.comments__field--full{
  grid-column:1 / -1;
}
.comments__field input,
.comments__field textarea{
  padding:.625rem .75rem;
  border:2px solid var(--border);
  border-radius:var(--radius);
  font-size:.875rem;
  font-family:inherit;
  background:#fff;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.comments__field input:focus,
.comments__field textarea:focus{
  outline:none;
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(255,46,136,.15);
}
.comments__field textarea{
  resize:vertical;
  min-height:100px;
}
.comments__captcha{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.25rem;
  background:var(--gradient-soft);
  border-radius:var(--radius);
}
.comments__captcha img{
  border-radius:var(--radius-sm);
}
.comments__submit{
  grid-column:1 / -1;
  justify-self:center;
  padding:.75rem 2rem;
  width:auto;
}
.comments__error{
  grid-column:1 / -1;
  padding:.625rem .875rem;
  border-radius:var(--radius);
  background:#fff0f0;
  color:#a02020;
  font-weight:700;
  font-size:.8125rem;
}
.comments__ok{
  grid-column:1 / -1;
  padding:.625rem .875rem;
  border-radius:var(--radius);
  background:#e8fff2;
  color:#008a4d;
  font-weight:700;
  font-size:.8125rem;
}

/* ---------- 16. Адаптив ---------- */

/* Планшеты */
@media (max-width:900px){
  .anketa__layout{
    grid-template-columns:1fr;
  }
  .gallery__big{
    max-height:420px;
  }
}

/* Мобильные */
@media (max-width:640px){
  .gallery__big{
    max-height:360px;
  }
  .gallery__thumbs{
    grid-template-columns:repeat(auto-fill,minmax(60px,1fr));
    gap:.375rem;
  }
  .comments__form{
    grid-template-columns:1fr;
  }
  .comments__field--full{
    grid-column:auto;
  }
  .comments__captcha{
    justify-content:flex-start;
  }
  .vote__item{
    width:36px;
    height:36px;
  }
  .prices__list li{
    font-size:.8125rem;
  }
  .params__list > div{
    font-size:.8125rem;
  }

  /* Lightbox */
  .lightbox{
    padding:10px;
  }
  .lightbox__close{
    top:10px;
    right:10px;
    width:42px;
    height:42px;
    font-size:24px;
  }
  .lightbox__nav{
    width:44px;
    height:44px;
    font-size:28px;
  }
  .lightbox__nav--prev{left:8px;}
  .lightbox__nav--next{right:8px;}
  .lightbox__stage img{
    max-height:calc(100vh - 60px);
  }
  .lightbox__counter{
    right:12px;
    bottom:12px;
    padding:.375rem .75rem;
    font-size:.8125rem;
  }

  .breadcrumbs{
    font-size:.75rem;
  }
  .anketa__name{
    font-size:1.25rem;
  }
  .comments{
    padding:1rem 1.125rem;
  }
  .services__list{
    grid-template-columns:1fr;
  }
}

/* Маленькие телефоны */
@media (max-width:480px){
  .vote__item{
    width:34px;
    height:34px;
    font-size:.875rem;
  }
  .prices__list li{
    padding:.3rem .5rem;
  }
  .anketa__city{
    font-size:.75rem;
    padding:.2rem .5rem;
  }
  .anketa__verified{
    font-size:.6875rem;
  }
}

/* Отключение анимаций */
@media (prefers-reduced-motion:reduce){
  .lightbox,
  .lightbox__stage img,
  .gallery__loading::after{
    animation:none;
  }
  .gallery__big img,
  .gallery__thumb,
  .btn-basket,
  .btn-media{
    transition:none;
  }
}