/* ---------------------------------------------------- */

/* style.css -- Main layout, resets, global styles only */

/* ---------------------------------------------------- */



/* Global reset / box-sizing */

  * {

    box-sizing: border-box;

    user-select: none;

    -webkit-user-drag: none;

    -webkit-touch-callout: none;

    -ms-content-zooming: none;



    /* From your original code: (you can remove if no IE10- support) */

    -ms-text-size-adjust: none;

    -moz-text-size-adjust: none;

    -webkit-text-size-adjust: none;

    text-size-adjust: none;

  }



/* Full-page layout */

  html, body {

    width: 100%;

    height: 100%;

    padding: 0;

    margin: 0;

    overflow: hidden;



    font-family: 'Inter', sans-serif;

    font-size: 16px;

    color: #fff;

    background-color: #728e90; /* Solid background color */

  }



/* Make all anchors inherit color, remove underline */

a, a:hover, a:active, a:visited {

  text-decoration: none;

  color: inherit;

}



/* Panorama container */

#pano {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



/* Scene Toggle Switch */

.sceneToggle {

  display: flex;

  border: 1px solid #374151;

  background-color: rgba(17, 24, 39, 0.5);

  border-radius: 0.5rem;

  padding: 0.25rem;

}

.sceneToggle input[type="radio"] {

  display: none;

}

.sceneToggle label {

  flex: 1;

  padding: 0.25rem 0.75rem;

  cursor: pointer;

  text-align: center;

  font-size: 0.875rem;

  border-radius: 0.375rem;

  color: #d1d5db;

  transition: background-color 0.2s, color 0.2s;

}

#option1:checked ~ label[for="option1"],

#option2:checked ~ label[for="option2"] {

  background-color: #e28673;

  color: #fff;

}



/* Bottom control bar */

#controlBar {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

}



/* Layer toggles */

.layer-toggle {

  padding: 0;

  border: none;

  background: transparent;

  cursor: pointer;

}

.layer-toggle span {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2rem;

  height: 2rem;

  border-radius: 0.5rem;

  background-color: #374151;

  border: 2px solid transparent;

  transition: background-color 0.2s, border-color 0.2s;

}

.layer-toggle.active span {

  background-color: #e28673;

  border-color: rgba(255, 255, 255, 0.5);

}

.layer-toggle svg {

  width: 18px;

  height: 18px;

  color: #fff;

}



#autorotateToggle .icon.on { display: none; }

#autorotateToggle .icon.off { display: block; }

#autorotateToggle.enabled .icon.on { display: block; }

#autorotateToggle.enabled .icon.off { display: none; }



#fullscreenToggle .icon.on { display: none; }

#fullscreenToggle .icon.off { display: block; }

#fullscreenToggle.enabled .icon.on { display: block; }

#fullscreenToggle.enabled .icon.off { display: none; }