:root {
  --header-color: #084b83;
  --body-color: #f0f6f6;
  --card-color: #e6f1f1;
  --btn-color: #d0e6e6;
  --btn-touch-color: #cadfdf;
}

.w-popup {
  width: 200px !important;
}

@media screen and (max-width: 780px) {
  .hidden_mobile {
    display: none !important;
    visibility: hidden !important;
  }

  .hidden_desktop {
    display: block !important;
    visibility: visible !important;
  }
}

@media screen and (min-width: 780px) {
  .hidden_mobile {
    display: block !important;
    visibility: visible !important;
  }

  .hidden_desktop {
    display: none !important;
    visibility: hidden !important;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--body-color) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
  margin: 0;
  overflow-x: hidden;
}

.border_round {
  border-radius: 20px;
}

.content {
  flex: 1; /* Permette al contenuto di espandersi per occupare lo spazio disponibile */
}

.w-100 {
  width: 100%;
}

.w-150 {
  width: 150px !important;
}

.btn-blue {
  width: 89%;
  min-height: 40px;
  --bs-btn-padding-y: 0.5rem !important;
  border-radius: 5px;
  background-color: var(--btn-color) !important;
  border: none !important; /* Rimuove eventuali bordi predefiniti */
  outline: none !important; /* Rimuove il contorno di focus */
  transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-blue:hover {
  background-color: #cadfdf !important;
}

.btn-blue:active,
.btn-blue.active {
  background-color: var(--btn-touch-color) !important;
  outline: 3px solid var(--card-color) !important;
  box-shadow: 0 0 0 6px var(--btn-touch-color),
    /* Bordo esterno semitrasparente */ 0 0 8px rgba(0, 0, 0, 0.1); /* Ombra per profondità */
}

@media screen and (max-width: 992px) {
  .btn-blue {
    min-width: auto;
  }
}

@media screen and (max-width: 770px) {
  .btn-blue {
    min-width: 150px;
  }
}

/** Spinner */
/* Style per il loader */
/* Variabili SCSS convertite in valori hardcoded */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@keyframes colors {
  0% {
    stroke: #4285f4;
  }
  25% {
    stroke: #de3e35;
  }
  50% {
    stroke: #f7c223;
  }
  75% {
    stroke: #1b9a59;
  }
  100% {
    stroke: #4285f4;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 46.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}

/** END Spinner */

.line {
  display: inline-block;
  vertical-align: middle;
  margin: 29px 0 26px;
  border-bottom: 1px solid #cecece;
  width: 100px;
}

/** Card */
#card {
  border-radius: 20px !important;
}

.card {
  border: 0px solid var(--body-color) !important;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  background: var(--card-color) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ombra leggera */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* transizioni fluide */
}
/** END Card */

.color-header {
  color: var(--header-color);
}

.basket-count {
  display: inline-block;
  width: 24px; /* Adjust the size as needed */
  height: 24px; /* Adjust the size as needed */
  border-radius: 50%; /* Make it a circle */
  background-color: rgb(255, 145, 0); /* Background color of the circle */
  color: white; /* Text color */
  text-align: center; /* Center the text horizontally */
  line-height: 24px; /* Center the text vertically */
  font-size: 14px; /* Adjust the font size as needed */
  font-weight: bold; /* Make the text bold */
  position: relative;
  top: -2px; /* Adjust the vertical position as needed */
  left: 5px; /* Adjust the horizontal position as needed */
}

.basket-count-mobile {
  position: absolute;
  top: -6px;
  right: -1px;
  background-color: rgb(255, 145, 0);
  color: white;
  width: 18px;
  height: 18px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}