body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

#viewer {
  width: 100%;
  height: 100%;
  border: none;
}

@font-face {
  font-family: "Rok Grotesk";
  src: url("../fonts/fonnts.com-Roc_Grotesk_Light.otf") format("opentype");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rok Grotesk";
  src: url("../fonts/fonnts.com-Roc_Grotesk_Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rok Grotesk";
  src: url("../fonts/fonnts.com-Roc_Grotesk_Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.watermark-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(286px + 26px + 26px);
  height: 40px;
  background: #181818;
  z-index: 10000;
}

.watermark-overlay.ready {
  background: white
}

@media (max-width: 640px) { /* =============================== RESPONSIVENESS */
  .watermark-overlay {
    height: 60px;
    width: 340px;
  }
}

/* ======================================== */
/* ========== UI COLORED BUTTONS ========== */

.clr-btn-black { background:black; }
.clr-btn-white { background:white; }
.clr-btn-gray { background:gray; }
.clr-btn-silver { background:silver; }
.clr-btn-beige { background:#dbca95; }
.clr-btn-brown { background:#574331; }

/* ========================================== */
/* ========== WHOLE PAGE CONTAINER ========== */

.all-buttons-container {
  pointer-events: none;

  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  position: fixed;
  inset: 0;

  /* width: 100%;
  height: 100%; */

  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: space-between; */
  /* align-items: center; */

  gap: 18px;

  font-family: "Rok Grotesk", sans-serif;
  font-weight: 350;

  opacity: 0;
  transition: opacity 0.4s ease;

  z-index: 10001;
}

.all-buttons-container.ready {
  opacity: 1;
}

.collapse-all-btn {
  pointer-events: auto;

  position: sticky;
  top: 8;

  align-self: center;

  width: 36px;
  height: 36px;
  flex-shrink: 0;

  border-radius: 50%;
  border: 1px solid #547684;
  background: #ffffffef;

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

  cursor: pointer;
  z-index: 10002;
}

@media (max-width: 640px) { /* =============================== RESPONSIVENESS */
  .all-buttons-container {
    display: flex;
    flex-direction: column;
    align-items: end;

    width: 340px;

    margin-left: auto;
    padding: 12px;

    overflow-y: auto;
    /* TODO: RESPONSIVENESS:
      - this overflow is good
      - there's no need to make this container's bg noticeable
      - maybe the only missing thing is a collapse button
    */
  }

  .all-buttons-container.collapsed {
    height: 24px;
    overflow: hidden;
  }

  .all-buttons-container.collapsed .collapse-all-btn {
    /* top: auto; */
    bottom: 0;
  }

  .all-buttons-container.collapsed .toggle-arrow {
    transform: translateY(-2px) rotate(45deg);
  }

  .collapse-all-btn {
    display: flex;
  }
}

/* ========================================= */
/* ========== INFO BUTTON & PANEL ========== */

.info-btn {
  pointer-events: auto;

  position: absolute;
  top: 2px;
  left: 160px;

  align-self: center;
  transform: translateX(40);

  width: 36px;
  height: 36px;
  flex-shrink: 0;

  border-radius: 50%;
  border: 1px solid #547684;
  background: #ffffffef;
  color: #547684;

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

  font-weight: 600;
  cursor: pointer;

  z-index: 10002;
}

@media (max-width: 640px) { /* =============================== RESPONSIVENESS */
  .info-btn {
    top: 8px;
    left: 20px;
  }
}

.info-btn.attention::after {
  content: '';

  position: absolute;
  inset: -6px;

  border-radius: 50%;
  border: 2px solid #547684;

  opacity: 0.7;
  animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.info-panel {
  position: fixed;
  bottom: 8px;
  left: 8px;
  height: calc(100vh - 116px);
  width: calc(100vw - 16px);

  background: #ffffffef;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 10099;
}

.info-panel.visible {
  opacity: 1;
  pointer-events: auto;
}

.click-catcher {
  position: fixed;
  inset: 0;
  z-index: 10098;
}

/* =============================== */
/* ========== CONTAINER ========== */

.hidden-container {
  display: none !important;
}

.button-group-container {
  pointer-events: auto;

  background: #EDF1F2;
  color: #547684;

  padding: 20px 28px 26px 31px;

  border: none;
  border-radius: 0;

  display: flex;
  flex-direction: column;

  gap: 12px;

  transition: max-height 0.18s ease, padding 0.18s ease;
  overflow: hidden;
}

.dimensions-container {
  padding-bottom: 45px !important;
  padding-right: 31px !important;
}

@media (max-width: 640px) { /* =============================== RESPONSIVENESS */
  .button-group-container {
    width: 280px;
  }
  
  .dimensions-container {
    width: 277px !important;
  }
}

/* ============================================ */
/* ========== HEADER (TITLE + ARROW) ========== */

.button-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.button-group-title {
  font-family: "Rok Grotesk", sans-serif;
  font-display: swap;
  font-weight: 700;
  font-stretch: expanded; /* closest to "wide bold" */
  font-size: 16px;
  line-height: 15px;
}

.text-in-button-group {
  font-family: "Rok Grotesk", sans-serif;
  font-display: swap;
  font-weight: 350;
  font-size: 16px;
  margin-left: -1px;
}

/* =========================== */
/* ========== ARROW ========== */

.toggle-arrow {
  width: 6px;
  height: 6px;

  border-right: 2px solid #547684;
  border-bottom: 2px solid #547684;

  transform: translateY(2px) rotate(-135deg);
  transition: transform 0.15s ease;
}

/* collapsed state */
.button-group-container.collapsed .toggle-arrow {
  transform: translateY(-3px) rotate(45deg);
}

/* ======================================== */
/* ========== COLLAPSING CONTENT ========== */

.button-group-content {
  max-height: 999px;
  /* overflow: hidden; */
  transition: opacity 0.15s ease;
}

.button-group-container.collapsed .button-group-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

/* shrink Y axis */
.button-group-container.collapsed {
  padding-bottom: 17px;
  gap: 0px;
}

/* =================================================== */
/* ========== COLOR SECTION & RIGHT SECTION ========== */

.color-section {
  pointer-events: auto;
  height: 100%;

  position: absolute;
  /* left: 26px;
  top: 8px; */
  margin-left: 26px;
  margin-top: 8px;

  display: flex;
  flex-direction: column;
  gap: 18px;
}

.right-section {
  pointer-events: auto;
  height: 100%;

  position: absolute;
  right: 26px;
  top: 8px;
  margin-right: 26px;
  margin-top: 8px;

  display: flex;
  flex-direction: column;
  gap: 18px;

  width: 286px;
}

@media (max-width: 640px) { /* =============================== RESPONSIVENESS */
  .color-section {
    position: relative;
    width: 100%;
    height: min-content;
    align-items: end;

    margin: 0;
  }
  .right-section {
    position: relative;
    width: 100%;
    height: min-content;
    align-items: end;

    margin: 0;
    right: auto;
    top: auto;
  }
  .color-section-title {
    margin-right: 60px; /* only until fullscreen button is customized */
  }
}

.color-section-title {
  font-family: "Rok Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 350;

  padding-left: 30px;
  margin-bottom: 5px;

  color: #547684;
}

.button-group {
  display: flex;
  flex-wrap: wrap;

  max-width: 218px; /* 6 buttons: 6 × 28px width  +  5 × 10px gap = 218px */

  gap: 10px;
}

.button-group button {
  width: 28px;
  height: 16px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
}

.button-group button:hover { /* =x=x=x=x=x=x=x=x=x=x= unchanged*/
  outline: 3px solid #54768445;
}

.button-group button.selected {
  outline: 5px solid #5476848c;
}

.button-group button.disabled {
  opacity: 0.35;

  outline: 3px solid #750000;
  cursor: not-allowed;
}

/* ================================ */
/* ========== DIMENSIONS ========== */

.slider-wrapper {
  position: relative;
}

/* range reset */
.slider-wrapper input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: none;
  cursor: pointer;
}

/* base line */
.slider-wrapper input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: #C2C2C2;
  border-radius: 999px;
}

/* thumb */
.slider-wrapper input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 12px;
  border-radius: 2px;
  background: #547684;
  margin-top: -4px;
}

/* Firefox */
.slider-wrapper input[type="range"]::-moz-range-track {
  height: 4px;
  background: #C2C2C2;
  border-radius: 999px;
}

.slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 12px;
  border-radius: 2px;
  background: #547684;
  border: none;
}

/* value label */
.slider-value {
  pointer-events: none;

  position: absolute;
  top: 27px; /* 7px below thumb */
  left: 0;

  padding: 5px 9px 3px;

  background: #ffffff;
  color: #2F3745;

  border: 1px solid #C5C5C5; 
  border-radius: 2px;

  font-family: "Rok Grotesk", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;

  white-space: nowrap;
  text-align: center;

  transform: translateX(-50%);
}

/* area limit reached feedback */
.slider-value.limit-hit {
  border-color: #547684;
  color: #547684;
  background: #ffffff;

  box-shadow: 0 0 0 3px #54768433;

  animation: limitPulse 0.25s ease-in-out 2;
}

@keyframes limitPulse {
  0% { transform: translateX(-50%) scale(1) }
  50% { transform: translateX(-50%) scale(1.05) }
  100% { transform: translateX(-50%) scale(1) }
}

.area-limit-tooltip {
  position: absolute;
  top: -28px;
  right: -20px;

  transform: translateX(-50%);

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

  padding: 4px 8px 1px;

  background: #ffffff;
  color: #547684;

  border: 1px solid #547684;
  border-radius: 2px;

  font-family: "Rok Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.area-limit-tooltip.visible {
  opacity: 1;
}

/* ============================= */
/* ========== BUTTONS ========== */

/* opcionais */
.text-button {                               /* TODO: THIS */
  display: flex;
  align-items: center;
  justify-content: center;

  width: auto !important;
  height: auto !important;

  padding: 2px 10px !important;

  background: #ffffff;
  color: #2F3745;

  border: 1px solid #C5C5C5; 
  border-radius: 4px;

  font-family: "Rok Grotesk", sans-serif;
  font-weight: 400;
  font-size: 14px;

  white-space: nowrap;
}

/* enter AR button */
/* reset button */
#enter-ar-anchor {
  display: flex;
}

.enter-ar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.enter-ar-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.enter-ar-btn,
.reset-btn {
  pointer-events: auto;

  width: 100%;
  padding: 17px;

  border: 1px solid #547684;
  border-radius: 0;

  background: #ffffffef;
  color: #547684;

  font-family: "Rok Grotesk", sans-serif;
  font-weight: 700;
  line-height: 1;
  font-size: 16px;

  cursor: pointer;
  transition:
    background-color 0.25s ease,
    opacity 0.25s ease;
}

.reset-btn.confirm {
  background-color: #54768445;
}

/* =x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x=x= BELOW: nothing was updated nor tested. */
.enter-ar-btn.confirm-enter {
  background-color: #5753d5;
}

.enter-ar-btn.entered {
  background-color: #f8c971;
}

.enter-ar-btn.confirm-close {
  background-color: #d7a950;
}

.enter-ar-btn.unavailable {
  cursor: not-allowed;
  opacity: 0.7;
}

/* =x=x=x=x=x=x=x=x=x=x=x=x=x=x=x= */
/* =x=x=x=x=  show AR model button */

/* .show-model-ar-btn {
  cursor: not-allowed;
  opacity: 0.7;

  background-color: #7173f8;
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.show-model-ar-btn.surface-found {
  cursor: auto;
  opacity: 1;
} */

/* =x=x=x=x=x=x=x=x=x=x=x=x=x=x=x= */
/* =x=x=x=x=  hide AR model button */

/* .hide-model-ar-btn {
  background-color: #7173f8;
  color: white;
  padding: 0.5em 1em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
} */

/* Esconde o grupo das fitas inicialmente */
#fitas {
  display: none;
}

/* =================================== */
/* ========== CUSTOM LOADER ========== */

#custom-loader {
  position: fixed;
  inset: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;

  opacity: 1;
  transition: opacity 0.6s ease;
}

#custom-loader.fade-out {
  opacity: 0;
}

.loader-inner {
  width: 100%;
  max-width: 500px;
  padding: 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-bar {
  width: 60%;
  height: 4px;
  background: #e5e5e5;
  border-radius: 1.5px;
  overflow: hidden;
}

.loading-progress {
  height: 100%;
  width: 0%;
  background: #446e60;
  border-radius: 1.5px;
  transition: width 0.2s ease;
}

#loading-animation {
  margin-top: 12px;
  max-width: 100%;
}