:root {
  --basecolor: #E87A1E;
  --basecolor-rgb: 232, 122, 30;
  --hovercolor: #D06A15;
  --hovercolor-rgb: 208, 106, 21;
  --activecolor: #9ca3af;
  --scrollthumbcolor: #d1d5d8;
  --scrollthumbcolor-rgb: 209, 213, 216;
  --activecolor-rgb: 156, 163, 175;
  --background-elements: #efefef;
  --background-elements-rgb: 239, 239, 239;
  --background-info: #f3f4f6;
  --background-info-rgb: 243, 244, 246;
  --frostedbg: rgba(255, 255, 255, 0.4);
  --graylight:#E8EAED;
  --squarebuttonscolor: rgba(255, 255, 255, 1);
  --map-menu-in-modal-color: #e8eaed;
  --whitecolor:#ffffff;
  --whitemapmenucolor:#ffffff;
  /* --whitemapmenucolor:rgba(255, 255, 255, 0.7); */
}
/* TODO: breackpoint a 768px */
.noupunt-signature {
  font-family: "NHG-R", sans-serif;
  position: fixed;
  bottom: 16px;
  right: 40px;
  z-index: 9999;
  font-size: 12px;
  color: #fff;
}
.noupunt-signature a {
  color: white;
  text-decoration: none;
}
.noupunt-signature a:hover {
  text-decoration: underline;
}
html {
  height: 100%;
}

body {
  /* zoom:75%; */
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: "NHG-M", sans-serif;
  color: var(--basecolor);
  background-color: var(--basecolor);
  user-select: none;
}

body,
body * {
  -webkit-user-select: none;
  /* Chrome, Safari, Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Regla estàndard */
}

.frostedbg {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
}

#load-pano-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centra el contenidor */
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out; /* Transició suau per a l'opacitat */
}

#load-pano {
  width: 120px;
  height: 120px;
  animation: spin-load-pano 1s linear infinite; /* Només aplica la rotació */
  transform-origin: center; /* Gira sobre el seu propi centre */
}

@keyframes spin-load-pano {
  to {
    transform: rotate(360deg); /* Gira sobre el seu centre */
  }
}
/* *****************************************************************FIRST LOADER****************************************************** */
#first-loadder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200000000000000000000;
  height: 100%;
  width: 100%;
  background-color: var(--basecolor);
  /* z-index: var(--zindexfirstloader); */
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: all 600ms linear;
}

.loader-spinner {
  position: relative;
  display: inline-block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(white, transparent);
  mask: radial-gradient(circle, black 60%, transparent 61%);
  -webkit-mask: radial-gradient(circle, black 60%, transparent 61%);
  animation: spin 1s linear infinite;
}

#loader-mask {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 1;
  width: 76px;
  height: 76px;
  background-color: var(--basecolor);
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

.loadingtext {
  opacity: 0.3;
  text-align: center;
  color: #ffffff;
  margin-top: 20px;
  font-size: 0.8rem;
  pointer-events: none;
}

/* *****************************************************************FIRST LOADER****************************************************** */

#wrapper-main {
  width: 100%;
  height: 100%;
  display: none;
  opacity: 1;

  position: absolute;
  z-index: 10;
  pointer-events: none;

  transition: all 3s ease-out;
}
/* *****************************************************************TITLES****************************************************** */
#top-container,
#bottom-container,
#right-bottom-container,
#dropdown-lang-container,
#left-top-container,
#right-top-container,
#left-bottom-container,
#top-container * {
  pointer-events: none;
}

#top-container,
#bottom-container,
#right-bottom-container,
#dropdown-lang-container,
#left-top-container,
#right-top-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
}
#bottom-container {
  bottom: 48px;
  top: auto;
  flex-flow: row;
}
#right-bottom-container {
  right: 40px;
  left: auto;
  transform: translateX(0);
  bottom: 48px;
  top: auto;
  flex-flow: row;
  justify-content: flex-end;
}
#dropdown-lang-container {
  right: 40px;
  left: auto;
  transform: translateX(0);
  bottom: 94px;
  top: auto;
  transition: opacity 0.1s;
  display: none;
}

#right-top-container {
  right: 40px;
  transform: translateX(0);
  left: auto;
  top: 35px;
}
#left-top-container {
  left: 40px;
  transform: translateX(0);
  right: auto;
  top: 24px;
  align-items: flex-start;
  gap: 24px;
}

.left-top-container-buttons-wrapper {
  position: absolute;
  left: 40px;
  transform: translateX(0);
  right: auto;
  top: 94px;
  align-items: flex-start;
  gap: 24px;
  display: flex;
  flex-flow: column wrap;
  gap: 16px;
  z-index: 1000;
  cursor: pointer;
  pointer-events: none;
}
@media (max-width: 1319px) {
 .left-top-container-buttons-wrapper{
   flex-flow: column-reverse wrap;
 }
}
/* .left-top-container-buttons-wrapper {
  
  display: flex;
  flex-flow: column wrap;
  gap: 16px;
} */

#left-bottom-container {
  position: fixed;
  left: 0px;
  right: auto;
  top: auto;
  bottom: 0px;
  z-index: 1;
}

.left-bottom-container-buttons-wrapper {
  position: absolute;
  left: 40px;
  bottom: 48px;
  top: auto;
  right: auto;
  display: flex;
  flex-flow: column;
  z-index: 1000;
}

#top-container > * {
  flex: 0 0 auto;
  width: max-content;
}
.top-container-buttons-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  justify-content: center;
}
#top-container > .font-bold {
  /* max-width: 200px; */
  text-align: center;
}
/* Estil “frosted glass” per als botons */
.element-bg {
  background: var(--frostedbg);
  border-radius: 2px;
  padding: 8px 16px;
  display: flex;
}

/* Transicions específiques per als elements que canvien dinàmicament */
.element-bg.font-thin,
.element-bg.font-bold {
  transition: all 0.3s ease-in-out;
}
.element-button {
  background: var(--frostedbg);
  border-radius: 2px;
  padding: 8px 11px;
  display: flex;
  transition: all 0.1s;
  cursor: pointer;
}

.square-button {
  border-radius: 2px;
  padding: 10px 10px;
  color: var(--squarebuttonscolor);
  display: flex;
  gap: 8px;
}
.whire-button {
  background: transparent;
  border: 1px solid var(--squarebuttonscolor);
}
.lang-button {
  width: 38px;
  height: 38px;
}
#share-component > span {
  display: block;
}
@media (max-width: 992px) {
  #share-component > span {
    display: none;
  }
}
/* swap del món/creu - optimitzat per eliminar delay */
#lang-world-button {
  position: relative;
}
#lang-world-button .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease-in-out;
  pointer-events: none;
}
#lang-world-button .icon-visible,
#btn-info .icon-visible {
  opacity: 1;
  z-index: 1;
}
#lang-world-button .icon-hidden,
#btn-info .icon-hidden {
  opacity: 0;
  z-index: 0;
}

.solid-button,
.round-button {
  background-color: var(--basecolor);
  border: 1px solid var(--basecolor);
}
.round-button {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
}
.whire-button.hover,
.solid-button.hover,
.solid-button:hover {
  background: var(--hovercolor);
  border: 1px solid var(--hovercolor);
}

.whire-button.active,
.solid-button.active {
  background: var(--activecolor);
  border: 1px solid var(--activecolor);
}

.element-button.hover,
.ondown-button:hover {
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer !important;
}
.element-button.active,
.ondown-button:active {
  background: rgba(156, 163, 175, 1);
  transform: scale(0.97);
}

.element-button.disabled {
  opacity: 0.3;
}

.whire-button.lang-button.active {
  pointer-events: none;

  /* opcional: estil visual per indicar que està desactivat */
  cursor: default;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////// PER A MOBILS O TABLETS */
@media (hover: none) or (pointer: coarse) {
}



.left-button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.left-button-label {
  font-size: 12px;
  text-align: center;
  font-family: "NHG-R", sans-serif;
  color: var(--background-info);
}
@media (max-width: 768px) {
  .left-button-label {
    display: none;
  }
}