/* Default light theme */
:root {
  --background-color: #ffffff;
  --line-border-color: #e6e6e6;
  --appearing-section-box-back: #ffffffaa;
  --appearing-section-box-shadow: #dbdbdb 0px -1px 15px -3px;
  --text-color: #000000;
  --slider-box-shadow: 0px 1px 6px -2px rgba(66, 68, 90, 1);
  --slider-box-shadow-inner: inset 0px 1px 6px -2px rgba(66, 68, 90, 1);
  --slider-option-color-unchecked: #ababab;
}
/* Dark theme */
[data-theme="dark"] {
  --background-color: #41424C;
  --line-border-color: #606382;
  --appearing-section-box-back: #41424Caa;
  --appearing-section-box-shadow: #000000 0px -1px 15px -3px;
  --text-color: #ffffff;
  --slider-box-shadow: 0px 1px 6px -2px rgba(171, 209, 198, 1);
  --slider-box-shadow-inner: inset 0px 1px 6px -2px rgba(171, 209, 198, 1);
  --slider-option-color-unchecked: #6c7573;
  
  /* --text-color: #abd1c6; test idea */
}

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: var(--background-color);
  transition: background-color 0.3s ease, color 0.3s ease; /* for smooth switch*/
  overflow: hidden;
}
body {
  font-family: Rubik Light, Calibri, Verdana, Arial;
  color: var(--text-color);
}
@font-face {
  font-family: Rubik Light;
  src: url('/static/fonts/Rubik Light.ttf');
}
a {
  text-decoration: none;
  color: inherit;
}
/* UPPER BARS */


.statusbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 59px;
  background-color: var(--background-color);
  z-index: 10;
}

.statusbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

.statusbar.online::before {
  background: linear-gradient(180deg, rgba(76, 175, 80, 1) 0%, rgba(76, 175, 80, 0.7) 65%, rgba(76, 175, 80, 0) 100%);
  opacity: 1;
}

.statusbar.offline::before {
  background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0.7) 65%, rgba(255, 0, 0, 0) 100%);
  opacity: 1;
}
.statusbar.fade-out::before {
  opacity: 0; /* Плавно исчезает */
}
.navbar {
  position: fixed;
  top: 59px; /* Смещаем вниз на высоту navbar_unused */
  /* margin-top: 50px; */
  height: 50px;
  width: 100%;
  /* background-color: aqua; */
  background-color: var(--background-color);
  /* background-color: green; */
  transition: transform 0.3s ease-in-out;
  z-index: 9;
  display: flex;
  justify-content: center;
}
.navbar_wrapper {
  width: 94%;
  border-bottom: 1px solid var(--line-border-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.section_name {
  font-size: 32px;
  color: var(--text-color);
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 15px;
}
.avatar_section{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.offline_mode{
  margin-top: auto;
  /* margin-bottom: 0px; */
  width: 25px;
  height: 25px;
  /* border: 2px red solid; */
  background-image: url('/static/images/no-wifi.png');
  background-size: 100%;
  position: relative;
  display: none;
  z-index: 11;
}
[data-theme="dark"] .offline_mode {
  /* filter: invert(100%); flip colors for dark mode */
  /* filter: sepia(100%) saturate(0%) brightness(150%) hue-rotate(0deg); */

  background-image: url('/static/images/no-wifi_2.png');
}
.avatar_house{
  position: relative;
}
.avatar {
  position: relative;
  width: 45px;
  height: 45px;
  background-image: url('/static/images/user.png');
  background-size: 100%;
  z-index: 11;
  /* filter: drop-shadow(1px 1px 1px rgb(8, 8, 8)); */
}
[data-theme="dark"] .avatar {
  filter: invert(100%); /* flip colors for dark mode */
}
/* BOTTOM BARS WITH NAV ICONS (BUTTONS) */
.tabbar {
  position: fixed; /* Set the navbar to fixed position */
  bottom: 34px; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  height: 50px;
  background-color: var(--background-color);
  z-index: 5;
  display: flex;
  justify-content: center;
}
.tabbar_wrapper {
  width: 94%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--line-border-color);
}
.previous_button, .home_button, .launch_button,.model_button,.orbit_button,.stat_button,.mail_button, .telegram_button {
  width: 45px;
  height: 45px;
  /* margin-top: auto;
  margin-bottom: auto; */
  margin: 0;
  align-self: flex-end; 
}
#previous_button, #home_button, #launch_button, #model_button, #orbit_button, #stat_button {
  display: none; /* Initially hidden */}
.previous_button{
  background-image: url('/static/images/previous.png');
  background-size: 100%;
}
[data-theme="dark"] .previous_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
.home_button {
  background-image: url('/static/images/home.png');
  background-size: 100%;
}
[data-theme="dark"] .home_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
.launch_button {
  background-image: url('/static/images/rocket-2.png');
  background-size: 100%;
}
[data-theme="dark"] .launch_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
.model_button{
  background-image: url('/static/images/3d-cube.png');
  background-size: 100%;
}
[data-theme="dark"] .model_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
/* here should be orbit, statistics and other buttons */
/* BOTTOM BARS_FOR INDEX PAGE ONLY */
.tabbar_wrapper_info {width: 94%;
  display: none;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-border-color);
}
.tabbar_copyright {
}
.tabbar_social_media {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.mail_button{
  background-image: url('/static/images/email.png');
  background-size: 100%;
  margin-right: 20px;
}
.telegram_button{
  background-image: url('/static/images/telegram.png');
  background-size: 100%;
}
[data-theme="dark"] .mail_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
[data-theme="dark"] .telegram_button { /* flip colors for dark mode */
  filter: invert(100%); 
}
.homebar {
  position: fixed; /* Set the navbar to fixed position */
  bottom: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  height: 34px;
  background-color:var(--background-color);
  z-index: 10;
}
/* USER SETTINGS SECTION */
.user_settings_background {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: var(--appearing-section-box-back);
  backdrop-filter: blur(2px); /* Blur intensity */
  z-index: 20;
}
.user_settings {
  position: fixed;
  height: 0;
  width: 100%;
  z-index: 100;
  transition: 1s;
  bottom: 0;
  left: 0;
  background-color: var(--background-color);
  font-size: 20px;
  box-shadow: var(--appearing-section-box-shadow);
}
.user_settings_title_wrapper {
  width: 94%;
  height: 50px;
  font-size: 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-border-color);
  align-items: center;
}
.x-icon {
  width: 35px;
  height: 35px;
  position: relative;
  cursor: pointer;
}
.x-icon::before, .x-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px; /* Thickness of the X */
  background:var(--text-color);
}
.x-icon::before {
  transform: rotate(45deg);
}
.x-icon::after {
  transform: rotate(-45deg);
}

.user_settings_wrapper {
  width: 94%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}
/* USER SETTINGS SECTION__LANGUAGE & THEME SETTINGS__SWITCHER */
.triple-switch {
  display: inline-flex;
  position: relative;
  background: var(--background-color);
  border-radius: 15px;
  overflow: hidden;
  height: 40px;
  width: 80%; 
  box-shadow: var(--slider-box-shadow-inner);
}
.triple-switch input[type="radio"] {
  display: none;
}
.triple-switch .switch-label {
  flex: 1 1 0;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
  font-weight: 500;
  color: var(--slider-option-color-unchecked);
}
.triple-switch input[type="radio"]:checked + .switch-label {
  /* color: #000; */
  color: var(--text-color);
}
/* USER SETTINGS SECTION__THEME SETTINGS__SWITCHER */
.triple-switch .switch-slider-2 {
  position: absolute;
  top:50%;
  left: 0;
  height: 38px;
  width: 33.3333%;
  background: var(--background-color);
  border-radius: 14px;
  z-index: 1;
  transition: left 0.2s;
  box-shadow: var(--slider-box-shadow);
  transform: translateY(-50%);
}
.triple-switch input#option_light:checked ~ .switch-slider-2 { left: 0%; }
.triple-switch input#option_system:checked ~ .switch-slider-2 { left: 33.3333%; }
.triple-switch input#option_dark:checked ~ .switch-slider-2 { left: 66.6666%; }
/* here should be part about hand switcher */
/* USER SETTINGS SECTION__THEME SETTINGS__BLOCK */
.settings_theme_wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-border-color);
  padding-bottom: 10px;
}
.settings_title{
  margin-bottom: 10px;
}
.settings_theme_switcher {
  width: 96%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}
.light_icon,.dark_icon {
  width: 40px;
  height: 40px;
  background-size: 100%;
}
[data-theme="dark"] .light_icon { /* flip colors for dark mode */
  filter: invert(100%); 
}
[data-theme="dark"] .dark_icon { /* flip colors for dark mode */
  filter: invert(100%); 
}
.light_icon {
  background-image: url('/static/images/lightbulb.png');
}
.dark_icon {
  background-image: url('/static/images/darkbulb.png');
}
.theme_descr {
  margin-top: 10px;
  font-size: 12px;
}

/* NEXT VERSIONS */
/* BOTTOM BARS__NEXT VERSIONS */
/* .orbit_button{
  background-image: url('/static/images/orbit.png');
  background-size: 100%;
}
.stat_button{
  background-image: url('/static/images/business.png');
  background-size: 100%;
} */
/* USER SETTINGS SECTION__LANGUAGE SETTINGS */
/* .settings_language {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: #e6e6e6 1px dotted;
} */
/* USER SETTINGS SECTION__LANGUAGE SETTINGS__SWITCHER */
/* .triple-switch .switch-slider {
  position: absolute;
  top:50%;
  left: 0; 
  height: 38px;
  width: 33.3333%;
  background: #fff;
  border-radius: 14px;
  z-index: 1;
  transition: left 0.2s;
  box-shadow: 0px 1px 6px -2px rgba(66, 68, 90, 1);
  transform: translateY(-50%);
}
.triple-switch input#option1:checked ~ .switch-slider { left: 0%; }
.triple-switch input#option2:checked ~ .switch-slider { left: 33.3333%; }
.triple-switch input#option3:checked ~ .switch-slider { left: 66.6666%; } */
/* USER SETTINGS SECTION__HAND SETTINGS__SWITCHER */
/* .double-switch {
  display: inline-flex;
  position: relative;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  height: 40px;
  width: 150px; 
  box-shadow: inset 0px 1px 6px -2px rgba(66, 68, 90, 1);
}
.double-switch input[type="radio"] {
  display: none;
}
.double-switch .switch-label {
  flex: 1 1 0;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  z-index: 2;
  transition: color 0.2s;
  font-weight: 500;
  color: rgb(171, 171, 171);
}
.double-switch input[type="radio"]:checked + .switch-label {
  color: #000;
}
.double-switch .switch-slider-3 {
  position: absolute;
  top:50%;
  left: 0;
  height: 38px;
  width: 49%;
  background: #fff;
  border-radius: 14px;
  z-index: 1;
  transition: left 0.2s;
  box-shadow: 0px 1px 6px -2px rgba(66, 68, 90, 1);
  transform: translateY(-50%);
}
.double-switch input#option21:checked ~ .switch-slider-3 { left: 0%; }
.double-switch input#option22:checked ~ .switch-slider-3 { left: 50%; } */