/* Desktop shell (Variant A, global):
   - All screens render in a left fixed-width panel (so "все страницы слева")
   - Right side shows promo video
   IMPORTANT: Must not affect mobile. Everything is gated by @media (min-width: 900px).
*/

@media (min-width: 900px) {
  :root {
    --desktop-panel-width: 520px;
  }

  html, body {
    height: 100%;
  }

  body {
    overflow: hidden; /* scroll only inside the left panel */
    background: #000;
  }

  /* Right video panel */
  #desktop-right-video.desktop-right-video {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--desktop-panel-width);
    z-index: 0;
    background: #000;
    overflow: hidden;
    display: block;
  }

  .desktop-right-video__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .desktop-right-video__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(80% 80% at 60% 40%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.40) 100%);
  }

  /* Left panel: the currently visible screen */
  #app {
    padding-bottom: 0 !important; /* bottom nav is inside the panel */
  }

  #app .screen:not(.hidden) {
    width: var(--desktop-panel-width);
    max-width: var(--desktop-panel-width);
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    background: #fff;
    border-right: 1px solid rgba(241, 245, 249, 1);
    box-shadow: 18px 0 40px -28px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
    margin: 0;
  }

  /* Bottom navigation must stay inside the left panel */
  #bottom-nav.bottom-nav {
    left: 0 !important;
    right: calc(100vw - var(--desktop-panel-width)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1002; /* above the left panel content */
  }

  /* Side menu must open inside the left panel, not over the video */
  #side-menu.side-menu {
    left: 0 !important;
    right: calc(100vw - var(--desktop-panel-width)) !important;
    width: auto !important;
    max-width: none !important;
    height: 100vh !important;
    z-index: 1005;
  }

  #side-menu .side-menu-content {
    width: 100% !important;
    max-width: var(--desktop-panel-width) !important;
  }

  #side-menu .side-menu-overlay {
    width: 100% !important;
    max-width: var(--desktop-panel-width) !important;
  }

  /* Fixed action bars / continue buttons must stay inside the left panel */
  #services-select-master-btn.services-continue-btn,
  .services-continue-btn,
  #masters-select-time-btn-container.masters-select-time-btn-container,
  .masters-select-time-btn-container {
    left: 16px !important;
    right: calc(100vw - var(--desktop-panel-width) + 16px) !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Global book button bar must stay inside the left panel */
  #global-book-btn.global-book-btn,
  .global-book-btn {
    left: 0 !important;
    right: calc(100vw - var(--desktop-panel-width)) !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Loader stays full-screen */
  #loader.loader {
    z-index: 9999;
  }

  /* Compact Home on desktop so "быстрый доступ" чаще попадает без прокрутки */
  #screen-home .home-content {
    min-height: auto; /* override base min-height:100vh */
    padding: 16px 18px 20px 18px;
  }

  #screen-home .header {
    padding: 16px 18px 0 18px;
  }

  #screen-home .balance-block {
    padding: 22px;
    margin-bottom: 18px;
  }

  #screen-home .balance-amount-wrapper {
    margin-bottom: 24px;
  }

  #screen-home .promotions-wrapper {
    margin-bottom: 18px;
  }

  #screen-home .promotions-tabs {
    margin: 0 0 12px 0;
  }

  #screen-home .quick-access-wrapper {
    margin-bottom: 10px;
  }

  /* Fix "Быстрый доступ" on desktop:
     base uses 100vw for card width → breaks inside fixed left panel.
     On desktop we show all cards in a 3-col grid without horizontal scroll. */
  #screen-home .quick-access-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
  }

  #screen-home .quick-access-card {
    min-width: 0 !important;
    width: 100%;
    padding: 18px 10px;
    border-radius: 22px;
    box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.18);
  }

  #screen-home .quick-access-icon {
    width: 42px;
    height: 42px;
  }

  /* Slightly smaller promo cards so the section is less tall */
  #screen-home .promotion-card {
    max-width: 260px;
    max-height: 260px;
  }

  /* Hide any old home right panel if present (safety) */
  #screen-home .home-right,
  #screen-home .home-desktop-layout {
    display: block;
  }
}

/* On mobile/tablet: completely hide the desktop right panel */
@media (max-width: 899px) {
  #desktop-right-video.desktop-right-video {
    display: none !important;
  }
}