/* ============================================================
   ТМЗ 3D-конфигуратор — modern skin (override layer)
   Не меняет id/структуру — только внешний вид.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --cfg-brand:#274490;
  --cfg-brand-2:#3a63c9;
  --cfg-accent:#19b3a6;
  --cfg-ink:#16203a;
  --cfg-muted:#6b7690;
  --cfg-line:rgba(20,34,64,.08);
  --cfg-grad:linear-gradient(135deg,#274490 0%,#3a63c9 100%);
  --cfg-glass:rgba(255,255,255,.82);
  --cfg-ease:cubic-bezier(.4,.7,.2,1);
}

*{font-family:'Manrope',-apple-system,Segoe UI,Roboto,Arial,sans-serif!important}

/* studio backdrop behind 3D / panel */
body{
  margin:0!important;
  background:
    radial-gradient(120% 90% at 80% 0%,#eef3fb 0%,#dde6f5 45%,#cdd9ee 100%)!important;
  color:var(--cfg-ink)!important;
  -webkit-font-smoothing:antialiased;
}
.iframe-canvas,.iframe-canvas iframe{background:transparent!important;touch-action:none!important;pointer-events:auto!important}
html,body{overscroll-behavior:none!important}
/* mobile: stop the page from stealing the drag so finger rotates/zooms the 3D model */
@media (max-width:991px){
  html,body{overflow:hidden!important;height:100%!important}
  #le,.frame,.iframe-canvas,.iframe-canvas iframe{touch-action:none!important;pointer-events:auto!important}
}

/* ---------- top-right icon row: screen + rotate, in line with fullscreen (iframe, right:8) ---------- */
.left_menu{
  position:fixed!important;top:8px!important;right:66px!important;left:auto!important;bottom:auto!important;
  transform:none!important;margin:0!important;
  display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:8px!important;
  z-index:60!important;background:none!important;border:0!important;width:auto!important;
  padding:0!important;
}
/* 3D pushable, same style as МЕНЮ */
.button_left_menu{
  width:50px!important;height:50px!important;border-radius:14px!important;border:0!important;
  background:radial-gradient(circle at 50% 35%,#3a63c9,#22407f)!important;
  box-shadow:0 6px 0 #16295a,0 10px 14px -4px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28)!important;
  display:grid!important;place-items:center!important;cursor:pointer;margin:0!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
.button_left_menu:hover{transform:translateY(-2px)!important;
  box-shadow:0 8px 0 #16295a,0 14px 18px -4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.38)!important}
.button_left_menu:active{transform:translateY(6px)!important;
  box-shadow:0 0 0 #16295a,0 3px 6px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2)!important}
.button_left_menu img{display:none!important}
#screen,#rotate{position:relative}
#screen::after,#rotate::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;background:#fff;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
#screen::after{-webkit-mask-image:url("index_files/screen.svg");mask-image:url("index_files/screen.svg")}
#rotate::after{-webkit-mask-image:url("index_files/rotate.svg");mask-image:url("index_files/rotate.svg")}
.left_menu .ya-share2{display:none!important}

/* ---------- МЕНЮ toggle button (3D pushable, Uiverse/njesenberger) ---------- */
.button_menu{position:fixed!important;left:18px!important;top:18px!important;z-index:62!important;background:none!important;width:auto!important;height:auto!important}
.button_menu .m3d{
  -webkit-appearance:none;appearance:none;position:relative;border-width:0;
  padding:0 8px 12px!important;min-width:8.5em;box-sizing:border-box;background:transparent!important;
  font:inherit;cursor:pointer;box-shadow:none!important;
}
.button_menu .m3d-top{
  display:flex;align-items:center;justify-content:center;position:relative;z-index:0;
  padding:10px 20px;transform:translateY(0);text-align:center;color:#fff;
  font-weight:800;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 -1px rgba(0,0,0,.25);transition-property:transform;transition-duration:.2s;
  -webkit-user-select:none;user-select:none;
}
.button_menu .m3d:active .m3d-top{transform:translateY(6px)}
.button_menu .m3d-top::after{
  content:'';position:absolute;z-index:-1;border-radius:4px;width:100%;height:100%;
  box-sizing:content-box;background-image:radial-gradient(#3a63c9,#22407f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 1px 2px 1px rgba(255,255,255,.2);
  transition-property:border-radius,padding,width,transform;transition-duration:.2s;
}
.button_menu .m3d:active .m3d-top::after{border-radius:6px;padding:0 2px}
.button_menu .m3d-bottom{
  position:absolute;z-index:-1;bottom:4px;left:4px;border-radius:8px/16px 16px 8px 8px;
  padding-top:6px;width:calc(100% - 8px);height:calc(100% - 10px);box-sizing:content-box;
  background-color:#16295a;
  background-image:radial-gradient(4px 8px at 4px calc(100% - 8px),rgba(255,255,255,.25),transparent),
    radial-gradient(4px 8px at calc(100% - 4px) calc(100% - 8px),rgba(255,255,255,.25),transparent),
    radial-gradient(16px at -4px 0,#fff,transparent),
    radial-gradient(16px at calc(100% + 4px) 0,#fff,transparent);
  box-shadow:0 2px 3px 0 rgba(0,0,0,.5),inset 0 -1px 3px 3px rgba(0,0,0,.4);
  transition-property:border-radius,padding-top;transition-duration:.2s;
}
.button_menu .m3d:active .m3d-bottom{border-radius:10px 10px 8px 8px/8px;padding-top:0}
.button_menu .m3d-base{
  position:absolute;z-index:-2;top:4px;left:0;border-radius:12px;width:100%;height:calc(100% - 4px);
  background-color:rgba(0,0,0,.15);box-shadow:0 1px 1px 0 rgba(255,255,255,.75),inset 0 2px 2px rgba(0,0,0,.25);
}

/* ---------- side panel (glass) — FIXED OVERLAY so it never resizes the 3D canvas ---------- */
.main-fixed-block{
  position:fixed!important;top:0!important;left:0!important;bottom:0!important;
  width:clamp(300px,26vw,380px)!important;max-width:86vw!important;height:100%!important;
  background:var(--cfg-glass)!important;backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  border-right:1px solid rgba(255,255,255,.6)!important;
  box-shadow:24px 0 60px -30px rgba(27,48,104,.5)!important;
  padding:0!important;overflow-y:auto!important;overflow-x:hidden!important;
}
/* frame/iframe stays full-width regardless of panel → canvas size constant → no flicker */
.frame,#le{flex:0 0 100%!important;max-width:100%!important;width:100%!important;margin:0!important}
.main-fixed-block::-webkit-scrollbar{width:9px}
.main-fixed-block::-webkit-scrollbar-track{background:transparent}
.main-fixed-block::-webkit-scrollbar-thumb{background:rgba(39,68,144,.28);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
.main-fixed-block::-webkit-scrollbar-thumb:hover{background:rgba(39,68,144,.5);background-clip:padding-box}

/* smooth sidebar open / close */
.main-fixed-block.visible_on_display{animation:sbIn .4s cubic-bezier(.22,1,.36,1) both}
.main-fixed-block.sb-closing{display:block!important;animation:sbOut .32s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes sbIn{from{opacity:.2;transform:translateX(-100%)}to{opacity:1;transform:none}}
@keyframes sbOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-100%)}}
@keyframes sbUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes sbDown{from{transform:translateY(0)}to{transform:translateY(100%)}}

.logo-top{padding:26px 24px 14px!important}
.logo-top img{max-width:150px!important;height:auto!important}

/* close (×) */
.button_top_panel{
  position:absolute!important;top:18px!important;right:18px!important;
  width:38px!important;height:38px!important;border-radius:11px!important;
  background:rgba(39,68,144,.08)!important;color:var(--cfg-brand)!important;
  display:grid!important;place-items:center!important;cursor:pointer;
  font-size:0!important;transition:.2s var(--cfg-ease);z-index:5;
}
.button_top_panel span{font-size:22px!important;line-height:1!important;color:var(--cfg-brand)!important;font-weight:400}
.button_top_panel:hover{background:var(--cfg-grad)!important}
.button_top_panel:hover span{color:#fff!important}

/* ---------- accordion headers ---------- */
.list-group{padding:8px 14px 30px!important;border:0!important}
.list-group-item.item{
  position:relative!important;cursor:pointer;list-style:none;
  background:none!important;border:0!important;border-top:1px solid var(--cfg-line)!important;
  padding:18px 44px 18px 16px!important;
  font-weight:700!important;font-size:1rem!important;color:var(--cfg-ink)!important;
  transition:.2s var(--cfg-ease);border-radius:12px;
}
.list-group-item.item:first-of-type{border-top:0!important}
.list-group-item.item:hover{color:var(--cfg-brand)!important;background:rgba(39,68,144,.05)!important}
.list-group-item.item .dropdown-toggle{display:none!important}
.list-group-item.item::after{
  content:"";position:absolute;right:16px;top:50%;width:11px;height:11px;
  border-right:2.4px solid var(--cfg-muted);border-bottom:2.4px solid var(--cfg-muted);
  transform:translateY(-65%) rotate(45deg);transition:.25s var(--cfg-ease);
}
.list-group-item.item.dropup{color:var(--cfg-brand)!important;background:rgba(39,68,144,.06)!important}
.list-group-item.item.dropup::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--cfg-brand)}

/* ---------- content panels ---------- */
.content{padding:6px 16px 22px!important}
.content .font-size-16.weight-700,.content .weight-700.col-12{opacity:0;animation:cfgChip .4s var(--cfg-ease) .02s forwards}
/* smooth staggered reveal of swatches (плавное появление цветов) */
.content .col-2{opacity:0;animation:cfgChip .45s var(--cfg-ease) forwards;will-change:transform,opacity}
@keyframes cfgChip{from{opacity:0;transform:translateY(12px) scale(.86)}to{opacity:1;transform:none}}
.content .col-2:nth-child(2){animation-delay:.04s}
.content .col-2:nth-child(3){animation-delay:.07s}
.content .col-2:nth-child(4){animation-delay:.10s}
.content .col-2:nth-child(5){animation-delay:.13s}
.content .col-2:nth-child(6){animation-delay:.16s}
.content .col-2:nth-child(7){animation-delay:.19s}
.content .col-2:nth-child(8){animation-delay:.22s}
.content .col-2:nth-child(9){animation-delay:.25s}
.content .col-2:nth-child(10){animation-delay:.28s}
.content .col-2:nth-child(11){animation-delay:.31s}
.content .col-2:nth-child(12){animation-delay:.34s}
.content .col-2:nth-child(13){animation-delay:.37s}
.content .col-2:nth-child(14){animation-delay:.40s}
.content .col-2:nth-child(15){animation-delay:.43s}
.content .col-2:nth-child(16){animation-delay:.46s}
.content .col-2:nth-child(17){animation-delay:.49s}
.content .col-2:nth-child(18){animation-delay:.52s}
.content .col-2:nth-child(19){animation-delay:.55s}
.content .col-2:nth-child(20){animation-delay:.58s}
.content .col-2:nth-child(n+21){animation-delay:.61s}
.content .font-size-16.weight-700,.content .weight-700.col-12{
  font-size:.72rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase!important;color:var(--cfg-muted)!important;
  margin:6px 0 16px!important;
}

/* swatch grid: convert bootstrap col-2 to flex chips */
.content .row{display:flex!important;flex-wrap:wrap!important;gap:4px 0!important;margin:0!important}
.content .col-2{
  flex:0 0 20%!important;max-width:20%!important;padding:6px 4px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center;
}
.content .col-2 p{
  margin:7px 0 0!important;font-size:.62rem!important;font-weight:600!important;
  color:var(--cfg-muted)!important;letter-spacing:.02em;line-height:1.1;
}

/* color swatch (div) — keep its background color, restyle frame */
.image-q{
  display:block!important;width:42px!important;height:42px!important;margin:0 auto!important;
  border-radius:50%!important;cursor:pointer!important;
  border:2px solid rgba(255,255,255,.9)!important;
  box-shadow:0 3px 10px -2px rgba(20,34,64,.35),inset 0 0 0 1px rgba(20,34,64,.06)!important;
  transition:transform .2s var(--cfg-ease),box-shadow .2s var(--cfg-ease)!important;
  background-size:cover!important;background-position:center!important;
}
.image-q:hover{transform:translateY(-3px) scale(1.08)!important;box-shadow:0 8px 18px -4px rgba(20,34,64,.45)!important}

/* image-type swatch (img) — rounded squares */
img.image-q{
  width:100%!important;max-width:80px!important;height:60px!important;
  border-radius:14px!important;object-fit:cover!important;
}

/* selected state */
.image-q.border_image,.border_image{
  transform:translateY(-2px) scale(1.06)!important;
  box-shadow:0 0 0 3px var(--cfg-brand),0 8px 20px -4px rgba(39,68,144,.55)!important;
  border-color:#fff!important;
}
img.image-q.border_image{box-shadow:0 0 0 3px var(--cfg-brand),0 10px 24px -6px rgba(39,68,144,.55)!important}

/* duplicate floating logo badge — hidden (logo already in panel) */
.right_menu,#left-menu{display:none!important}

/* ============================================================
   PRELOADER
   ============================================================ */
.preloader-screen,#preloader_screen,.local-preloader-screen,#local_preloader_screen{
  position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100vh!important;margin:0!important;z-index:9999!important;
  align-items:center!important;justify-content:center!important;
  background:radial-gradient(120% 120% at 50% 0%,#2b4a99 0%,#1c3370 55%,#142554 100%)!important;
}
/* NO !important on display — let Verge's inline display:none hide/show the preloader */
.preloader-screen,#preloader_screen{display:flex}
/* local (material-swap) overlay: flex only while shown, so inline display:none still hides it */
#local_preloader_screen:not([style*="none"]){display:flex}
.preloader-center{position:fixed!important;top:50vh!important;left:50vw!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:min(360px,82vw)!important;height:auto!important;margin:0!important;padding:0!important}
.preloader-container,#preloader_conteiner,#local_preloader_conteiner{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important}
/* caption under percentage */
#preloader_conteiner::after,#local_preloader_conteiner::after{
  content:"Загрузка 3D-конфигуратора";
  margin-top:13px!important;font-size:.74rem!important;font-weight:700!important;
  letter-spacing:.18em!important;text-transform:uppercase!important;
  color:rgba(255,255,255,.55)!important;text-align:center!important;
}

/* old fill box — hidden, ring used instead */
.preloader-image-container{display:none!important}

/* ---- circular progress ring + TMZ emblem ---- */
.cfg-ring{
  position:relative!important;width:172px!important;height:172px!important;
  min-width:172px!important;min-height:172px!important;max-width:172px!important;
  flex:none!important;box-sizing:border-box!important;aspect-ratio:1!important;
  margin:0 auto 20px!important;display:grid!important;place-items:center!important;
  border-radius:50%!important;
}
/* progress arc (pseudo so the center hole doesn't clip the emblem) */
.cfg-ring::before{
  content:""!important;position:absolute!important;inset:0!important;border-radius:50%!important;
  background:conic-gradient(from -90deg,#19b3a6 0%,#48d6c8 calc(var(--p,0)*1%),rgba(255,255,255,.10) 0)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent 69%,#000 70%);
          mask:radial-gradient(farthest-side,transparent 69%,#000 70%);
  filter:drop-shadow(0 0 12px rgba(25,179,166,.55));
}
/* rotating highlight arc */
.cfg-ring-spin{
  position:absolute!important;inset:-5px!important;border-radius:50%!important;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 74%,rgba(255,255,255,.95) 90%,transparent 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent 72%,#000 73%);
          mask:radial-gradient(farthest-side,transparent 72%,#000 73%);
  animation:cfgSpin 1.05s linear infinite;opacity:.6;
}
@keyframes cfgSpin{to{transform:rotate(360deg)}}
.cfg-ring-dot{display:none!important}
/* white circular TMZ emblem in the centre */
.cfg-emblem{
  position:relative!important;z-index:2!important;width:86px!important;height:86px!important;
  background:url("media/loader-logo.png") center/contain no-repeat!important;
  filter:brightness(0) invert(1) drop-shadow(0 6px 16px rgba(0,0,0,.45));
  animation:cfgPulse 2.2s ease-in-out infinite;
}
@keyframes cfgPulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.07);opacity:1}}

/* percentage */
.preloader-percentage,#preloader_percentage,#local_preloader_percentage{
  font-size:1.9rem!important;font-weight:800!important;color:#fff!important;
  letter-spacing:.02em!important;line-height:1!important;margin:0!important;
  font-variant-numeric:tabular-nums;
}

/* local (material-swap) overlay — subtle glass toast, not a full-screen flash */
#local_preloader_screen{background:rgba(16,28,56,.32)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important}
#local_preloader_conteiner{
  background:var(--cfg-glass)!important;padding:18px 30px!important;border-radius:16px!important;
  box-shadow:0 20px 50px -20px rgba(27,48,104,.5)!important;border:1px solid rgba(255,255,255,.6)!important;
  flex-direction:row!important;gap:14px!important;align-items:center!important;
}
#local_preloader_conteiner::before{
  content:""!important;width:22px;height:22px;flex:none;border-radius:50%;
  border:3px solid rgba(39,68,144,.25);border-top-color:var(--cfg-brand);
  animation:cfgSpin .8s linear infinite;
}
#local_preloader_percentage{font-size:1rem!important;color:var(--cfg-brand)!important;font-weight:700!important}
#local_preloader_conteiner::after{content:"Применяем…"!important;letter-spacing:.04em!important;text-transform:none!important;color:var(--cfg-muted)!important;margin:0 0 0 2px!important;font-size:.86rem!important}

/* ============================================================
   RESPONSIVE — mobile rebuild
   ============================================================ */
@media (max-width:991px){
  /* full-bleed 3D canvas (fill the screen incl. iOS dynamic bar) */
  html,body{overflow:hidden!important;height:100%!important}
  #le,.frame,.iframe-canvas,.iframe-canvas iframe{height:100vh!important;height:100dvh!important}

  /* МЕНЮ — top-left, compact */
  .button_menu{top:12px!important;left:12px!important}
  .button_menu .m3d{min-width:auto!important;padding:0 6px 10px!important}
  .button_menu .m3d-top{padding:9px 15px!important;font-size:.72rem!important;letter-spacing:.14em!important}

  /* icon row — top-right, aligned with fullscreen (iframe right:8) */
  .left_menu{top:10px!important;right:60px!important;left:auto!important;bottom:auto!important;gap:8px!important;transform:none!important}
  .button_left_menu{width:44px!important;height:44px!important;border-radius:13px!important}
  #screen::after,#rotate::after{width:20px!important;height:20px!important}

  /* МЕНЮ panel = BOTTOM SHEET, up to 40% of screen height */
  .main-fixed-block{
    top:auto!important;bottom:0!important;left:0!important;right:0!important;
    width:100%!important;max-width:100%!important;height:40vh!important;max-height:40vh!important;
    border-radius:22px 22px 0 0!important;
    border-right:0!important;border-top:1px solid rgba(255,255,255,.6)!important;
    box-shadow:0 -18px 50px -20px rgba(27,48,104,.55)!important;
    overscroll-behavior:contain!important;
    padding-top:25px!important;
  }
  /* slide up on open / down on close (override the desktop left-slide) */
  .main-fixed-block.visible_on_display{animation:sbUp .38s cubic-bezier(.22,1,.36,1) both!important}
  .main-fixed-block.sb-closing{animation:sbDown .3s cubic-bezier(.4,0,1,1) both!important}
  /* close = centered "grabber" pill on top of the sheet (chevron-down = collapse) */
  .button_top_panel,.button_top_panel.mobile_none_on{
    display:grid!important;place-items:center!important;
    position:absolute!important;left:50%!important;right:auto!important;top:6px!important;
    transform:translateX(-50%)!important;
    width:84px!important;height:26px!important;border-radius:0!important;
    background:none!important;border:0!important;box-shadow:none!important;
    z-index:8!important;cursor:pointer;
  }
  .button_top_panel:active{transform:translateX(-50%) scale(.92)!important}
  .button_top_panel span{display:none!important}
  .button_top_panel::before{
    content:"";width:64px;height:16px;background:#555b66;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 3l20 6 20-6'/></svg>") center/100% 100% no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 12' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 3l20 6 20-6'/></svg>") center/100% 100% no-repeat;
    animation:cfgChevBob 1.7s ease-in-out infinite;
  }
  @keyframes cfgChevBob{0%,100%{transform:translateY(-1px)}50%{transform:translateY(3px)}}
  /* give content room below the grabber */
  .main-fixed-block{padding-top:42px!important}
  /* hide the big logo to save vertical space in the sheet */
  .logo-top,.logo-top.mobile_none_on{display:none!important}

  /* accordion — bigger tap rows */
  .list-group{padding:6px 10px 42px!important}
  .list-group-item.item{padding:17px 42px 17px 14px!important;font-size:1.02rem!important}
  .content{padding:4px 12px 20px!important}

  /* swatch grid: 5 per row on tablet / large phone */
  .content .col-2{flex:0 0 20%!important;max-width:20%!important}
  .image-q{width:44px!important;height:44px!important}
}

/* phones */
@media (max-width:560px){
  /* swatch grid: 4 per row */
  .content .col-2{flex:0 0 25%!important;max-width:25%!important}
  .image-q{width:42px!important;height:42px!important}
  .content .col-2 p{font-size:.6rem!important}
  .button_menu .m3d-top{padding:8px 13px!important;letter-spacing:.12em!important}
  .list-group-item.item{font-size:1rem!important}
  /* smaller loader on tiny screens */
  .cfg-ring{width:150px!important;height:150px!important;min-width:150px!important;min-height:150px!important;max-width:150px!important}
  .cfg-emblem{width:74px!important;height:74px!important}
}