/* /css/netstudio-shell.css */

/* SHELL THEME */
:root{
  color-scheme:dark;

  --shell-page-background:#000000;
  --shell-text:#ffffff;

  --shell-header-icon:#ffffff;

  --shell-menu-background:#000000;
  --shell-menu-header-background:rgba(0,0,0,.85);
  --shell-menu-header-border:rgba(255,255,255,.15);

  --shell-menu-card:#1c1c1e;
  --shell-menu-item-border:rgba(255,255,255,.10);
  --shell-menu-item-active:rgba(255,255,255,.06);
  --shell-menu-chevron:rgba(255,255,255,.30);
  --shell-menu-close:rgba(255,255,255,.50);
  --shell-menu-tap:rgba(255,255,255,.08);
}

@media (prefers-color-scheme:light){
  :root{
    color-scheme:light;

    --shell-page-background:#ffffff;
    --shell-text:#0b0b10;

    --shell-header-icon:#0b0b10;

    --shell-menu-background:#f2f2f7;
    --shell-menu-header-background:rgba(255,255,255,.88);
    --shell-menu-header-border:rgba(0,0,0,.12);

    --shell-menu-card:#ffffff;
    --shell-menu-item-border:rgba(0,0,0,.10);
    --shell-menu-item-active:rgba(0,0,0,.05);
    --shell-menu-chevron:rgba(11,11,16,.30);
    --shell-menu-close:rgba(11,11,16,.50);
    --shell-menu-tap:rgba(0,0,0,.06);
  }
}


/* SHELL BASE */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  background:var(--shell-page-background);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    system-ui,
    sans-serif;
  color:var(--shell-text);
  -webkit-font-smoothing:antialiased;
}

body.menu-open{
  overflow:hidden;
}


/* HEADER */
.hamburger{
  position:fixed;
  top:max(24px,env(safe-area-inset-top));
  right:22px;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:8px;
  margin:-8px;

  background:none;
  border:none;
  color:var(--shell-header-icon);

  font-size:32px;
  line-height:1;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.page-logo{
  position:fixed;
  top:max(24px,env(safe-area-inset-top));
  left:22px;
  z-index:50;

  display:flex;
  align-items:center;
  justify-content:center;

  width:64px;
  height:64px;
  border-radius:999px;

  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.page-logo img{
  width:58px;
  height:auto;
  display:block;
}


/* NAVIGATION MENU */
.side-menu{
  position:fixed;
  top:0;
  left:50%;

  width:100%;
  max-width:420px;
  height:100dvh;

  transform:translateX(50%);

  background:var(--shell-menu-background);

  z-index:100;
  visibility:hidden;

  transition:
    transform .4s cubic-bezier(.32,.72,0,1),
    visibility .4s;
}

.side-menu.open{
  visibility:visible;
  transform:translateX(-50%);
}

.menu-slider{
  display:flex;
  width:300%;
  height:100%;

  transition:
    transform .35s cubic-bezier(.32,.72,0,1);
}

.menu-slider.show-products{
  transform:translateX(-33.3333%);
}

.menu-slider.show-support{
  transform:translateX(-66.6666%);
}

.menu-view{
  width:33.3333%;
  height:100%;

  display:flex;
  flex-direction:column;
  flex-shrink:0;

  background:var(--shell-menu-background);
  color:var(--shell-text);
}

.menu-header{
  position:relative;
  z-index:10;

  height:calc(50px + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--shell-menu-header-background);
  border-bottom:.5px solid var(--shell-menu-header-border);

  color:var(--shell-text);

  font-size:17px;
  font-weight:600;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.close-btn,
.back-btn{
  position:absolute;
  bottom:0;

  height:50px;

  display:flex;
  align-items:center;

  padding:0 16px;

  background:none;
  border:none;
  color:var(--shell-text);

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.close-btn{
  right:0;
  color:var(--shell-menu-close);
  font-size:22px;
}

.back-btn{
  left:0;
  font-size:17px;
  gap:4px;
}

.back-icon{
  font-size:24px;
  line-height:1;
  margin-top:-2px;
}

.scroll-area{
  flex:1;
  overflow-y:auto;

  padding-top:24px;
  padding-bottom:max(
    40px,
    env(safe-area-inset-bottom)
  );

  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

.menu-group{
  margin:0 16px 24px;

  overflow:hidden;

  background:var(--shell-menu-card);
  border-radius:10px;
}

@media (prefers-color-scheme:light){
  .menu-group{
    box-shadow:
      0 10px 30px rgba(15,23,42,.06);
  }
}

.menu-item{
  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:14px 16px;

  color:var(--shell-text);
  text-decoration:none;

  font-size:17px;

  border-bottom:.5px solid var(--shell-menu-item-border);

  cursor:pointer;
  -webkit-tap-highlight-color:var(--shell-menu-tap);
}

.menu-item:last-child{
  border-bottom:none;
}

.menu-item:active{
  background:var(--shell-menu-item-active);
}

.chevron{
  color:var(--shell-menu-chevron);
  font-size:18px;
}


/* FOOTER / PRODUCT MAP
   The footer intentionally stays black
   in both Light and Dark appearance.
*/
.ns-footer{
  max-width:760px;
  margin:0 auto;

  padding:
    56px
    22px
    max(
      42px,
      env(safe-area-inset-bottom)
    );

  border-top:1px solid rgba(255,255,255,.12);

  color:#8f8f99;
  background:#000000;
}

.ns-footer-crumbs{
  display:flex;
  align-items:center;
  gap:12px;

  padding-bottom:24px;
  margin-bottom:6px;

  border-bottom:1px solid rgba(255,255,255,.14);

  font-size:18px;
  color:#a1a1aa;
}

.ns-footer-logo{
  width:26px;
  height:auto;
  display:block;
  opacity:.86;
}

.ns-footer-crumbs a,
.ns-footer-crumbs span{
  color:#a1a1aa;
  text-decoration:none;
}

.ns-footer-group{
  border-bottom:1px solid rgba(255,255,255,.14);
}

.ns-footer-group summary{
  min-height:56px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  list-style:none;

  color:#f5f5f7;

  font-size:18px;
  font-weight:500;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.ns-footer-group summary::-webkit-details-marker{
  display:none;
}

.ns-footer-group summary::after{
  content:"⌄";

  color:#8f8f99;
  font-size:20px;

  transition:transform .2s ease;
}

.ns-footer-group[open] summary::after{
  transform:rotate(180deg);
}

.ns-footer-group a{
  display:block;

  padding:0 0 12px;

  color:#a1a1aa;
  text-decoration:none;

  font-size:15px;
  line-height:1.35;
}

.ns-footer-group a:last-child{
  padding-bottom:20px;
}

.footer-contact{
  margin-top:40px;

  color:#8f8f99;

  font-size:15px;
  line-height:1.6;
}

.footer-contact a{
  color:#ffffff;
  text-decoration:none;
}

.footer-country{
  margin-top:34px;

  color:#ffffff;
  font-size:17px;
}

.footer-copyright{
  margin-top:36px;

  color:#8f8f99;

  font-size:15px;
  line-height:1.5;
}

.footer-links{
  margin-top:10px;

  display:flex;
  flex-wrap:wrap;
  gap:10px;

  color:#8f8f99;

  font-size:15px;
  line-height:1.7;
}

.footer-links a{
  color:#8f8f99;
  text-decoration:none;
}

.footer-links a:hover{
  color:#ffffff;
}