/* Nav bar styling */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

/* Google Fonts - Poppins */
/*@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");*/
/* Google Fonts - Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');


/*Future: move fonts to fonts folder*/
/* Define the regular Frutiger font */
@font-face {
  font-family: 'Frutiger';
  font-style: normal;
  font-weight: normal;
  src: local('Frutiger'), url("Frutiger.25d86d63a593.woff") format('woff');
  }

  @font-face {
  font-family: 'Frutiger Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Frutiger Bold'), url("Frutiger_bold.7f876071e951.woff") format('woff');
  }

  @font-face {
    font-family: 'A Gentle Touch';
    font-style: normal;
    font-weight: normal;
    src: local('A Gentle Touch'), url("A_Gentle_Touch.e6ced9eba3b3.ttf") format('truetype');
    }


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Frutiger';

  
  color: #3b3b3b;
}

.handwritten_title {
  font-family: 'A Gentle Touch' !important;
  color: #7CC9C9;
  font-size: 350%!important;
  line-height: 120%!important;
}

.fa-solid.fa-trash-can.fa-lg {
  color: white;
}


.logo {
    color: white;
    text-decoration: none; /* no underline */
}

.offcanvas {
    --bs-offcanvas-width: 300px;
}

.custom-navbar {
    background-color: #8ACACC;
}

.nav-link {
    font-size: 16px;
    color: #707070;
    font-weight: 400;
}

.nav-link {
    display: flex;
    align-items: center;
    margin: 4px 0;
    padding: 14px 12px;
    border-radius: 8px;
    text-decoration: none;
  }
  .nav-item .nav-link:hover {
    background-color: #4070f4;
  }
  .nav-link .icon {
    margin-right: 14px;
    font-size: 20px;
    color: #707070;
  }

  .nav-item .nav-link:hover .icon,
  .nav-item .nav-link:hover {
    color: #fff;
  }
  .overlay {
    position: fixed;
    top: 0;
    left: -100%;
    height: 1000vh;
    width: 200%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s ease;
    background: rgba(0, 0, 0, 0.3);
  }


/* Button styling */
.custom-btn {
    background-color: #8ACACC;
    border-color: #8ACACC; /* Optional: sets border color to match background color */
    color: #fff; /* Optional: sets text color to white */
}

.custom-btn:hover {
    background-color: #77b6d2; /* Optional: sets hover color */
    border-color: #77b6d2; /* Optional: sets hover border color */
    color: #fff;
}

/* POS STYLING */
/* Estilos CSS para el campo de entrada de cantidad pequeño */
/* Hide the arrows for number input */
.quantity-input-small::-webkit-inner-spin-button,
.quantity-input-small::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Estilo para el campo de entrada numérica */
.quantity-input-small {
  width: 50px; /* Ancho personalizado */
  padding: 0.375rem 0.75rem; /* Espaciado interno */
  text-align: center; /* Centra el número horizontalmente */
  border: 2px solid #ccc; /* Borde de 2px gris */
  border-radius: 8px; /* Borde redondeado */
  outline: none; /* Quita el resaltado al hacer clic */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* Transición suave */
}

/* Estilo para el campo de entrada numérica cuando está enfocado */
.quantity-input-small:focus {
  border-color: #6c757d; /* Cambia el color del borde cuando está enfocado */
}