/* =========================================================
   Bootstrap-friendly layout
   - Desktop: sidebar column (sticky)
   - Mobile: sidebar in offcanvas (markup in index.html)
   ========================================================= */

body{
  /* remove old fixed-sidebar padding */
  padding-left: 0;
  margin:0;
}

.main-col{
  min-width: 0; /* prevent overflow when content is wide */
}

/* =========================================================
   SIDEBAR (desktop column)
   ========================================================= */

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  /* IMPORTANT: do not force width:100% here.
     Bootstrap grid (col-*) controls sidebar width on desktop.
     width:100% makes the sidebar take the whole row and pushes main content below. */
  width: auto;
  background: linear-gradient(180deg, #f9fcff, #f1f7fc 50%, #eef5fb 100%);
  border-right:1px solid var(--line);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  gap:28px;
  z-index:20;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.sidebar__logo{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, #f5faff);
  border:1px solid var(--line);
  box-shadow: 0 14px 38px rgba(32,86,138,.08);
}

.sidebar__logo .logo-img{
  max-width:180px;
  height:auto;
  display:block;
  filter: drop-shadow(0 6px 14px rgba(32,86,138,.18));
}

.sidebar__nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:4px;
}

.nav-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  font-weight:700;
  color:#334155;
  border-radius:18px;
  background: linear-gradient(180deg, #ffffff, #f6fbff);
  border:1px solid #e6eef5;
  box-shadow: 0 10px 24px rgba(50,120,170,.10);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.nav-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(50,120,170,.14);
  background:#f7fbff;
  color:#1e90ff !important;
}
.nav-item.is-active {
  background: #c9e2ff;
  border-color:#cfe4fb;
  color:#0A2A4A;
  box-shadow: 0 12px 26px rgba(50,120,170,.18);
}

.sidebar__footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sidebar__footer .btn{
  font-weight:800;
}

/* =========================================================
   REMOTE PANEL
   ========================================================= */

.remote-panel{
  position:fixed;
  z-index:30;
  min-width:320px;
  max-width:380px;
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 18px 45px rgba(15,23,42,.22);
  padding:18px 18px 16px 18px;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease-out, opacity .18s ease-out;
}

.remote-panel.is-open{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.remote-panel__close{
  position:absolute;
  top:8px;
  right:10px;
  width:24px;
  height:24px;
  cursor:pointer;
}
.remote-panel__close:hover{ opacity:.7; }

.remote-panel__title{
  margin:0 32px 8px 0;
  font-size:18px;
  font-weight:800;
}

.remote-panel__text{
  margin:0 0 10px 0;
  font-size:14px;
  line-height:1.5;
  color:#4b5563;
}

.remote-panel__actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:10px;
}

.remote-panel__btn{ text-align:center; }

/* =========================================================
   TOPBAR
   ========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:#e6f0f8c2;
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  overflow:hidden;
}
.topbar__inner{
  /* Use full width of the main column; avoid large empty right space */
  max-width:none;
  margin:0;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.crumb{ font-weight:700; }
.crumb-sep{ margin:0 8px; color:#9aa7b5; }
.link-phone{
  font-weight:800;
  color:#0b4f7a;
  margin-right:10px;
  font-size:16px;
  white-space:nowrap;
}
.topbar__right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}
#remoteControlBtn{
  white-space:nowrap;
}

/* =========================================================
   CONTENT WRAPPER
   ========================================================= */

.content{
  /* Use full width of the main column; keep comfortable gutters */
  max-width:none;
  margin:16px 0 140px 0;
  padding:0 24px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer{
  background:#dfeff8;
  border-top:1px solid var(--line);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  overflow: hidden;
}
.footer__grid{
  max-width:var(--container);
  margin:0 auto;
  padding:48px var(--gutter);
  display:grid;
  grid-template-columns:2fr 1.5fr 1.7fr;
  gap:36px;
}
.footer__title{
  margin:0 0 16px 0;
  font-weight:800;
  font-size:18px;
}
.footer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.bullets li{ position:relative; padding-left:16px; }
.bullets li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#2f7fb0;
}

.subscribe{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}
.schedule{
  margin-top:10px;
  border-radius:16px;
  padding:14px;
}

.footer-hr{
  max-width:var(--container);
  margin:32px auto;
  border:none;
  border-top:1px solid #cfe3f3;
}
.footer__bottom{
  max-width:var(--container);
  margin:0 auto;
  padding:16px var(--gutter) 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#4b5563;
  font-size:15px;
  gap:12px;
  flex-wrap:wrap;
}

/* Контакты / иконки в футере */
.footer__list li{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer__list a{
  color:#0f172a;
  text-decoration:none;
  font-weight:600;
}
.footer__list a:hover{ color:var(--accent); }

/* Чистые иконки слева */
.f-icon{
  display:inline-block;
  width:22px;
  height:22px;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.icon-phone    { background-image: url(/public/images/icons/forma-light_48_1e90ff_phone_png_4b0831c0.png); }
.icon-mail     { background-image: url(/public/images/icons/pulsar-line_48_1e90ff_mail_png_fa772aae.png); }
.icon-location { background-image: url(/public/images/icons/pulsar-line_48_1e90ff_gps-location_png_21eb3b22.png); }

/* Соцсети */
.socials-row{
  display:flex;
  gap:12px;
  margin-top:8px;
}
.soc-icon{
  width:28px;
  height:28px;
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
}
.soc-vk { background-image: url(/public/images/icons/forma-bold-filled-sharp_48_1e90ff_vk-com_png_e5f4f382.png); }
.soc-tg { background-image: url(/public/images/icons/pulsar-line_48_1e90ff_telegram-app_png_7800faa2.png); }
.soc-wa { background-image: url(/public/images/icons/pulsar-line_48_1e90ff_whatsapp_png_6f86a8f6.png); }

/* =========================================================
   DESKTOP COLUMN SIZING
   Keep sidebar close to design width (var(--sidebar)) instead of 25% of large screens.
   ========================================================= */
@media (min-width:992px){
  /* Prevent wrapping so sidebar does not push content below */
  .container-fluid > .row.g-0{ flex-wrap:nowrap; }

  aside.sidebar{
    flex:0 0 var(--sidebar);
    max-width:var(--sidebar);
  }
  .main-col{
    flex:1 1 auto;
    max-width:calc(100% - var(--sidebar));
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:992px){
  .content{ margin:12px 0 96px 0; padding:0 16px; }
  .footer__grid{ grid-template-columns:1fr; padding:34px 16px; }
}

@media (max-width:560px){
  .link-phone{ display:none; }
}

@media (max-width:768px){
  .topbar__inner{
    padding:10px 14px;
    gap:10px;
  }
  .topbar__right{
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    justify-content:flex-start;
  }
  #remoteControlBtn{
    display:none !important; /* убираем кнопку удалённого управления на телефоне */
  }
}

/* =========================================================
   Cloud-style content blocks
   ========================================================= */

.content-block{
  max-width:1040px;
  margin-left:auto;
  margin-right:auto;
  padding:24px 28px;
  border-radius:14px;

  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.10);

  -webkit-backdrop-filter: blur(8px) saturate(115%);
  backdrop-filter: blur(8px) saturate(115%);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

@media (max-width:1400px){
  .content-block{ max-width:960px; }
}

@media (max-width:1200px){
  .content-block{
    max-width:100%;
    padding:20px 18px;
    border-radius:12px;
  }
}

/* If backdrop-filter isn't supported, keep the "cloud" readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .content-block{
    background: rgba(255,255,255,0.08);
  }
}

/* Calc panel width: match the main content width (same as other sections) */
#calc-panel .content-block{
  max-width: var(--container);
}
@media (max-width:1400px){
  #calc-panel .content-block{ max-width: var(--container); }
}
.sidebar__footer {
    display: flex;
    flex-direction: column; /* Если ещё не установлен */
}

.sidebar__footer a:nth-child(1) {
    order: 2; /* Техподдержка будет ниже */
}

.sidebar__footer a:nth-child(2) {
    order: 1; /* Ремонт оргтехники будет сверху */
}